Tidy some CSS

web/css/src/themes/dark.css

@@ -139,8 +139,8 @@ select {
   background-color: #ff3478;
 }
 
-.notification-container .unseen .title a,
-.notification-container .unseen .title {
+.notification-container .unseen .notification-title a,
+.notification-container .unseen .notification-title {
   color: #fff !important;
 }
 
@@ -382,10 +382,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
 .l-unit-toolbar__buttonstrip .fas {
 }
 
-.subtitle {
-  color: #ff3478;
-}
-
 .l-select {
   border: 1px solid #454545;
   box-shadow: 0 1px 1px rgb(0 0 0 / 40%) !important;
@@ -546,11 +542,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #707070 !important;
 }
 
-.l-unit-ft .subtitle,
-.l-unit .subtitle {
-  color: #ff3478;
-}
-
 .l-unit__name {
   color: #dadada;
 }
@@ -568,15 +559,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #fff;
 }
 
-.title b,
-.title {
-  color: #ff3478;
-}
-
-.title {
-
-}
-
 /* form styles */
 
 .vst-error {
@@ -1265,14 +1247,10 @@ form#vstobjects.suspended {
   border-bottom: none !important;
 }
 
-.shortcuts .header {
+.shortcuts-header {
   border-bottom: 1px solid #353535;
 }
 
-.shortcuts .title {
-
-}
-
 .shortcuts .close {
 
 }

web/css/src/themes/default.css

@@ -453,7 +453,7 @@ a {
   display: inline-block;
 }
 
-.notification-container .title {
+.notification-container .notification-title {
   color: #9e9e9e;
   font-weight: 600;
   line-height: 30px;
@@ -463,20 +463,20 @@ a {
   display: block;
 }
 
-.notification-container .title a {
+.notification-container .notification-title a {
   color: #9e9e9e;
 }
 
-.notification-container .unseen .title a,
-.notification-container .unseen .title {
+.notification-container .unseen .notification-title a,
+.notification-container .unseen .notification-title {
   color: #c36;
 }
 
-.notification-container .unseen .title a:hover {
+.notification-container .unseen .notification-title a:hover {
   color: #e83b75;
 }
 
-.notification-container .unseen .title a:active {
+.notification-container .unseen .notification-title a:active {
   color: #e83b75;
 }
 
@@ -512,7 +512,6 @@ a {
 
 .alert {
   border-radius: 4px;
-  font-size: 0.8rem;
   font-weight: 400;
   padding: 0.8rem;
   position: relative;
@@ -581,10 +580,6 @@ a {
   justify-content: center;
 }
 
-.form-container {
-  padding: 1em 1em 2em 9rem;
-}
-
 .card {
   overflow: hidden;
   background-color: #f5f5f5;
@@ -955,10 +950,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
   vertical-align: middle;
 }
 
-.l-sort-toolbar.subtitle {
-  padding-left: 96px;
-}
-
 .l-sort-toolbar__filter-apply {
   float: left;
   width: 32px;
@@ -1064,14 +1055,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
   line-height: 2rem;
 }
 
-.subtitle {
-  color: #c36;
-  font-size: 0.8rem;
-  font-weight: 600;
-  margin: 20px 0 18px 129px;
-  text-transform: uppercase;
-}
-
 .l-select {
   width: 178px;
   border: 1px solid #ddd;
@@ -1421,15 +1404,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
   display: block;
 }
 
-.l-unit-ft .subtitle,
-.l-unit .subtitle {
-  color: #c36;
-  font-size: 0.8rem;
-  font-weight: 600;
-  margin: 20px 0 18px 129px;
-  text-transform: uppercase;
-}
-
 .l-unit.l-unit--outdated .l-unit__date {
   color: #d24c4c;
   font-size: 10px;
@@ -2108,23 +2082,13 @@ body.mobile .l-icon-shortcuts {
   animation-play-state: paused;
 }
 
-.title b,
-.title {
-  color: #c36;
-  font-size: 0.8rem;
-  font-weight: 600;
-  padding: 0 30px 0 73px;
-  line-height: 30px;
-  text-transform: uppercase;
-}
+/* form styles */
 
-.title {
-  display: inline-block;
-  float: left;
+.form-container {
+  font-size: 0.85rem;
+  padding: 1em 1em 2em 9rem;
 }
 
-/* form styles */
-
 .vst-error {
   color: #f33;
   font-weight: 600;
@@ -2136,6 +2100,7 @@ body.mobile .l-icon-shortcuts {
 
 .vst-ok {
   color: #53ba55;
+  font-weight: 600;
   overflow: hidden;
   max-width: 500px;
   text-overflow: ellipsis;
@@ -2176,7 +2141,6 @@ body.mobile .l-icon-shortcuts {
 .form-label,
 .form-check label {
   color: #4b4b4b;
-  font-size: .85rem;
   font-weight: 600;
 }
 
@@ -2225,7 +2189,7 @@ body.mobile .l-icon-shortcuts {
   display: block;
   width: 100%;
   font-weight: normal;
-  font-size: .8rem;
+  font-size: 0.8rem;
   padding: 8px 30px 8px 12px;
   line-height: 1.5;
   border-radius: 4px;
@@ -2301,7 +2265,7 @@ a.vst-text:active b {
   color: #30659d;
   padding: 9px 18px;
   overflow: hidden;
-  font-size: .85rem;
+  font-size: 0.85rem;
 }
 
 .advanced-options a {
@@ -2775,6 +2739,10 @@ a.button.cancel {
   font-size: 0.8rem;
 }
 
+.login .form-label {
+  font-size: 0.85rem;
+}
+
 .login .form-control {
   border-color: #5787c8;
 }
@@ -3312,26 +3280,25 @@ form#vstobjects.suspended {
   line-height: 0.9rem;
 }
 
-.shortcuts .header {
+.shortcuts-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   border-bottom: 1px solid #606060;
-  height: 43px;
+  padding: 10px 10px 10px 15px;
 }
 
-.shortcuts .title {
+.shortcuts-title {
   text-transform: uppercase;
   color: #ff3478;
-  padding: 7px 0 7px 14px;
-  float: left;
   font-size: 0.85rem;
   letter-spacing: -0.01em;
+  font-weight: 600;
 }
 
 .shortcuts .close {
   cursor: pointer;
-  float: right;
-  height: 32px;
-  padding-top: 11px;
-  width: 46px;
+  width: 20px;
 }
 
 .shortcuts .close:hover {
@@ -3354,7 +3321,7 @@ form#vstobjects.suspended {
 
 .shortcuts ul {
   flex-grow: 1;
-  padding: 30px 20px;
+  padding: 40px 20px;
 }
 
 .shortcuts ul li {
@@ -3484,7 +3451,7 @@ form#vstobjects.suspended {
 .helper-container {
   float: right;
   margin-bottom: -450px;
-  margin-top: 420px;
+  margin-top: 418px;
   margin-right: 14px;
   padding-top: 0;
   width: 610px;

web/css/src/themes/vestia.css

@@ -254,21 +254,15 @@ strong {
   background: #fff !important;
 }
 
+.form-container {
 
+}
 
 .form-control,
 .form-select {
+  font-family: Arial, Helvetica, sans-serif;
   box-shadow: none;
-  border-radius: 0 !important;
-}
-
-.form-label,
-.form-check label {
-  font-size: 0.8rem;
-}
-
-.form-check-input {
-  margin-top: 1px;
+  border-radius: 0;
 }
 
 .pill {
@@ -311,8 +305,8 @@ strong {
   color: #ff791f;
 }
 
-.notification-container .unseen .title a,
-.notification-container .unseen .title {
+.notification-container .unseen .notification-title a,
+.notification-container .unseen .notification-title {
   color: #111;
 }
 
@@ -484,11 +478,6 @@ a.vst-text:hover b,
   box-shadow: none;
 }
 
-.form-control,
-.form-select {
-  font-family: Arial, Helvetica, sans-serif !important;
-}
-
 .server-info-data {
   line-height: 1rem !important;
 }
@@ -505,9 +494,9 @@ a.vst-text:hover b,
   box-shadow: 0 3px 12px rgb(0 0 0 / 80%) !important;
 }
 
-.shortcuts .title,
+.shortcuts-title,
 .shortcuts ul li span {
-  color: #b5da0b !important;
+  color: #b5da0b;
 }
 
 .l-sort-toolbar .sort-by b {

web/js/templates.js

@@ -7,7 +7,7 @@ App.Templates.html = {
         hint: [''],
         notification: [
                     '<li class="~!:UNSEEN~!"><span class="unselectable mark-seen" id="notification-~!:ID~!">&nbsp;</span>\
-                        <span class="title"><span class="unselectable icon ~!:TYPE~!">&nbsp;</span>~!:TOPIC~!</span>\
+                        <span class="notification-title"><span class="unselectable icon ~!:TYPE~!">&nbsp;</span>~!:TOPIC~!</span>\
                         ~!:NOTICE~!\
                         <b><span class="time">~!:TIME~! ~!:DATE~!</span></b>\
                     </li>'

web/templates/footer.html

@@ -18,8 +18,8 @@
   </div>
 
   <div class="shortcuts animated fadeIn" style="display:none">
-    <div class="header">
-      <div class="title"><?=_('Shortcuts')?></div>
+    <div class="shortcuts-header">
+      <div class="shortcuts-title"><?=_('Shortcuts')?></div>
       <div class="close text-center">
         <i class="fas fa-times"></i>
       </div>