aboutsummaryrefslogtreecommitdiff
path: root/src/app/css
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2023-01-27 11:54:36 +0100
committer0neGal <mail@0negal.com>2023-01-28 01:18:45 +0100
commit7fea75e8b064e5ca241a044e6efb3a315b6cd882 (patch)
treeb5b1f67676457c8fef9bff31b2a0f21a114bc5f5 /src/app/css
parentfeef5a6c98239a2c08433aec1bbc4e5510a79e32 (diff)
downloadViper-7fea75e8b064e5ca241a044e6efb3a315b6cd882.tar.gz
Viper-7fea75e8b064e5ca241a044e6efb3a315b6cd882.zip
initial draft for redesign of the mod list
The current design for the installed mods is not exactly the best. And it has been due for a redesign for quite a while, I'm finally starting work on this.
Diffstat (limited to 'src/app/css')
-rw-r--r--src/app/css/grid.css148
-rw-r--r--src/app/css/launcher.css12
-rw-r--r--src/app/css/popups.css153
-rw-r--r--src/app/css/theming.css9
4 files changed, 160 insertions, 162 deletions
diff --git a/src/app/css/grid.css b/src/app/css/grid.css
new file mode 100644
index 0000000..5c4019c
--- /dev/null
+++ b/src/app/css/grid.css
@@ -0,0 +1,148 @@
+.grid .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;
+}
+
+.grid .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));
+}
+
+.grid .el .image, .grid .el .image img {
+ width: var(--height);
+ height: var(--height);
+ margin-right: var(--spacing);
+ border-radius: var(--spacing);
+}
+
+.grid .el .image img.blur {
+ z-index: -1;
+ position: relative;
+ filter: blur(10px);
+ top: calc(var(--height) * -1 + 5px);
+}
+
+.grid .el .text {
+ overflow: hidden;
+}
+
+.grid .el .title, .grid .el .description {
+ height: 1.2em;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.grid .el .title {
+ font-size: 1.2em;
+ font-weight: 700;
+}
+
+.popup .message #loadmore {
+ background: rgb(var(--blue2));
+}
+
+.grid .el .description {font-size: 0.8em}
+.grid .el button {
+ background: rgb(var(--blue));
+ margin-top: var(--spacing);
+}
+
+.grid .el button.info {
+ background: rgb(var(--blue2));
+}
+
diff --git a/src/app/css/launcher.css b/src/app/css/launcher.css
index 6e7b578..5698179 100644
--- a/src/app/css/launcher.css
+++ b/src/app/css/launcher.css
@@ -242,14 +242,6 @@
background: rgb(var(--red)) !important;
}
-#installmod {background: rgb(var(--blue))}
-#findmod {background: rgb(var(--blue2))}
-
-#togglemod {background: rgb(var(--orange))}
-#toggleall {background: rgb(var(--orange2))}
-
-#removemod {background: rgb(var(--red))}
-#removeall {background: rgb(var(--red2))}
button:disabled {
opacity: 0.5;
pointer-events: none;
@@ -270,13 +262,15 @@ code {
}
#nsMods .line {
+ width: 100%;
display: flex;
align-items: center;
+ margin: calc(var(--padding) / 2);
margin-top: calc(var(--padding) / 2);
}
#modsdiv {
- height: 50vh;
+ height: 80vh;
overflow-y: scroll;
border-radius: 5px;
background: var(--bg);
diff --git a/src/app/css/popups.css b/src/app/css/popups.css
index 826955b..70a39a6 100644
--- a/src/app/css/popups.css
+++ b/src/app/css/popups.css
@@ -64,11 +64,6 @@
100% {opacity: 1.0}
}
-#browserEntries {
- display: flex;
- flex-wrap: wrap;
-}
-
.popup webview {
width: 78%;
margin: 0 auto;
@@ -82,154 +77,6 @@
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 { */
diff --git a/src/app/css/theming.css b/src/app/css/theming.css
index 2d45b1d..6d7e223 100644
--- a/src/app/css/theming.css
+++ b/src/app/css/theming.css
@@ -60,3 +60,12 @@ a:hover {
color: black !important;
background: rgb(var(--red)) !important;
}
+
+.blue {background: rgb(var(--blue)) !important}
+.blue2 {background: rgb(var(--blue2)) !important}
+
+.orange {background: rgb(var(--orange)) !important}
+.orange2 {background: rgb(var(--orange2)) !important}
+
+.red {background: rgb(var(--red)) !important}
+.red2 {background: rgb(var(--red2)) !important}