Difference between revisions of "MediaWiki:Vector.css"

From Underrail Wiki
Jump to navigation Jump to search
(jquery ui popup dialog boxes)
(vector tabs cleanup)
 
(One intermediate revision by the same user not shown)
Line 32: Line 32:
  
 
/* vector tabs */
 
/* vector tabs */
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAIAAACw1AcgAAAALklEQVR42mNgYWJg4mCBYE4gZgfRrEA+M5TPipDjQMMweU5mqBiQDTKPgYFqGACKgQFEGj/tDgAAAABJRU5ErkJggg==); }
+
.vector-menu-tabs,
.vector-menu-tabs ul li { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mNYF84AAAK8AQYKOXpIAAAAAElFTkSuQmCC); }
+
.vector-menu-tabs a,
.vector-menu-tabs ul li.selected { background-image: linear-gradient(to bottom, #000, #101010, #101010); }
+
#mw-head .vector-menu-dropdown h3 { background-image: linear-gradient(to top, #AE5700, #000); }
.vector-menu-tabs ul a { color: #AE5700; }
+
.vector-menu-tabs li { background-image: linear-gradient(to top, #AE5700 1px, #000 1px, #000); }
.vector-menu-tabs ul li.new a { color: #890000; }
+
.vector-menu-tabs li.selected { background-image: linear-gradient(to top, #101010 30%, #000); }
.vector-menu-tabs ul li.selected a { color: #E27100 !important; font-weight: bold; }
+
.vector-menu-tabs li a { color: #AE5700; }
.vector-menu-tabs #ca-watch.icon a::before, .vector-menu-tabs #ca-unwatch.icon a::before { filter:invert(1); };
+
.vector-menu-tabs li.new a { color: #890000; }
.vector-menu-dropdown h3 { color:#AE5700; }
+
.vector-menu-tabs li.selected a,
.vector-menu-dropdown h3::after { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAIAAACdjxhxAAAABnRSTlMAAAAAAABupgeRAAAAM0lEQVR42mNgGAWDGwRrMmSaMkz3xoKA4kBZ8k0hQT9WU0jWj2YKmfrhplTaUKB/FJADAPwZGJ5IkBgVAAAAAElFTkSuQmCC) no-repeat center left; }
+
.vector-menu-tabs li.selected a:visited { color: #E27100; font-weight: bold; }
.vector-menu-dropdown .vector-menu-content-list { background:#000; border-color:#AE5700; }
+
.vector-menu-tabs #ca-watch.icon a::before, .vector-menu-tabs #ca-unwatch.icon a::before { filter:invert(1); }
 +
.vector-menu-dropdown h3::after { filter:brightness(3); }
 +
.vector-menu-dropdown .vector-menu-content-list { background: #000; border-color: #AE5700; border-top: none; outline: 1px dashed #000; }
 
.vector-menu-dropdown li a { color:#AE5700; }
 
.vector-menu-dropdown li a { color:#AE5700; }
  
Line 130: Line 132:
 
.search-types .current a { color:inherit; }
 
.search-types .current a { color:inherit; }
 
.mw-body-content .mw-number-text h3 { color: #AAA; }
 
.mw-body-content .mw-number-text h3 { color: #AAA; }
 +
#mw-indicator-mw-helplink a { background-image: none; }
  
 
/* OOUI widgets for Special:CreateAccount and Special:UserLogin */
 
/* OOUI widgets for Special:CreateAccount and Special:UserLogin */

Latest revision as of 21:45, 18 October 2020

/* the editbox and other inputs */
textarea, input, button, select { color: #CCC; border: 2px solid #333; background-color: #222; }
textarea:hover, input:hover, button:hover, select:hover { border-color: #AE5700; }

/* anything outside content areas */
body, #mw-page-base, #mw-head-base { background-color: #000;  background-image: none; }
#footer-icons { display: none; }

/* main content area */
#content { background-color: #101010; border: 1px solid #AE5700; border-right: none; }
#content>div, h1, h2, h3, h4, h5, h6 { color: #AAA; }
h1, h2 { border-color: #333 }
ul { list-style-image: none; list-style-type: square; }

/* main page tweaks */
body.page-Main_Page h1.firstHeading { display: none; }

/* TOC (table of contents) menu */
#toc { background-color: #050505; border-color: #AE5700; border-radius: 2px; }
.tocnumber { color:inherit }

/* category links */
#catlinks, #catlinks * { background: #050505; border-color:#AE5700; }

/* links */
a, a:link, .toctogglelabel { text-decoration: none; color: #E27100; }
a:visited { color: #AE5700; }
a:hover { text-decoration: underline; }
a.new, .mw-body a.new { color: #890000; }
a.external { background-image: none !important; padding-right: 0px !important; }
a.external:visited,.mw-body a.external:visited,a.extiw:visited { color: #149; }

/* vector tabs */
.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown h3 { background-image: linear-gradient(to top, #AE5700, #000); }
.vector-menu-tabs li { background-image: linear-gradient(to top, #AE5700 1px, #000 1px, #000); }
.vector-menu-tabs li.selected { background-image: linear-gradient(to top, #101010 30%, #000); }
.vector-menu-tabs li a { color: #AE5700; }
.vector-menu-tabs li.new a { color: #890000; }
.vector-menu-tabs li.selected a,
.vector-menu-tabs li.selected a:visited { color: #E27100; font-weight: bold; }
.vector-menu-tabs #ca-watch.icon a::before, .vector-menu-tabs #ca-unwatch.icon a::before { filter:invert(1); }
.vector-menu-dropdown h3::after { filter:brightness(3); }
.vector-menu-dropdown .vector-menu-content-list { background: #000; border-color: #AE5700; border-top: none; outline: 1px dashed #000; }
.vector-menu-dropdown li a { color:#AE5700; }

/* seach field */
#searchInput { color: #BBB; border: 1px solid #333; background-color: #111; }
#searchInput:focus, #simpleSearch:hover #searchInput:focus { border-color: #E27100; box-shadow: none; }
.suggestions { filter:invert(0.93) }

/* sidebar */
#mw-panel { background-color:#000; }
#mw-panel .portal-first h3 { display:inherit }
#mw-panel a:link { color: #E27100 !important; }
#mw-panel a:visited { color: #AE5700 !important; }
.vector-menu-portal h3 { background-image: linear-gradient(to right, #000 0, #333 33%, #333 66%, #000 100%); }
.vector-menu-portal a[rel=nofollow] { padding-right: 12px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAW0lEQVQoU3WPwQ3AIAwDPQc7sVN3yoAUV3VlA32cIsyREFRV0jFOhHQ1jD4Bkk18mCEf7OLb2mkmheiBJFZ1DnGVeCb8c4i8ZOiSFmSN0ZI0wZcM0TmKv3xi4QYbTKZGTFKDyQAAAABJRU5ErkJggg==) center right no-repeat; }

/* pre & code elements */
#content pre { background-color: #101010; color: #999; border-color: #AE5700; max-width: 100% !important; overflow: auto !important; }
code { background: #050505; color: #999; border: 1px dotted #999; }

/* mediawiki table classes */
table.diff { background: #101010; }
td.diff-addedline, td.diff-deletedline, td.diff-context, td.diff-empty, td.diff-otitle, td.diff-ntitle { background: #101010; }
table.listfiles th { background: #101010; }
table.listfiles td, table.listfiles tr { background: #050505; }
table.mw_metadata th { background-color: #0C0C0C; }
table.mw_metadata td { background-color: #101010; }
table.jquery-tablesorter th.headerSort { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAJCAYAAADdA2d2AAAANklEQVR42mNgIBIkJCT8J1YtI6kGLliwgJFiQ7G5kJDBjOR6mRgXUxXQxKX0D1NyY5+BFukUAB63HEXhyFizAAAAAElFTkSuQmCC); }
table.jquery-tablesorter th.headerSortUp { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAECAIAAADu/+P/AAAABnRSTlMAAAAAAABupgeRAAAAG0lEQVR42mNgwAYSsAEGkgBFmtGMYCAbENQMANGlEgGd9yzeAAAAAElFTkSuQmCC); }
table.jquery-tablesorter th.headerSortDown { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAECAYAAABhnXSoAAAAJklEQVQoU2NgIAEkJCT8J0E5YaUgA2GYsGoiVCAbSBWDsRlIyGAA6fAh8fhNPDYAAAAASUVORK5CYII=); }
.mw-datatable th { background-color: #0C0C0C; border: 1px #7F3F00 solid; }
.mw-datatable td { background-color: inherit; border: 1px #7F3F00 solid; }
.mw-datatable tr:hover td { background-color: #060606; }

/* thumbnailed images and galleries */
html .thumbimage { background-color: transparent; }
img.thumbimage { border-color: #000 }
div.thumbinner { background-color: #101010; border: 1px solid #AE5700; }
li.gallerybox { border-color: transparent; }
li.gallerybox div.thumb { background-color: #101010; border-color: #AE5700; }

/* wikieditor */
.wikiEditor-ui-toolbar,
.wikiEditor-ui-toolbar .group .tool-select .options { background-color:#111 }
.wikiEditor-ui-toolbar .tabs span.tab a.current,
.wikiEditor-ui-toolbar .tabs span.tab a.current:visited,
.wikiEditor-ui-toolbar .group .label,
.wikiEditor-ui-toolbar .group .tool-select .label,
.wikiEditor-ui-toolbar .group .tool-select .options .option,
.wikiEditor-ui-toolbar .page-table td { color:inherit; }
.wikiEditor-ui-toolbar .tabs span.tab a { color: #AE5700; }
.wikiEditor-ui-toolbar .booklet > .index > div { color: #AE5700 }
.wikiEditor-ui-toolbar .page-characters div span { color: #AAA; border-color: #333; }
.wikiEditor-ui-toolbar .page-characters div span:hover { background-color: #222; border-color: #666; color: #FFF; }
.wikiEditor-ui-toolbar .booklet > .index > :hover { background-color: #222 }
.wikiEditor-ui-toolbar .booklet > .index > .current { background-color:#AE5700; color:#000 }
.editOptions { background-color:inherit; color:inherit; }
.ui-dialog { filter:invert(0.93); box-shadow:0 0 3px 1px #FFF; border:1px solid #51a8ff; }
body .ui-button { box-shadow:none; }

/* edit preview note */
#mw-previewheader { color:#006400; border-color:#242; }
.previewnote { color:#006400; border:1px dotted #006400; padding:0px 10px 10px; background:#001600; }
.previewnote .warningbox { background:#242; color:#8C8; border:1px dashed #8C8; }

/* Special page fixes */
fieldset { border-color: #AE5700; }
fieldset legend, fieldset table, fieldset table * { background: transparent !important; }
ul#pagehistory li { background: #101010; border:1px solid #333; }
ul#pagehistory li.selected { background: #050505; border:1px dotted #AE5700; }
ul#filetoc { background: #050505; border-color: #AE5700; }
div#userlogin, div#userlogin table, div#userloginForm, div#userloginForm table { background-color: #101010; border-color: #AE5700 }
div#mw-js-message { background: #050505; }
.mw-search-formheader { background: #050505; border-color: #AE5700; }
fieldset#mw-searchoptions { background: #101010; border-color: #AE5700 !important; }
#preferences { background: #101010; border-color: #AE5700; }
div.captcha { background:#111 !important; border:1px solid #AE5700 !important; }
li.not-patrolled { background-color:#210; }
.warningbox, .errorbox { background-color: #150000; border-color: #900; }
.messagebox, .errorbox, .warningbox, .successbox { color:inherit; }
.diff-context { border-color: #333; color: inherit; }
.diff-deletedline { border-color: #933; }
.diff-deletedline .diffchange { background: #411; }
.diff-addedline { border-color: #373; }
.diff-addedline .diffchange { background: #141; }
#pagehistory li.selected { color: inherit; }
.mw-search-profile-tabs { background-color:inherit; border-color:#333; }
.search-types .current a { color:inherit; }
.mw-body-content .mw-number-text h3 { color: #AAA; }
#mw-indicator-mw-helplink a { background-image: none; }

/* OOUI widgets for Special:CreateAccount and Special:UserLogin */
.mw-ui-input { background-color: inherit; color: inherit; box-shadow: inset 0 0 0 1px #333; }
.mw-ui-input:hover,
.mw-ui-input:focus { border-color:#AE5700; box-shadow:inherit; }
.mw-ui-button.mw-ui-progressive { background-color: #AE5700; color: #222; border: 1px solid #AE5700; }
.mw-ui-button.mw-ui-progressive:hover { background-color: #E17100; color: #000; border: 1px solid #E17100; }
#mw-createaccount-join { background-color: #050505; color: #AE5700; border: 1px solid #333; }
#mw-createaccount-join:hover { background-color: #000; color: #E17100; border: 1px solid #AE5700; }
#mw-createaccount-join::after { content:""; pointer-events:none; position:absolute; bottom:40px; left:240px; width:100px; height:100px; animation:pulse 2s ease-out infinite; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQMAAABKLAcXAAAABlBMVEUAAAAVFRXl4tqrAAAAAXRSTlMAQObYZgAAAZdJREFUaN7F1DFOwzAUBmBbGcJCwwkI3KAnqCtxAA7Awg0oUxkqbKkH6MLA1ivACeqNsYgDgCVWJCymDCGPZzuxn4u6IdGpX+TY7/0vCWP/8ztVVDfPVKKlkh1BCaCTCgCbxAGafcL7yKYVANlU7AroJmdAjusytctUTAEfS1BJ95yuPKJa4IV03kkmVylNpspU5itpMKzKJKKU72noR9N4uXHxDilxvMyTvlz3NuagsMwkjTJRBgvTURaPi0XnkpbJ1ALYkgQvm4pItBUZmGhrMkw3IRNV55L0Aak2QPJzGv6P3RPRTXrN/J7fD4Nwk/hkzZVXfzy8QxKHz0yQaftLvG+JwxvuyS6CiqdXiZ0f9tq+SFxW9Frf+UIWYeDrx5Xr7ja0IzY+2kmvzkcbNJIoXHkctOggSTaSCBoBAvOrQrQzAbXxg/LjEp1TiOLa4lDwvo1/V6fmqilRIqRtzr1kmMRlbUusrAma1tpJz4IEQ3E1Dmqd4qthWUmeb0V1wKjYrkaZJtnXRer9EtnKeaZpJqX+8vv3AzvqD99X9IsGAAAAAElFTkSuQmCC); }

/* OOUI widgets for Special:RecentChanges */
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend { background-color: transparent; border: 1px solid #333; }
.mw-rcfilters-ui-filterMenuHeaderWidget-header,
.mw-rcfilters-ui-itemMenuOptionWidget.oo-ui-optionWidget-selected,
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(.oo-ui-optionWidget-selected),
.mw-rcfilters-ui-menuSelectWidget-footer,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle { background-color: inherit; }
.oo-ui-menuSelectWidget { background-color: #111; }
.mw-rcfilters-ui-filterMenuSectionOptionWidget { background-color:#222; }
.mw-rcfilters-ui-itemMenuOptionWidget:hover { background-color:#000; }
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title,
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-savedQueryTitle,
.mw-rcfilters-ui-filterMenuHeaderWidget-title,
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title.oo-ui-labelElement-label,
.mw-rcfilters-ui-itemMenuOptionWidget-label-title,
.mw-rcfilters-ui-itemMenuOptionWidget-label-desc,
.mw-rcfilters-ui-viewSwitchWidget label.oo-ui-labelWidget,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button { color:#AAA; }
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover { color:#AE5700; }
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .mw-rcfilters-ui-tagItemWidget-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled { background-color: inherit; color: #AE5700 }
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus { outline: 0; border-color: #AE5700; box-shadow: inset 0 0 0 1px #AE5700; }
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus { border-color: #AE5700; }
.oo-ui-popupWidget-popup { background-color: #111; border: 1px solid #a2a9b1; color:#AAA; }
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button { color: #111; background-color: #AE5700; border-color: #AE5700; }
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { color: #AE5700; }
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active:focus,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { color: #7F3F00; }
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget,
.oo-ui-textInputWidget .oo-ui-inputWidget-input { border: 1px solid #333; }
.oo-ui-menuSelectWidget { border: 1px solid #ae5700; }
.mw-rcfilters-ui-filterMenuHeaderWidget-header { border-bottom: 1px solid #333; }
.mw-rcfilters-ui-itemMenuOptionWidget:not(:last-child):not(.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk) { border-bottom: 1px solid #333; }
.mw-rcfilters-ui-menuSelectWidget-footer { border-top: 1px solid #333; }
.oo-ui-tagItemWidget { border: 1px solid #666; }
.mw-rcfilters-ui-tagItemWidget.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled { border-color: #333; }

/* OOUI widgets for Special:Preferences and other */
.oo-ui-menuLayout-menu { filter:invert(0.93); }
.mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed, .mw-prefs-buttons { border-color: #AE5700; }
.mw-prefs-buttons { background:inherit; }
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover,
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled:hover { background-color: inherit; color:inherit; border-color:#AE5700; }
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled { background-color: inherit; }
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
.oo-ui-textInputWidget .oo-ui-inputWidget-input { background-color: inherit; color: inherit; }
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.mw-ui-button:hover { background-color: inherit; color: #AE5700; border-color: #AE5700; }
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.mw-ui-button { background-color: inherit; color: #AAA; border-color: #444; }
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover { background-color: #000; }
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { color: #111; background-color: #AE5700; border-color: #AE5700;  }
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { color:#000; background-color: #7F3F00; border-color: #7F3F00; }
.mw-widget-dateInputWidget-handle { background: inherit; color:inherit; }
.mw-widget-calendarWidget { filter:invert(0.93); }
.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle { background-color: inherit; }
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget { color: #AAA; }
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected { background-color: #AE5700; }
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted { background-color: #000; }
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted { background-color: #000; color:#AAA; }
[class^="oo-ui-icon"], [class^="oo-ui-indicator"], .oo-ui-icon-collapse, .oo-ui-icon-expand { filter:invert(1) }
.mw-ui-checkbox label::before, .oo-ui-checkboxInputWidget, .oo-ui-radioInputWidget { filter:invert(1) hue-rotate(-15deg) brightness(0.8) contrast(1.3) }
.mw-rcfilters-ui-filterItemHighlightButton-circle-color-c1,
.mw-rcfilters-ui-filterItemHighlightButton-circle-color-c2,
.mw-rcfilters-ui-filterItemHighlightButton-circle-color-c3,
.mw-rcfilters-ui-filterItemHighlightButton-circle-color-c4,
.mw-rcfilters-ui-filterItemHighlightButton-circle-color-c5 { filter:invert(0); }
.mw-rcfilters-highlighted tr, .mw-rcfilters-highlighted td { background-color:transparent !important; }