From f2addec577326bcc3df40403c6d7ad2287c5c6fd Mon Sep 17 00:00:00 2001 From: riley Date: Mon, 11 Sep 2023 21:07:36 -0400 Subject: [PATCH 01/19] Fixed centering of text in dashboard labels --- css/custom.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css/custom.css b/css/custom.css index 5702935..5f4bcb8 100644 --- a/css/custom.css +++ b/css/custom.css @@ -107,11 +107,11 @@ .Dashboard .settings-info p span:nth-child(2) { display: inline-block; word-break: break-all; - max-width: 150px; + /* max-width: 150px; */ overflow: hidden; - max-height: 16px; + /* max-height: 16px; */ position: relative; - top: 2px + top: 2px; } .Dashboard .router-status-info .settings-info p span:nth-child(2) { From d874c2693d66a041c5380db9ac629c54a611f155 Mon Sep 17 00:00:00 2001 From: riley Date: Tue, 12 Sep 2023 19:30:42 -0400 Subject: [PATCH 02/19] fixed password field width at some resolutions --- luasrc/gaya/gaya.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/luasrc/gaya/gaya.css b/luasrc/gaya/gaya.css index f7fe487..0f15df7 100644 --- a/luasrc/gaya/gaya.css +++ b/luasrc/gaya/gaya.css @@ -2745,7 +2745,7 @@ strong { .cbi-value input[type="password"], .cbi-value input[name^="pw"], .cbi-value input[data-update="change"]:nth-child(2) { - width: 100%; + width: 100% !important; min-width: 13rem; color: #fff; } From 4f96d489f5cf6676f60e21a23c8fa0bea55b3d5f Mon Sep 17 00:00:00 2001 From: riley Date: Thu, 14 Sep 2023 15:34:03 -0400 Subject: [PATCH 03/19] Updated dashboard blur value to match the rest of the UI --- css/custom.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/css/custom.css b/css/custom.css index 5f4bcb8..a0c085d 100644 --- a/css/custom.css +++ b/css/custom.css @@ -25,7 +25,8 @@ .Dashboard .dashboard-bg { border-radius: 16px; - background-color: #3f3f3f69 + background-color: #3f3f3f69; + backdrop-filter: blur(20px); } .Dashboard .title { From 7192872c46a52eec25dee50f6e1fa2c13f25ccbf Mon Sep 17 00:00:00 2001 From: riley Date: Mon, 18 Sep 2023 22:51:58 -0400 Subject: [PATCH 04/19] Compacting App Config Pages --- luasrc/gaya/gaya.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/luasrc/gaya/gaya.css b/luasrc/gaya/gaya.css index 0f15df7..7ed4468 100644 --- a/luasrc/gaya/gaya.css +++ b/luasrc/gaya/gaya.css @@ -1399,6 +1399,7 @@ strong { display: inline-block; width: 100%; padding: 0.35rem 1rem 0.2rem; + white-space: nowrap; } .cbi-value ul { line-height: 1.25; @@ -2667,6 +2668,7 @@ strong { .cbi-value input[type="text"], .cbi-value input[type="password"] { min-width: 19rem; + padding: 10px; } #cbi-firewall-zone .cbi-input-select { min-width: 4rem; @@ -2907,7 +2909,8 @@ strong { display: block; min-width: 0 !important; text-align: left; - margin: 0.5rem 0; + margin: 0.15rem 0; + font-size: .85rem; } .cbi-value > .cbi-value-field { display: inline-block; @@ -3009,7 +3012,7 @@ strong { .cbi-value-field .cbi-input-select, .cbi-value input[type="text"], .node-system-packages > .main .cbi-value .cbi-value-field input { - width: 100%; + /* width: 100%; */ color: #fff; } .cbi-page-actions > div > input, From 91e867dd54cb258ed0c472172976c4f68b14d23d Mon Sep 17 00:00:00 2001 From: riley Date: Mon, 18 Sep 2023 23:02:55 -0400 Subject: [PATCH 05/19] Fixing cbi dropdown spacing --- luasrc/gaya/gaya.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/luasrc/gaya/gaya.css b/luasrc/gaya/gaya.css index 7ed4468..dd71411 100644 --- a/luasrc/gaya/gaya.css +++ b/luasrc/gaya/gaya.css @@ -2668,8 +2668,10 @@ strong { .cbi-value input[type="text"], .cbi-value input[type="password"] { min-width: 19rem; - padding: 10px; } + .cbi-value input[type="text"] { + padding: 10px; + } #cbi-firewall-zone .cbi-input-select { min-width: 4rem; } From ee1ce88ca7c1fd9fbeaa2c482f8aad6058a58db6 Mon Sep 17 00:00:00 2001 From: riley Date: Mon, 18 Sep 2023 23:24:27 -0400 Subject: [PATCH 06/19] Lil spacing fix --- luasrc/gaya/gaya.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/luasrc/gaya/gaya.css b/luasrc/gaya/gaya.css index dd71411..86aeba9 100644 --- a/luasrc/gaya/gaya.css +++ b/luasrc/gaya/gaya.css @@ -356,6 +356,9 @@ label { select[multiple="multiple"] { height: auto; } + .cbi-value input[type="text"] { + padding: 10px; +} pre { overflow: auto; color: #fff; @@ -2669,9 +2672,7 @@ strong { .cbi-value input[type="password"] { min-width: 19rem; } - .cbi-value input[type="text"] { - padding: 10px; - } + #cbi-firewall-zone .cbi-input-select { min-width: 4rem; } From 3ab3602c3f0f753691d8d8c0adb3b2ea347b3299 Mon Sep 17 00:00:00 2001 From: riley Date: Fri, 22 Sep 2023 18:42:39 -0400 Subject: [PATCH 07/19] added custom.css to makefile --- Makefile | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Makefile b/Makefile index 09199be..f3f4c76 100644 --- a/Makefile +++ b/Makefile @@ -39,6 +39,8 @@ define Package/luci-theme-$(THEME_NAME)/install $(CP) -a ./template/* $(1)/usr/lib/lua/luci/view/themes/$(THEME_NAME)/ 2>/dev/null || true $(INSTALL_DIR) $(1)/www/luci-static/resources $(CP) -a ./js/* $(1)/www/luci-static/resources/ 2>/dev/null || true + $(INSTALL_DIR) $(1)/www/luci-static/resources/view/dashboard/css + $(CP) ./css/custom.css $(1)/www/luci-static/resources/view/dashboard/css/custom.css endef define Package/luci-theme-$(THEME_NAME)/postinst From 0c3fc0d4d185ececa79200a4cbccd8ed15e10a4d Mon Sep 17 00:00:00 2001 From: riley Date: Fri, 22 Sep 2023 18:56:50 -0400 Subject: [PATCH 08/19] fixed it so it acutally installs that package --- Makefile | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/Makefile b/Makefile index f3f4c76..76af4ff 100644 --- a/Makefile +++ b/Makefile @@ -37,17 +37,20 @@ define Package/luci-theme-$(THEME_NAME)/install $(CP) -a ./luasrc/* $(1)/www/luci-static/$(THEME_NAME)/ 2>/dev/null || true $(INSTALL_DIR) $(1)/usr/lib/lua/luci/view/themes/$(THEME_NAME) $(CP) -a ./template/* $(1)/usr/lib/lua/luci/view/themes/$(THEME_NAME)/ 2>/dev/null || true - $(INSTALL_DIR) $(1)/www/luci-static/resources - $(CP) -a ./js/* $(1)/www/luci-static/resources/ 2>/dev/null || true - $(INSTALL_DIR) $(1)/www/luci-static/resources/view/dashboard/css - $(CP) ./css/custom.css $(1)/www/luci-static/resources/view/dashboard/css/custom.css + $(INSTALL_DIR) $(1)/tmp/luci-theme-$(THEME_NAME) + $(CP) ./css/custom.css $(1)/tmp/luci-theme-$(THEME_NAME)/custom.css endef define Package/luci-theme-$(THEME_NAME)/postinst #!/bin/sh [ -n "$${IPKG_INSTROOT}" ] || { ( . /etc/uci-defaults/30-luci-theme-$(THEME_NAME) ) && rm -f /etc/uci-defaults/30-luci-theme-$(THEME_NAME) + # Always overwrite custom.css + mv -f /tmp/luci-theme-$(THEME_NAME)/custom.css /www/luci-static/resources/view/dashboard/css/custom.css + # Remove the temporary directory + rm -rf /tmp/luci-theme-$(THEME_NAME) } endef + $(eval $(call BuildPackage,luci-theme-$(THEME_NAME))) From 353abe66302c67f212e06e2863dd92b70d90e627 Mon Sep 17 00:00:00 2001 From: riley Date: Fri, 10 Nov 2023 17:21:39 -0500 Subject: [PATCH 09/19] css cleanup --- luasrc/gaya/gaya.css | 40 +++++----------------------------------- 1 file changed, 5 insertions(+), 35 deletions(-) diff --git a/luasrc/gaya/gaya.css b/luasrc/gaya/gaya.css index 86aeba9..806269b 100644 --- a/luasrc/gaya/gaya.css +++ b/luasrc/gaya/gaya.css @@ -584,7 +584,6 @@ label { left: 10px; right: auto; width: 95%; - align: center; transition: transform 0.5s; border-top: var(--navBorder); text-align: center; @@ -753,8 +752,6 @@ strong { height: 16px; content: ""; background: url(./sidebar-icon/layout-fluid.png) no-repeat; - } - .main > .main-left > .nav > .slide > .menu.active::before { } .main > .main-left > .nav > .slide > [data-title="Status"]:before { @@ -1019,10 +1016,6 @@ strong { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: relative; - } - .cbi-modal .cbi-section, - .cbi-section .cbi-section { - } .cbi-section:nth-of-type(1) { z-index: 4; /* the first section will be on top */ @@ -1151,7 +1144,6 @@ strong { border: 0; background-color: #f0f0f0; background-image: none; - -webkit-appearance: none; -ms-touch-action: manipulation; touch-action: manipulation; padding: 0 0.8rem; @@ -1159,9 +1151,6 @@ strong { .cbi-button-up { transform: scaleY(-1); } - .cbi-button:not(select) { - -webkit-appearance: none !important; - } .cbi-button + .cbi-button { margin-left: 0.6rem; } @@ -1356,7 +1345,7 @@ strong { border-radius: 10px; } - .cbi-tabmenu > li[class~= data-tab=] { + .cbi-tabmenu > li[class~="data-tab"] { color: #ffffff; } [data-tab-title] { @@ -1461,10 +1450,6 @@ strong { word-wrap: break-word; padding: 0.25rem; } - .cbi-rowstyle-2 .cbi-button-up, - .cbi-rowstyle-2 .cbi-button-down, - body:not(.Interfaces) .cbi-rowstyle-2:first-child { - } .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { width: auto !important; } @@ -1662,8 +1647,7 @@ strong { flex-grow: 1; justify-content: space-around; } - .cbi-dropdown[open] > ul.dropdown > li { - } + .cbi-dropdown[open] > ul.dropdown > li[selected] { background: #b0d0f0; } @@ -2360,7 +2344,7 @@ strong { width: 100%; } .cbi-rowstyle-2 { - background-color: ; + background-color: rgb(104, 104, 104); } .pull-right, .node-main-login > .main form > div:last-child { @@ -2512,16 +2496,7 @@ strong { .center::before { text-align: center !important; } - div > table > tbody > tr:nth-of-type(2n), - div > .table > .tr:nth-of-type(2n), - .cbi-section .cbi-section-remove:nth-of-type(2n), - .container > .cbi-section .cbi-section-node:nth-of-type(2n), - .cbi-section[id] .cbi-section-remove:nth-of-type(4n + 3), - .cbi-section[id] .cbi-section-node:nth-of-type(4n + 4), - .cbi-tabcontainer > .cbi-value:nth-of-type(2n), - .cbi-rowstyle-1 { - - } + .cbi-dropdown > ul > li .hide-open, .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; @@ -2898,8 +2873,6 @@ strong { .cbi-section { margin: 1rem 0 0; } - - } #maincontent > .container { margin: 0 0.5rem 1.5rem; } @@ -2951,9 +2924,6 @@ strong { #command-rc-output > pre, [data-page="admin-services-wol"] .notice code { font-size: 0.8rem !important; - } - h2 { - } .cbi-section > h3:first-child, .panel-title { @@ -3006,7 +2976,7 @@ strong { .main > .main-left > .nav > .slide > .slide-menu > li > a, .tr[data-title]::before, .tr.cbi-section-table-titles.named::before { - font-size: + font-size: 0.5rem; } .cbi-value-title, .cbi-value-description, From 64047ab6e4816f5f41ce1300e739e48cc1173cb7 Mon Sep 17 00:00:00 2001 From: riley Date: Fri, 10 Nov 2023 18:12:45 -0500 Subject: [PATCH 10/19] Fixed makefile and deleted dashboard.css --- Makefile | 9 +- css/custom.css | 264 ------------------------------------------------- 2 files changed, 2 insertions(+), 271 deletions(-) delete mode 100644 css/custom.css diff --git a/Makefile b/Makefile index 76af4ff..09199be 100644 --- a/Makefile +++ b/Makefile @@ -37,20 +37,15 @@ define Package/luci-theme-$(THEME_NAME)/install $(CP) -a ./luasrc/* $(1)/www/luci-static/$(THEME_NAME)/ 2>/dev/null || true $(INSTALL_DIR) $(1)/usr/lib/lua/luci/view/themes/$(THEME_NAME) $(CP) -a ./template/* $(1)/usr/lib/lua/luci/view/themes/$(THEME_NAME)/ 2>/dev/null || true - $(INSTALL_DIR) $(1)/tmp/luci-theme-$(THEME_NAME) - $(CP) ./css/custom.css $(1)/tmp/luci-theme-$(THEME_NAME)/custom.css + $(INSTALL_DIR) $(1)/www/luci-static/resources + $(CP) -a ./js/* $(1)/www/luci-static/resources/ 2>/dev/null || true endef define Package/luci-theme-$(THEME_NAME)/postinst #!/bin/sh [ -n "$${IPKG_INSTROOT}" ] || { ( . /etc/uci-defaults/30-luci-theme-$(THEME_NAME) ) && rm -f /etc/uci-defaults/30-luci-theme-$(THEME_NAME) - # Always overwrite custom.css - mv -f /tmp/luci-theme-$(THEME_NAME)/custom.css /www/luci-static/resources/view/dashboard/css/custom.css - # Remove the temporary directory - rm -rf /tmp/luci-theme-$(THEME_NAME) } endef - $(eval $(call BuildPackage,luci-theme-$(THEME_NAME))) diff --git a/css/custom.css b/css/custom.css deleted file mode 100644 index a0c085d..0000000 --- a/css/custom.css +++ /dev/null @@ -1,264 +0,0 @@ -.Dashboard { - color: #212529 !important -} - -.Dashboard h3 { - color: #ffffff -} - -.Dashboard hr { - border: 0; - height: 0; - overflow: visible; - box-sizing: content-box; - border-top: 1px solid rgba(0, 0, 0, .1); - margin: 0 -} - -.Dashboard .box-s1 { - min-height: 466px -} - -.Dashboard .internet-status-self .internet-status-info .title { - height: 97px -} - -.Dashboard .dashboard-bg { - border-radius: 16px; - background-color: #3f3f3f69; - backdrop-filter: blur(20px); -} - -.Dashboard .title { - text-align: center -} - -.Dashboard .section-content { - display: flex; - vertical-align: top; - align-items: flex-start; - justify-content: space-between; - padding: 20px 0 0 -} - -.Dashboard .section-content>div { - width: 100%; - padding: 1.5em -} - -.Dashboard .section-content .settings-info { - padding-top: 1em -} - -.Dashboard .section-content .internet-status-info .settings-info>div>p>i { - padding: 0 0 0 5px -} - -.Dashboard .section-content>div:nth-child(2) { - margin-left: 20px -} - -.Dashboard .devices-list .devices-info .tr .td { - padding: 0px 0 0 10px -} - -.Dashboard .devices-list .devices-info .tr .td:first-child { - width: 33%; - word-break: break-all -} - -.Dashboard .devices-list hr:nth-child(4) { - margin-top: 0; - margin-bottom: 8px -} - -.Dashboard .router-status-lan .devices-list .table-titles .th:first-child { - width: 35% -} - -.Dashboard .router-status-self .router-status-info .settings-info { - padding-left: 27px -} - -.Dashboard .router-status-self .router-status-info .title h3 { - margin-top: -2px -} - -.Dashboard .router-status-info svg { - width: 70px -} - -.Dashboard .internet-status-self .settings-info p:first-child span:first-child { - font-size: 15px; - font-weight: 500 -} - -.Dashboard .internet-status-self .settings-info p:nth-child(2) span:first-child, -.Dashboard .router-status-wifi .wifi-info .settings-info p:first-child span:first-child, -.Dashboard .router-status-wifi .wifi-info .settings-info p:nth-child(2) span:first-child { - font-weight: 700 -} - -.Dashboard .settings-info p span:first-child { - width: 35%; - font-size: 12px; - text-align: right -} - -.Dashboard .settings-info p span:nth-child(2) { - display: inline-block; - word-break: break-all; - /* max-width: 150px; */ - overflow: hidden; - /* max-height: 16px; */ - position: relative; - top: 2px; -} - -.Dashboard .router-status-info .settings-info p span:nth-child(2) { - max-width: 283px -} - -.Dashboard .settings-info p span.ssid { - max-height: 18px; - top: 3px -} - -.Dashboard .settings-info p span.encryption { - max-width: 82px -} - -.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td { - padding: 0 10px -} - -.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td:first-child { - width: 30%; - word-break: break-all -} - -.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td:nth-child(2) { - width: 21%; - overflow: hidden; - padding-left: 0; - word-break: break-all -} - -.Dashboard .router-status-wifi .wifi-info .settings-info { - padding: 1em 0 -} - -.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td:nth-child(3) { - width: 22%; - overflow: hidden; - position: relative; - top: -3px -} - -.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td:nth-child(5) { - width: initial -} - -.Dashboard .router-status-wifi .wifi-info .devices-info .device-info .progress { - width: 100%; - margin: 0; - padding: 0 -} - -.Dashboard .wifi-info .devices-info .table-titles { - border-bottom: 1px solid rgba(0, 0, 0, .1) -} - -.Dashboard .section-content .internet-status-info .settings-info, -.Dashboard .router-status-wifi .wifi-info .settings-info, -.Dashboard .router-status-lan .lan-info .settings-info { - display: flex; - justify-content: space-around -} - -.Dashboard .devices-list .devices-info, -.Dashboard .router-status-wifi .wifi-info>hr:last-child { - margin-bottom: 0 -} - -@media screen and (min-width: 200px) and (max-width: 640px) { - .Dashboard .cbi-section-1>.section-content { - padding-top: 10px - } - - .Dashboard .section-content>div { - padding: 1em - } - - .Dashboard .section-content>div:first-child { - margin-bottom: 10px - } - - .Dashboard .section-content>div:nth-child(2) { - margin: 0 - } - - .Dashboard .router-status-self .router-status-info .settings-info { - padding: 0 - } - - .Dashboard .section-content .internet-status-info .settings-info>div:first-child { - margin-bottom: 10px; - border-bottom: 1px solid rgba(0, 0, 0, .1) - } - - .Dashboard .router-status-wifi .wifi-info .settings-info>div { - flex: 1 - } - - .Dashboard .section-content .router-status-lan .devices-info .table-titles .th:last-child { - padding-left: 70px - } - - .Dashboard .section-content .router-status-lan .devices-info .td:first-child { - flex: 2 2 31% - } - - .Dashboard .section-content .router-status-lan .devices-info .td:nth-child(2) { - flex: 1 1 24%; - padding: 0 - } - - .Dashboard .section-content .router-status-lan .devices-info .td:last-child { - word-wrap: normal - } - - .Dashboard .router-status-wifi .wifi-info .settings-info>div p:nth-child(6)>span:last-child { - display: inline-block; - overflow: hidden; - height: 14px; - width: 52%; - word-break: break-word; - line-height: 15px - } - - .Dashboard .wifi-info .devices-info .table-titles { - display: flex; - border-radius: initial; - margin: 0; - padding: 0 - } - - .Dashboard .wifi-info .devices-info .table-titles .th { - flex: 2 2 24% - } - - .Dashboard .wifi-info .devices-info .tr .td { - flex: 2 2 10% - } - - .Dashboard .wifi-info hr:nth-child(4) { - margin-bottom: 0 - } - - .Dashboard .section-content, - .Dashboard .section-content .internet-status-info .settings-info, - .Dashboard .section-content .router-status-lan .devices-info .table-titles { - display: block - } -} \ No newline at end of file From c3cfee8124494123ebf33a6a416497f72b8cda0e Mon Sep 17 00:00:00 2001 From: riley Date: Fri, 10 Nov 2023 18:38:58 -0500 Subject: [PATCH 11/19] Testing out new UI stuff --- Makefile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Makefile b/Makefile index 09199be..1440cf7 100644 --- a/Makefile +++ b/Makefile @@ -48,4 +48,4 @@ define Package/luci-theme-$(THEME_NAME)/postinst } endef -$(eval $(call BuildPackage,luci-theme-$(THEME_NAME))) +$(eval $(call BuildPackage,luci-theme-$(THEME_NAME))) \ No newline at end of file From c48218680283de2872be66ff81700dc8a5cf6e80 Mon Sep 17 00:00:00 2001 From: riley Date: Mon, 13 Nov 2023 12:48:19 -0500 Subject: [PATCH 12/19] Adding checkbox styling --- luasrc/gaya/gaya.css | 60 ++++++++++++++++++++++++++++++++++++++++++++ template/header.htm | 16 ++++++++++++ 2 files changed, 76 insertions(+) diff --git a/luasrc/gaya/gaya.css b/luasrc/gaya/gaya.css index 806269b..7060dc8 100644 --- a/luasrc/gaya/gaya.css +++ b/luasrc/gaya/gaya.css @@ -3027,4 +3027,64 @@ strong { background-color: transparent; } } + +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: #2196F3; +} + +input:focus + .slider { + box-shadow: 0 0 1px #2196F3; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} \ No newline at end of file diff --git a/template/header.htm b/template/header.htm index d559d26..ce70178 100644 --- a/template/header.htm +++ b/template/header.htm @@ -76,6 +76,22 @@ }); } +
From 00ea79a06beff1fed782294abd72cdb339832dd8 Mon Sep 17 00:00:00 2001 From: riley Date: Mon, 13 Nov 2023 13:06:40 -0500 Subject: [PATCH 13/19] Attempting to fix checkbox styling --- luasrc/gaya/gaya.css | 21 ++++------------- template/header.htm | 54 +++++++++++++++++++++++++++++++++----------- 2 files changed, 46 insertions(+), 29 deletions(-) diff --git a/luasrc/gaya/gaya.css b/luasrc/gaya/gaya.css index 7060dc8..16a4374 100644 --- a/luasrc/gaya/gaya.css +++ b/luasrc/gaya/gaya.css @@ -3028,6 +3028,7 @@ strong { } } +/* The switch - the box around the slider */ .switch { position: relative; display: inline-block; @@ -3035,12 +3036,14 @@ strong { height: 34px; } -.switch input { +/* Hide default HTML checkbox */ +.switch input { opacity: 0; width: 0; height: 0; } +/* The slider */ .slider { position: absolute; cursor: pointer; @@ -3049,7 +3052,6 @@ strong { right: 0; bottom: 0; background-color: #ccc; - -webkit-transition: .4s; transition: .4s; } @@ -3061,7 +3063,6 @@ strong { left: 4px; bottom: 4px; background-color: white; - -webkit-transition: .4s; transition: .4s; } @@ -3074,17 +3075,5 @@ input:focus + .slider { } input:checked + .slider:before { - -webkit-transform: translateX(26px); - -ms-transform: translateX(26px); transform: translateX(26px); -} - -/* Rounded sliders */ -.slider.round { - border-radius: 34px; -} - -.slider.round:before { - border-radius: 50%; -} - \ No newline at end of file +} \ No newline at end of file diff --git a/template/header.htm b/template/header.htm index ce70178..3501730 100644 --- a/template/header.htm +++ b/template/header.htm @@ -62,20 +62,48 @@
+ From be25603bd42f6c7258a430c0820f8c44efb64582 Mon Sep 17 00:00:00 2001 From: riley Date: Mon, 13 Nov 2023 13:28:22 -0500 Subject: [PATCH 15/19] still trying to style checkboxes --- luasrc/app.js | 33 +++++++++++++++++++++++++++++++-- template/header.htm | 37 ------------------------------------- 2 files changed, 31 insertions(+), 39 deletions(-) diff --git a/luasrc/app.js b/luasrc/app.js index 6d4a69c..76c0de5 100644 --- a/luasrc/app.js +++ b/luasrc/app.js @@ -31,5 +31,34 @@ }, false ); - })(); - \ No newline at end of file + var checkboxes = document.querySelectorAll('.cbi-checkbox input[type="checkbox"]'); + + checkboxes.forEach(function(checkbox) { + var switchElement = document.createElement('label'); + switchElement.className = 'switch'; + + var input = document.createElement('input'); + input.type = 'checkbox'; + input.checked = checkbox.checked; + switchElement.appendChild(input); + + var slider = document.createElement('span'); + slider.className = 'slider'; + switchElement.appendChild(slider); + + // Add the switch to the div wrapping the checkbox + checkbox.parentNode.insertBefore(switchElement, checkbox); + + // Hide the original checkbox + checkbox.style.display = 'none'; + + input.addEventListener('change', function() { + checkbox.checked = this.checked; + }); + + var observer = new MutationObserver(function() { + input.checked = checkbox.checked; + }); + observer.observe(checkbox, { attributes: true }); + }); + })(); \ No newline at end of file diff --git a/template/header.htm b/template/header.htm index 6c22f61..f2e14ba 100644 --- a/template/header.htm +++ b/template/header.htm @@ -60,43 +60,6 @@
-
From 3235e5d0878d0b5e21359d41737f56591adb4f8c Mon Sep 17 00:00:00 2001 From: riley Date: Mon, 13 Nov 2023 15:19:09 -0500 Subject: [PATCH 17/19] I DID IT --- luasrc/app.js | 108 +++++++++++++------------------------------ luasrc/gaya/gaya.css | 59 ++++++++++++----------- 2 files changed, 61 insertions(+), 106 deletions(-) diff --git a/luasrc/app.js b/luasrc/app.js index 8ee7e3b..6d4a69c 100644 --- a/luasrc/app.js +++ b/luasrc/app.js @@ -1,79 +1,35 @@ (function () { - // your page initialization code here - // the DOM will be available here - - const toggler = document.querySelector(".toggler"); - console.log(toggler); - toggler.addEventListener( - "click", - function (e) { - const element = document.querySelector(".navbar"); - element.classList.toggle("active"); - }, - false - ); - - const isDark = localStorage.getItem("isDark"); - if (isDark == 1) { - const element = document.querySelector("body"); - element.classList.add("dark"); - } - const themetoggler = document.querySelector(".themetoggler"); - themetoggler.addEventListener( - "click", - function (e) { - e.preventDefault(); + // your page initialization code here + // the DOM will be available here + + const toggler = document.querySelector(".toggler"); + console.log(toggler); + toggler.addEventListener( + "click", + function (e) { + const element = document.querySelector(".navbar"); + element.classList.toggle("active"); + }, + false + ); + + const isDark = localStorage.getItem("isDark"); + if (isDark == 1) { const element = document.querySelector("body"); - element.classList.toggle("dark"); - - const isDark = localStorage.getItem("isDark"); - localStorage.setItem("isDark", isDark == 1 ? 0 : 1); - }, - false - ); - - document.addEventListener("DOMContentLoaded", function() { - // Move all your code here + element.classList.add("dark"); + } + const themetoggler = document.querySelector(".themetoggler"); + themetoggler.addEventListener( + "click", + function (e) { + e.preventDefault(); + const element = document.querySelector("body"); + element.classList.toggle("dark"); - var mutationObserver = new MutationObserver(function(mutations) { - mutations.forEach(function(mutation) { - var checkboxes = document.querySelectorAll('.cbi-checkbox input[type="checkbox"]'); - - checkboxes.forEach(function(checkbox) { - // Check if toggle switch is already created - if (!checkbox.nextSibling || checkbox.nextSibling.className !== 'switch') { - var switchElement = document.createElement('label'); - switchElement.className = 'switch'; - - var input = document.createElement('input'); - input.type = 'checkbox'; - input.checked = checkbox.checked; - switchElement.appendChild(input); - - var slider = document.createElement('span'); - slider.className = 'slider'; - switchElement.appendChild(slider); - - // Add the switch to the div wrapping the checkbox - checkbox.parentNode.insertBefore(switchElement, checkbox); - - // Hide the original checkbox - checkbox.style.display = 'none'; - - input.addEventListener('change', function() { - checkbox.checked = this.checked; - }); - - var observer = new MutationObserver(function() { - input.checked = checkbox.checked; - }); - observer.observe(checkbox, { attributes: true }); - } - }); - }); - }); - - mutationObserver.observe(document.documentElement, { childList: true, subtree: true }); - }); - -})(); // Make sure to include this closing partz \ No newline at end of file + const isDark = localStorage.getItem("isDark"); + localStorage.setItem("isDark", isDark == 1 ? 0 : 1); + }, + false + ); + })(); + \ No newline at end of file diff --git a/luasrc/gaya/gaya.css b/luasrc/gaya/gaya.css index a574ea9..790da2f 100644 --- a/luasrc/gaya/gaya.css +++ b/luasrc/gaya/gaya.css @@ -3028,52 +3028,51 @@ strong { } } -/* The switch - the box around the slider */ -.cbi-checkbox .switch { +.cbi-checkbox { position: relative; display: inline-block; - width: 60px; - height: 34px; + width: 40px; /* Decreased from 75px */ + height: 20px; /* Decreased from 25px */ + border-radius: 20px; /* Optional: added for rounded corners */ } -/* Hide default HTML checkbox */ -.cbi-checkbox .switch input { - opacity: 0; - width: 0; - height: 0; +.cbi-checkbox input[type="checkbox"] { + position: absolute; + width: 100%; + height: 100%; + z-index: 2; + opacity: 0; /* Make it invisible but still clickable */ + cursor: pointer; } -/* The slider */ -.cbi-checkbox .switch .slider { +.cbi-checkbox label { position: absolute; - cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; - background-color: #ccc; - transition: .4s; + background-color: #bbb; + transition: background-color .4s; + border-radius: 20px; /* Make the background rounded */ } -.cbi-checkbox .switch .slider:before { - position: absolute; +.cbi-checkbox label::after { content: ""; - height: 26px; - width: 26px; - left: 4px; - bottom: 4px; - background-color: white; - transition: .4s; + position: absolute; + top: 1px; /* Adjusted to match the new height */ + left: 1px; /* Adjusted to match the new width */ + width: 18px; /* Decreased to fit the new dimensions */ + height: 18px; /* Decreased to fit the new dimensions */ + background-color: #fff; + transition: left .4s; + border-radius: 50%; /* Ensures the slider stays circular */ } -.cbi-checkbox .switch input:checked + .slider { - background-color: #2196F3; +.cbi-checkbox input[type="checkbox"]:checked + label { + background-color: #77C2BB; } -.cbi-checkbox .switch input:focus + .slider { - box-shadow: 0 0 1px #2196F3; +.cbi-checkbox input[type="checkbox"]:checked + label::after { + left: 20px; /* Adjusted to new width */ + background-color: #009688; } - -.cbi-checkbox .switch input:checked + .slider:before { - transform: translateX(26px); -} \ No newline at end of file From cae44120b6c3308f94cda8e9b3a2f36a79472351 Mon Sep 17 00:00:00 2001 From: riley Date: Tue, 14 Nov 2023 13:16:01 -0500 Subject: [PATCH 18/19] fixed wrapping issue on wireless page --- luasrc/gaya/gaya.css | 1 - 1 file changed, 1 deletion(-) diff --git a/luasrc/gaya/gaya.css b/luasrc/gaya/gaya.css index 790da2f..3c81942 100644 --- a/luasrc/gaya/gaya.css +++ b/luasrc/gaya/gaya.css @@ -1391,7 +1391,6 @@ strong { display: inline-block; width: 100%; padding: 0.35rem 1rem 0.2rem; - white-space: nowrap; } .cbi-value ul { line-height: 1.25; From 3ce5d928bede65bbe17a9cc4da072c2d9cfc64c7 Mon Sep 17 00:00:00 2001 From: riley Date: Wed, 15 Nov 2023 18:36:07 -0500 Subject: [PATCH 19/19] fixed some select styling bugs --- luasrc/gaya/gaya.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/luasrc/gaya/gaya.css b/luasrc/gaya/gaya.css index 3c81942..da8549d 100644 --- a/luasrc/gaya/gaya.css +++ b/luasrc/gaya/gaya.css @@ -347,13 +347,13 @@ label { width: inherit; cursor: default; } - select:not([multiple="multiple"]):focus, + select:not([multiple]):focus, input:not(.cbi-button):focus, .cbi-dropdown:focus { border-color: var(--main-color); } .cbi-dropdown, - select[multiple="multiple"] { + select[multiple] { height: auto; } .cbi-value input[type="text"] {