MediaWiki:Common.css: Difference between revisions

Latest revision as of 12:17, 24 November 2025

/* CSS placed here will be applied to all skins */
@font-face {
    font-family: "Liberation Sans";
    src: url("/resources/fonts/LiberationSans-Regular.ttf");
}

@font-face {
    font-family: "Linux Libertine";
    src: url("/resources/fonts/LinLibertine_R.ttf");
}
#footer-info-lastmod {
  display: none !important;
}

/* Vector 2022: align user links (language, username, etc.) to the top */
body.skin-vector-2022 .vector-user-links-main {
    display: flex;          /* make sure it's flexbox */
    align-items: flex-start; /* align children to the top of the div */
}
/* Hide the Translate extension banner ("Translate this page; This page has changes…") */
body.skin-vector-2022 .mw-pt-translate-header {
    display: none !important;
}
/* Vector 2022 – hide entire tab/navigation bar (left-navigation) for all users */
.skin-vector-2022 #left-navigation {
    display: none !important;
}
/* Vector 2022: right-align items in the page toolbar (Edit / View history / Tools) */
.skin-vector-2022 .vector-page-toolbar-container {
    display: flex !important;
    justify-content: flex-end !important;  /* pushes items to the right */
    align-items: center;                   /* vertical alignment */
}

/* Remove Vector “switch to old look” link + banner */
.skin-vector-2022 .vector-feature-switch,
.skin-vector-2022 a[href*="mw-prefsection-rendering-skin"],
.skin-vector-2022 a[title*="legacy Vector"],
.skin-vector-2022 a[title*="old look"] {
    display: none !important;
}

.mw-anon.skin-vector-2022 #ca-nstab-main,   /* page title tab (Main Page / Article) */
.mw-anon.skin-vector-2022 #ca-talk,         /* Talk tab */
.mw-anon.skin-vector-2022 #ca-view,         /* "Read" tab */
.mw-anon.skin-vector-2022 #ca-history,      /* View history */
.mw-anon.skin-vector-2022 #ca-watch,
.mw-anon.skin-vector-2022 #ca-unwatch,
.mw-anon.skin-vector-2022 #ca-more {        /* "Tools" dropdown */
    display: none !important;
}





/* === GLOBAL TYPOGRAPHY === */

/* Base body text — Liberation Sans */
html,
body,
.mw-body,
.mw-parser-output {
   font-family: "Liberation Sans", Arial, Helvetica, sans-serif !important;
    font-size: 1.2rem;           /* base = 16px */
    line-height: 1.15;          
}

/* Paragraphs and list text */
p, li, td, th {
    font-size: 1.1rem;         /* slightly larger than base text */
}

/* === HEADINGS — Linux Libertine === */
h1, h2, h3, h4, h5, h6,
.firstHeading,
.mw-headline {
    font-family: "Linux Libertine", Georgia, serif;
}
.mw-body h1, .mw-heading1, .mw-body-content h1, .mw-body-content .mw-heading1 { font-size: 3rem; line-height: 1.15; }   



/* === SIDEBAR MENU === */
#mw-panel,
.vector-menu-content,
#p-navigation,
#p-tb,
#p-lang {
    font-family: "Liberation Sans", Arial, Helvetica, sans-serif;
    font-size: 1.2rem;         /* sidebar smaller for contrast */
    line-height: 1.4;
}







#partner-logos {
  display: flex;
  justify-content: right;
  align-items: right;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top:0.8rem;

}

#partner-logos img {
  height: 32px;
  object-fit: contain;     /* keeps aspect ratio, fits within the box */
  max-width: 100%;         /* prevents overflow */
  display: block;          /* removes inline gaps below images */
}






/* === Modern Wiki Table Styling === */
/* === Modern Wiki Table Styling === */
/* === Modern Wiki Table Styling === */
.wikitable.custom-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  background-color: #fff;
  border-radius: 0.5rem;
  overflow: hidden; /* so rounded corners clip correctly */
  font-size: 0.95rem;
}



/* Header cells */
.wikitable.custom-table th {
  background: linear-gradient(0deg,rgba(255, 255, 255, 1) 80%, rgba(0, 0, 255, 1) 100%);
  color: #000;
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid #d0d9ff;
}

/* Data cells */
.wikitable.custom-table td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid #eee;
}

/* Zebra striping */
.wikitable.custom-table tr:nth-child(even) td {
  background-color: #f9fbff;
}

