/* ==UserStyle==
@name SÍLEX 2.0 Dark
@namespace emprendeaprendiendo.com
@version 1.1.0
@description `<b>SÍLEX Dark</b> is a CSS theme for Stylish and Stylus that applies the following changes on <a href="https://academia.emprendeaprendiendo.com/courses/take/silex-2-0/" target="_blank" rel="">Emprende Aprendiendo / Courses / SÍLEX 2.0</a> website:<ul><li>⚫ Shifting aesthetics up to a more pleasing, non-eye-burning dark theme.</li><li>⚫ Fix of hidden Emprende Aprendiendo logo.</li><li>⚫ Improvement of other aesthetics like the use of SÍLEX isotype blue colour for progress, scrollbars and actions.</li><li>⚫ Improvement of UX by making the top menu fixed so to see the progress and search input at all times.</li></ul>Go <i>Dark</i> and never look back, your eyes will thank you!Any suggestions or comments, please feel free to drop a feedback at the bottom of this page.`
@author Alvar
==/UserStyle== */
@-moz-document url-prefix(https://academia.emprendeaprendiendo.com/courses/take/silex-2-0/) {
/* Course Menu > Fixed Header */
.course-player__left-drawer {
overflow: hidden !important;
}
.course-player__course-navigation {
display: flex !important;
flex-direction: column !important;
}
.course-player__course-navigation > .course-player__chapters-menu {
overflow-y: scroll !important;
height: calc(100vh - 298px) !important;
}
.course-player__course-navigation > div:nth-child(2) {
border-bottom: 1px solid #CACCD6 !important;
padding-bottom: 9px !important;
}
/* Course Menu > Logo Background */
.course-progress__school-name > div {
background-color: #202225 !important;
}
/* Course Menu > Logo Colour Fix */
.course-player__top-bar__logo {
-webkit-filter: invert(1) !important;
filter: invert(1) !important;
}
/* Course Menu */
.course-player__course-navigation,
.course-player__course-navigation > div > section > section {
background-color: #202225 !important;
}
/* Course Menu > Header Menu */
.course-player__course-navigation > div > section > section > div,
.course-player__course-navigation > div > section > section > div > div > div,
.course-player__course-navigation > div > section > section > div > div {
background-color: #2F3136 !important;
}
/* Course Menu > Header Menu > Go to My Courses */
.top-bar__dashboard-link__anchor,
.top-bar__dashboard-link__icon,
.course-progress__dashboard-link {
color: #F8F8F8 !important;
}
.top-bar__dashboard-link > a:hover,
.top-bar__dashboard-link > a:hover > i,
.course-progress__dashboard-link:hover {
color: #007BF9 !important;
}
/* Course Menu > Header Menu > Progress */
.course-progress__inner-container > div > div[class^="_course-progress__progress-bar__container_"] {
background-color: #CACCD6 !important;
}
.course-progress__inner-container > div > div[class^="_course-progress__progress-bar__container_"] > .brand-color__background {
background: #007BF9 !important;
}
.course-progress__inner-container > h2,
.course-progress__inner-container > div > p {
color: #F8F8F8 !important;
}
/* Course Menu > Search Dropdown */
.ember-power-select-trigger {
background-color: #202225 !important;
}
.ember-power-select-placeholder {
color: #F8F8F8 !important;
}
.ember-power-select-status-icon {
-webkit-filter: invert(1) !important;
filter: invert(1) !important;
}
.ember-power-select-trigger:hover,
.ember-power-select-trigger[aria-expanded=true] {
background-color: #36393F !important;
}
/* Course Menu > Search Dropdown > Content */
.ember-basic-dropdown-content {
background-color: #36393F !important;
}
.ember-power-select-search > div > i,
.ember-power-select-search > div > input,
.ember-power-select-group-name,
.ember-power-select-option {
color: #F8F8F8 !important;
}
.ember-power-select-option[aria-current=true] {
background-color: #202225 !important;
}
/* Course Menu > Main Modules */
.course-player__left-drawer {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}
.course-player__progress > span > span {
-webkit-filter: invert(1) !important;
filter: invert(1) !important;
}
.course-player__chapter-item__container > h3,
.course-player__chapter-item__container > span,
.course-player__chapter-item__toggle > i {
color: #F8F8F8 !important;
}
.course-player__chapter-item__header.ui-state-focus > .course-player__chapter-item__container,
.course-player__chapter-item__container:hover {
border-bottom-color: #007BF9 !important;
}
.course-player__chapter-item__header[aria-expanded=true] {
background-color: #36393F !important;
}
/* Course Menu > Sub Modules */
.course-player__content-item > a,
.course-player__content-item > a > div > .content-item__details,
.course-player__content-item > a > div > .content-item__details > .toga-icon {
color: #F8F8F8 !important;
}
.course-player__content-item > a > .brand-color__text {
-webkit-filter: invert(1) !important;
filter: invert(1) !important;
}
.course-player__content-item__link.active,
.course-player__content-item > a:hover {
background-color: rgba(0, 123, 249, 0.6) !important;
}
/* Course Menu > Bottom */
.course-player__left-drawer {
background-color: #202225 !important;
}
/* Course Content */
#player-wrapper > div {
background-color: #36393F !important;
}
.course-player__lesson > section > div {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
background-color: #2F3136 !important;
color: #F8F8F8 !important;
}
.course-player__content-navigation {
background-color: #2F3136 !important;
}
/* Course Content > Fullscreen Button */
.course-player__content-header__action-fullscreen {
color: #F8F8F8 !important;
}
/* Course Content > Links */
.course-player__html-item a,
.course-player__html-item a:active,
.course-player__content-inner a,
.course-player__content-inner a:active {
color: #08B6FA !important;
}
.course-player__html-item a:hover,
.course-player__html-item a:visited,
.course-player__content-inner a:hover,
.course-player__content-inner a:visited {
color: #007BF9 !important;
}
/* Course Content > Buttoms */
.btn--incomplete > button {
border-color: rgba(248, 248, 248, 0.6) !important;
color: #F8F8F8 !important;
}
.btn--incomplete > button:hover {
border-color: rgba(0, 123, 249, 0.6) !important;
}
.btn--continue > button,
button.brand-color__background {
background-color: #007BF9 !important;
color: #F8F8F8 !important;
}
/* Course Content > Tests */
div[id^="question-"] > span,
div[id^="question-"] > p {
color: #F8F8F8 !important;
}
/* Scrollbars */
.course-player__chapters-menu::-webkit-scrollbar,
.course-player__content-inner::-webkit-scrollbar {
width: 12px !important;
background-color: #CACCD6 !important;
}
.course-player__chapters-menu::-webkit-scrollbar-thumb,
.course-player__content-inner::-webkit-scrollbar-thumb {
background-color: #007BF9 !important;
border-radius: 1px !important;
min-height: 50px !important;
}
.course-player__chapters-menu::-webkit-scrollbar-track,
.course-player__content-inner::-webkit-scrollbar-track {
background-color: #CACCD6 !important;
}
.course-player__chapters-menu::-webkit-scrollbar-corner,
.course-player__content-inner::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, .5) !important;
}
}
