1434 lines
39 KiB
CSS
1434 lines
39 KiB
CSS
/* ==UserStyle==
|
|
@name Formative Catppuccin
|
|
@namespace github.com/catppuccin/userstyles/styles/formative
|
|
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/formative
|
|
@version 0.1.1
|
|
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/formative/catppuccin.user.css
|
|
@description Soothing pastel theme for Formative
|
|
@author Catppuccin
|
|
@license MIT
|
|
|
|
@preprocessor less
|
|
@var select flavor "Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
|
|
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
|
|
==/UserStyle== */
|
|
@-moz-document domain('app.formative.com') {
|
|
/* Palette Lookup Table
|
|
* Defining the Colors per Flavor called via:
|
|
* @catppuccin['Flavor']['Color'] */
|
|
@catppuccin: {
|
|
@latte: {
|
|
@rosewater: #dc8a78;
|
|
@flamingo: #dd7878;
|
|
@pink: #ea76cb;
|
|
@mauve: #8839ef;
|
|
@red: #d20f39;
|
|
@maroon: #e64553;
|
|
@peach: #fe640b;
|
|
@yellow: #df8e1d;
|
|
@green: #40a02b;
|
|
@teal: #179299;
|
|
@sky: #04a5e5;
|
|
@sapphire: #209fb5;
|
|
@blue: #1e66f5;
|
|
@lavender: #7287fd;
|
|
@text: #4c4f69;
|
|
@subtext1: #5c5f77;
|
|
@subtext0: #6c6f85;
|
|
@overlay2: #7c7f93;
|
|
@overlay1: #8c8fa1;
|
|
@overlay0: #9ca0b0;
|
|
@surface2: #acb0be;
|
|
@surface1: #bcc0cc;
|
|
@surface0: #ccd0da;
|
|
@base: #eff1f5;
|
|
@mantle: #e6e9ef;
|
|
@crust: #dce0e8;
|
|
};
|
|
@frappe: {
|
|
@rosewater: #f2d5cf;
|
|
@flamingo: #eebebe;
|
|
@pink: #f4b8e4;
|
|
@mauve: #ca9ee6;
|
|
@red: #e78284;
|
|
@maroon: #ea999c;
|
|
@peach: #ef9f76;
|
|
@yellow: #e5c890;
|
|
@green: #a6d189;
|
|
@teal: #81c8be;
|
|
@sky: #99d1db;
|
|
@sapphire: #85c1dc;
|
|
@blue: #8caaee;
|
|
@lavender: #babbf1;
|
|
@text: #c6d0f5;
|
|
@subtext1: #b5bfe2;
|
|
@subtext0: #a5adce;
|
|
@overlay2: #949cbb;
|
|
@overlay1: #838ba7;
|
|
@overlay0: #737994;
|
|
@surface2: #626880;
|
|
@surface1: #51576d;
|
|
@surface0: #414559;
|
|
@base: #303446;
|
|
@mantle: #292c3c;
|
|
@crust: #232634;
|
|
};
|
|
@macchiato: {
|
|
@rosewater: #f4dbd6;
|
|
@flamingo: #f0c6c6;
|
|
@pink: #f5bde6;
|
|
@mauve: #c6a0f6;
|
|
@red: #ed8796;
|
|
@maroon: #ee99a0;
|
|
@peach: #f5a97f;
|
|
@yellow: #eed49f;
|
|
@green: #a6da95;
|
|
@teal: #8bd5ca;
|
|
@sky: #91d7e3;
|
|
@sapphire: #7dc4e4;
|
|
@blue: #8aadf4;
|
|
@lavender: #b7bdf8;
|
|
@text: #cad3f5;
|
|
@subtext1: #b8c0e0;
|
|
@subtext0: #a5adcb;
|
|
@overlay2: #939ab7;
|
|
@overlay1: #8087a2;
|
|
@overlay0: #6e738d;
|
|
@surface2: #5b6078;
|
|
@surface1: #494d64;
|
|
@surface0: #363a4f;
|
|
@base: #24273a;
|
|
@mantle: #1e2030;
|
|
@crust: #181926;
|
|
};
|
|
@mocha: {
|
|
@rosewater: #f5e0dc;
|
|
@flamingo: #f2cdcd;
|
|
@pink: #f5c2e7;
|
|
@mauve: #cba6f7;
|
|
@red: #f38ba8;
|
|
@maroon: #eba0ac;
|
|
@peach: #fab387;
|
|
@yellow: #f9e2af;
|
|
@green: #a6e3a1;
|
|
@teal: #94e2d5;
|
|
@sky: #89dceb;
|
|
@sapphire: #74c7ec;
|
|
@blue: #89b4fa;
|
|
@lavender: #b4befe;
|
|
@text: #cdd6f4;
|
|
@subtext1: #bac2de;
|
|
@subtext0: #a6adc8;
|
|
@overlay2: #9399b2;
|
|
@overlay1: #7f849c;
|
|
@overlay0: #6c7086;
|
|
@surface2: #585b70;
|
|
@surface1: #45475a;
|
|
@surface0: #313244;
|
|
@base: #1e1e2e;
|
|
@mantle: #181825;
|
|
@crust: #11111b;
|
|
};
|
|
};
|
|
|
|
:root {
|
|
#catppuccin(@flavor, @accentColor);
|
|
}
|
|
|
|
#catppuccin(@lookup, @accent) {
|
|
@rosewater: @catppuccin[@@lookup][@rosewater];
|
|
@flamingo: @catppuccin[@@lookup][@flamingo];
|
|
@pink: @catppuccin[@@lookup][@pink];
|
|
@mauve: @catppuccin[@@lookup][@mauve];
|
|
@red: @catppuccin[@@lookup][@red];
|
|
@maroon: @catppuccin[@@lookup][@maroon];
|
|
@peach: @catppuccin[@@lookup][@peach];
|
|
@yellow: @catppuccin[@@lookup][@yellow];
|
|
@green: @catppuccin[@@lookup][@green];
|
|
@teal: @catppuccin[@@lookup][@teal];
|
|
@sky: @catppuccin[@@lookup][@sky];
|
|
@sapphire: @catppuccin[@@lookup][@sapphire];
|
|
@blue: @catppuccin[@@lookup][@blue];
|
|
@lavender: @catppuccin[@@lookup][@lavender];
|
|
@text: @catppuccin[@@lookup][@text];
|
|
@subtext1: @catppuccin[@@lookup][@subtext1];
|
|
@subtext0: @catppuccin[@@lookup][@subtext0];
|
|
@overlay2: @catppuccin[@@lookup][@overlay2];
|
|
@overlay1: @catppuccin[@@lookup][@overlay1];
|
|
@overlay0: @catppuccin[@@lookup][@overlay0];
|
|
@surface2: @catppuccin[@@lookup][@surface2];
|
|
@surface1: @catppuccin[@@lookup][@surface1];
|
|
@surface0: @catppuccin[@@lookup][@surface0];
|
|
@base: @catppuccin[@@lookup][@base];
|
|
@mantle: @catppuccin[@@lookup][@mantle];
|
|
@crust: @catppuccin[@@lookup][@crust];
|
|
@accent-color: @catppuccin[@@lookup][@@accent];
|
|
@contrast-accent-color: @catppuccin[@@lookup][@base];
|
|
|
|
/* the formative icon */
|
|
.jKwBMH,
|
|
.SplitColumnLayout__StyledLogo-sc-4mcl10-4 {
|
|
svg {
|
|
path:nth-child(1) {
|
|
fill: @yellow !important;
|
|
}
|
|
path:nth-child(2) {
|
|
fill: @green !important;
|
|
}
|
|
path:nth-child(3) {
|
|
fill: @blue !important;
|
|
}
|
|
path:nth-child(4) {
|
|
fill: @red !important;
|
|
}
|
|
path:nth-child(5) {
|
|
fill: @yellow !important;
|
|
}
|
|
path:nth-child(6) {
|
|
fill: @text !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*************************************************************
|
|
* HOMEPAGE
|
|
*************************************************************/
|
|
div.ClassAvatar__RootDiv-sc-1ihhtbf-0,
|
|
.Avatar__RootDiv-sc-r9onsm-0 > div {
|
|
background-color: @accent-color;
|
|
color: @contrast-accent-color !important;
|
|
span {
|
|
color: @contrast-accent-color;
|
|
}
|
|
}
|
|
div.ckhGGP {
|
|
background-color: @base;
|
|
}
|
|
|
|
span.giYyjb,
|
|
span.keXwhS {
|
|
color: @text;
|
|
}
|
|
|
|
div.cWBWYQ,
|
|
div.Card__RootDiv-sc-4gt2nj-0 {
|
|
background-color: @mantle;
|
|
border-color: @surface0;
|
|
|
|
div {
|
|
color: @text;
|
|
}
|
|
|
|
&:hover {
|
|
div.FormativeCard__TitleOverflowEllipsis-sc-tkxjaz-7,
|
|
div.SectionCard__SectionTitleOverflowEllipsis-sc-ir1v2v-4 {
|
|
color: @accent-color;
|
|
}
|
|
}
|
|
|
|
span.iHSLQn {
|
|
background-color: @surface0 !important;
|
|
color: @text !important;
|
|
}
|
|
.FormativeCardStatusPill__StyledPill-sc-156d63l-0 {
|
|
background-color: @surface0 !important;
|
|
}
|
|
.kCQMqN {
|
|
border-color: @overlay0;
|
|
}
|
|
.material-icons-outlined {
|
|
color: @text;
|
|
}
|
|
.FormativeCardScore__PercentageSpan-sc-p5mc30-1 {
|
|
background-color: fade(@accent-color, 20%) !important;
|
|
}
|
|
}
|
|
|
|
.NotificationCenterAlertListContainer__RootDiv-sc-1kyy25p-0 {
|
|
background-color: @surface2;
|
|
}
|
|
|
|
.SectionDetail__RootDiv-sc-1aifgaj-0 {
|
|
.hgKaEJ {
|
|
background-color: @base;
|
|
}
|
|
.dyVuUp {
|
|
background-color: @surface0;
|
|
color: @text;
|
|
i {
|
|
color: @text;
|
|
}
|
|
}
|
|
span,
|
|
.OverflowEllipsis__RootDiv-sc-1mjk6uz-0 {
|
|
color: @text;
|
|
}
|
|
}
|
|
|
|
button.Button__StyledButton-sc-aum9f1-1 {
|
|
background-color: @surface0;
|
|
color: @text;
|
|
i {
|
|
color: @accent-color;
|
|
}
|
|
&:hover,
|
|
&:focus {
|
|
background-color: @surface1;
|
|
}
|
|
}
|
|
button.Switch__RootButton-sc-1ss5zxi-0 {
|
|
&[aria-checked="true"] {
|
|
background-color: @green;
|
|
}
|
|
&[aria-checked="false"] {
|
|
background-color: @surface0;
|
|
}
|
|
div {
|
|
background-color: @surface2;
|
|
}
|
|
}
|
|
div[role="dialog"] {
|
|
background-color: @surface2;
|
|
.Popover__PopoverArrow-sc-1x169li-3,
|
|
.Dropdown__PopoverArrow-sc-1s7u5eb-1 {
|
|
fill: @surface2;
|
|
}
|
|
button {
|
|
background-color: @surface2;
|
|
color: @text;
|
|
.material-icons-outlined,
|
|
.selected {
|
|
color: @accent-color !important;
|
|
}
|
|
}
|
|
button:hover {
|
|
background-color: @overlay0 !important;
|
|
color: @accent-color !important;
|
|
}
|
|
}
|
|
|
|
div.kdIyDj {
|
|
background-color: @base;
|
|
border-color: @surface0;
|
|
|
|
div.jQSsry {
|
|
background-color: @base !important; /* sometimes if i press shift some other color shows up */
|
|
}
|
|
|
|
div.jgGUVg {
|
|
background-color: @accent-color !important;
|
|
}
|
|
|
|
div.cvJhDB,
|
|
div.dxwGZP {
|
|
color: @text;
|
|
}
|
|
span.ioJPTZ {
|
|
background-color: @surface0 !important;
|
|
color: @text !important;
|
|
}
|
|
}
|
|
div.lcYltU {
|
|
.fvAkfK,
|
|
.hqFwtw {
|
|
color: @text !important;
|
|
}
|
|
}
|
|
|
|
div.hBqAyW {
|
|
background-color: @base;
|
|
div.eFoEtr {
|
|
.react-select-icon {
|
|
color: @accent-color;
|
|
}
|
|
.ReactSelect__control {
|
|
.ReactSelect__control--is-focused {
|
|
}
|
|
background-color: @surface0;
|
|
border-color: @accent-color !important;
|
|
}
|
|
.ReactSelect__placeholder {
|
|
color: @subtext1 !important;
|
|
}
|
|
}
|
|
div.css-qr46ko {
|
|
.TWTWN {
|
|
background-color: @surface0;
|
|
border-radius: 4px; /* needed to fix radius i somehow broke */
|
|
border: 1px solid @overlay0;
|
|
|
|
.jYYNAO,
|
|
.fHuoBD {
|
|
color: @text;
|
|
}
|
|
|
|
.jEcgFb {
|
|
background-color: @accent-color;
|
|
color: @contrast-accent-color;
|
|
}
|
|
}
|
|
}
|
|
button.Button__StyledButton-sc-aum9f1-1 {
|
|
border-color: @accent-color;
|
|
color: @text;
|
|
i {
|
|
color: @text;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.hrkZHu {
|
|
.jyqDRL {
|
|
color: @text;
|
|
}
|
|
}
|
|
|
|
div.jNcNAJ,
|
|
div.kVjvQX {
|
|
background-color: @mantle;
|
|
.material-icons-outlined {
|
|
color: @text;
|
|
&:hover {
|
|
color: @accent-color;
|
|
}
|
|
}
|
|
.DqwDN {
|
|
background-color: @mantle;
|
|
}
|
|
.SideTabItem__RootButton-sc-vtkzgr-0 {
|
|
background-color: @mantle;
|
|
&:hover {
|
|
color: @accent-color;
|
|
.material-icons-outlined {
|
|
color: @accent-color;
|
|
}
|
|
}
|
|
color: @text;
|
|
&.selected {
|
|
background-color: @crust;
|
|
&::after {
|
|
background-color: @accent-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.Tooltip__Content-sc-1k6bq57-1 {
|
|
background-color: @overlay0;
|
|
color: @text;
|
|
.Tooltip__Arrow-sc-1k6bq57-0 {
|
|
fill: @overlay0;
|
|
}
|
|
}
|
|
|
|
.iYBCHL {
|
|
i,
|
|
.bGQMJt,
|
|
.jKqZHS {
|
|
color: @text;
|
|
}
|
|
}
|
|
.ErrorExplainer__BodyDiv-sc-7nq4if-0 {
|
|
i[name="error_outline"] {
|
|
color: @red;
|
|
}
|
|
.ErrorExplainer__MainTextHeading-sc-7nq4if-1,
|
|
.ErrorExplainer__SubTextHeading-sc-7nq4if-2,
|
|
.ErrorExplainer__TechnicalDetailsHeading-sc-7nq4if-3,
|
|
.ErrorExplainer__ErrorIdParagraph-sc-7nq4if-4 {
|
|
color: @text;
|
|
}
|
|
}
|
|
|
|
.brCeph {
|
|
.bVrKs > i,
|
|
.jjxnUg {
|
|
color: @text;
|
|
}
|
|
}
|
|
|
|
/*************************************************************
|
|
* Tracker
|
|
* FIXME: Someone with access to tracker data, please make sure everything is correctly styled. I'll try my best to style everything I can see for now.
|
|
*************************************************************/
|
|
.StudentTracker__StudentTrackerRoot-sc-17q49lm-0 {
|
|
background-color: @base;
|
|
.dHLPyg {
|
|
background-color: @base;
|
|
border-color: @surface0;
|
|
}
|
|
.fYAgHV {
|
|
color: @text;
|
|
}
|
|
.esbgcq {
|
|
color: @accent-color;
|
|
}
|
|
|
|
.iYBCHL {
|
|
i,
|
|
.empty-explainer-main-text,
|
|
.jKqZHS {
|
|
color: @text;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*************************************************************
|
|
* Practice
|
|
*************************************************************/
|
|
.PracticeSets__RootDiv-sc-zal4td-0 {
|
|
.Button__StyledButton-sc-aum9f1-1 {
|
|
border-color: @accent-color;
|
|
color: @text;
|
|
}
|
|
background-color: @base;
|
|
.crQhJA {
|
|
background-color: @base;
|
|
.dMFRNT {
|
|
color: @text;
|
|
}
|
|
.ioJPTZ {
|
|
background-color: @surface0 !important;
|
|
color: @accent-color !important;
|
|
}
|
|
.kPxiiI {
|
|
.hArMFK {
|
|
color: @text;
|
|
}
|
|
.genDmU {
|
|
background-color: @surface0 !important; /* goodbye multicolor pills */
|
|
}
|
|
}
|
|
}
|
|
.iNJonG {
|
|
.jZwCGj,
|
|
.kbWKmZ {
|
|
color: @text;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*************************************************************
|
|
* Modals
|
|
*************************************************************/
|
|
.ReactModal__Overlay {
|
|
.ReactModal__Content {
|
|
background-color: transparent;
|
|
} /* undo div[role="dialog"] */
|
|
background-color: fade(@crust, 80%); /* thanks less! */
|
|
.ReactModal__ActualContent {
|
|
background-color: @surface0;
|
|
.zyNzk {
|
|
background-color: @surface1;
|
|
border-color: @surface1;
|
|
&:hover {
|
|
i {
|
|
color: @accent-color;
|
|
}
|
|
}
|
|
i {
|
|
color: @text;
|
|
}
|
|
}
|
|
/* non-iframe modals */
|
|
.hfsUGh {
|
|
background-color: @surface0;
|
|
.ModalTitle {
|
|
background-color: @surface0;
|
|
.fdvlYb {
|
|
color: @text;
|
|
}
|
|
}
|
|
/********************************************************/
|
|
label {
|
|
color: @text;
|
|
span {
|
|
color: @red;
|
|
}
|
|
}
|
|
input {
|
|
background-color: @surface1;
|
|
border-color: @overlay0;
|
|
color: @text;
|
|
&::placeholder {
|
|
color: @subtext0;
|
|
}
|
|
}
|
|
/*******************************************************/
|
|
.ModalBody__RootDiv-sc-1lg094f-0 {
|
|
color: @text;
|
|
h3 {
|
|
color: @text;
|
|
}
|
|
}
|
|
.ModalFooter-sc-iv6ab8-0 {
|
|
.eGqfJp {
|
|
border-color: @accent-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ReactSelect__control {
|
|
background-color: @surface1;
|
|
border-color: @overlay0;
|
|
&.ReactSelect__control--is-focused {
|
|
border-color: @accent-color !important;
|
|
}
|
|
.ReactSelect__single-value {
|
|
color: @text;
|
|
}
|
|
.ReactSelect__indicator > svg {
|
|
stroke: @text;
|
|
fill: @text;
|
|
}
|
|
}
|
|
.ReactSelect__menu > .ReactSelect__menu-list {
|
|
.ReactSelect__option {
|
|
background-color: @surface1;
|
|
color: @text;
|
|
&.ReactSelect__option--is-focused {
|
|
background-color: @surface2;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*************************************************************
|
|
* PracticeView
|
|
*************************************************************/
|
|
.PracticeSet__RootDiv-sc-1wup6tb-0 {
|
|
.dyYlFt {
|
|
background-color: @mantle;
|
|
border-color: @surface1;
|
|
}
|
|
.vzHqN > .kpSMxi > .gIxFZH > i,
|
|
.gIxFZH,
|
|
.dMFRNT {
|
|
color: @text;
|
|
}
|
|
.IconButton__RootButton-sc-ebvofk-0,
|
|
.fxjbRk {
|
|
background-color: @surface0;
|
|
border-color: @surface0;
|
|
i {
|
|
color: @text;
|
|
}
|
|
}
|
|
.hMuqfo {
|
|
background-color: @base;
|
|
}
|
|
/* edit card */
|
|
.Sidebar__ChildrenDiv-sc-1d5hucq-2 {
|
|
background-color: @mantle;
|
|
.jZwCGj,
|
|
label {
|
|
color: @text;
|
|
}
|
|
.gotoQK {
|
|
border-color: @surface0;
|
|
textarea {
|
|
color: @text;
|
|
&::placeholder {
|
|
color: @text;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.PracticeSession__RootDiv-sc-1t2vn9a-1 {
|
|
.jAtBlo {
|
|
background-color: @mantle;
|
|
border-color: @surface1;
|
|
}
|
|
.gWOYlX {
|
|
background-color: @surface0;
|
|
border-color: @surface0;
|
|
i {
|
|
color: @text;
|
|
}
|
|
}
|
|
.kbWKmZ,
|
|
.gIxFZH {
|
|
color: @text;
|
|
}
|
|
.insToW {
|
|
background-color: @base;
|
|
.XmvNK {
|
|
border-color: @surface2;
|
|
background-color: @crust;
|
|
span {
|
|
color: @text;
|
|
}
|
|
}
|
|
.jGFokz {
|
|
&.red {
|
|
background-color: @red;
|
|
color: @contrast-accent-color;
|
|
}
|
|
&.green {
|
|
background-color: @green;
|
|
color: @contrast-accent-color;
|
|
}
|
|
}
|
|
.fjVeZh {
|
|
background-color: @overlay1;
|
|
.ProgressBar__ProgressBarDiv-sc-4qm1te-2 {
|
|
background-color: @accent-color !important;
|
|
}
|
|
}
|
|
}
|
|
.feItUf {
|
|
.lnYigE,
|
|
.fXcREk {
|
|
color: @text;
|
|
}
|
|
}
|
|
}
|
|
.notifications-wrapper {
|
|
.notifications-bc {
|
|
.notification-success {
|
|
background-color: @green !important;
|
|
color: @contrast-accent-color !important;
|
|
}
|
|
}
|
|
}
|
|
/*************************************************************
|
|
* Student Profile
|
|
*************************************************************/
|
|
.StudentProfile__RootDiv-sc-bc305u-0 {
|
|
.dHLPyg {
|
|
background-color: @base;
|
|
border-color: @surface1;
|
|
.TabsItem__StyledTitleDiv-sc-tj1og8-2 {
|
|
color: @text;
|
|
}
|
|
.TabsItem__SelectedLineDiv-sc-tj1og8-1 {
|
|
background-color: @accent-color !important;
|
|
}
|
|
}
|
|
.eEhCum {
|
|
background-color: @base;
|
|
.fFnpYA {
|
|
.kXDmTg {
|
|
background-color: @accent-color;
|
|
color: @contrast-accent-color !important;
|
|
}
|
|
color: @text;
|
|
label {
|
|
color: @text;
|
|
}
|
|
}
|
|
.eGqfJp {
|
|
color: @accent-color;
|
|
border-color: @accent-color;
|
|
}
|
|
.hGMdJp {
|
|
border-color: @surface1;
|
|
}
|
|
.fOUzKq {
|
|
/* fix shitty styling by formative */
|
|
padding: 1em;
|
|
text-decoration: none;
|
|
color: @text;
|
|
i {
|
|
color: @text;
|
|
}
|
|
}
|
|
.iSUyai {
|
|
.evnAvd,
|
|
.iFWvBX,
|
|
.BadgeCard__BadgeLabelDiv-sc-13976oo-8,
|
|
.BadgeCard__BadgeDescriptionDiv-sc-13976oo-9 {
|
|
color: @text;
|
|
}
|
|
.Pill__RootDiv-sc-4b6mpn-0 {
|
|
background-color: @surface0 !important;
|
|
color: @accent-color !important;
|
|
}
|
|
.BadgeCard__LevelProgressDiv-sc-13976oo-2 {
|
|
span {
|
|
color: @text;
|
|
}
|
|
.ProgressBar__Progress-sc-4qm1te-0 {
|
|
background-color: @overlay0;
|
|
}
|
|
.ProgressBar__ProgressBarDiv-sc-4qm1te-2 {
|
|
background-color: @accent-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.iCrZor {
|
|
&.selectedTab {
|
|
background-color: @accent-color;
|
|
color: @contrast-accent-color;
|
|
}
|
|
color: @accent-color;
|
|
}
|
|
.fJjhRQ:hover {
|
|
background-color: @surface1;
|
|
}
|
|
/*************************************************************
|
|
* Join Code
|
|
*************************************************************/
|
|
.App__AppContainerDiv-sc-1x6i86e-0 {
|
|
background-color: @base;
|
|
.SplitColumnLayout__FullScreenDiv-sc-4mcl10-5 {
|
|
background-color: @base;
|
|
svg {
|
|
path:nth-child(1) {
|
|
fill: @peach !important;
|
|
stroke: @peach !important;
|
|
}
|
|
path:nth-child(2) {
|
|
fill: @peach !important;
|
|
stroke: @peach !important;
|
|
}
|
|
path:nth-child(3) {
|
|
fill: @green !important;
|
|
stroke: @green !important;
|
|
}
|
|
path:nth-child(4) {
|
|
fill: @green !important;
|
|
stroke: @green !important;
|
|
}
|
|
path:nth-child(5) {
|
|
fill: @green !important;
|
|
stroke: @green !important;
|
|
}
|
|
path:nth-child(6) {
|
|
fill: @green !important;
|
|
stroke: @green !important;
|
|
}
|
|
path:nth-child(7) {
|
|
fill: @green !important;
|
|
stroke: @green !important;
|
|
}
|
|
path:nth-child(8) {
|
|
fill: @green !important;
|
|
stroke: @green !important;
|
|
}
|
|
path:nth-child(9) {
|
|
fill: @green !important;
|
|
stroke: @green !important;
|
|
}
|
|
path:nth-child(10) {
|
|
fill: @green !important;
|
|
stroke: @green !important;
|
|
}
|
|
path:nth-child(11) {
|
|
fill: @text !important;
|
|
stroke: @text !important;
|
|
}
|
|
}
|
|
}
|
|
.Elements__ColumnDiv-sc-1qtb2ho-2,
|
|
.Elements__TwoColumnParentDiv-sc-1qtb2ho-1 {
|
|
background-color: @base;
|
|
}
|
|
.SplitColumnLayout__Card-sc-4mcl10-0 {
|
|
background-color: @mantle;
|
|
.lmmjCy,
|
|
.EaPMD,
|
|
.cuNCkB {
|
|
color: @text;
|
|
}
|
|
.JoinQuickCode__ErrorDiv-sc-1uhfett-4 {
|
|
color: @red;
|
|
}
|
|
.PWQOG,
|
|
.JoinQuickCode__StyledLink-sc-1uhfett-2 {
|
|
color: @blue;
|
|
}
|
|
.react-code-input {
|
|
input {
|
|
background-color: @crust;
|
|
border-color: @surface1;
|
|
color: @text;
|
|
&:focus {
|
|
border-color: @accent-color;
|
|
}
|
|
}
|
|
}
|
|
.CallToActionLink__StyledLink-sc-yuiy65-0 {
|
|
color: @text;
|
|
span {
|
|
color: @text;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*************************************************************
|
|
* Assignment UI
|
|
* Note: I don't have access to *every* UI element a teacher can possibly use, this is best-effort and will be updated when I find new UI elements.
|
|
*************************************************************/
|
|
.FormativeStudent__FormativeStudentRoot-sc-1nzmkoa-1 {
|
|
.FormativeStudentHeader__RootDiv-sc-yw00ql-0 {
|
|
.FormativeStudentHeader__UpperDiv-sc-yw00ql-11 {
|
|
background-color: @surface1 !important;
|
|
color: @text;
|
|
border-color: @overlay0;
|
|
.FormativeStudentHeader__InfoItem-sc-yw00ql-7 {
|
|
border-color: @overlay0;
|
|
}
|
|
.Button__StyledButton-sc-aum9f1-1 {
|
|
border-color: @accent-color;
|
|
}
|
|
}
|
|
}
|
|
/***********************************************************/
|
|
#student-main-content {
|
|
background-color: @base;
|
|
.FormativeDescription__RootDiv-sc-msmcgd-0 {
|
|
* {
|
|
color: @text;
|
|
}
|
|
}
|
|
.FormativeUnavailableMessage__InnerDiv-sc-14kxg7t-1 {
|
|
background-color: @mantle;
|
|
border-color: @accent-color;
|
|
i[name="warning"] {
|
|
color: @accent-color;
|
|
}
|
|
color: @text;
|
|
}
|
|
.FormativeStudentFooter__BottomDiv-sc-6tj89c-3 {
|
|
* {
|
|
color: @text;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.FormativeStudentHeader__NavStripDiv-sc-yw00ql-10 {
|
|
border-color: @overlay0;
|
|
background-color: @surface0 !important;
|
|
.FormativeProgressBarStyles__NavItemGroupDiv-sc-1rm72lt-2 {
|
|
border-color: @overlay0;
|
|
background-color: @surface0;
|
|
&:hover {
|
|
background-color: @surface1;
|
|
.formative-nav-item {
|
|
color: @accent-color;
|
|
i {
|
|
color: @accent-color;
|
|
}
|
|
&:hover {
|
|
background-color: @surface2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.formative-nav-item {
|
|
color: @text;
|
|
i {
|
|
color: @text;
|
|
}
|
|
&:hover {
|
|
background-color: @surface1;
|
|
color: @accent-color;
|
|
i {
|
|
color: @accent-color;
|
|
}
|
|
}
|
|
.FormativeStudentNavItem__IndicatorDiv-sc-i1u5ts-1 > svg > path {
|
|
stroke: @red !important;
|
|
}
|
|
.fVOfai {
|
|
background-color: @green;
|
|
}
|
|
.jiaclp {
|
|
background-color: @text;
|
|
}
|
|
.fqmSk {
|
|
background-color: @yellow;
|
|
}
|
|
.dxDbbP {
|
|
background-color: @red;
|
|
}
|
|
.dLppQA {
|
|
background-color: @peach;
|
|
}
|
|
}
|
|
}
|
|
.FormativeItemViewable__RootDiv-sc-m0kwch-0 {
|
|
background-color: @mantle;
|
|
border-color: @surface0;
|
|
.TextViewable__RootDiv-sc-ohojgu-0 {
|
|
* {
|
|
color: @text !important;
|
|
}
|
|
}
|
|
.Ellipse__RootButton-sc-684qlw-0 {
|
|
background-color: @surface0 !important;
|
|
color: @text !important;
|
|
}
|
|
.QuestionNumber__RootDiv-sc-zm7966-0 {
|
|
background-color: @surface0 !important;
|
|
border-color: @accent-color !important;
|
|
color: @text;
|
|
}
|
|
.withFunctionalizedViewable__RightColumn-sc-1636o2h-4 {
|
|
border-color: @surface0;
|
|
}
|
|
.Iframe__IframeContainer-sc-e1n6v2-2 {
|
|
border-color: @overlay1;
|
|
iframe {
|
|
border-color: @overlay1;
|
|
border-style: solid;
|
|
}
|
|
}
|
|
.Iframe__Footnote-sc-e1n6v2-1 {
|
|
color: @text;
|
|
}
|
|
&.question {
|
|
.FormativeItemViewable__HintsDiv-sc-m0kwch-7 {
|
|
label,
|
|
.FormativeItemViewable__HintDiv-sc-m0kwch-8 {
|
|
color: @text !important;
|
|
}
|
|
}
|
|
.QuestionViewable__QuestionNumberDiv-sc-13jvio2-3 {
|
|
color: @text;
|
|
}
|
|
.ItemInfoPill-sc-ecx83e-0,
|
|
.FormativeItemViewable__HintsRemainingCountDiv-sc-m0kwch-11 {
|
|
background-color: @surface0;
|
|
border-color: @overlay0;
|
|
color: @text;
|
|
&.fVzTTr > svg > path {
|
|
stroke: @red;
|
|
}
|
|
.ScorePill__ScoreDiv-sc-w63ftw-0 {
|
|
color: @text;
|
|
}
|
|
.ScoreCircle__RootDiv-sc-lj5glq-0 {
|
|
&[style*="rgb(32, 213, 171)"] {
|
|
background-color: @green !important;
|
|
}
|
|
&[style*="rgb(255, 222, 51)"] {
|
|
background-color: @yellow !important;
|
|
}
|
|
&[style*="rgb(255, 138, 51)"] {
|
|
background-color: @peach !important;
|
|
}
|
|
&[style*="rgb(255, 76, 77)"] {
|
|
background-color: @red !important;
|
|
}
|
|
}
|
|
}
|
|
.QuestionViewable__ContentDiv-sc-13jvio2-4 {
|
|
* {
|
|
color: @text !important;
|
|
} /* i'm not going to style each text element teachers can put in */
|
|
|
|
.ShortAnswerViewableDetails__InputAutosizeTextarea-sc-1ugk4gk-0 {
|
|
background-color: @surface0;
|
|
border-color: @overlay0;
|
|
}
|
|
.DragAndDropDropzoneOutput__RootDiv-sc-1is7exh-0 {
|
|
border-color: @overlay0;
|
|
background-color: @crust;
|
|
.DragAndDropDropzoneOutput__StyledIconButton-sc-1is7exh-6 {
|
|
background-color: @surface0;
|
|
border-color: @surface0;
|
|
}
|
|
}
|
|
.InlineChoiceOutput__BaseSelect-sc-1694w84-0 {
|
|
background-color: @surface0;
|
|
border-color: @overlay0;
|
|
}
|
|
.BlankOutput__FillableEntity-sc-15mzaww-1 {
|
|
background-color: @surface0;
|
|
outline-color: @overlay0;
|
|
}
|
|
.MatchingTable__RootDiv-sc-1rhxmvo-0 {
|
|
table {
|
|
tr,
|
|
td {
|
|
border-color: @overlay0;
|
|
outline-color: @accent-color;
|
|
}
|
|
background-color: @surface0;
|
|
.MatchingTableRow__ArrowIcon-sc-1u9h4tb-1.highlight {
|
|
background-color: @accent-color;
|
|
color: @contrast-accent-color !important;
|
|
}
|
|
.ChoiceElement__RootDiv-sc-1mbtxfk-1 {
|
|
&.highlight {
|
|
i {
|
|
background-color: @accent-color;
|
|
color: @contrast-accent-color !important;
|
|
}
|
|
}
|
|
background-color: @surface1;
|
|
border-radius: 8px;
|
|
& > button {
|
|
background-color: @surface1;
|
|
i,
|
|
.RichText__RootReadOnlyDiv-sc-fjolxt-1 {
|
|
background-color: transparent;
|
|
color: @text;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.CategorizeViewableContainer__FlexDiv-sc-1yo1jbo-2 {
|
|
.ChoiceElementViewable__RootDiv-sc-viwu2x-0 {
|
|
.RichText__RootReadOnlyDiv-sc-fjolxt-1 {
|
|
background-color: transparent;
|
|
}
|
|
border-color: @overlay0;
|
|
&:hover {
|
|
border-color: @accent-color;
|
|
}
|
|
&.highlight {
|
|
i {
|
|
background-color: @accent-color;
|
|
color: @contrast-accent-color !important;
|
|
}
|
|
}
|
|
}
|
|
.TargetElementViewable__BoxDiv-sc-1cp2mml-1 {
|
|
border-color: @overlay0;
|
|
background-color: @surface0;
|
|
.TargetElementViewable__AddSelectedChoiceButton-sc-1cp2mml-9 > i {
|
|
background-color: @accent-color;
|
|
color: @contrast-accent-color !important;
|
|
}
|
|
.TargetElementViewable__ChoiceDiv-sc-1cp2mml-4 {
|
|
background-color: @surface1;
|
|
border-color: @overlay1;
|
|
&.selected {
|
|
background-color: @accent-color;
|
|
* {
|
|
color: @contrast-accent-color !important;
|
|
}
|
|
}
|
|
.TargetElementViewable__StyledIconWarningButton-sc-1cp2mml-6 {
|
|
border-color: @overlay1;
|
|
&:hover {
|
|
background-color: @red;
|
|
i {
|
|
color: @contrast-accent-color !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.MatchTableGrid__RootDiv-sc-1ue3nun-0 {
|
|
table {
|
|
td,
|
|
th,
|
|
tr {
|
|
border-color: @overlay0;
|
|
}
|
|
th {
|
|
background-color: @surface1 !important;
|
|
}
|
|
td:first-child {
|
|
background-color: @surface1;
|
|
}
|
|
td {
|
|
background-color: @surface0;
|
|
}
|
|
button[role="checkbox"] {
|
|
background-color: @surface1;
|
|
border-color: @accent-color;
|
|
&[data-state="checked"] {
|
|
background-color: @accent-color;
|
|
i {
|
|
color: @contrast-accent-color !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.MultipleChoiceViewableDetails__RootDiv-sc-d82bbx-0,
|
|
.MultipleSelectionViewableDetails__RootDiv-sc-1b13xp6-0 {
|
|
.ChoiceOptionViewable__RootDiv-sc-a2vwy6-0 {
|
|
.checkbox-root {
|
|
button {
|
|
background-color: @surface0;
|
|
border-color: @accent-color;
|
|
.Checkbox__RadioCircleDiv-sc-1oy0ey9-3 {
|
|
background-color: @accent-color !important;
|
|
}
|
|
}
|
|
}
|
|
.ChoiceOptionViewable__RightSideDiv-sc-a2vwy6-2 {
|
|
border-color: @overlay0;
|
|
background-color: @surface0;
|
|
.ChoiceOptionViewable__StrickenOverlayDiv-sc-a2vwy6-7 {
|
|
background-image: repeating-linear-gradient(
|
|
315deg,
|
|
transparent,
|
|
transparent 16px,
|
|
@text 16px,
|
|
@text 18px
|
|
);
|
|
}
|
|
.IconButton__RootButton-sc-ebvofk-0 {
|
|
background-color: @surface1;
|
|
border-color: @accent-color;
|
|
i {
|
|
color: @text !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.DrawingContainerStudent__DrawingPreviewDiv-sc-en378l-0,
|
|
.QuestionViewableWithDrawing__RootDiv-sc-1kzyk7j-0 {
|
|
.DrawingCardButton__DrawingPreview-sc-u2qprg-3 {
|
|
background-color: white;
|
|
border-radius: 6px;
|
|
}
|
|
button {
|
|
border-color: @overlay0 !important;
|
|
}
|
|
.DrawingCardButton__HoverDarkScrim-sc-u2qprg-2 {
|
|
background-color: @surface0;
|
|
}
|
|
.DrawingCardButton__ShowYourWorkPseudoButtonDiv-sc-u2qprg-0 {
|
|
border-color: @overlay1;
|
|
background-color: @surface1;
|
|
}
|
|
}
|
|
.GraphViewableDetails__RootDiv-sc-13yx2r4-0 {
|
|
.ExpandableAccordionHeader__RootButton-sc-cu02pz-0 {
|
|
background-color: transparent;
|
|
}
|
|
.GraphViewableDetails__TabRowDiv-sc-13yx2r4-1 {
|
|
.Tabs__RootDiv-sc-2v0c2x-0 {
|
|
border-color: @surface1;
|
|
.TabsItem__TabDiv-sc-tj1og8-4 {
|
|
background-color: @mantle !important;
|
|
}
|
|
.TabsItem__StyledTitleDiv-sc-tj1og8-2 {
|
|
color: @text;
|
|
}
|
|
.TabsItem__SelectedLineDiv-sc-tj1og8-1 {
|
|
background-color: @accent-color !important;
|
|
}
|
|
}
|
|
}
|
|
.GraphViewableDetails__GraphContainerDiv-sc-13yx2r4-3 > div {
|
|
background-color: white;
|
|
.sc-fqkvVR {
|
|
* {
|
|
color: black !important;
|
|
}
|
|
}
|
|
}
|
|
.VerticalButton__StyledButton-sc-1h2we7r-2:hover
|
|
.VerticalButton__IconDiv-sc-1h2we7r-0 {
|
|
background-color: @surface0;
|
|
}
|
|
}
|
|
.BlankOutput__FillableNumericDiv-sc-15mzaww-0 {
|
|
background-color: @surface0;
|
|
outline-color: @overlay0;
|
|
&.filling {
|
|
outline-color: @accent-color;
|
|
}
|
|
}
|
|
.ResequenceViewableDetailsContainer__AnswerList-sc-s5awz8-0 {
|
|
.ResequenceCard__ListItemContentDiv-sc-30eibj-1,
|
|
li {
|
|
background-color: @surface0 !important;
|
|
border-color: @overlay0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.FullPointsAnimation__AbsoluteContainerDiv-sc-mzm76r-0,
|
|
.ScoreCircle__LottieWrapperDiv-sc-lj5glq-1 {
|
|
svg {
|
|
path[fill="rgb(32,213,171)"] {
|
|
fill: @green !important;
|
|
}
|
|
path[fill="rgb(255,138,51)"] {
|
|
fill: @peach !important;
|
|
}
|
|
path[fill="rgb(255,222,51)"] {
|
|
fill: @yellow !important;
|
|
}
|
|
path[fill="rgb(255,76,77)"] {
|
|
fill: @red !important;
|
|
}
|
|
path[fill="rgb(255,255,255)"] {
|
|
fill: @contrast-accent-color !important;
|
|
}
|
|
path[fill="rgb(242,242,242)"] {
|
|
fill: @contrast-accent-color !important;
|
|
}
|
|
path[fill="rgb(32,213,171)"] {
|
|
fill: @teal !important;
|
|
}
|
|
path[stroke="rgb(32,213,171)"] {
|
|
stroke: @green !important;
|
|
}
|
|
path[stroke="rgb(255,138,51)"] {
|
|
stroke: @peach !important;
|
|
}
|
|
path[stroke="rgb(255,222,51)"] {
|
|
stroke: @yellow !important;
|
|
}
|
|
path[stroke="rgb(255,76,77)"] {
|
|
stroke: @red !important;
|
|
}
|
|
path[stroke="rgb(255,255,255)"] {
|
|
stroke: @contrast-accent-color !important;
|
|
}
|
|
path[stroke="rgb(242,242,242)"] {
|
|
stroke: @contrast-accent-color !important;
|
|
}
|
|
path[stroke="rgb(32,213,171)"] {
|
|
stroke: @teal !important;
|
|
}
|
|
}
|
|
}
|
|
.css-1vamqze {
|
|
background-color: @surface0;
|
|
color: @text;
|
|
.css-18fumqt-option {
|
|
background-color: @surface1;
|
|
}
|
|
.css-1pfbc1f-option {
|
|
background-color: @accent-color;
|
|
color: @contrast-accent-color;
|
|
}
|
|
}
|
|
.fHrrVC > svg > path {
|
|
fill: @text !important;
|
|
}
|
|
.FormativeItemViewable__FeedbackMessagesListDiv-sc-m0kwch-1 {
|
|
.FeedbackMessagesList__MessagesListDiv-sc-9o5dsw-0 {
|
|
background-color: @overlay0;
|
|
.jZwCGj {
|
|
color: @text;
|
|
}
|
|
}
|
|
.FeedbackMessageComposer__RootDiv-sc-vs8711-0 {
|
|
border-color: @overlay2;
|
|
.FeedbackMessageComposer__RichTextContainerDiv-sc-vs8711-3 {
|
|
border-color: @overlay2;
|
|
.public-DraftEditorPlaceholder-inner {
|
|
color: @subtext1;
|
|
}
|
|
.public-DraftEditor-content {
|
|
color: @text !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.hxNLul > svg > path {
|
|
fill: @accent-color !important;
|
|
}
|
|
.ejr02pv {
|
|
.e16zneum {
|
|
color: @text;
|
|
}
|
|
background-color: @surface2;
|
|
}
|
|
.MathLiveInput__RootDiv-sc-2fx8pp-0 {
|
|
background-color: @surface0;
|
|
border-color: @overlay0;
|
|
&:focus-within,
|
|
&:hover {
|
|
border-color: @accent-color;
|
|
}
|
|
.MathLiveInput__KeyboardButtonWrapper-sc-2fx8pp-1 svg > path {
|
|
fill: @accent-color !important;
|
|
}
|
|
.ML__keyboard--plate {
|
|
border-color: @overlay0 !important;
|
|
background-color: @surface0 !important;
|
|
.rows .keycap {
|
|
background-color: @surface1;
|
|
border-color: @overlay0;
|
|
&:hover {
|
|
background-color: @surface2;
|
|
}
|
|
}
|
|
.keyboard-toolbar {
|
|
.left > div.selected {
|
|
border-color: @accent-color;
|
|
}
|
|
[data-tooltip]:after {
|
|
background: @overlay0;
|
|
color: @text;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ExpandedDrawing__BodyDiv-sc-cz2rcw-0 {
|
|
.DrawingSidebar__RootDiv-sc-1hvcy70-3 {
|
|
.DrawingSidebar__ExpandedAnswerDiv-sc-1hvcy70-0 {
|
|
background-color: @base;
|
|
.FormativeItemViewable__RootDiv-sc-m0kwch-0 {
|
|
background-color: @base;
|
|
}
|
|
}
|
|
}
|
|
.DrawingSidebar__SidebarTopExplainer-sc-1hvcy70-1 {
|
|
background-color: @mantle;
|
|
color: @text;
|
|
border-color: @overlay0;
|
|
.DrawingSidebar__StyledIcon-sc-1hvcy70-5 {
|
|
color: @text;
|
|
}
|
|
}
|
|
.DrawingToolbar__RootDiv-sc-2xuxy3-0 {
|
|
background-color: @surface0;
|
|
.DrawingToolbar__ToolDiv-sc-2xuxy3-3 {
|
|
background-color: @surface0;
|
|
&::after {
|
|
background-color: @accent-color;
|
|
}
|
|
&:hover {
|
|
color: @accent-color;
|
|
}
|
|
.ToolDropdownTriggerDiv-sc-16usko2-0:hover {
|
|
color: @accent-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.StrokePicker__InnerDiv-sc-8widgm-4 {
|
|
label {
|
|
color: @text;
|
|
}
|
|
.StrokeWidthPickerContent__ListItemDiv-sc-116c7dc-0 {
|
|
&:hover {
|
|
.StrokeWidthPickerContent__CircleDiv-sc-116c7dc-1 {
|
|
background-color: @accent-color;
|
|
}
|
|
}
|
|
.StrokeWidthPickerContent__CircleDiv-sc-116c7dc-1.active {
|
|
background-color: @accent-color;
|
|
}
|
|
}
|
|
.slider {
|
|
background: linear-gradient(to right, rgba(0, 0, 0, 0), @text);
|
|
}
|
|
.Button__StyledButton-sc-aum9f1-1 {
|
|
background-color: @surface1;
|
|
}
|
|
.Checkbox__RootDiv-sc-1oy0ey9-0 {
|
|
button[role="checkbox"] {
|
|
border-color: @accent-color;
|
|
&[aria-checked="true"] {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} /* /@-moz-document */
|