From 12ff3ba0fa3182d17d5d8f0532d8f41ee15e44cd Mon Sep 17 00:00:00 2001 From: schwarzlichtbezirk Date: Tue, 1 Nov 2022 01:25:30 +0300 Subject: [PATCH] icons css. --- frontend/devmode/fileitem.js | 6 +-- frontend/skin/blue/card.css | 34 ------------ frontend/skin/blue/icon.css | 62 +++++++++++++++++++++ frontend/skin/blue/page.css | 5 ++ frontend/skin/blue/slider.css | 29 +++++----- frontend/skin/coffee-beans/card.css | 34 ------------ frontend/skin/coffee-beans/icon.css | 62 +++++++++++++++++++++ frontend/skin/coffee-beans/page.css | 5 ++ frontend/skin/coffee-beans/slider.css | 29 +++++----- frontend/skin/cup-of-coffee/card.css | 34 ------------ frontend/skin/cup-of-coffee/icon.css | 62 +++++++++++++++++++++ frontend/skin/cup-of-coffee/page.css | 5 ++ frontend/skin/cup-of-coffee/slider.css | 29 +++++----- frontend/skin/dark/card.css | 34 ------------ frontend/skin/dark/icon.css | 62 +++++++++++++++++++++ frontend/skin/dark/page.css | 5 ++ frontend/skin/dark/slider.css | 29 +++++----- frontend/skin/daylight/card.css | 34 ------------ frontend/skin/daylight/icon.css | 62 +++++++++++++++++++++ frontend/skin/daylight/page.css | 5 ++ frontend/skin/daylight/slider.css | 27 ++++------ frontend/skin/neon/card.css | 74 -------------------------- frontend/skin/neon/icon.css | 62 +++++++++++++++++++++ frontend/skin/neon/slider.css | 2 +- frontend/skin/old-monitor/card.css | 34 ------------ frontend/skin/old-monitor/icon.css | 62 +++++++++++++++++++++ frontend/skin/old-monitor/iconmenu.css | 1 + frontend/skin/old-monitor/page.css | 5 ++ frontend/skin/old-monitor/slider.css | 33 +++++------- frontend/tmpl/thumbslider.html | 2 +- task/cs.skin.cmd | 7 +++ task/cs.skin.sh | 7 +++ 32 files changed, 557 insertions(+), 386 deletions(-) create mode 100644 frontend/skin/blue/icon.css create mode 100644 frontend/skin/coffee-beans/icon.css create mode 100644 frontend/skin/cup-of-coffee/icon.css create mode 100644 frontend/skin/dark/icon.css create mode 100644 frontend/skin/daylight/icon.css create mode 100644 frontend/skin/neon/icon.css create mode 100644 frontend/skin/old-monitor/icon.css diff --git a/frontend/devmode/fileitem.js b/frontend/devmode/fileitem.js index c38ba3c3..7bbb7813 100644 --- 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 index 9a6576f9..35076bf3 100644 --- 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 new file mode 100644 index 00000000..d2ab3911 --- /dev/null +++ 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 index 5c6d193e..64548b2c 100644 --- 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 index 42fbb95c..ead1e6ff 100644 --- 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 index 31d52451..2aa8d747 100644 --- 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 new file mode 100644 index 00000000..d2ab3911 --- /dev/null +++ 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 index 59d7a6e1..374bb177 100644 --- 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 index d2f8e495..f6363114 100644 --- 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 index 7d45cbfe..6a4552f0 100644 --- 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; diff --git a/frontend/skin/cup-of-coffee/icon.css b/frontend/skin/cup-of-coffee/icon.css new file mode 100644 index 00000000..d2ab3911 --- /dev/null +++ b/frontend/skin/cup-of-coffee/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/cup-of-coffee/page.css b/frontend/skin/cup-of-coffee/page.css index 76f340e9..4d87389b 100644 --- a/frontend/skin/cup-of-coffee/page.css +++ b/frontend/skin/cup-of-coffee/page.css @@ -25,6 +25,11 @@ body { background: #ad34cb; } +.menu-scrollable { + max-height: 20rem; + overflow-y: scroll; +} + .bg-tool { color: Tan; background-color: #b46a20; diff --git a/frontend/skin/cup-of-coffee/slider.css b/frontend/skin/cup-of-coffee/slider.css index d2f8e495..378b5f4b 100644 --- a/frontend/skin/cup-of-coffee/slider.css +++ b/frontend/skin/cup-of-coffee/slider.css @@ -60,29 +60,24 @@ } .photothumbs { - background-color: silver; + background-color: transparent; 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 Gold; + } diff --git a/frontend/skin/dark/card.css b/frontend/skin/dark/card.css index e419c9e4..6476c38e 100644 --- a/frontend/skin/dark/card.css +++ b/frontend/skin/dark/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/dark/icon.css b/frontend/skin/dark/icon.css new file mode 100644 index 00000000..d2ab3911 --- /dev/null +++ b/frontend/skin/dark/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/dark/page.css b/frontend/skin/dark/page.css index cfa8a4ed..500b7910 100644 --- a/frontend/skin/dark/page.css +++ b/frontend/skin/dark/page.css @@ -21,6 +21,11 @@ body { background: #6e6e74; } +.menu-scrollable { + max-height: 20rem; + overflow-y: scroll; +} + .bg-tool { background-color: #1b1b1c; } diff --git a/frontend/skin/dark/slider.css b/frontend/skin/dark/slider.css index 42fbb95c..6aea508c 100644 --- a/frontend/skin/dark/slider.css +++ b/frontend/skin/dark/slider.css @@ -60,29 +60,24 @@ } .photothumbs { - background-color: silver; + background-color: #555; border-radius: 0.25rem; } /* Thumbnail slider section */ -.thumbslider { - height: 80px; +.thumbslider .thumb { + opacity: 0.75; + border: 0.25rem solid dimgray; } - .thumbslider .thumb { - height: 100%; - opacity: 0.75; - border: 0.25rem solid Silver; + .thumbslider .thumb:hover { + opacity: 1; + border: 0.25rem solid silver; } - .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 dodgerblue; + } diff --git a/frontend/skin/daylight/card.css b/frontend/skin/daylight/card.css index 10d062da..b5c638b1 100644 --- a/frontend/skin/daylight/card.css +++ b/frontend/skin/daylight/card.css @@ -88,40 +88,6 @@ background: Tan; } -.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/daylight/icon.css b/frontend/skin/daylight/icon.css new file mode 100644 index 00000000..d2ab3911 --- /dev/null +++ b/frontend/skin/daylight/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/daylight/page.css b/frontend/skin/daylight/page.css index 0eccf6f5..6b8bd244 100644 --- a/frontend/skin/daylight/page.css +++ b/frontend/skin/daylight/page.css @@ -21,6 +21,11 @@ body { background: #686b70; } +.menu-scrollable { + max-height: 20rem; + overflow-y: scroll; +} + .bg-tool { color: Tan; background-color: #343a40; diff --git a/frontend/skin/daylight/slider.css b/frontend/skin/daylight/slider.css index 78df5423..9bfade69 100644 --- a/frontend/skin/daylight/slider.css +++ b/frontend/skin/daylight/slider.css @@ -66,23 +66,18 @@ /* 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 Wheat; } - .thumbslider .thumb:hover { - opacity: 1; - border: 0.25rem solid Wheat; - } - - .thumbslider .thumb.active { - z-index: 1036; - opacity: 1; - border: 0.25rem solid Ivory; - } + .thumbslider .thumb.active { + z-index: 1036; + opacity: 1; + border: 0.25rem solid Ivory; + } diff --git a/frontend/skin/neon/card.css b/frontend/skin/neon/card.css index 05c5e3a4..ab598888 100644 --- a/frontend/skin/neon/card.css +++ b/frontend/skin/neon/card.css @@ -93,80 +93,6 @@ background: rgba(106, 90, 205, 0.5); /* SlateBlue */ } -.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; -} - -.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/neon/icon.css b/frontend/skin/neon/icon.css new file mode 100644 index 00000000..d2ab3911 --- /dev/null +++ b/frontend/skin/neon/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/neon/slider.css b/frontend/skin/neon/slider.css index f92f4889..5a21b2ef 100644 --- a/frontend/skin/neon/slider.css +++ b/frontend/skin/neon/slider.css @@ -60,7 +60,7 @@ } .photothumbs { - background-color: silver; + background-color: transparent; border-radius: 0.25rem; } diff --git a/frontend/skin/old-monitor/card.css b/frontend/skin/old-monitor/card.css index 08848fef..4103232f 100644 --- a/frontend/skin/old-monitor/card.css +++ b/frontend/skin/old-monitor/card.css @@ -91,40 +91,6 @@ background: rgba(255, 255, 255, 0.5); } -.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/old-monitor/icon.css b/frontend/skin/old-monitor/icon.css new file mode 100644 index 00000000..d2ab3911 --- /dev/null +++ b/frontend/skin/old-monitor/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/old-monitor/iconmenu.css b/frontend/skin/old-monitor/iconmenu.css index e17e3c6e..11d061ad 100644 --- a/frontend/skin/old-monitor/iconmenu.css +++ b/frontend/skin/old-monitor/iconmenu.css @@ -29,6 +29,7 @@ color: Lime; background-color: rgba(0, 64, 0, 0.4); border-color: rgb(16, 80, 16); + border-radius: 0; } .btn-icon:hover { diff --git a/frontend/skin/old-monitor/page.css b/frontend/skin/old-monitor/page.css index e745200d..99560205 100644 --- a/frontend/skin/old-monitor/page.css +++ b/frontend/skin/old-monitor/page.css @@ -40,6 +40,11 @@ a, .btn-link { color: Green; } +.menu-scrollable { + max-height: 20rem; + overflow-y: scroll; +} + .bg-tool { background-color: #004c00; } diff --git a/frontend/skin/old-monitor/slider.css b/frontend/skin/old-monitor/slider.css index 42fbb95c..3e4216b8 100644 --- a/frontend/skin/old-monitor/slider.css +++ b/frontend/skin/old-monitor/slider.css @@ -3,7 +3,7 @@ .imgbut { color: rgba(255, 255, 255, 0.5); - border-radius: 0.5rem; + border-radius: 0; background-color: transparent; text-align: center; vertical-align: middle; @@ -60,29 +60,24 @@ } .photothumbs { - background-color: silver; - border-radius: 0.25rem; + background-color: green; + border-radius: 0; } /* 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 SpringGreen; } - .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 MediumSpringGreen; + } diff --git a/frontend/tmpl/thumbslider.html b/frontend/tmpl/thumbslider.html index aa247edc..0c335f66 100644 --- a/frontend/tmpl/thumbslider.html +++ b/frontend/tmpl/thumbslider.html @@ -7,7 +7,7 @@
diff --git a/task/cs.skin.cmd b/task/cs.skin.cmd index a703b85f..febc7e31 100644 --- a/task/cs.skin.cmd +++ b/task/cs.skin.cmd @@ -11,6 +11,7 @@ if not exist %cs% ( java -jar %cs%^ skin/daylight/page.css^ skin/daylight/card.css^ + skin/daylight/icon.css^ skin/daylight/iconmenu.css^ skin/daylight/fileitem.css^ skin/daylight/imgitem.css^ @@ -23,6 +24,7 @@ java -jar %cs%^ java -jar %cs%^ skin/blue/page.css^ skin/blue/card.css^ + skin/blue/icon.css^ skin/blue/iconmenu.css^ skin/blue/fileitem.css^ skin/blue/imgitem.css^ @@ -35,6 +37,7 @@ java -jar %cs%^ java -jar %cs%^ skin/dark/page.css^ skin/dark/card.css^ + skin/dark/icon.css^ skin/dark/iconmenu.css^ skin/dark/fileitem.css^ skin/dark/imgitem.css^ @@ -47,6 +50,7 @@ java -jar %cs%^ java -jar %cs%^ skin/neon/page.css^ skin/neon/card.css^ + skin/neon/icon.css^ skin/neon/iconmenu.css^ skin/neon/fileitem.css^ skin/neon/imgitem.css^ @@ -59,6 +63,7 @@ java -jar %cs%^ java -jar %cs%^ skin/cup-of-coffee/page.css^ skin/cup-of-coffee/card.css^ + skin/cup-of-coffee/icon.css^ skin/cup-of-coffee/iconmenu.css^ skin/cup-of-coffee/fileitem.css^ skin/cup-of-coffee/imgitem.css^ @@ -71,6 +76,7 @@ java -jar %cs%^ java -jar %cs%^ skin/coffee-beans/page.css^ skin/coffee-beans/card.css^ + skin/coffee-beans/icon.css^ skin/coffee-beans/iconmenu.css^ skin/coffee-beans/fileitem.css^ skin/coffee-beans/imgitem.css^ @@ -83,6 +89,7 @@ java -jar %cs%^ java -jar %cs%^ skin/old-monitor/page.css^ skin/old-monitor/card.css^ + skin/old-monitor/icon.css^ skin/old-monitor/iconmenu.css^ skin/old-monitor/fileitem.css^ skin/old-monitor/imgitem.css^ diff --git a/task/cs.skin.sh b/task/cs.skin.sh index 7a57e2fc..d54fae36 100644 --- a/task/cs.skin.sh +++ b/task/cs.skin.sh @@ -11,6 +11,7 @@ fi java -jar $cs\ skin/daylight/page.css\ skin/daylight/card.css\ + skin/daylight/icon.css\ skin/daylight/iconmenu.css\ skin/daylight/fileitem.css\ skin/daylight/imgitem.css\ @@ -23,6 +24,7 @@ java -jar $cs\ java -jar $cs\ skin/blue/page.css\ skin/blue/card.css\ + skin/blue/icon.css\ skin/blue/iconmenu.css\ skin/blue/fileitem.css\ skin/blue/imgitem.css\ @@ -35,6 +37,7 @@ java -jar $cs\ java -jar $cs\ skin/dark/page.css\ skin/dark/card.css\ + skin/dark/icon.css\ skin/dark/iconmenu.css\ skin/dark/fileitem.css\ skin/dark/imgitem.css\ @@ -47,6 +50,7 @@ java -jar $cs\ java -jar $cs\ skin/neon/page.css\ skin/neon/card.css\ + skin/neon/icon.css\ skin/neon/iconmenu.css\ skin/neon/fileitem.css\ skin/neon/imgitem.css\ @@ -59,6 +63,7 @@ java -jar $cs\ java -jar $cs\ skin/cup-of-coffee/page.css\ skin/cup-of-coffee/card.css\ + skin/cup-of-coffee/icon.css\ skin/cup-of-coffee/iconmenu.css\ skin/cup-of-coffee/fileitem.css\ skin/cup-of-coffee/imgitem.css\ @@ -71,6 +76,7 @@ java -jar $cs\ java -jar $cs\ skin/coffee-beans/page.css\ skin/coffee-beans/card.css\ + skin/coffee-beans/icon.css\ skin/coffee-beans/iconmenu.css\ skin/coffee-beans/fileitem.css\ skin/coffee-beans/imgitem.css\ @@ -83,6 +89,7 @@ java -jar $cs\ java -jar $cs\ skin/old-monitor/page.css\ skin/old-monitor/card.css\ + skin/old-monitor/icon.css\ skin/old-monitor/iconmenu.css\ skin/old-monitor/fileitem.css\ skin/old-monitor/imgitem.css\