Move common Sass variables into a single file

Part of slowly trying to bring all styles into a single CSS file.

css/converse.css

@@ -7073,7 +7073,7 @@ body.reset {
     display: block !important; }
   #conversejs .button-primary {
     color: white;
-    background-color: #3AA569; }
+    background-color: #E7A151; }
   #conversejs .button-secondary {
     color: white;
     background-color: #387592; }
@@ -8067,7 +8067,7 @@ body.reset {
   background-color: #E77051; }
   #conversejs.converse-embedded .chat-head-chatroom .chatroom-description,
   #conversejs .chat-head-chatroom .chatroom-description {
-    color: white;
+    color: #f6ccc1;
     font-size: 16px;
     font-size: 80%;
     overflow-y: hidden;
@@ -8089,15 +8089,9 @@ body.reset {
   #conversejs.converse-embedded .chat-head-chatroom .chatbox-btn.button-on:before,
   #conversejs .chat-head-chatroom .chatbox-btn.button-on:before {
     color: #E77051; }
-  #conversejs.converse-embedded .chat-head-chatroom .chat-title,
-  #conversejs .chat-head-chatroom .chat-title {
-    color: #FF977C; }
-    #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-name,
-    #conversejs .chat-head-chatroom .chat-title .chatroom-name {
-      color: white; }
-    #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
-    #conversejs .chat-head-chatroom .chat-title .chatroom-jid {
-      font-size: 12px; }
+  #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
+  #conversejs .chat-head-chatroom .chat-title .chatroom-jid {
+    font-size: 12px; }
 #conversejs.converse-embedded .chatroom,
 #conversejs .chatroom {
   width: 400px; }
@@ -8406,11 +8400,6 @@ body.reset {
     #conversejs .message.chat-msg .spoiler-toggle:before {
       padding-right: 0.25em;
       whitespace: nowrap; }
-  #conversejs .message.chat-msg .avatar {
-    background: #818479;
-    height: 36px;
-    vertical-align: middle;
-    width: 36px; }
   #conversejs .message.chat-msg .chat-msg-content {
     margin-left: 0.5rem;
     word-wrap: break-word;
@@ -8422,18 +8411,30 @@ body.reset {
     color: #666; }
     #conversejs .message.chat-msg .chat-msg-text .emojione {
       margin-bottom: -6px; }
+  #conversejs .message.chat-msg .avatar {
+    margin-top: 0.5em;
+    background: #818479;
+    height: 36px;
+    vertical-align: middle;
+    width: 36px; }
   #conversejs .message.chat-msg .chat-msg-heading {
+    margin-top: 0.5em;
+    padding-right: 0.25rem;
     padding-bottom: 0.25rem;
     display: block; }
     #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
       font-weight: bold; }
     #conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
       padding-left: 0.5em; }
-  #conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
-  #conversejs .message.chat-msg.chat-msg-followup .avatar {
-    display: none; }
-  #conversejs .message.chat-msg.chat-msg-followup .chat-msg-content {
-    margin-left: 2.75rem; }
+  #conversejs .message.chat-msg.chat-action .chat-msg-heading {
+    margin-top: 0; }
+  #conversejs .message.chat-msg.chat-msg-followup {
+    padding: 0.25rem 1rem; }
+    #conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
+    #conversejs .message.chat-msg.chat-msg-followup .avatar {
+      display: none; }
+    #conversejs .message.chat-msg.chat-msg-followup .chat-msg-content {
+      margin-left: 2.75rem; }
 #conversejs .chatroom-body .message.onload {
   animation: colorchange-chatmessage-muc 1s;
   -webkit-animation: colorchange-chatmessage-muc 1s; }
@@ -8602,11 +8603,6 @@ body.reset {
   background: #3d6b00;
   color: inherit; }
 
-/*
-    Color scheme helpers:
-    https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
-    http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
- */
 #conversejs.converse-embedded {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;

css/inverse.css

