Extract normalize.css dependency (#2875)

* Commit whitespace changes

* Extract normalize.css dependency

* Remove repeated normalize.css styles

* More consistent attribute order

* Tidy

* Remove invalid rel="preload" from stylesheets

This isn't doing anything, it's just duplicating the `rel` attribute producing invalid HTML.

See appropriate usage: https://3perf.com/blog/link-rels/

web/css/dependencies/normalize.min.css

@@ -0,0 +1 @@
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

web/css/src/themes/default.css

@@ -141,431 +141,19 @@
 
 /* Base
    ========================================================================== */
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- *  user zoom.
- * 3. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
- *  `em` units.
- */
-
-html {
-  font-family: sans-serif;
-  /* 1 */
-  -ms-text-size-adjust: 100%;
-  /* 2 */
-  -webkit-text-size-adjust: 100%;
-  /* 2 */
-}
-
-/**
- * Remove default margin.
- */
-body {
-  margin: 0;
-  background-color: #fff;
-}
 
 .debug-panel-contents {
   background-color: #fff;
 }
 
-/* HTML5 display definitions
-   ========================================================================== */
-/**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11
- * and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
- */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-
-/**
- * 1. Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
- */
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-  /* 1 */
-  vertical-align: baseline;
-  /* 2 */
-}
-
-/**
- * Prevents modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
- */
-[hidden],
-template {
-  display: none;
-}
-
 .hidden {
   display: none;
 }
-/* Links
-   ========================================================================== */
-/**
- * Remove the gray background color from active links in IE 10.
- */
-a {
-  background-color: transparent;
-}
-
-/**
- * Improve readability when focused and also mouse hovered in all browsers.
- */
-a:active, a:hover {
-  outline: 0;
-}
-
-/* Text-level semantics
-   ========================================================================== */
-/**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
- */
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-
-/**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
- */
-b,
-strong {
-  font-weight: 600;
-  color: #5f5f5f;
-}
-
-/**
- * Address styling not present in Safari and Chrome.
- */
-dfn {
-  font-style: italic;
-}
-
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari, and Chrome.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/**
- * Addresses styling not present in IE 8/9.
- */
-mark {
-  background: #ff0;
-  color: #000;
-}
-
-/**
- * Address inconsistent and variable font size in all browsers.
- */
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sup {
-  top: -0.5em;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-/* Embedded content
-   ========================================================================== */
-/**
- * 1. Remove border when inside `a` element in IE 8/9/10.
- * 2. Improves image quality when scaled in IE 7.
- */
-img {
-  border: 0;
-}
-
-/**
- * Correct overflow not hidden in IE 9/10/11.
- */
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Grouping content
-   ========================================================================== */
-/**
- * Address margin not present in IE 8/9 and Safari.
- */
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * Address differences between Firefox and other browsers.
- */
-hr {
-  box-sizing: content-box;
-  height: 0;
-}
-
-/**
- * Contain overflow in all browsers.
- */
-pre {
-  overflow: auto;
-}
-
-/**
- * Address odd `em`-unit font size rendering in all browsers.
- * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
- */
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-/* Forms
-   ========================================================================== */
-/**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
-/**
- * 1. Correct color not being inherited.
- *  Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
- * 4. Improves appearance and consistency in all browsers.
- */
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit;
-  /* 1 */
-  font: inherit;
-  /* 2 */
-  margin: 0;
-  /* 3 */
-}
-
-/**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
- */
-button {
-  overflow: visible;
-}
-
-/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
- */
-button,
-select {
-  text-transform: none;
-  /*color: transparent !important;*/
-  text-shadow: 0 0 0 #4b4b4b !important;
-}
-
-/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *  and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- *  `input` and others.
- * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
- *  Known issue: inner spacing remains in IE 6.
- */
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button;
-  /* 2 */
-  cursor: pointer;
-  /* 3 */
-}
-
-/**
- * Re-set default cursor for disabled elements.
- */
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-
-/**
- * Remove inner padding and border in Firefox 4+.
- */
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-input {
-  line-height: normal;
-}
-
-/**
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- *  Known issue: excess padding remains in IE 6.
- */
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box;
-  /* 1 */
-  padding: 0;
-  /* 2 */
-  margin-left: 0px;
-  margin-right: 8px;
-  margin-top: 2px;
-}
-
-/**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
- */
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
- *  (include `-moz` to future-proof).
- */
-input[type="search"] {
-  -webkit-appearance: textfield;
-  /* 1 */
-  /* 2 */
-  box-sizing: content-box;
-}
-
-/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * Define consistent border, margin, and padding.
- */
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-/**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- * 3. Corrects text not wrapping in Firefox 3.
- * 4. Corrects alignment displayed oddly in IE 6/7.
- */
-legend {
-  border: 0;
-  /* 1 */
-  padding: 0;
-  /* 2 */
-}
-
-/**
- * Remove default vertical scrollbar in IE 8/9/10/11.
- */
-textarea {
-  overflow: auto;
-}
-
-/**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
- */
-optgroup {
-  font-weight: 600;
-}
-
-/* Tables
-   ========================================================================== */
-/**
- * Remove most spacing between table cells.
- */
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-td,
-th {
-  padding: 0;
-}
 
 * {
   -webkit-tap-highlight-color: transparent;
 }
 
