Merge pull request 'Theme bug fixes' (#1) from riley/luci-theme-privaterouter:main into main

Reviewed-on: #1

css/custom.css

@@ -1,2 +1,263 @@
-.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}.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}}
+.Dashboard {
-EOL
+    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
+}
+
+.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
+    }
+}

luasrc/gaya/gaya.css

@@ -654,6 +654,7 @@ label {
   
   .cbi-map {
     margin-top: 10px;
+    position: relative;
   }
   
   #cbi-shadowsocksr .cbi-map-descr {
@@ -674,9 +675,16 @@ strong {
     white-space: nowrap;
     color: #ffffff;
   }
+  .cbi-value.nowrap:not(.td) {
+    white-space: normal;
+  }
   [disabled="disabled"] {
     pointer-events: none;
   }
+  div[id^="cbid"][id$=".settings.password"] .control-group {
+    display: flex;
+  }
+
 
   /* Sidebar */
   .main > .main-left {
@@ -1007,11 +1015,28 @@ strong {
     border-radius: 20px;
     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 */
+  }
+
+  .cbi-section:nth-of-type(2) {
+      z-index: 3; 
+  }
+
+  .cbi-section:nth-of-type(3) {
+      z-index: 2;
+  }
+
+  .cbi-section:nth-of-type(4) {
+      z-index: 1; /* the last section will be at the bottom */
+  }
+
   .cbi-modal .cbi-tabmenu {
     margin-left: 0;
   }
@@ -1192,6 +1217,9 @@ strong {
     font-weight: 700;
     background-color: #d4d4d4;
   }
+  .cbi-button-neutral {
+    border-bottom: 2px solid #909090;
+  }
   .btn.primary,
   .cbi-page-actions .cbi-button-save,
   .cbi-page-actions .cbi-button-apply + .cbi-button-save,
@@ -1794,7 +1822,6 @@ strong {
     animation: anim-rotate 2s infinite cubic-bezier(0.18, 0.89, 0.32, 1.28);
     background: url(./icons/spinner16.svg) no-repeat center;
   }
-  }
   .left,
   .left::before {
     text-align: left !important;
@@ -2569,7 +2596,6 @@ strong {
       font-size: 0.8rem;
       padding: 0.3rem 0.6rem;
       position: relative;
-      bottom: -0.5rem;
     }
     .label,
     [data-indicator] {
@@ -2719,7 +2745,7 @@ strong {
     .cbi-value input[type="password"],
     .cbi-value input[name^="pw"],
     .cbi-value input[data-update="change"]:nth-child(2) {
-      width: 13rem !important;
+      width: 100%;
       min-width: 13rem;
       color: #fff;
     }