Renshuu Dark Ash (by ギョルギ九十三)

/*
    Ash Theme -Renshuu-
    Based on Dark Mode
    Version: 1.0.2
    Made_by: ギョルギ九十三

    Features:
    -Always show 'Save mastery level' button when changing mastery level -request-
    -Shifted the edit button for Mnemonics so you don't hit your name by mistake -request-
    -Fixed a bug with the bottom right animated bar
    -Fixed the grey part of the kao progression line overlapping with the completed line
     when direclty at the start of the circle -should be fixed in base Renshuu at some point-
    -Kao-coin display fixed size is doubled, and the coins are 30% larger
    -Added subtle onhover animation to user avatars -profile pics-
*/

:root {

--vocab: #9695D6;
--b_primary: #5f5f5f; /* this is for the Study buttons and stuff */
--b_primary_border: #ffffff52;
---button_bg: #424242; /* inactive buttons... propbably, nevermind it's also 'Focused Review' and stuff */
--b_border: #696969;
--gold: #FFDD32;
--silver: #CBCBCB;
--bronze: #A68A7E;
--navhover: #F7B76F;
--darkstripe: #354c67; /* #262626 this is for a lot of the stripes, like the one top of your mailbox - Message (new messages in bold) - */
--sstriped: #848484;
--striped: #464646;
--red: #ff4343; /* changed to more muted*/
--lred: #ff000061;
--green: #9aed2c; /* changed, text - to review terms number, etc. */
--nav_bg: #202020; /* for example the background of the nav sidebar, left, you get on phones */
--nav_border: #545454d9; /* top menu bar */
--quiz_submit: #2f3030; /* For example the 'Show the next question' button */
--quiz_bg: #2f3030; /* background of the main quiz box */
--orange_button: #d5b48f; /* 'I don't know' button */
--cw_border: #696969;
--cw_bg: #000000;
--ntext: #000; /* actual inverse */
--grey: #838282;
--dgrey: #888888;
--dorange: #EE7600;
--tab_bg: #4a4a4a;
--neg_text: #ffffff;
--alink: #89c7f6; /* Changed this: link colour */
--text: #f3f3f3;
--body_bg: #141414; /* body colour, make it dark */
--wrapper_bd: #383838; /* The border of the main wrapper */
--bg_main: #1c1c1c; /* bg colour, make it dark-gray */
--menu_bg: #252525; /* things like the drop-downs for 'Games' or 'Resources' */
--warn_bg: #802c2c;
--warn_icon_bg: #5a1d1d;
--succ_bg: #2c420a;
--shighlight: #77e02c; /* changed, quiz words */
/* adventure */
--progress_back: #e6e6e6; /* Full progress bar BG */
--progress_bar: #686868; /* Empty progress bar BG */
--progress_border: #b5b5b5bd; /* BG of the daily challenge boxes */
--challenge_bg: #1c1c1c91; /* BG of the daily challenge boxes */
--level_circles: #ff3849; /* No idea what this is for :D */
--progress_mborder: #fff0; /* EXP bar border */
--reviewing: #388241;

--haiku1: #759057;
--haiku2: #b67f5a;
--haiku3: #5186a1;
--haiku4: #de81a1;
--haiku5: #8283b8;
--haiku6: #cd9ed4;

/* Quest boxes */
--introbox1_on: #4470a9; /* W */
--introbox1_off: #4470a94f;
--introbox4_on: #dd5151; /* S */
--introbox4_off: #dd51514f;

}

.c_circle-bg {
  stroke: #353535;
}

.full_term .grey, .compact_term .grey, .print_term .grey {
  color: #a5a5a5
}

.sched_vocab {
    fill: #597089; /* schedule icon for words */
}

.sched_kanji {
    fill: #735383; /* schedule icon for kanji */
}

.sched_sent
{
    fill: #8a4b5d; /* schedule icon for sentences */
}

.sched_grammar, .sched_conj, .sched_aconj
{
    fill: #bd7954; /* schedule icon for grammar */
}

#adven_box { /* daily_C bg_image */
    background-image: linear-gradient(rgba(48, 48, 48, .93), rgb(3, 3, 3)), url(https://www.renshuu.org/i.php?f=img/adventure/adventure_night.png&v=2) !important;
}

