From cdab6e7d543b90cf1e60c74f8d38767bbce7f3a7 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Fri, 20 May 2022 23:06:25 +0200 Subject: split main.css into multiple files This is easier to manage, and a lot less annoying to navigate, having to scroll through many lines of code is annoying, categorizing makes it easier, I also overall improved the layout of many of the CSS files. --- src/app/css/popups.css | 353 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 353 insertions(+) create mode 100644 src/app/css/popups.css (limited to 'src/app/css/popups.css') diff --git a/src/app/css/popups.css b/src/app/css/popups.css new file mode 100644 index 0000000..bff7d07 --- /dev/null +++ b/src/app/css/popups.css @@ -0,0 +1,353 @@ +@import "theming.css"; + +/* + This stylesheet is meant for the various popups we use, whether it be the + previewer, the browser, the settings menu, or anything alike. +*/ + +.popup { + --spacing: var(--padding); + + z-index: 2; + opacity: 0.0; + position: fixed; + overflow-y: scroll; + top: var(--spacing); + pointer-events: none; + left: var(--spacing); + background: var(--bg); + right: var(--spacing); + bottom: var(--spacing); + transform: scale(0.98); + backdrop-filter: blur(15px); + border-radius: calc(var(--padding) / 3); + + transition-duration: 0.15s; + transition-property: opacity, transform; + transition-timing-function: ease-in-out; +} + +.popup.shown { + opacity: 1.0; + pointer-events: all; + transform: scale(1.0); +} + +.popup.small { + left: 20vw; + right: 20vw; + top: calc(var(--padding) * 2); + bottom: calc(var(--padding) * 2); +} + +#overlay { + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + opacity: 0.0; + position: fixed; + background: var(--bg); + pointer-events: none; + transition: opacity 0.15s ease-in-out; +} + +#overlay.shown { + opacity: 0.8; + pointer-events: all; +} + +/* browser/preview popup { */ +@keyframes fadein { + 0% {opacity: 0.0} + 100% {opacity: 1.0} +} + +#browserEntries { + display: flex; + flex-wrap: wrap; +} + +.popup webview { + width: 78%; + margin: 0 auto; + filter: opacity(1.0); + transition: filter 0.15s ease-in-out; + margin-top: calc(var(--spacing) / 2); + height: calc(100% - calc(var(--spacing) / 2)); +} + +.popup webview.loading { + filter: opacity(0.0); + pointer-events: none; +} + +.popup .el, .popup .misc, .popup .loading { + --spacing: calc(var(--padding) / 2); + --height: calc(var(--padding) * 3.5); + --mischeight: calc(var(--padding) * 1.5); + + animation-duration: 0.15s; + animation-iteration-count: 1; + animation-name: fadein; + animation-fill-mode: forwards; + animation-timing-function: ease-in-out; + + opacity: 0.0; + transition: 0.15s ease-in-out; +} + +.popup .el, .popup #search, +.popup #close, .popup .misc button, +.option .actions select, .option .actions input { + color: white; + display: flex; + align-items: center; + height: var(--height); + margin: var(--spacing); + padding: var(--spacing); + background: var(--selbg); + border-radius: var(--spacing); + width: calc(50% - var(--spacing) * 4); +} + +.popup .misc, .popup #search, .option .actions input { + --height: var(--mischeight); +} + +.popup .misc { + display: flex; +} + +.popup .misc.vertical { + display: block; +} + +.popup .misc.fixed { + width: 100%; + position: fixed; +} + +.popup #search, +.option .actions input, +.option .actions select { + border: none; + outline: none; + transition: filter 0.15s ease-in-out; + width: calc(100% - var(--spacing) * 2); +} + +.popup #search:focus, +.option .actions input:focus, +.option .actions button:active { + filter: brightness(1.5); +} + +.popup .misc button { + --height: calc(var(--padding) * 1.5); + + padding: 0px; + margin-left: 0px; + padding: 0px !important; + width: var(--height) !important; +} + +.popup .misc button img { + opacity: 0.6; + width: var(--height); + transform: scale(0.5); + height: var(--height) !important; +} + +.popup .misc button:last-child { + margin-left: 0px !important; +} + +.popup#preview #close, +.popup .misc.vertical button { + margin: var(--spacing) var(--spacing) 0 auto !important; +} + +.popup .loading { + width: 100%; + color: white; + display: flex; + position: absolute; + text-align: center; + align-items: center; + justify-content: center; + height: calc(100% - var(--mischeight) - var(--height)); +} + +.popup .message { + color: white; + text-align: center; + margin: var(--padding); + width: calc(100% - var(--padding)); +} + +.popup .el .image, .popup .el .image img { + width: var(--height); + height: var(--height); + margin-right: var(--spacing); + border-radius: var(--spacing); +} + +.popup .el .image img.blur { + z-index: -1; + position: relative; + filter: blur(10px); + top: calc(var(--height) * -1 + 5px); +} + +.popup .el .text { + overflow: hidden; +} + +.popup .el .title, .popup .el .description { + height: 1.2em; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.popup .el .title { + font-size: 1.2em; + font-weight: 700; +} + +.popup .message #loadmore { + background: rgb(var(--blue2)); +} + +.popup .el .description {font-size: 0.8em} +.popup .el button { + background: rgb(var(--blue)); + margin-top: var(--spacing); +} + +.popup .el button.info { + background: rgb(var(--blue2)); +} +/* } */ + +/* settings popup { */ + +.popup .options { + color: white; + margin: calc(var(--padding) / 2); +} + +.popup .options .option { + width: 100%; + display: flex; + margin-bottom: var(--padding); + justify-content: space-between; +} + +.popup .overlay { + z-index: 1; + color: white; + opacity: 0.0; + position: fixed; + pointer-events: none; + transform: scale(0.9); + background: var(--selbg); + backdrop-filter: blur(15px); + transition: 0.15s ease-in-out; + padding: calc(var(--spacing) / 2); + border-radius: calc(var(--spacing) / 2); +} + +.popup .overlay.shown { + opacity: 1.0; + pointer-events: all; + transform: scale(1.0); +} + +#options.popup .misc button { + margin-left: 0px; + width: auto !important; + padding-right: calc(var(--padding) / 2) !important; +} + +.check { + display:flex; + cursor: pointer; +} + +.check::before { + width: 1em; + height: 1em; + content: " "; + background-size: 75%; + filter: brightness(1.3); + background-position: center; + background-repeat: no-repeat; + transition: 0.15s ease-in-out; + background-color: var(--selbg); + margin-right: calc(var(--spacing) / 3); + border-radius: calc(var(--spacing) / 4); +} + +.check.checked::before { + background-color: rgb(var(--red)); + background-image: url(../icons/check.png); +} + +.option .text {font-weight: 600} +.option .text .desc { + opacity: 0.8; + font-weight: 500; + font-size: 0.9em; + max-width: 400px; + margin-top: calc(var(--padding) / 3); +} + +.option .actions input, .option .actions select { + width: 100%; + margin: 0px; + --spacing: calc(var(--padding) / 3); +} + +.option[type=array] .actions input { + word-spacing: 15px; + margin-right: 15vw; +} + +.option .actions button { + background: var(--selbg); +} + +.switch { + width: 50px; + height: 25px; + border-radius: 50px; +} + +.switch.on { + background: rgba(var(--red), 0.2) !important; +} + +.switch::after { + left: -5px; + width: 15px; + height: 15px; + content: " "; + display: block; + background: red; + position: relative; + border-radius: 50px; + background: var(--bg); + transition: 0.2s ease-in-out; +} + +.switch.on::after { + left: 15px; + width: 20px; + opacity: 0.5; + background: rgb(var(--red)); +} + +/* } */ -- cgit v1.2.3 From 3d9b35ac675fb942c1fcbc9eb81cc44e3dbeaee3 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Sun, 12 Jun 2022 16:55:28 +0200 Subject: added icons to the settings popup Only on the titles, putting them only on the options or on both the title and options would be far too much, just the title is perfect. --- src/app/css/popups.css | 14 ++++++++++++++ src/app/icons/game.png | Bin 0 -> 1454 bytes src/app/icons/language.png | Bin 0 -> 7132 bytes src/app/icons/updates.png | Bin 0 -> 10300 bytes src/app/index.html | 20 ++++++++++++++++---- 5 files changed, 30 insertions(+), 4 deletions(-) create mode 100644 src/app/icons/game.png create mode 100644 src/app/icons/language.png create mode 100644 src/app/icons/updates.png (limited to 'src/app/css/popups.css') diff --git a/src/app/css/popups.css b/src/app/css/popups.css index bff7d07..59f6630 100644 --- a/src/app/css/popups.css +++ b/src/app/css/popups.css @@ -350,4 +350,18 @@ background: rgb(var(--red)); } +.title { + display: flex; +} + +.title img { + width: 30px; + height: 30px; + margin: auto 0; +} + +.title h2 { + margin-left: calc(var(--padding) / 3); +} + /* } */ diff --git a/src/app/icons/game.png b/src/app/icons/game.png new file mode 100644 index 0000000..7db058f Binary files /dev/null and b/src/app/icons/game.png differ diff --git a/src/app/icons/language.png b/src/app/icons/language.png new file mode 100644 index 0000000..011e1f9 Binary files /dev/null and b/src/app/icons/language.png differ diff --git a/src/app/icons/updates.png b/src/app/icons/updates.png new file mode 100644 index 0000000..4b505ee Binary files /dev/null and b/src/app/icons/updates.png differ diff --git a/src/app/index.html b/src/app/index.html index 0255dd6..819caac 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -36,7 +36,10 @@
-

