Standardize css

resources/base.scss

@@ -713,7 +713,7 @@ math {
 }
 
 #chat-icon {
-    color: #045343;
+    color: $theme_color;
 }
 
 #chat-icon:hover {
@@ -924,37 +924,37 @@ select {
 }
 
 ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-    color: #045343;
+    color: $theme_color;
     opacity: 1; /* Firefox */
     text-align: center;
 }
 
 :-ms-input-placeholder { /* Internet Explorer 10-11 */
-    color: #045343;
+    color: $theme_color;
     text-align: center;
 }
 
 ::-ms-input-placeholder { /* Microsoft Edge */
-    color: #045343;
+    color: $theme_color;
     text-align: center;
 }
 
 input::placeholder{
-    color: #045343;
+    color: $theme_color;
     text-align: center;
 }
 
 ::-webkit-input-placeholder {
-    color: #045343;
+    color: $theme_color;
     text-align: center;
 }
 
 :-moz-placeholder { /* Firefox 18- */
-    color: #045343;
+    color: $theme_color;
     text-align: center;
 }
 
 ::-moz-placeholder {  /* Firefox 19+ */
-    color: #045343;
+    color: $theme_color;
     text-align: center;
 }

resources/blog.scss

@@ -35,7 +35,7 @@
 .left-sidebar-item.active {
     color: white;
     font-weight: bold;
-    background-color: #045343;
+    background-color: $theme_color;
 
     .sidebar-icon {
         color: white;
@@ -199,7 +199,7 @@
 }
 
 .left-sidebar-item.active:hover {
-    background-color: #045343;
+    background-color: $theme_color;
 }
 
 .sidebar-icon {

resources/chatbox.scss

@@ -1,3 +1,5 @@
+@import "vars";
+
 .chat {
     background: white;
 }
@@ -179,7 +181,7 @@
     color: white;
 }
 .chat-input-icon {
-    color: #045343;
+    color: $theme_color;
 }
 .chat-input-icon:hover {
     background: lightgray;

resources/vars.scss

@@ -4,6 +4,7 @@ $border_gray: #ccc;
 $background_gray: #ededed;
 $background_light_gray: #fafafa;
 $announcement_red: #ae0000;
+$theme_color: #045343;
 
 $base_font_size: 14px;
 $widget_border_radius: 4px;

resources/widgets.scss

@@ -30,7 +30,7 @@
 .button, button, input[type=submit] {
     align-items: center;
     background-clip: padding-box;
-    background-color: #045343;
+    background-color: $theme_color;
     border: 1px solid transparent;
     border-radius: .25rem;
     box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
@@ -102,11 +102,7 @@
     }
 
     &.btn-darkGreen {
-        background: #045343;
-
-        &:hover {
-            background: #045343;
-        }
+        background: $theme_color;
     }
 
     // class = "unselectable button full small" only appear in online-judge/templates/contest/list.html
@@ -121,18 +117,18 @@
 }
 
 .button:hover, button:hover, input[type=submit]:hover {
-    background-color: #045343;
+    background-color: $theme_color;
     box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
     transform: translateY(-1px);
 }
 
 .button:focus, button:focus, input[type=submit]:focus {
-    background-color: #045343;
+    background-color: $theme_color;
     box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
 }
 
 .button:active, button:active, input[type=submit]:hover {
-    background-color: #045343;
+    background-color: $theme_color;
     box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
     transform: translateY(0);
 }
@@ -229,10 +225,10 @@ input {
 
 // Bootstrap-y tabs
 .ul_tab_a_active {
-    color: #045343;
+    color: $theme_color;
     cursor: default;
     font-weight: bold;
-    border-bottom: 3px solid #045343;
+    border-bottom: 3px solid $theme_color;
     background: transparent;
 }
 
@@ -367,9 +363,9 @@ ul.pagination {
                     font-weight: bold;
                     line-height: 1.42857;
                     text-decoration: none;
-                    color: #045343;
+                    color: $theme_color;
                     background-color: white;
-                    border: 2px solid #045343;
+                    border: 2px solid $theme_color;
                     border-radius: 10px;
                 }
             }
@@ -393,7 +389,7 @@ ul.pagination {
             a {
                 z-index: 2;
                 color: white;
-                background-color: #045343;
+                background-color: $theme_color;
                 border-color: transparent;
                 cursor: default;
             }
@@ -513,7 +509,7 @@ ul.select2-selection__rendered {
     display: flex;
 
     .fa {
-        background: #045343;
+        background: $theme_color;
         color: white;
         padding: 4px;
         margin-right: 8px;

templates/base.html

@@ -252,9 +252,9 @@
               </span>
             {% endif %}
             <span title="{{_('Language')}}">
-              <a class="icofont-globe navbar-icon" id="nav-lang-icon" aria-hidden="true">
+              <div class="icofont-globe navbar-icon" id="nav-lang-icon" aria-hidden="true">
                 <sub class="sub-lang">{{LANGUAGE_CODE}}</sub>
-              </a>
+              </div>
               <div id="lang-dropdown" class="dropdown" role="tooltip">
                 {% for language in language_info_list(LANGUAGES) %}
                   <div value="{{ language.code }}"

templates/chat/chat_css.html

@@ -175,7 +175,7 @@
         overflow:hidden;
       }
       #chat-input-container {
-        padding-left: 10%;
+        padding-left: 5%;
       }
       #chat-area {
         padding-bottom: 1.5em;

templates/chat/chat_js.html

@@ -558,11 +558,5 @@
     }
     register_setting();
     color_selected_room();
-
-    $('#chat-input').on('input', function () {
-      $('#chat-input-container').height('auto');
-      $('#chat-input-container').height((this.scrollHeight) + 'px');
-    });
-    $('#submit-button').on('click', submit_chat);
   });
 </script>