A LESS theme for Acellus Learning Accelerator based on KDE Breeze and Nord design philosophies.
Acellus Breeze Nord by BurntKrispe
Details
AuthorBurntKrispe
LicenseNo License
Categoryadmin261.acellus.com
Created
Updated
Size19 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Acellus-Breeze-Nord
A CSS theme for Acellus Learning Accelerator based on KDE Breeze and Nord design philosophies.
Disclaimer
This project is NOT affiliated with Acellus in any way shape or form. Any use of this project's files is done at your own discretion.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Acellus Breeze Nord
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author Me
@preprocessor less
==/UserStyle== */
@-moz-document domain("admin261.acellus.com") {
@nordx: #20242c;
@nordy: #242933;
@nord0: #2e3440;
/*dark1*/
@nord1: #3b4252;
/*dark2*/
@nord2: #434c5e;
/*dark3*/
@nord3: #4c566a;
/*dark4*/
@nord4: #d8dee9;
/*light1*/
@nord5: #e5e9f0;
/*light2*/
@nord6: #eceff4;
/*light3*/
@nord7: #8fbcbb;
/*frost1*/
@nord8: #88c0d0;
/*frost2*/
@nord9: #81a1c1;
/*frost3*/
@nord10: #5e81ac;
/*frost3*/
@nord11: #bf616a;
/*red*/
@nord12: #d08770;
/*orange*/
@nord13: #ebcb8b;
/*yellow*/
@nord14: #a3be8c;
/*green*/
@nord15: #b48ead;
/*purple*/
@outline: 1px solid @nord3;
@backgroundPrimary: ;
:root {
--nordx: #20242c;
--nordy: #242933;
/*light2*/
--nord6: #eceff4;
/*light3*/
--nord7: #8fbcbb;
/*frost1*/
--nord8: #88c0d0;
/*frost2*/
--nord9: #81a1c1;
/*frost3*/
--nord10: #5e81ac;
/*frost3*/
--nord11: #bf616a;
/*red*/
--nord12: #d08770;
/*orange*/
--nord13: #ebcb8b;
/*yellow*/
--nord14: #a3be8c;
/*green*/
--nord15: #b48ead;
/*purple*/
--nord3-4: #929AAA;
}
/*||Body*/
.body {
background: @nord1;
}
.body,
.page,
.page-wrapper {
scrollbar-width: thin;
scrollbar-color: @nord2 @nord1;
}
/*main style*/
#text {
color: @nord5
}
div#text div {
color: @nord5
}
/*||Classes*/
/*Header*/
.recovery,
.acellus-logo,
.helpvideo,
.review,
.grammar_header,
.exam {
background: @nord0;
border-bottom: solid 1px @nord3;
z-index: 2;
height: 38px;
}
#title {
font-size: 1rem;
}
.md\:leading-6 {
line-height: 0.6rem;
font-size: 1rem;
}
.md\:text-base {
font-size: 1rem;
line-height: 1rem;
}
/*counter*/
.counter {
margin-right: 32px;
background: @nord0;
top: -16px;
border: @outline;
}
.counter > span {
background: @nord0;
height: 50%;
}
.counter > span.counter_decor.counter_bottom{
box-shadow: none
}
.counter > span.counter_decor.counter_top{
box-shadow: 0 24px 43px -3px @nord1
}
.counter > span span {
color: @nord6
}
.counter > span.counter_top{
box-shadow:none;
border-radius: 0;
}
.counter > span.counter_bottom{
box-shadow:none;
border-radius: 0;
}
/*Container*/
@media only screen and (max-width: 960px) {
.background-book .container {
width: calc(100% - 48px)!important;
}
}
@media (max-width: 100vh) {
.playerWrapper {
max-width: 100vw!important;
}
}
.container {
width: fit-content;
}
/*Footer*/
#bottom-navbar {
height: 58px;
background: @nord0;
font: italic bold 14px/50px Roboto, Arial, sans-serif;
box-shadow: 0px 0px 4px 4px @nord0 !important;
z-index: 100
}
#bottom-navbar > div:nth-child(1) {
margin: 0
}
/*"book"*/
.playerWrapper .background-book {
max-width: 100%!important
}
.background-book {
background: none
}
.scrolling-book {
scrollbar-width: thin;
scrollbar-color: @nord1 @nord2;
height: auto;
overflow: visible
}
.scrollabletext p {
text-align: justify;
text-justify: inter-character;
}
.scrolling-book-question,
.scrolling-book {
width: 100em;
max-width: fit-content;
}
.scrolling-book-question {
margin: 0 auto;
padding: 12px
}
/*text*/
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
blockquote p {
color: @nord5
}
/*Answer block*/
.question div #_A1{
padding: 0;
}
.container:has(#course-content):not(.container:has(video)) {
background: @nord1;
border: 1px solid @nord3;
box-shadow: 1px 1px 1rem @nord0;
border-radius: 4px;
padding: 0px 0px 0px 0px;
height: fit-content;
}
.book-question-wrapper {
padding: 0px;
}
.imgAnswer_text {
border: 3px solid @nord2;
background: @nord2;
color: var(--nord6);
position: absolute;
margin: 0;
margin-top: -18px;
margin-left: -25px
}
.text-answer {
background: @nord0;
border: 1px solid @nordy;
border-radius: 4px;
}
.text-half {
.a, .b{
margin:8px 0 4px 0;
}
.c, .d{
margin:4px 0 8px 0;
}
}
.text-answer:hover {
background: @nord1;
border: @outline;
}
.text-answer:active {
background: @nord1;
border: 1px solid @nord7;
}
.text-answer *:hover {
color: var(--nord6)!important
}
.image-answer {
background: @nord2;
border: 1px solid @nord2;
border-radius: 4px;
}
.image-answer:hover {
border: 1px solid var(--nord8);
transition: .25s ease;
}
.image-answer *:hover {
color: var(--nord6)!important
}
#answerText {
background: @nord2;
border: 1px solid @nord0;
color: var(--nord6);
transform: scale(1);
margin: 0;
width: 70% !important;
display:inline
}
.keyboard_button {
color: var(--nord6);
background: none;
margin: 0;
display:inline;
width:30% !important
}
/*images*/
#_A1 {
padding: 20px;
background: none;
border: none;
}
.image-question {
border-radius:0;
border: 0;
border-bottom: @outline;
background-color: transparent
}
/*||Note Container*/
#menu_items {
transition: 167ms right Cubic-bezier(0.55, 0.55, 0, 1);
}
.menu {
background: @nord0;
transition: 167ms right Cubic-bezier(0.55, 0.55, 0, 1);
border: none;
position: fixed;
height: 100%;
bottom: -12px;
}
#notecontainer {
scrollbar-color: @nord0 @nord1;
scrollbar-width: thin;
transition: scrollbar-color 0.3s ease-out;
}
/*Menu Items*/
#menu_items {
z-index: 1002 !important;
padding-right: 0 !important;
margin-right: 290px
}
.menu h3 {
text-align: center;
height: 38px;
padding: 0;
border-bottom: solid 1px @nord3;
}
/*help*/
#student_help .menu h3,
#student_help .menu h2 {
background: @nord0;
}
.menu {
border-left: solid 1px @nord3 !important;
}
/*writing instructions*/
#writing_instructions .menu h3 {
background: none;
}
/**/
#student_resources .menu h3,
#student_resources .menu h2 {
background-image: none
}
/*text*/
.Notebook_Key {
background-color: @nord3;
border: solid 1px @nord3;
width: fit-content
}
.Notebook_Key strong {
color: @nord14 !important
}
div#notecontainer * {
color: @nord5;
}
/*buttons*/
.menu a:not(.back-button),
.teacherInfo {
padding-left: 16px;
margin-bottom: 2px;
background: @nord0;
color: @nord5;
border-bottom: none;
}
.menu a:not(.back-button):hover,
.teacherInfo:hover {
background: @nord0;
filter: brightness(115%);
color: @nord5;
}
.menu a:not(.back-button):active,
.teacherInfo:active {
background: @nord2;
color: @nord5;
}
.notebuttons {
background-color: @nord0;
border-top: @outline;
}
.button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
background-color: #0000;
background-image: none;
border: none;
text-shadow: @nord0;
}
.button:hover {
background-color: @nord1;
background-image: none;
border: none;
}
.button:active {
background-color: @nord1;
background-image: none;
border: @outline;
}
.button,
input,
optgroup,
select,
textarea {
color: @nord6;
}
.button:hover,
input:hover,
optgroup:hover,
select:hover,
textarea:hover {
color: @nord6;
}
#printButton,
#printButtonIcon {
background: @nord0;
border: none;
border-radius:0
}
#printButton:hover{
background: @nord1;
border: none
}
#printButton:active{
background: @nord1;
border: @outline
}
#backIcon:hover {
color: var(--nord8);
}
/*||English "Book"/
/*text*/
div.scrolling-book * {
color: @nord4 important
}
/*||Print Scr*/
.lightbox_content {
background: @nord0;
}
/*buttons*/
.lightbox_close {
color: var(--nord6)
}
.lightbox_close:hover {
...