Override Hyperskill.org Theme (Black Theme)

theme.css

/*
This css stylesheet override theme on hyperskill.org to the Black Theme. 
To aply this theme install chrome extension https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe
and activate style
*/
#rec80412589 .t396__artboard,
#rec80411710 .tn-elem[data-elem-id="1470209944682"] .tn-atom,
#rec80411710 .t396__artboard,
#rec80411710 .t396__carrier,
#rec80411710 .tn-elem[data-elem-id="1545342618744"] .tn-atom,
#rec80411710 .tn-elem[data-elem-id="1545342611171"] .tn-atom,
#rec80412462 .tn-elem[data-elem-id="1470209944682"] .tn-atom,
#rec80414466 .t396__carrier,
#rec80414466 .tn-elem[data-elem-id="1545342611171"] .tn-atom,
#rec80412462 .t396__artboard,
#rec80413146 .t396__artboard,
#rec80413472 .t396__artboard,
#rec80412462 .t396__carrier,
#rec80412462 .tn-elem[data-elem-id="1545342611171"] .tn-atom,
#rec80412462 .tn-elem[data-elem-id="1545342618744"] .tn-atom,
#rec80413146 .t396__carrier,
#rec80413146 .tn-elem[data-elem-id="1545342611171"] .tn-atom,
#rec80413146 .tn-elem[data-elem-id="1470209944682"] .tn-atom,
#rec80413472 .t396__carrier,
#rec80413472 .tn-elem[data-elem-id="1545342611171"] .tn-atom,
#rec83528456 .t396__artboard,
.t050__title.t-title.t-title_xxl,
.t-text,
.t-body,
.bg-default,
.section-collapse-title[data-v-0f57dff0],
.activity-item[data-v-9a9d62c2],
.activity-item__body .subtitle[data-v-9a9d62c2], .activity-item__body .title[data-v-9a9d62c2],
.ui-graph-item .text > [data-v-37a23ba8],
.bg-white,
.card,
.text-secondary,
.text-black,
#rec88746031,
#rec88746042,
#rec83530120,
#rec88746848,
.t396__filter,
.btn.btn-link.btn-sm,
a.dark-link.w-100,
.dropdown-menu,
body, html, a {
    background-color: #1e1e1e !important;
    background: none;
    color: white !important;
}

.ide-widget[data-v-64a5e077] {
    border: 1px solid var(--black75);
    background-color: #1e1e1e;
    background: #1e1e1e;
    color: #dcdcdc;
}
.tabs, .ide-tab[data-v-64a5e077] {
	background-color: #1e1e1e !important;    
}
textarea.form-control {
    color:white;
    background-color: #1e1e1e !important;
}
textarea.form-control:focus {
    color:white;
    background-color: #1e1e1e !important;
}