/* Hover effect */
.wikitable.custom-table tr:hover td {
  background: #FFF;
  background: linear-gradient(0deg,rgba(0, 0, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 85%, rgba(0, 0, 255, 1) 100%);
}


/* Rounded corners for first & last rows */
.wikitable.custom-table tr:first-child th:first-child {
  border-top-left-radius: 0.5rem;
}
.wikitable.custom-table tr:first-child th:last-child {
  border-top-right-radius: 0.5rem;
}
.wikitable.custom-table tr:last-child td:first-child {
  border-bottom-left-radius: 0.5rem;
}
.wikitable.custom-table tr:last-child td:last-child {
  border-bottom-right-radius: 0.5rem;
}


/* === Mobile Responsive Tables (no HTML change needed) === */
@media (max-width: 768px) {

  /* Allow horizontal scrolling on narrow screens */
  .wikitable.custom-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent collapsing/squeezing of long cell content */
  .wikitable.custom-table tr,
  .wikitable.custom-table td,
  .wikitable.custom-table th {
    white-space: nowrap;
  }

  /* Optional: slightly reduce padding for small screens */
  .wikitable.custom-table td,
  .wikitable.custom-table th {
    padding: 0.5rem 0.75rem;
  }
}





/* Hide the automatic Tools and Special pages sections */
#p-tb { 
    display: none !important;
}





/* MAIN-PAGE */

/* === FONTS (yours) === */
@font-face {
  font-family: "Liberation Sans";
  src: url("/resources/fonts/LiberationSans-Regular.ttf");
}
@font-face {
  font-family: "Linux Libertine";
  src: url("/resources/fonts/LinLibertine_R.ttf");
}
.mw-pt-languages {
  background: linear-gradient(0deg,rgba(192, 192, 192, 1) 2%, rgba(255, 255, 255, 1) 22%);}
/* === GLOBAL TYPOGRAPHY === */
html, body, .mw-body, .mw-parser-output {
  font-family: "Liberation Sans", Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  line-height: 1.1;
}
p, li, td, th { font-size: 1.1rem; line-height: 1.1; }
h1, h2, h3, h4, h5, h6, .firstHeading, .mw-headline {
  font-family: "Linux Libertine", Georgia, serif;
}

/* === d*sign week layout === */
:root {
  --dw-border: #cfd8e3;
  --dw-card-bg: #f8fbff;
}

/* top ribbon */
.dw-ribbon {
  height: 26px;
  background: linear-gradient(#8aa9ff, #ffffff);
  border-radius: 6px;
  margin: 0 0 14px 0;
}


.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0rem 1rem 0rem 1rem;
  text-align: left;          /* centers text within its box */
  flex-wrap: wrap;    
  background: linear-gradient(0deg,rgba(255, 255, 255, 1) 80%, rgba(0, 0, 255, 1) 100%);
  background-size: 100% 200%;
  background-position: top;
  transition: background-position 0.4s ease-in-out;
}
.banner:hover {
  background-position: bottom;
}


.banner-icon img { 
width: 20vw; /* 15% of the viewport width */ 
height: auto; 
max-width: 650px; /* prevent it from getting too big */ 
min-width: 120px; /* prevent it from getting too small */ 
padding-left: 2rem;}

.dw-subtitle  {
font-size: 1.5rem;
  line-height: 1;
  text-align: left !important;
}

.dw-subtitle-banner {
font-size: 3rem;
}
.dw-subtitle strong {

  text-align: left !important;
}

.dw-subtitle a {
  color: #0000FF !important;           /* link color similar to your example */
  text-decoration: none;
}

.dw-subtitle a:hover {
  text-decoration: underline;
}


/* title & subtitle */
.dw-title {
  text-align: center;
  line-height: 1.2;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: .02em;
  display: block;
}


/* grid */
.dw-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  margin-top: 14px;
}
.dw-col {
  flex: 1 1 520px;
  min-width: 320px;
}

/* cards */
.dw-card {
  position: relative;
  border: 1px solid #C0C0C0;
  background: #FFFFFF !important;
  padding: 10px;
  margin-bottom: 10px;
}
.dw-card:hover {
background: linear-gradient(0deg,rgba(255, 255, 255, 1) 75%, rgba(192, 192, 192, 1) 100%)!important;
}
span.dw-headline.mw-headline {
  font-family: "Liberation Sans", Arial, Helvetica, sans-serif !important;

}

.dw-headline.mw-headline {
  font-family: "Liberation Sans", Arial, Helvetica, sans-serif !important;
  font-size: 2rem !important; 
}


.dw-card .dw-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
}

/* Icon column */
.dw-card .dw-row .dw-icon {
  grid-column: 1;
}

/* Text column */
.dw-card .dw-row .dw-content {
  grid-column: 2;
}

.dw-card .dw-icon img {
  height: auto;
  max-width: 160px;
}


/* Headline */
.dw-card .dw-headline {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0px 0 0px;
}

/* Body text (your existing rules) */
.dw-card .dw-body { 
  line-height: 1.6;
  width: 100%;
}
.dw-card .dw-body--spacious { 
  line-height: 1.8;
}



.dw-icon,
.dw-subtitle {
  background: transparent !important; /* ✅ makes logo + text boxes transparent */
}


/* Code blocks explicitly monospace (so they don't inherit) */
pre, code, kbd, samp, tt, .mw-code {
  font-family: "Liberation Sans", Arial, Helvetica, sans-serif !important;
  text-indent: 0 !important;
}