#adven_box.desc
{
    background-image: linear-gradient(rgb(48, 48, 48, .93), rgb(3, 3, 3)), url(https://www.renshuu.org/i.php?f=img/adventure/adventure_night.png&v=2) !important;
}

.tree_line.tochuu>div>div:nth-child(even), .tree_line.completed>div>div, .tree_box.completed .tree_circle {
    border-color: #eeeded;
}

/* Kao-coin zoom tweak. I think this works without breaking anything... probably... */
.kaocoin_grid {
    max-height: 400px !important;
    margin-bottom: 0 !important; /* remove extra space on top */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    row-gap: 2.9em;   /* space between rows */
}

.kaocoin_grid > div {
    transform: scale(1.3);       /* slightly larger */
    transform-origin: top left;    /* keeps alignment neat */
    padding-top: 0;
}

.mnav_item:hover {
    background-color: #3b3b3b;
}

.correctbox
 {
    border: 1px solid #88eb31 !important;
    border-top-width: 3px !important;
}

.wrongbox {
    border: 1px solid #e24a4a !important;
    border-top-width: 3px !important;
}

.fa-check-circle, .fa-arrow-circle-up, .qresult{
    color: #9beb31 !important;
}

/* Always show 'Save mastery level' button when changing mastery level. Someone was asking for this in the problems-bugs section of the forums */
#mastery_selector + .rhidden {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important; /* allow clicks */
}

/* A tiny bit of on hover animation for avatars */
.avatar {
    transition: transform 0.2s ease-in-out;
}

.avatar:hover {
    transform: scale(1.10); /* 10% bigger */
    z-index: 10;
}

/* BG for the 'NEW' tags and EXP markers, hope those classes aren't used anywhere else lol */
.marker1, .pro_marker, .pro_button {
    background-color: #53748d !important;
}

/* I hope this is for the 'How to use' tags only... */
.marker2 {
    background-color: #7aaf3b !important;
}

/* already scheduled button thing in Community lists */
.pure-button-sched {
    background-color: #4f4f4f !important;
}

/* green message that pops up when you play a word in Shiritori, saving preferences, etc. */
.jq-toast-single {
    background-color: #7fcb3f9c !important;
}

/* Fixed the grey part of the kao progression line overlapping with the completed line when direclty at the start of the circle */
.tochuu {
    z-index: -1;
}

/* Hopefully for the ON switch only*/
.onoffswitch-inner:before {
    background-color: #2b5676 !important;
}

/* bottom right bar BG */
#adven_growth .progress, #kao_adven_growth .progress {
    background-color: var(--progress_bar);
}

/* This is the EXP progress bar that appears at the bottom right */
#progress-bar-new {
    background-color: var(--progress_back) !important; /* #d4d4d4 - normal full colour */
}

/* replaces the main menu icons on the dashboard */
#me_sel .kao_icon {
    background-image: none !important;
    border-style: groove;
    border-radius: 50%;
    border-color: #7b7b7b;
    border-width: 15px;
    box-sizing: border-box;
}

#me_sel .kao_icon:hover {
    border-color: #9f9f9f;
    transform: scale(1.10); /* 10% bigger */
}

/* dictionary left vertical stripe */
#dict-closer {
    background-color: #2d2d2d;
}

.dict {
    border-bottom: 5px solid #2d2d2d;
    border-left: 10px solid #2d2d2d;
}

.rightWrapper
 {
    position: relative;
    border-radius: 7px;
    padding: 1em;
    background-color: #2b2b2b;
}

/* FOR MNEMONIC EDIT BUTTONS ------------------------------------- */
[id^="mnemonic_"] + .indent:has(:nth-child(n+3)) {
    display: flex;
    align-items: center;
}

.indent:has(.tlnk[onclick*="editMnemonic"])
  > .tlnk[onclick*="visualizeMn"] {
  margin-left: 0.35em;
}

.indent > .tlnk[onclick*="editMnemonic"] {
    order: 98; /* send it to the end */
    margin-left: auto; /* optional spacing */
    margin-right: 0.1em;
}

.indent > .tlnk[onclick*="deleteMnemonic"] {
    order: 99; /* send it to the end */
    margin-right: 0.7em;
}
/* FOR MNEMONIC EDIT BUTTONS ------------------------------------- */

/* Bottom right animated bar subpixel overflow fix */
.grow.progress.progress-u35 {
    overflow: hidden; /* prevent rounding glitches from showing */
    transform: translateZ(0); /* promote to its own layer */
}

/* Hotfix: "Submit answers" button */
.flat_button.quiz_submit.quiz_b.no_enter {
    background-color: #6d6d6d;
}

/* Quiz answers, m-choice */
#radio1label:hover, #radio2label:hover, #radio3label:hover, #radio4label:hover {
    background-color: #2f3030 !important;
    border-color: #98fc6a !important;
}

#radio1label, #radio2label, #radio3label, #radio4label {
    background-color: #464646 !important;
    border-color: #272828 !important;
    border-style: groove !important;
}