8cd5bdba2f
* feat: add formative port * fix(github) - Fixed a lot of missing UI changes and adjusted some existing changes (#173) * So many changes * Fixed issues with new repo overview * fixed githubs wrong styling hehe * border color fixes (hopefully) * text edit ui fix * fix(substack): podcast background color (#175) * ci: automatically sync maintainers in the team (#174) Co-authored-by: winston <hey@winston.sh --------- Co-authored-by: soradotwav <84683510+soradotwav@users.noreply.github.com> Co-authored-by: winston <hey@winston.sh> Co-authored-by: rubyowo <perhaps-you-know@what-is.ml> Co-authored-by: Hamothy <58985301+sgoudham@users.noreply.github.com>
966 lines
34 KiB
CSS
966 lines
34 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 */
|