MediaWiki:Common.css: Difference between revisions
From MHWiki
No edit summary |
No edit summary |
||
(103 intermediate revisions by the same user not shown) | |||
Line 3: | Line 3: | ||
text-align:center; | text-align:center; | ||
margin:auto; | margin:auto; | ||
} | |||
.compact { | |||
padding:0px; | |||
} | |||
.italic { | |||
font-style:italic; | |||
} | |||
.nodesktop { | |||
display: none; | |||
} | } | ||
.wide { | .wide { | ||
white-space:nowrap; | white-space:nowrap; | ||
width: | width:98%; | ||
margin:auto; | |||
overflow-x:auto; | |||
} | |||
.numtable { | |||
font-size:0.8rem; | |||
width:98%; | |||
margin:auto; | |||
text-align:center; | |||
overflow-x:auto; | |||
} | |||
.itemtable { | |||
width:98%; | |||
margin:auto; | |||
overflow-x:auto; | |||
} | |||
.nowrap { | |||
white-space:nowrap; | |||
} | } | ||
Line 24: | Line 56: | ||
.important { | .important { | ||
background-color:#00FF0040; | background-color:#00FF0040; | ||
} | |||
.nav-center-top { | |||
width: fit-content; | |||
margin: auto; | |||
font-weight: bold; | |||
background-color: #00000033; | |||
border-radius: 5px; | |||
padding: 0px 15px; | |||
font-size: 22px; | |||
} | |||
.nav-center { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: flex-start; | |||
width: 100%; | |||
max-width: 100%; | |||
padding: 0; | |||
margin: 0; | |||
} | |||
.nav-center p { | |||
background-color: #F8F9FA; | |||
border-bottom: 4px solid #C8CCD1; | |||
padding: 5px 15px; | |||
text-wrap: nowrap; | |||
margin: 0px; | |||
flex-grow: 1; | |||
flex-shrink: 0; | |||
} | |||
.nav-center p:hover { | |||
background-color: #D7DDE3; | |||
border-bottom: 4px solid #5D7DA4; | |||
} | |||
@media screen and (orientation:landscape) { | |||
.nav-center p { | |||
flex-grow: 0; | |||
} | |||
.wide { | |||
width:100%; | |||
} | |||
} | |||
.mhnow-craftflex { | |||
display:flex; | |||
flex-wrap:wrap; | |||
justify-content:space-between; | |||
width:90%; | |||
margin: auto; | |||
} | |||
.mhnow-craftflex .content-table-wrapper { | |||
flex-grow: 1; | |||
} | |||
.mhnow-carveflex { | |||
display:flex; | |||
flex-wrap:wrap; | |||
justify-content:space-evenly; | |||
width:90%; | |||
margin: auto; | |||
} | |||
.mhnow-carveflex .content-table-wrapper { | |||
flex-grow: 1; | |||
} | |||
.mhnow-itemlistflex { | |||
display:flex; | |||
flex-wrap:wrap; | |||
justify-content:space-between; | |||
width:90%; | |||
margin: auto; | |||
} | |||
.mhnow-itemlistflex .mhnow-itemtable { | |||
flex-grow: 1; | |||
flex-basis:50%; | |||
} | |||
/* | |||
.mhnow-rare1 { | |||
background-color: #92ABAB; | |||
color: white; | |||
font-weight: bold; | |||
} | |||
.mhnow-rare2 { | |||
background-color: #49B955; | |||
color: white; | |||
font-weight: bold; | |||
} | |||
.mhnow-rare3 { | |||
background-color: #4D8BCC; | |||
color: white; | |||
font-weight: bold; | |||
} | |||
.mhnow-rare4 { | |||
background-color: #C36AE2; | |||
color: white; | |||
font-weight: bold; | |||
} | |||
.mhnow-rare5 { | |||
background-color: #F1B83B; | |||
color: white; | |||
font-weight: bold; | |||
} | |||
.mhnow-rare6, .mhnow-rare7, .mhnow-rare8, .mhnow-rare9, .mhnow-rare10 { | |||
background-color: #FC6A6A; | |||
color: white; | |||
font-weight: bold; | |||
} | |||
*/ | |||
.mw-collapsible .mw-collapsible-toggle { | |||
float:right; | |||
font-weight:bold; | |||
font-size:1.15rem; | |||
} | |||
/* Flex styles */ | |||
.threecol { | |||
display:flex; | |||
flex-wrap:wrap; | |||
justify-content:flex-start; | |||
} | |||
.threecol div { | |||
flex: 0 0 33%; | |||
} | |||
.threecen { | |||
display:flex; | |||
flex-wrap:wrap; | |||
justify-content:center; | |||
} | |||
.threecen div { | |||
flex: 0 0 33%; | |||
} | |||
.iconlist { | |||
display:flex; | |||
flex-wrap:wrap; | |||
justify-content:center; | |||
} | |||
.iconlist div { | |||
flex: 0 0 250px; | |||
} | |||
.twocol { | |||
display:flex; | |||
flex-wrap:wrap; | |||
justify-content:flex-start; | |||
} | |||
.twocol div { | |||
flex: 0 0 50%; | |||
} | |||
.mlistcol { | |||
display:flex; | |||
flex-wrap:wrap; | |||
justify-content:flex-start; | |||
} | |||
.mlistcol .left { | |||
flex: 0 0 30%; | |||
} | |||
.mlistcol .right { | |||
flex: 0 0 70%; | |||
} | |||
.fivecol { | |||
display:flex; | |||
flex-wrap:wrap; | |||
justify-content:flex-start; | |||
} | |||
.fivecol div { | |||
flex: 0 0 20%; | |||
} | |||
.iconpick { | |||
display:flex; | |||
flex-wrap:wrap; | |||
justify-content:center; | |||
} | |||
.iconpick div { | |||
flex: 0 0 120px; | |||
text-align:center; | |||
} | |||
.thumbpick { | |||
display:flex; | |||
flex-wrap:wrap; | |||
justify-content:center; | |||
} | |||
.thumbpick div { | |||
flex: 0 0 210px; | |||
text-align:center; | |||
margin: 10px; | |||
} | |||
@media screen and (orientation:portrait) { | |||
.threecol div { | |||
flex: 1 0 max-content; | |||
} | |||
.threecen div { | |||
flex: 0 0 100%; | |||
} | |||
.twocol div { | |||
flex: 0 0 100%; | |||
} | |||
.fivecol div { | |||
flex: 0 0 50%; | |||
} | |||
.mlistcol .left, .mlistcol .right { | |||
flex: 0 0 100%; | |||
} | |||
.thumbpick div { | |||
flex: 0 0 150px; | |||
text-align:center; | |||
} | |||
} | |||
/* Horizontal Tree Stuff */ | |||
.hortree { | |||
white-space: nowrap; | |||
overflow-x:scroll; | |||
font-size: 12px; | |||
} | |||
.horrow { | |||
display: flex; | |||
white-space: nowrap; | |||
flex-wrap: nowrap; | |||
align-content: flex-start; | |||
text-align: center; | |||
margin-bottom: 5px; | |||
} | |||
.horspace { | |||
flex-basis:160px; | |||
min-width:160px; | |||
} | |||
.horitem { | |||
background-color:white; | |||
flex-basis:160px; | |||
border: 1px solid gray; | |||
display:flex; | |||
flex-direction:column; | |||
align-items: center; | |||
box-sizing: border-box; | |||
min-width:160px; | |||
} | |||
.hortree div p { | |||
align-content:center; | |||
} | } |
Latest revision as of 00:10, 11 June 2024
/* CSS placed here will be applied to all skins */ .center { text-align:center; margin:auto; } .compact { padding:0px; } .italic { font-style:italic; } .nodesktop { display: none; } .wide { white-space:nowrap; width:98%; margin:auto; overflow-x:auto; } .numtable { font-size:0.8rem; width:98%; margin:auto; text-align:center; overflow-x:auto; } .itemtable { width:98%; margin:auto; overflow-x:auto; } .nowrap { white-space:nowrap; } .float { float:left; } .notice { background-color:#FFDD0040; } .warning { background-color:#FF001040; } .important { background-color:#00FF0040; } .nav-center-top { width: fit-content; margin: auto; font-weight: bold; background-color: #00000033; border-radius: 5px; padding: 0px 15px; font-size: 22px; } .nav-center { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; max-width: 100%; padding: 0; margin: 0; } .nav-center p { background-color: #F8F9FA; border-bottom: 4px solid #C8CCD1; padding: 5px 15px; text-wrap: nowrap; margin: 0px; flex-grow: 1; flex-shrink: 0; } .nav-center p:hover { background-color: #D7DDE3; border-bottom: 4px solid #5D7DA4; } @media screen and (orientation:landscape) { .nav-center p { flex-grow: 0; } .wide { width:100%; } } .mhnow-craftflex { display:flex; flex-wrap:wrap; justify-content:space-between; width:90%; margin: auto; } .mhnow-craftflex .content-table-wrapper { flex-grow: 1; } .mhnow-carveflex { display:flex; flex-wrap:wrap; justify-content:space-evenly; width:90%; margin: auto; } .mhnow-carveflex .content-table-wrapper { flex-grow: 1; } .mhnow-itemlistflex { display:flex; flex-wrap:wrap; justify-content:space-between; width:90%; margin: auto; } .mhnow-itemlistflex .mhnow-itemtable { flex-grow: 1; flex-basis:50%; } /* .mhnow-rare1 { background-color: #92ABAB; color: white; font-weight: bold; } .mhnow-rare2 { background-color: #49B955; color: white; font-weight: bold; } .mhnow-rare3 { background-color: #4D8BCC; color: white; font-weight: bold; } .mhnow-rare4 { background-color: #C36AE2; color: white; font-weight: bold; } .mhnow-rare5 { background-color: #F1B83B; color: white; font-weight: bold; } .mhnow-rare6, .mhnow-rare7, .mhnow-rare8, .mhnow-rare9, .mhnow-rare10 { background-color: #FC6A6A; color: white; font-weight: bold; } */ .mw-collapsible .mw-collapsible-toggle { float:right; font-weight:bold; font-size:1.15rem; } /* Flex styles */ .threecol { display:flex; flex-wrap:wrap; justify-content:flex-start; } .threecol div { flex: 0 0 33%; } .threecen { display:flex; flex-wrap:wrap; justify-content:center; } .threecen div { flex: 0 0 33%; } .iconlist { display:flex; flex-wrap:wrap; justify-content:center; } .iconlist div { flex: 0 0 250px; } .twocol { display:flex; flex-wrap:wrap; justify-content:flex-start; } .twocol div { flex: 0 0 50%; } .mlistcol { display:flex; flex-wrap:wrap; justify-content:flex-start; } .mlistcol .left { flex: 0 0 30%; } .mlistcol .right { flex: 0 0 70%; } .fivecol { display:flex; flex-wrap:wrap; justify-content:flex-start; } .fivecol div { flex: 0 0 20%; } .iconpick { display:flex; flex-wrap:wrap; justify-content:center; } .iconpick div { flex: 0 0 120px; text-align:center; } .thumbpick { display:flex; flex-wrap:wrap; justify-content:center; } .thumbpick div { flex: 0 0 210px; text-align:center; margin: 10px; } @media screen and (orientation:portrait) { .threecol div { flex: 1 0 max-content; } .threecen div { flex: 0 0 100%; } .twocol div { flex: 0 0 100%; } .fivecol div { flex: 0 0 50%; } .mlistcol .left, .mlistcol .right { flex: 0 0 100%; } .thumbpick div { flex: 0 0 150px; text-align:center; } } /* Horizontal Tree Stuff */ .hortree { white-space: nowrap; overflow-x:scroll; font-size: 12px; } .horrow { display: flex; white-space: nowrap; flex-wrap: nowrap; align-content: flex-start; text-align: center; margin-bottom: 5px; } .horspace { flex-basis:160px; min-width:160px; } .horitem { background-color:white; flex-basis:160px; border: 1px solid gray; display:flex; flex-direction:column; align-items: center; box-sizing: border-box; min-width:160px; } .hortree div p { align-content:center; }