From a5bad300b81c0682daec7ff014618c8d827a53c6 Mon Sep 17 00:00:00 2001
From: Van Duc Le <121172468+yucyle@users.noreply.github.com>
Date: Tue, 5 Sep 2023 19:30:05 -0500
Subject: [PATCH] Edit theme

---
 resources/base.scss                | 64 +++++++++++++++++++++++++++---
 resources/blog.scss                |  9 +++--
 resources/widgets.scss             | 16 ++++++--
 templates/contests-countdown.html  |  4 +-
 templates/problem/search-form.html | 38 +++++++++---------
 templates/recent-organization.html |  2 +-
 templates/submission/list.html     | 12 +++---
 templates/top-users.html           |  4 +-
 8 files changed, 105 insertions(+), 44 deletions(-)

diff --git a/resources/base.scss b/resources/base.scss
index 13f9d6d0..fe5acca6 100644
--- a/resources/base.scss
+++ b/resources/base.scss
@@ -240,7 +240,7 @@ header {
     position: fixed;
     top: 0;
     left: 0;
-    right: 0;
+    right: 10px;
     height: $navbar_height;
 }
 
@@ -296,7 +296,7 @@ nav {
                 }
 
                 &:hover {
-                    border-top: 2px solid #9c3706;
+                    border-top: 2px solid #045343;
                     color: black;
                     background: rgba(255, 255, 255, 0.25);
                     margin: 0;
@@ -304,8 +304,8 @@ nav {
 
                 &.active {
                     // color: #FFF;
-                    border-top: 2px solid #9c3706;
-                    color: #9c3706;
+                    border-top: 2px solid #045343;
+                    color: #045343;
                     background: white;
                 }
 
@@ -713,11 +713,11 @@ math {
 }
 
 #chat-icon {
-    color: lightseagreen;
+    color: #045343;
 }
 
 #chat-icon:hover {
-    color: darkgreen;
+    color: green;
 }
 
 #nav-lang-icon {
@@ -905,4 +905,56 @@ select {
     .view-next-page {
         display: none;
     }
+}
+
+.colored-text {
+    color: #045343;
+}
+
+.bold-text {
+    font-weight: bold;
+}
+
+.non-italics {
+    font-style: normal;
+}
+
+.margin-label{
+    margin-bottom: 2.5px;
+}
+
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: #045343;
+    opacity: 1; /* Firefox */
+    text-align: center;
+}
+
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+    color: #045343;
+    text-align: center;
+}
+
+::-ms-input-placeholder { /* Microsoft Edge */
+    color: #045343;
+    text-align: center;
+}
+
+input::placeholder{
+    color: #045343;
+    text-align: center;
+}
+
+::-webkit-input-placeholder {
+    color: #045343;
+    text-align: center;
+}
+
+:-moz-placeholder { /* Firefox 18- */
+    color: #045343;
+    text-align: center;
+}
+
+::-moz-placeholder {  /* Firefox 19+ */
+    color: #045343;
+    text-align: center;
 }
\ No newline at end of file
diff --git a/resources/blog.scss b/resources/blog.scss
index adf21d4e..60144e06 100644
--- a/resources/blog.scss
+++ b/resources/blog.scss
@@ -33,11 +33,12 @@
 }
 
 .left-sidebar-item.active {
-    color: green;
+    color: white;
     font-weight: bold;
-    background-color: lightgreen;
+    background-color: #045343;
+
     .sidebar-icon {
-        color: green;
+        color: white;
     }
 }
 
@@ -198,7 +199,7 @@
 }
 
 .left-sidebar-item.active:hover {
-    background-color: lightgreen;
+    background-color: #045343;
 }
 
 .sidebar-icon {
diff --git a/resources/widgets.scss b/resources/widgets.scss
index 791e90dc..ffc0e4e8 100644
--- a/resources/widgets.scss
+++ b/resources/widgets.scss
@@ -30,7 +30,7 @@
 .button, button, input[type=submit] {
     align-items: center;
     background-clip: padding-box;
-    background-color: #fa6400;
+    background-color: #045343;
     border: 1px solid transparent;
     border-radius: .25rem;
     box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
@@ -101,6 +101,14 @@
         }
     }
 
+    &.btn-darkGreen {
+        background: #045343;
+
+        &:hover {
+            background: #045343;
+        }
+    }
+
     // class = "unselectable button full small" only appear in online-judge/templates/contest/list.html
     // this attribute center buttons in contest list (including "Join", "Virutal Join", "Spectable")
     &.unselectable.button.full.small {
@@ -113,18 +121,18 @@
 }
 
 .button:hover, button:hover, input[type=submit]:hover {
-    background-color: #fb8332;
+    background-color: #045343;
     box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
     transform: translateY(-1px);
 }
 
 .button:focus, button:focus, input[type=submit]:focus {
-    background-color: #fb8332;
+    background-color: #045343;
     box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
 }
 
 .button:active, button:active, input[type=submit]:hover {
-    background-color: #c85000;
+    background-color: #045343;
     box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
     transform: translateY(0);
 }
