Code cleanup & improvements

This commit is contained in:
Daniel 2023-10-14 02:17:58 +02:00
parent 3f3a209ed0
commit 413699ff56
9 changed files with 31 additions and 19 deletions

View File

@ -6,6 +6,6 @@ body.dark {
--hover: #FFF1;
}
body.dark #theme-switcher .icon::after {
body.dark #theme-switcher i::after {
content: "dark_mode"
}

View File

@ -41,7 +41,7 @@
transition: background .2s;
}
.back .icon {
.back i {
margin: 4px;
width: 56px;
height: 56px;
@ -50,11 +50,11 @@
transition: background .2s;
}
.back .icon:hover {
.back i:hover {
background: var(--hover);
}
.back .icon:after {
.back i:after {
content: "chevron_left";
position: absolute;
top: 50%;
@ -68,7 +68,7 @@
margin: 20px 20px 16px;
}
.header .icon {
.header i {
margin-top: 1px;
margin-right: 10px;
}

View File

@ -12,7 +12,7 @@
object-fit: cover;
}
#theme-switcher .icon::after {
#theme-switcher i::after {
content: "light_mode"
}

View File

@ -22,7 +22,7 @@
background: var(--hover);
}
.box .icon {
.box i {
font-size: 24px;
padding: 20px;
background: hsl(var(--color), 100%, 89%);

View File

@ -15,7 +15,7 @@
transition: background .4s;
}
.setting .icon {
.setting i {
margin-right: 14px;
font-size: 28px;
}

View File

@ -5,7 +5,7 @@
src: url(MaterialSymbolsRounded.woff2) format('woff2');
}
.icon {
i {
font-family: 'Material Symbols Rounded';
font-weight: normal;
font-style: normal;
@ -17,6 +17,7 @@
white-space: nowrap;
word-wrap: normal;
direction: ltr;
display: inline-block;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

View File

@ -10,6 +10,8 @@
<body class="init">
<div id="background"></div>
<div class="main">
<!-- Home page -->
<div class="page home" p="home">
<div class="wrapper">
<div class="home">
@ -19,33 +21,41 @@
</div>
<div class="buttons">
<div id="theme-switcher">
<div class="icon"></div>
<i></i>
<div class="text">Theme</div>
</div>
<div t="services">
<div class="icon">apps</div>
<i>apps</i>
<div class="text">Services</div>
</div>
<div t="more">
<div class="icon">more</div>
<div class="text">More</div>
<div t="settings">
<i>settings</i>
<div class="text">Settings</div>
</div>
</div>
</div>
</div>
<!-- App list -->
<div class="page" p="services">
<div class="back"><div class="icon"></div></div>
<div class="back"><i></i></div>
<div class="wrapper">
<div class="header">
<div class="icon">apps</div>
<i>apps</i>
<div class="text">Services</div>
</div>
<div class="boxes" id="app-list"></div>
</div>
</div>
<div class="page" p="more">
<div class="back"><div class="icon"></div></div>
<!-- Settings -->
<div class="page" p="settings">
<div class="back"><i></i></div>
<div class="wrapper">
<div class="header">
<i>settings</i>
<div class="text">Settings</div>
</div>
<div class="warn none" id="no-cookies">WARNING: due to blocked cookies, all settings will be lost after page reload</div>
<div class="settings" id="settings"></div>
</div>

View File

@ -9,6 +9,7 @@ export default class Main {
init() {
document.title = this.config.get("name")
document.getElementById("favicon").href = this.config.get("icon")
this.initBackgrounds()
}

View File

@ -43,7 +43,7 @@ export default class Settings {
let item = document.createElement("div")
item.classList.add("setting")
item.innerHTML = `
<div class="icon">${icon}</div>
<i>${icon}</i>
<div class="text">
<div class="name">${name}</div>
<div class="desc">${desc}</div>