.reactions-widget .btn-reaction[data-v-a91ee3e0] {
    padding: 0.15rem 0.5rem;
    margin-right: 0.5rem;
    font-size: .75rem;
    color: var(--white);
    background-color: #1e1e1e;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--black75);
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.spinner-grow {
	filter:invert(1)
}

.ml-2 {
	color: white !important
}

.card {
	border: 1px solid var(--black75);
}

.btn-outline-dark {
    color: #fff;
    border-color: #fff;
}

.step-hint .alert-hint {
    background-color: #1e1e1e !important;
    border: 1px solid var(--black75) !important;
    color: white !important;
}

.mr-1, .mr-2, .mr-3 {
    color: white;
}

.section-collapse-title {
	color: white !important
}
.activity-item.locked .activity-item__icon > [data-v-9a9d62c2], .activity-item.locked .subtitle[data-v-9a9d62c2], .activity-item.locked .title[data-v-9a9d62c2] {
    opacity: 1;
}

.track-card, .card-body[data-v-13808106]:before {
	background-color: #1e1e1e;
}

.track-card .track-description[data-v-13808106]:after {
 	    background: linear-gradient(90deg,hsla(0,0%,100%,0),#1e1e1e 50%) !important;   
}

.track-card, .track-stats {
    color: white !important;
}

.track-description {
	color: white !important;   
}

.track-card, .track-description[data-v-2ba28e1a]:after {
    background: linear-gradient(
90deg,hsla(0,0%,100%,0), #1e1e1e 50%);
}

.track-widget .alert.alert-primary.alert-unactive[data-v-47c8621a] {
    background-color: var(--black87);
    border-color: var(--black07);
}

.icon-wrapper[data-v-30c6fb2e], .badge-count {
	background-color: var(--black75) !important;
}

.border-top {
    border-top: 1px solid #404040!important;
}

.tabs .tabs-header {
    border-bottom: 0.25rem solid transparent;
}

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

.user-stats .stats-block[data-v-5c425321] {
	background-color: var(--black75);
    border: 1px solid var(--black50);	
}

.attempt-wrapper .submission-correct[data-v-bb84e4ac] {
    background-color: #0d7a55;
}

.attempt-wrapper .submission-read-only[data-v-bb84e4ac] {
    background-color: #0d7a55;
    border: 1px solid var(--black75);
}

.modal-content {
	background-color: #1e1e1e;	
}

.animated-background {
    position: relative;
    /* background: #fff; */
    background: linear-gradient(
130deg, var(--black75) 8%, var(--black50) 18%, var(--black75) 33%);
    -webkit-animation-name: placeHolderShimmer;
    animation-name: placeHolderShimmer;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-direction: alternate-reverse;
    /* animation-fill-mode: unset; */
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-fill-mode: forwards;
    background-color: var(--black75);
    animation-fill-mode: forwards;
}
.background-masker[data-v-bcfabef4] {
    position: absolute;
    background: transparent;
}

.structure-level.level-current>.level-header .level-title .descendants-progress[data-v-db2fdcec] {
    font-weight: 400;
    color: var(--white);
    opacity: 1;
}

.knowledge-map-group .breadcrumb .breadcrumb-item.active[data-v-b629ebd2] {
    font-weight: 500;
    color: var(--green50);
}

.matching-problem__left-side .left-side__line[data-v-32f55d36] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    margin-right: -1px;
    margin-bottom: -1px;
    text-align: right;
    background-color: var(--white100);
    border: 1px solid var(--black75);
    transition: all .25s ease-in-out;
    background-color: #1e1e1e;
}

.matching-problem__right-side .right-side__line[data-v-32f55d36] {
    display: flex;
    align-items: center;
    padding-left: 0.5rem;
    margin-bottom: -1px;
    background-color: #1e1e1e;
    border: 1px solid var(--black75);
}

.btn-white {
    color: var(--white);
    background-color: var(--black75);
    border-color: var(--black50);
    border-width: 2px;
}

input.form-control:focus {
    color: white;
    background-color: var(--black75);
    border-color: var(--black50);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(93 114 233 / 25%);
}

input.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--white);
    background-color: var(--black75);
    background-clip: padding-box;
    border: 1px solid var(--black50);
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-control:disabled, .form-control[readonly] {
    background-color: var(--black75);
    opacity: 1;
}

.reaction[data-v-52aab3ea] {
    cursor: pointer;
    background-color: #1e1e1e;
    border: 1px solid var(--black50);
    transition: all .1s ease-in-out;
}

.custom-control-input:disabled~.custom-control-label, .custom-control-input[disabled]~.custom-control-label {
    color: white;
}

div[data-v-2a25b74c] {
	color: white;
}

.h-icon {
    display: inline-block;
    overflow: visible;
    vertical-align: -0.15em;
    fill: #5d72e8;
}

.sortable-line[data-v-791e47f2] {
    background-color: var(--black87);
    border: 1px solid var(--black75);
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
    color: white;
}

.comment-selected[data-v-6b69e781] {
    padding: 1rem;
    background-color: var(--black75);
    border-radius: 0.375rem;
}

.notification-link[data-v-6e09ec90] {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 90%;
    width: 10%;
    height: 100%;
    pointer-events: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
	text-decoration: none;
}

.card-primary .card-body:before {
    background-color: var(--black90) !important;
    border: 1px solid var(--blue25);
}

.card-success .card-body:before {
    background-color: var(--black90);
}

.progress-track-topics .icon-wrapper[data-v-0254dea4] {
    padding: 0.5rem;
    margin-right: 0.5rem;
    line-height: 0;
    background-color: var(--black87);
    border-radius: 0.375rem;
}

.user-profile .profile-actions .btn-light-blue[data-v-0d540a98] {
    color: var(--blue50);
    background-color: var(--black75);
}

.gamification-badge.badge-locked .badge-title[data-v-28321872] {
    color: var(--black25);
}

.gamification-badge .badge-title[data-v-28321872] {
    max-width: 65px;
    margin-top: 0.5rem;
    font-size: .75rem;
    color: var(--black50);
    text-align: center;
    word-wrap: normal;
}

.btn-group-vertical>.btn.active, .btn-group-vertical>.btn:active, .btn-group-vertical>.btn:focus, .btn-group-vertical>.btn:hover, .btn-group>.btn.active, .btn-group>.btn:active, .btn-group>.btn:focus, .btn-group>.btn:hover {
    z-index: 1;
    border: 1px solid var(--black75);
}

.search-result .result-icon[data-v-7c841f1d] {
    background-color: var(--black87);
    border-color: var(--black07);

}

.notification[data-v-6e09ec90]:hover {
    background-color: var(--black75);
	
}
.notification-link[data-v-6e09ec90]:after{
	content:"\27A4"
}
.notification-link:hover{
	background-color:var(--black50);
}

.activities-stack .btn-collapse .btn-desc[data-v-14373e06] {
    /* color: var(--black100); */
    transition: opacity .15s ease-in-out;
}

.table-problem .table[data-v-c31ed50e] {
    background-color: #1e1e1e;
}
.table.table-bordered {
    box-shadow: 0 0 0 1px var(--black75);
}
					
.table.table-striped tbody tr:nth-of-type(odd) {
    /* background-color: #fafafa; */
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.05);
}
.table tbody tr {
    border-top: 1px solid var(--black75);
}
.table-problem .table tbody tr td[data-v-c31ed50e]:not(:first-of-type):hover {
    box-shadow: inset 0 0 0 1px var(--blue50);
}
.table-problem .table .cell-highlighted[data-v-c31ed50e] {
    background-color: var(--black75);
}

