Final of final

resources/problem.scss

@@ -437,7 +437,7 @@ ul.problem-list {
     margin-right: auto;
 }
 
-@media screen and (min-width: 11000px) {
+@media screen and (min-width: 1100px) {
     .d-flex-problem {
         display: -webkit-box;
         display: -ms-flexbox;

resources/vars.scss

@@ -5,7 +5,6 @@ $background_gray: #ededed;
 $background_light_gray: #fafafa;
 $announcement_red: #ae0000;
 $theme_color:  #9c3706;
-$sucess: #28a745;
 
 $base_font_size: 14px;
 $widget_border_radius: 0.5em;

resources/widgets.scss

@@ -78,10 +78,10 @@
     }
 
     &.btn-green {
-        background: green;
+        background: #28a745;
 
         &:hover {
-            background: #2c974b;
+            background: green;
         }
     }
 
@@ -806,13 +806,6 @@ a {
     transition: .3s all ease;
 }
 
-a:hover, a:focus {
-    text-decoration: none !important;
-    outline: none !important;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
 button {
     -webkit-transition: .3s all ease;
     -o-transition: .3s all ease;
@@ -843,63 +836,46 @@ button:hover, button:focus {
     -webkit-transition: all 0.3s ease;
     -ms-transition: all 0.3s ease;
     transition: all 0.3s ease;
-}
-
-.btn span {
+    span {
         margin-left: -20px;
         -moz-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
         -webkit-transition: all 0.3s ease;
         -ms-transition: all 0.3s ease;
         transition: all 0.3s ease;
-}
-
-.btn:hover, .btn:active, .btn:focus {
-    outline: none !important;
-}
-
-.btn:hover span, .btn:active span, .btn:focus span {
-    margin-left: -10px;
-}
-
-.btn .icon {
+    }
+    .icon {
         position: absolute;
         top: 0;
         right: 0;
         width: 45px;
         bottom: 0;
         background: #fff;
-}
-
-.btn .icon i {
+        i {
             font-size: 20px;
-}
-
-.btn .icon.icon-round {
+        }
+    }
+    .icon.icon-round {
         border-radius: 50%;
-}
-
-.btn.btn-primary {
+    }
+    &.btn-round {
+        border-radius: 40px;
+    }
+    &:hover, &:active, &:focus {
+        outline: none;
+        span {
+            margin-left: -10px;
+        }
+    }
+    &.btn-primary {
         color: #fff;
-    background: $sucess;
-    border-color: $sucess;
-}
-
-.btn.btn-disabled {
+        .icon i {
+            color: #28a745;
+        }
+    }
+    &.btn-disabled {
         color: #fff;
         background: gray;
         border-color: gray;
-}
-
-.btn.btn-primary:hover, .btn.btn-primary:focus {
-    border-color: green;
-    background: green;
-}
-
-.btn.btn-primary .icon i {
-    color: $sucess;
-}
-
-.btn.btn-round {
-    border-radius: 40px;
+    }
 }

templates/problem/problem.html

@@ -143,7 +143,7 @@
 {% block info_float %}
   {% if request.user.is_authenticated and request.in_contest_mode and submission_limit %}
     {% if submissions_left > 0 %}
-      <button onclick="redirectTo('{{ url('problem_submit', problem.code) }}')" class="btn btn-primary btn-block btn-round">
+      <button onclick="redirectTo('{{ url('problem_submit', problem.code) }}')" class="btn-green btn btn-primary btn-block btn-round">
         <span>{{ _('Submit') }}</span>
         <div class="icon icon-round d-flex align-items-center justify-content-center">
           <i class="fa fa-send"></i>
@@ -166,7 +166,7 @@
       <div class="no-submissions-left submissions-left">{{ _('0 submissions left') }}</div>
     {% endif %}
   {% else %}
-    <button onclick="redirectTo('{{ url('problem_submit', problem.code) }}')" class="btn btn-primary btn-block btn-round">
+    <button onclick="redirectTo('{{ url('problem_submit', problem.code) }}')" class="btn-green btn btn-primary btn-block btn-round">
       <span>{{ _('Submit') }}</span>
       <div class="icon icon-round d-flex align-items-center justify-content-center">
         <i class="fa fa-send"></i>