Add transparency effects and update theme colors

This commit is contained in:
SethBurkart123
2023-11-14 21:40:10 +11:00
parent d3adaba5a3
commit efe043fb43
3 changed files with 45 additions and 5 deletions
+9 -5
View File
@@ -4,6 +4,7 @@
@import "./injected/popup.scss"; @import "./injected/popup.scss";
@import "./injected/sidebar-animation.scss"; @import "./injected/sidebar-animation.scss";
@import "./injected/theme.scss"; @import "./injected/theme.scss";
@import "./injected/transparency.scss";
:root { :root {
background: var(--better-main) !important; background: var(--better-main) !important;
@@ -27,7 +28,7 @@ body, html {
} }
} }
.connectedNotificationsWrapper > div > button > svg > g { .connectedNotificationsWrapper > div > button > svg > g {
fill: var(--background-primary) !important; fill: var(--theme-primary) !important;
} }
#main { #main {
color: var(--text-primary); color: var(--text-primary);
@@ -51,7 +52,7 @@ body, html {
cursor: pointer; cursor: pointer;
background: var(--text-primary) !important; background: var(--text-primary) !important;
border-radius: 10px; border-radius: 10px;
color: var(--background-primary) !important; color: var(--theme-primary) !important;
height: 35px; height: 35px;
justify-content: center; justify-content: center;
width: 35px !important; width: 35px !important;
@@ -83,7 +84,7 @@ ul.magicDelete > li.deleting {
} }
.addedButton svg { .addedButton svg {
margin: 6px; margin: 6px;
fill: var(--background-primary); fill: var(--theme-primary);
} }
#menu, .sub, .nav { #menu, .sub, .nav {
background: transparent !important; background: transparent !important;
@@ -398,6 +399,9 @@ ol > [data-label] {
[data-type="student"] [style="z-index: 30;"] .header:has(h1) { [data-type="student"] [style="z-index: 30;"] .header:has(h1) {
color: black !important; color: black !important;
} }
.uiFile.rows>.name, .uiResource.rows>.name {
padding: 2px;
}
div > ol:has(.uiFileHandlerWrapper) { div > ol:has(.uiFileHandlerWrapper) {
border-bottom-left-radius: 16px !important; border-bottom-left-radius: 16px !important;
border-bottom-right-radius: 16px !important; border-bottom-right-radius: 16px !important;
@@ -2291,7 +2295,7 @@ body {
outline: solid 1px black; outline: solid 1px black;
} }
.tooltip svg { .tooltip svg {
fill: var(--background-primary); fill: var(--theme-primary);
} }
.tooltip { .tooltip {
display: inline-block; display: inline-block;
@@ -2358,7 +2362,7 @@ body {
.topmenutooltip { .topmenutooltip {
top: 115% !important; top: 115% !important;
background: var(--text-primary) !important; background: var(--text-primary) !important;
color: var(--background-primary) !important; color: var(--theme-primary) !important;
} }
.whatsnewContainer { .whatsnewContainer {
position: absolute; position: absolute;
+4
View File
@@ -1,11 +1,15 @@
html.dark { html.dark {
--background-primary: #232323; --background-primary: #232323;
--background-secondary: #1a1a1a; --background-secondary: #1a1a1a;
--theme-primary: #232323;
--theme-secondary: #1a1a1a;
--text-primary: white; --text-primary: white;
} }
html:not(.dark) { html:not(.dark) {
--background-primary: #ffffff; --background-primary: #ffffff;
--background-secondary: #e5e7eb; --background-secondary: #e5e7eb;
--theme-primary: #ffffff;
--theme-secondary: #e5e7eb;
--text-primary: black; --text-primary: black;
} }
+32
View File
@@ -0,0 +1,32 @@
html.transparencyEffects.dark {
--background-primary: rgba(35, 35, 35, 0.5);
--background-secondary: rgba(26, 26, 26, 0.5);
}
html.transparencyEffects:not(.dark) {
--background-primary: rgba(255, 255, 255, 0.5);
--background-secondary: rgba(229, 231, 235, 0.5);
}
/* Blurs */
#title,
.LabelList__selected___3Egk7,
.legacy-root button, .legacy-root a,
.MessageList__MessageList___3DxoC {
backdrop-filter: blur(10px);
}
#menu {
backdrop-filter: blur(20px);
}
.title > a {
backdrop-filter: blur(0px) !important;
}
.search,
.document,
.border {
backdrop-filter: blur(8px);
}