Jisho DeepDark by raitarohikami
Imported and mirrored from https://github.com/RaitaroH/Jisho-DeepDark/raw/master/JishoDeepDark.user.css
Details
Authorraitarohikami
LicenseGNU-V3.0
Created
Updated
Categoryunset
Description
Learn japanese in the dark. May the dark be kinder on thine eyes. (jisho dark theme)
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name Jisho DeepDark
@namespace github.com/RaitaroH/Jisho-DeepDark
@homepageURL https://github.com/RaitaroH/Jisho-DeepDark
@version 1.0.9
@updateURL https://github.com/RaitaroH/Jisho-DeepDark/raw/master/JishoDeepDark.user.css
@description Learn japanese in the dark. May the dark be kinder on thine eyes. (jisho dark theme)
@author RaitaroH
@license GNU-V3.0
@preprocessor uso
@var select mainColor 'Main color' {
"DeepDark": "#00adee",
"BreezeDark": "#3DAEE9",
"Vertex Dark": "#4080fb",
"Arc Dark": "#5294E2",
"Firefox Dark": "#5675B9",
"Firefox57": "#4080FB",
"Discord": "#7289DA",
"YouTubeDark": "#E52117",
"Mint-Y-Dark": "#9AB87C",
"9anime": "#723f8c",
"Black&White": "#ffffff",
"Yellow_petrocompletions": "#FFC700",
"Yellow2": "#FFC700",
"Ubuntu_grey": "#EF7847",
"Ubuntu_purple": "#EF7847",
"Orange": "#ff6905",
"Jisho_夜明け": "#EF7D6C",
"Custom": "/*[[custom-main-color]]*\/"
}
@var color custom-main-color "Custom main color" "#00adee"
@var select mainBackground 'Main background color' {
"DeepDark": "#111111",
"BreezeDark": "#232629",
"Vertex Dark": "#2B2B2C",
"Arc Dark": "#343944",
"Firefox Dark": "#272B35",
"Firefox57": "#0C0C0D",
"Discord": "#1E2124",
"YouTubeDark": "#111111",
"Mint-Y-Dark": "#2F2F2F",
"9anime": "#0B0A0D",
"Black&White": "#000000",
"Yellow_petrocompletions": "#141414",
"Yellow2": "#0a0800",
"Ubuntu_grey": "#312D2A",
"Ubuntu_purple": "#2C071A",
"Orange": "#0a0400",
"Jisho_夜明け": "#332222",
"Custom": "/*[[custom-main-background]]*\/"
}
@var color custom-main-background "Custom main background" "#111111"
@var select secondBackground 'Second background color' {
"DeepDark": "#181818",
"BreezeDark": "#2a2e32",
"Vertex Dark": "#353638",
"Arc Dark": "#383C4A",
"Firefox Dark": "#181D20",
"Firefox57": "#252526",
"Discord": "#2F3136",
"YouTubeDark": "#232323",
"Mint-Y-Dark": "#383838",
"9anime": "#17151C",
"Black&White": "#0a0a0a",
"Yellow_petrocompletions": "#202222",
"Yellow2": "#0c0a04",
"Ubuntu_grey": "#3D3C38",
"Ubuntu_purple": "#430B28",
"Orange": "#0e0702",
"Jisho_夜明け": "#2A1B1B",
"Custom": "/*[[custom-second-background]]*\/"
}
@var color custom-second-background "Custom second background" "#181818"
@var select hoverBackground 'Hover background color' {
"DeepDark": "#232323",
"BreezeDark": "#31363b",
"Vertex Dark": "#515254",
"Arc Dark": "#414A59",
"Firefox Dark": "#353A44",
"Firefox57": "#323234",
"Discord": "#484B51",
"YouTubeDark": "#343434",
"Mint-Y-Dark": "#404040",
"9anime": "#1E1C25",
"Black&White": "#0f0f0f",
"Yellow_petrocompletions": "#353838",
"Yellow2": "#0f0d05",
"Ubuntu_grey": "#59564D",
"Ubuntu_purple": "#520D30",
"Orange": "#110903",
"Jisho_夜明け": "#863B2F",
"Custom": "/*[[custom-hover-background]]*\/"
}
@var color custom-hover-background "Custom hover background" "#232323"
@var select mainText 'Main text color' {
"DeepDark": "#eff0f1",
"BreezeDark": "#eff0f1",
"Vertex Dark": "#F3F3F5",
"Arc Dark": "#C1C8D1",
"Firefox Dark": "#E3EEF9",
"Firefox57": "#F9F9FA",
"Discord": "#FFFFFF",
"YouTubeDark": "#E1E1E1",
"Mint-Y-Dark": "#FFFFFF",
"9anime": "#B4B4B4",
"Black&White": "#b4b4b4",
"Yellow_petrocompletions": "#EFF0F1",
"Yellow2": "#fffdf5",
"Ubuntu_grey": "#F2F1EF",
"Ubuntu_purple": "#F2F1EF",
"Orange": "#fff9f5",
"Jisho_夜明け": "#EFB26C",
"Custom": "/*[[custom-main-text]]*\/"
}
@var color custom-main-text "main-text" "#eff0f1"
@var select dimmerText 'Secondary text color' {
"DeepDark": "#CCCCCC",
"BreezeDark": "#bdc3c7",
"Vertex Dark": "#AEAFB0",
"Arc Dark": "#B3BAC5",
"Firefox Dark": "#606376",
"Firefox57": "#D0D0D0",
"Discord": "#ADA8AA",
"YouTubeDark": "#7F7F7F",
"Mint-Y-Dark": "#D5DADA",
"9anime": "#747474",
"Black&White": "#828282",
"Yellow_petrocompletions": "#9F9999",
"Yellow2": "#fff8e1",
"Ubuntu_grey": "#E6E5E3",
"Ubuntu_purple": "#E6E5E3",
"Orange": "#ffede1",
"Jisho_夜明け": "#986E3F",
"Custom": "/*[[custom-dimmer-text]]*\/"
}
@var color custom-dimmer-text "dimmer-text" "#CCCCCC"
==/UserStyle== */
@-moz-document domain("jisho.org") {
/*Theme made by RaitaroH @https://gitlab.com/RaitaroH/Jisho-DeepDark*/
/*GNU General Public License v3.0*/
/*Main color variables*/
:root
{
/* Dark scrollbars */
color-scheme: dark;
/*User colors*/
--main-color: /*[[mainColor]]*/;
--main-background: /*[[mainBackground]]*/;
--second-background: /*[[secondBackground]]*/;
--hover-background: /*[[hoverBackground]]*/;
--main-text: /*[[mainText]]*/;
--dimmer-text: /*[[dimmerText]]*/;
/*DeepDark colors*/
/*
--main-color: #00adee;
--main-background: #111111;
--second-background: #181818;
--hover-background: #232323;
--main-text: #eff0f1;
--dimmer-text: #CCCCCC;
*/
/*KDE colors*/
/*
--main-color: #3DAEE9;
--main-background: #232629;
--second-background: #2a2e32;
--hover-background: #31363b;
--main-text: #eff0f1;
--dimmer-text: #bdc3c7;
*/
/*Vertex Dark colors*/
/*
--main-color: #4080fb;
--main-background: #2B2B2C;
--second-background: #353638;
--hover-background: #515254;
--main-text: #F3F3F5;
--dimmer-text: #AEAFB0;
*/
/*Arc Dark colors*/
/*
--main-color: #5294E2;
--main-background: #343944;
--second-background: #383C4A;
--hover-background: #414A59;
--main-text: #C1C8D1;
--dimmer-text: #B3BAC5;
*/
/*Firefox Dark colors*/
/*
--main-color: #5675B9;
--main-background: #272B35;
--second-background: #181D20;
--hover-background: #353A44;
--main-text: #E3EEF9;
--dimmer-text: #606376;
*/
/*Firefox57 Dark colors*/
/*
--main-color: #4080FB;
--main-background: #0C0C0D;
--second-background: #252526;
--hover-background: #323234;
--main-text: #F9F9FA;
--dimmer-text: #D0D0D0;
*/
/*Discord colors*/
/*
--main-color: #7289DA;
--main-background: #1E2124;
--second-background: #2F3136;
--hover-background: #484B51;
--main-text: #FFFFFF;
--dimmer-text: #ADA8AA;
*/
/*YouTube dark colors*/
/*
--main-color: #E52117;
--main-background: #111111;
--second-background: #232323;
--hover-background: #343434;
--main-text: #E1E1E1;
--dimmer-text: #7F7F7F;
*/
/*Mint-Y-Dark colors*/
/*
--main-color: #9AB87C;
--main-background: #2F2F2F;
--second-background: #383838;
--hover-background: #404040;
--main-text: #FFFFFF;
--dimmer-text: #D5DADA;
*/
/*9anime colors*/
/*
--main-color: #723f8c;
--main-background: #0B0A0D;
--second-background: #17151C;
--hover-background: #1E1C25;
--main-text: #B4B4B4;
--dimmer-text: #747474;
*/
/*Black and white*/
/*
--main-color: #ffffff;
--main-background: #000000;
--second-background: #0a0a0a;
--hover-background: #0f0f0f;
--main-text: #b4b4b4;
--dimmer-text: #828282;
*/
/*Yellow (colors from petrocompletions)*/
/*
--main-color: #FFC700;
--main-background: #141414;
--second-background: #202222;
--hover-background: #353838;
--main-text: #EFF0F1;
--dimmer-text: #9F9999;
*/
/*Yellow 2*/
/*
--main-color: #ffc700;
--main-background: #0a0800;
--second-background: #0c0a04;
--hover-background: #0f0d05;
--main-text: #fffdf5;
--dimmer-text: #fff8e1;
*/
/*Ubuntu grey colors*/
/*
--main-color: #EF7847;
--main-background: #312D2A;
--second-background: #3D3C38;
--hover-background: #59564D;
--main-text: #F2F1EF;
--dimmer-text: #E6E5E3;
*/
/*Ubuntu purple colors*/
/*
--main-color: #EF7847;
--main-background: #2C071A;
--second-background: #430B28;
--hover-background: #520D30;
--main-text: #F2F1EF;
--dimmer-text: #E6E5E3;
*/
/*Orange*/
/*
--main-color: #ff6905;
--main-background: #0a0400;
--second-background: #0e0702;
--hover-background: #110903;
--main-text: #fff9f5;
--dimmer-text: #ffede1;
*/
/*Jisho 夜明け colors https://userstyles.org/styles/115621/jisho*/
/*
--main-color: #EF7D6C;
--main-background: #332222;
--second-background: #2A1B1B;
--hover-background: #863B2F;
--main-text: #EFB26C;
--dimmer-text: #986E3F;
*/
}
/*Changed text highlight*/
::selection
{
background: var(--main-color) !important;
color: var(--main-text) !important;
}
::-moz-selection
{
background: var(--main-color) !important;
color: var(--main-text) !important;
}
/*Outline for links*/
a
{
outline-color: var(--main-color) !important;
}
body, html
{
background-color: var(--main-background) !important;
color: var(--dimmer-text) !important;
}
a, a:visited
{
color: var(--main-color) !important;
opacity: .9;
text-decoration: none !important;
}
a:hover
{
opacity: 1;
}
header.row, header.page
{
background-color: var(--main-background) !important;
border-color: var(--hover-background) !important;
}
/*Logo*/
h1.logo a
{
background-image: url("https://gitlab.com/RaitaroH/Jisho-DeepDark/raw/master/Images/logo_katakana.png") !important;
}
p, li, h1, h2, h3, h4
{
color: var(--main-text) !important;
}
.icon
{
fill: var(--main-text) !important;
}
.icon:hover
{
fill: var(--main-color) !important;
}
/*Footer*/
footer .ornament
{
display: none !important;
}
footer
{
background-image: url("https://gitlab.com/RaitaroH/Jisho-DeepDark/raw/master/Images/footer.png") !important;
}
/*Search*/
form.search .input_method_button:hover, form.search .input_method_button:hover > .icon, form.search .search-form_clear-button
{
background-color: transparent !important;
fill: var(--main-color) !important;
}
form.search .input_method_button h4
{
color: var(--dimmer-text) !important;
}
form.search .main, form.search .inner, form.search .submit
{
background-color: var(--second-background) !important;
}
form.search .keyword
{
color: var(--main-text) !important;
}
form.search .search_type
{
color: var(--dimmer-text) !important;
}
form.search .search_type
{
border-color: var(--hover-background) !important;
}
.filter.small.button, .button
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.filter.small.button.active, .filter.small.button:hover, form.search .search_type:hover, .button:hover, form.search .input_method_button:hover h4
{
color: var(--main-color) !important;
}
form.search .submit:hover .search-icon
{
fill: var(--main-color) !important;
}
/*Draw*/
.text_input .selected
{
background-color: var(--main-color) !important;
}
.speech_area_active #speech_button, .radical_area_active #radical_button, .handwriting_area_active #handwriting_button
{
border-bottom-color: var(--main-color) !important;
}
form.search .instructions .arrow, form.search .instructions .text
{
color: var(--main-text) !important;
}
.handwriting .panel, form.search .results .result, form.search .results .result_label
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
form.search .results .result:hover, form.search .results .result_label:hover, form.search .results .show_more:hover, form.search .results .show_less:hover
{
color: var(--main-color) !important;
}
form.search .input_methods, form.search .scroll_indicator
{
background: transparent !important;
}
/*Radicals*/
.radical_table
{
background: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.radical_table .number, .radical_table .number:hover
{
background: var(--second-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.radical_table li:hover
{
color: var(--main-color) !important;
}
.radical_table .radical.radical-image
{
background-image: none !important;
}
.radical.area.combined_mode .reset_radicals
{
color: var(--main-color) !important;
}
.radical.area.combined_mode .reset_radicals:hover
{
background: var(--hover-background) !important;
color: var(--main-text) !important;
}
/*Inflection table*/
table caption
{
color: var(--main-text) !important;
}
table tr th, table tr td
{
color: var(--dimmer-text) !important;
}
/*Search results*/
#main_results h4 .result_count, .concept_light-meanings .meaning-tags, .concept_light-meanings .meaning-abstract, .sense-tag.tag-restriction, .concept_light-meanings .meaning-definition-section_divider, .kanji_light .info, .concept_light-meanings .supplemental_info, .concept_light-meanings .sentences
{
color: var(--dimmer-text) !important;
}
.concept_light-meanings .meaning-meaning, .concept_light-status .concept_light-status_link
{
color: var(--main-text) !important;
}
.concept_light-status .concept_light-status_link:hover
{
color: var(--main-color) !important;
}
.concept_light, .kanji_light, .sentences_block .sentence
{
border-color: var(--hover-background) !important;
}
.concept_light-status .concept_light-tag, .concept_light-status .concept_light-tag a
{
background-color: var(--hover-background) !important;
color: var(--main-color) !important;
}
.fact
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
outline: none !important;
}
.fact li
{
text-align: center;
}
.fact.grammar-breakdown h6
{
color: var(--dimmer-text) !important;
}
/*Links dropdown*/
.f-dropdown
{
background-color: var(--second-background) !important;
border-color: var(--hover-background) !important;
}
.f-dropdown li:hover, .f-dropdown li:focus
{
background-color: var(--hover-background) !important;
}
.f-dropdown::before, .f-dropdown::after
{
border-bottom-color: var(--hover-background) !important;
}
.f-dropdown li a
{
color: var(--main-text) !important;
}
.f-dropdown li a:hover
{
color: var(--main-color) !important;
}
.kanji-details__main-readings-list a
{
border: none !important;
}
/*Kanji strokes*/
.stroke_order_diagram--current_path
{
stroke: var(--main-text) !important;
}
.stroke_order_diagram--existing_path
{
stroke: var(--dimmer-text) !important;
opacity: .6;
}
.stroke_order_diagram--path_start
{
fill: var(--main-color) !important;
}
.stroke_order_diagram--bounding_box, .stroke_order_diagram--guide_line
{
stroke: var(--hover-background) !important;
}
.kanji_strokes canvas
{
filter: invert(90%) grayscale(100%);
}
.kanji_strokes .kanji_play_button
{
background: transparent !important;
}
.kanji_strokes.show_actions .actions
{
background-color: var(--second-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.kanji_strokes .actions .ok_button
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.kanji_strokes .actions .ok_button:hover
{
color: var(--main-color) !important;
}
.noUi-base, .noUi-origin
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
border-radius: 0 !important;
}
.noUi-background
{
background-color: var(--main-color) !important;
}
.noUi-handle
{
background-color: var(--main-color) !important;
border-color: var(--main-color) !important;
}
/*Dictionaries and such*/
.tabs dd.active a, .tabs .tab-title.active a, .tabs dd > a, .tabs .tab-title > a, table
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.tabs dd.active a:hover, .tabs .tab-title.active a:hover, .tabs dd > a, .tabs .tab-title > a:hover
{
color: var(--main-color) !important;
}
table tr
{
background-color: var(--second-background) !important;
}
.dic_ref, .dic_name
{
color: var(--main-text) !important;
}
/*Forum*/
.discussion_thread .comment_body .discussion_status, .discussion_thread .comment_body .comment_status
{
background-color: var(--second-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.discussion_thread .comment_body
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.discussion_thread .comment_body .discussion_about
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
/*Forum comments*/
.discussion-username__forum-flair
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.discussion-username__is-admin
{
background-color: var(--main-color) !important;
border-color: var(--main-color) !important;
color: var(--main-text) !important;
}
.discussion_thread .comment_body.discussion__body--started-by-admin
{
outline-color: var(--main-color) !important;
}
code
{
background-color: var(--second-background) !important;
border-color: var(--second-background) !important;
color: var(--main-text) !important;
}
label
{
color: var(--main-text) !important;
}
.pagination span.disabled, .pagination a
{
border-color: var(--hover-background) !important;
}
/*Login*/
.reveal-modal, dialog
{
background-color: var(--main-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.close-reveal-modal
{
color: var(--main-text) !important;
}
.close-reveal-modal:hover
{
color: var(--main-color) !important;
}
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], input[type="submit"], textarea
{
background-color: var(--second-background) !important;
border: 1px solid var(--hover-background) !important;
color: var(--main-text) !important;
box-shadow: none !important;
}
input[type="text"]:hover, input[type="password"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="week"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="submit"]:hover, textarea:hover, input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="submit"]:focus, textarea:focus, input[type="text"]:active, input[type="password"]:active, input[type="date"]:active, input[type="datetime"]:active, input[type="datetime-local"]:active, input[type="month"]:active, input[type="week"]:active, input[type="email"]:active, input[type="number"]:active, input[type="search"]:active, input[type="tel"]:active, input[type="time"]:active, input[type="url"]:active, input[type="color"]:active, input[type="submit"]:active, textarea:active
{
border-color: var(--main-color) !important;
}
/*Button hover*/
input[type="submit"]:hover
{
color: var(--main-color) !important;
border-color: var(--hover-background) !important;
}
form.search .keyword
{
border: none !important;
}
/*Sign up*/
.auth0-lock.auth0-lock .auth0-lock-tabs
{
background: var(--second-background) !important;
border-color: var(--hover-background) !important;
}
.auth0-lock.auth0-lock .auth0-lock-tabs li.auth0-lock-tabs-current
{
box-shadow: none !important;
}
.auth0-lock.auth0-lock .auth0-lock-header-bg, .auth0-lock.auth0-lock .auth0-lock-header, .auth0-lock.auth0-lock .auth0-lock-cred-pane
{
background: var(--main-background) !important;
border-color: var(--hover-background) !important;
}
.auth0-lock.auth0-lock .auth0-lock-header-logo
{
filter: grayscale(100%) brightness(300%);
}
.auth0-lock.auth0-lock .auth0-lock-name
{
color: var(--main-text) !important;
}
.auth0-lock.auth0-lock .auth0-lock-overlay
{
background: var(--hover-background) !important;
}
.auth0-lock.auth0-lock .auth0-lock-input-wrap
{
background: var(--second-background) !important;
border-color: var(--hover-background) !important;
}
.auth0-lock.auth0-lock .auth0-lock-badge-bottom .auth0-lock-badge:hover svg g#LogoBadge
{
fill: var(--main-color) !important;
}
.auth0-lock-submit
{
background: var(--main-color) !important;
opacity: .9;
}
.auth0-lock-submit:hover
{
opacity: 1;
}
}