%%gui.settings.title.ns%%

+
+ +

%%gui.settings.title.ns%%

+
%%gui.settings.nsargs.title%% @@ -48,7 +51,10 @@
-

%%gui.settings.title.language%%

+
+ +

%%gui.settings.title.language%%

+
%%gui.settings.autolang.title%% @@ -73,7 +79,10 @@
-

%%gui.settings.title.updates%%

+
+ +

%%gui.settings.title.updates%%

+
%%gui.settings.autoupdate.title%% @@ -107,7 +116,10 @@
-

%%gui.settings.title.misc%%

+
+ +

%%gui.settings.title.misc%%

+
%%gui.settings.originkill.title%% -- cgit v1.2.3 From b591b5166d6953fe868ccb772045fe77d9a9813e Mon Sep 17 00:00:00 2001 From: 0neGal Date: Sun, 12 Jun 2022 17:00:35 +0200 Subject: tiny animations The settings button now turns like a cog when hovered, and there's a slight animation when you hover a settings switch. --- src/app/css/popups.css | 4 ++++ src/app/main.css | 4 ++++ 2 files changed, 8 insertions(+) (limited to 'src/app/css/popups.css') diff --git a/src/app/css/popups.css b/src/app/css/popups.css index 59f6630..826955b 100644 --- a/src/app/css/popups.css +++ b/src/app/css/popups.css @@ -350,6 +350,10 @@ background: rgb(var(--red)); } +.switch.on:hover::after { + transform: scale(1.2); +} + .title { display: flex; } diff --git a/src/app/main.css b/src/app/main.css index ce45f35..f39c5a1 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -59,6 +59,10 @@ button:active {filter: brightness(90%)} #winbtns #minimize {background-image: url("icons/minimize.png")} #winbtns #settings {background-image: url("icons/settings.png")} +#winbtns #settings:hover { + transform: rotate(90deg); +} + #winbtns div:hover {opacity: 1.0} #winbtns div:active {transform: scale(0.95)} /* } */ -- cgit v1.2.3