|
|
| (13 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* | | /* |
| [[Category:Deprecated Skins]] | | [[Category:Skin Styles]] |
| | | |
| CSS placed here will be applied to the mobile view regardless what the current mobile skin is. | | CSS placed here will be applied to the mobile view regardless what the current mobile skin is. |
|
| |
|
| Mobile.css is being phased out in favor of: | | Mobile.css has been largely phased out in favor of: |
| 1. TemplateStyles, for template-specific styles (see [[:Category:Template Styles]]) | | 1. TemplateStyles, for template-specific styles (see [[:Category:Template Styles]]) |
| 2. [[MediaWiki:Gadget-Site.css]], for site-wide CSS applied to all skins (desktop and mobile) | | 2. [[MediaWiki:Gadget-Site.css]], for site-wide CSS applied to all skins (desktop and mobile) |
| 3. Skin-specific styles ([[MediaWiki:Timeless.css]] at time of writing) | | 3. Skin-specific styles ([[MediaWiki:Timeless.css]] is the mobile skin at time of writing) |
| | |
| Use media queries in these files to target specific device widths.
| |
| You can use the widths defined at [[MediaWiki:Variables.css]].
| |
| */ | | */ |
|
| |
|
| @import url("/w/index.php?title=MediaWiki:Timeless.css&action=raw&ctype=text/css"); | | @import url("/w/index.php?title=MediaWiki:Timeless.css&action=raw&ctype=text/css"); |
|
| |
|
| /* Variables */
| | .nomobile, .no-mobile { |
| body {
| | display: none; |
| --roundy-border-radius: 10px;
| |
|
| |
| /* Colors */
| |
| --zw-background: #17456e;
| |
| --zw-border: #426787;
| |
| --zw-dark-1: #163d5f;
| |
| --zw-dark-2: #0c2236;
| |
| --zw-header: #1d578b;
| |
| --zw-light: #1e5c93;
| |
| --zw-links: #e7ea12;
| |
| --zw-text: #d2d2d2;
| |
| }
| |
| | |
| /* ***************************** Main Page ***************************** */
| |
| #mf-zw-logo img {
| |
| height: auto;
| |
| max-width: 500px;
| |
| width: 100%;
| |
| }
| |
| | |
| .overlay,
| |
| .overlay-header-container,
| |
| .overlay-footer-container,
| |
| .search-overlay .overlay-header,
| |
| .search-overlay .results {
| |
| background-color: #082750 !important;
| |
| }
| |
| | |
| .overlay-header {
| |
| border-color: #426787 !important;
| |
| }
| |
| | |
| .overlay-content {
| |
| background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0 !important;
| |
| }
| |
| | |
| .overlay-title h2 {
| |
| border-bottom: medium none !important;
| |
| }
| |
| | |
| .search-content.overlay-header {
| |
| background-color: #426787 !important;
| |
| }
| |
| | |
| .results .page-list li {
| |
| background-color: #17456e !important;
| |
| border-bottom: 1px solid #426787 !important;
| |
| margin-bottom: 1px !important;
| |
| }
| |
| | |
| .overlay .panel,
| |
| .page-list li,
| |
| .topic-title-list li,
| |
| .site-link-list li {
| |
| border-color: #426787 !important;
| |
| color: #d2d2d2;
| |
| }
| |
| | |
| .page-list li > a,
| |
| .page-list li > a > h3,
| |
| .topic-title-list li > a,
| |
| .topic-title-list li > a > h3,
| |
| .site-link-list li > a,
| |
| .site-link-list li > a > h3 {
| |
| border-bottom: medium none !important;
| |
| color: #f4f26b;
| |
| }
| |
| | |
| .page-list li > a:active,
| |
| .page-list li > a:hover,
| |
| .page-list li > a:visited,
| |
| .topic-title-list li > a:active,
| |
| .topic-title-list li > a:hover,
| |
| .topic-title-list li > a:visited,
| |
| .site-link-list li > a:active,
| |
| .site-link-list li > a:hover,
| |
| .site-link-list li > a:visited {
| |
| color: #e8e760;
| |
| }
| |
| | |
| .list-thumb.list-thumb-none {
| |
| background-color: #17456e;
| |
| }
| |
| | |
| .mw-mobile-mode .searchresults ul.mw-search-results .mw-search-result-data {
| |
| color: #808080;
| |
| }
| |
| | |
| .overlay.media-viewer img {
| |
| background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
| |
| }
| |
| | |
| .overlay.media-viewer div.details {
| |
| background: #1d578b none repeat scroll 0 0;
| |
| }
| |
| | |
| div.editor-overlay .summary-request,
| |
| div.overlay .license {
| |
| color: #b6b6b6;
| |
| }
| |
| | |
| #powerSearchText {
| |
| background: #fff none repeat scroll 0 0 !important;
| |
| width: 60vw !important;
| |
| }
| |
| | |
| footer .last-modified-bar {
| |
| background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
| |
| color: #d2d2d2;
| |
| }
| |
| | |
| footer .last-modified-bar a {
| |
| color: #d2d2d2;
| |
| }
| |
| | |
| footer .last-modified-bar a:nth-child(2) {
| |
| color: #f4f26b;
| |
| }
| |
| | |
| #footer {
| |
| border-top-color: #1d578b !important;
| |
| }
| |
| | |
| #footer ul,
| |
| #footer ul li {
| |
| color: #b6b6b6;
| |
| text-align: left !important;
| |
| }
| |
| | |
| .footer-places li:first-of-type {
| |
| padding-left: 0 !important;
| |
| }
| |
| | |
| .section-heading .icon {
| |
| margin-top: 0.2em;
| |
| }
| |
| | |
| a {
| |
| background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
| |
| color: #f4f26b;
| |
| text-decoration: none;
| |
| }
| |
| | |
| a:active {
| |
| color: #f4f26b;
| |
| }
| |
| | |
| a:hover {
| |
| text-decoration: underline;
| |
| }
| |
| | |
| a.stub {
| |
| color: #f4f26b;
| |
| }
| |
| | |
| #bodyContent a.new {
| |
| color: #ff8581;
| |
| }
| |
| | |
| a.new,
| |
| #p-personal a.new {
| |
| color: #ff8581;
| |
| }
| |
| | |
| a.new:visited,
| |
| #p-personal a.new:visited {
| |
| color: #ff8581;
| |
| }
| |
| | |
| a.mw-ui-button,
| |
| a.mw-ui-button.mw-ui-progressive,
| |
| a.mw-ui-button.mw-ui-primary {
| |
| background: #0b284f none repeat scroll 0 0;
| |
| color: #d2d2d2;
| |
| }
| |
| | |
| a.mw-ui-button:hover,
| |
| a.mw-ui-button.mw-ui-progressive:hover,
| |
| a.mw-ui-button.mw-ui-primary:hover {
| |
| color: #b6b6b6;
| |
| }
| |
| | |
| a.mw-ui-button:active,
| |
| a.mw-ui-button.mw-ui-progressive:active,
| |
| a.mw-ui-button.mw-ui-primary:active {
| |
| background: #17315a none repeat scroll 0 0;
| |
| color: #d2d2d2;
| |
| }
| |
| | |
| a.mw-ui-button:focus,
| |
| a.mw-ui-button.mw-ui-progressive:focus,
| |
| a.mw-ui-button.mw-ui-primary:focus {
| |
| border-color: rgba(204, 204, 204, 0.75);
| |
| }
| |
| | |
| div.toc-mobile,
| |
| .client-js div.toc-mobile {
| |
| background-color: #1d578b; | |
| border: 1px solid #426787;
| |
| min-width: 250px;
| |
| }
| |
| | |
| div.toc-mobile .collapsible-heading,
| |
| .client-js div.toc-mobile .collapsible-heading {
| |
| border-bottom: medium none !important;
| |
| margin-bottom: 0 !important;
| |
| }
| |
| | |
| div.toc-mobile .collapsible-heading .indicator,
| |
| .client-js div.toc-mobile .collapsible-heading .indicator {
| |
| margin-right: 5px !important;
| |
| }
| |
| | |
| .content .mw-parser-output > h2 .indicator, .content .section-heading .indicator,
| |
| .mw-ui-icon.mw-ui-icon-before:before,
| |
| .icon-arrow-down,
| |
| .icon-arrow-up {
| |
| filter: invert(1);
| |
| }
| |
| | |
| div.toc-mobile .collapsible-block,
| |
| .client-js div.toc-mobile .collapsible-block {
| |
| margin-left: 15px;
| |
| margin-right: 15px;
| |
| }
| |
| | |
| hr {
| |
| background-color: #426787;
| |
| color: #426787;
| |
| border: 1px solid #426787;
| |
| }
| |
| | |
| .list-header {
| |
| background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
| |
| color: inherit;
| |
| }
| |
| | |
| .mw-mf-special #content .content-header {
| |
| padding-top: 1em;
| |
| }
| |
| | |
| .mw-mf-special #content .content-header h2 {
| |
| border-bottom: medium none !important;
| |
| }
| |
| | |
| .mw-mf-user {
| |
| color: #d2d2d2;
| |
| }
| |
| | |
| .page-list .info,
| |
| .page-list .component,
| |
| .topic-title-list .info,
| |
| .topic-title-list .component,
| |
| .site-link-list .info,
| |
| .site-link-list .component {
| |
| color: #b6b6b6;
| |
| }
| |
| | |
| .page-list.side-list .list-thumb,
| |
| .topic-title-list.side-list .list-thumb,
| |
| .site-link-list.side-list .list-thumb {
| |
| color: #b6b6b6;
| |
| }
| |
| | |
| .minoredit {
| |
| background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
| |
| }
| |
| | |
| .page-summary h2,
| |
| .page-summary h3 {
| |
| color: #d2d2d2;
| |
| }
| |
| | |
| .page-summary h2 a,
| |
| .page-summary h3 a {
| |
| color: #f4f26b;
| |
| }
| |
| | |
| #mw-mf-diffview #mw-mf-userinfo {
| |
| background: #0b284f none repeat scroll 0 0;
| |
| }
| |
| | |
| #mw-mf-diffview #mw-mf-userinfo .mw-mf-edit-count {
| |
| color: #b6b6b6;
| |
| }
| |
| | |
| #mw-mf-diffview #mw-mf-userinfo .mw-mf-edit-count div {
| |
| color: #d2d2d2;
| |
| }
| |
| | |
| .mw-mf-special .content h2 {
| |
| color: #d2d2d2;
| |
| }
| |
| .profile .card {
| |
| background-color: #1d578b;
| |
| border-color: #426787;
| |
| color: #d2d2d2;
| |
| }
| |
| | |
| .profile a {
| |
| color: #f4f26b;
| |
| }
| |
| | |
| .profile .footer {
| |
| color: #d2d2d2;
| |
| }
| |
| | |
| .header .branding-box h1 span,
| |
| .header .branding-box a span {
| |
| color: white;
| |
| }
| |
| | |
| @media screen and (max-width: 720px) {
| |
| .gallery .gallerybox {
| |
| width: calc(50% - 6px - 1em) !important;
| |
| margin-left: 0.5em;
| |
| margin-right: 0.5em;
| |
| }
| |
| }
| |
| | |
| @media screen and (max-width: 354px) {
| |
| .gallerybox,
| |
| .gallerybox div {
| |
| width: 100% !important;
| |
| }
| |
| }
| |
| | |
| button.icon.cancel {
| |
| background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
| |
| }
| |
| | |
| button.icon.cancel::before,
| |
| button.icon.cancel::after {
| |
| background: #cfcfd0 none repeat scroll 0 0;
| |
| content: "";
| |
| height: 5px;
| |
| left: 0;
| |
| position: absolute;
| |
| top: 50%;
| |
| width: 100%;
| |
| }
| |
| | |
| button.icon.cancel::before {
| |
| transform: rotate(45deg);
| |
| }
| |
| | |
| button.icon.cancel::after {
| |
| transform: rotate(-45deg);
| |
| }
| |
| | |
| .content table[style*="border:1px"][style*="padding:2px"] td {
| |
| padding: 1em;
| |
| }
| |
| | |
| td[style*="font-size:11px"],
| |
| td[style*="font-size: 11px"],
| |
| span[style*="font-size:6pt"],
| |
| span[style*="font-size: 6pt"] {
| |
| font-size: inherit;
| |
| }
| |
| | |
| /* gradient for mobile */
| |
| .gradient {
| |
| background-image: linear-gradient(to bottom, #2D679B, #1A4E7D);
| |
| background-image: -webkit-linear-gradient(top, #2D679B, #1A4E7D); /* Android Browser <= 4.3 */
| |
| }
| |
| | |
| /* INFOBOXES */
| |
| table.infobox {
| |
| padding: 5px;
| |
| border-radius: var(--roundy-border-radius);
| |
| }
| |
| | |
| table.infobox tr.infobox-field td div.infobox-field-content {
| |
| max-height: 175px;
| |
| overflow: auto;
| |
| } | | } |
|
| |
|
| Line 429: |
Line 50: |
| .pi-data-value { | | .pi-data-value { |
| background-color: var(--zw-bg-infobox); | | background-color: var(--zw-bg-infobox); |
| }
| |
|
| |
| /* FACELIFT */
| |
| /* All CSS placed under there is for the upcoming facelift of Zelda Wiki, place any other CSS above it */
| |
|
| |
| /* COMMON */
| |
| /* MISC */
| |
| .caption {
| |
| font-size: 12px;
| |
| }
| |
|
| |
| .centered {
| |
| text-align: center;
| |
| }
| |
|
| |
| .no-mobile {
| |
| display: none;
| |
| }
| |
|
| |
| .roundy {
| |
| border-radius: var(--roundy-border-radius);
| |
| padding: 10px;
| |
| }
| |
|
| |
| /* TABLES */
| |
| table.wikitable.compressed td:last-child {
| |
| width: 100%;
| |
| }
| |
|
| |
| table.wikitable.compressed th {
| |
| padding-top: 15px;
| |
| }
| |
|
| |
| /* NAVBOXES */
| |
| div.facelift-tabbed-navbox {
| |
| background-color: #1e5c93;
| |
| }
| |
|
| |
| /* LIST BOXES */
| |
| div.list-box-container {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: center;
| |
| }
| |
|
| |
| div.list-box {
| |
| position: relative;
| |
| margin: 8px;
| |
| flex-basis: 100%;
| |
| background-color: #1d578b;
| |
| box-shadow: 2px 2px 2px #0c2236;
| |
| }
| |
|
| |
| div.list-box:hover {
| |
| background-color: #163d5f;
| |
| }
| |
|
| |
| div.list-box span.list-box-link a {
| |
| text-align: right;
| |
| position: absolute;
| |
| height: 100%;
| |
| width: 100%;
| |
| top: 0;
| |
| left: 0;
| |
| text-decoration: none;
| |
| }
| |
|
| |
| div.list-box span.list-box-link a span.list-box-text {
| |
| position: relative;
| |
| top: 50%;
| |
| transform: translateY(-50%);
| |
| display: block;
| |
| padding-right: 1em;
| |
| font-size: large;
| |
| }
| |
|
| |
| /* NATIVE SKIN FIXES */
| |
| .content table {
| |
| display: table;
| |
| }
| |
|
| |
| /* Revisions */
| |
| div.mw-revision {
| |
| color: white;
| |
| background-color: var(--zw-dark-1);
| |
| border-color: var(--zw-dark-2);
| |
| } | | } |