diff --git a/templates/contests-countdown.html b/templates/contests-countdown.html
index 36879f4a..a2772d69 100644
--- a/templates/contests-countdown.html
+++ b/templates/contests-countdown.html
@@ -1,6 +1,6 @@
 {% if current_contests %}
   <div class="blog-sidebox sidebox">
-    <h3><i class="fa fa-trophy"></i> {{ _('Ongoing contests') }}</h3>
+    <h3 class="bold-text colored-text"><i class="fa fa-trophy"></i> {{ _('Ongoing contests') }}</h3>
     <div class="sidebox-content">
       {% for contest in current_contests %}
         <div class="contest">
@@ -18,7 +18,7 @@ <h3><i class="fa fa-trophy"></i> {{ _('Ongoing contests') }}</h3>
 
 {% if future_contests %}
   <div class="blog-sidebox sidebox">
-    <h3><i class="fa fa-trophy"></i>{{ _('Upcoming contests') }}</h3>
+    <h3 class="bold-text colored-text"><i class="fa fa-trophy"></i>{{ _('Upcoming contests') }}</h3>
     <div class="sidebox-content">
       {% for contest in future_contests %}
         <div class="contest">
diff --git a/templates/problem/search-form.html b/templates/problem/search-form.html
index 7f7e3963..24b46009 100644
--- a/templates/problem/search-form.html
+++ b/templates/problem/search-form.html
@@ -1,5 +1,5 @@
 <div class="sidebox">
-  <h3><i class="fa fa-search"></i>{{ _('Problem search') }}</h3>
+  <h3 class="colored-text"><i class="fa fa-search"></i>{{ _('Problem search') }}</h3>
   <div class="sidebox-content">
     <form id="filter-form" name="form" action="" method="get">
       <div>
@@ -43,7 +43,7 @@ <h3><i class="fa fa-search"></i>{{ _('Problem search') }}</h3>
       {% endif %}
       {% if organizations %}
         <div class="filter-form-group">
-          <label for="type"><i>{{ _('Group') }}</i></label>
+          <label class="bold-text margin-label" for="type"><i class="non-italics">{{ _('Group') }}</i></label>
           <select id="search-org" name="orgs" multiple>
             {% for org in organizations %}
               <option value="{{ org.id }}"{% if org.id in org_query %} selected{% endif %}>
@@ -54,7 +54,7 @@ <h3><i class="fa fa-search"></i>{{ _('Problem search') }}</h3>
         </div>
       {% endif %}
       <div class="filter-form-group">
-        <label for="type"><i>{{ _('Author') }}</i></label>
+        <label class="bold-text margin-label" for="type"><i class="non-italics">{{ _('Author') }}</i></label>
         <select id="search-author" name="authors" multiple>
           {% for author in all_authors %}
             <option value="{{ author.id }}"{% if author.id in author_query %} selected{% endif %}>
@@ -63,8 +63,20 @@ <h3><i class="fa fa-search"></i>{{ _('Problem search') }}</h3>
           {% endfor %}
         </select>
       </div>
+      {% if show_types %}
+        <div class="filter-form-group">
+          <label class="bold-text margin-label" for="type"><i class="non-italics">{{ _('Problem types') }}</i></label>
+          <select id="types" name="type" multiple>
+            {% for type in problem_types %}
+              <option value="{{ type.id }}"{% if type.id in selected_types %} selected{% endif %}>
+                {{ type.full_name }}
+              </option>
+            {% endfor %}
+          </select>
+        </div>
+      {% endif %}
       <div class="filter-form-group">
-        <label for="category"><i>{{ _('Category') }}</i></label>
+        <label class="bold-text margin-label" for="category"><i class="non-italics">{{ _('Category') }}</i></label>
         <select id="category" name="category">
           {% if category %}
             <option value="" selected="selected">{{ _('All') }}</option>
@@ -78,27 +90,15 @@ <h3><i class="fa fa-search"></i>{{ _('Problem search') }}</h3>
           {% endfor %}
         </select>
       </div>
-      {% if show_types %}
-        <div class="filter-form-group">
-          <label for="type"><i>{{ _('Problem types') }}</i></label>
-          <select id="types" name="type" multiple>
-            {% for type in problem_types %}
-              <option value="{{ type.id }}"{% if type.id in selected_types %} selected{% endif %}>
-                {{ type.full_name }}
-              </option>
-            {% endfor %}
-          </select>
-        </div>
-      {% endif %}
       {% if point_values %}
-        <div class="form-label">{{ _('Point range') }}</div>
+        <div style="margin-top: 5px;" class="bold-text margin-label" class="form-label">{{ _('Point range') }}</div>
         <div id="point-slider"></div>
       {% endif %}
       <input id="point-start" type="hidden" name="point_start" {% if point_start and point_start != point_values.min %}value="{{ point_start }}"{% else %}disabled{% endif %}>
       <input id="point-end" type="hidden" name="point_end" {% if point_end and point_end != point_values.max %}value="{{ point_end }}"{% else %}disabled{% endif %}>
       <div class="form-submit-group">
