Improve Edit Server expand/collapse (hestiacp#3018)

Author: AlecRust

web/css/src/themes/dark.css

@@ -662,35 +662,6 @@ textarea:focus::placeholder {
   box-shadow: 0 1px 6px rgb(0 52 91 / 75%);
 }
 
-a.vst-text,
-a.vst-text b {
-  color: #fff;
-}
-
-a.vst-text:hover,
-a.vst-text:hover b {
-  color: #ff3478;
-}
-
-a.vst-text:active,
-a.vst-text:active b {
-  color: #ff3478;
-}
-
-.advanced-options {
-  background: #454545;
-  border: 1px solid #505050;
-  text-shadow: 0 1px rgb(0 0 0 / 40%);
-  box-shadow:
-    inset 0 0 2px rgb(0 0 0 / 50%),
-    0 2px 6px rgb(0 0 0 / 40%);
-  color: #fff;
-}
-
-.advanced-options a {
-  color: #fff !important;
-}
-
 .generate {
   color: #29a9ff;
   border-radius: 4px;
@@ -1479,3 +1450,16 @@ li[aria-expanded="true"] a {
 .ui-button.button-suspended i {
   color: #999 !important;
 }
+
+/* Collapse component
+   ========================================================================== */
+
+.collapse-header {
+  background: #454545;
+  border: 1px solid #505050;
+  text-shadow: 0 1px rgb(0 0 0 / 40%);
+  box-shadow:
+    inset 0 0 2px rgb(0 0 0 / 50%),
+    0 2px 6px rgb(0 0 0 / 40%);
+  color: #fff;
+}

web/css/src/themes/default.css

@@ -842,14 +842,14 @@ div.l-content > div.l-separator:nth-of-type(4) {
 .context-menu.sort-order span.name {
   display: inline-block;
   padding: 12px;
-  width: 117px;
+  width: 141px;
   font-weight: 500;
 }
 
 .context-menu.sort-order span.up {
   display: inline-block;
   padding: 12px 14px;
-  width: 16px;
+  width: 44px;
 }
 
 .context-menu.sort-order span.active {
@@ -1134,9 +1134,10 @@ div.l-content > div.l-separator:nth-of-type(4) {
   height: 28px;
   min-width: 175px;
   padding-left: 10px;
-  background-image: url("/images/arrow.png");
-  background-position: 160px;
+  background-image: url(/images/arrow.svg);
   background-repeat: no-repeat;
+  background-size: 14px auto;
+  background-position: right 7px center;
   appearance: none;
 }
 
@@ -2197,7 +2198,8 @@ body.mobile .l-icon-shortcuts {
   border: 1px solid #ccc;
   color: #4e4e4e;
   appearance: none;
-  background-image: url(/images/arrow.png);
+  background-image: url(/images/arrow.svg);
+  background-size: 16px auto;
   background-repeat: no-repeat;
   background-position: right 9px center;
   text-shadow: 0 0 0 #4b4b4b;
@@ -2242,41 +2244,6 @@ body.mobile .l-icon-shortcuts {
   border-color: #cfcfcf;
 }
 
-a.vst-text,
-a.vst-text b {
-  color: #326b9b;
-}
-
-a.vst-text:hover,
-a.vst-text:hover b {
-  color: #c36;
-}
-
-a.vst-text:active,
-a.vst-text:active b {
-  color: #c36;
-}
-
-.advanced-options {
-  background: linear-gradient(to bottom, rgb(247 247 247 / 100%) 0%, rgb(255 255 255 / 100%) 100%);
-  border: 1px solid #ddd;
-  text-shadow: 0 1px rgb(255 255 255 / 95%);
-  box-shadow: inset 0 0 1px rgb(255 255 255 / 100%), inset 0 0 4px rgb(255 255 255 / 80%), 0 4px 6px rgb(190 190 190 / 40%);
-  color: #30659d;
-  padding: 9px 18px;
-  overflow: hidden;
-  font-size: 0.85rem;
-}
-
-.advanced-options a {
-  color: #30659d !important;
-}
-
-.advanced-options .fas {
-  margin-right: 20px;
-  width: 14px;
-}
-
 #advanced-options .u-console {
   width: 833px;
   height: 600px !important;
@@ -3690,6 +3657,50 @@ li[aria-expanded="true"] a {
 .password-meter[value="3"]::-moz-meter-bar { background: yellow; }
 .password-meter[value="4"]::-moz-meter-bar { background: green; }
 
+/* Collapse component
+   ========================================================================== */
+
+.collapse {}
+
+.collapse[open] .collapse-header::after {
+  transform: rotate(180deg);
+}
+
+.collapse-header {
+  background: linear-gradient(to bottom, rgb(247 247 247 / 100%) 0%, rgb(255 255 255 / 100%) 100%);
+  border: 1px solid #ddd;
+  text-shadow: 0 1px rgb(255 255 255 / 95%);
+  box-shadow: inset 0 0 1px rgb(255 255 255 / 100%), inset 0 0 4px rgb(255 255 255 / 80%), 0 4px 6px rgb(190 190 190 / 40%);
+  font-weight: 600;
+  color: #30659d;
+  cursor: pointer;
+  position: relative;
+  padding: 9px 18px;
+}
+
+.collapse-header:hover {
+  color: #ff3478;
+}
+
+.collapse-header::after {
+  content: "";
+  display: block;
+  background-image: url(/images/arrow.svg);
+  background-size: 22px auto;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 22px;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 15px;
+}
+
+.collapse-content {
+  box-sizing: border-box; /* Work around box-sizing not inheriting in <details> in many browsers */
+  padding: 20px 20px 10px;
+}
+
 /* Extend animate.css
    ========================================================================== */
 
@@ -3756,6 +3767,10 @@ li[aria-expanded="true"] a {
   margin-left: 10px !important;
 }
 
+.u-mr15 {
+  margin-right: 15px !important;
+}
+
 .u-mb5 {
   margin-bottom: 5px !important;
 }

web/css/src/themes/flat.css

@@ -23,10 +23,6 @@ strong {
   background: #fafafa !important;
 }
 
-.advanced-options {
-  background: #fafafa;
-}
-
 .to-top,
 .to-shortcuts,
 .to-top:hover,
@@ -94,10 +90,6 @@ strong {
   box-shadow: none;
 }
 
-.advanced-options {
-  box-shadow: none;
-}
-
 .ui-button,
 .button,
 .ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit,
@@ -198,3 +190,11 @@ strong {
     0 2px 10px rgb(0 0 0 / 30%),
     inset 0 0 2px rgb(255 255 255 / 100%);
 }
+
+/* Collapse component
+   ========================================================================== */
+
+.collapse-header {
+  background: #fafafa;
+  box-shadow: none;
+}

web/css/src/themes/vestia.css

@@ -28,11 +28,6 @@ strong {
   line-height: 1.2rem !important;
 }
 
-.advanced-options {
-  background: #fafafa;
-  box-shadow: none;
-}
-
 .l-header {
   box-shadow: none;
   background: #5d5d5d;
@@ -319,18 +314,6 @@ strong {
   border: 1px solid #f16100;
 }
 
-a.vst-text,
-a.vst-text b,
-.advanced-options a {
-  color: #444 !important;
-}
-
-a.vst-text:hover,
-a.vst-text:hover b,
-.advanced-options a:hover {
-  color: #ff791f !important;
-}
-
 .form-control:focus,
 .login .form-control:focus {
   border-color: #ff6701;
@@ -553,10 +536,6 @@ a.vst-text:hover b,
   margin-right: 15px;
 }
 
-.advanced-options .fas {
-  display: none !important;
-}
-
 a#btn-back {
   color: #30659d !important;
   background: none !important;
@@ -738,6 +717,23 @@ a.vst-advanced {
   margin-left: -10px;
 }
 
+/* Collapse component
+   ========================================================================== */
+
+.collapse-header {
+  background: #fafafa;
+  box-shadow: none;
+  color: #444;
+}
+
+.collapse-header:hover {
+  color: #ff791f;
+}
+
+.collapse-header .fas {
+  display: none;
+}
+
 /* Extend animate.css
    ========================================================================== */