added automatic task list dimensions

This commit is contained in:
liyunze 2023-10-07 16:20:24 +08:00
parent 8403145c30
commit 0627afee87
2 changed files with 6 additions and 11 deletions

View file

@ -7,13 +7,10 @@ const configs = (function () {
// animation // animation
const scrollSpeed = 40; // milliseconds const scrollSpeed = 40; // milliseconds
const gapBetweenScrolls = 100; // px const gapBetweenScrolls = 0; // px
// STYLES // STYLES
// task list // task list
const taskListWidth = "400px"; // px
const taskListHeight = "300px"; // px
const taskListBackgroundColor = "#000000"; // hex only const taskListBackgroundColor = "#000000"; // hex only
const taskListBackgroundOpacity = 0; // 0.0 - 1.0 const taskListBackgroundOpacity = 0; // 0.0 - 1.0
@ -56,7 +53,7 @@ const configs = (function () {
const usernameFontWeight = "bold"; // normal or bold or number const usernameFontWeight = "bold"; // normal or bold or number
const usernameColor = "#ffc0cb"; // hex or name or "" for twitch user color const usernameColor = "#ffc0cb"; // hex or name or "" for twitch user color
const taskWidth = "98%"; const taskWidth = "100%";
const taskBackgroundColor = "#000000"; // hex only const taskBackgroundColor = "#000000"; // hex only
const taskBackgroundOpacity = 0.7; // 0.0 - 1.0 const taskBackgroundOpacity = 0.7; // 0.0 - 1.0
@ -256,8 +253,6 @@ const configs = (function () {
}; };
const styles = { const styles = {
taskListWidth,
taskListHeight,
taskListBackgroundColor, taskListBackgroundColor,
taskListBackgroundOpacity, taskListBackgroundOpacity,
taskListBorderWidth, taskListBorderWidth,

View file

@ -1,6 +1,6 @@
:root { :root {
--task-list-width: 400px; --task-list-width: 100%;
--task-list-height: 300px; --task-list-height: 100vh;
--task-list-background-color: rgba(0, 0, 0, 0.8); --task-list-background-color: rgba(0, 0, 0, 0.8);
--task-list-border-width: 2px; --task-list-border-width: 2px;
--task-list-border-color: white; --task-list-border-color: white;
@ -48,8 +48,8 @@ body {
} }
#main-container { #main-container {
width: var(--task-list-width); width: 100%;
height: var(--task-list-height); height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: var(--task-list-vertical-padding) var(--task-list-horizontal-padding); padding: var(--task-list-vertical-padding) var(--task-list-horizontal-padding);