add gradient support

This commit is contained in:
SethBurkart123
2023-09-22 11:32:32 +10:00
parent cbc84c8e79
commit c584f29670
2 changed files with 106 additions and 53 deletions
+33 -34
View File
@@ -2,7 +2,6 @@
@import "./injected/popup.css";
:root {
background-color: var(--better-main) !important;
background: var(--better-main) !important;
--navy: #1a1a1a !important;
--auto-background: var(--better-pale, var(--background-secondary)) !important;
@@ -15,7 +14,7 @@ html {
#container {
transition: 200ms;
background-color: var(--auto-background) !important;
background: var(--auto-background) !important;
}
* {
@@ -215,7 +214,7 @@ li.item.draggable {
}
html {
background-color: var(--better-main) !important;
background: var(--better-main) !important;
}
/* Messages */
@@ -265,29 +264,29 @@ ol:has(.MessageList__avatar___2wxyb svg) {
}
.content [autocomplete="off"] {
background-color: var(--background-primary) !important;
background: var(--background-primary) !important;
}
.MessageList__MessageList___3DxoC .footer {
background-color: var(--background-secondary) !important;
background: var(--background-secondary) !important;
}
.content [placeholder="Subject…"] {
border-radius: 16px;
padding-left: 12px !important;
background-color: var(--background-primary) !important;
background: var(--background-primary) !important;
}
.listWrapper {
padding: 8px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
background-color: var(--background-primary);
background: var(--background-primary);
margin-top: 26%;
}
.functions {
background-color: var(--background-primary);
background: var(--background-primary);
margin: 0 !important;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
@@ -466,7 +465,7 @@ ol > [data-label] {
.Viewer__newMessage___3ToUb {
border-radius: 0.5rem !important;
font-size: 0.8rem !important;
background-color: var(--background-primary) !important;
background: var(--background-primary) !important;
}
.MessageList__sender___32riy :last-child {
@@ -507,7 +506,7 @@ div > ol:has(.uiFileHandlerWrapper) {
}
#main > .timetablepage > .container {
background-color: var(--background-primary);
background: var(--background-primary);
}
#content {
@@ -693,7 +692,7 @@ div > ol:has(.uiFileHandlerWrapper) {
font-size: 3em !important;
font-weight: 300;
margin: 30px auto 60px;
background-color: var(--background-primary);
background: var(--background-primary);
height: 3em;
align-items: center;
justify-content: center;
@@ -707,7 +706,7 @@ div > ol:has(.uiFileHandlerWrapper) {
width: 94%;
margin: 50px auto;
height: 19em;
background-color: var(--better-main);
background: var(--better-main);
display: flex;
flex-direction: column;
-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
@@ -715,7 +714,7 @@ div > ol:has(.uiFileHandlerWrapper) {
}
.day-container {
background-color: var(--background-primary);
background: var(--background-primary);
transition: 200ms;
width: 100%;
height: 15em;
@@ -728,7 +727,7 @@ div > ol:has(.uiFileHandlerWrapper) {
width: 94%;
margin: 50px auto;
max-height: 60em;
background-color: var(--better-main);
background: var(--better-main);
display: flex;
flex-direction: column;
-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
@@ -736,7 +735,7 @@ div > ol:has(.uiFileHandlerWrapper) {
}
.notice-container {
background-color: var(--better-main);
background: var(--better-main);
width: 100%;
max-height: 55em;
overflow-y: auto;
@@ -788,7 +787,7 @@ div > ol:has(.uiFileHandlerWrapper) {
border: 2px solid var(--better-main);
width: 94%;
margin: 10px auto 50px;
background-color: var(--better-main);
background: var(--better-main);
display: flex;
flex-direction: column;
-webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.3);
@@ -806,7 +805,7 @@ div > ol:has(.uiFileHandlerWrapper) {
}
.shortcuts {
background-color: var(--better-main);
background: var(--better-main);
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
@@ -990,13 +989,13 @@ div > ol:has(.uiFileHandlerWrapper) {
}
.modaliser {
background-color: var(--better-main);
background: var(--better-main);
}
.alert-container {
height: 35em;
width: 22em;
background-color: var(--better-sub);
background: var(--better-sub);
position: absolute;
right: 0;
top: 0;
@@ -1170,7 +1169,7 @@ div > ol:has(.uiFileHandlerWrapper) {
.Input__Input___3RSTI {
transition: background-color 0.5s,border-color 0.5s;
background-color: var(--auto-background);
background: var(--auto-background);
position: relative;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
@@ -1244,7 +1243,7 @@ iframe.userHTML {
.Thermoscore__Thermoscore___2tWMi {
background-image: unset;
background-color: var(--auto-background);
background: var(--auto-background);
}
#toolbar {
@@ -1291,7 +1290,7 @@ iframe.userHTML {
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--better-light);
background: var(--better-light);
}
::-webkit-scrollbar-track {
@@ -1381,16 +1380,16 @@ ul {
}
.legacy-root .uiFileHandler {
background-color: var(--auto-background);
background: var(--auto-background);
border-radius: 1rem;
}
.ResourceList__ResourceList___2z-c1 .legacy-root .uiFileHandler {
background-color: var(--background-primary);
background: var(--background-primary);
}
.legacy-root .uiFileHandler.dragTarget {
background-color: var(--better-main);
background: var(--better-main);
}
.MenuButton__MenuPanel___2q42B {
@@ -1497,13 +1496,13 @@ blurred {
}
.uiSlidePane > .pane > .header {
background-color: var(--better-main);
background: var(--better-main);
}
.content [placeholder="Subject…"] {
padding-left: 12px !important;
border-radius: 1rem;
background-color: var(--background-primary) !important;
background: var(--background-primary) !important;
color: var(--text-primary) !important;
}
@@ -1523,7 +1522,7 @@ blurred {
}
.formattedText > .footer {
background-color: var(--background-primary);
background: var(--background-primary);
border-radius: 1rem;
margin-top: 0.5rem;
}
@@ -1544,7 +1543,7 @@ blurred {
.uiSlidePane > .pane {
color: var(--text-primary);
background-color: var(--auto-background);
background: var(--auto-background);
transform: translateY(100%);
transition:
transform 0.5s ease-in-out,
@@ -2054,7 +2053,7 @@ body {
width: 94%;
margin: 50px auto;
max-height: 60em;
background-color: var(--better-main);
background: var(--better-main);
display: flex;
flex-direction: column;
-webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.3);
@@ -2226,7 +2225,7 @@ body {
/* When the checkbox is checked, add a blue background */
.upcoming-checkbox-container input:checked ~ .upcoming-checkmark {
background-color: var(--item-colour);
background: var(--item-colour);
}
/* Create the checkmark/indicator (hidden when not checked) */
@@ -2378,7 +2377,7 @@ body {
}
.upcoming-items {
background-color: var(--background-primary);
background: var(--background-primary);
transition: 200ms;
width: 100%;
max-height: 55em;
@@ -2532,7 +2531,7 @@ body {
/* When the checkbox is checked, add a blue background */
.upcoming-checkbox-container input:checked ~ .upcoming-checkmark {
background-color: var(--item-colour);
background: var(--item-colour);
}
/* Create the checkmark/indicator (hidden when not checked) */
@@ -2668,7 +2667,7 @@ body {
transform: scale(0);
transition: transform 0.2s;
transform-origin: top;
background-color: var(--background-primary);
background: var(--background-primary);
color: var(--text-primary);
text-align: center;
border-radius: 6px;