MediaWiki:Cosmos.css: Difference between revisions
From The Walkscape Walkthrough
Content added Content deleted
No edit summary |
Floursifter (talk | contribs) No edit summary |
||
(31 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
/* All CSS here will be loaded for users of the Cosmos skin */ |
/* All CSS here will be loaded for users of the Cosmos skin */ |
||
/*remove the editsection */ |
|||
.mw-editsection { |
|||
display: none; |
|||
} |
|||
/* hide the edit button on mobile */ |
|||
@media only screen and (max-width: 850px) { |
|||
#cosmos-articleHeader-actions { |
|||
display: none; |
|||
} |
|||
} |
|||
/* bulletlist fix */ |
|||
li { |
|||
margin-left: 25px; |
|||
} |
|||
/* background |
|||
body { |
|||
background-image: url(https://static.miraheze.org/walkscapewiki/2/29/WalkScapeBackground.jpg); |
|||
background-attachment: fixed; |
|||
background-size: cover; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
} |
|||
*/ |
|||
/* editing space */ |
|||
.wikiEditor-ui-toolbar { |
|||
background-color: #242321; |
|||
box-shadow: none !important; |
|||
border: solid #b6b3a1; |
|||
border-radius: 3px 3px 0 0; |
|||
border-width: 1px 1px 0; |
|||
padding: 9px 6px; |
|||
} |
|||
.wikiEditor-ui .wikiEditor-ui-view { |
|||
border-top: none !important; |
|||
border-left: none !important; |
|||
border-right: none !important; |
|||
border-bottom: solid 1px #aaaaaa; |
|||
} |
|||
#msupload-div { |
|||
background: #d4d0b9; |
|||
border: 1px solid #aaa; |
|||
border-radius: 0 0 3px 3px; |
|||
} |
|||
#msupload-dropzone { |
|||
border: 1px dashed #ddd; |
|||
background-color: #d4d0b9; |
|||
} |
|||
#msupload-list .file { |
|||
background: #dfdbc3; |
|||
border-top: none !important; |
|||
} |
|||
#msupload-bottom { |
|||
background-color: #d4d0b9; |
|||
} |
|||
.editOptions { |
|||
border: none !important; |
|||
background: none !important; |
|||
} |
|||
.oo-ui-textInputWidget .oo-ui-inputWidget-input { |
|||
background-color: #ffffff42; |
|||
} |
|||
.oo-ui-checkboxInputWidget [type='checkbox'] + span { |
|||
background-color: #ffffff42; |
|||
} |
|||
.CodeMirror-scroll { |
|||
background: none !important; |
|||
} |
|||
.wikiEditor-ui .CodeMirror { |
|||
background: none !important; |
|||
} |
|||
.cm-mw-doubleUnderscore, .cm-mw-signature, .cm-mw-hr { |
|||
background-color: #0088ff36; |
|||
} |
|||
.cm-mw-link-ground { |
|||
background-color: #33780010; |
|||
} |
|||
.cm-mw-link-bracket { |
|||
color: #337800; |
|||
} |
|||
.cm-mw-link-pagename { |
|||
color: #337800; |
|||
} |
|||
.cm-mw-link-delimiter { |
|||
color: #337800; |
|||
} |
|||
.CodeMirror-gutter-wrapper { |
|||
display: none; |
|||
} |
|||
.CodeMirror-gutters { |
|||
display: none; |
|||
} |
|||
#cosmos-banner{ |
|||
background-image:linear-gradient(#00000090, #00000030, transparent); |
|||
} |
|||
/* transparent header */ |
|||
.cosmos-header{ |
|||
background: none !important; |
|||
background-color: transparent !important; |
|||
background-image: none !important; |
|||
} |
|||
.cosmos-header:before { |
|||
background: none; |
|||
} |
|||
#cosmos-header-articleHeader { |
|||
margin-bottom: 20px; |
|||
} |
|||
/* header text elements */ |
|||
.cosmos-header__sitename a:any-link { |
|||
color: #dfdbc3; |
|||
/* filter: drop-shadow(0px 0px 4px #00000090); */ |
|||
} |
|||
.cosmos-header .cosmos-header__counter { |
|||
color: #dfdbc3; |
|||
/* filter: drop-shadow(0px 0px 4px #00000090); */ |
|||
} |
|||
.cosmos-header .cosmos-header__local-navigation { |
|||
height: 33px; |
|||
/* filter: drop-shadow(0px 0px 4px #00000090); */ |
|||
} |
|||
.cosmos-header .wds-button.wds-is-secondary { |
|||
border-color: #dfdbc3; |
|||
color: #dfdbc3; |
|||
/* filter: drop-shadow(0px 0px 10px #00000090); */ |
|||
} |
|||
.cosmos-header .wds-button-group > .wds-dropdown:not(:first-child) .wds-button { |
|||
border-left-color: #dfdbc3; |
|||
} |
|||
.cosmos-header .wds-tabs .wds-tabs__tab-label a { |
|||
color: #dfdbc3; |
|||
} |
|||
.cosmos-header .wds-tabs .wds-tabs__tab-label { |
|||
color: #dfdbc3; |
|||
} |
|||
.wds-tabs__tab-label { |
|||
padding: 16px 0; |
|||
} |
|||
div#p-☰-label { |
|||
font-size: 20px; |
|||
} |
|||
.cosmos-header .wds-dropdown__content .wds-list.wds-is-linked li > a:not(.wds-button) { |
|||
color: var(--textcolor-secondary); |
|||
} |
|||
/* dropdowns */ |
|||
.cosmos-modal-content { |
|||
border: none; |
|||
border-radius: 5px; |
|||
background-color: #FFFFFF; |
|||
} |
|||
.cosmos-dropdown-list { |
|||
border: none; |
|||
background-color: #FFFFFF; |
|||
color: white; |
|||
} |
|||
.wds-dropdown__content { |
|||
border: none; |
|||
background-color: var(--primary-main) !important; |
|||
filter: drop-shadow(0px 0px 8px #00000040); |
|||
} |
|||
.wds-dropdown:before { |
|||
border-bottom-color: var(--primary-main) !important; |
|||
} |
|||
.wds-dropdown:after { |
|||
border-bottom-color: var(--primary-main) !important; |
|||
} |
|||
/* dropdown hover effects */ |
|||
.cosmos-dropdown a { |
|||
transition: background-color 0.2s; |
|||
border-radius: 5px; |
|||
} |
|||
.cosmos-dropdown a:hover { |
|||
background-color: #3F4448 !important; |
|||
color: white; |
|||
} |
|||
.wds-dropdown__content a { |
|||
transition: background-color 0.2s; |
|||
border-radius: 5px; |
|||
} |
|||
.wds-dropdown__content a:hover { |
|||
background-color: #3F4448 !important; |
|||
color: white; |
|||
} |
|||
@media screen and (max-width: 850px) { |
|||
.wds-tabs { |
|||
background-color: var(--primary-main); |
|||
} |
|||
} |
|||
/* category link dropdowns */ |
|||
.wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list:after, |
|||
.wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list:before { |
|||
background: none; |
|||
} |
|||
.wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list { |
|||
background-image: none; |
|||
} |
|||
#cosmos-footer { |
|||
background-color: transparent; |
|||
background-image: linear-gradient(#00000090 0px,#00000030 50px,transparent 100px) !important; |
|||
} |
|||
#cosmos-toolbar{ |
#cosmos-toolbar{ |
||
display:none; |
display:none; |
||
Line 7: | Line 304: | ||
} |
} |
||
/* Main content box */ |
|||
#mw-content { |
#mw-content { |
||
border-radius: 5px; |
border-radius: 5px; |
||
min-height: 420px; |
min-height: 420px; |
||
box-shadow: 0px 0px |
box-shadow: 0px 0px 6px #00000090; |
||
padding-bottom: 30px; |
padding-bottom: 30px; |
||
border-left: 1px solid #BFAA8C |
|||
border-right: 1px solid #BFAA8C |
|||
} |
} |
||
@media only screen and (max-width: 850px) { |
|||
#mw-content { |
|||
font-size: 90%; |
|||
} |
|||
} |
|||
#catlinks { |
|||
border-radius: 5px; |
|||
border-color: var(--primary-dark4); |
|||
} |
|||
/* make the top margin smaller */ |
|||
#mw-content-container { |
|||
padding-top: 2% !important; |
|||
} |
|||
/* file page buttons */ |
|||
#filetoc { |
|||
border: 1px solid var(--primary-dark4); |
|||
background-color: var(--primary-dark1); |
|||
} |
|||
.mw-ui-button { |
|||
background-color: var(--primary-dark1); |
|||
border: 1px solid var(--primary-dark4); |
|||
} |
|||
.mw-ui-button:not(:disabled):hover { |
|||
background-color: var(--primary-dark2); |
|||
border-color: var(--secondary-light2); |
|||
} |
|||
/* header underline color */ |
|||
#mw-content h2:not(#mw-toc-heading), #mw-content h1:not(#firstHeading) { |
|||
border-bottom: solid 1px var(--primary-dark4) !important; |
|||
} |
|||
/* NEXT button */ |
|||
.wds-button.wds-is-text { |
|||
color: var(--textcolor-main); |
|||
} |
|||
/* search box */ |
|||
#searchform input { |
|||
backdrop-filter: blur(10px) contrast(1.2); |
|||
} |
|||
.client-darkmode #searchInput { |
|||
background: rgba(0,0,0,0.4); |
|||
} |
|||
/* CSS edit area */ |
|||
textarea { |
|||
background: none !important; |
|||
backdrop-filter: brightness(0.9) contrast(1.2); |
|||
border: none !important; |
|||
color: white; |
|||
} |
|||
/* Recent Changes */ |
|||
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget { |
|||
background: var(--primary-dark1); |
|||
} |
|||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { |
|||
background-color: var(--primary-dark1); |
|||
} |
|||
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle { |
|||
background-color: var(--primary-dark1); |
|||
} |
|||
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined { |
|||
background-color: var(--primary-dark1); |
|||
} |
|||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover { |
|||
background-color: var(--primary-dark2); |
|||
} |
|||
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled { |
|||
background-color: var(--primary-dark4); |
|||
} |
|||
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .mw-rcfilters-ui-tagItemWidget-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled { |
|||
background-color: var(--primary-dark2); |
|||
border-color: #1367a2; |
|||
border-width: 2px; |
|||
} |
|||
/* recent changes legend panel */ |
|||
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend { |
|||
background-color: var(--primary-dark1); |
|||
border: 1px solid var(--primary-dark4); |
|||
} |
|||
/* option Headers */ |
|||
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label { |
|||
border-bottom-color: var(--primary-dark2); |
|||
} |
|||
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover, body .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover { |
|||
background-color: #1367a2; |
|||
border-radius: 5px 5px 0 0; |
|||
} |
|||
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { |
|||
background-color: var(--primary-dark4); |
|||
border-radius: 5px 5px 0 0; |
|||
} |
|||
body .oo-ui-tabSelectWidget-framed { |
|||
border: 0; |
|||
background: #354149; |
|||
} |
|||
/* custom scrollbar */ |
|||
::-webkit-scrollbar { |
|||
width: 15px; |
|||
} |
|||
::-webkit-scrollbar:horizontal { |
|||
height: 15px; |
|||
} |
|||
::-webkit-scrollbar-track { |
|||
background-image: url(https://static.miraheze.org/dragontamerwiki/thumb/7/7f/Scrollbar.png/24px-Scrollbar.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 15px 100%; |
|||
} |
|||
::-webkit-scrollbar-track:horizontal { |
|||
background-image: url(https://static.miraheze.org/dragontamerwiki/2/2c/Scrollbar-horizontal.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 15px; |
|||
} |
|||
::-webkit-scrollbar-thumb { |
|||
background: linear-gradient(90deg, transparent 2px, #e2f647 2px, #a2d73e, #51bb57 13px, transparent 13px); |
|||
border-radius: 15px; |
|||
} |
|||
::-webkit-scrollbar-thumb:horizontal { |
|||
background: linear-gradient(180deg, transparent 2px, #e2f647 2px, #a2d73e, #51bb57 13px, transparent 13px); |
|||
border-radius: 15px; |
|||
} |
|||
::-webkit-scrollbar-button:vertical:decrement { |
|||
background-image: url(https://static.miraheze.org/dragontamerwiki/1/14/Scrollbar-up.png); |
|||
background-size: cover; |
|||
background-repeat: no-repeat; |
|||
height: 20px; |
|||
background-position: top; |
|||
} |
|||
::-webkit-scrollbar-button:horizontal:decrement { |
|||
background-image: url(https://static.miraheze.org/dragontamerwiki/2/22/Scrollbar-left.png); |
|||
background-size: cover; |
|||
background-repeat: no-repeat; |
|||
width: 20px; |
|||
background-position: left; |
|||
} |
|||
::-webkit-scrollbar-button:vertical:increment { |
|||
background-image: url(https://static.miraheze.org/dragontamerwiki/a/a4/Scrollbar-down.png); |
|||
background-size: cover; |
|||
background-repeat: no-repeat; |
|||
height: 20px; |
|||
background-position: bottom; |
|||
} |
|||
::-webkit-scrollbar-button:horizontal:increment { |
|||
background-image: url(https://static.miraheze.org/dragontamerwiki/c/c2/Scrollbar-right.png); |
|||
background-size: cover; |
|||
background-repeat: no-repeat; |
|||
width: 20px; |
|||
background-position: right; |
|||
} |
|||
/* tables */ |
|||
.wikitable > * > tr > th { |
|||
background-color: #d4d0b9 !important; |
|||
} |
|||
.wikitable:not([style*='background-color']) > * > tr > td, .wikitable > * > tr > td, .wikitable { |
|||
background: none; |
|||
} |
|||
.client-darkmode .wikitable:not([style*='background-color']) > * > tr > td, .client-darkmode .wikitable > * > tr > td, .client-darkmode .wikitable { |
|||
background: transparent !important; |
|||
} |
|||
/* border color */ |
|||
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { |
|||
border: 1px solid var(--primary-dark4); |
|||
} |
|||
/* add a per-table scrollbar if it overflows */ |
|||
table { |
|||
overflow-x: auto; |
|||
display: inline-block; |
|||
max-width: 93%; |
|||
} |
|||
.wikitable { |
|||
border: none !important; |
|||
} |
|||
/* language select panel */ |
|||
.mw-pt-languages-label { |
|||
background-color: #cac3aa; |
|||
} |
|||
.mw-pt-languages { |
|||
display: block; |
|||
background-color: #d4d0b9; |
|||
border: 1px solid #b6b3a1; |
|||
border-radius: 10px; |
|||
font-size: smaller; |
|||
} |
|||
.mw-pt-translate-header { |
|||
border: none; |
|||
} |
|||
/* galleries */ |
|||
/* remove the white bg from image thumbs */ |
|||
li.gallerybox div.thumb { |
|||
background: none; |
|||
width: auto !important; |
|||
margin: 0px; |
|||
} |
|||
li.gallerybox .thumb { |
|||
border-color: #b5af8d8a !important; |
|||
} |
|||
/* bottom caption styling */ |
|||
div.gallerytext { |
|||
background: linear-gradient(0deg, #cbc6a7, transparent); |
|||
border-bottom-right-radius: 5px; |
|||
border-bottom-left-radius: 5px; |
|||
border: 1px solid #b5af8d; |
|||
} |
|||
/* image margin */ |
|||
li.gallerybox { |
|||
padding: 8px; |
|||
} |
|||
/* makes mobile galleries more compact */ |
|||
@media only screen and (max-width: 850px) { |
|||
li.gallerybox { |
|||
padding: 4px; |
|||
margin-left: 0px; |
|||
} |
|||
} |
|||
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { |
|||
margin: 0; |
|||
} |
|||
/* TOC */ |
|||
.skin-cosmos .toc { |
|||
border: 1px solid #beb694; |
|||
background-color: #242321; |
|||
border-radius: 5px; |
|||
} |
|||
#mw-content .toc > ul { |
|||
padding: 16px; |
|||
border-top: solid 1px #BEB693; |
|||
} |
|||
/* Portable Infoboxes */ |
|||
/* bottom margin for top notices on mobile */ |
|||
.portable-infobox.pi-background { |
|||
margin-bottom: 15px; |
|||
} |
|||
/* image size */ |
|||
.portable-infobox .pi-image-thumbnail { |
|||
width: 90%; |
|||
} |
|||
@media screen and (max-width: 700px) { |
|||
.portable-infobox .pi-image-thumbnail { |
|||
width: 60%; |
|||
} |
|||
} |
|||
/* rounded corners */ |
|||
.portable-infobox { |
|||
border-radius: 5px; |
|||
overflow: hidden; |
|||
} |
|||
/* making the label column wider */ |
|||
.portable-infobox .pi-data-label { |
|||
-webkit-flex-basis: 45%; |
|||
-moz-flex-basis: 45%; |
|||
flex-basis: 45%; |
|||
-ms-flex-preferred-size: 45%; |
|||
} |
|||
@media screen and (max-width: 720px) { |
|||
.portable-infobox .pi-data-label { |
|||
flex-basis: 35%; |
|||
} |
|||
} |
|||
/* MultimediaViewer */ |
|||
/* remove the checker bg */ |
|||
.mw-mmv-image img.gif, .mw-mmv-image img.png, .mw-mmv-image img.svg, .mw-mmv-image img.tiff, .mw-mmv-image img.tif { |
|||
background: none; |
|||
} |
|||
/* make the black bg semitransparent and add a shadow to the image */ |
|||
.mw-mmv-overlay { |
|||
background-color: #00000090; |
|||
} |
|||
.mw-mmv-image { |
|||
filter: drop-shadow(0px 0px 10px black); |
|||
} |
|||
/* panel and button colors */ |
|||
.mw-mmv-post-image { |
|||
background-color: #dfdbc2; |
|||
} |
|||
.mw-mmv-image-metadata { |
|||
border-top: 1px solid #beb694; |
|||
background-color: #d5d0ba; |
|||
} |
|||
.mw-ui-button.mw-ui-progressive:not(:disabled) { |
|||
background-color: #337800; |
|||
border-color: #337800; |
|||
} |
|||
.mw-ui-button.mw-ui-progressive:not(:disabled):hover { |
|||
background-color: #439407; |
|||
border-color: #439407; |
|||
} |
|||
/* profile button */ |
|||
#profile-toggle-button { |
|||
border-radius: 10px; |
|||
} |
|||
@media only screen and (max-width: 850px) { |
|||
#profile-toggle-button { |
|||
position: relative; |
|||
top: 0px; |
|||
text-align: center; |
|||
margin-bottom: 25px; |
|||
} |
|||
} |
|||
/* edit sticky button! */ |
/* edit sticky button! */ |
||
Line 29: | Line 808: | ||
text-align: center; |
text-align: center; |
||
line-height: 40px; |
line-height: 40px; |
||
filter: drop-shadow(0px 0px 5px #FFFFFF99); |
|||
position: sticky; |
position: sticky; |
||
display: block; |
display: block; |
||
Line 36: | Line 815: | ||
margin-right: -60px; |
margin-right: -60px; |
||
z-index: 100; |
z-index: 100; |
||
transition: |
transition: transform 0.2s, filter 0.25s; |
||
/*padding-top: 5px; |
/*padding-top: 5px; |
||
padding-left: 5px;*/ |
padding-left: 5px;*/ |
||
Line 45: | Line 824: | ||
div#custom-editbutton:hover { |
div#custom-editbutton:hover { |
||
transform: translate(0px, 0px) scale(1.06); |
|||
filter: drop-shadow(0px 0px 10px #FFFFFF99) brightness(110%); |
|||
transform: scale(1.2); |
|||
} |
} |
||
Line 55: | Line 834: | ||
fill-opacity: 0; |
fill-opacity: 0; |
||
} |
} |
||
} |
|||
/* infobutton */ |
|||
#custom-infopanel { |
|||
background: linear-gradient(180deg, #d4d0b9 2em, #dfdbc3 2em); |
|||
position: fixed; |
|||
padding: 8px; |
|||
width: 12%; |
|||
right: 10px; |
|||
z-index: 50; |
|||
border-radius: 5px; |
|||
box-shadow: 0 0 10px #00000040; |
|||
height: 50%; |
|||
} |
|||
#custom-infopanel-title { |
|||
font-weight: bold; |
|||
text-align: center; |
|||
margin-bottom: 0.4em; |
|||
margin-top: -0.2em; |
|||
color: #807657; |
|||
} |
|||
/* info sticky button! */ |
|||
@media only screen and (max-width: 850px) { |
|||
div#custom-infobutton { |
|||
display: none; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 850px) { |
|||
div#custom-infobutton { |
|||
background: #dfdbc3; |
|||
height: 40px; |
|||
width: 40px; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
line-height: 40px; |
|||
box-shadow: 0px 0px 7px #00000060; |
|||
position: sticky; |
|||
display: block; |
|||
top: 35%; |
|||
float: right; |
|||
margin-right: -60px; |
|||
z-index: 100; |
|||
transition: filter 0.2s,transform 0.2s; |
|||
animation-name: fade-in; |
|||
animation-duration: 0.5s; |
|||
animation-fill-mode: both; |
|||
background-image: url(https://static.miraheze.org/dragontamerwiki/6/6e/%21.png); |
|||
background-size: 120%; |
|||
background-position: center; |
|||
} |
|||
div#custom-infobutton:hover { |
|||
filter: contrast(1.2); |
|||
transform: scale(1.2); |
|||
} |
|||
} |
|||
#custom-infopanel-content { |
|||
height: 95%; |
|||
overflow: auto; |
|||
margin-top: 10px; |
|||
font-size: smaller; |
|||
} |
|||
/* remove the "DISCUSSION" button in certain namespaces (Main, File, Dragon, Skill, Category, Project, MediaWiki, and Community) */ |
|||
.ns-0 div#ca-talk, .ns-6 div#ca-talk, .ns-3000 div#ca-talk, .ns-3002 div#ca-talk, |
|||
.ns-14 div#ca-talk, .ns-4 div#ca-talk, .ns-8 div#ca-talk, .ns-3004 div#ca-talk { |
|||
display: none; |
|||
} |
|||
/* Structured Discussions */ |
|||
@media (min-width: 1165px) { |
|||
.flow-component.flow-board-page.flow-full-height-side-rail .flow-board-header:before { |
|||
background-color: #d5d0ba; |
|||
} |
|||
} |
|||
/*hide the board edit button*/ |
|||
.flow-ui-boardDescriptionWidget-editButton.oo-ui-widget.oo-ui-buttonElement .oo-ui-buttonElement-button { |
|||
display: none; |
|||
} |
|||
.oo-ui-toolbar-bar { |
|||
background-color: #d5d0ba; |
|||
} |
|||
.flow-ui-editorWidget > .flow-ui-editorWidget-editor:not(.oo-ui-pendingElement-pending) { |
|||
background-color: #dfdbc2; |
|||
} |
|||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { |
|||
color: #fff !important; |
|||
background-color: #1f5d04; |
|||
border-color: #1f5d04; |
|||
} |
|||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { |
|||
background-color: #337800; |
|||
border-color: #337800; |
|||
} |
|||
.flow-topic { |
|||
padding: 1em 1em 1.4em; |
|||
margin-top: 0.6em; |
|||
background: #d5d0ba; |
|||
border: #beb694 1px solid; |
|||
border-radius: 10px; |
|||
} |
|||
.flow-topic-titlebar { |
|||
position: relative; |
|||
padding: 0.5em 0; |
|||
background: linear-gradient(90deg, #1f5d0420, transparent); |
|||
border-radius: 10px; |
|||
border-left: 5px #1f5d0450 solid; |
|||
} |
|||
.flow-ui-editorWidget-focused .flow-ui-editorWidget-editor { |
|||
border-color: #1f5d04; |
|||
box-shadow: inset 0 0 0 1px #1f5d04; |
|||
} |
|||
.mw-content-ltr .flow-post-meta-actions { |
|||
display: none; |
|||
} |
|||
.flow-topic-moderatestate-lock .flow-topic-titlebar { |
|||
background-color: transparent; |
|||
} |
|||
/* Code Editor */ |
|||
.ace-tm .ace_gutter { |
|||
background: #d4d0b9; |
|||
} |
|||
.ace-tm { |
|||
background-color: transparent; |
|||
} |
|||
.codeEditor-status { |
|||
background-color: #d4d0b9; |
|||
border-top: 1px solid #b6b3a1; |
|||
} |
|||
.ace-tm .ace_gutter-active-line { |
|||
background-color: #cbc4a9; |
|||
} |
|||
.ace-tm .ace_print-margin { |
|||
width: 0px; |
|||
background: #d4d0b9; |
|||
} |
} |
Latest revision as of 02:19, 4 June 2023
/* All CSS here will be loaded for users of the Cosmos skin */
/*remove the editsection */
.mw-editsection {
display: none;
}
/* hide the edit button on mobile */
@media only screen and (max-width: 850px) {
#cosmos-articleHeader-actions {
display: none;
}
}
/* bulletlist fix */
li {
margin-left: 25px;
}
/* background
body {
background-image: url(https://static.miraheze.org/walkscapewiki/2/29/WalkScapeBackground.jpg);
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
*/
/* editing space */
.wikiEditor-ui-toolbar {
background-color: #242321;
box-shadow: none !important;
border: solid #b6b3a1;
border-radius: 3px 3px 0 0;
border-width: 1px 1px 0;
padding: 9px 6px;
}
.wikiEditor-ui .wikiEditor-ui-view {
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: solid 1px #aaaaaa;
}
#msupload-div {
background: #d4d0b9;
border: 1px solid #aaa;
border-radius: 0 0 3px 3px;
}
#msupload-dropzone {
border: 1px dashed #ddd;
background-color: #d4d0b9;
}
#msupload-list .file {
background: #dfdbc3;
border-top: none !important;
}
#msupload-bottom {
background-color: #d4d0b9;
}
.editOptions {
border: none !important;
background: none !important;
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: #ffffff42;
}
.oo-ui-checkboxInputWidget [type='checkbox'] + span {
background-color: #ffffff42;
}
.CodeMirror-scroll {
background: none !important;
}
.wikiEditor-ui .CodeMirror {
background: none !important;
}
.cm-mw-doubleUnderscore, .cm-mw-signature, .cm-mw-hr {
background-color: #0088ff36;
}
.cm-mw-link-ground {
background-color: #33780010;
}
.cm-mw-link-bracket {
color: #337800;
}
.cm-mw-link-pagename {
color: #337800;
}
.cm-mw-link-delimiter {
color: #337800;
}
.CodeMirror-gutter-wrapper {
display: none;
}
.CodeMirror-gutters {
display: none;
}
#cosmos-banner{
background-image:linear-gradient(#00000090, #00000030, transparent);
}
/* transparent header */
.cosmos-header{
background: none !important;
background-color: transparent !important;
background-image: none !important;
}
.cosmos-header:before {
background: none;
}
#cosmos-header-articleHeader {
margin-bottom: 20px;
}
/* header text elements */
.cosmos-header__sitename a:any-link {
color: #dfdbc3;
/* filter: drop-shadow(0px 0px 4px #00000090); */
}
.cosmos-header .cosmos-header__counter {
color: #dfdbc3;
/* filter: drop-shadow(0px 0px 4px #00000090); */
}
.cosmos-header .cosmos-header__local-navigation {
height: 33px;
/* filter: drop-shadow(0px 0px 4px #00000090); */
}
.cosmos-header .wds-button.wds-is-secondary {
border-color: #dfdbc3;
color: #dfdbc3;
/* filter: drop-shadow(0px 0px 10px #00000090); */
}
.cosmos-header .wds-button-group > .wds-dropdown:not(:first-child) .wds-button {
border-left-color: #dfdbc3;
}
.cosmos-header .wds-tabs .wds-tabs__tab-label a {
color: #dfdbc3;
}
.cosmos-header .wds-tabs .wds-tabs__tab-label {
color: #dfdbc3;
}
.wds-tabs__tab-label {
padding: 16px 0;
}
div#p-☰-label {
font-size: 20px;
}
.cosmos-header .wds-dropdown__content .wds-list.wds-is-linked li > a:not(.wds-button) {
color: var(--textcolor-secondary);
}
/* dropdowns */
.cosmos-modal-content {
border: none;
border-radius: 5px;
background-color: #FFFFFF;
}
.cosmos-dropdown-list {
border: none;
background-color: #FFFFFF;
color: white;
}
.wds-dropdown__content {
border: none;
background-color: var(--primary-main) !important;
filter: drop-shadow(0px 0px 8px #00000040);
}
.wds-dropdown:before {
border-bottom-color: var(--primary-main) !important;
}
.wds-dropdown:after {
border-bottom-color: var(--primary-main) !important;
}
/* dropdown hover effects */
.cosmos-dropdown a {
transition: background-color 0.2s;
border-radius: 5px;
}
.cosmos-dropdown a:hover {
background-color: #3F4448 !important;
color: white;
}
.wds-dropdown__content a {
transition: background-color 0.2s;
border-radius: 5px;
}
.wds-dropdown__content a:hover {
background-color: #3F4448 !important;
color: white;
}
@media screen and (max-width: 850px) {
.wds-tabs {
background-color: var(--primary-main);
}
}
/* category link dropdowns */
.wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list:after,
.wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list:before {
background: none;
}
.wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list {
background-image: none;
}
#cosmos-footer {
background-color: transparent;
background-image: linear-gradient(#00000090 0px,#00000030 50px,transparent 100px) !important;
}
#cosmos-toolbar{
display:none;
background-image: none;
background: #2f523d;
box-shadow: 0 0 10px 0 black;
}
/* Main content box */
#mw-content {
border-radius: 5px;
min-height: 420px;
box-shadow: 0px 0px 6px #00000090;
padding-bottom: 30px;
border-left: 1px solid #BFAA8C
border-right: 1px solid #BFAA8C
}
@media only screen and (max-width: 850px) {
#mw-content {
font-size: 90%;
}
}
#catlinks {
border-radius: 5px;
border-color: var(--primary-dark4);
}
/* make the top margin smaller */
#mw-content-container {
padding-top: 2% !important;
}
/* file page buttons */
#filetoc {
border: 1px solid var(--primary-dark4);
background-color: var(--primary-dark1);
}
.mw-ui-button {
background-color: var(--primary-dark1);
border: 1px solid var(--primary-dark4);
}
.mw-ui-button:not(:disabled):hover {
background-color: var(--primary-dark2);
border-color: var(--secondary-light2);
}
/* header underline color */
#mw-content h2:not(#mw-toc-heading), #mw-content h1:not(#firstHeading) {
border-bottom: solid 1px var(--primary-dark4) !important;
}
/* NEXT button */
.wds-button.wds-is-text {
color: var(--textcolor-main);
}
/* search box */
#searchform input {
backdrop-filter: blur(10px) contrast(1.2);
}
.client-darkmode #searchInput {
background: rgba(0,0,0,0.4);
}
/* CSS edit area */
textarea {
background: none !important;
backdrop-filter: brightness(0.9) contrast(1.2);
border: none !important;
color: white;
}
/* Recent Changes */
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
background: var(--primary-dark1);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background-color: var(--primary-dark1);
}
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background-color: var(--primary-dark1);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
background-color: var(--primary-dark1);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background-color: var(--primary-dark2);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
background-color: var(--primary-dark4);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .mw-rcfilters-ui-tagItemWidget-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
background-color: var(--primary-dark2);
border-color: #1367a2;
border-width: 2px;
}
/* recent changes legend panel */
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend {
background-color: var(--primary-dark1);
border: 1px solid var(--primary-dark4);
}
/* option Headers */
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
border-bottom-color: var(--primary-dark2);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover, body .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
background-color: #1367a2;
border-radius: 5px 5px 0 0;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
background-color: var(--primary-dark4);
border-radius: 5px 5px 0 0;
}
body .oo-ui-tabSelectWidget-framed {
border: 0;
background: #354149;
}
/* custom scrollbar */
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar:horizontal {
height: 15px;
}
::-webkit-scrollbar-track {
background-image: url(https://static.miraheze.org/dragontamerwiki/thumb/7/7f/Scrollbar.png/24px-Scrollbar.png);
background-repeat: no-repeat;
background-size: 15px 100%;
}
::-webkit-scrollbar-track:horizontal {
background-image: url(https://static.miraheze.org/dragontamerwiki/2/2c/Scrollbar-horizontal.png);
background-repeat: no-repeat;
background-size: 100% 15px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, transparent 2px, #e2f647 2px, #a2d73e, #51bb57 13px, transparent 13px);
border-radius: 15px;
}
::-webkit-scrollbar-thumb:horizontal {
background: linear-gradient(180deg, transparent 2px, #e2f647 2px, #a2d73e, #51bb57 13px, transparent 13px);
border-radius: 15px;
}
::-webkit-scrollbar-button:vertical:decrement {
background-image: url(https://static.miraheze.org/dragontamerwiki/1/14/Scrollbar-up.png);
background-size: cover;
background-repeat: no-repeat;
height: 20px;
background-position: top;
}
::-webkit-scrollbar-button:horizontal:decrement {
background-image: url(https://static.miraheze.org/dragontamerwiki/2/22/Scrollbar-left.png);
background-size: cover;
background-repeat: no-repeat;
width: 20px;
background-position: left;
}
::-webkit-scrollbar-button:vertical:increment {
background-image: url(https://static.miraheze.org/dragontamerwiki/a/a4/Scrollbar-down.png);
background-size: cover;
background-repeat: no-repeat;
height: 20px;
background-position: bottom;
}
::-webkit-scrollbar-button:horizontal:increment {
background-image: url(https://static.miraheze.org/dragontamerwiki/c/c2/Scrollbar-right.png);
background-size: cover;
background-repeat: no-repeat;
width: 20px;
background-position: right;
}
/* tables */
.wikitable > * > tr > th {
background-color: #d4d0b9 !important;
}
.wikitable:not([style*='background-color']) > * > tr > td, .wikitable > * > tr > td, .wikitable {
background: none;
}
.client-darkmode .wikitable:not([style*='background-color']) > * > tr > td, .client-darkmode .wikitable > * > tr > td, .client-darkmode .wikitable {
background: transparent !important;
}
/* border color */
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
border: 1px solid var(--primary-dark4);
}
/* add a per-table scrollbar if it overflows */
table {
overflow-x: auto;
display: inline-block;
max-width: 93%;
}
.wikitable {
border: none !important;
}
/* language select panel */
.mw-pt-languages-label {
background-color: #cac3aa;
}
.mw-pt-languages {
display: block;
background-color: #d4d0b9;
border: 1px solid #b6b3a1;
border-radius: 10px;
font-size: smaller;
}
.mw-pt-translate-header {
border: none;
}
/* galleries */
/* remove the white bg from image thumbs */
li.gallerybox div.thumb {
background: none;
width: auto !important;
margin: 0px;
}
li.gallerybox .thumb {
border-color: #b5af8d8a !important;
}
/* bottom caption styling */
div.gallerytext {
background: linear-gradient(0deg, #cbc6a7, transparent);
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border: 1px solid #b5af8d;
}
/* image margin */
li.gallerybox {
padding: 8px;
}
/* makes mobile galleries more compact */
@media only screen and (max-width: 850px) {
li.gallerybox {
padding: 4px;
margin-left: 0px;
}
}
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {
margin: 0;
}
/* TOC */
.skin-cosmos .toc {
border: 1px solid #beb694;
background-color: #242321;
border-radius: 5px;
}
#mw-content .toc > ul {
padding: 16px;
border-top: solid 1px #BEB693;
}
/* Portable Infoboxes */
/* bottom margin for top notices on mobile */
.portable-infobox.pi-background {
margin-bottom: 15px;
}
/* image size */
.portable-infobox .pi-image-thumbnail {
width: 90%;
}
@media screen and (max-width: 700px) {
.portable-infobox .pi-image-thumbnail {
width: 60%;
}
}
/* rounded corners */
.portable-infobox {
border-radius: 5px;
overflow: hidden;
}
/* making the label column wider */
.portable-infobox .pi-data-label {
-webkit-flex-basis: 45%;
-moz-flex-basis: 45%;
flex-basis: 45%;
-ms-flex-preferred-size: 45%;
}
@media screen and (max-width: 720px) {
.portable-infobox .pi-data-label {
flex-basis: 35%;
}
}
/* MultimediaViewer */
/* remove the checker bg */
.mw-mmv-image img.gif, .mw-mmv-image img.png, .mw-mmv-image img.svg, .mw-mmv-image img.tiff, .mw-mmv-image img.tif {
background: none;
}
/* make the black bg semitransparent and add a shadow to the image */
.mw-mmv-overlay {
background-color: #00000090;
}
.mw-mmv-image {
filter: drop-shadow(0px 0px 10px black);
}
/* panel and button colors */
.mw-mmv-post-image {
background-color: #dfdbc2;
}
.mw-mmv-image-metadata {
border-top: 1px solid #beb694;
background-color: #d5d0ba;
}
.mw-ui-button.mw-ui-progressive:not(:disabled) {
background-color: #337800;
border-color: #337800;
}
.mw-ui-button.mw-ui-progressive:not(:disabled):hover {
background-color: #439407;
border-color: #439407;
}
/* profile button */
#profile-toggle-button {
border-radius: 10px;
}
@media only screen and (max-width: 850px) {
#profile-toggle-button {
position: relative;
top: 0px;
text-align: center;
margin-bottom: 25px;
}
}
/* edit sticky button! */
@media only screen and (max-width: 850px) {
div#custom-editbutton {
display: none;
}
}
@media only screen and (min-width: 850px) {
div#custom-editbutton {
background: #dfdbc3;
height: 40px;
width: 40px;
border-radius: 50%;
text-align: center;
line-height: 40px;
filter: drop-shadow(0px 0px 5px #FFFFFF99);
position: sticky;
display: block;
top: 30%;
float: right;
margin-right: -60px;
z-index: 100;
transition: transform 0.2s, filter 0.25s;
/*padding-top: 5px;
padding-left: 5px;*/
animation-name: fade-in;
animation-duration: 0.5s;
animation-fill-mode: both;
}
div#custom-editbutton:hover {
transform: translate(0px, 0px) scale(1.06);
filter: drop-shadow(0px 0px 10px #FFFFFF99) brightness(110%);
}
#custom-editbutton path {
stroke: #1f5d04;
stroke-width: 2px;
fill-opacity: 0;
}
}
/* infobutton */
#custom-infopanel {
background: linear-gradient(180deg, #d4d0b9 2em, #dfdbc3 2em);
position: fixed;
padding: 8px;
width: 12%;
right: 10px;
z-index: 50;
border-radius: 5px;
box-shadow: 0 0 10px #00000040;
height: 50%;
}
#custom-infopanel-title {
font-weight: bold;
text-align: center;
margin-bottom: 0.4em;
margin-top: -0.2em;
color: #807657;
}
/* info sticky button! */
@media only screen and (max-width: 850px) {
div#custom-infobutton {
display: none;
}
}
@media only screen and (min-width: 850px) {
div#custom-infobutton {
background: #dfdbc3;
height: 40px;
width: 40px;
border-radius: 50%;
text-align: center;
line-height: 40px;
box-shadow: 0px 0px 7px #00000060;
position: sticky;
display: block;
top: 35%;
float: right;
margin-right: -60px;
z-index: 100;
transition: filter 0.2s,transform 0.2s;
animation-name: fade-in;
animation-duration: 0.5s;
animation-fill-mode: both;
background-image: url(https://static.miraheze.org/dragontamerwiki/6/6e/%21.png);
background-size: 120%;
background-position: center;
}
div#custom-infobutton:hover {
filter: contrast(1.2);
transform: scale(1.2);
}
}
#custom-infopanel-content {
height: 95%;
overflow: auto;
margin-top: 10px;
font-size: smaller;
}
/* remove the "DISCUSSION" button in certain namespaces (Main, File, Dragon, Skill, Category, Project, MediaWiki, and Community) */
.ns-0 div#ca-talk, .ns-6 div#ca-talk, .ns-3000 div#ca-talk, .ns-3002 div#ca-talk,
.ns-14 div#ca-talk, .ns-4 div#ca-talk, .ns-8 div#ca-talk, .ns-3004 div#ca-talk {
display: none;
}
/* Structured Discussions */
@media (min-width: 1165px) {
.flow-component.flow-board-page.flow-full-height-side-rail .flow-board-header:before {
background-color: #d5d0ba;
}
}
/*hide the board edit button*/
.flow-ui-boardDescriptionWidget-editButton.oo-ui-widget.oo-ui-buttonElement .oo-ui-buttonElement-button {
display: none;
}
.oo-ui-toolbar-bar {
background-color: #d5d0ba;
}
.flow-ui-editorWidget > .flow-ui-editorWidget-editor:not(.oo-ui-pendingElement-pending) {
background-color: #dfdbc2;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
color: #fff !important;
background-color: #1f5d04;
border-color: #1f5d04;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
background-color: #337800;
border-color: #337800;
}
.flow-topic {
padding: 1em 1em 1.4em;
margin-top: 0.6em;
background: #d5d0ba;
border: #beb694 1px solid;
border-radius: 10px;
}
.flow-topic-titlebar {
position: relative;
padding: 0.5em 0;
background: linear-gradient(90deg, #1f5d0420, transparent);
border-radius: 10px;
border-left: 5px #1f5d0450 solid;
}
.flow-ui-editorWidget-focused .flow-ui-editorWidget-editor {
border-color: #1f5d04;
box-shadow: inset 0 0 0 1px #1f5d04;
}
.mw-content-ltr .flow-post-meta-actions {
display: none;
}
.flow-topic-moderatestate-lock .flow-topic-titlebar {
background-color: transparent;
}
/* Code Editor */
.ace-tm .ace_gutter {
background: #d4d0b9;
}
.ace-tm {
background-color: transparent;
}
.codeEditor-status {
background-color: #d4d0b9;
border-top: 1px solid #b6b3a1;
}
.ace-tm .ace_gutter-active-line {
background-color: #cbc4a9;
}
.ace-tm .ace_print-margin {
width: 0px;
background: #d4d0b9;
}