@@ -8209,7 +8209,7 @@ body {
   background-color: #E77051; }
   #conversejs.converse-embedded .chat-head-chatroom .chatroom-description,
   #conversejs .chat-head-chatroom .chatroom-description {
-    color: white;
+    color: #f6ccc1;
     font-size: 18px;
     font-size: 80%;
     overflow-y: hidden;
@@ -8231,15 +8231,9 @@ body {
   #conversejs.converse-embedded .chat-head-chatroom .chatbox-btn.button-on:before,
   #conversejs .chat-head-chatroom .chatbox-btn.button-on:before {
     color: #E77051; }
-  #conversejs.converse-embedded .chat-head-chatroom .chat-title,
-  #conversejs .chat-head-chatroom .chat-title {
-    color: #FF977C; }
-    #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-name,
-    #conversejs .chat-head-chatroom .chat-title .chatroom-name {
-      color: white; }
-    #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
-    #conversejs .chat-head-chatroom .chat-title .chatroom-jid {
-      font-size: 14px; }
+  #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
+  #conversejs .chat-head-chatroom .chat-title .chatroom-jid {
+    font-size: 14px; }
 #conversejs.converse-embedded .chatroom,
 #conversejs .chatroom {
   width: 300px; }
@@ -8405,7 +8399,7 @@ body {
                   background-color: orange; }
             #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
             #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator {
-              color: #E77051; }
+              color: #D24E2B; }
             #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.visitor,
             #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.visitor {
               color: #A8ABA1; }
@@ -8594,11 +8588,6 @@ body {
     #conversejs .message.chat-msg .spoiler-toggle:before {
       padding-right: 0.25em;
       whitespace: nowrap; }
-  #conversejs .message.chat-msg .avatar {
-    background: #818479;
-    height: 36px;
-    vertical-align: middle;
-    width: 36px; }
   #conversejs .message.chat-msg .chat-msg-content {
     margin-left: 0.5rem;
     word-wrap: break-word;
@@ -8610,18 +8599,30 @@ body {
     color: #666; }
     #conversejs .message.chat-msg .chat-msg-text .emojione {
       margin-bottom: -6px; }
+  #conversejs .message.chat-msg .avatar {
+    margin-top: 0.5em;
+    background: #818479;
+    height: 36px;
+    vertical-align: middle;
+    width: 36px; }
   #conversejs .message.chat-msg .chat-msg-heading {
+    margin-top: 0.5em;
+    padding-right: 0.25rem;
     padding-bottom: 0.25rem;
     display: block; }
     #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
       font-weight: bold; }
     #conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
       padding-left: 0.5em; }
-  #conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
-  #conversejs .message.chat-msg.chat-msg-followup .avatar {
-    display: none; }
-  #conversejs .message.chat-msg.chat-msg-followup .chat-msg-content {
-    margin-left: 2.75rem; }
+  #conversejs .message.chat-msg.chat-action .chat-msg-heading {
+    margin-top: 0; }
+  #conversejs .message.chat-msg.chat-msg-followup {
+    padding: 0.25rem 1rem; }
+    #conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
+    #conversejs .message.chat-msg.chat-msg-followup .avatar {
+      display: none; }
+    #conversejs .message.chat-msg.chat-msg-followup .chat-msg-content {
+      margin-left: 2.75rem; }
 #conversejs .chatroom-body .message.onload {
   animation: colorchange-chatmessage-muc 1s;
   -webkit-animation: colorchange-chatmessage-muc 1s; }

sass/_chatbox.scss

