diff --git a/styles/formative/catppuccin.user.css b/styles/formative/catppuccin.user.css
index 9d182e7e96..61aacaa2cc 100644
--- a/styles/formative/catppuccin.user.css
+++ b/styles/formative/catppuccin.user.css
@@ -2,7 +2,7 @@
@name Formative Catppuccin
@namespace github.com/catppuccin/userstyles/styles/formative
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/formative
-@version 0.2.0
+@version 0.2.1
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/formative/catppuccin.user.css
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aformative
@description Soothing pastel theme for Formative
@@ -15,7 +15,7 @@
@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') {
+@-moz-document domain('app.formative.com'), domain("goformative.com") {
/* prettier-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; };
@@ -84,8 +84,8 @@
color: @text;
}
- .loading-spinner-loading-box {
- background: @base;
+ hr {
+ border-color: @overlay0 !important;
}
.MainAppSideMenu__RootNav-sc-11gwnv8-0 {
@@ -197,13 +197,18 @@
.ErrorExplainer__MainTextHeading-sc-7nq4if-1,
.ErrorExplainer__TechnicalDetailsHeading-sc-7nq4if-3,
.ErrorExplainer__ErrorIdParagraph-sc-7nq4if-4,
- .TeacherPacedStart__DetailsDiv-sc-1f4f5sd-4 {
- color: @text;
- }
- .RichText__RootReadOnlyDiv-sc-fjolxt-1 * {
+ .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 {
color: @text;
}
- .TabsItem__TabDiv-sc-tj1og8-4:hover {
+ .TabsItem__TabDiv-sc-tj1og8-4:hover, .RespondusTroubleshootLink__TroubleshootingAnchor-sc-17na5u4-7, .Summary__RawButtonLink-sc-1ofq6fd-2 {
color: @accent-color;
}
.FormativesShelf__StyledSecondaryHeader-sc-1pswvpk-3 {
@@ -235,6 +240,10 @@
.Card__RootDiv-sc-4gt2nj-0 {
background: @surface0;
border-color: @overlay0;
+ &.selected {
+ border-color: @accent-color;
+ outline-color: @accent-color;
+ }
.FormativeCardAttributesRow__AttributeDiv-sc-tx9rpw-1
.material-icons-outlined {
color: @text;
@@ -405,6 +414,33 @@
background: @surface0;
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;
+ }
+ .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-color;
+ }
+ }
+ .CopyablePracticeSetInfo__LinkText-sc-14zdsnw-3,
+ .CopyablePracticeSetInfo__ExplainerDiv-sc-14zdsnw-5 {
+ background: @surface0;
+ }
+ }
.ReactModal__Overlay {
background: fade(@crust, 80);
.ReactModal__ActualContent {
@@ -424,6 +460,23 @@
.ModalTitle {
background: @base;
}
+ .PracticeDispatchModalOptionButton__RootButton-sc-eybp6x-0 {
+ background: @surface1 !important;
+ img {
+ &[src*="flashcard-preview"] {
+ @escaped: escape('');
+ content: url("data:image/svg+xml,@{escaped}")
+ }
+ &[src*="match-preview"] {
+ @escaped: escape('');
+ content: url("data:image/svg+xml,@{escaped}");
+ }
+ &[src*="quiz-preview"] {
+ @escaped: escape('');
+ content: url("data:image/svg+xml,@{escaped}");
+ }
+ }
+ }
}
}
.NotificationCenterAlertListContainer__RootDiv-sc-1kyy25p-0 {
@@ -604,6 +657,10 @@
background: @surface1;
border-color: @overlay0;
}
+ .TargetElementViewable__AddSelectedChoiceButton-sc-1cp2mml-6 i {
+ background: @accent-color;
+ color: @contrast-accent-color;
+ }
}
.MatchingTable__Table-sc-1rhxmvo-1 {
&,
@@ -618,13 +675,17 @@
.ChoiceElementViewable__RootDiv-sc-viwu2x-0 {
background: @surface0;
border-color: @overlay0;
- &:hover {
+ &:hover, &.highlight {
border-color: @accent-color;
+ 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;
@@ -635,6 +696,10 @@
background: transparent;
}
}
+ .InlineChoiceOutput__InlineChoiceOutputDiv-sc-1694w84-2 {
+ background: @surface0;
+ border-color: @accent-color;
+ }
.DrawingCardButton__RootButton-sc-u2qprg-1 {
border-color: @overlay0;
.DrawingCardButton__DrawingPreview-sc-u2qprg-3 {
@@ -677,6 +742,12 @@
.dropzone-tip::before {
background: @surface0;
}
+ .isOver .dropzone {
+ background: @surface1;
+ .dropzone-number {
+ background: @surface2 !important;
+ }
+ }
.dropzone {
&:hover,
&.selected {
@@ -685,7 +756,7 @@
background: @surface2 !important;
}
}
- border-color: @accent-color;
+ border-color: @accent-color !important;
background: @surface0;
.dropzone-number {
background: @surface1;
@@ -695,6 +766,20 @@
.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-color;
+ &.hasAnswer {
+ border-color: @overlay0;
+ }
}
.AnswerCorrectnessIndicator__CircleDiv-sc-18hnk99-1 {
&.correct {
@@ -709,6 +794,59 @@
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-color;
+ }
+ }
+ }
+ .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 {
@@ -763,8 +901,8 @@
}
}
}
- .MathLiveInput__RootDiv-sc-2fx8pp-0 {
- .MathLiveInput__KeyboardButtonWrapper-sc-2fx8pp-1 .svg-icons svg path {
+ .MathLiveInput__RootDiv-sc-tki2b-0 {
+ .keyboard-button-wrapper .svg-icons svg path {
fill: @accent-color !important;
}
color: @text;
@@ -816,9 +954,11 @@
}
.FullPointsAnimation__AbsoluteContainerDiv-sc-mzm76r-0,
- .ScoreCircle__LottieWrapperDiv-sc-lj5glq-1 {
+ .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(32,213,171)"], path[fill="rgb(33,214,170)"] {
fill: @green !important;
}
path[fill="rgb(255,138,51)"] {
@@ -827,16 +967,20 @@
path[fill="rgb(255,222,51)"] {
fill: @yellow !important;
}
- path[fill="rgb(255,76,77)"] {
+ path[fill="rgb(255,76,77)"], path[fill="rgb(255,76,76)"] {
fill: @red !important;
}
- path[fill="rgb(255,255,255)"] {
- fill: @contrast-accent-color !important;
+ path[fill="rgb(201,68,204)"] {
+ fill: @mauve !important;
}
- path[fill="rgb(242,242,242)"] {
+ path[fill="rgb(0,165,249)"] {
+ fill: @blue !important;
+ }
+ path[fill="rgb(255,255,255)"], path[fill="rgb(242,242,242)"] {
fill: @contrast-accent-color !important;
}
- path[stroke="rgb(32,213,171)"] {
+
+ path[stroke="rgb(32,213,171)"], path[stroke="rgb(33,214,170)"] {
stroke: @green !important;
}
path[stroke="rgb(255,138,51)"] {
@@ -845,13 +989,16 @@
path[stroke="rgb(255,222,51)"] {
stroke: @yellow !important;
}
- path[stroke="rgb(255,76,77)"] {
+ path[stroke="rgb(255,76,77)"], path[stroke="rgb(255,76,76)"] {
stroke: @red !important;
}
- path[stroke="rgb(255,255,255)"] {
- stroke: @contrast-accent-color !important;
+ path[stroke="rgb(201,68,204)"] {
+ stroke: @mauve !important;
+ }
+ path[stroke="rgb(0,165,249)"] {
+ stroke: @blue !important;
}
- path[stroke="rgb(242,242,242)"] {
+ path[stroke="rgb(255,255,255)"], path[stroke="rgb(242,242,242)"] {
stroke: @contrast-accent-color !important;
}
}
@@ -861,9 +1008,19 @@
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;
+ &:hover {
+ background: @surface2;
+ }
+ }
+ }
}
.JoinQuickCode__StyledLink-sc-1uhfett-2,
- .CallToActionLink__StyledLink-sc-yuiy65-0 {
+ .CallToActionLink__StyledLink-sc-yuiy65-0,
+ .Login__ForgotLink-sc-5w2jun-1 {
color: @accent-color;
}
.react-code-input {
@@ -884,6 +1041,14 @@
background: @surface2;
}
}
+ .ValidatedInputNew__StyledInput-sc-18vdili-4 {
+ background: @surface1;
+ border-color: @overlay0 !important;
+ color: @text;
+ &::placeholder {
+ color: @subtext0;
+ }
+ }
}
.FormativeStudentFooter__BottomDiv-sc-6tj89c-3 {
border-color: @overlay0;
@@ -919,10 +1084,10 @@
.PracticeSet__StyledHeader-sc-1wup6tb-5 {
background: @surface0;
border-color: @overlay0;
- .ReactiveTextInput__StyledInput-sc-g83bxq-2 {
+ input.ReactiveTextInput__StyledInput-sc-g83bxq-2 {
color: @text !important;
&::placeholder {
- color: @text;
+ color: @subtext0 !important;
}
}
.HeaderBackLink__TertiaryButtonLink-sc-1vx1tro-0,
@@ -941,6 +1106,12 @@
.AutoSizeInput__StyledInput-sc-ops4en-2 {
color: @text;
background: transparent !important;
+ &::placeholder {
+ color: @subtext0 !important;
+ }
+ &:focus {
+ border-color: @subtext0;
+ }
}
.FlashcardSide__RootDiv-sc-amoro3-1 {
background: @surface0;
@@ -1068,6 +1239,185 @@
background: @red;
box-shadow: @text 0 0 0 2px;
}
+ .CookiePolicyBanner__ContainerDiv-sc-1p3fxjn-1 {
+ background: @surface0;
+ border-color: @accent-color;
+ .Button__StyledButton-sc-aum9f1-1 {
+ background: @surface1;
+ &:hover {
+ background: @surface2;
+ }
+ }
+ }
+ .GameContainer__RootDiv-sc-1x76nlz-0 {
+ background: @base !important;
+ .Timer__RootDiv-sc-bbbpy2-0 {
+ background: @surface1;
+ color: @text;
+ }
+ .Header__HeaderDiv-sc-327vcg-0 {
+ background: @surface0;
+ border-color: @overlay0;
+ .HeaderBackLink__TertiaryButtonLink-sc-1vx1tro-0,
+ .Button__StyledButton-sc-aum9f1-1 {
+ background: @surface1;
+ &:hover {
+ background: @surface2;
+ }
+ }
+ }
+ .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-accent-color;
+ }
+ }
+ background: @red;
+ i, span {
+ color: @contrast-accent-color;
+ }
+ }
+ .AnswerChoiceCard__CorrectnessOverlay-sc-lns4c-3 {
+ &.correct {
+ background: @green;
+ }
+ i {
+ color: @contrast-accent-color !important;
+ }
+ background: @red;
+ }
+ }
+ }
+ .MatchingSessionSummary__RootDiv-sc-d3unim-0,
+ .MatchingSessionSummary__CheckmarkOverlayDiv-sc-d3unim-1 {
+ background: @base;
+ .Glow__RootDiv-sc-1c8wp5s-0 {
+ background: @accent-color !important;
+ color: @contrast-accent-color;
+ }
+ .PillToggleGroup__Item-sc-12fkyq8-1 {
+ &[aria-checked="true"] {
+ background: @surface0;
+ color: @accent-color;
+ }
+ &:hover {
+ background: @surface0;
+ }
+ border-color: @overlay0;
+ color: @text;
+ }
+ .MatchingSessionSummary__SessionDiv-sc-d3unim-13 {
+ border-color: @overlay0;
+ &.highlight {
+ background: fade(@yellow, 25)
+ }
+ }
+ }
+ .MatchingSession__ContentDiv-sc-edrizy-2 {
+ .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-color !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-color;
+ }
+ }
+ .StreakProgressBar__StyledSvgIcon-sc-1b8tyg3-4 {
+ svg path {
+ fill: @yellow;
+ stroke: @contrast-accent-color;
+ }
+ &.visible {
+ animation: 0.5s ease 0s 1 normal none running catppuccin-formative-practiceset-quiz-streak;
+ }
+ }
+ .PracticeSession__AnswerButton-sc-1t2vn9a-3 {
+ color: @contrast-accent-color;
+ &.red {
+ background: @red;
+ }
+ &.green {
+ background: @green;
+ }
+ }
+ }
+ .FeedbackButton__StyledButton-sc-1b7u8ss-0 {
+ background: @surface2;
+ }
+ @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);
+ }
+ }
}
@media (prefers-color-scheme: light) {