-        <a id="go" class="button small btn-darkred">{{ _('Go') }}</a>
-        <a id="random" class="button small btn-darkred">{{ _('Random') }}</a>
+        <a id="go" class="button small btn-darkGreen">{{ _('Go') }}</a>
+        <a id="random" class="button small btn-darkGreen">{{ _('Random') }}</a>
       </div>
     </form>
   </div>
diff --git a/templates/recent-organization.html b/templates/recent-organization.html
index 07b5e2f5..54f938f4 100644
--- a/templates/recent-organization.html
+++ b/templates/recent-organization.html
@@ -18,7 +18,7 @@
 
 {% if recent_organizations %}
   <div class="blog-sidebox sidebox">
-    <h3><i class="fa fa-users"></i>{{ _('Recent groups') }}</h3>
+    <h3 class="bold-text colored-text"><i class="fa fa-users"></i>{{ _('Recent groups') }}</h3>
     <div class="toggled sidebox-content">
       {% for organization in recent_organizations %}
         <a href="{{ url('organization_home', organization.organization.pk, organization.organization.slug) }}" class="organization-row" title="{{organization.organization.about}}">
diff --git a/templates/submission/list.html b/templates/submission/list.html
index 41faac08..3fc0d601 100644
--- a/templates/submission/list.html
+++ b/templates/submission/list.html
@@ -331,11 +331,11 @@ <h2>{{content_title}}</h2>
     <div class="right-sidebar">
       <div class="submission">
         <div class="sidebox">
-          <h3><i class="fa fa-search"></i>{{ _('Filter submissions') }}</h3>
+          <h3 class="colored-text"><i class="fa fa-search"></i>{{ _('Filter submissions') }}</h3>
           <div class="sidebox-content">
             <form id="filter-form" name="form" action="" method="get">
               <div class="filter-form-group">
-                <label for="status"><i>{{ _('Status') }}</i></label>
+                <label class="bold-text margin-label" for="status"><i class="non-italics" >{{ _('Status') }}</i></label>
                 <select id="status" name="status" multiple>
                   {% for id, name in all_statuses %}
                     <option {% if id in selected_statuses %}selected{% endif %}
@@ -344,7 +344,7 @@ <h3><i class="fa fa-search"></i>{{ _('Filter submissions') }}</h3>
                 </select>
               </div>
               <div class="filter-form-group">
-                <label for="language"><i>{{ _('Language') }}</i></label>
+                <label class="bold-text margin-label" for="language"><i class="non-italics">{{ _('Language') }}</i></label>
                 <select id="language" name="language" multiple>
                   {% for code, name in all_languages %}
                     <option {% if code in selected_languages %}selected{% endif %}
@@ -352,7 +352,7 @@ <h3><i class="fa fa-search"></i>{{ _('Filter submissions') }}</h3>
                   {% endfor %}
                 </select>
               </div>
-              <div class="form-submit-group">
+              <div class="form-submit-group" >
                 <a id="go" onclick="form.submit()" class="button small">{{ _('Go') }}</a>
               </div>
             </form>
@@ -360,12 +360,12 @@ <h3><i class="fa fa-search"></i>{{ _('Filter submissions') }}</h3>
         </div>
         <div class="sidebox">
           <div id="statistics-table">
-            <h3><i class="fa fa-pie-chart"></i>{{ _('Statistics') }}</h3>
+            <h3 class="colored-text"><i class="fa fa-pie-chart"></i>{{ _('Statistics') }}</h3>
             <div class="sidebox-content">
               <div id="status-graph">
                 <canvas width="230" height="170"></canvas>
               </div>
-              <div class="total">
+              <div class="total colored-text bold-text">
                 {{ _('Total:') }} <span id="total-submission-count"></span>
               </div>
             </div>
diff --git a/templates/top-users.html b/templates/top-users.html
index 68049617..992a330a 100644
--- a/templates/top-users.html
+++ b/templates/top-users.html
@@ -1,6 +1,6 @@
 {% if top_rated %}
   <div class="blog-sidebox sidebox">
-    <h3><i class="fa fa-trophy"></i>{{ _('Top Rating') }}</h3>
+    <h3 class="bold-text colored-text"><i class="fa fa-trophy"></i>{{ _('Top Rating') }}</h3>
     <div class="sidebox-content" style="padding: 0; border: 0">
       <table class="table feed-table">
         <tbody>
@@ -19,7 +19,7 @@ <h3><i class="fa fa-trophy"></i>{{ _('Top Rating') }}</h3>
 
 {% if top_scorer %}
   <div class="blog-sidebox sidebox">
-    <h3><i class="fa fa-trophy"></i>{{ _('Top Score') }}</h3>
+    <h3 class="bold-text colored-text"><i class="fa fa-trophy"></i>{{ _('Top Score') }}</h3>
     <div class="sidebox-content" style="padding: 0; border: 0">
       <table class="table feed-table">
         <tbody>