/* ===== Remove first-line indentation site-wide ===== */
.mw-parser-output p,
.mw-parser-output li p,
.mw-body-content p,
.dw-card .dw-body p {
  text-indent: 0 !important;
}


pre {
  margin: 0 !important;
  padding: 0rem !important; /* add a little inner spacing so text isn’t on the edge */
  background: linear-gradient(0deg,rgba(192, 192, 192, 1) 2%, rgba(255, 255, 255, 1) 22%);
  border: none !important;
  font-family: "Liberation Sans", Arial, Helvetica, sans-serif !important;
  white-space: pre-wrap !important; /* allows wrapping */
  word-break: break-word !important;
  line-height: 1 !important;
  
}

.dw-card .pre {
  display: block;        /* ensures it behaves as a block element */
  width: 100% !important;/* takes up the full width of .dw-card */
  box-sizing: border-box;/* includes padding/border in width calculation */
  margin: 0;
  padding: 0;
}


div.mw-content-ltr.mw-parser-output {
background: #FFFFFF;
background: linear-gradient(0deg,rgba(255, 255, 255, 1) 97%, rgba(192, 192, 192, 1) 100%);
padding: 1rem;
}



.mw-page-container { 
background-image: url("https://dsignweek.servus.at/images/9/9d/Bg-01.png"); background-repeat: repeat-y; 
/* ✅ repeat vertically */ background-size: 100% auto; 
/* stretch to page width, keep height natural 
*/ background-position: center top; 
/* start at the top, center horizontally 
*/ background-attachment: scroll; 
/* move with page scroll */ background-color: #ffffff; /* fallback behind transparent areas */ }


div#mw-head {
  background: transparent !important;
}


.dw-headline, .mw-headline {
margin: 0 !important;
}

.skin-vector-2022 header.vector-header { box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.8)!important; }

.skin-vector-2022 #vector-sticky-header.vector-sticky-header {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.8) !important;
}

/* Global link color */
a,
a:visited,
a:active {
    color: #0000FF !important;
}

/* Optional: link hover color (still blue but darker) */
a:hover {
    text-decoration: underline;
}



/* ===== Mobile: stack card content vertically ===== */
@media (max-width: 720px) {

 html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    .mw-page-container {
        max-width: 100vw !important;
    }

   .mw-parser-output {
        box-sizing: border-box;
        overflow-x: hidden !important;
}

  .banner-icon img, img {
        max-width: 100% !important;
        width: 100% !important;
        object-fit: contain;
}

.mw-page-container { 
    background-image: none !important;
    background-color: #ffffff !important;
    padding: 0 !important;   /* ← fixed */
    padding-right: 10px !important;   /* ← fixed */
    padding-left: 10px !important;   /* ← fixed */
    margin: 0 !important;
    box-sizing: border-box;
    overflow-x: hidden !important;
}
.dw-col {
    flex: 1 1 auto !important;  /* let them shrink freely */
    min-width: 0 !important;     /* remove the minimum width restriction */
}

.vector-header-container .mw-header, .vector-header-container .vector-sticky-header {
padding-left: 2rem;
padding-right:2rem;
box-sizing: border-box;
}
.mw-header {
    gap: 0;
}
.vector-dropdown-content {
    width: 100vw !important;
    max-width: none !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.8)!important;
}
.dw-card {
padding:0;}
div#content.mw-body {
padding: 0rem;}
div.mw-content-ltr.mw-parser-output {
padding: 0.5rem;
}

.banner-icon img { 
width: 75vw; /* 15% of the viewport width */ 
height: auto; 
max-width: 400px; /* prevent it from getting too big */ 
min-width: 80px; /* prevent it from getting too small */ 
padding-left: 0rem;}

  /* Stack everything in a column */
  .dw-card .dw-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;  /* full width for text block */
    gap: 10px;
  }

  /* Make the icon its own row and center it */
  .dw-card .dw-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;            /* remove any left/right spacing from desktop */
  }

  .dw-card .dw-icon img {
    width: 72px;          /* tidy mobile size */
    height: auto;
  }

  /* Ensure the text block fills width */
  .dw-card .dw-row > div {
    width: 100%;
  }

  /* Slight spacing tweaks for headings on mobile */
  .dw-card .dw-headline {
    margin: 4px 0 4px;
  }
   /* Stack footer sections vertically */
    #footer {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100% !important;
        padding: 1rem 1rem !important;
        box-sizing: border-box;
    }

    /* Each UL gets full width + centered */
    #footer ul {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important; 
        justify-content: space-between !important; 
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
.partner-logos {
  display: flex;
  flex-wrap: wrap;  
  justify-content: space-between !important;   
  align-items: center!important;     
  gap: 2.2rem;       
  padding: 0 1rem 1rem 1rem;    
  background: transparent;
}
#partner-logos { 
  justify-content: space-between !important;  
}
.partner-logos img {
  height: 24px;
  width: auto;
 object-fit:contain;
}

}