imported>Smallketchup82 |
Tags: Mobile edit Mobile web edit Advanced mobile edit |
| (77 intermediate revisions by 4 users not shown) |
| Line 1: |
Line 1: |
| /* CSS placed here will be applied to all skins on the entire wiki. */ | | /*Local wiki imports*/ |
| | @import url("/index.php?title=MediaWiki:Styling.css&action=raw&ctype=text/css"); |
| | @import url("/index.php?title=MediaWiki:Homepage.css&action=raw&ctype=text/css"); |
| | @import url("/index.php?title=MediaWiki:Staff.css&action=raw&ctype=text/css"); |
| | @import url("/index.php?title=MediaWiki:Templatestyles.css&action=raw&ctype=text/css"); |
| | @import url("/index.php?title=MediaWiki:UserColors.css&action=raw&ctype=text/css"); |
| | @import url("/index.php?title=MediaWiki:VarColors.css&action=raw&ctype=text/css"); |
| | @import url("/index.php?title=MediaWiki:Msgboxstyles.css&action=raw&ctype=text/css"); |
|
| |
|
| /* Local wiki imports */ | | /* Custom Font Loading */ |
| @import "/load.php?mode=articles&only=styles&articles=MediaWiki:Homepage.css|MediaWiki:Staff.css|MediaWiki:Ships.css|MediaWiki:Templatestyles.css|MediaWiki:VarColors.css|MediaWiki:UserColors.css|MediaWiki:Tags.css|MediaWiki:Styling.css"; | | @font-face { |
| | | font-family: "Rocket Rinder"; |
| #BackToTopBtn div {
| | src: url("/fonts/Rocket Rinder.otf") format('opentype') |
| opacity: 0.5;
| |
| transition: all 1s 1s;
| |
| }
| |
| #BackToTopBtn div:hover {
| |
| transition: all 1s; | |
| opacity: 1;
| |
| } | | } |
|
| |
|
| body.background-image {
| | @font-face { |
| background-repeat: repeat !important; | | font-family: "OriginTech"; |
| background-size: 120%; | | src: url("/fonts/OriginTech personal use.ttf") format('truetype') |
| /*background-position: top;*/
| |
| background-attachment: fixed !important;
| |
| } | | } |
|
| |
|
| /* wordmark hover effect*/
| | @font-face { |
| .wds-community-header__wordmark img {
| | font-family: "Ethno Centric"; |
| transition: all 0.5s; | | src: url("/fonts/ethnocentric rg.ttf") format('truetype') |
| } | | } |
|
| |
|
| .wds-community-header__wordmark img:hover {
| | @font-face { |
| filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.5)); | | font-family: "Star Jedi"; |
| transform: translate(0, -3px);
| | src: url("/fonts/Starjedi.ttf") format('truetype') |
| } | | } |
| /* end of wordmark css*/
| |
|
| |
|
| /* topnav/header css */
| | @font-face { |
| .wds-community-header__sitename > a {
| | font-family: "Android"; |
| position: relative; | | src: url("/fonts/Android/Android.ttf") format('truetype'); |
| transition: all 1s; | | font-style: normal; |
| left: 0px; | |
| } | | } |
|
| |
|
| .wds-community-header__sitename:hover > a {
| | @font-face { |
| left: 5px; | | font-family: "Android"; |
| | src: url("/fonts/Android/Android Italic.ttf") format('truetype'); |
| | font-style: italic; |
| } | | } |
| /* end of topnav/header css */
| |
|
| |
| /* wiki navigation styling*/
| |
|
| |
|
| .wds-tabs .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-chevron {
| | @font-face { |
| transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); | | font-family: "Android Hollow"; |
| | src: url("/fonts/Android/Android Hollow.ttf") format('truetype'); |
| } | | } |
|
| |
|
| .wds-tabs .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2:hover .wds-dropdown-chevron {
| | @font-face { |
| transform: rotate(90deg) !important; | | font-family: "Olga"; |
| | src: url("/fonts/Olga.ttf") format('truetype'); |
| } | | } |
|
| |
|
| .wds-tabs .wds-dropdown.wds-is-active .wds-dropdown__content,
| | /* Fix the weird color change when you start scrolling */ |
| .wds-tabs .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover .wds-dropdown__content {
| | html, body { |
| display: inline-block;
| | height: auto !important; |
| } | | } |
|
| |
|
| .wds-tabs .wds-tabs__tab .wds-dropdown__content { | | /* Talk page button management */ |
| left: -7px; | | /* Don't show on Main Page & Certain namespaces*/ |
| transform: none;
| | body.page-Main_Page #ca-talk, body.ns-4 #ca-talk { |
| | display: none !important; |
| } | | } |
|
| |
|
| .wds-tabs .wds-dropdown.wds-is-active:not(.wds-no-chevron):after, | | .mw-sidebar-action { |
| .wds-tabs .wds-dropdown.wds-is-active:not(.wds-no-chevron):before,
| |
| .wds-tabs .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover:not(.wds-no-chevron):after,
| |
| .wds-tabs .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover:not(.wds-no-chevron):before {
| |
| display: none !important; | | display: none !important; |
| } | | } |
|
| |
|
| .wds-tabs .wds-tabs__tab .wds-dropdown__content,
| | /* Logo Styling */ |
| .wds-tabs .wds-dropdown__content.wds-is-right-aligned,
| | .mw-logo-container { |
| .wds-tabs .wds-dropdown__content.wds-is-left-aligned, | | font-family: "Rocket Rinder", "Arial", "sans-serif"; |
| .wds-tabs .wds-global-navigation__search-suggestions.wds-dropdown__content {
| | color: white; |
| animation-duration: 0.5s; | | font-size: larger; |
| animation-fill-mode: both; | | letter-spacing: 0.1em; |
| animation-name: navfade; | | -webkit-text-stroke: 0.01em black; |
| animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); | |
| box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); | |
| background-color: #22252D;
| |
| border: none;
| |
| } | | } |
|
| |
|
| .wds-community-header .wds-tabs .wds-dropdown__content .wds-list .wds-dropdown-level-2 .wds-dropdown-level-2__content { | | .mw-logo { |
| animation-duration: 0.5s; | | filter: drop-shadow(0 0 2.5px black); |
| animation-fill-mode: both;
| |
| animation-name: navfadeleft;
| |
| animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
| |
| box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
| |
| background-color: #22252D;
| |
| border: none;
| |
| } | | } |
|
| |
|
| .wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li.wds-is-selected>a:not(.wds-button), | | .mw-logo:hover { |
| .wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li:hover {
| | text-decoration: none; |
| background-color: rgba(16, 62, 137, 0.25); | |
| color: white;
| |
| border-radius: 5px;
| |
| } | | } |
| | /* End of Logo Styling */ |
|
| |
|
| .wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li.wds-is-selected>a:not(.wds-button), | | .mw-number-text h3, .mw-number-text p { |
| .wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li {
| | color: white !important; |
| transition: transform 0.5s, background-color 0.5s, color 0.5s; | |
| } | | } |
|
| |
|
| .wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li.wds-is-selected>a:not(.wds-button), | | .mw-createacct-benefits-container h2 { |
| .wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li>a:not(.wds-button) {
| |
| background-color: transparent !important;
| |
| color: white; | | color: white; |
| border-radius: 5px;
| |
| } | | } |
|
| |
|
| .wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li.wds-is-selected>a:not(.wds-button),
| | /* fix echo coloring */ |
| .wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li:hover>a:not(.wds-button) { | | .mw-echo-ui-notificationItemWidget-unread { |
| transform: translate(3px, 0); | | background-color: rgb(50, 54, 55); |
| color: white;
| |
| } | | } |
|
| |
|
| .wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li.wds-is-selected>a:not(.wds-button),
| | /* Fix weird link colors on pages where darkreader cant be loaded */ |
| .wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li>a:not(.wds-button) {
| | h1, h2, h3, h4, h5, h6 { |
| transition: transform 0.5s, background-color 0.5s, color 0.5s; | | color: white; |
| transition-timing-function: ease;
| |
| } | | } |
| | | .vector-menu-portal .vector-menu-content li a { |
| @keyframes navfade {
| | color: rgb(102, 177, 250) !important; |
| from { | |
| opacity: 0;
| |
| transform: translate(0, -10px);
| |
| }
| |
| to {
| |
| opacity: 1;
| |
| transform: translate(0);
| |
| }
| |
| } | | } |
| | | .vector-menu-portal .vector-menu-content li a:visited { |
| @keyframes navfadeleft {
| | color: rgb(126, 114, 255) !important; |
| from { | |
| opacity: 0;
| |
| transform: translate(-10px, 0);
| |
| }
| |
| to {
| |
| opacity: 1;
| |
| transform: translate(0);
| |
| }
| |
| } | | } |
| /* end of wiki navigation styling */
| | .vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited { |
| | | color: rgb(211, 207, 202) !important; |
| .cardcontainer a.external:after { | |
| display: none !important; | |
| } | | } |
|
| |
|
| .cardcontainer{
| | /* Preferences Page Styling */ |
| transition: border-radius 0.5s;
| | .oo-ui-tabSelectWidget-framed { |
| background-color: #0E0F0F;
| | background-color: rgb(34, 37, 38); |
| padding: 8px;
| |
| padding-top: 6px;
| |
| margin: 5px;
| |
| border: 3px solid #181919;
| |
| line-height: 18px;
| |
| font-size: 14.6px;
| |
| font-family: Calibri;
| |
| border-radius: 10px;
| |
| }
| |
| .cardcontainer:hover {
| |
| border-radius: 20px; | |
| }
| |
| .cardcontainer .border{
| |
| border-bottom: 1px solid #474A4C;
| |
| padding: 3px;
| |
| margin: 2px;
| |
| margin-top: 0px;
| |
| }
| |
| .cardcontainer h1{
| |
| font-size: 21px;
| |
| font-variant: small-caps;
| |
| font-weight: bold;
| |
| margin: 3px;
| |
| padding: 0px;
| |
| }
| |
| .cardcontainer.playbutton img:hover{
| |
| opacity: 1;
| |
| transition: 0.12s;
| |
| } | | } |
| .cardcontainer.playbuton img{ | | .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { |
| opacity: 0.8;
| | background-color: rgb(24, 26, 27); |
| | color: rgb(232, 230, 227); |
| } | | } |
| .cardcontainer .navlink{ | | .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label { |
| color: #D5D4D4;
| | border-bottom-color: rgb(48, 52, 54); |
| } | | } |
| .cardcontainer .navlink a{ | | .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed, .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout { |
| transition: 0.09s;
| | border-color: rgb(62, 67, 70); |
| display: block;
| |
| padding: 4px;
| |
| border-bottom: 1px solid #292C2C;
| |
| } | | } |
| .cardcontainer .navlink a:hover{ | | .mw-prefs-buttons { |
| text-decoration: none;
| | background-color: rgb(24, 26, 27); |
| background-color: #1F2222;
| | border-top-color: rgb(62, 67, 70); |
| padding-left: 5px;
| | box-shadow: rgba(0, 0, 0, 0.25) 0px -4px 4px -4px; |
| display: block;
| |
| } | | } |
| .cardcontainer .navlink i{ | | .oo-ui-textInputWidget .oo-ui-inputWidget-input { |
| display: block;
| | background-color: rgb(24, 26, 27); |
| color: #D5D4D4;
| | color: rgb(232, 230, 227); |
| font-style: normal;
| | border-color: rgb(72, 78, 81); |
| padding-left: 2px;
| |
| } | | } |
| .cardcontainer .shipcont{ | | .oo-ui-checkboxInputWidget [type="checkbox"] + span { |
| padding: 3px;
| | background-color: rgb(24, 26, 27); |
| font-size: 14.6px;
| | border-color: rgb(101, 93, 83); |
| }
| |
| .cardcontainer .shipcont .shiplist a{
| |
| font-size: 16px;
| |
| background-color: #181A1A;
| |
| } | | } |
|
| |
|
| .cardcontainer .lore{
| | /* Site Notice Styling (UNCOMMENT THIS WHENEVER YOU SET A SITENOTICE!!!)*/ |
| width: 47.5%;
| | /* .sitenoticestyling { |
| border: 1px solid #2B2E2E;
| | padding: 10px; |
| display: inline-table;
| | border-radius: 10px; |
| padding: 5px;
| | border: 2px solid rgb(48, 52, 54) !important; |
| background-color: #070808;
| | border-color: rgb(48, 52, 54) !important; |
| }
| |
| .cardcontainer .lore img{
| |
| margin-top: 25px;
| |
| }
| |
| .CHeader {
| |
| opacity: 0;
| |
| height: 0;
| |
| width: 0;
| |
| }
| |
| .CButton { | |
| background-color: #0E0F0F;
| |
| padding: 8px; | |
| padding-top: 6px; | |
| margin: 5px;
| |
| border: 3px solid #181919; | |
| border-radius: 1px; | |
| line-height: 18px;
| |
| font-size: 14.6px;
| |
| font-family: Calibri;
| |
| text-align: center; | | text-align: center; |
| }
| | margin-bottom: 10px !important; |
| | | } */ |
| /* Making the thing that enables the parallax effect (brought to you by smallketchup82 in MediaWiki:Parallax.js) have its overlow hidden so that it doesn't cause the pages content to have a scrollbar next to it.*/
| |
| #parallax {
| |
| overflow: hidden !important;
| |
| } | |