Dark mode.
EAP After Dark by diiiscon
Details
Authordiiiscon
LicenseNo License
CategoryEAP
Created
Updated
Size14 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
This style contains no layout changes, just colors.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name EAP After Dark
@version 20241208.08.47
@namespace https://userstyles.world/user/diiiscon
@description Dark mode.
@author diiiscon
@license No License
==/UserStyle== */
@-moz-document domain("study.eap.gr") {
:root {
--accent: #cf118c;
--accent-light: #f7a1d9;
--accent2: #4f6072;
--accent2-light: #8798ab;
--body: #111;
--on-body: #ddd;
--background: #222;
--on-background: #ddd;
--on-background-accent: var(--accent-light);
--on-background-disabled: #888;
--surface: #333;
--surface2: #3a3a3a;
--on-surface: #ddd;
--on-surface-accent: var(--accent-light);
--dark-border: #000a;
--surface-border: var(--dark-border);
--danger-box: #10181F;
--on-danger-box: var(--accent-light);
--input: #000;
--on-input: #ddd;
--input-border: #fff4;
}
body {
background: var(--body);
color: var(--on-body);
}
#page, #page-header {
background-color: var(--background);
color: var(--on-background);
}
#page-footer, #wrapper {
background-color: var(--background);
color: var(--on-background);
}
#page-footer .footerlinks a {
color: inherit;
}
#page-footer .content a, .footerlinks .helplink a {
color: var(--accent2-light);
}
#page-footer h5, #page-footer h6 {
color: inherit;
}
a, a:visited, a.active, a:focus,
#page-mod-scorm-player .breadcrumb-button a {
color: var(--on-background);
}
a:hover {
color: var(--on-background-accent);
}
.block ul.block_tree a, .breadcrumb a, .instancename, .block_book_toc li a, .block_site_main_menu li a, .navbottom .booknext, .navbottom .bookprev, .navbottom .bookexit {
color: var(--on-surface);
}
.breadcrumb {
color: var(--on-background-disabled);
}
.breadcrumb > li {
text-shadow: 0 1px 0 #000;
}
#region-main .block .header .title,
.tab-pane .well,
.block,
#page-footer .block_rss_client .content ul.list li,
.card,
.headline-v1 {
background-color: var(--surface);
color: var(--on-surface);
border-color: var(--surface-border);
}
.block .header .title {
background: none;
}
h1, h2, h3, h4, h5, h6, .back-to-top, .socials p, #socialheading, .forumpost .subject,
.block .header .title h2,
.block h3.main {
color: inherit;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
background: var(--input);
color: var(--on-input);
border-color: var(--input-border);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-text-fill-color: inherit;
}
.nav-tabs > li > a {
background-color: var(--surface);
color: var(--on-surface);
}
.nav-tabs > li > a:hover {
background-color: var(--accent2-light);
}
.block_myoverview .event-list-item {
border-bottom-color: var(--dark-border);
}
.calendar_event_category {
background-color: hsl(300, 40%, 30%);
}
.calendar_event_group {
background-color: hsl(42.7, 40%, 30%);
}
.calendar_event_course {
background-color: hsl(20, 40%, 30%);
}
.prom-box-danger, .prom-box.prom-box-danger {
background-color: var(--danger-box) !important;
color: var(--on-danger-box) !important;
}
.prom-box-info {
background-color: var(--surface);
color: var(--on-surface);
}
.groupinfobox {
background-color: var(--surface);
color: var(--on-surface);
border-color: var(--surface-border);
}
.shadow1 {
box-shadow: 0 10px 6px -6px #0004;
}
body.pagelayout-login.login_lambda,
body.pagelayout-login.login_lambda #page {
background: var(--body);
color: var(--on-body);
}
body.pagelayout-login.login_lambda #page-content {
background-color: var(--surface) !important;
color: var(--on-surface) !important;
border-color: var(--surface-border) !important;
}
.loginbox #login,
.loginbox .forgetpass {
background-color: var(--surface);
color: var(--on-surface);
}
.loginbox .loginform .form-input {
background: var(--input);
color: var(--on-input);
}
.modal-backdrop {
background-color: var(--background);
}
.modal-container .modal {
box-shadow: 5px 5px 20px 0 #0004;
}
.modal {
background-color: var(--surface);
color: var(--on-surface);
border-color: var(--surface-border);
}
.modal-header {
border-bottom-color: var(--surface-border);
}
.modal-footer {
background-color: var(--surface);
color: var(--on-surface);
border-top-color: var(--surface-border);
box-shadow: none;
}
.close {
color: var(--on-surface);
text-shadow: 0 1px 0 #000;
}
.close:hover {
background-color: transparent;
color: var(--on-surface-accent);
}
.potentialidplist .potentialidp a {
border-color: var(--dark-border);
}
table.flexible th, .generaltable th, table.flexible td, .generaltable td {
border-color: var(--surface-border);
}
table#explaincaps tbody > tr:nth-child(2n+1) > td, table#defineroletable tbody > tr:nth-child(2n+1) > td, table.grading-report tbody > tr:nth-child(2n+1) > td, table#listdirectories tbody > tr:nth-child(2n+1) > td, table.rolecaps tbody > tr:nth-child(2n+1) > td, table.userenrolment tbody > tr:nth-child(2n+1) > td, table#form tbody > tr:nth-child(2n+1) > td, form#movecourses table tbody > tr:nth-child(2n+1) > td, #page-admin-course-index .editcourse tbody > tr:nth-child(2n+1) > td, .forumheaderlist tbody > tr:nth-child(2n+1) > td, table.flexible tbody > tr:nth-child(2n+1) > td, .generaltable tbody > tr:nth-child(2n+1) > td, table#explaincaps tbody > tr:nth-child(2n+1) > th, table#defineroletable tbody > tr:nth-child(2n+1) > th, table.grading-report tbody > tr:nth-child(2n+1) > th, table#listdirectories tbody > tr:nth-child(2n+1) > th, table.rolecaps tbody > tr:nth-child(2n+1) > th, table.userenrolment tbody > tr:nth-child(2n+1) > th, table#form tbody > tr:nth-child(2n+1) > th, form#movecourses table tbody > tr:nth-child(2n+1) > th, #page-admin-course-index .editcourse tbody > tr:nth-child(2n+1) > th, .forumheaderlist tbody > tr:nth-child(2n+1) > th, table.flexible tbody > tr:nth-child(2n+1) > th, .generaltable tbody > tr:nth-child(2n+1) > th {
background-color: var(--surface);
color: var(--on-surface);
}
.user-enroller-panel .uep-search-results .users tbody tr:hover > td, .user-enroller-panel .uep-search-results .cohorts tbody tr:hover > td, table.grading-report tbody tr:hover > td, .forumheaderlist tbody tr:hover > td, .generaltable tbody tr:hover > td, table.flexible tbody tr:hover > td, .category_subcategories tbody tr:hover > td, table#modules tbody tr:hover > td, table#permissions tbody tr:hover > td, .user-enroller-panel .uep-search-results .users tbody tr:hover > th, .user-enroller-panel .uep-search-results .cohorts tbody tr:hover > th, table.grading-report tbody tr:hover > th, .forumheaderlist tbody tr:hover > th, .generaltable tbody tr:hover > th, table.flexible tbody tr:hover > th, .category_subcategories tbody tr:hover > th, table#modules tbody tr:hover > th, table#permissions tbody tr:hover > th {
background-color: var(--surface2);
}
.path-mod-assign td.submissionnotgraded,
.path-mod-assign div.submissionnotgraded {
background-color: inherit;
color: inherit;
}
.forumpost {
background-color: var(--surface);
color: var(--on-surface);
border-color: var(--surface-border);
}
.forumpost.unread .row.header, .path-course-view .unread {
background-color: var(--accent2);
}
.forumpost.unread .row.header {
border-color: var(--dark-border);
}
span.unread {
background-color: transparent;
}
.filemanager a, .file-picker a, .filemanager a:hover, .file-picker a:hover {
color: inherit;
}
.maincalendar .calendarmonth.calendartable thead {
background-color: var(--surface);
color: var(--on-surface);
}
.overlay-icon-container {
background-color: #0008;
}
.messaging-area-container .messaging-area,
.messaging-area-container .messaging-area .messages-area .messages-header,
.messaging-area-container .messaging-area .contacts-area .tabs,
.messaging-area-container .messaging-area .contacts-area .contacts .contact,
.messaging-area-container .messaging-area .contacts-area .contacts .contact .picture,
.messaging-area-container .messaging-area .contacts-area,
.messaging-area-container .messaging-area .messages-area .messages .message .content {
border-color: var(--surface-border);
}
.messaging-area-container .messaging-area .contacts-area .searchtextarea,
.messaging-area-container .messaging-area .messages-area .response,
.messaging-area-container .messaging-area .contacts-area .tabs .tab {
background-color: var(--surface);
color: var(--on-surface);
border-color: var(--surface-border);
}
.messaging-area-container .messaging-area .contacts-area .searchtextarea.searching,
.messaging-area-container .messaging-area .messages-area .response.messaging {
background-color: var(--surface);
}
.messaging-area-container .messaging-area .contacts-area .searchtextarea input,
.messaging-area-container .messaging-area .messages-area .response .message-box .message-text-container textarea {
background-color: var(--input);
color: var(--on-input);
}
.messaging-area-container .messaging-area .contacts-area .searchtextarea.searching input,
.messaging-area-container .messaging-area .messages-area .response.messaging .message-box .message-text-container textarea {
background-color: var(--input);
}
.messaging-area-container .messaging-area .contacts-area .tabs .tab.selected {
background-color: var(--surface2);
color: var(--on-surface);
}
.messaging-area-container .messaging-area .contacts-area .contacts .contact.selected {
background-color: var(--accent);
}
.messaging-area-container .messaging-area .contacts-area .contacts .contact:hover {
background-color: var(--surface);
color: var(--on-surface);
}
.section-summary-activities.mdl-right {
background: var(--surface);
border-color: va...