icons css.

schwarzlichtbezirk · Oct 31, 2022 · 12ff3ba · 12ff3ba
1 parent 3a433cf
commit 12ff3ba
Show file tree

Hide file tree

Showing 32 changed files with 557 additions and 386 deletions.
diff --git a/frontend/devmode/fileitem.js b/frontend/devmode/fileitem.js
@@ -300,9 +300,9 @@ const iconsvgsize = {
 };
 
 const iconwdh = {
-	sm: 'smimgw',
-	md: 'mdimgw',
-	lg: 'lgimgw',
+	sm: 'icon-wdh-sm',
+	md: 'icon-wdh-md',
+	lg: 'icon-wdh-lg',
 };
 
 const VueIcon = {

diff --git a/frontend/skin/blue/card.css b/frontend/skin/blue/card.css
@@ -88,40 +88,6 @@
 		background-color: rgba(255, 255, 255, 0.25);
 	}
 
-.imgscale {
-	object-position: center center;
-	object-fit: scale-down;
-}
-
-.imgcontain {
-	object-position: center center;
-	object-fit: contain;
-}
-
-.smimgw {
-	width: 96px;
-}
-
-.smimgh {
-	height: 96px;
-}
-
-.mdimgw {
-	width: 176px;
-}
-
-.mdimgh {
-	height: 176px;
-}
-
-.lgimgw {
-	width: 256px;
-}
-
-.lgimgh {
-	height: 256px;
-}
-
 .itemfont {
 	line-height: 1.25;
 	font-size: 0.72rem;

diff --git a/frontend/skin/blue/icon.css b/frontend/skin/blue/icon.css
@@ -0,0 +1,62 @@
+
+.imgscale {
+	object-position: center center;
+	object-fit: scale-down;
+}
+
+.imgcontain {
+	object-position: center center;
+	object-fit: contain;
+}
+
+.icon-pix-xs {
+	max-width: 48px;
+	max-height: 48px;
+}
+
+.icon-svg-xs {
+	width: 48px;
+	height: 48px;
+}
+
+.icon-pix-sm {
+	max-width: 96px;
+	max-height: 96px;
+}
+
+.icon-svg-sm {
+	width: 96px;
+	height: 96px;
+}
+
+.icon-pix-md {
+	max-width: 176px;
+	max-height: 176px;
+}
+
+.icon-svg-md {
+	width: 176px;
+	height: 176px;
+}
+
+.icon-pix-lg {
+	max-width: 256px;
+	max-height: 256px;
+}
+
+.icon-svg-lg {
+	width: 256px;
+	height: 256px;
+}
+
+.icon-wdh-sm {
+	width: 96px;
+}
+
+.icon-wdh-md {
+	width: 176px;
+}
+
+.icon-wdh-lg {
+	width: 256px;
+}
diff --git a/frontend/skin/blue/page.css b/frontend/skin/blue/page.css
@@ -21,6 +21,11 @@ body {
 		background: #7c8dad;
 	}
 
+.menu-scrollable {
+	max-height: 20rem;
+	overflow-y: scroll;
+}
+
 .bg-tool {
 	background-color: #4d6082;
 }

diff --git a/frontend/skin/blue/slider.css b/frontend/skin/blue/slider.css
@@ -60,29 +60,24 @@
 }
 
 .photothumbs {
-	background-color: silver;
+	background-color: powderblue;
 	border-radius: 0.25rem;
 }
 
 /* Thumbnail slider section */
 
