schoolbox web extension :)
42willow.github.io
1@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");
2
3@import "tailwindcss";
4@import "@catppuccin/tailwindcss/mocha.css";
5
6body {
7 width: 450px; /* max: 1000px */
8 @apply bg-ctp-base font-lexend text-base text-ctp-text;
9}
10
11@theme {
12 --font-lexend: "Lexend", sans-serif;
13 --animate-zoom-in: zoom-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
14
15 @keyframes zoom-in {
16 from {
17 transform: scale(0.95);
18 }
19 to {
20 transform: scale(1);
21 }
22 }
23}
24
25@layer components {
26 .logo-picker {
27 mask: var(--icon) no-repeat;
28 mask-size: 100% 100%;
29 background-color: currentColor;
30 @apply h-16 w-20 text-(--ctp-accent);
31 }
32
33 .slider {
34 @apply ml-4 flex h-5 w-11 flex-shrink-0 items-center rounded-lg bg-ctp-surface1 p-1 duration-500 ease-in-out peer-checked:bg-(--ctp-accent) after:rounded-lg after:bg-ctp-text after:shadow-md after:duration-300 group-hover:after:translate-x-1 peer-checked:after:translate-x-6 peer-checked:after:bg-ctp-mantle;
35 }
36
37 .slider.big {
38 @apply h-8 w-14 after:h-6 after:w-6;
39 }
40
41 .slider.small {
42 @apply after:h-3 after:w-3;
43 }
44
45 #flavours button {
46 @apply bg-ctp-surface0;
47 }
48
49 #flavours button.active {
50 @apply bg-(--ctp-accent)/40;
51 }
52
53 #navbar a.active {
54 @apply bg-(--ctp-accent)/40;
55 }
56
57 #navbar a {
58 @apply bg-ctp-surface0;
59 }
60
61 #card {
62 @apply flex w-full flex-col items-center justify-center rounded-3xl bg-ctp-mantle bg-linear-to-b p-6 shadow-xl outline-2 outline-(--ctp-accent) outline-solid;
63 }
64
65 #card h1 {
66 @apply bg-linear-to-r from-ctp-blue to-ctp-teal bg-clip-text text-5xl font-bold text-transparent;
67
68 &.ctp {
69 background-image: linear-gradient(
70 to right,
71 var(--color-ctp-red),
72 var(--color-ctp-peach),
73 var(--color-ctp-yellow),
74 var(--color-ctp-green),
75 var(--color-ctp-blue),
76 var(--color-ctp-mauve)
77 );
78 }
79 }
80
81 #card h2 {
82 @apply text-4xl font-semibold text-(--ctp-accent);
83 }
84
85 #card h3 {
86 @apply text-2xl font-medium;
87 }
88
89 #card p {
90 @apply font-bold;
91 }
92
93 .highlight {
94 @apply bg-ctp-surface2;
95 }
96
97 button#toggle {
98 @apply rounded-xl px-4 py-2 text-xl font-bold text-ctp-base;
99 }
100
101 button.small {
102 @apply rounded-lg px-2 py-1 text-sm font-bold;
103 }
104
105 button.xsmall {
106 @apply rounded-md px-1 py-0.5 text-xs;
107 }
108
109 button {
110 @apply transition duration-500 ease-in-out;
111 }
112
113 #palette {
114 @apply mb-8 grid auto-rows-auto grid-cols-7 justify-items-center gap-4;
115 }
116
117 #palette > * {
118 @apply h-6 w-6 rounded-full;
119 }
120
121 .current {
122 @apply outline-ctp-overlay0 outline-solid;
123 }
124
125 .navbutton-left {
126 @apply rounded-l-xl py-2 pr-2 pl-4 outline-1 outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80;
127 }
128
129 .navbutton-center {
130 @apply p-2 outline-1 outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80;
131 }
132
133 .navbutton-right {
134 @apply rounded-r-xl py-2 pr-4 pl-2 outline-1 outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80;
135 }
136
137 div[title] {
138 @apply relative;
139 }
140
141 div[title]:hover::after {
142 @apply absolute bottom-full left-1/2 bg-ctp-surface0 whitespace-nowrap text-ctp-text;
143 content: attr(title);
144 transform: translateX(-50%);
145 padding: 0.5rem;
146 border-radius: 0.25rem;
147 }
148}