schoolbox web extension :)
feat(snippets): rounded corners (#238)
* feat(snippets): rounded corners
* refactor: misc changes
* completely breaks without themes enabled
* chore: update lockfile
* refactor(snippets/roundedCorners): update
* feat(snippets/roundedCorners): update
* feat(snippets/roundedCorners): update
+190
-1
bun.lockb
bun.lockb
This is a binary file and will not be displayed.
+2
src/entrypoints/snippets.content.ts
+2
src/entrypoints/snippets.content.ts
···
1
+
import roundedCorners from "./snippets/roundedCorners.css?inline";
1
2
import hidePfp from "./snippets/hidePfp/styles.css?inline";
2
3
import hidePwaPrompt from "./snippets/hidePwaPrompt.css?inline";
3
4
import censor from "./snippets/censor.css?inline";
···
7
8
runAt: "document_start",
8
9
excludeMatches: EXCLUDE_MATCHES,
9
10
async main() {
11
+
defineStSnippet("roundedCorners", roundedCorners);
10
12
defineStSnippet("hidePfp", hidePfp);
11
13
defineStSnippet("hidePwaPrompt", hidePwaPrompt);
12
14
defineStSnippet("censor", censor);
+180
src/entrypoints/snippets/roundedCorners.css
+180
src/entrypoints/snippets/roundedCorners.css
···
1
+
/*
2
+
Be specific as possible with your selectors, try and use the verbose Schoolbox component class names
3
+
For example:
4
+
.Schoolbox_Learning_Component_Dashboard_UpcomingWorkController <your selectors>
5
+
*/
6
+
7
+
/* ----- global ----- */
8
+
9
+
/* div#calendar-15403, TODO)) not sure if I need this
10
+
.scrollable,
11
+
section.content, */
12
+
.tile,
13
+
.button {
14
+
border-radius: 10px !important;
15
+
overflow: clip;
16
+
}
17
+
18
+
.small-12.island > section {
19
+
border-radius: 0px 0px 10px 10px;
20
+
overflow: clip;
21
+
}
22
+
23
+
/* account and action dropdown */
24
+
#account-content,
25
+
.f-dropdown {
26
+
border-radius: 0px 0px 10px 10px !important;
27
+
}
28
+
/* see all notifications button */
29
+
#message-list > li > a.button {
30
+
border-radius: 0px 0px 10px 10px !important;
31
+
}
32
+
33
+
/* round action buttons */
34
+
.actions-small-3 > nav a[class*="icon-"]:hover,
35
+
.actions-small-3 > nav a[class^="icon-"]:hover,
36
+
.island .row.actions-small-3 > nav a[class*="icon-"]:hover,
37
+
.island .row.actions-small-3 > nav a[class^="icon-"]:hover,
38
+
.left-off-canvas-menu .left-menu-dock:hover {
39
+
border-radius: 10px;
40
+
}
41
+
42
+
/* ----- notifications page ----- */
43
+
/* url:/notifications */
44
+
45
+
.notification-list .information-list > li:first-child > div,
46
+
.notification-list .information-list > li:first-child {
47
+
border-radius: 10px 10px 0px 0px;
48
+
}
49
+
.notification-list .information-list > li:last-child > div,
50
+
.notification-list .information-list > li:last-child {
51
+
border-radius: 0px 0px 10px 10px;
52
+
}
53
+
.notification-list .information-list,
54
+
.notification-list .information-list > li:only-child > div {
55
+
border-radius: 10px;
56
+
}
57
+
58
+
/* news component */
59
+
#news-component {
60
+
/* round tabs at the bottom */
61
+
& .tabs {
62
+
border-radius: 10px 10px 0px 0px;
63
+
}
64
+
65
+
/* round the news cards */
66
+
& ul.information-list {
67
+
background: none !important;
68
+
& > li {
69
+
background-color: hsl(var(--ctp-surface0)) !important;
70
+
/* round the bottom of the last card */
71
+
&:last-child {
72
+
border-radius: 0px 0px 10px 10px !important;
73
+
}
74
+
}
75
+
}
76
+
}
77
+
78
+
/* empty component */
79
+
.Schoolbox_Calendar_Component_Dashboard_Controller.component-container .empty-state {
80
+
border-radius: 10px;
81
+
}
82
+
83
+
/* upcoming work component */
84
+
.Schoolbox_Learning_Component_Dashboard_UpcomingWorkController .information-list,
85
+
.Schoolbox_Learning_Component_Dashboard_UpcomingWorkController .information-list .card {
86
+
border-radius: 10px !important;
87
+
}
88
+
89
+
/* calendar */
90
+
.calendar-15403,
91
+
.fc {
92
+
border-radius: 10px;
93
+
}
94
+
95
+
/* slideshow */
96
+
.Component_Dashboard_SlideshowController.component-container .swiper {
97
+
border-radius: 10px !important;
98
+
}
99
+
100
+
/* ----- calendar page ----- */
101
+
/* url:/calendar */
102
+
103
+
/* buttons */
104
+
.fc-button-group > button:first-child {
105
+
border-radius: 10px 0px 0px 10px;
106
+
}
107
+
.fc-button-group > button:last-child {
108
+
border-radius: 0px 10px 10px 0px;
109
+
}
110
+
111
+
/* ----- classes page ----- */
112
+
/* url:/learning/classes */
113
+
114
+
.v-card {
115
+
border-radius: 10px;
116
+
}
117
+
.card-class-image {
118
+
border-radius: 10px 10px 0px 0px;
119
+
}
120
+
121
+
/* ----- homepage (class pages) ----- */
122
+
/* url:/homepage/code/:id */
123
+
124
+
div.columns .component-titlebar {
125
+
border-radius: 10px;
126
+
}
127
+
128
+
/* social stream */
129
+
.Component_Homepage_SocialStreamController section,
130
+
.Component_Homepage_SocialStreamController .information-list {
131
+
border-radius: 10px;
132
+
}
133
+
134
+
/* news */
135
+
.component-action > section {
136
+
background-color: var(--left-bg-primary) !important;
137
+
border-radius: 10px !important;
138
+
border: none !important;
139
+
}
140
+
.component-action {
141
+
background: var(--left-bg-primary) !important;
142
+
border-radius: 0px 0px 10px 10px;
143
+
}
144
+
.Schoolbox_Comms_News_Component_Homepage_Controller.component-container .island > section,
145
+
.Component_Homepage_ImageController.component-container .island > section,
146
+
.Component_Homepage_ClassListController.component-container .island > section {
147
+
background: none !important;
148
+
}
149
+
150
+
.Component_Homepage_CountdownController.component-container,
151
+
.Schoolbox_Resource_Textbox_Component_Homepage_Controller.component-container,
152
+
.Component_Homepage_SocialStreamController.component-container,
153
+
.Component_Homepage_SlideshowController.component-container,
154
+
.Component_Homepage_AudioController.component-container,
155
+
.Component_Homepage_TeachersController.component-container,
156
+
.Component_Homepage_ClassListController.component-container,
157
+
.Schoolbox_Comms_News_Component_Homepage_Controller.component-container,
158
+
.Component_Homepage_LinkListController.component-container,
159
+
.Component_Homepage_FileListController.component-container,
160
+
.Schoolbox_Learning_Assessment_Component_Homepage_Outline_Controller.component-container,
161
+
.Schoolbox_Learning_Assessment_DueWork_Component_Homepage_Controller.component-container,
162
+
.Schoolbox_Learning_Assessment_Task_Component_Homepage_Controller.component-container,
163
+
.Schoolbox_Learning_Assessment_Quiz_Component_Homepage_Controller.component-container,
164
+
.Component_Homepage_ImageController.component-container,
165
+
.Schoolbox_Tile_Component_HomepageTileController {
166
+
background: hsl(var(--ctp-accent));
167
+
border-radius: 10px;
168
+
}
169
+
170
+
.Component_Homepage_ImageController.component-container img {
171
+
border-radius: 0px 0px 10px 10px !important;
172
+
}
173
+
174
+
/* round some other components and clip overflow */
175
+
176
+
.Schoolbox_Fixtures_Component_Dashboard_Controller section,
177
+
.Component_Dashboard_TextboxController section {
178
+
border-radius: 10px !important;
179
+
overflow: clip !important;
180
+
}
+7
src/utils/storage.ts
+7
src/utils/storage.ts
···
196
196
}
197
197
198
198
export const snippets: Record<Types.SnippetId, Types.SnippetData> = {
199
+
roundedCorners: createSnippet(
200
+
"roundedCorners",
201
+
"Rounded Corners",
202
+
"Adds rounded corners to all elements across Schoolbox.",
203
+
true,
204
+
),
205
+
199
206
hidePfp: createSnippet("hidePfp", "Hide PFP", "Hide your profile picture across Schoolbox.", true),
200
207
201
208
hidePwaPrompt: createSnippet(
+1
-1
src/utils/types.ts
+1
-1
src/utils/types.ts