|
|
| Línea 1: |
Línea 1: |
|
| |
|
| |
|
| /***
| |
| ****
| |
| **** CSS Variables
| |
| ****
| |
| ***/
| |
| @media screen {
| |
| :root {
| |
| --border-color-1:#b0b0b0;
| |
| --border-color-2:#c7c7c7;
| |
| --color-surface-2:hsl(0,0%,97%);
| |
| --color-surface-4:hsl(213,30%,85%);
| |
| --color-surface-5:hsl(220,17%,93%);
| |
| --color-surface-6:hsl(200,2%,60%);
| |
| --color-surface-7:hsl(180,2%,40%);
| |
| --color-surface-subtle-red:hsl(0, 100%, 97%);
| |
| --color-success2:hsl(167,70%,31%);
| |
| --color-codeeditor-select:#b5d5ff;
| |
| --color-codeeditor-similar:#fafaff;
| |
| --color-codeeditor-similar-border:#c8c8fa;
| |
| --color-red-2:#900010;
| |
| --color-red-3:#b50014;
| |
| --color-red-light-3:#c33242;
| |
| --color-base:#262e35;
| |
| --color-base--subtle:#646464;
| |
| --color-base--emphasized:#202020;
| |
| --color-primary:#143fbf;
| |
| }
| |
| :root.skin-citizen-dark {
| |
| --border-color-1:hsl(220, 28%, 23%);
| |
| --border-color-2:hsl(220,25%,20%);
| |
| --color-surface-5:hsl(220,25%,15%);
| |
| --color-surface-6:hsl(220,12%,35%);
| |
| --color-surface-7:hsl(220,12%,40%);
| |
| --color-codeeditor-select:#485465;
| |
| --color-codeeditor-similar:#394350;
| |
| --color-codeeditor-similar-border:#4c5561;
| |
| --color-red-2:#900010;
| |
| --color-surface-subtle-red:hsl(0, 45%, 28%);
| |
| --color-primary:#5c85d6;
| |
| }
| |
| .skin-citizen-dark .mw-portlet a::before{ /* inverts preprended icon colour in dark theme */
| |
| filter:invert(1);
| |
| }
| |
| }
| |
|
| |
| /***
| |
| ****
| |
| **** Mobile Citizen CSS
| |
| ****
| |
| ***/
| |
| @media (max-width: 720px) {
| |
| table {
| |
| width:100% !important;
| |
| display: table;
| |
| }
| |
| }
| |
|
| |
| /******
| |
| ****** General theming
| |
| ******
| |
| *******/
| |
| /* Adds bottom border for Title and level 1 headers */
| |
| h1,h2 {
| |
| border-bottom: 1px solid #a2a9b1;
| |
| }
| |
|
| |
| h1 {
| |
| width: 100%;
| |
| }
| |
| /* Removes bottom border from sticky title heading */
| |
| .citizen-body-header--sticky h1 {
| |
| border: none;
| |
| }
| |
|
| |
| /***
| |
| **** CSS for edit buttons
| |
| ***/
| |
|
| |
| @media screen{
| |
| #ca-request-account > a::before{
| |
| width:var(--size-icon);
| |
| height:var(--size-icon);
| |
| background-position:var(--size-icon);
| |
| background-repeat:var(--size-icon);
| |
| background-size:var(--size-icon);
| |
| content:'';
| |
| filter:invert(1);
| |
| opacity:1;
| |
| background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22%23000%22%3E %3Cpath d=%22m19.5 9.8 2.2-2.2c.4-.4.4-1.1 0-1.6L18 2.3c-.4-.4-1.1-.4-1.6 0l-2.2 2.2 5.3 5.3zm-6.4-4.1L2 16.7V22h5.3l11.1-11.1c-.1 0-5.3-5.2-5.3-5.2z%22/%3E %3C/g%3E%3C/svg%3E");
| |
| }
| |
| }
| |
|
| |
| #ca-edit > a:hover, #ca-ve-edit > a:hover, #ca-request-account > a:hover {
| |
| background-color: var(--color-red-light-3);
| |
| }
| |
|
| |
| #ca-edit > a, #ca-ve-edit > a, #ca-request-account > a{
| |
| background-color: var(--color-red-3);
| |
| color: #fff;
| |
| }
| |
|
| |
| .citizen-ve-edit-merged#ca-edit {
| |
| border-left: 1px solid #a20012;
| |
| }
| |
|
| |
| #citizen-languages__buttonCheckbox::after {
| |
| background: var(--color-red-3);
| |
| }
| |
|
| |
| /***
| |
| **** CSS for article references
| |
| ***/
| |
| .rt-tooltip {
| |
| background-color: var(--color-surface-2);
| |
| color: var(--color-base);
| |
| border:1px solid var(--border-color-1)
| |
| }
| |
| .rt-tooltipTail::after {
| |
| background: var(--color-surface-2);
| |
| }
| |
| .rt-tooltipTail {
| |
| background:linear-gradient(to top right,var(--border-color-1) 50%,rgba(0,0,0,0) 50%)
| |
| }
| |
|
| |
|
| |
| .toccolours {
| |
| background-color: var(--color-surface-2);
| |
| border: 1px solid var(--border-color-1);
| |
| }
| |
|
| |
| blockquote {
| |
| font-family: inherit;
| |
| color: inherit;
| |
| font-style: inherit;
| |
| font-size: 95%;
| |
| }
| |
| /***
| |
| **** CSS for input textboxes
| |
| ***/
| |
| .mw-ui-input {
| |
| border-color: var(--border-color-1);
| |
| }
| |
|
| |
| /***
| |
| **** CSS for wikitables
| |
| ***/
| |
| .wikitable th {
| |
| border: 1px solid var(--border-color-2);
| |
| background-color: var(--color-surface-3);
| |
| }
| |
| .wikitable td {
| |
| background-color: var(--color-surface-2)
| |
| }
| |
| .wikitable {
| |
| border: 1px solid var(--border-color-2);
| |
| }
| |
|
| |
| /***
| |
| **** CSS for Infoboxes
| |
| ***/
| |
| .infobox {
| |
| border: 1px solid var(--border-color-1) !important;
| |
| background-color: var(--color-surface-2) !important;
| |
| color: var(--color-base) !important;
| |
| margin: 0.5em 0 0.5em 1em;
| |
| border-spacing: 3px;
| |
| float: right;
| |
| clear: right;
| |
| font-size: 88%;
| |
| line-height: 1.5em;
| |
| padding: 1em;
| |
|
| |
| }
| |
| .infobox td, .infobox th {
| |
| vertical-align: top;
| |
| text-align: left;
| |
| }
| |
| .infobox.geography {
| |
| border-collapse: collapse;
| |
| line-height: 1.2em;
| |
| font-size: 90%;
| |
| }
| |
| .infobox.geography td, .infobox.geography th {
| |
| border-top: 1px solid var(--border-color-1);
| |
| padding: 0.4em 1.5em 0.4em 1.5em;
| |
| }
| |
| .infobox.geography .mergedtoprow td, .infobox.geography .mergedtoprow th {
| |
| border-top: 1px solid var(--border-color-1);
| |
| padding: 0.4em 1.5em 0.2em 1.5em;
| |
| }
| |
|
| |
| .infobox.geography .mergedbottomrow td, .infobox.geography .mergedbottomrow th {
| |
| border-top: 0;
| |
| border-bottom: 1px solid var(--border-color-1);
| |
| padding: 0 1.5em 0.4em 1.5em;
| |
| }
| |
| .infobox.geography .mergedrow td, .infobox.geography .mergedrow th {
| |
| border:0;
| |
| padding: 0 1.5em 0.2em 1.5em;
| |
| }
| |
|
| |
| .infobox.geography .maptable td,
| |
| .infobox.geography .maptable th {
| |
| border: 0;
| |
| padding: 0;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
| /***
| |
| **** CSS for Navboxes
| |
| ***/
| |
| .navbox th, .navbox-title {
| |
| background-color: var(--color-surface-4);
| |
| }
| |
| .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title {
| |
| background-color: var(--color-surface-5);
| |
| }
| |
| .navbox {
| |
| background-color: var(--color-surface-1);
| |
| border: 1px solid var(--border-color-1);
| |
| }
| |
| .navbox-list {
| |
| border-color: var(--border-color-2);
| |
| }
| |
| .navbox-even {
| |
| background-color: var(--color-surface-2);
| |
| }
| |
| tr + tr > .navbox-abovebelow, tr + tr > .navbox-group, tr + tr > .navbox-image, tr + tr > .navbox-list {
| |
| border-top: 2px solid var(--border-color-2);
| |
| }
| |
|
| |
| /***
| |
| **** CSS for Message boxes
| |
| ***/
| |
| .mbox {
| |
| border: 1px solid var(--border-color-1) !important;
| |
| background-color: var(--color-surface-2) !important;
| |
| border-left: 10px solid var(--color-red-3) !important;
| |
| }
| |
| /***
| |
| **** Sidebar CSS
| |
| ***/
| |
| .skin-citizen .sidebar {
| |
| background: var(--color-surface-2) !important;
| |
| border: 1px solid var(--border-color-1) !important;
| |
| }
| |
|
| |
|
| |
|
| |
| /**
| |
| * StructuredDiscussions theming (discussion pages)
| |
| *
| |
| **/
| |
| .flow-post {
| |
| color: var(--color-base);
| |
| }
| |
| .flow-topic-titlebar {
| |
| background-color: var(--color-surface-3);
| |
| }
| |
| div > .flow-menu ul {
| |
| background: var(--color-surface-2);
| |
| border: 1px solid var(--border-color-1);
| |
| }
| |
| .flow-topic-moderatestate-lock .flow-topic-titlebar {
| |
| background-color: var(--color-surface-4);
| |
| }
| |
| .flow-component.flow-board-page .flow-board-header {
| |
| background-color: var(--color-surface-2);
| |
| }
| |
| .flow-ui-editorWidget-editor {
| |
| border: 1px solid var(--border-color-2);
| |
| }
| |
|
| |
|
| |
| @media all and (min-width:1165px) {
| |
| .flow-component.flow-board-page .flow-board-navigation,
| |
| .flow-component.flow-board-page .flow-board {
| |
| float:none;
| |
| }
| |
| .flow-component.flow-board-page .flow-board-header {
| |
| min-height:0;
| |
| }
| |
| }
| |
|
| |
|
| |
| /**
| |
| * ConfirmAcccount theming
| |
| *
| |
| **/
| |
| .mw-confirmaccount-type-0 {
| |
| background-color: var(--color-surface-4);
| |
| }
| |
| .mw-confirmaccount-body-0 {
| |
| background-color: var(--color-surface-5);
| |
| }
| |
| .wpNewBio {
| |
| background-color: var(--color-surface-2);
| |
| }
| |
| .mw-special-ConfirmAccounts fieldset {
| |
| border: 1px solid var(--border-color-1);
| |
| }
| |
| .mw-confirmaccount-bar {
| |
| border: 1px solid var(--border-color-1);
| |
| background-color: var(--color-surface-2);
| |
| }
| |
| input, select, textarea {
| |
| border: 1px solid var(--border-color-1);
| |
| background-color: var(--color-surface-2);
| |
| color: var(--color-base--emphasized);
| |
| }
| |
|
| |
|
| |
| /***
| |
| **** Code editor interface
| |
| ***/
| |
| .ace-tm .ace_gutter {
| |
| background-color:var(--color-surface-2);
| |
| border-right:1px solid var(--border-color-2);
| |
| }
| |
| .ace-tm .ace_marker-layer .ace_selection {
| |
| background: var(--color-codeeditor-select);
| |
| }
| |
| .ace-tm .ace_marker-layer .ace_selected-word {
| |
| background:var(--color-codeeditor-similar);
| |
| border: 1px solid var(--color-codeeditor-similar-border);
| |
| }
| |
| .ace_search {
| |
| background-color: var(--color-surface-2);
| |
| color: var(--color-base);
| |
| border: 1px solid var(--border-color-2);
| |
| }
| |
| .ace_search_field {
| |
| color: var(--color-base);
| |
| background-color: var(--color-surface-1);
| |
| border-color: var(--border-color-2)
| |
| }
| |
| .ace_searchbtn {
| |
| color: var(--color-base);
| |
| background-color: var(--color-surface-2);
| |
| border-color: var(--border-color-2);
| |
| }
| |
| .ace_searchbtn:hover {
| |
| background-color: var(--color-surface-4);
| |
| }
| |
| .ace_searchbtn:last-child {
| |
| border-color: var(--border-color-2);
| |
| }
| |
| .ace_button {
| |
| color: var(--color-base);
| |
| }
| |
| .ace_button:hover {
| |
| background-color: var(--color-surface-4);
| |
| }
| |
| /*.ace-tm .ace_constant.ace_numeric {*/
| |
| /* color: rgb(200, 100, 200);*/
| |
| /*}*/
| |
| /*.ace-tm .ace_storage,*/
| |
| /*.ace-tm .ace_keyword {*/
| |
| /* color: rgb(0,150,200);*/
| |
| /*}*/
| |
|
| |
|
| |
| /***
| |
| ****
| |
| **** Visual editor interface
| |
| ****
| |
| ***/
| |
| .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::before {
| |
| border-bottom-color: var(--border-color-1);
| |
| }
| |
| .oo-ui-popupWidget-popup {
| |
| border: 1px solid var(--border-color-2);
| |
| }
| |
| .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link {
| |
| background-color: var(--color-red-3);
| |
| }
| |
| .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:hover {
| |
| background-color:var(--color-red-light-3);
| |
| }
| |
| .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
| |
| background-color:var(--color-red-3);
| |
| border-color: var(--color-red-light-3);
| |
| }
| |
| .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
| |
| border-color: var(--color-red-light-3);
| |
| }
| |
| .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover{
| |
| background-color:var(--color-red-light-3);
| |
| }
| |
|
| |
| /***
| |
| ****
| |
| **** Source editor interface
| |
| ****
| |
| ***/
| |
| .wikiEditor-ui-toolbar {
| |
| padding: 0.25em;
| |
| box-shadow: 0px 3px 5px rgba(0,0,0,0.1);
| |
| background-color:var(--color-surface-2);
| |
| }
| |
| .wikiEditor-ui .wikiEditor-ui-view {
| |
| border:1px solid var(--border-color-1);
| |
| }
| |
| .wikiEditor-ui .wikiEditor-ui-top::before {
| |
| backdrop-filter: none;
| |
| background-color: transparent;
| |
| }
| |
| .CodeMirror-gutters {
| |
| background-color:var(--color-surface-2);
| |
| border-right:1px solid var(--border-color-2);
| |
| }
| |
| .skin-citizen .mw-editform .editOptions {
| |
| background-color: var(--color-surface-5);
| |
| border: 1px solid var(--border-color-1);
| |
| border-top: 0px;
| |
| }
| |
| .oo-ui-buttonGroupWidget {
| |
| border:1px solid var(--border-color-1);
| |
| }
| |
| .oo-ui-textInputWidget .oo-ui-inputWidget-input {
| |
| background-color: var(--color-surface-0);
| |
| border: 1px solid var(--border-color-1);
| |
| }
| |
| .oo-ui-checkboxInputWidget [type="checkbox"] + span {
| |
| background-color: var(--color-surface-0);
| |
| border: 1px solid var(--border-color-1);
| |
| }
| |
| .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
| |
| border: 1px solid var(--border-color-1);
| |
| }
| |
| .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
| |
| border-color: var(--border-color-2);
| |
| }
| |
|
| |
|
| |
| /***
| |
| **** Recent changes theming
| |
| ***/
| |
| .rc-sidebar-user {
| |
| color: var(--color-base--subtle);
| |
| }
| |
|
| |
| /***
| |
| **** Page view CSS
| |
| ***/
| |
|
| |
| /* Image CSS */
| |
| .citizen-body a.image:hover:not(.lazy):not(.new) > img{
| |
| transform: scale(1.03);
| |
| }
| |
|
| |
| /*not sure why the reduced scaling effect broke and why it needs @media screen, but this is exactly how it renders on a page since 1.4*/
| |
| @media screen{
| |
| figure[typeof~="mw:File"] > a:first-child:hover:not(.lazy):not(.new) > img, figure[typeof~="mw:File/Frameless"] > a:first-child:hover:not(.lazy):not(.new) > img, figure[typeof~="mw:File/Thumb"] > a:first-child:hover:not(.lazy):not(.new) > img, figure[typeof~="mw:File/Frame"] > a:first-child:hover:not(.lazy):not(.new) > img {
| |
| transform:scale(1.03);
| |
| }
| |
| }
| |
|
| |
| /* Table of Content styling */
| |
| .citizen-toc-level--1 > a{
| |
| font-weight:bold;
| |
| font-style:normal;
| |
| }
| |
|
| |
| .citizen-toc-level--3 > a{
| |
| font-weight:lighter;
| |
| font-style:normal;
| |
| }
| |
|
| |
| .citizen-toc-level--4 > a{
| |
| font-size:0.9em;
| |
| font-style:normal;
| |
| font-weight:lighter;
| |
| }
| |
|
| |
| .citizen-toc-level--5 > a{
| |
| display:none;
| |
| }
| |
|
| |
| /***
| |
| **** Success message after publishing an edit
| |
| ***/
| |
| .oo-ui-messageWidget.oo-ui-flaggedElement-success:not(.oo-ui-messageWidget-block) {
| |
| color: var(--color-success2);
| |
| }
| |
|
| |
| /***
| |
| ****
| |
| **** Bug fixes
| |
| ****
| |
| ***/
| |
| .oo-ui-windowManager-modal > .oo-ui-dialog {
| |
| z-index: 12;;
| |
| }
| |
| /***
| |
| ****
| |
| **** Toggle menu icons
| |
| ****
| |
| ***/
| |
| #n-wantedpages a::before,#n-accrequest a::before,#n-allpages a::before {
| |
| background-repeat:no-repeat;
| |
| content:"";
| |
| height:1rem;
| |
| width:1rem;
| |
| opacity:var(--opacity-icon-base);
| |
| background-size:100%;
| |
| }
| |
|
| |
| /* adding icons for megamenu items */
| |
| #n-wantedpages a::before {
| |
| background-image: linear-gradient(transparent,transparent),url(/load.php?modules=oojs-ui.styles.icons-content&image=articleNotFound&format=original&skin=citizen);
| |
| }
| |
| #n-accrequest a::before {
| |
| background-image: linear-gradient(transparent,transparent),url(/load.php?modules=oojs-ui.styles.icons-user&image=userGroup&format=original&skin=citizen);
| |
| }
| |
| #n-allpages a::before {
| |
| background-image: linear-gradient(transparent,transparent),url(/load.php?modules=oojs-ui.styles.icons-content&image=articles&format=original&skin=citizen);
| |
| }
| |
| .prolewiki-ui-icon-sandbox::before {
| |
| background-image: linear-gradient(transparent,transparent),url(/load.php?modules=oojs-ui.styles.icons-editing-advanced&image=sandbox&format=original&skin=citizen);
| |
| }
| |
|
| |
| /* making "fake" edit button look like normal edit button */
| |
| @media screen{
| |
| #ca-request-account > a::before{
| |
| width:var(--size-icon);
| |
| height:var(--size-icon);
| |
| background-position:center;
| |
| background-repeat:no-repeat;
| |
| background-size:var(--size-icon);
| |
| content:'';
| |
| filter:invert(1);
| |
| opacity:1;
| |
| background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22%23000%22%3E %3Cpath d=%22m19.5 9.8 2.2-2.2c.4-.4.4-1.1 0-1.6L18 2.3c-.4-.4-1.1-.4-1.6 0l-2.2 2.2 5.3 5.3zm-6.4-4.1L2 16.7V22h5.3l11.1-11.1c-.1 0-5.3-5.2-5.3-5.2z%22/%3E %3C/g%3E%3C/svg%3E");
| |
| }
| |
| }
| |
|
| |
| /**
| |
| * Appended icons in the Citizen sidebar (see Common.js for code)
| |
| **/
| |
|
| |
| /* library in sidebar */
| |
|
| |
|
| |
| /* upload file icon in sidebar */
| |
| .sidebar-library > div, .sidebar-essays > div, .sidebar-upload > div{
| |
| height:40px;
| |
| width:100%;
| |
| background-repeat:no-repeat;
| |
| background-size:auto;
| |
| background-position:center;
| |
| opacity:var(--opacity-icon-base);
| |
| content:"";
| |
| filter:var(--filter-invert); /* for dark mode */
| |
| }
| |
|
| |
| .sidebar-library > div{
| |
| background-image:linear-gradient(transparent,transparent),url(/load.php?modules=oojs-ui.styles.icons-editing-citation&image=book&format=original&skin=citizen);
| |
| }
| |
|
| |
| .sidebar-essays > div {
| |
| background-image:linear-gradient(transparent,transparent),url(https://shared.prolewiki.org/uploads/0/04/Article.svg);
| |
| }
| |
|
| |
| .sidebar-upload > div{
| |
| background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E upload %3C/title%3E%3Cpath d=%22M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z%22/%3E%3Cpath d=%22M10 1 5 7h4v8h2V7h4z%22/%3E%3C/svg%3E");
| |
| }
| |
|
| |
| /***
| |
| **** Custom pages/templates specific CSS
| |
| **** for responsiveness, custom skin and dark mode use
| |
| ****
| |
| ***/
| |
|
| |
| /* New library */
| |
| .library-card-content{
| |
| background:var(--color-surface-0);
| |
| }
| |
|
| |
| /* New essays page */
| |
| .mw-parser-output .essays-sidebar-item > div{
| |
| background:var(--color-surface-2)!important;
| |
| }
| |