div > p > span {
	color:#fff !important;
}
div > h5 > span {
	color:#fff !important;
}

div > ul > li > span {
	color:#fff !important;
}

.matching-problem__right-side .right-side__line[data-v-9ac69d20] {
    background-color: var(--black90);
    border: 1px solid var(--black75);
}

.matching-problem__left-side .left-side__line[data-v-9ac69d20] {
    background-color: var(--black90);
    border: 1px solid var(--black75);
}

.table {
    width: 100%;
    margin-bottom: 1rem;
    color: white !important;
	box-shadow: 0 0 0 1px var(--black75);
}

.table.table-striped tbody tr:nth-of-type(odd) {
   background-color: var(--black90);
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.05);
}
.table-bordered, .table-bordered td, .table-bordered th {
    border: 1px solid var(--black75);
}

div[data-v-2a5158b6] > code {
    padding: 0.15rem 0.25rem;
    color: var(--teal);
    word-break: normal;
    background: transparent;
    border-color: var(--black75);
    border-style: solid;
    border-width: 1px;
    border-radius: 2px;
    /* filter: invert(1); */
}


code {
    padding: 0.15rem 0.25rem;
    color: var(--pink);
    word-break: normal;
    background: var(--black87);
    border-color: var(--black75);
    border-style: solid;
    border-width: 1px;
    border-radius: 2px;
}

