Customizable Dark theme For GreasyFork.org
От
/* ==UserStyle==
@name GreasyFork - Dark Theme
@namespace https://greasyfork.org/en/users/124677-pabli
@version 1.0.3
@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 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 number maxwidth "Width Site (px)" 960
@var number maxwidthf "Width Forum (px)" 720
@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
==/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, #Panel .FilterMenu, #Panel .PanelCategories, #Panel .MeBox {
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;
}
}
#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;
//border-radius: 30px;
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], .SiteSearch .Button {
color: transparent;
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;
}
.SiteSearch .Button {
top: 6px;
}
#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 {
background-color: bg-sidebar;
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-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: bg-sidebar;
}
.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);
}
#additional-info>div {
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(0, 0, 0, 0.2);
}
.notice {
background-color: #1c2123;
border-left: 6px solid #204050;
}
.alert {
background-color: #222211;
border-left: 6px solid #a1931a;
}
.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 {
background-color: bg-sidebar-btn-h;
color: t-1 !important;
text-decoration: none !important;
}
//pagination buttons forum
.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);
}
// 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 {
background-color: #151515;
}
pre, code, .Message pre {
border: 1px solid #363432;
}
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 {
word-break: break-word;
overflow-wrap: break-word;
white-space: pre-wrap;
}
}
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);
}
//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);
}
.WarningMessage {
background: #19100f;
border: 1px solid #4c2825;
}
.DismissMessage {
color: t-1;
}
.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;
}
#Body .Row {
width: max-content;
}
#Content {
width: maxwidthf 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;
}
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;
}
//firefox
html {
scrollbar-color: #444 bg !important;
scrollbar-width: thin !important;
}
}
}