-.thumbslider {
-	height: 80px;
+.thumbslider .thumb {
+	opacity: 0.75;
+	border: 0.25rem solid Silver;
 }
 
-	.thumbslider .thumb {
-		height: 100%;
-		opacity: 0.75;
-		border: 0.25rem solid Silver;
+	.thumbslider .thumb:hover {
+		opacity: 1;
+		border: 0.25rem solid lightsteelblue;
 	}
 
-		.thumbslider .thumb:hover {
-			opacity: 1;
-			border: 0.25rem solid SpringGreen;
-		}
-
-		.thumbslider .thumb.active {
-			z-index: 1036;
-			opacity: 1;
-			border: 0.25rem solid MediumSpringGreen;
-		}
+	.thumbslider .thumb.active {
+		z-index: 1036;
+		opacity: 1;
+		border: 0.25rem solid deepskyblue;
+	}
diff --git a/frontend/skin/coffee-beans/card.css b/frontend/skin/coffee-beans/card.css
@@ -93,40 +93,6 @@
 		background: rgba(128, 0, 128, 0.5); /* Purple */
 	}
 
-.imgscale {
-	object-position: center center;
-	object-fit: scale-down;
-}
-
-.imgcontain {
-	object-position: center center;
-	object-fit: contain;
-}
-
-.smimgw {
-	width: 96px;
-}
-
-.smimgh {
-	height: 96px;
-}
-
-.mdimgw {
-	width: 176px;
-}
-
-.mdimgh {
-	height: 176px;
-}
-
-.lgimgw {
-	width: 256px;
-}
-
-.lgimgh {
-	height: 256px;
-}
-
 .itemfont {
 	line-height: 1.25;
 	font-size: 0.72rem;

diff --git a/frontend/skin/coffee-beans/icon.css b/frontend/skin/coffee-beans/icon.css
@@ -0,0 +1,62 @@
+
+.imgscale {
+	object-position: center center;
+	object-fit: scale-down;
+}
+
+.imgcontain {
+	object-position: center center;
+	object-fit: contain;
+}
+
+.icon-pix-xs {
+	max-width: 48px;
+	max-height: 48px;
+}
+
+.icon-svg-xs {
+	width: 48px;
+	height: 48px;
+}
+
+.icon-pix-sm {
+	max-width: 96px;
+	max-height: 96px;
+}
+
+.icon-svg-sm {
+	width: 96px;
+	height: 96px;
+}
+
+.icon-pix-md {
+	max-width: 176px;
+	max-height: 176px;
+}
+
+.icon-svg-md {
+	width: 176px;
+	height: 176px;
+}
+
+.icon-pix-lg {
+	max-width: 256px;
+	max-height: 256px;
+}
+
+.icon-svg-lg {
+	width: 256px;
+	height: 256px;
+}
+
+.icon-wdh-sm {
+	width: 96px;
+}
+
+.icon-wdh-md {
+	width: 176px;
+}
+
+.icon-wdh-lg {
+	width: 256px;
+}
diff --git a/frontend/skin/coffee-beans/page.css b/frontend/skin/coffee-beans/page.css
@@ -39,6 +39,11 @@ a, .btn-link {
 	color: DarkKhaki;
 }
 
+.menu-scrollable {
+	max-height: 20rem;
+	overflow-y: scroll;
+}
+
 .bg-tool {
 	background-color: #754b28;
 }

diff --git a/frontend/skin/coffee-beans/slider.css b/frontend/skin/coffee-beans/slider.css
@@ -60,29 +60,24 @@
 }
 
 .photothumbs {
-	background-color: silver;
+	background-color: peru;
 	border-radius: 0.25rem;
 }
 
 /* Thumbnail slider section */
 
-.thumbslider {
-	height: 80px;
+.thumbslider .thumb {
+	opacity: 0.75;
+	border: 0.25rem solid Silver;
 }
 
-	.thumbslider .thumb {
-		height: 100%;
-		opacity: 0.75;
-		border: 0.25rem solid Silver;
+	.thumbslider .thumb:hover {
+		opacity: 1;
+		border: 0.25rem solid LemonChiffon;
 	}
 
-		.thumbslider .thumb:hover {
-			opacity: 1;
-			border: 0.25rem solid LemonChiffon;
-		}
-
-		.thumbslider .thumb.active {
-			z-index: 1036;
-			opacity: 1;
-			border: 0.25rem solid Gold;
-		}
+	.thumbslider .thumb.active {
+		z-index: 1036;
+		opacity: 1;
+		border: 0.25rem solid blueviolet;
+	}
diff --git a/frontend/skin/cup-of-coffee/card.css b/frontend/skin/cup-of-coffee/card.css
@@ -93,40 +93,6 @@
 		background: rgba(128, 0, 128, 0.5); /* Purple */
 	}
 
-.imgscale {
-	object-position: center center;
-	object-fit: scale-down;
-}
-
-.imgcontain {
-	object-position: center center;
-	object-fit: contain;
-}
-
-.smimgw {
-	width: 96px;
-}
-
-.smimgh {
-	height: 96px;
-}
-
-.mdimgw {
-	width: 176px;
-}
-
-.mdimgh {
-	height: 176px;
-}
-
-.lgimgw {
-	width: 256px;
-}
-
-.lgimgh {
-	height: 256px;
-}
-
 .itemfont {
 	line-height: 1.25;
 	font-size: 0.72rem;