background: inherit;
}
-.td[width="33%"] {
+.td[width="33%"],
+.td[width="33%"]~.td {
padding: 1.1em;
}
background-color: transparent;
background-image: none;
box-shadow: none;
+ align-items: center;
}
select,
position: fixed;
z-index: 1000;
top: 0;
- display: block;
+ opacity: 1;
+ visibility: visible;
width: 100%;
height: 100%;
pointer-events: none;
background-color: rgb(240, 240, 240);
+ transition: visibility 400ms, opacity 400ms;
}
.main > .loading > span {
height: calc(100% - 4rem);
background-color: #fff;
background-color: var(--menu-bg-color);
+ transition: visibility 400ms, width 400ms;
}
.main-right {
cursor: pointer;
}
+.modemenu-buttons {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ color: #fff;
+ color: var(--header-color);
+ background: #09c;
+ background: var(--header-bg);
+ padding: .5rem;
+ transition: box-shadow .2s;
+ box-shadow: 0 2px 5px rgb(0 0 0 / 26%);
+}
+
+#modemenu {
+ margin: 0.25rem;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+#modemenu > li > a {
+ font-size: .8rem;
+ font-weight: bold;
+ padding: .3rem .8rem;
+ white-space: nowrap;
+ text-decoration: none;
+ text-transform: uppercase;
+ color: #fff !important;
+ border-radius: 3px;
+ background-color: #bfbfbf;
+ text-shadow: none;
+}
+
+#modemenu > li > a.active {
+ background-color: #5bc0de !important;
+}
+
+#modemenu > li.divider {
+ margin-left: .25rem;
+ margin-right: .25rem;
+ border: .5rem solid var(--submenu-bg-hover);
+ border-left: 1px solid var(--submenu-bg-hover);
+ border-right: 1px solid var(--submenu-bg-hover);
+ border-radius: 1rem;
+}
+
#xhr_poll_status {
display: flex;
}
}
.main > .main-left > .nav > li {
- padding: .5rem 1rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
color: var(--menu-color);
}
+.main > .main-left > .nav > li.active > a {
+ color: #fff;
+}
+
+.main > .main-left > .nav > li.active {
+ background-color: #09c;
+ background-color: var(--submenu-bg-hover-active);
+}
+
+.main > .main-left > .nav > li.slide.active {
+ background-color: unset;
+}
+
.main > .main-left > .nav > .slide {
padding: 0;
}
display: none;
}
+.main > .main-left > .nav > .slide.active > ul {
+ display: block;
+}
+
.main > .main-left > .nav > .slide > .menu,
-.main > .main-left > .nav > li > [data-title="Logout"] {
+.main > .main-left > .nav > li > [data-title="Logout"],
+.main > .main-left > .nav > li > [data-title="Dashboard"] {
font-size: 1.15rem;
font-weight: 500;
display: flex;
background: none;
}
-.main > .main-left > .nav > .slide > .slide-menu > li {
- padding: .4rem 2rem;
-}
-
.main > .main-left > .nav > .slide > .slide-menu > .active {
background-color: #09c;
background-color: var(--submenu-bg-hover-active);
.main > .main-left > .nav > .slide > .slide-menu > li > a {
white-space: nowrap;
text-decoration: none;
+ padding: .4rem 2rem;
}
.main > .main-left > .nav > .slide > .slide-menu > .active > a {
.cbi-progressbar::after {
font-family: monospace;
- font-size: 1.3em;
font-weight: bold;
font-size-adjust: .38;
line-height: normal;
#syslog {
font-size: small;
- line-height: 1.25;
overflow-y: hidden;
width: 100%;
min-height: 15rem;
.darkMask {
position: fixed;
z-index: 99;
- display: none;
width: 100%;
height: 100%;
content: "";
background-color: rgba(0, 0, 0, .56);
+ transition: opacity 400ms, visibility 400ms;
+ visibility: hidden;
+ opacity: 0;
}
/* diagnostics */
margin-bottom: .2rem;
}
+.control-group {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 2px;
+}
+
[data-page="admin-system-opkg"] div.btn {
line-height: 3;
display: inline;
.main > .main-left > .nav > li,
.main > .main-left > .nav > li a,
.main > .main-left > .nav > .slide > .menu,
- .main > .main-left > .nav > li > [data-title="Logout"] {
+ .main > .main-left > .nav > li:last-child > [data-title] {
font-size: .9rem;
}
.main-left {
position: fixed;
z-index: 100;
- width: 0;
+ visibility: hidden;
}
.main-right {