@@ -136,7 +136,7 @@
             }
         }
         .chat-title {
-            color: $chat-head-text-color;
+            color: white;
             display: block;
             line-height: $line-height-large;
             overflow: hidden;

sass/_chatrooms.scss

@@ -11,7 +11,7 @@
         background-color: $chatroom-head-color;
 
         .chatroom-description {
-            color: white;
+            color: lighten($chatroom-head-color, 25%);
             font-size: $font-size-large;
             font-size: 80%;
             overflow-y: hidden;
@@ -37,10 +37,6 @@
             }
         }
         .chat-title {
-            color: $chatroom-color-lightest;
-            .chatroom-name {
-                color: white;
-            }
             .chatroom-jid {
                 font-size: $font-size-small;
             }

sass/_messages.scss

@@ -19,7 +19,7 @@
             .separator-text {
                 background: white;
                 bottom: 1px; // Offset needed due to .separator border size
-                color: #666;
+                color: $message-text-color;
                 display: inline-block;
                 line-height: 2em;
                 padding: 0 1em;
@@ -91,13 +91,6 @@
                     whitespace: nowrap;
                 }
             }
-            .avatar {
-                background: $gray-color;
-                height: 36px;
-                vertical-align: middle;
-                width: 36px;
-            }
-
             .chat-msg-content {
                 margin-left: 0.5rem;
                 word-wrap: break-word;
@@ -111,13 +104,22 @@
 
             .chat-msg-text {
                 padding: 0;
-                color: #666;
+                color: $message-text-color;
                 .emojione {
                     margin-bottom: -6px;
                 }
             }
 
+            .avatar {
+                margin-top: 0.5em;
+                background: $gray-color;
+                height: 36px;
+                vertical-align: middle;
+                width: 36px;
+            }
             .chat-msg-heading {
+                margin-top: 0.5em;
+                padding-right: 0.25rem;
                 padding-bottom: 0.25rem;
                 display: block;
 
@@ -128,7 +130,14 @@
                     padding-left: 0.5em;
                 }
             }
