MediaWiki:Cosmos.css

/* 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: #9AA6AF;
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 .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: #3F4448;
}

.cosmos-dropdown-list {
border: none;
background-color: #3F4448;
color: white;
}

.cosmos-dropdown-list .ul .li:only-child {
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: var(--secondary-semitransparent) !important;
}

.wds-dropdown__content a {
    transition: background-color 0.2s;
    border-radius: 5px;
}
.wds-dropdown__content a:hover {
    background-color: var(--secondary-semitransparent) !important;
}

@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;
}

@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-main);
}

.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: var(--secondary-light1);
    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(--secondary-main);
}

.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: var(--secondary-semitransparent);
    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: var(--primary-dark1);
}











/* 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: #d5d0ba;
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;
}