-body {
-/*  -webkit-touch-callout: none;
-  -webkit-text-size-adjust: none;
-  -webkit-user-select: none; */
-}
-
 html,
 input,
 textarea,
@@ -585,6 +173,7 @@ body {
   font-size: 0.9rem;
   height: 100%;
   color: #7c7c7c;
+  background-color: #fff;
 }
 
 .body-login, .body-reset {
@@ -675,7 +264,7 @@ a {
 }
 
 .l-header {
-  background: linear-gradient(to bottom, rgba(104,145,196,1) 0%,rgba(69,114,181,1) 50%,rgba(65,90,149,1) 100%); 
+  background: linear-gradient(to bottom, rgba(104,145,196,1) 0%,rgba(69,114,181,1) 50%,rgba(65,90,149,1) 100%);
   background-color: #5070a6;
   border-bottom: 1px solid rgba(255,255,255,0.95);
   overflow: hidden;
@@ -726,7 +315,7 @@ a {
   line-height: 39px;
   padding: 11px 10px;
   border-left: 1px solid transparent;
-  border-right: 1px solid transparent; 
+  border-right: 1px solid transparent;
 }
 
 .l-menu__item a:hover {
@@ -1545,7 +1134,7 @@ div.l-content > div.l-separator:nth-of-type(4) {
 }
 
 .body-firewall.lang-el .l-select {
-  max-width: 90px; 
+  max-width: 90px;
 }
 
 .body-mail.lang-el .l-select {
@@ -1584,7 +1173,7 @@ div.l-content > div.l-separator:nth-of-type(4) {
   font-weight: bold;
 }
 
-.lang-bg .l-stat__col .fas, 
+.lang-bg .l-stat__col .fas,
 .lang-bg .l-stat__col--active .fas {
   font-size: 0.85rem;
 }
@@ -3315,15 +2904,15 @@ a.button.cancel {
 }
 
 .additional-info td {
-	font-size: 0.75rem;
-	height: 20px;
-	font-weight: normal;
-	line-height: 0.95rem;
-	min-width: 70px
+  font-size: 0.75rem;
+  height: 20px;
+  font-weight: normal;
+  line-height: 0.95rem;
+  min-width: 70px
 }
 
 .additional-info td.details {
-	padding-left: 20px !important;
+  padding-left: 20px !important;
 }
 
 :focus {outline:none;}
@@ -3565,7 +3154,7 @@ form#vstobjects.suspended {
   padding-right: 8px;
   margin-right: 10px;
   line-height: 0.75rem;
-  box-shadow: 0px 1px 1px rgba(0,0,0,0.2), inset 0px 1px 0px rgba(0,0,0,0.08); 
+  box-shadow: 0px 1px 1px rgba(0,0,0,0.2), inset 0px 1px 0px rgba(0,0,0,0.08);
   background-color: rgba(255,255,255,0.75);
   font-weight: 500;
   border: 1px solid rgba(255,255,255,0.75);
@@ -3587,7 +3176,7 @@ form#vstobjects.suspended {
   border-radius: 50%;
   font-weight: 700;
   font-size: 0.75rem;
-  box-shadow: 0px 1px 2px rgba(70,70,70,0.5), 
+  box-shadow: 0px 1px 2px rgba(70,70,70,0.5),
 			  inset 0px 2px 2px #fff;
   text-shadow: 0px 1px 2px rgba(0,0,0,0.5);
   border: 1px solid #b8b8b8 !important;
@@ -4031,7 +3620,7 @@ form#vstobjects.suspended {
   font-family: 'Exo', Arial, Helvetica, sans-serif !important;
   font-weight: 500 !important;
   background-color: rgba(255,255,255,0.9) !important;
-  box-shadow: inset 0px 1px 3px rgba(0,0,0,0.25), 
+  box-shadow: inset 0px 1px 3px rgba(0,0,0,0.25),
 			  0 8px 40px 0 rgba(0, 0, 0, 0.35) !important;
   border-radius: 6px !important;
   border: 1px solid rgba(255,255,255,0.98) !important;
@@ -4192,13 +3781,13 @@ form#vstobjects.suspended {
 }
 
 .server-info-output {
-  color: #cc3366; 
-  padding: 10px 0 20px 20px; 
+  color: #cc3366;
+  padding: 10px 0 20px 20px;
   background: #fff;
 }
 
 .server-info-data {
-  margin-left: 100px; 
+  margin-left: 100px;
   margin-top: -20px;
 }
 
@@ -4209,8 +3798,8 @@ form#vstobjects.suspended {
 }
 
 .server-info-output {
-  color: #cc3366; 
-  padding: 10px 0 20px 20px; 
+  color: #cc3366;
+  padding: 10px 0 20px 20px;
   background: #fff;
 }
 
@@ -4284,7 +3873,7 @@ form#vstobjects.suspended {
 
 @media screen and (max-width: 950px) {
   .helper-container {
-	display: none;
+    display: none;
   }
 }
 

web/templates/includes/css.html

@@ -1,6 +1,7 @@
 <link rel="alternate icon" href="/images/favicon.png" type="image/png">
 <link rel="icon" href="/images/logo.svg" type="image/svg+xml">
-<link rel="stylesheet" href="/css/themes/default.min.css?<?=JS_LATEST_UPDATE?>" rel="preload" />
+<link rel="stylesheet" href="/css/dependencies/normalize.min.css?<?=JS_LATEST_UPDATE?>" />
+<link rel="stylesheet" href="/css/themes/default.min.css?<?=JS_LATEST_UPDATE?>" />
 <?php
     $selected_theme = (!empty($_SESSION['userTheme'])) ? $_SESSION['userTheme'] : $_SESSION['THEME'];
 // Load custom theme
@@ -8,21 +9,21 @@
 // Load HestiaCP-shipped themes (minified, updated/overwritten with updates) - ($HESTIA/web/css/themes/*.min.css)
         if (file_exists($_SERVER['HESTIA'] . '/web/css/themes/' . $selected_theme . '.min.css')) {
 ?>
-<link rel="stylesheet" href="/css/themes/<?=$selected_theme?>.min.css?<?=JS_LATEST_UPDATE?>" rel="preload" />
+<link rel="stylesheet" href="/css/themes/<?=$selected_theme?>.min.css?<?=JS_LATEST_UPDATE?>" />
 <?php
         }
 // Load custom theme files ($HESTIA/web/css/themes/custom/*.css)
         elseif (file_exists($_SERVER['HESTIA'] . '/web/css/themes/custom/' . $selected_theme . '.min.css')) {
 ?>
-<link rel="stylesheet" href="/css/themes/custom/<?=$selected_theme?>.min.css?<?=JS_LATEST_UPDATE?>" rel="preload" />
+<link rel="stylesheet" href="/css/themes/custom/<?=$selected_theme?>.min.css?<?=JS_LATEST_UPDATE?>" />
 <?php
         }else{
         ?>
-<link rel="stylesheet" href="/css/themes/custom/<?=$selected_theme?>.css?<?=JS_LATEST_UPDATE?>>" rel="preload" />
+<link rel="stylesheet" href="/css/themes/custom/<?=$selected_theme?>.css?<?=JS_LATEST_UPDATE?>>" />
         <?php
         }
     }
 ?>
-<link href="/css/dependencies/animate.min.css?<?=JS_LATEST_UPDATE?>" rel="stylesheet" rel="preload" />
-<link href="/css/dependencies/jquery-ui.custom.min.css?<?=JS_LATEST_UPDATE?>" rel="stylesheet" rel="preload" />
-<link href="/css/dependencies/fontawesome.min.css?<?=JS_LATEST_UPDATE?>" rel="stylesheet" rel="preload" />
+<link rel="stylesheet" href="/css/dependencies/animate.min.css?<?=JS_LATEST_UPDATE?>" />
+<link rel="stylesheet" href="/css/dependencies/jquery-ui.custom.min.css?<?=JS_LATEST_UPDATE?>" />
+<link rel="stylesheet" href="/css/dependencies/fontawesome.min.css?<?=JS_LATEST_UPDATE?>" />