+            &.chat-action {
+                .chat-msg-heading {
+                    margin-top: 0;
+                }
+            }
             &.chat-msg-followup {
+                padding: 0.25rem 1rem;
+
                 .chat-msg-heading,
                 .avatar {
                     display: none;

sass/_variables.scss

@@ -0,0 +1,119 @@
+/*
+    Color scheme helpers:
+    https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
+    http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
+ */
+$subdued-color: #A8ABA1 !default;
+$gray-color: #818479 !default;
+$dark-gray-color: #585B51!default;
+$visitor-color: #A8ABA1 !default;
+
+$lightest-blue: #89B7CD;
+$light-blue: #578EA9;
+$blue: #387592;
+$dark-blue: #206485;
+$darkest-blue: #114C68;
+
+$lightest-red: #FFB9A7;
+$light-red: #FF977C;
+$red: #E77051;
+$dark-red: #D24E2B;
+$darkest-red: #A53214;
+
+$lightest-orange: #FFD6A7;
+$light-orange: #E7A151;
+$orange: #E7A151;
+$dark-orange: #D2842B;
+$darkest-orange: #A56214;
+
+$greenish-white: #E7FBF0;
+$reddish-white: #FFECE7;
+
+$light-green: #5CBC86;
+$green: #3AA569;
+$dark-green: #1E9652;
+$darkest-green: #0E763B;
+
+$lightest-green: #E7FBF0;
+$light-green: #5CBC86;
+$green: #3AA569;
+$dark-green: #1E9652;
+$darkest-green: #0E763B;
+
+$link-color: $light-blue !default;
+$dark-link-color: $dark-blue !default;
+$global-background-color: $light-blue !default;
+
+$inverse-link-color: white !default;
+$link-shadow-color: #FAFAFA !default;
+$text-shadow-color: #FAFAFA !default;
+$text-color: #777 !default;
+$message-text-color: #666 !default;
+$light-text-color: #A8ABA1 !default;
+$border-color: #CCC !default;
+$icon-color: $blue !default;
+$save-button-color: $green !default;
+
+$chat-textarea-height: 60px !default;
+
+$send-button-height: 27px !default;
+$send-button-margin: 3px !default;
+
+$message-them-color: $green !default;
+
+$roster-height: 194px !default;
+
+$chat-head-color: $green !default;
+$chat-head-text-color: white !default;
+$chat-head-inverse-text-color: white !default;
+
+$input-focus-color: #1A9707 !default;
+$highlight-color: #DCF9F6 !default;
+
+$primary-color: $orange !default;
+$secondary-color: $blue !default;
+$warning-color: $dark-red !default;
+
+$light-background-border-color: #B1BFC4 !default;
+$light-background-color: #FCFDFD !default;
+
+$moderator-color: $dark-red !default;
+$online-color: $green !default;
+$error-color: $darkest-red !default;
+$info-color: $dark-green !default;
+
+$rounded-border-radius: 4px !default;
+
+$button-border-radius: 5px !default;
+$chatbox-border-radius: 4px !default;
+$bottom-gutter-height: 35px !default;
+
+$mobile_landscape_height: 450px !default;
+$mobile_portrait_length: 480px !default;
+
+$message-font-size: 14px !default;
+
+$font-size-tiny: 10px !default;
+
+$controlbox-width: 250px !default;
+$chat-gutter: 0.5em !default;
+$minimized-chats-width: 130px !default;
+
+$mobile-chat-width: 100% !default;
+$mobile-chat-height: 400px !default;
+$small-mobile-chat-height: 300px !default;
+
+$font-path: "../fonticons/fonts/" !default;
+
+$chatroom-head-color: $red !default;
+$chatroom-color-light: $light-red !default;
+$chatroom-color-dark: $darkest-red !default;
+$chatroom-message-them-color: $green !default;
+
+$headline-head-color: $orange !default;
+
+$box-close-button-padding-top: 4px !default;
+$box-close-button-padding-bottom: 4px !default;
+$box-close-button-padding-left: 4px !default;
+$box-close-button-padding-right: 4px !default;
+$box-close-font-size: 16px !default;

sass/converse.scss

@@ -7,6 +7,7 @@
  */
 @import "font-awesome";
 @import "bourbon";
+@import "variables";
 @import "converse/variables";
 
 @import "bootstrap/scss/functions";

sass/converse/_variables.scss

@@ -1,139 +1,28 @@
-/*
-    Color scheme helpers:
-    https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
-    http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
- */
-
-$subdued-color: #A8ABA1 !default;
-$gray-color: #818479 !default;
-$dark-gray-color: #585B51!default;
-$visitor-color: #A8ABA1 !default;
-
-$lightest-blue: #89B7CD;
-$light-blue: #578EA9;
-$blue: #387592;
-$dark-blue: #206485;
-$darkest-blue: #114C68;
-
-$lightest-red: #FFB9A7;
-$light-red: #FF977C;
-$red: #E77051;
-$dark-red: #D24E2B;
-$darkest-red: #A53214;
-
-$lightest-orange: #FFD6A7;
-$light-orange: #E7A151;
-$orange: #E7A151;
-$dark-orange: #D2842B;
-$darkest-orange: #A56214;
-
-$greenish-white: #E7FBF0;
-$reddish-white: #FFECE7;
-
-$lightest-green: #BCEDD1;
-$light-green: #5CBC86;
-$green: #3AA569;
-$dark-green: #1E9652;
-$darkest-green: #0E763B;
-
-$link-color: $light-blue !default;
-$dark-link-color: $dark-blue !default;
-$global-background-color: $light-blue !default;
-
-$inverse-link-color: white !default;
-$link-shadow-color: #FAFAFA !default;
-$text-shadow-color: #FAFAFA !default;
-$text-color: #777 !default;
-$light-text-color: #A8ABA1 !default;
-$border-color: #CCC !default;
-$icon-color: $blue !default;
-$save-button-color: $green !default;
-$chat-textarea-height: 60px !default;
 $max-chat-textarea-height: 200px !default;
-$send-button-height: 27px !default;
-$send-button-margin: 3px !default;
-
-$message-them-color: $green !default;
+$emoji-picker-height: 100px !default;
 
-$roster-height: 194px !default;
 $roster-item-height: 60px !default;
 
-$chat-head-color: $green !default;
-$chat-head-text-color: white !default;
-$chat-head-inverse-text-color: white !default;
 $chat-head-height: 55px !default;
 
-$input-focus-color: #1A9707 !default;
-$highlight-color: #DCF9F6 !default;
-
 $controlbox-dropdown-height: 25px !default;
 $controlbox-head-color: $light-blue !default;
 $controlbox-head-height: 55px !default;
 $controlbox-pane-padding: 1em !default;
 
-$primary-color: $green !default;
-$secondary-color: $blue !default;
-$warning-color: $dark-red !default;
-
-$light-background-border-color: #B1BFC4 !default;
-$light-background-color: #FCFDFD !default;
-
-$moderator-color: $dark-red !default;
-$online-color: $green !default;
-$error-color: $darkest-red !default;
-$info-color: $dark-green !default;
-
-$rounded-border-radius: 4px !default;
-
-$button-border-radius: 5px !default;
-$chatbox-border-radius: 4px !default;
-$bottom-gutter-height: 35px !default;
 $chatbox-hover-height: 1em !default;
 
-$mobile_landscape_height: 450px !default;
-$mobile_portrait_length: 480px !default;
-
-$message-font-size: 14px !default;
-
-$font-size-tiny: 10px !default;
 $font-size-small: 12px !default;
 $font-size: 14px !default;
 $font-size-large: 16px !default;
 $font-size-huge: 20px !default;
 $legend-font-size: 16px !default;
 
-$toolbar-color: $greenish-white !default;
-
-$emoji-picker-height: 100px !default;
-
 $line-height-small:  14px !default;
 $line-height:  16px !default;
 $line-height-large:  20px !default;
 
-$controlbox-width: 250px !default;
 $chat-width: 250px !default;
 $chat-height: 450px !default;
-$chat-gutter: 0.5em !default;
-$minimized-chats-width: 130px !default;
-
-$mobile-chat-width: 100% !default;
-$mobile-chat-height: 400px !default;
-$small-mobile-chat-height: 300px !default;
-
-$font-path: "../fonticons/fonts/" !default;
 
 $chatroom-width: 400px !default;
-$chatroom-head-color: $red !default;
-$chatroom-color-light: $light-red !default;
-$chatroom-color-lightest: $light-red !default;
-$chatroom-color-dark: $darkest-red !default;
-$chatroom-message-them-color: $green !default;
-$chatroom-toolbar-color: $reddish-white !default;
-
-$headline-head-color: $orange !default;
-
-$box-close-button-padding-top: 4px !default;
-$box-close-button-padding-bottom: 4px !default;
-$box-close-button-padding-left: 4px !default;
-$box-close-button-padding-right: 4px !default;
-$box-close-font-size: 16px !default;

sass/inverse.scss

@@ -7,6 +7,7 @@
  */
 @import "font-awesome";
 @import "bourbon";
+@import "variables";
 @import "inverse/variables";
 
 @import "bootstrap/scss/functions";

sass/inverse/_variables.scss

@@ -1,145 +1,36 @@
-/*
-    Color scheme helpers:
-    https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
-    http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
- */
-$subdued-color: #A8ABA1 !default;
-$gray-color: #818479 !default;
-$dark-gray-color: #585B51!default;
-$visitor-color: #A8ABA1 !default;
-
-$lightest-blue: #89B7CD;
-$light-blue: #578EA9;
-$blue: #387592;
-$dark-blue: #206485;
-$darkest-blue: #114C68;
-
-$lightest-red: #FFB9A7;
-$light-red: #FF977C;
-$red: #E77051;
-$dark-red: #D24E2B;
-$darkest-red: #A53214;
-
-$lightest-orange: #FFD6A7;
-$light-orange: #E7A151;
-$orange: #E7A151;
-$dark-orange: #D2842B;
-$darkest-orange: #A56214;
-
-$greenish-white: #E7FBF0;
-$reddish-white: #FFECE7;
-
-$lightest-green: #E7FBF0;
-$light-green: #5CBC86;
-$green: #3AA569;
-$dark-green: #1E9652;
-$darkest-green: #0E763B;
-
-$link-color: $light-blue !default;
-$dark-link-color: $dark-blue !default;
-$global-background-color: $light-blue !default;
-
-$inverse-link-color: white !default;
-$link-shadow-color: #FAFAFA !default;
-$text-shadow-color: #FAFAFA !default;
-$text-color: #777 !default;
-$light-text-color: #A8ABA1 !default;
-$border-color: #CCC !default;
-$icon-color: $blue !default;
-$save-button-color: $green !default;
-$send-button-height: 27px !default;
-$send-button-margin: 3px !default;
-
-$message-them-color: $green !default;
-
+$max-chat-textarea-height: 400px !default;
 $emoji-picker-height: 150px !default;
 
-$roster-height: 194px !default;
 $roster-item-height: 30px !default;
 
 $flyout-padding: 1.2em;
 
-$chat-head-color: $green !default;
-$chat-head-text-color: white !default;
-$chat-head-inverse-text-color: white !default;
 $chat-head-height: 62px !default;
 
-$chat-textarea-height: 60px !default;
-$max-chat-textarea-height: 400px !default;
-
-$input-focus-color: #1A9707 !default;
-$highlight-color: #DCF9F6 !default;
-
 $controlbox-dropdown-height: 30px !default;
 $controlbox-head-color: $light-blue !default;
 $controlbox-head-height: 63px !default;
 $controlbox-pane-padding: $flyout-padding !default;
 
-$primary-color: $orange !default;
-$secondary-color: $blue !default;
-$warning-color: $dark-red !default;
-
-$light-background-border-color: #B1BFC4 !default;
-$light-background-color: #FCFDFD !default;
-
-$moderator-color: $red !default;
-$online-color: $green !default;
-$error-color: $darkest-red !default;
-$info-color: $dark-green !default;
-
 $rounded-border-radius: 4px !default;
 
-$button-border-radius: 5px !default;
-$chatbox-border-radius: 4px !default;
-$bottom-gutter-height: 35px !default;
 $chatbox-hover-height: 6px !default;
 
-$mobile_landscape_height: 450px !default;
-$mobile_portrait_length: 480px !default;
-
-$message-font-size: 14px !default;
-
-$font-size-tiny: 10px !default;
 $font-size-small: 14px !default;
 $font-size: 16px !default;
 $font-size-large: 18px !default;
 $font-size-huge: 26px !default;
 $legend-font-size: 18px !default;
 
-$toolbar-color: $greenish-white !default;
-
 $line-height-small:  20px !default;
 $line-height:  22px !default;
 $line-height-large:  24px !default;
 $line-height-huge:  30px !default;
 
-$controlbox-width: 250px !default;
 $chat-width: 100% !default;
 $chat-height: 100%;
-$chat-gutter: 0.5em !default;
-$minimized-chats-width: 130px !default;
 
 $padding: 1em;
 
-$mobile-chat-width: 100% !default;
-$mobile-chat-height: 400px !default;
-$small-mobile-chat-height: 300px !default;
-
-$font-path: "../fonticons/fonts/" !default;
-
 $chatroom-head-height: 62px !default;
 $chatroom-width: 300px !default;
-$chatroom-head-color: $red !default;
-$chatroom-color-light: $light-red !default;
-$chatroom-color-lightest: $light-red !default;
-$chatroom-color-dark: $darkest-red !default;
-$chatroom-message-them-color: $green !default;
-$chatroom-toolbar-color: $reddish-white !default;
-
-$headline-head-color: $orange !default;
-
-$box-close-button-padding-top: 4px !default;
-$box-close-button-padding-bottom: 4px !default;
-$box-close-button-padding-left: 4px !default;
-$box-close-button-padding-right: 4px !default;
-$box-close-font-size: 16px !default;