/* ==UserStyle==
@name Formative Catppuccin
@namespace github.com/catppuccin/userstyles/styles/formative
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/formative
@version 2024.12.31
@updateURL https://github.com/keonly/userstyles/raw/main/styles/formative/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aformative
@description Soothing pastel theme for Formative
@author Catppuccin
@license MIT
@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select darkFlavor "Dark 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"), domain("goformative.com") {
:root {
@media (prefers-color-scheme: light) {
#catppuccin(@lightFlavor);
}
@media (prefers-color-scheme: dark) {
#catppuccin(@darkFlavor);
}
}
#catppuccin(@flavor) {
@rosewater: @catppuccin[@@flavor][@rosewater];
@flamingo: @catppuccin[@@flavor][@flamingo];
@pink: @catppuccin[@@flavor][@pink];
@mauve: @catppuccin[@@flavor][@mauve];
@red: @catppuccin[@@flavor][@red];
@maroon: @catppuccin[@@flavor][@maroon];
@peach: @catppuccin[@@flavor][@peach];
@yellow: @catppuccin[@@flavor][@yellow];
@green: @catppuccin[@@flavor][@green];
@teal: @catppuccin[@@flavor][@teal];
@sky: @catppuccin[@@flavor][@sky];
@sapphire: @catppuccin[@@flavor][@sapphire];
@blue: @catppuccin[@@flavor][@blue];
@lavender: @catppuccin[@@flavor][@lavender];
@text: @catppuccin[@@flavor][@text];
@subtext1: @catppuccin[@@flavor][@subtext1];
@subtext0: @catppuccin[@@flavor][@subtext0];
@overlay2: @catppuccin[@@flavor][@overlay2];
@overlay1: @catppuccin[@@flavor][@overlay1];
@overlay0: @catppuccin[@@flavor][@overlay0];
@surface2: @catppuccin[@@flavor][@surface2];
@surface1: @catppuccin[@@flavor][@surface1];
@surface0: @catppuccin[@@flavor][@surface0];
@base: @catppuccin[@@flavor][@base];
@mantle: @catppuccin[@@flavor][@mantle];
@crust: @catppuccin[@@flavor][@crust];
@accent: @catppuccin[@@flavor][@@accentColor];
@contrast: if(@flavor = latte, @text, @base);
color-scheme: if(@flavor = latte, light, dark);
::selection {
background-color: fade(@accent, 30%);
}
input,
textarea {
&::placeholder {
color: @subtext0 !important;
}
border-color: @overlay0;
color: @text;
}
.input {
border-color: @overlay0;
}
.MainAppSideMenu__LogoLink-sc-11gwnv8-2,
.MainAppHeader__LogoLink-sc-1gw0bt9-2,
.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;
}
}
}
background: @base;
body {
color: @text;
}
hr {
border-color: @overlay0 !important;
}
.MainAppSideMenu__RootNav-sc-11gwnv8-0 {
background: @surface0;
.SideTabItem__RootButton-sc-vtkzgr-0 {
&.selected {
background: fade(@accent, 50%);
&::after {
background: @accent;
}
}
&:hover {
.avatar {
box-shadow: @accent 0 0 0 1px;
}
}
&:not(.selected):hover {
.side-tab-item-label-div,
.material-icons-outlined,
.svg-icons svg {
color: @accent;
}
}
}
.side-tab-item-label-div,
.material-icons-outlined,
.svg-icons {
color: @text;
}
}
.notifications-count {
background: @accent;
color: @contrast;
}
.NotificationCenterAlert__TriggerDiv-sc-165xmi4-0 {
background-color: @surface0;
.material-icons-outlined {
color: @text;
}
}
.avatar:hover {
box-shadow: @accent 0 0 0 1px;
}
.MainAppHeader__RootDiv-sc-1gw0bt9-0 {
background-color: @surface0;
}
.SecondaryHeader__RootDiv-sc-1lpafq7-0 {
background: @surface0;
border-color: @overlay0;
.TabsItem__RootDiv-sc-tj1og8-0 > a {
color: @text;
}
.TabsItem__RootDiv-sc-tj1og8-0:hover > a {
color: @accent;
}
.TabsItem__SelectedLineDiv-sc-tj1og8-1 {
background: @accent !important;
}
.TabsItem__TabLink-sc-tj1og8-3:focus-visible {
background: transparent !important;
}
}
main,
.FormativesShelf__HeaderDiv-sc-1pswvpk-3,
.FormativesShelf__StyledSecondaryHeader-sc-1pswvpk-4,
.TabsItem__TabDiv-sc-tj1og8-4:focus-visible {
background: @base;
}
.Home__TitleSpan-sc-q7a345-5,
.ClassesShelf__TitleSpan-sc-1ews12o-2,
.TabsItem__TabDiv-sc-tj1og8-4,
.OverflowEllipsis__RootDiv-sc-1mjk6uz-0,
.Label-sc-rzlz3u-0,
.Text-sc-1mon9hz-0,
.ProfileAccountInfo__BaseDiv-sc-1nbrrm9-0,
.Achievements__StyledHeading-sc-nmy2km-2,
.Achievements__StyledSubHeading-sc-nmy2km-3,
.BadgeCard__BadgeLabelDiv-sc-13976oo-8,
.BadgeCard__BadgeDescriptionDiv-sc-13976oo-9,
.EmptyExplainer__EmptyExplainerMainText-sc-1ixiesy-2,
.EmptyExplainer__EmptyExplainerSubtext-sc-1ixiesy-3,
.LabelledDropdownList__StyledLabel-sc-co7v7a-1,
.BadgeSidebar__BadgeLabelDiv-sc-oi03p1-3,
.BadgeSidebar__BadgeDescriptionDiv-sc-oi03p1-4,
.BadgeSidebar__ChallengeProgressStatusDiv-sc-oi03p1-8,
.BadgeSidebar__ChallengeProgressFractionDiv-sc-oi03p1-9,
.BadgeSidebar__LevelDescriptionDiv-sc-oi03p1-13,
.BadgeSidebar__AchievedOnDiv-sc-oi03p1-14,
.QuestionNotificationRow__NameP-sc-f7ccw5-7,
.QuestionNotificationRow__StyledTimeAgo-sc-f7ccw5-8,
.TextViewable__RootDiv-sc-ohojgu-0,
.ScorePill__ScoreDiv-sc-w63ftw-0,
.QuestionViewable__QuestionTextRichTextWrapperDiv-sc-13jvio2-1,
.QuestionViewable__QuestionNumberDiv-sc-13jvio2-3,
.FormativeStudentFooter__ProgressCountDiv-sc-6tj89c-1,
.FormativeStudentFooter__SubTextDiv-sc-6tj89c-5,
.FormativesShelf__ShowScoresText-sc-1pswvpk-6,
.ModalBody__RootDiv-sc-1lg094f-0,
.Elements__Title-sc-1qtb2ho-9,
.JoinQuickCode__QuickCodeTextParagraph-sc-1uhfett-1,
.CallToActionLink__ActionText-sc-yuiy65-1,
.Checkbox__CheckboxLabel-sc-1oy0ey9-4,
.ModalTitle__TitleH4-sc-18cspoj-1,
.FormativeItemViewable__HintDiv-sc-m0kwch-8,
.NoFormatives__HeadingDiv-sc-1v9g5eg-1,
.NoFormatives__BodyP-sc-1v9g5eg-2,
.DragAndDropViewableContainer__InstructionsDiv-sc-1ke293x-0,
.QuestionViewable__CorrectAnswerLabelDiv-sc-13jvio2-7,
.MatchingTableRow__ArrowIcon-sc-1u9h4tb-1,
.PracticeSet__StyledLastUpdated-sc-1wup6tb-9,
.MaterialIcon-sc-1g5xoi8-0,
.MinimalFormativeStudentHeader__FormativeTitleDiv-sc-14rcnaq-4,
.ErrorExplainer__SubTextHeading-sc-7nq4if-2,
.ErrorExplainer__MainTextHeading-sc-7nq4if-1,
.ErrorExplainer__TechnicalDetailsHeading-sc-7nq4if-3,
.ErrorExplainer__ErrorIdParagraph-sc-7nq4if-4,
.TeacherPacedStart__DetailsDiv-sc-1f4f5sd-4,
.Elements__SubText-sc-1qtb2ho-11,
.RichText__RootReadOnlyDiv-sc-fjolxt-1 *,
.ValidatedInputNew__InputPrefixSpan-sc-18vdili-3,
.LaunchRespondusBrowser__MainTextHeading-sc-1ymzzc2-5,
.LaunchRespondusBrowser__DetailsParagraph-sc-1ymzzc2-4,
.PracticeSession__PopoverContentDiv-sc-1t2vn9a-4,
.ExpandableAccordionHeader__HeaderRow-sc-cu02pz-1,
.VerticalButton__StyledSpan-sc-1h2we7r-1,
.ShelfTile__LabelDiv-sc-1oc4c00-3,
.PracticeSet__AddItemCardContents-sc-1wup6tb-10 {
color: @text;
}
.TabsItem__TabDiv-sc-tj1og8-4:hover,
.RespondusTroubleshootLink__TroubleshootingAnchor-sc-17na5u4-7,
.Summary__RawButtonLink-sc-1ofq6fd-2 {
color: @accent;
}
.FormativesShelf__StyledSecondaryHeader-sc-1pswvpk-4 {
border-color: @overlay0;
}
.TabsItem__SelectedLineDiv-sc-tj1og8-1 {
background: @accent !important;
}
.Pill__RootDiv-sc-4b6mpn-0,
.ItemInfoPill-sc-ecx83e-0,
.FormativeItemViewable__HintsRemainingCountDiv-sc-m0kwch-11,
.IconWarningButton__RootButton-sc-1b683n6-0,
.Ellipse__RootButton-sc-1teidw7-0 {
&.IconWarningButton__RootButton-sc-1b683n6-0:hover {
border-color: @red;
}
> svg[width="16"] {
path {
stroke: @red;
}
}
&,
.material-icons-outlined {
color: @text !important;
}
background: @surface2 !important;
border-color: @overlay0;
}
.Card__RootDiv-sc-hyrluv-0,
.Card__RootDiv-sc-4gt2nj-0 {
background: @surface0;
border-color: @overlay0;
&.selected {
border-color: @accent;
outline-color: @accent;
}
.material-icons-outlined {
color: @text;
}
&:hover {
.FormativeCard__TitleOverflowEllipsis-sc-tkxjaz-7,
.SectionCard__SectionTitleOverflowEllipsis-sc-ir1v2v-4 {
color: @accent;
}
}
}
.ClassAvatar__RootDiv-sc-i7tto7-0,
.avatar > div {
background: @accent;
color: @contrast;
}
.ReactSelect__control {
background: @surface0;
border-color: @overlay0;
.ReactSelect__placeholder {
color: @subtext0;
}
.ReactSelect__indicator,
.ReactSelect__single-value,
.ReactSelect__input-container {
color: @text;
}
&:focus-within {
border-color: @accent !important;
}
}
.react-select-icon {
color: @text;
}
.ReactSelect__menu {
background: @surface2 !important;
color: @text;
.SearchBarOption__RootLink-sc-191bb28-1:hover
.SearchBarOption__TitleOverflowEllipsis-sc-191bb28-0 {
color: @accent;
}
.ReactSelect__option--is-focused {
background: @overlay0;
}
.ReactSelect__option--is-selected {
background: @accent;
color: @contrast;
}
.ReactSelect__menu-notice {
color: @subtext0;
}
}
.ClassesShelfContainer__StyledButton-sc-zx4vft-0 .material-icons-outlined {
color: @text;
}
.Button__StyledButton-sc-aum9f1-1,
.IconButton__RootButton-sc-ebvofk-0,
.SectionDetail__BackLink-sc-1aifgaj-4 {
background: @surface0 !important;
&,
.material-icons-outlined {
color: @accent !important;
border-color: @overlay0;
}
&:hover,
&:enabled:focus {
background: @surface1;
border-color: @accent;
}
}
.Switch__RootButton-sc-1ss5zxi-0 {
background: @surface0;
&[aria-checked="true"] {
background: @accent;
}
.Switch__BallDiv-sc-1ss5zxi-1 {
background: @overlay0;
}
}
.ButtonSwitch__RootDiv-sc-1cluxwg-0 {
background: @surface1;
.ButtonSwitchOption__RootDiv-sc-ek1jm8-0 {
&.selected {
background: @surface2;
}
color: @text;
}
}
.FormativeCardScore__PercentageSpan-sc-p5mc30-1 {
&[style*="rgba(32, 213, 171, 0.2)"] {
background: fade(@green, 50%) !important;
}
&[style*="rgba(255, 222, 51, 0.2)"] {
background: fade(@yellow, 50%) !important;
}
&[style*="rgba(0, 165, 251, 0.2)"] {
background: fade(@blue, 50%) !important;
}
&[style*="rgba(255, 76, 77, 0.2)"] {
background: fade(@red, 50%) !important;
}
}
.Dropdown__PopoverContent-sc-1s7u5eb-2,
.Popover__PopoverContent-sc-1x169li-4 {
background: @surface2;
.DropdownRow__RowButton-sc-1bu6csb-0 {
background: @surface2;
border-color: @overlay2;
&,
.dropdown-list-icon,
.material-icons-outlined {
color: @text !important;
svg path {
fill: @text !important;
}
}
&:hover {
background: @overlay0 !important;
color: @text !important;
}
}
.Dropdown__PopoverArrow-sc-1s7u5eb-1,
.Popover__PopoverArrow-sc-1x169li-3 {
fill: @surface2;
}
.StrokePicker__InnerDiv-sc-8widgm-4 {
background: @surface2;
}
}
.DropdownList__TriggerButton-sc-1hvvmg1-0,
.EmptyExplainer__StyledMaterialIcon-sc-1ixiesy-4 {
color: @accent;
}
.ProfileAccountInfo__DashedGroup-sc-1nbrrm9-2 {
border-color: @overlay0;
}
.BadgeCard__RootButton-sc-13976oo-0 {
&:hover,
&:focus,
&.selected {
.BadgeCard__BadgeLabelDiv-sc-13976oo-8 {
color: @accent;
}
.Card__RootDiv-sc-4gt2nj-0 {
border-color: @accent;
}
}
.BadgeCard__ProgressPercentSpan-sc-13976oo-7 {
color: @text;
}
}
.BadgeSidebar__RootDiv-sc-oi03p1-0 {
background: @surface0;
.SvgIconWrapper__SvgIconDiv-sc-1u203y2-0 {
svg path {
fill: @text;
}
&:hover {
background: @surface1;
}
}
.BadgeSidebar__ChallengeLevelsDiv-sc-oi03p1-10 {
border-color: @overlay0;
}
}
.BadgeCard__BadgeImage-sc-13976oo-5,
.BadgeSidebar__BadgeImage-sc-oi03p1-2 {
&[src*="responses"] {
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
&[src*="formatives-assigned-submitted"] {
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
}
.ProgressBar__ProgressDiv-sc-4qm1te-0 {
background: @overlay0;
.ProgressBar__ProgressBarDiv-sc-4qm1te-2 {
background: @accent;
}
}
.notification {
&.notification-success {
background: @green !important;
color: @contrast !important;
}
}
.Tooltip__Content-sc-1k6bq57-0 {
background: @surface0;
color: @text;
.Tooltip__KeyboardShortcutContainerDiv-sc-1k6bq57-1 {
background: @surface1;
color: @text;
}
}
.Modal__Overlay-sc-1uf7odj-0 {
background: fade(@crust, 80%);
}
.Modal__Content-sc-1uf7odj-1 {
background: @base;
.modal-header,
.modal-footer {
border-color: @overlay0 !important;
}
.ModalHeader__Title-sc-1aoz840-1 {
color: @text;
}
.modal-footer {
background: @base;
}
.ModalHeader__CloseButton-sc-1aoz840-2 {
border-color: @overlay0;
background: @surface0;
&:enabled:hover {
background: @surface1 !important;
border-color: @accent;
}
}
.CopyablePracticeSetInfo__LinkText-sc-14zdsnw-3,
.CopyablePracticeSetInfo__ExplainerDiv-sc-14zdsnw-5 {
background: @surface0;
}
.ThemePreview__PrimaryColorDiv-sc-zh51j9-0[style*="outline"] {
&[style*="outline: rgb(255, 255, 255)"] {
outline-color: @text !important;
}
&[style*="outline: rgb(13, 100, 242)"] {
outline-color: @accent !important;
}
}
}
.ReactModal__Overlay {
background: fade(@crust, 80%);
.ReactModal__ActualContent {
background: @base !important;
.ModalBody-sc-1lg094f-0 > * {
color: @text !important;
&.ErrorExplainer__BodyDiv-sc-7nq4if-0 {
.material-icons-outlined {
color: @red;
}
.ErrorExplainer__TechnicalDetailsHeading-sc-7nq4if-3,
.ErrorExplainer__ErrorIdParagraph-sc-7nq4if-4 {
color: @subtext0;
}
}
&.Input__StyledInput-sc-1632reg-0 {
background: @surface0 !important;
&::placeholder {
color: @overlay2 !important;
}
&:focus {
border-color: @accent;
}
}
&.CookiePolicyModal__AccordionDiv-sc-dpnzx7-0
.AccordionItem__ContainerDiv-sc-1aj05j4-0 {
&,
.AccordionItem__HeaderDiv-sc-1aj05j4-1,
.AccordionItem__BodyDiv-sc-1aj05j4-5 {
background: @surface0;
border-color: @overlay0;
}
.material-icons-outlined {
color: @text;
}
.CookiePolicyModal__BlueAlertText-sc-dpnzx7-5 {
color: @accent;
}
}
}
.ModalBody-sc-1lg094f-0:has(.Submit__ContentTitleH3-sc-1vceatk-1)
svg
path {
fill: @accent;
}
.ModalTitle {
background: @base;
}
.PracticeDispatchModalOptionLink__RootLink-sc-1wp7oro-0 {
background: @surface1 !important;
img {
&[src*="flashcard-preview"] {
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
&[src*="match-preview"] {
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
&[src*="quiz-preview"] {
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
}
}
}
}
.NotificationCenterAlertListContainer__RootDiv-sc-1kyy25p-0 {
background: @surface2;
.FormativeNotificationsCard__HeaderDiv-sc-fv5hu9-1,
.QuestionNotificationRow__IndentedBorderDiv-sc-f7ccw5-1,
.QuestionNotificationRow__RootDiv-sc-f7ccw5-0 {
border-color: @overlay2;
}
.FormativeNotificationsCard__RootDiv-sc-fv5hu9-0 {
background: @surface2;
border-color: @overlay2;
&:hover {
background: @overlay0;
}
}
.QuestionNotificationRow__RootDiv-sc-f7ccw5-0:hover {
background: transparent;
}
.material-icons-outlined {
color: @text;
&:hover {
color: @accent;
}
}
}
.SectionCard__InactiveSectionIcon-sc-ir1v2v-3 {
svg {
path:nth-child(1) {
fill: @overlay0 !important;
}
path:nth-child(2),
path:nth-child(3) {
fill: @text !important;
}
}
}
.SectionDetail__Header-sc-1aifgaj-2 {
background: transparent;
}
.FormativeStudentHeader__UpperDiv-sc-yw00ql-12 {
background: @crust !important;
color: @text;
&,
.FormativeStudentHeader__InfoItem-sc-yw00ql-7 {
border-color: @overlay0;
}
}
.FormativeStudentHeader__NavStrip-sc-yw00ql-11 {
.FormativeStudentHeader__ScrollableDiv-sc-yw00ql-9 {
&::-webkit-scrollbar-track {
background: @surface0 !important;
border-color: @surface0 !important;
}
&::-webkit-scrollbar-thumb {
background: @overlay0 !important;
border-color: @overlay0 !important;
}
}
background: @mantle;
border-color: @overlay0;
.selectedSection {
border-color: @accent;
}
.formative-nav-item {
&,
.formative-nav-item-icon {
color: @text;
}
.FormativeStudentNavItem__StyledMessageIcon-sc-i1u5ts-4 {
color: @accent;
}
&:hover,
&:focus {
background: @surface1;
color: @accent;
border-color: @accent;
}
.fxpwVv {
background-color: @green;
}
.hSVaRB {
background-color: @text;
}
.kBznqt {
background-color: @yellow;
}
.hfnlVy {
background-color: @red;
}
.bDcnFV {
background-color: @peach;
}
svg {
path {
stroke: @red;
}
}
}
}
.checkbox-root {
button {
background: @surface0;
border-color: @accent !important;
box-shadow: none !important;
}
&.checked button {
background: @accent !important;
}
.Checkbox__RadioCircleDiv-sc-1oy0ey9-3 {
background: @contrast !important;
}
.Checkbox__IndicatorIcon-sc-1oy0ey9-5 {
color: @contrast;
}
}
.FormativeUnavailableMessage__InnerDiv-sc-14kxg7t-1 {
border-color: @accent;
background-color: @surface0;
}
.FormativeItemViewable__RootDiv-sc-m0kwch-0,
.SectionDescription__SectionInformationCard-sc-nmaua7-0 {
background: @mantle;
.correct {
outline-color: @green !important;
background: color-mix(in srgb, @base, @green 25%) !important;
}
.incorrect {
outline-color: @red !important;
background: color-mix(in srgb, @base, @red 25%) !important;
}
&,
.withFunctionalizedViewable__LeftColumn-sc-1636o2h-2,
.withFunctionalizedViewable__RightColumn-sc-1636o2h-4 {
border-color: @overlay0;
}
.SectionDescription__DividerDiv-sc-nmaua7-1 {
border-color: @overlay0;
}
.ScoreCircle__RootDiv-sc-lj5glq-0 {
&[style*="rgb(32, 213, 171)"] {
background-color: @green !important;
.material-icons-outlined {
color: @contrast !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;
.material-icons-outlined {
color: @contrast !important;
}
}
border-color: @overlay2 !important;
}
.BlankOutput__FillableEntity-sc-15mzaww-3,
.BlankOutput__FillableNumericDiv-sc-15mzaww-2 {
outline-color: @accent;
color: @text;
background: @surface0;
.KatexOutput__RootDiv-sc-gu2jna-0 {
[style*="color: rgb(204, 0, 0)"] {
color: @red !important;
}
}
}
.match-table-grid-container table {
th,
tr,
td {
background: @surface0 !important;
border-color: @overlay0;
.checkbox-root button {
background: @surface1;
}
}
}
.TargetElementViewable__BoxDiv-sc-1cp2mml-1 {
background: @surface0;
border-color: @accent;
.TargetChoiceViewable__ContentDiv-sc-6nylj9-1 {
background: @surface1;
border-color: @overlay0;
}
.TargetElementViewable__AddSelectedChoiceButton-sc-1cp2mml-6 i {
background: @accent;
color: @contrast;
}
}
.MatchingTable__Table-sc-1rhxmvo-1 {
&,
td,
tr {
border-color: @overlay0;
}
tr.isOver {
outline-color: @accent;
}
}
.ChoiceElementViewable__RootDiv-sc-viwu2x-0 {
background: @surface0;
border-color: @overlay0;
&:hover,
&.highlight {
border-color: @accent;
background: @surface1;
}
.ChoiceElementViewable__LabelRichText-sc-viwu2x-4 {
background: transparent;
color: @text;
}
.Button__StyledButton-sc-aum9f1-1,
i {
background: transparent !important;
}
}
.ChoiceElement__RootDiv-sc-1mbtxfk-1 {
background: transparent;
}
.ChoiceElement__StyledRawButton-sc-1mbtxfk-0 {
.ChoiceElement__LabelRichText-sc-1mbtxfk-3,
.material-icons-outlined {
background: transparent;
}
}
.ChoiceOptionViewable__RightSideDiv-sc-a2vwy6-2 {
border-color: @overlay0;
.ChoiceOptionViewable__StrickenOverlayDiv-sc-a2vwy6-7 {
background-image: repeating-linear-gradient(
315deg,
transparent,
transparent 16px,
@text 16px,
@text 18px
);
}
}
.InlineChoiceOutput__InlineChoiceOutputDiv-sc-1694w84-2 {
background: @surface0;
border-color: @accent;
}
.DrawingCardButton__RootButton-sc-u2qprg-1 {
border-color: @overlay0;
.DrawingCardButton__DrawingPreview-sc-u2qprg-3 {
background: rgb(245, 246, 248);
}
.DrawingCardButton__HoverDarkScrim-sc-u2qprg-2 {
background: fade(@crust, 75%);
border-radius: 0;
}
.DrawingCardButton__ShowYourWorkPseudoButtonDiv-sc-u2qprg-0 {
border-color: @overlay0;
color: @text;
background: @base;
}
.DrawingCardButton__IncompleteIndicatorDiv-sc-u2qprg-4 {
background: @yellow;
svg path {
fill: @contrast;
}
}
&:hover .DrawingCardButton__ShowYourWorkPseudoButtonDiv-sc-u2qprg-0 {
background: @surface2;
border-color: @accent;
}
}
.DragAndDropImageDropLocation__DropLocationContainerDiv-sc-oq3fcx-1 {
&:hover {
.DragAndDropImageDropLocationPoint-sc-1v0z50f-0 {
background: @surface1;
border-color: @surface1;
}
.dropzone-tip::before {
background: @surface1;
}
}
.DragAndDropImageDropLocationPoint-sc-1v0z50f-0 {
background: @surface0;
border-color: @surface0;
}
.dropzone-tip::before {
background: @surface0;
}
.isOver .dropzone {
background: @surface1;
.dropzone-number {
background: @surface2 !important;
}
}
.dropzone {
&:hover,
&.selected {
background: @surface1;
.dropzone-number {
background: @surface2 !important;
}
}
border-color: @accent !important;
background: @surface0;
.dropzone-number {
background: @surface1;
}
}
}
.DragAndDropChoice__RootDiv-sc-1wzeg1h-3 {
background: @surface0;
border-color: @overlay0;
.Button__StyledButton-sc-aum9f1-1,
.DragAndDropChoice__DragIcon-sc-1wzeg1h-1 {
background: transparent;
}
&.selected {
background: @surface1;
}
}
.DragAndDropDropzoneOutput__RootDiv-sc-1is7exh-0 {
background: @surface0;
border-color: @accent;
&.hasAnswer {
border-color: @overlay0;
}
}
.AnswerCorrectnessIndicator__CircleDiv-sc-18hnk99-1 {
&.correct {
background: @green;
}
.material-icons-outlined {
color: @contrast;
}
}
.ShortAnswerViewableDetails__InputAutosizeTextarea-sc-1ugk4gk-0 {
background: @surface0;
border-color: @overlay0;
color: @text;
}
.ExpandableAccordionHeader__RootButton-sc-cu02pz-0 {
background: transparent;
}
.GraphViewableDetails__GraphAndControlsDiv-sc-13yx2r4-2 {
.VerticalButton__StyledButton-sc-1h2we7r-2 {
&:disabled {
i,
span {
color: @subtext0;
}
}
&:not(:disabled):hover,
&:not(:disabled):focus-within {
div {
background: @surface0;
}
span {
color: @accent;
}
}
}
.Graph__ContainerDiv-sc-1y56z00-0 {
border-color: @overlay0;
background: @surface0;
svg {
line[stroke="rgb(4,28,68)"],
marker[stroke="rgb(4,28,68)"] {
fill: @subtext1;
stroke: @subtext1;
}
path[stroke="rgb(80,95,121)"] {
fill: @subtext0;
stroke: @subtext0;
}
path[stroke="rgb(192,197,207)"] {
fill: @overlay0;
stroke: @overlay0;
}
path[stroke="rgb(13,100,242)"] {
stroke: @blue;
fill: @blue;
}
text {
stroke: @surface0 !important;
fill: @text;
}
ellipse[fill="rgb(13,100,242)"] {
stroke: @surface0;
fill: @blue;
}
}
.Coords__CoordsDiv-sc-1fj077e-1 {
background: @surface2;
}
}
}
}
.MediaSlider__RootSpan-sc-1gz67jn-0 {
.TrimmerMarker__TooltipDiv-sc-1f17hi4-1 {
background: @surface2;
color: @text;
}
.Thumb__RootSpan-sc-yv6w5k-0 {
background: @accent;
z-index: 2;
}
.Segment__SegmentSpan-sc-r0cy9o-0 {
background: @surface0 !important;
}
.TrimmerMarker__RootSpan-sc-1f17hi4-0 {
background: @overlay0;
z-index: 1;
}
}
.slider {
background: @surface1;
.thumb {
background: @overlay0;
color: @text;
}
}
.ExpandedDrawing__BodyDiv-sc-cz2rcw-0 {
.DrawingToolbar__RootDiv-sc-2xuxy3-0 {
&,
.DrawingToolbar__ToolDiv-sc-2xuxy3-3 {
background: @surface0;
color: @text;
}
.DrawingToolbar__ToolDiv-sc-2xuxy3-3:hover {
&,
.svg-icons,
.material-icons-outlined {
color: @accent;
}
}
.selected {
&::after {
background: @accent;
}
color: @accent;
}
}
.DrawingSidebar__ExpandedAnswerDiv-sc-1hvcy70-0 {
background: @mantle;
}
.DrawingSidebar__SidebarTopExplainer-sc-1hvcy70-1 {
background: @base;
border-color: @overlay0;
color: @text;
.DrawingSidebar__StyledSvgIcon-sc-1hvcy70-5 {
color: @text;
}
}
.SidePicker__RootDiv-sc-xie0qr-0 {
background: @base;
border-color: @overlay0;
}
}
.MathLiveInput__RootDiv-sc-tki2b-0 {
.keyboard-button-wrapper .svg-icons svg path {
fill: @accent !important;
}
color: @text;
border-color: @overlay0;
background: @surface0;
&:focus-within,
&:hover {
border-color: @accent;
}
&.invalid {
color: @red;
}
math-field {
--caret-color: @accent;
--selection-background-color: fade(@accent, 50%);
--selection-color: @text;
--correct-color: @text;
--incorrect-color: @red;
--latex-color: @blue;
--placeholder-color: @blue;
}
.ML__keyboard--plate {
--keyboard-text: @text;
--keyboard-text-active: @accent;
--keyboard-background: @surface0;
--keycap-background: @surface1;
--keycap-background-active: @surface2;
--keycap-background-border: @overlay0;
--keycap-background-border-bottom: @overlay0;
--keycap-text: @text;
--keycap-secondary-text: @subtext0;
--keycap-text-active: @accent;
--keycap-modifier-background: @surface2;
--keycap-modifier-background-active: @overlay0;
--keycap-modifier-border: @overlay1;
--keycap-modifier-border-bottom: @overlay1;
[data-tooltip]::after {
background-color: @surface2;
color: @text;
}
border-color: @overlay0 !important;
}
}
.ML__keyboard.alternate-keys {
--keyboard-alternate-background: @surface2;
--keyboard-alternate-background-active: @overlay0;
--keyboard-alternate-text: @text;
--keyboard-alternate-text-active: @text;
}
#mathlive-popover-panel {
background: @surface2;
color: @text;
box-shadow: 0 14px 28px fade(@crust, 25%) 0 10px 10px fade(@crust, 22%);
li:hover {
background: @overlay0;
}
&::after {
border-color: @surface2 transparent;
}
}
.FullPointsAnimation__AbsoluteContainerDiv-sc-mzm76r-0,
.ScoreCircle__LottieWrapperDiv-sc-lj5glq-1,
.Summary__SummaryDiv-sc-1ofq6fd-0,
.MatchingSessionSummary__CheckmarkContainerDiv-sc-d3unim-2 {
svg {
path[fill="rgb(32,213,171)"],
path[fill="rgb(33,214,170)"] {
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)"],
path[fill="rgb(255,76,76)"] {
fill: @red !important;
}
path[fill="rgb(201,68,204)"] {
fill: @mauve !important;
}
path[fill="rgb(0,165,249)"] {
fill: @blue !important;
}
path[fill="rgb(255,255,255)"],
path[fill="rgb(242,242,242)"] {
fill: @contrast !important;
}
path[stroke="rgb(32,213,171)"],
path[stroke="rgb(33,214,170)"] {
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)"],
path[stroke="rgb(255,76,76)"] {
stroke: @red !important;
}
path[stroke="rgb(201,68,204)"] {
stroke: @mauve !important;
}
path[stroke="rgb(0,165,249)"] {
stroke: @blue !important;
}
path[stroke="rgb(255,255,255)"],
path[stroke="rgb(242,242,242)"] {
stroke: @contrast !important;
}
}
}
.Elements__JoinLayoutDiv-sc-1qtb2ho-0 {
background: @base;
.SplitColumnLayout__Card-sc-4mcl10-0 {
background: @surface0;
.Login__ContentDiv-sc-5w2jun-0,
.Login__LoginServiceButtonsRowDiv-sc-5w2jun-3 {
.Button__StyledButton-sc-aum9f1-1 {
background: @surface1 !important;
&:hover {
background: @surface2 !important;
}
}
.material-icons-outlined {
color: @text;
}
.NewselaServiceLoginButton__QuestionTextDiv-sc-mk13mj-1 {
color: @text;
}
.NewselaServiceLoginButton__ActionDiv-sc-mk13mj-2 {
color: @accent;
}
}
}
.JoinQuickCode__StyledLink-sc-1uhfett-2,
.CallToActionLink__StyledLink-sc-yuiy65-0,
.Login__ForgotLink-sc-5w2jun-1 {
color: @accent;
}
.react-code-input {
input {
background: @surface1;
border-color: @overlay0;
&:focus-within {
border-color: @accent;
}
}
&:not(:focus-within).empty [data-id="0"] {
border-color: @accent;
}
}
.JoinQuickCode__StyledPrimaryButton-sc-1uhfett-5 {
background: @surface1;
&:hover {
background: @surface2;
}
}
.ValidatedInputNew__StyledInput-sc-18vdili-4 {
background: @surface1;
border-color: @overlay0 !important;
color: @text;
}
}
.FormativeStudentFooter__BottomDiv-sc-6tj89c-3 {
border-color: @overlay0;
}
.StudentFormativeStatus__RootDiv-sc-y86tx8-1 {
&.bQdPlK {
background: @green;
}
&,
.material-icons-outlined {
color: @contrast;
}
}
.FloatingToolButton__FloatingButton-sc-1gy4xsl-0 {
background: @overlay0;
&:hover,
&:enabled:hover,
&:focus,
&:enabled:focus {
background: @overlay1;
}
.material-icons-outlined {
color: @accent;
}
}
.PracticeSet__StyledHeader-sc-1wup6tb-6 {
background: @surface0;
border-color: @overlay0;
input.ReactiveTextInput__StyledInput-sc-go3drs-2 {
color: @text !important;
&::placeholder,
&:focus::placeholder {
color: @subtext0 !important;
}
}
.HeaderBackLink__TertiaryButtonLink-sc-1vx1tro-0,
.Button__StyledButton-sc-aum9f1-1 {
background: @surface1 !important;
color: @accent !important;
&:not([disabled]):hover {
background: @surface2;
}
}
.PracticeSet__DividerDiv-sc-1wup6tb-4 {
background: @overlay0;
}
}
.PracticeSet__ContentDiv-sc-1wup6tb-1 {
.AutoSizeInput__StyledInput-sc-ops4en-2 {
color: @text;
background: transparent !important;
&:focus {
border-color: @subtext0;
}
}
.FlashcardSide__RootDiv-sc-amoro3-1 {
background: @surface0;
color: @text;
}
.PracticeItemEditor__HeaderDiv-sc-1jko4q4-0 {
background: @surface1;
}
.PracticeItemEditor__ContentDiv-sc-1jko4q4-2 {
background: @surface0;
.TextareaCard__RootDiv-sc-qx9s19-0 {
background: @surface1;
border-color: @overlay0;
textarea {
color: @text;
}
}
.MediaButton__StyledButton-sc-12h2vjb-0 {
background: @surface1;
border-color: @overlay0;
color: @text;
&:hover {
background: @surface2;
color: @accent;
}
}
}
}
.Banner__Root-sc-yf4o5r-0 {
&.error {
.material-icons-outlined {
color: @red;
}
border-color: @red;
}
background: @surface2;
color: @text;
}
.FileUploadButton__DropZoneDiv-sc-88u8tg-2 {
background: @surface0;
border-color: @accent;
.material-icons-outlined {
color: @accent;
}
}
.DividerWord__LineDiv-sc-59xl7-1 {
background: @overlay0;
}
.DividerWord__WordDiv-sc-59xl7-2 {
color: @text;
}
.MinimalFormativeStudentHeader__RootDiv-sc-14rcnaq-0 {
border-color: @overlay0;
}
.FormativeItemViewable__FeedbackMessagesListDiv-sc-m0kwch-1 {
.FeedbackMessagesList__MessagesListDiv-sc-9o5dsw-0 {
background: @surface1;
.FeedbackMessagesList__EmptyDiv-sc-9o5dsw-1 svg {
path:nth-child(1) {
fill: @yellow;
}
path:nth-child(2) {
fill: @green;
}
path:nth-child(3) {
fill: @mauve;
}
path:nth-child(4) {
stroke: @peach;
}
path:nth-child(5) {
stroke: @peach;
}
}
}
.FeedbackMessage__FeedbackBoxDiv-sc-q3ku9d-2 {
background: @surface2;
border-color: @overlay2;
}
.FeedbackMessageComposer__RootDiv-sc-vs8711-0 {
border-color: @overlay0;
.FeedbackMessageComposer__RichTextContainerDiv-sc-vs8711-3 {
border-color: @overlay1;
color: @text;
.public-DraftEditorPlaceholder-inner {
color: @subtext0;
}
}
}
}
.Toolbar__RootDiv-sc-1e3lohg-0 {
border-color: @overlay0;
box-shadow: @overlay0 0 1px 3px 0;
&::before,
&::after {
border-color: @surface2 transparent transparent;
}
&,
.buttonWrapper button {
background: @surface2;
}
.buttonWrapper button {
&:hover {
background: @overlay0;
}
&.active {
color: @accent;
svg {
fill: @accent;
}
}
svg {
fill: @text;
}
color: @text;
}
}
.TeacherPacedStart__RootDiv-sc-1f4f5sd-0 {
background: @surface0 !important;
}
.FeedbackMessageIcon__UnreadJewelDiv-sc-1x1yblc-1 {
background: @red;
box-shadow: @text 0 0 0 2px;
}
.CookiePolicyBanner__ContainerDiv-sc-1p3fxjn-1 {
background: @surface0;
border-color: @accent;
.Button__StyledButton-sc-aum9f1-1 {
background: @surface1;
&:hover {
background: @surface2;
}
}
}
.GameContainer__RootDiv-sc-1c3jzzv-0 {
background: @base !important;
.Timer__RootDiv-sc-bbbpy2-0 {
background: @surface1;
&,
i {
color: @text;
}
}
.Header__HeaderDiv-sc-327vcg-0 {
background: @surface0;
border-color: @overlay0;
.HeaderBackLink__TertiaryButtonLink-sc-1vx1tro-0,
.Button__StyledButton-sc-aum9f1-1 {
background: @surface1;
color: @accent;
&:hover {
background: @surface2;
}
}
}
.ThemePicker__ToggleItem-sc-juof75-3 {
div {
outline-color: @text !important;
}
&[aria-checked="true"],
&[aria-checked="true"] div {
outline-color: @accent !important;
}
}
.TitleCard__StartButton-sc-xz0ejb-1 {
background: @accent;
color: @base;
}
.QuizSession__BodyDiv-sc-4aco0-0 {
.QuizSession__DividerDiv-sc-4aco0-4 {
background: @overlay0;
}
.AnswerChoiceCard__CardButton-sc-lns4c-0 {
&::before {
box-shadow: @overlay0 0 0 0 1px;
}
&.correct::before {
animation: 1.2s ease 0s 1 normal forwards running
catppuccin-formative-practiceset-quiz-correct;
}
&.incorrect::before {
animation: 1.2s ease 0s 1 normal forwards running
catppuccin-formative-practiceset-quiz-incorrect;
}
.AnswerChoiceCard__CorrectnessPill-sc-lns4c-2 {
&.correct {
background: @green;
i,
span {
color: @contrast;
}
}
background: @red;
i,
span {
color: @contrast;
}
}
.AnswerChoiceCard__CorrectnessOverlay-sc-lns4c-3 {
&.correct {
background: @green;
}
i {
color: @contrast !important;
}
background: @red;
}
}
}
.MatchingSessionSummary__RootDiv-sc-d3unim-0,
.MatchingSessionSummary__CheckmarkOverlayDiv-sc-d3unim-1 {
background: @base;
.Glow__RootDiv-sc-1c8wp5s-0 {
background: @accent !important;
color: @contrast;
}
.MatchingSessionSummary__SessionDiv-sc-d3unim-13 {
border-color: @overlay0;
&.highlight {
background: fade(@yellow, 25%);
}
}
}
.LatestPerformances__PerformanceDiv-sc-g3qin-2,
.Leaderboard__PerformanceDiv-sc-152arb5-3 {
border-color: @overlay0;
}
.MatchingSession__ContentDiv-sc-edrizy-0 {
.ProgressBar__RootDiv-sc-ly2f4w-0 {
.Glow__FlashDiv-sc-1c8wp5s-1 {
background: transparent;
}
.ProgressBar__PointsContainerSpan-sc-ly2f4w-3
.Glow__RootDiv-sc-1c8wp5s-0 {
background: @surface0 !important;
color: @text;
}
.ProgressBar__BarDiv-sc-ly2f4w-1 {
background: @surface0;
border-color: @overlay0;
.Glow__RootDiv-sc-1c8wp5s-0 {
background: @accent !important;
}
}
}
}
.PracticeSessionCard__CardButton-sc-wwcpxc-0 {
border-color: @overlay0;
}
.FlashcardSide__RootDiv-sc-amoro3-1 {
background: @surface0;
border-color: @overlay0;
color: @text;
}
.StreakProgressBar__Progress-sc-1b8tyg3-2 {
background: @surface0;
.StreakProgressBar__ProgressBarDiv-sc-1b8tyg3-3 {
background: @accent;
}
}
.StreakProgressBar__StyledSvgIcon-sc-1b8tyg3-4 {
svg path {
fill: @yellow;
stroke: @contrast;
}
&.visible {
animation: 0.5s ease 0s 1 normal none running
catppuccin-formative-practiceset-quiz-streak;
}
}
.PracticeSession__AnswerButton-sc-1t2vn9a-3 {
color: @contrast;
&.red {
background: @red;
}
&.green {
background: @green;
}
}
}
.PillToggleGroup__Item-sc-12fkyq8-1 {
&[aria-checked="true"] {
background: @surface0;
color: @accent;
}
&:hover {
background: @surface0;
}
border-color: @overlay0;
color: @text;
}
.FeedbackButton__StyledButton-sc-1b7u8ss-0 {
background: @surface2;
i {
color: @text;
}
}
@keyframes catppuccin-formative-practiceset-quiz-correct {
0% {
box-shadow: @overlay0 0 0 0 1px;
}
70% {
box-shadow: @overlay0 0 0 0 1px;
}
100% {
box-shadow: @green 0 0 0 3px;
}
}
@keyframes catppuccin-formative-practiceset-quiz-incorrect {
0% {
box-shadow: @overlay0 0 0 0 1px;
}
70% {
box-shadow: @overlay0 0 0 0 1px;
}
100% {
box-shadow: @red 0 0 0 3px;
}
}
@keyframes catppuccin-formative-practiceset-quiz-streak {
0% {
filter: drop-shadow(fade(@yellow, 80%) 0 0 0);
transform: scale(0.8);
}
50% {
filter: drop-shadow(fade(@yellow, 80%) 0 0 12px);
transform: scale(1.3);
}
100% {
filter: drop-shadow(fade(@yellow, 80%) 0 0 0);
transform: scale(1);
}
}
.Shelf__RootDiv-sc-5aism7-0 {
background: @surface0;
.ShelfTile__RootButton-sc-1oc4c00-0 {
background: @surface1;
&:hover {
background: @surface2;
box-shadow: @accent 0 0 0 1px;
.label {
color: @accent;
}
}
.ShelfTile__IconDiv-sc-1oc4c00-1 {
background: @accent !important;
i {
color: @contrast;
}
}
}
}
img.spinner {
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
.NoFormatives__StyledImg-sc-1v9g5eg-4 {
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
.PracticeSetGrid__EmptyStateDiv-sc-1yuxflk-1 img {
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
}
}
/* deno-fmt-ignore */
@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: #f4f4f4; @subtext1: #e0e0e0; @subtext0: #c6c6c6; @overlay2: #a8a8a8; @overlay1: #8d8d8d; @overlay0: #6f6f6f; @surface2: #525252; @surface1: #393939; @surface0: #262626; @base: #161616; @mantle: #0b0b0b; @crust: #000000; };
};