MediaWiki:Common.css: Difference between revisions
Myriad-admin (talk | contribs) Checking scaling of EU flag Tags: Mobile edit Mobile web edit |
Myriad-admin (talk | contribs) Checking for links to be in third column Tags: Mobile edit Mobile web edit |
||
Line 15: | Line 15: | ||
} | } | ||
/* === | /* === Three‐column layout === */ | ||
.drg-columns { | .drg-columns { | ||
display: flex; | display: flex; | ||
justify-content: space-between; | justify-content: space-between; | ||
align-items: flex-start; | align-items: flex-start; | ||
gap: | gap: 2em; | ||
max-width: 1200px; | max-width: 1200px; | ||
margin: 0 auto; | margin: 0 auto; | ||
flex-wrap: | flex-wrap: nowrap; | ||
} | } | ||
.drg-column { | .drg-column { | ||
flex: 1 1 | flex: 1 1 33%; | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
gap: 0.8em; | gap: 0.8em; | ||
min-width: 0; | |||
} | |||
.drg-column-left, | |||
.drg-column-right { | |||
text-align: left; | |||
} | } | ||
.drg-column-left a, | .drg-column-left a, | ||
.drg-column-right a { | .drg-column-right a { | ||
color: #000; | color: #000; | ||
Line 38: | Line 42: | ||
} | } | ||
.drg-column-left a:hover, | .drg-column-left a:hover, | ||
.drg-column-right a:hover { | .drg-column-right a:hover { | ||
text-decoration: underline; | text-decoration: underline; | ||
Line 48: | Line 51: | ||
background: #666; | background: #666; | ||
opacity: 0.4; | opacity: 0.4; | ||
align-self: stretch; | align-self: stretch; | ||
} | } | ||
Line 61: | Line 63: | ||
} | } | ||
.drg-eu-flag img { | .drg-eu-flag img { | ||
height: | height: 2.5em; | ||
width: auto; | |||
max-width: 100%; | max-width: 100%; | ||
} | } | ||
.drg-eu-text { | .drg-eu-text { | ||
Line 72: | Line 72: | ||
font-size: 0.9em; | font-size: 0.9em; | ||
max-width: 400px; | max-width: 400px; | ||
text-align: center; | |||
} | } | ||
Revision as of 14:39, 23 May 2025
/* === Hide native “Privacy/Terms/Desktop” bar === */
#footer-places {
display: none !important;
}
/* === DRG Footer container === */
#drg-footer {
border-top: 1px solid #ccc;
background: #fff;
padding-top: 2em;
font-family: sans-serif;
color: #000;
font-size: 0.95rem;
margin: 1em 0 2em;
}
/* === Three‐column layout === */
.drg-columns {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2em;
max-width: 1200px;
margin: 0 auto;
flex-wrap: nowrap;
}
.drg-column {
flex: 1 1 33%;
display: flex;
flex-direction: column;
gap: 0.8em;
min-width: 0;
}
.drg-column-left,
.drg-column-right {
text-align: left;
}
.drg-column-left a,
.drg-column-right a {
color: #000;
text-decoration: none;
}
.drg-column-left a:hover,
.drg-column-right a:hover {
text-decoration: underline;
}
/* Divider lines */
.drg-divider {
width: 1px;
background: #666;
opacity: 0.4;
align-self: stretch;
}
/* Center column specifics */
.drg-column-center {
text-align: center;
align-items: center;
}
.drg-eu-flag {
margin-bottom: 0.8em;
}
.drg-eu-flag img {
height: 2.5em;
width: auto;
max-width: 100%;
}
.drg-eu-text {
font-weight: bold;
line-height: 1.4;
font-size: 0.9em;
max-width: 400px;
text-align: center;
}
/* Disclaimer block */
.drg-disclaimer {
max-width: 900px;
margin: 2em auto 0;
padding: 1em 0 0;
border-top: 1px solid #eee;
font-size: 0.8em;
color: #666;
text-align: center;
}
.drg-disclaimer a {
color: #666;
text-decoration: underline;
}
/* === Responsive tweaks === */
@media (max-width: 768px) {
.drg-columns {
flex-direction: column;
align-items: center;
}
.drg-divider {
display: none;
}
.drg-column {
width: 100%;
text-align: center;
}
.drg-eu-text {
max-width: 80%;
}
}