hyperskill.org dark by alije123

/* ==UserStyle==
@name         hyperskill.org dark
@version      20221204.01.45
@namespace    userstyles.world/user/alije123
@description  Will be updated..
@author       alije123
@license      No License
==/UserStyle== */

@-moz-document domain("hyperskill.org") {
:root {
	--back: #0a0a0b; /* Page background */
	
	--text: white;
	--text-darker: #eae3e3;
	--text-darker-hover: #e3dddd;
	--text-gray: #757575;
	--text-black: #000;
	
	--card-back: #1a1919; /* Card background */
	--card-back-hover: #242222;
	--card-back-lighter: #1f1e1e;
    --card-back-lighter-active: #2f2c2c;
    --card-back-inactive: #383535;
	--borders: #2b2929; /* Card border */ 
	--incard-borders: #312e2e; /* for box-shadow */
	--card-shadows: #00000061;
	--card-success-back: #234238;
	--card-success-borders: #2b5346;
    --card-danger-back: #5a3c3c;
	--card-danger-borders: #885c5c;
	--card-alert-back: #1f2131;
	--card-alert-borders: #353853;
    --card-tip-back: hsl(39, 34%, 14%);
    --card-tip-borders: hsl(39, 34%, 18%);
	--card-topic-back: #242222;
	--card-inactive-back: #353232b5;
	--card-hover-shadow: #585454;
	
	--toast-danger-back-primary: #2d1f1f;
	--toast-danger: #3a2828;
	
	--gembox-color: var(--text);
	--step-text-code-bg-color: var(--card-back-lighter);
	--step-text-border-color: var(--incard-borders);
    --card-bg: var(--card-back);
	
	
	
}

.bg-default {
  background-color: var(--back);
}

/* Text out card */
body {
  color: var(--text); 
  background-color: var(--back);
}


/* Page body */
.card { 
	background-color: var(--card-back) !important; 
	border: 1px solid var(--borders);
}

/* Buttons on top */
.btn-white {
	background-color: var(--card-back); 
	border: 1px solid var(--borders);
	color: var(--text-darker);
}

.btn-white:hover {
	color: var(--text-darker-hover);
}

/* Depend topics */
.topic-widget {
	background-color: var(--card-back-lighter) !important; 
}

.topic-widget__body {
	box-shadow: 0 0 0 1px var(--incard-borders) inset !important;
}

.btn-outline-dark {
	color: var(--text); /* Verify to skip */
	border-color: var(--text);
}

.btn-outline-dark:hover {
	background-color: var(--text);
	color: var(--card-back);
}

.text-black { /* In-Table of contents  */
	color: var(--text) !important;
}

/* Sucs required topic */
.topic-widget__progress {
	background-color: var(--card-success-back) !important;
}
    
.badge-outline-purple {
    background-color:var(--card-back-lighter);
}

.badge.badge-project-topic {
    color: var(--text-darker);
}

/* Right topics hover */
.topic-widget:hover:not(.disabled) .topic-widget__body { /* Border */
  box-shadow: 0 0 0 2px var(--text) inset,0 0 1px var(--text) !important;
}

.topic-widget__body .chevron:hover { /* Arrow */
	color: var(--text) !important;
}

.topic-widget.active .chevron {
	color: var(--text) !important;
}

/* Right topics preview dividers */
.topic-widget__context-menu section:not(:last-of-type) {
	border-bottom: 1px solid var(--borders) !important;
}

/* Loading */
.background-masker {
	background: var(--card-back) !important;
}

.animated-background {
	opacity: 10%;
}

/* Start practice */
.btn-success {
	color: var(--card-back) !important;
}

/* Next section */
.btn-primary {
	color: var(--card-back) !important; 
}

.btn-primary:hover {
	color: var(--card-back); 
}

btn-primary:not(:disabled):not(.disabled):active {
	color: var(--card-back); 
}


/* Topic progress */
.progress {
	background-color: var(--card-back-lighter);
}

.dropdown-menu {
	background-color: var(--card-back);
	border: 1px solid var(--borders) !important;
	box-shadow: 0 .5rem 1rem var(--card-shadows) !important;
	color: var(--text-darker);
}

.dd-topic-progress section .step:hover {
	background-color: var(--card-back-hover) !important;
}


/* Table of contents */
.table-of-content .item {
	color:var(--text) !important;
}
.table-of-content .item-active {
	color:var(--blue100) !important;
}
	
.table-of-content .text-secondary {
	color:var(--text-gray) !important;
}

/* Fix? transparent img */
p>img {
	background-color: var(--text);
	border-radius: 8px;
	padding: 8px;
}

/* User menu fix */
.dropdown-item {
	color: var(--text-darker);
}

.dropdown-divider {
	border-top-color: var(--borders);
}

/* Study plan */
.section-collapse-title {
	color: var(--text) !important;
}

.stage-section-progress .icon-wrapper {
	background-color: var(--card-back-lighter) !important;
}

.section-subtitle {
	color: var(--text-gray) !important;
}

.activities-stack .btn-collapse {
	border-color: var(--incard-borders) !important;
}

.learning-activity::before {
	border-color: var(--incard-borders) !important;

}

.btn-outline-primary {
	color: #5d72e9;
}

.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active {
    color: var(--card-back);
}

.learning-activity.locked::before {
	background-color: var(--card-topic-back) !important;
}

.activities-stack .btn-collapse .btn-desc {
	color: var(--text) !important;
}

.border-top {
	border-top: 1px solid var(--borders) !important;
}

.divider::before, .divider::after {
	background-color: var(--borders) !important;
}

.notifications-dd .dd-header {
	border-bottom-color: var(--borders) !important;
}

.notification {
	border-top: 1px solid var(--borders) !important;
}

.notification:hover {
	background-color: var(--card-back-hover) !important;
}

.notifications-dd .dd-footer {
	border-top: 1px solid var(--borders) !important;
}

.daily-streak .streak-body .streak-value {
	border: 1px solid var(--borders) !important;
}

.daily-streak .divider {
	border-bottom-color: var(--borders) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
	background-color: var(--card-back-hover);
	color: var(--text-darker);
}

.form-control[readonly] {
	color: var(--text-darker) !important;
}

.form-control {
	border: 1px solid var(--incard-borders);
}

.alert-primary {
	background-color: var(--card-alert-back);
	border-color: var(--card-alert-borders);
	color: var(--text);
}

.placeholder {
	background-color: var(--card-back) !important;
}

.form-control {
	background-color: var(--card-back-lighter);
	color: var(--text);
}

.form-control:focus {
	background-color: var(--card-back-lighter);
	color: var(--text);
	border-color: var(--borders);
}

.attempt-wrapper .submission-correct {
	background-color: var(--card-success-back) !important;
	box-shadow: inset .1rem 0 0 0 var(--card-success-borders),inset -.1rem 0 0 0 var(--card-success-borders) !important;
}

.form-control:disabled {
	background-color: var(--card-inactive-back);
}

.reaction {
	background-color: var(--card-back-lighter) !important;
	border: 1px solid var(--incard-borders) !important;
}

.reaction:hover {
	background-color: var(--card-alert-back) !important;
}

.topic-widget__progress_skipped {
	background-image: linear-gradient(135deg,transparent 40%,var(--incard-borders) 40%,var(--incard-borders) 50%,transparent 50%,transparent 90%,var(--incard-borders) 90%,var(--incard-borders)) !important;
}

/* Code syntax highlight */
.ͼb {
	color: #d790e1;
}

.step-text :not(pre) > code, .ͼg {
  color: #7474ff !important;
}

.ͼc, :not(pre) > code {
  color: #604aff;
}

.ͼi {
  color: #17b97c;
}

.ͼd {
  color: #1a9966;
}

.ͼe, .b-toast-danger.b-toast-solid .toast, .b-toast-danger .toast .toast-header, .ide-widget__status_danger, .text-danger {
  color: #ec6464 !important;
}
	
	.ͼ2 .cm-tooltip {
		background-color: var(--back);
		border-color: var(--incard-borders);
	}
	
	.ͼ1 .cm-diagnostic-error {
		border-color: #ec6464
	}

/* Progress widget icons */
.step-icon.icon-wrapper svg {
	filter: invert(100%);
}

.step-icon.icon-wrapper {
	background-color: var(--card-back-lighter) !important;
}
	
	
/* Traks categories */	
.categories .btn-category {
	background-color: var(--card-back) !important;
	border-color: var(--borders) !important;
	color: var(--text-darker) !important;
}
	
.badge-count {
	background-color: var(--card-back-lighter) !important;
}
	
.categories .btn-category:hover {
	box-shadow: 0 0 0 .2rem var(--card-hover-shadow) !important;
}	

.track-card .track-description, .project-card .project-description, .project-card .project-stats {
    color: var(--text-darker) !important;
}
    
.card-clickable .card-body::before {
	background-color: var(--card-back);
	border: 1px solid var(--borders);
}

.track-card .track-description::after, .project-card .project-description::after {
	background: linear-gradient(90deg,rgba(255,255,255,0) 0%, var(--card-back) 50%) !important;
}

.track-icon {
	border: 1px solid var(--card-back-lighter) !important;
}

.progress-track-topics .icon-wrapper {
	background-color: var(--card-back-lighter) !important;
}

.progress-track-topics .topics-progress .progress-wrapper .progress {
	background-color: var(--card-back-lighter) !important;
}

.track-icon .icon-cover img {
	filter: invert(100%);
}

 .track-with-progress>.card-body>.card-badges>.badge, .project-badges > .badge {
	color: var(--back);
}

.border {
	border: 1px solid var(--borders) !important;
}


.card-clickable .card-body::before {
	box-shadow: 0 .125rem .5rem var(--card-shadows);
}

.project-card.card-success .card-body::before {
	border: 1px solid var(--card-success-borders) !important;
}

.nav-link:not(.nav-link-disabled):not(.active), .nav-link:not(.nav-link-disabled):not(.active):hover,
.tabs .nav-item .nav-link:not(.nav-link-disabled):not(.active):active {
	color: var(--text) !important;
}

.tabs .tabs-header {
	border-bottom: .25rem solid var(--card-back);
}

.tabs .nav-item .nav-link:not(.nav-link-disabled):not(.active):hover, .tabs .nav-item .nav-link:not(.nav-link-di...