added automatic task list dimensions
This commit is contained in:
parent
8403145c30
commit
0627afee87
2 changed files with 6 additions and 11 deletions
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue