MediaWiki:Cosmos.css: Difference between revisions
From The Walkscape Walkthrough
Content deleted Content added
Floursifter (talk | contribs) No edit summary |
Floursifter (talk | contribs) No edit summary |
||
(6 intermediate revisions by the same user not shown) | |||
Line 36:
/* editing space */
.wikiEditor-ui-toolbar {
background-color: #
box-shadow: none !important;
border: solid #b6b3a1;
Line 415:
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
background-color: var(--primary-
}
Line 428:
.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:
border-width: 2px;
}
Line 452:
/* option Headers */
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
border-bottom-color: var(--
}
.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:
border-radius: 5px 5px 0 0;
}
Line 467:
body .oo-ui-tabSelectWidget-framed {
border: 0;
background:
}
|
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;
}