torjus/ministream-frontend
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Install and run prettier

Browse Source
This commit is contained in:
Torjus Håkestad
2023-12-06 03:17:13 +01:00
parent dc5d75a2dd
commit 3fd391efc7
14 changed files with 482 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/fonts.css
View File

@@ -1 +1 @@
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;600&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@300;600&display=swap");

176
src/css/style.css
View File

@@ -1,162 +1,162 @@
:root {
--menu-header-color: #1B1F22;
--menu-header-text: #FFEBF4;
--menu-background-color: #435058;
--menu-item-color: #4F5F69;
--menu-item-hover: #607480;
--menu-selected-color: #7F929F;
--main-background: #121517;
--menu-header-color: #1b1f22;
--menu-header-text: #ffebf4;
--menu-background-color: #435058;
--menu-item-color: #4f5f69;
--menu-item-hover: #607480;
--menu-selected-color: #7f929f;
--main-background: #121517;
}
body {
overflow: hidden;
height: 100vh;
margin: 0px;
overflow: hidden;
height: 100vh;
margin: 0px;
}
#main {
flex: 1 1 auto;
height: 100%;
background-color: var(--main-background);
color: var(--menu-header-text);
font-family: 'Prompt', sans-serif;
font-weight: 600;
flex: 1 1 auto;
height: 100%;
background-color: var(--main-background);
color: var(--menu-header-text);
font-family: "Prompt", sans-serif;
font-weight: 600;
}
.loader-wrapper {
margin-top: 10em;
width: 100%;
display: flex;
justify-content: center;
margin-top: 10em;
width: 100%;
display: flex;
justify-content: center;
}
.loader {
display: flex;
width: min-content;
vertical-align: middle;
display: flex;
width: min-content;
vertical-align: middle;
}
.loader .spinner {
margin-top: auto;
margin-bottom: auto;
margin-top: auto;
margin-bottom: auto;
}
.loader .loading-text {
margin-top: auto;
margin-bottom: auto;
margin-left: 0.5em;
white-space: nowrap;
margin-top: auto;
margin-bottom: auto;
margin-left: 0.5em;
white-space: nowrap;
}
.video-wrapper {
justify-content: left;
align-items: left;
justify-content: left;
align-items: left;
}
video {
position: absolute;
height: 100%;
width: auto;
position: absolute;
height: 100%;
width: auto;
}
main {
overflow-y: auto;
overflow-y: auto;
}
aside {
width: max-content;
flex: 1 0 auto;
margin-left: 0px;
padding-left: 0px;
background-color: var(--menu-background-color);
height: 100%;
width: max-content;
flex: 1 0 auto;
margin-left: 0px;
padding-left: 0px;
background-color: var(--menu-background-color);
height: 100%;
}
.menu-list {
list-style: none;
margin-top: 0px;
list-style: none;
margin-top: 0px;
}
ul.menu-list {
padding-left: 0;
padding-left: 0;
}
a.menu-link {
padding-left: 2em;
font-family: 'Prompt', sans-serif;
font-weight: 300;
font-size: larger;
margin-right: auto;
padding-left: 2em;
font-family: "Prompt", sans-serif;
font-weight: 300;
font-size: larger;
margin-right: auto;
}
.menu-heading {
padding-left: 1em;
padding-right: 1em;
background-color: var(--menu-header-color);
color: var(--menu-header-text);
font-size: larger;
font-family: 'Prompt', sans-serif;
font-weight: 600;
padding-left: 1em;
padding-right: 1em;
background-color: var(--menu-header-color);
color: var(--menu-header-text);
font-size: larger;
font-family: "Prompt", sans-serif;
font-weight: 600;
}
a.menu-heading {
text-decoration: none;
text-decoration: none;
}
.menu-item a {
color: var(--menu-header-text);
text-decoration: none;
color: var(--menu-header-text);
text-decoration: none;
}
.menu-item {
cursor: pointer;
display: flex;
cursor: pointer;
display: flex;
}
.menu-viewcount {
font-family: 'Prompt', sans-serif;
font-size: larger;
font-weight: 300;
color: var(--menu-header-text);
margin-top: 0;
margin-bottom: 0;
padding-right: 1em;
height: 100%;
font-family: "Prompt", sans-serif;
font-size: larger;
font-weight: 300;
color: var(--menu-header-text);
margin-top: 0;
margin-bottom: 0;
padding-right: 1em;
height: 100%;
}
li.menu-item {
background-color: var(--menu-item-color);
margin-top: 1px;
background-color: var(--menu-item-color);
margin-top: 1px;
}
li.menu-item:hover {
background-color: var(--menu-item-hover);
background-color: var(--menu-item-hover);
}
li.menu-selected {
background-color: var(--menu-selected-color)
background-color: var(--menu-selected-color);
}
#app {
display: flex;
height: 100%;
display: flex;
height: 100%;
}
.spinner {
border: 4px solid var(--menu-header-text);
border-top: 4px solid var(--menu-selected-color);
border-radius: 50%;
width: 10px;
height: 10px;
animation: spin 1s linear infinite;
border: 4px solid var(--menu-header-text);
border-top: 4px solid var(--menu-selected-color);
border-radius: 50%;
width: 10px;
height: 10px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
100% {
transform: rotate(360deg);
}
}