Template:Styles/Portals.css: Difference between revisions
From Absit Omen Lexicon
((by SublimeText.Mediawiker)) |
((by SublimeText.Mediawiker)) |
||
Line 28: | Line 28: | ||
border-width:3px; | border-width:3px; | ||
vertical-align:top; | vertical-align:top; | ||
padding: | padding:.5rem; | ||
} | } | ||
.portal-column-container { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 1rem; | |||
} | |||
.portal-column-left { | .portal-column-left { | ||
width: 50%; | width: 50%; | ||
} | } | ||
.portal-column-right { | .portal-column-right { | ||
flex-grow: 1; | |||
} | } | ||
.portal-column-left-wide { | .portal-column-left-wide { | ||
width: 60%; | width: 60%; | ||
} | } | ||
.portal-column-left-extra-wide { | .portal-column-left-extra-wide { | ||
width: 70%; | width: 70%; | ||
} | } | ||
@media only screen and (max-width: 850px) { | @media only screen and (max-width: 850px) { | ||
/* Decouple the columns on narrow screens */ | /* Decouple the columns on narrow screens */ | ||
Line 59: | Line 56: | ||
.portal-column-right, | .portal-column-right, | ||
.portal-column-left-wide, | .portal-column-left-wide, | ||
.portal-column-left-extra-wide { | |||
.portal-column-left-extra-wide | width: 100%; | ||
.portal-column- | } | ||
.portal-column-container { | |||
display: block; | |||
} | } | ||
} | } | ||
.portal-footer { | .portal-footer { |
Revision as of 22:32, 22 December 2021
div.portal-box > h2 { clear: both; padding: 0.1em; text-align: center; font-family: sans-serif; font-size: 100%; margin-bottom: 0px; border-width: 1px 1px 0; border-style: solid; } div.portal-box > div { border-top-width: 1px; vertical-align: top; text-align: left; margin: 0 0 10px; padding: 0.5em; padding-top: 0.3em; border-width: 1px; border-style: solid; } /* For portals, added 2011-12-07 -bv On wide screens, show these as two columns On narrow and mobile screens, let them collapse into a single column */ .portal-container { width:100%; border-style:solid; border-width:3px; vertical-align:top; padding:.5rem; } .portal-column-container { display: flex; flex-direction: column; gap: 1rem; } .portal-column-left { width: 50%; } .portal-column-right { flex-grow: 1; } .portal-column-left-wide { width: 60%; } .portal-column-left-extra-wide { width: 70%; } @media only screen and (max-width: 850px) { /* Decouple the columns on narrow screens */ .portal-column-left, .portal-column-right, .portal-column-left-wide, .portal-column-left-extra-wide { width: 100%; } .portal-column-container { display: block; } } .portal-footer { margin:0.3em 0.2em 0.2em 0.3em; padding:0.3em 0.2em 0.2em 0.3em; text-align:right; } /*Portal Specific CSS */ div.infoMessage { background:#003232; border:1px solid #186565; } /* Characters Portal */ body.page-Portal_Characters .portal-container, body.page-Portal_Characters_test .portal-container { border-color:#996600; background:#1F0629; } body.page-Portal_Characters div.portal-box > h2,body.page-Portal_Characters_test div.portal-box > h2 { border-color:#996600; background: #220034; } body.page-Portal_Characters div.portal-box > div,body.page-Portal_Characters_test div.portal-box > div { border-color: #996600; background: #320045; } /*Chapters Portal*/ body.page-Portal_Chapters .portal-container, body.page-Portal_Chapters_test .portal-container { border-color: #ff8c00; background: #010140; } body.page-Portal_Chapters div.portal-box > h2,body.page-Portal_Chapters_test div.portal-box > h2 { border-color: #cc7001; background: #000055; } body.page-Portal_Chapters div.portal-box > div,body.page-Portal_Chapters_test div.portal-box > div { border-color: #cc7001; background: #000027; } /*Hogwarts Portal*/ body.page-Portal_Hogwarts .portal-container, body.page-Portal_Hogwarts_test .portal-container { border-color:#996600; background:#271c00; } body.page-Portal_Hogwarts div.portal-box > h2,body.page-Portal_Hogwarts_test div.portal-box > h2 { border-color: #320045; background: #5d4200; } body.page-Portal_Hogwarts div.portal-box > div,body.page-Portal_Hogwarts_test div.portal-box > div { border-color: #320045; background: #3e2c00; }