Customizable Dark theme For GreasyFork.org
当前为
/* ==UserStyle==
@name GreasyFork - Dark Theme
@namespace https://greasyfork.org/en/users/124677-pabli
@version 1.1.1
@description Customizable Dark theme For GreasyFork.org
@author Pabli
@license CC-BY-SA-4.0
@homepageURL https://greasyfork.org/en/scripts/395180-greasyfork-dark-theme
@supportURL https://greasyfork.org/en/scripts/395180-greasyfork-dark-theme/feedback
@preprocessor stylus
@var number maxwidth "Width Site (px)" 960
@var number maxwidthf "Width Forum (px)" 960
@var select theme "Theme syntax" ["Desert", "Sunburst", "Sons-Of-Obsidian", "Doxy"]
@var checkbox wrap "Code wrap" 1
@var checkbox scrollbar "Dark Scroll Bar" 1
@var checkbox sidebar "Forum sidebar to the right" 0
@var color bg-header "Header background" #640000
@var color t-header "Header text" #fafafa
@var color bg "Background" #111
@var color t-1 "Main text" #fafafa
@var color t-2 "Second text" #aeaeae
@var color t-link "Link" #ff7070
@var color bg-sidebar "Sidebar" #1a1a1a
@var color bg-sidebar-btn "Sidebar button" #510909
@var color bg-sidebar-btn-h "Sidebar button hover" #323232
@var color bg-btn "Button" #1a1a1a
@var color bg-btn-h "Button hover" #323232
@var color t-btn "Button text" #fafafa
@var color border-btn "Button border" rgba(255, 255, 255, 0.1)
@var color border-btn-h "Button border hover" rgba(255, 255, 255, 0.2)
@var color bg-textarea "Text area background" #1a1a1a
@var color bg-usercontent "User content background" rgba(0, 0, 0, 0)
==/UserStyle== */
@-moz-document domain("greasyfork.org") {
.width-constraint {
max-width: maxwidth px;
}
body, .script-list, .user-list, .text-content,
#script-info,
body:not(.Settings), #Content {
background-color: bg;
color: t-1;
}
.announcement input {
color: t-1;
}
#main-header,
body:not(.Settings) #Head {
background-color: bg-header;
background-image: linear-gradient(rgba(0, 0, 0, 0.3), bg-header);
}
.script-list, .user-list, .text-content,
.list-option-group ul,
#script-info,
#Content {
box-shadow: none;
border: none;
}
a, a:visited, body:not(.Settings) a:not(.Button):not(.ChangePicture) {
color: t-link;
text-decoration: none;
&:hover {
color: t-link;
text-decoration: underline;
}
}
#Head a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
#main-header, #main-header a, #main-header a:visited, #main-header a:active,
#site-nav>nav a:hover {
color: t-header;
}
#site-name-text h1 a:hover {
text-decoration: none !important;
}
#home-script-nav {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#language-selector-locale {
background: bg-header;
color: t-header;
border: 1px solid rgba(255, 255, 255, .5);
}
nav nav,
.SiteMenu nav {
background-color: bg-header;
}
textarea, textarea:focus, select, input, input.DateBox, input.InputBox, input.SmallInput, .InputBox, .Preview, input.SmallInput:focus, input.InputBox:focus,
form.new_user input[type="text"], form.new_user input[type="email"], form.new_user input[type="password"], input[type="text"] {
color: t-1;
background: bg-textarea;
border: 1px solid rgba(255, 255, 255, .1);
outline: none;
}
.Button, .Button.Active, .ButtonGroup.Open .Button.Handle, .Button:focus, .Button:active, .BigButton, .NewDiscussion,
form.new_user input[type="submit"], button {
background: bg-btn;
color: t-btn !important;
border: 1px solid border-btn;
text-decoration: none;
box-shadow: none;
cursor: pointer;
&:hover {
background: bg-btn-h;
color: t-btn;
border-color: border-btn-h;
text-decoration: none;
}
}
:focus {
outline-style: none;
}
//search
.sidebar-search input[type=submit], .home-search input[type=submit], .search-submit, .SiteSearch .Button {
color: transparent !important;
opacity: 1;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABYklEQVQ4T5XTu2qVQRTF8d8CMdp7AW9V7MwLaNKo7+ANe1ERK7Hy2oidmOALiMlDKIIS8QEsRLFRYqG9lyBsmThHviMnB7ObGT5m/t9ae6+JQVXVAi6hrbvwFS+xmGR1eHa0T9tU1TY8xIVJh/q3JVxN8mt4ZgR41C9/wz08wSccxDlcx04sJbk8BuiyX6BdPpHk9b8qquoonnbI/NBOqmoFp3Ajyd3NLFTVLdzEcpKzf3tQVWvYh9kkH6YAZvEea0kODAE/sR0zSdanAGbwA+tJ2n6jmoX/VXAY7/A5yf4hYBmnm78kd6YouN36hJUkZ4aA+R6W7ziZ5NWEKRzrU2jSF8am0IPUQnIRDXIfj/ERh3Ae17ADXzCXpK1/ejBI4oMOmeSieqz34E3PywZkAzCqqmpSR29hb7/UQrbYR/gMR4aQMcBmDRz8YDcaZA5vcXxLgG632Rgpeb5lwADSnsCV30xRiAuwE+OqAAAAAElFTkSuQmCC') no-repeat center !important;
border: none !important;
cursor: pointer;
}
.SiteSearch .Button {
top: 6px;
}
.SearchForm .SiteSearch .Button {
top: 10px;
}
#Panel input.InputBox, .AddPeople textarea.MultiComplete {
border-radius: 5px;
}
.sidebar-search input[type=search],
.home-search input[type=search] {
border-radius: 5px;
padding: 5px;
padding-inline-end: 25px;
}
.sidebar-search input[type=submit],
.home-search input[type=submit] {
padding: 5px;
}
.SearchForm .InputBox {
border: 1px solid rgba(255, 255, 255, .1);
}
// sidebar
.list-option-group ul,
#Panel .FilterMenu, #Panel .PanelCategories, #Panel .MeBox,
.list-option-groups .carbon-ad, .list-option-groups .adsense-ad {
border: 1px solid rgba(255, 255, 255, .1);
background-color: bg-sidebar;
box-shadow: none;
}
.list-option-button {
background-color: bg-sidebar;
color: t-1 !important;
border: 1px solid rgba(255, 255, 255, .1);
}
.list-option-group .list-current,
#Panel .FilterMenu .Active a, #Panel .PanelCategories .Active a {
border-left: none;
margin: unset;
background: bg-sidebar-btn !important;
color: t-1;
}
.list-option-button:hover, .list-option-button:focus,
.list-option-group a:hover, .list-option-group a:focus,
#Panel .FilterMenu a:hover, #Panel .PanelCategories a:hover, #Panel .FilterMenu a:focus, #Panel .PanelCategories a:focus {
background: bg-sidebar-btn-h;
color: t-1 !important;
text-decoration: none !important;
box-shadow: none;
}
if sidebar {
#Panel {
float: right;
}
}
#user-profile {
border: 1px solid rgba(255, 255, 255, .1);
background-color: rgba(0,0,0,0);
}
.change-script-set section {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.install-link, .install-help-link {
color: #fff !important;
}
.script-list li:not(.ad-entry),
.DataList .Item, .NarrowList .Item {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.notice {
background-color: #1c2123;
border-left: 6px solid #204050;
}
.alert {
background-color: #222211;
border-left: 6px solid #a1931a;
}
#version-note {
background-color: #4e4e0e;
border: 2px dotted #bfd314;
}
.rating-icon-good {
color: #ccffcc;
}
.rating-icon-ok {
color: #ffffcc;
}
.rating-icon-bad {
color: #ffcccc;
}
.badge-author {
background-color: rgba(0,128,0,0.7);
color: white;
}
.good-rating-count {
color: #80ff80;
}
.ok-rating-count {
color: #ffff80;
}
.bad-rating-count {
color: #ff8080;
}
//pagination buttons
.pagination>*, .script-list+.pagination>*, .user-list+.pagination>*,
.Pager > * {
background-color: transparent;
}
.pagination>a:hover, .pagination>a:focus,
.Pager > a:hover, .Pager > a:focus {
background-color: bg-sidebar-btn-h;
color: t-1 !important;
text-decoration: none !important;
}
body .Pager .Highlight {
color: t-1 !important;
}
// /stats script
canvas {
filter: invert(1) brightness(2);
}
//gallery
.jslghtbx-contentwrapper>img {
background: #000;
}
.jslghtbx-prev.jslghtbx-no-img {
border-right-color: #aaa;
}
.jslghtbx-next.jslghtbx-no-img {
border-left-color: #aaa;
}
// feedback
.discussion-list-item {
border-top: 1px solid rgba(255, 255, 255, .1);
}
.script-discussion-list .discussion-list-item:last-child {
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.user-content {
border-bottom: 1px solid rgba(255,255,255,0.1);
border-left: none;
background: bg-usercontent;
}
.script-list, .user-list, .text-content, .discussion-list {
box-shadow: none;
background-color: unset;
border: none;
}
// history code
.diff ul {
background: #000;
}
.diff li:hover {
background-color: rgba(255, 255, 255, .2) !important
}
.diff li.del, .diff del strong {
background-color: rgba(255, 0, 0, .2);
color: #fdd;
}
.diff li.ins, .diff ins strong {
background-color: rgba(0, 255, 0, .2);
color: #dfd;
}
.diff li.diff-block-info {
background: none repeat scroll 0 0 #252525;
}
.DiscussionForm label {
color: t-2;
}
.editor-fullpage #editor-fullpage-candidate,
.editor-fullpage #editor-fullpage-candidate .editor {
background-color: #000;
}
code, .Message pre {
background-color: #151515;
}
pre, code, .Message pre {
border: 1px solid rgba(255, 255, 255, .1);
}
if theme == Desert {
/* desert scheme ported from vim to google prettify */
pre.prettyprint, pre.prettyprinted, .Message pre ol { display: block; background-color: #333 }
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 } /* string - pink */
pre .kwd { color: #f0e68c; font-weight: bold }
pre .com { color: #87ceeb } /* comment - skyblue */
pre .typ { color: #98fb98 } /* type - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #fff } /* punctuation */
pre .pln { color: #fff } /* plaintext */
pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag - lightyellow */
pre .atn { color: #bdb76b; font-weight: bold } /* attribute name - khaki */
pre .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal - lightgreen */
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }
}
else if theme == Sunburst {
/* Pretty printing styles. Used with prettify.js. */
/* Vim sunburst theme by David Leibovic */
pre .str, code .str { color: #65B042; } /* string - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; } /* plaintext - white */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
pre.prettyprint, code.prettyprint, , pre.prettyprinted, .Message pre ol {
background-color: #000;
border-radius: 8px;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }
}
else if theme == Sons-Of-Obsidian {
/*
* Derived from einaros's Sons of Obsidian theme at
* http://studiostyl.es/schemes/son-of-obsidian by
* Alex Ford of CodeTunnel:
* http://CodeTunnel.com/blog/post/71/google-code-prettify-obsidian-theme
*/
.str { color: #EC7600; }
.kwd { color: #93C763; }
.com { color: #66747B; }
.typ { color: #678CB1; }
.lit { color: #FACD22; }
.pun { color: #F1F2F3; }
.pln { color: #F1F2F3; }
.tag { color: #8AC763; }
.atn { color: #E0E2E4; }
.atv { color: #EC7600; }
.dec { color: purple; }
pre.prettyprint { border: 0px solid #888; }
ol.linenums
{
margin-top: 0;
margin-bottom: 0;
}
.prettyprint, , pre.prettyprinted, .Message pre ol {
background: #000;
}
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
{
color: #555;
list-style-type: decimal;
}
li.L1, li.L3, li.L5, li.L7, li.L9 {
background: #111;
}
}
else if theme == Doxy {
/* Doxy pretty-printing styles. Used with prettify.js. */
pre .str, code .str { color: #fec243; } /* string - eggyolk gold */
pre .kwd, code .kwd { color: #8470FF; } /* keyword - light slate blue */
pre .com, code .com { color: #32cd32; font-style: italic; } /* comment - green */
pre .typ, code .typ { color: #6ecbcc; } /* type - turq green */
pre .lit, code .lit { color: #d06; } /* literal - cherry red */
pre .pun, code .pun { color: #8B8970; } /* punctuation - lemon chiffon4 */
pre .pln, code .pln { color: #f0f0f0; } /* plaintext - white */
pre .tag, code .tag { color: #9c9cff; } /* html/xml tag (bluey) */
pre .htm, code .htm { color: #dda0dd; } /* html tag light purply*/
pre .xsl, code .xsl { color: #d0a0d0; } /* xslt tag light purply*/
pre .atn, code .atn { color: #46eeee; font-weight: normal;} /* html/xml attribute name - lt turquoise */
pre .atv, code .atv { color: #EEB4B4; } /* html/xml attribute value - rosy brown2 */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
pre.prettyprint, code.prettyprint, pre.prettyprinted, .Message pre ol {
font-family:'Droid Sans Mono','CPMono_v07 Bold','Droid Sans';
font-weight: bold;
font-size: 9pt;
background-color: #0f0f0f;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
} /* background is black (well, just a tad less dark ) */
pre.prettyprint a, code.prettyprint a {
text-decoration:none;
}
/* Specify class=linenums on a pre to get line numbering; line numbers themselves are the same color as punctuation */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #8B8970; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }
}
if wrap {
pre.prettyprint, pre code {
word-break: break-word;
overflow-wrap: break-word;
white-space: pre-wrap;
}
}
// ace theme tomorrow_night_bright
// Enable syntax-highlighting source editor
#ace-editor {
border: 1px solid rgba(255, 255, 255, 0.1);
}
.ace_gutter {
background: #1a1a1a !important;
color: #DEDEDE !important;
}
.ace_print-margin {
width: 1px !important;
background: #1a1a1a !important;
}
.ace_editor {
background-color: #000000 !important;
color: #DEDEDE !important;
}
.ace_cursor {
color: #9F9F9F !important;
}
.ace_marker-layer .ace_selection {
background: #424242 !important;
}
.ace_multiselect .ace_selection.ace_start {
box-shadow: 0 0 3px 0px #000000 !important;
}
.ace_marker-layer .ace_step {
background: rgb(102, 82, 0) !important;
}
.ace_marker-layer .ace_bracket {
margin: -1px 0 0 -1px !important;
border: 1px solid #888888 !important;
}
.ace_marker-layer .ace_highlight {
border: 1px solid rgb(110, 119, 0) !important;
border-bottom: 0 !important;
box-shadow: inset 0 -1px rgb(110, 119, 0) !important;
margin: -1px 0 0 -1px !important;
background: rgba(255, 235, 0, 0.1) !important;
}
.ace_marker-layer .ace_active-line {
background: #2A2A2A !important;
}
.ace_gutter-active-line {
background-color: #2A2A2A !important;
}
.ace_stack {
background-color: rgb(66, 90, 44) !important;
}
.ace_marker-layer .ace_selected-word {
border: 1px solid #888888 !important;
}
.ace_invisible {
color: #343434 !important;
}
.ace_keyword,
.ace_meta,
.ace_storage,
.ace_storage.ace_type,
.ace_support.ace_type {
color: #C397D8 !important;
}
.ace_keyword.ace_operator {
color: #70C0B1 !important;
}
.ace_constant.ace_character,
.ace_constant.ace_language,
.ace_constant.ace_numeric,
.ace_keyword.ace_other.ace_unit,
.ace_support.ace_constant,
.ace_variable.ace_parameter {
color: #E78C45 !important;
}
.ace_constant.ace_other {
color: #EEEEEE !important;
}
.ace_invalid {
color: #CED2CF !important;
background-color: #DF5F5F !important;
}
.ace_invalid.ace_deprecated {
color: #CED2CF !important;
background-color: #B798BF !important;
}
.ace_fold {
background-color: #7AA6DA !important;
border-color: #DEDEDE !important;
}
.ace_entity.ace_name.ace_function,
.ace_support.ace_function,
.ace_variable {
color: #7AA6DA !important;
}
.ace_support.ace_class,
.ace_support.ace_type {
color: #E7C547 !important;
}
.ace_heading,
.ace_markup.ace_heading,
.ace_string {
color: #B9CA4A !important;
}
.ace_entity.ace_name.ace_tag,
.ace_entity.ace_other.ace_attribute-name,
.ace_meta.ace_tag,
.ace_string.ace_regexp,
.ace_variable {
color: #D54E53 !important;
}
.ace_comment {
color: #969896 !important;
}
.ace_c9searchresults.ace_keyword {
color: #C2C280 !important;
}
.ace_indent-guide {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYFBXV/8PAAJoAXX4kT2EAAAAAElFTkSuQmCC') right repeat-y !important;
}
form.external-login-form,
form.new_user {
background-color: bg;
border: none;
}
form.new_user input[type="text"], form.new_user input[type="email"], form.new_user input[type="password"] {
color: texxt-color;
background-color: textarea-color;
border: 1px solid rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.external-login {
border: 1px solid border-btn;
background-repeat: no-repeat !important;
background-size: 16px 16px !important;;
background-position: 5px 2px !important;;
}
//forum
.ItemDiscussion .Meta, .DataList .Meta,
dl.About dt {
color: t-2;
}
.Item.Read {
background: rgba(255, 255, 255, 0.02);
}
.MenuItems, .FlyoutMenu {
border: 1px solid rgba(255, 255, 255, 0.1);
background: bg-sidebar;
color: t-1;
}
.Flyout:after {
border-bottom: 7px solid bg-sidebar;
}
.MenuItems a, .MenuItems a:link, .MenuItems a:visited, .MenuItems a:active {
color: t-1 !important;
}
.MenuItems a:hover {
color: t-1 !important;
text-decoration: none !important;
background-color: bg-sidebar-btn-h !important;
}
.MenuItems hr {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.PopList .Meta {
color: t-2;
}
.FlyoutMenu a {
color: t-link;
}
blockquote.Quote, blockquote.UserQuote {
background: rgba(255, 255, 255, 0.05);
border-left: 4px solid rgba(255, 255, 255, 0.1);
}
.OptionsTitle {
filter: invert(1);
}
.ReactSprite, .SpEditProfile {
background-image: url(https://i.imgur.com/HbaKg8l.png);
}
.SpNotifications, .SpGlobe {
background-position: -32px -212px;
}
.SpInbox, .SpEnvelope {
background-position: 0 -228px;
}
.SpBookmarks, .SpStar {
background-position: -80px -245px;
}
.SpDashboard, .SpOptions, .SpCog {
background-position: 0 -211px;
}
table.PreferenceGroup tbody tr:hover td {
background: rgba(255, 255, 255, 0.05);
}
.DismissMessage {
color: t-1;
}
.WarningMessage {
background: #19100f;
border: 1px solid #4c2825;
}
span.Warning, div.Warning {
background: #19100f;
border: 2px solid #4c2825;
color: #ffffff;
}
div.Popup .Body {
background: bg;
}
.NavButton, .NavButton:hover, .ButtonGroup.Open .NavButton.Handle {
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: bg-sidebar;
color: t-1!important;
text-decoration: none!important;
}
.PoweredByVanilla {
display: none;
}
#Panel {
margin: unset;
}
#Body {
max-width: none;
}
#Body .Row {
width: max-content;
}
#Content {
width: maxwidthf - 200 px;
}
//
.tabs>*:not(.current) a {
margin-top: unset;
padding-top: unset;
}
.tabs .current {
border-top: none;
}
.tabs>*>* {
padding: 0.25em .5em .5em!important;
}
.current {
font-weight: bold;
}
.PageControls {
margin: 0px;
}
#Content .HomepageTitle {
border-top: none;
margin: 0px;
padding: 0px;
}
img[src*="images/defaulticon.png"] {
opacity: 0.5;
}
if scrollbar {
//chrome
::-webkit-scrollbar {
width: 8px;
background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb {
background-color: #444;
}
::-webkit-scrollbar-thumb:hover {
background: #777 !important;
}
::-webkit-scrollbar-corner {
background: #444;
}
//firefox
html {
scrollbar-color: #444 bg !important;
scrollbar-width: thin !important;
}
}
//ads
div#cf, div#cf span.cf-wrapper {
background-color: rgba(255, 255, 255, .03) !important;
}
div#cf span.cf-wrapper span.cf-text,
div#cf span.cf-wrapper a.cf-text,
div#cf span.cf-wrapper a.cf-powered-by {
color: hsla(0,0%,100%,.7) !important;
}
div#cf span.cf-wrapper a.cf-text span.cf-cta {
color: #fff !important;
}
#script-show-info-ad #carbonads {
background-color: unset;
}
}