Difference between revisions of "MediaWiki:Common.css"
From Olekdia Wiki
(34 intermediate revisions by the same user not shown) | |||
Line 47: | Line 47: | ||
.api-table table td { vertical-align:top !important; } | .api-table table td { vertical-align:top !important; } | ||
− | .api- | + | /* REMOVE |
− | .api- | + | .api-table td:nth-child(1) { width:1px !important; } |
+ | .api-table td:nth-child(2) { width:99% !important; } | ||
.api-table table { table-layout: fixed; } | .api-table table { table-layout: fixed; } | ||
+ | */ | ||
/* Horizontal scroll box */ | /* Horizontal scroll box */ | ||
Line 78: | Line 80: | ||
.responsive-thumb-float .thumb { | .responsive-thumb-float .thumb { | ||
clear: none; | clear: none; | ||
+ | } | ||
+ | |||
+ | .responsive-full-img img { | ||
+ | max-width: 100% !important; | ||
+ | height: auto !important; | ||
+ | } | ||
+ | |||
+ | .responsive-img img { | ||
+ | max-width: 90%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | @media only screen and (min-width: 1024px) { | ||
+ | .responsive-img img { | ||
+ | max-width: 85%; | ||
+ | height: auto; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media only screen and (min-width: 1280px) { | ||
+ | .responsive-img img { | ||
+ | max-width: 55%; | ||
+ | height: auto; | ||
+ | } | ||
} | } | ||
Line 136: | Line 162: | ||
/* For medium devices */ | /* For medium devices */ | ||
− | + | @media screen and (max-width: 1099px) and (min-width: 851px) { | |
− | + | #simpleSearch { | |
− | + | margin-left: -14em; | |
− | + | } | |
− | + | } | |
− | |||
/* For small devices, reset entire container, because its buttons got fixed position */ | /* For small devices, reset entire container, because its buttons got fixed position */ | ||
− | + | @media screen and (max-width: 850px) and (min-width: 480px) { | |
− | + | #mw-header-container { | |
− | + | padding: 0.78em 10.7em 0.75em 6.2em; | |
− | + | } | |
− | + | } | |
− | |||
/* Headers strips */ | /* Headers strips */ | ||
Line 156: | Line 180: | ||
} | } | ||
#mw-content h1.firstHeading { | #mw-content h1.firstHeading { | ||
− | border-bottom: solid 3px # | + | border-bottom: solid 3px #676e9f; |
} | } | ||
.color-middle { | .color-middle { | ||
− | background: # | + | background: #676e9f; |
} | } | ||
Line 169: | Line 193: | ||
/* Left strip color */ | /* Left strip color */ | ||
.color-left { | .color-left { | ||
− | background: # | + | background: #7a64a0; |
} | } | ||
.ns-0 .color-left, .ns-1 .color-left { | .ns-0 .color-left, .ns-1 .color-left { | ||
− | background: # | + | background: #7a64a0; |
} | } | ||
.ns-3000 .color-left, .ns-3001 .color-left, .ns-3002 .color-left, .ns-3003 .color-left { | .ns-3000 .color-left, .ns-3001 .color-left, .ns-3002 .color-left, .ns-3003 .color-left { | ||
− | background: # | + | background: #563a56; |
} | } | ||
.ns-3010 .color-left, .ns-3011 .color-left { | .ns-3010 .color-left, .ns-3011 .color-left { | ||
− | background: # | + | background: #743C71; |
} | } | ||
.ns-4000 .color-left, .ns-4001 .color-left { | .ns-4000 .color-left, .ns-4001 .color-left { | ||
Line 186: | Line 210: | ||
/* Right strip color */ | /* Right strip color */ | ||
.color-right { | .color-right { | ||
− | background: # | + | background: #7a64a0; |
} | } | ||
.ns-0 .color-right, .ns-1 .color-right { | .ns-0 .color-right, .ns-1 .color-right { | ||
− | background: # | + | background: #7a64a0; |
} | } | ||
.ns-3000 .color-right, .ns-3001 .color-right, .ns-3002 .color-right, .ns-3003 .color-right { | .ns-3000 .color-right, .ns-3001 .color-right, .ns-3002 .color-right, .ns-3003 .color-right { | ||
− | background: # | + | background: #563a56; |
} | } | ||
.ns-3010 .color-right, .ns-3011 .color-right { | .ns-3010 .color-right, .ns-3011 .color-right { | ||
− | background: # | + | background: #743C71; |
} | } | ||
.ns-4000 .color-right, .ns-4001 .color-right { | .ns-4000 .color-right, .ns-4001 .color-right { | ||
Line 203: | Line 227: | ||
/* Bottom strip color */ | /* Bottom strip color */ | ||
#mw-content-container { | #mw-content-container { | ||
− | border-bottom: solid 4px # | + | border-bottom: solid 4px #7a64a0; |
} | } | ||
.ns-0 #mw-content-container, .ns-1 #mw-content-container { | .ns-0 #mw-content-container, .ns-1 #mw-content-container { | ||
− | border-bottom: solid 4px # | + | border-bottom: solid 4px #7a64a0; |
} | } | ||
.ns-3000 #mw-content-container, .ns-3001 #mw-content-container, .ns-3002 #mw-content-container, .ns-3003 #mw-content-container { | .ns-3000 #mw-content-container, .ns-3001 #mw-content-container, .ns-3002 #mw-content-container, .ns-3003 #mw-content-container { | ||
− | border-bottom: solid 4px # | + | border-bottom: solid 4px #563a56; |
} | } | ||
.ns-3010 #mw-content-container, .ns-3011 #mw-content-container { | .ns-3010 #mw-content-container, .ns-3011 #mw-content-container { | ||
− | border-bottom: solid 4px # | + | border-bottom: solid 4px #743C71; |
} | } | ||
.ns-4000 #mw-content-container, .ns-4001 #mw-content-container { | .ns-4000 #mw-content-container, .ns-4001 #mw-content-container { | ||
border-bottom: solid 4px #000; | border-bottom: solid 4px #000; | ||
} | } |
Latest revision as of 06:58, 14 May 2022
/* CSS placed here will be applied to all skins */ /* Use awesomefont */ @import url("https://use.fontawesome.com/releases/v5.6.3/css/all.css"); /* Colors of namespaces */ /*.ns-3000 #content, .ns-3001 #content { background-color: #f5f5ff; }*/ /*.ns-3010 #content, .ns-3011 #content { background-color: #f7fcfa; }*/ /*.ns-4000 #content, .ns-4001 #content { background-color: #e2d2c6; }*/ .ns-3000 #p-logo a, .ns-3001 #p-logo a, .ns-3002 #p-logo a, .ns-3003 #p-logo a { background-image: url(./a/olekdia/wiki_resources/magic_intuition_logo.png) !important; } .ns-3010 #p-logo a, .ns-3011 #p-logo a, .ns-3012 #p-logo a, .ns-3013 #p-logo a { background-image: url(./a/olekdia/wiki_resources/time_planner_logo.png) !important; } .ns-4000 #p-logo a, .ns-4001 #p-logo a { background-image: url(./a/olekdia/wiki_resources/dev_logo.png) !important; } .ns-2 #p-logo a, .ns-4 #p-logo a, .ns-6 #p-logo a, .ns-8 #p-logo a, .ns-12 #p-logo a, .ns-14 #p-logo a { background-image: url(./a/olekdia/wiki_resources/olekdia_logo.png) !important; } /* Remove main tab */ #ca-nstab-main, #ca-nstab-prana_breath_news, #ca-nstab-project, #ca-nstab-image, #ca-nstab-category, #ca-nstab-help, #ca-nstab-mediawiki, #ca-nstab-template, #ca-nstab-time_planner, #ca-nstab-time_planner_news, #ca-nstab-magic_intuition, #ca-nstab-magic_intuition_news, #ca-nstab-development { display: none !important; } /* Remove talk tab */ #ca-talk { display: none !important; } /* Remove last modification in the footer */ #viewcount { display: none !important; } #lastmod { display: none !important; } .hidden-sp { display: none !important; } .square-btn { padding: 2px 5px !important; } /* Table for sound styles, two last cells should be minimal with buttons */ .fittable td:nth-child(2) { width:1px; } .fittable td:nth-child(3) { width:1px; } th h2 { margin-top: 0.5em !important; } th h3 { margin-top: 0.25em !important; margin-bottom: 0.25em !important; } .long-code code { word-break: break-all; } .api-table h3 { font-size: 1.1em !important; font-family: 'Consolas','Courier','Nimbus Mono','Liberation Mono','Courier New',monospace; } .api-table table td { vertical-align:top !important; } /* REMOVE .api-table td:nth-child(1) { width:1px !important; } .api-table td:nth-child(2) { width:99% !important; } .api-table table { table-layout: fixed; } */ /* Horizontal scroll box */ .horizontal-scroll { overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; width: 100% !important; } .horizontal-scroll .tleft { float: none !important; margin: 0px 8px 0px 0px; padding: 0px; display: inline-block !important; } .horizontal-scroll .thumbcaption { display: none !important; } .horizontal-scroll .thumbinner { padding: 0px !important; border-width: 0px !important; } .responsive-thumb-float { clear: both; } .responsive-thumb-float .thumb { clear: none; } .responsive-full-img img { max-width: 100% !important; height: auto !important; } .responsive-img img { max-width: 90%; height: auto; } @media only screen and (min-width: 1024px) { .responsive-img img { max-width: 85%; height: auto; } } @media only screen and (min-width: 1280px) { .responsive-img img { max-width: 55%; height: auto; } } .responsive-img-float { float: none; } /*This will cause the img receive float none rule when screen is smaller than 700px*/ @media only screen and (min-width: 700px) { .responsive-img-float { float: left; padding-right: 25px; padding-bottom: 5px; } } .responsive-vid-float { float: none; } @media only screen and (min-width: 850px) { .responsive-vid-float { float: left; padding-right: 25px; padding-bottom: 5px; } } /************************/ /* Timeless adjustments */ /* Hide Wiki name */ #p-banner { display: none !important; } body { font-size: 1em; line-height: 1.6; } .mw-body { font-size: 1.1em; } .mw-pt-languages { font-size: 0.8em; } .mw-body h2 { font-weight: 500; } a { color: #0645ad; } a:visited { color: #0b0080; } /* For medium devices */ @media screen and (max-width: 1099px) and (min-width: 851px) { #simpleSearch { margin-left: -14em; } } /* For small devices, reset entire container, because its buttons got fixed position */ @media screen and (max-width: 850px) and (min-width: 480px) { #mw-header-container { padding: 0.78em 10.7em 0.75em 6.2em; } } /* Headers strips */ #mw-content h1, #mw-content h2 { border-bottom: solid 2px #3366cc; } #mw-content h1.firstHeading { border-bottom: solid 3px #676e9f; } .color-middle { background: #676e9f; } /* Selected tabs */ #mw-page-header-links li.selected { border-bottom-color: #3366cc; } /* Left strip color */ .color-left { background: #7a64a0; } .ns-0 .color-left, .ns-1 .color-left { background: #7a64a0; } .ns-3000 .color-left, .ns-3001 .color-left, .ns-3002 .color-left, .ns-3003 .color-left { background: #563a56; } .ns-3010 .color-left, .ns-3011 .color-left { background: #743C71; } .ns-4000 .color-left, .ns-4001 .color-left { background: #000; } /* Right strip color */ .color-right { background: #7a64a0; } .ns-0 .color-right, .ns-1 .color-right { background: #7a64a0; } .ns-3000 .color-right, .ns-3001 .color-right, .ns-3002 .color-right, .ns-3003 .color-right { background: #563a56; } .ns-3010 .color-right, .ns-3011 .color-right { background: #743C71; } .ns-4000 .color-right, .ns-4001 .color-right { background: #000; } /* Bottom strip color */ #mw-content-container { border-bottom: solid 4px #7a64a0; } .ns-0 #mw-content-container, .ns-1 #mw-content-container { border-bottom: solid 4px #7a64a0; } .ns-3000 #mw-content-container, .ns-3001 #mw-content-container, .ns-3002 #mw-content-container, .ns-3003 #mw-content-container { border-bottom: solid 4px #563a56; } .ns-3010 #mw-content-container, .ns-3011 #mw-content-container { border-bottom: solid 4px #743C71; } .ns-4000 #mw-content-container, .ns-4001 #mw-content-container { border-bottom: solid 4px #000; }