.alert, .icon-question:hover {
    color: var(--green100);
}
div.alert.alert-primary {
    color: var(--green100);
    background-color: var(--gray-dark);
    border-color: var(--black50);
}

.btn .b-icon.bi, .dropdown-item .b-icon.bi, .dropdown-toggle .b-icon.bi, .input-group-text .b-icon.bi, .nav-link .b-icon.bi {
    font-size: 125%;
    vertical-align: text-bottom;
    color: var(--light);
}

.matching-problem__right-side .right-side__line .btn-white[data-v-9ac69d20]:hover {
    background-color: var(--black50);
    border-color: var(--black25);
}

.reaction[data-v-9c9eb2da] {
    background-color: var(--black75);
    border: 1px solid var(--black75);
}

.reaction[data-v-9c9eb2da]:hover {
    background-color: var(--black50);
    border-color: var(--black25);
}

.navbar-stepper .dropdown-steps[data-v-fda62488] .dropdown-toggle {
    color: var(--black07);
    background-color: var(--black90);
    border-color: var(--black07);
}

.sortable-line .line-actions .btn[data-v-791e47f2] {
    padding: 0.15rem 0.35rem;
    font-size: .75rem;
    color: var(--black100);
    background-color: var(--black90);
    border-color: var(--black07);
}

.sortable-line .line-actions .btn[data-v-791e47f2]:hover {
    color: var(--black07);
    border-color: var(--black75);
}

div.alert {
	color: var(--black100);
}

.activities-stack .btn-collapse .btn-desc[data-v-14373e06] {
    color: var(--white);
    transition: opacity .15s ease-in-out;
}
div.notification-body[data-v-6e09ec90] {
	width:85%;
}

.text-gray {
    color: var(--blue25);
}

.study-group-widget[data-v-b30f31e8] {
    background: var(--black87);
    border: 1px solid var(--black50);
    border-radius: 0.5rem;
}

.reactions-widget .btn-reaction[data-v-33db2c51] {
    color: var(--black100);
    background-color: var(--black87);
    border-color: #fafafa;
}

.track-widget .alert.alert-track-certificate[data-v-47c8621a] {
    background-color: var(--black87);
}

div[id^='hint-'] > a {
	color: var(--success) !important;
    text-decoration: underline;
}

.reactions-widget .btn-reaction[data-v-33db2c51] {
    color: var(--white);
    background-color: var( --black87);
    border-color: #fafafa;
}

.project-card .project-description[data-v-0651630a]:after {
    background: linear-gradient(
90deg
,hsla(0,0%,100%,0),var(--black90) 50%);
}

.project-card.card-success .project-description[data-v-0651630a]:after {
    background: linear-gradient(
90deg
,hsla(0,0%,100%,0),var(--black90) 50%);
}

.project-card.card-focus .project-description[data-v-0651630a]:after {
    background: linear-gradient(
90deg
,hsla(0,0%,100%,0),var(--black90) 50%);
}

.card-clickable .card-body:before {
    background-color: var(--black90);
}

.card-focus .card-body:before {
    border: 1px solid var(--blue25);
    background-color: var(--black90);
}

.project-card .project-description[data-v-0651630a] {
    position: relative;
    min-height: 4.5rem;
    max-height: 6rem;
    overflow: hidden;
    color: var(--black07);
}


.project-card .project-stats[data-v-0651630a] {
    margin-top: 0.5rem;
    font-size: .875rem;
    color: var(--black07);
}

.form-control[data-v-da8768d0] {
    color: white;
    background-color: var(--black87);
}

.btn-white:hover {
    color: var(--black100);
    background-color: var(--black90);
    border-color: var(--black75);
}

.section-collapse-subtitle[data-v-7b40e60a] {
    color: var(--black07);
}

.d-flex .m-auto,
.ui-graph-topic .ui-graph-item .dots[data-v-547b8be8],
img.tn-atom__img.t-img.loaded {
    filter: invert(100%);
    opacity: 1;
}