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.

1 files changed, 0 insertions, 153 deletions

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 { */