mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 03:34:40 +00:00
UI improvements + new features
This commit is contained in:
SethBurkart123
+66
-11
@@ -25,6 +25,33 @@ function SetDisplayNone(ElementName) {
|
||||
return `li[data-key=${ElementName}]{display:var(--menuHidden) !important; transition: 1s;}`;
|
||||
}
|
||||
|
||||
function animbkEnable (item) {
|
||||
if (item.animatedbk) {
|
||||
CreateBackground();
|
||||
} else {
|
||||
RemoveBackground();
|
||||
document.getElementById("container").style.background = "var(--background-secondary)";
|
||||
}
|
||||
}
|
||||
|
||||
function bkValues (item) {
|
||||
const bg = document.getElementsByClassName("bg");
|
||||
const bg2 = document.getElementsByClassName("bg2");
|
||||
const bg3 = document.getElementsByClassName("bg3");
|
||||
const value = 200 - item.bksliderinput;
|
||||
|
||||
const minDuration = 1; // minimum duration in seconds
|
||||
const maxDuration = 10; // maximum duration in seconds
|
||||
const durationRange = maxDuration - minDuration;
|
||||
const bgDuration = minDuration + (value / 200) * durationRange;
|
||||
const bg2Duration = minDuration + ((value / 200) + 0.05) * durationRange;
|
||||
const bg3Duration = minDuration + ((value / 200) + 0.1) * durationRange;
|
||||
|
||||
bg[0].style.animationDuration = `${bgDuration}s`;
|
||||
bg2[0].style.animationDuration = `${bg2Duration}s`;
|
||||
bg3[0].style.animationDuration = `${bg3Duration}s`;
|
||||
}
|
||||
|
||||
function ApplyCSSToHiddenMenuItems() {
|
||||
var stylesheetInnerText = "";
|
||||
chrome.storage.local.get(null, function (result) {
|
||||
@@ -190,6 +217,15 @@ function CreateBackground() {
|
||||
bklocation.insertBefore(bk3, menu);
|
||||
}
|
||||
|
||||
function RemoveBackground() {
|
||||
var bk = document.getElementsByClassName("bg");
|
||||
var bk2 = document.getElementsByClassName("bg2");
|
||||
var bk3 = document.getElementsByClassName("bg3");
|
||||
bk[0].remove();
|
||||
bk2[0].remove();
|
||||
bk3[0].remove();
|
||||
}
|
||||
|
||||
function waitForElm(selector) {
|
||||
return new Promise((resolve) => {
|
||||
if (document.querySelector(selector)) {
|
||||
@@ -949,6 +985,8 @@ function RunExtensionSettingsJS() {
|
||||
//const mainpage = document.querySelector("#mainpage");
|
||||
const colorpicker = document.querySelector("#colorpicker");
|
||||
const animatedbk = document.querySelector("#animatedbk");
|
||||
const bkslider = document.querySelector("#bksliderinput");
|
||||
|
||||
const customshortcutbutton = document.getElementsByClassName(
|
||||
"custom-shortcuts-button",
|
||||
)[0];
|
||||
@@ -1015,6 +1053,7 @@ function RunExtensionSettingsJS() {
|
||||
});
|
||||
chrome.storage.local.set({ lessonalert: lessonalert.checked });
|
||||
chrome.storage.local.set({ animatedbk: animatedbk.checked });
|
||||
chrome.storage.local.set({ bksliderinput: bkslider.value });
|
||||
}
|
||||
|
||||
function StoreAllSettings() {
|
||||
@@ -1044,6 +1083,7 @@ function RunExtensionSettingsJS() {
|
||||
notificationcollector.checked = restoredSettings.notificationcollector;
|
||||
lessonalert.checked = restoredSettings.lessonalert;
|
||||
animatedbk.checked = restoredSettings.animatedbk;
|
||||
bkslider.value = restoredSettings.bksliderinput;
|
||||
chrome.storage.local.get(["shortcuts"], function (result) {
|
||||
var shortcuts = Object.values(result)[0];
|
||||
for (var i = 0; i < shortcutbuttons.length; i++) {
|
||||
@@ -1223,14 +1263,22 @@ function RunExtensionSettingsJS() {
|
||||
onoffselection.addEventListener("change", storeSettings);
|
||||
notificationcollector.addEventListener("change", storeNotificationSettings);
|
||||
lessonalert.addEventListener("change", storeNotificationSettings);
|
||||
|
||||
animatedbk.addEventListener("change", storeNotificationSettings);
|
||||
bkslider.addEventListener("change", () => {
|
||||
storeNotificationSettings();
|
||||
chrome.storage.local.get(["bksliderinput"]).then(bkValues);
|
||||
});
|
||||
animatedbk.addEventListener("change", () => {
|
||||
storeNotificationSettings();
|
||||
animbkEnable({ animatedbk: animatedbk.checked });
|
||||
});
|
||||
|
||||
for (let i = 0; i < allinputs.length; i++) {
|
||||
if (
|
||||
allinputs[i].id != "colorpicker" &&
|
||||
allinputs[i].id != "shortcuturl" &&
|
||||
allinputs[i].id != "shortcutname"
|
||||
allinputs[i].id != "shortcutname" &&
|
||||
allinputs[i].id != "bkslider" &&
|
||||
allinputs[i].id != "bksliderinput"
|
||||
) {
|
||||
allinputs[i].addEventListener("change", () => {
|
||||
applybutton.style.left = "4px";
|
||||
@@ -1488,6 +1536,16 @@ function CallExtensionSettings() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="text-container">
|
||||
<h1 class="addonitem">Animated Background Speed</h1>
|
||||
<p class="item subitem">Controls the speed of the animated background.</p>
|
||||
</div>
|
||||
<div class="bkslider">
|
||||
<input type="range" id="bksliderinput" name="Animated Background Slider" min="1" max="200" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="text-container">
|
||||
<h1 class="addonitem">Custom Theme Colour</h1>
|
||||
@@ -1856,14 +1914,11 @@ function AddBetterSEQTAElements(toggle) {
|
||||
if (toggle) {
|
||||
// Creates Home menu button and appends it as the first child of the list
|
||||
|
||||
chrome.storage.local.get(["animatedbk"], function (result) {
|
||||
if (result.animatedbk) {
|
||||
CreateBackground();
|
||||
} else {
|
||||
document.getElementById("container").style.background =
|
||||
"var(--background-secondary)";
|
||||
}
|
||||
});
|
||||
const result = chrome.storage.local.get(["animatedbk"]);
|
||||
const sliderVal = chrome.storage.local.get(["bksliderinput"]);
|
||||
|
||||
result.then(animbkEnable);
|
||||
sliderVal.then(bkValues);
|
||||
|
||||
// Load darkmode state
|
||||
chrome.storage.local.get(["DarkMode"], function (result) {
|
||||
|
||||
@@ -21,6 +21,10 @@ span {
|
||||
0 0 1em #161616;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
blockquote.forward > .preamble {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
}
|
||||
@@ -36,3 +40,26 @@ blockquote.forward > .preamble > .sender > .label {
|
||||
table th {
|
||||
background-color: #161616;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.forward {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.preamble {
|
||||
border-top-left-radius: 1rem;
|
||||
border-top-right-radius: 1rem;
|
||||
}
|
||||
+193
-19
@@ -59,6 +59,28 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
#bksliderinput {
|
||||
background-color: #20e060 !important;
|
||||
border-radius: 16px !important;
|
||||
border: none !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#bksliderinput::-webkit-slider-thumb {
|
||||
-webkit-appearance: none !important;
|
||||
appearance: none !important;
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
transform: scale(1.5) !important;
|
||||
background: #86f078 !important;
|
||||
cursor: pointer !important;
|
||||
border-radius: 50% !important;
|
||||
border: 1px solid #20e060 !important;
|
||||
}
|
||||
|
||||
.connectedNotificationsWrapper > div > button > svg > g {
|
||||
fill: var(--background-primary) !important;
|
||||
}
|
||||
@@ -234,9 +256,15 @@ html {
|
||||
|
||||
.listWrapper:not(:has(.list *)) + .functions,
|
||||
.listWrapper:not(:has(.list *)) {
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.listWrapper + .functions,
|
||||
.listWrapper {
|
||||
transition: opacity 500ms;
|
||||
}
|
||||
|
||||
|
||||
[data-type="student"] .header {
|
||||
color: black !important;
|
||||
}
|
||||
@@ -258,6 +286,7 @@ ol:has(.MessageList__avatar___2wxyb svg) {
|
||||
150,
|
||||
150
|
||||
) !important; /* color of the scroll thumb */
|
||||
|
||||
}
|
||||
|
||||
.content .footer {
|
||||
@@ -269,6 +298,10 @@ ol:has(.MessageList__avatar___2wxyb svg) {
|
||||
background-color: var(--background-primary) !important;
|
||||
}
|
||||
|
||||
.MessageList__MessageList___3DxoC .footer {
|
||||
background-color: var(--background-secondary) !important;
|
||||
}
|
||||
|
||||
.content [placeholder="Subject…"] {
|
||||
border-radius: 16px;
|
||||
padding-left: 12px !important;
|
||||
@@ -320,11 +353,6 @@ ol:has(.MessageList__avatar___2wxyb svg) {
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.uiFileHandler {
|
||||
-webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0) !important;
|
||||
box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.uiSlidePane {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
transition-duration: 500ms !important;
|
||||
@@ -344,6 +372,32 @@ ol:has(.MessageList__avatar___2wxyb svg) {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#main .timetablepage .quickbar {
|
||||
border: none;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.quickbar .actions {
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
}
|
||||
|
||||
.quickbar .attendance {
|
||||
border-top-left-radius: 100%;
|
||||
border-bottom-right-radius: 1rem !important;
|
||||
}
|
||||
|
||||
#main > .timetablepage > .quickbar.below::before {
|
||||
border-bottom-color: var(--background-primary);
|
||||
top: -1.75rem;
|
||||
}
|
||||
|
||||
#main .timetablepage .actions a,
|
||||
#main .timetablepage .actions button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.document {
|
||||
border-radius: 32px !important;
|
||||
}
|
||||
@@ -406,11 +460,20 @@ td.colourBar {
|
||||
#main > .reports > .item > .report {
|
||||
filter: brightness(1) !important;
|
||||
border-radius: 16px !important;
|
||||
border: 2px solid lightgray !important;
|
||||
border: 2px solid var(--better-main) !important;
|
||||
transform: scale(0.97);
|
||||
transition: transform 0.2s ease-out !important;
|
||||
}
|
||||
|
||||
#main > .reports > .item > .report:hover {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
#main > .reports > .item {
|
||||
box-shadow: none !important;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
ol > [data-message] {
|
||||
@@ -1074,10 +1137,24 @@ div > ol:has(.uiFileHandlerWrapper) {
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.notifications__details___193F4 {
|
||||
max-width: 80%;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.notifications__details___193F4 div {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#main > .messages {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.Overview__details___2Zlnr {
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.Viewer__sidebar___1Btu4 {
|
||||
background: var(--auto-background);
|
||||
color: var(--text-primary);
|
||||
@@ -1092,6 +1169,12 @@ div > ol:has(.uiFileHandlerWrapper) {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.MessageList__MessageList___3DxoC .Button__Button___3SRFo {
|
||||
width: 100%;
|
||||
min-height: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.MessageList__MessageList___3DxoC {
|
||||
background: var(--background-primary);
|
||||
}
|
||||
@@ -1155,7 +1238,9 @@ iframe.userHTML {
|
||||
}
|
||||
|
||||
#main > .reports {
|
||||
background: var(--auto-background);
|
||||
background: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#main > .reports > .item > .report > .year {
|
||||
@@ -1163,6 +1248,14 @@ iframe.userHTML {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.Spinner__Spinner___CStEb > svg {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.Spinner__Spinner___CStEb > svg > path {
|
||||
stroke: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
#main > .reports > .item > .report > .term {
|
||||
color: var(--text-color);
|
||||
background: var(--better-main);
|
||||
@@ -1224,14 +1317,6 @@ iframe.userHTML {
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--better-light);
|
||||
background-clip: padding-box;
|
||||
border: 2px solid transparent;
|
||||
transition: 1s;
|
||||
border-radius: 1rem !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:vertical:hover,
|
||||
::-webkit-scrollbar-thumb:horizontal:hover {
|
||||
background-color: var(--better-light);
|
||||
@@ -1277,6 +1362,26 @@ ul {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.SelectedAssessment__SelectedAssessment___3Bu5D > .SelectedAssessment__meta___1gq_y > .SelectedAssessment__clearBtn___21D85 {
|
||||
background: var(--better-main);
|
||||
}
|
||||
|
||||
.SelectedAssessment__SelectedAssessment___3Bu5D > .SelectedAssessment__meta___1gq_y {
|
||||
border-bottom: 1px solid var(--better-main);
|
||||
}
|
||||
|
||||
.TabSet__TabSet___Vo-SZ > ol.TabSet__tabs___1RRZk > li.TabSet__selected___1psfF {
|
||||
border-bottom-color: var(--better-main);
|
||||
}
|
||||
|
||||
.TabSet__TabSet___Vo-SZ > ol.TabSet__tabs___1RRZk {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.TabSet__TabSet___Vo-SZ > ol.TabSet__tabs___1RRZk > li:hover {
|
||||
box-shadow: inset 0 -1px var(--better-main);
|
||||
}
|
||||
|
||||
.TabSet__TabSet___Vo-SZ > .TabSet__tabContainer___3iIRe {
|
||||
background: unset;
|
||||
}
|
||||
@@ -1285,21 +1390,71 @@ ul {
|
||||
background: var(--background-primary);
|
||||
}
|
||||
|
||||
.legacy-root .uiFileHandler {
|
||||
background: var(--auto-background);
|
||||
.uiFileHandler {
|
||||
-webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0) !important;
|
||||
box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0) !important;
|
||||
background: var(--background-primary);
|
||||
margin: 8px 0px 0px 0px;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.mediaWrapper, .mediaRecorder, .MediaRecorder__MediaRecorder___2c2_M {
|
||||
border-top-left-radius: 1rem;
|
||||
border-top-right-radius: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.MediaRecorder__MediaRecorder___2c2_M {
|
||||
background: var(--background-primary);
|
||||
}
|
||||
|
||||
.legacy-root .uiFileHandler {
|
||||
background-color: var(--auto-background);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.ResourceList__ResourceList___2z-c1 .legacy-root .uiFileHandler {
|
||||
background-color: var(--background-primary);
|
||||
}
|
||||
|
||||
.legacy-root .uiFileHandler.dragTarget {
|
||||
background-color: var(--better-main);
|
||||
}
|
||||
|
||||
.MenuButton__MenuPanel___2q42B {
|
||||
background: var(--background-primary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dailycal > .header {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
#main > .timetablepage {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
#main > .timetablepage > .container > .dailycal {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
#main > .timetablepage > .note {
|
||||
color: var(--text-primary);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.days td {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.entry.class {
|
||||
width: 100% !important;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.timetablepage .dailycal>.content>.wrapper>.days>tbody>tr>td>.entriesWrapper {
|
||||
min-width: 0;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.uiFileHandler .uiButton {
|
||||
@@ -1308,6 +1463,11 @@ ul {
|
||||
margin-top: 0.25rem !important;
|
||||
}
|
||||
|
||||
.uiFileHandlerPanel::before {
|
||||
border: 12px solid rgba(0, 0, 0, 0);
|
||||
border-top-color: var(--background-primary);
|
||||
}
|
||||
|
||||
.uiButton:hover {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@@ -1317,8 +1477,18 @@ ul {
|
||||
}
|
||||
|
||||
.uiFileHandlerPanel {
|
||||
background: var(--better-main);
|
||||
background: var(--background-primary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.sources .uiButton {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.MediaRecorder__preview___1hQqY, .MediaRecorder__actions___3Jjvp {
|
||||
background: var(--background-primary);
|
||||
}
|
||||
|
||||
.Rubric__Rubric___2AAKS > .Rubric__line___JCC3Y {
|
||||
@@ -1428,6 +1598,10 @@ blurred {
|
||||
background: #797979;
|
||||
}
|
||||
|
||||
.legacy-root button, .legacy-root a {
|
||||
background: var(--background-primary);
|
||||
}
|
||||
|
||||
.cke_toolbox > .cke_toolbar .cke_combo_on > .cke_combo_button,
|
||||
.cke_toolbox > .cke_toolbar .cke_button_on {
|
||||
background-color: #797979 !important;
|
||||
|
||||
Reference in New Issue
Block a user