Skip to content

SÍLEX 2.0 Dark by alvar

Screenshot of SÍLEX 2.0 Dark

Details

Authoralvar

LicenseCC BY - Creative Commons Attribution

Categoryhttps://academia.emprendeaprendiendo.com/courses/take/silex-2-0/

Created

Updated

Size7.7 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

SÍLEX Dark is a CSS theme for Stylish and Stylus that applies the following changes on Emprende Aprendiendo / Courses / SILEX 2.0 website:

⚫ Shifting aesthetics up to a more pleasing, non-eye-burning dark theme.
⚫ Fix of hidden Emprende Aprendiendo logo.
⚫ Improvement of other aesthetics like the use of SÍLEX isotype blue colour for progress, scrollbars and actions.
⚫ Improvement of UX by making the top menu fixed so to see the progress and search input at all times.

Go Dark 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.

Notes

[v1.1.0] 2021/10/22 - Upgrade
New feature
⚫ Added fixed top menu.
Issues
⚫ Fixed background colour of buttons' block below video.

[v1.0.0] 2021/10/20 - Initial release
Core
⚫ Dark theme.
Issues
⚫ Added Emprende Aprendiendo logo.

Source code

/* ==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;
}
}

Reviews

No reviews yet.