Fix mobile css

resources/base.scss

@@ -390,12 +390,6 @@ hr {
     }
 }
 
-#content.wrapper {
-    background: white;
-    padding: 2em;
-    border-radius: 1em;
-}
-
 footer {
     text-align: center;
     height: 40px;
@@ -564,7 +558,6 @@ noscript #noscript {
     margin: 0 auto;
     border-right: 1px solid $border_gray;
     border-left: 1px solid $border_gray;
-    background: #f1f2f2;
 }
 
 // border-bottom: 1px solid rgb(204, 204, 204)
@@ -601,7 +594,7 @@ math {
     }
 }
 
-@media (max-width: 760px) {
+@media (max-width: 799px) {
     #navigation {
         height: 36px;
     }
@@ -872,10 +865,15 @@ select {
     .navbar-icons {
         margin-top: 6px;
     }
+    #page-container {
+        background: #f1f2f2;
     }
-
-@media (min-width: 800px) {
     #event-tab {
         display: none;
     }
+    #content.wrapper {
+        background: white;
+        padding: 2em;
+        border-radius: 1em;
+    }
 }

resources/comments.scss

@@ -278,3 +278,9 @@ a {
         color: rgb(180, 180, 7);
     }
 }
+
+@media (max-width: 799px) {
+    .hide_texts_on_mobile .actionbar-text {
+        display: none;
+    }
+}

resources/darkmode.css

@@ -1622,10 +1622,6 @@ hr {
 #content .title {
     color: rgb(199, 194, 187);
 }
-#content.wrapper {
-    background-image: initial;
-    background-color: rgb(24, 26, 27);
-}
 footer {
     border-top-color: rgb(62, 68, 70);
     background-image: initial;
@@ -1690,8 +1686,6 @@ noscript #noscript {
 #page-container {
     border-right-color: rgb(62, 68, 70);
     border-left-color: rgb(62, 68, 70);
-    background-image: initial;
-    background-color: rgb(32, 34, 36);
 }
 .MathJax:focus {
     outline-color: initial;
@@ -1702,7 +1696,7 @@ noscript #noscript {
         border-right-color: initial;
     }
 }
-@media (max-width: 760px) {
+@media (max-width: 799px) {
     #navicon {
         color: rgb(129, 175, 255);
     }
@@ -1799,6 +1793,16 @@ noscript #noscript {
 .background-footer {
     color: rgb(152, 143, 129);
 }
+@media (min-width: 800px) {
+    #page-container {
+        background-image: initial;
+        background-color: rgb(32, 34, 36);
+    }
+    #content.wrapper {
+        background-image: initial;
+        background-color: rgb(24, 26, 27);
+    }
+}
 .table {
     background-image: initial;
     background-color: rgba(0, 0, 0, 0.01);
@@ -3813,9 +3817,6 @@ mjx-merror {
 mjx-assistive-mml {
     border-color: initial !important;
 }
-.recently-attempted ul {
-    list-style-image: initial;
-}
 
 /* Override Style */
 .vimvixen-hint {

templates/actionbar/list.html

@@ -1,9 +1,11 @@
 {% set logged_in = request.user.is_authenticated %}
 {% set profile = request.profile if logged_in else None %}
+{% set hide_texts_on_mobile = (not hide_actionbar_comment) or actionbar_report_url %}
 {% if logged_in %}
   {% if include_hr %}
-    <hr>{% endif %}
-  <div class="page-vote actionbar">
+    <hr>
+  {% endif %}
+  <div class="page-vote actionbar {{'hide_texts_on_mobile' if hide_texts_on_mobile}} ">
     <span class="actionbar-block" style="justify-content: flex-start;">
       <span id="like-button-{{pagevote.id}}"
         class="like-button actionbar-button {% if pagevote.vote_score(request.profile) == 1 %}voted{% endif %}"
@@ -22,8 +24,14 @@
       <span class="actionbar-block">
         <span class="actionbar-button actionbar-comment">
           <i class="fa fa-comment-o" style="font-size: large;"></i>
-          <span class="actionbar-text">{{_("Comment")}} {% if comment_list.count() %} ({{comment_list.count()}}) {% endif
-            %}</span>
+          <span class="actionbar-text">
+            {{_("Comment")}}
+          </span>
+          {% if comment_list.count() %}
+            <span>
+              ({{comment_list.count()}})
+            </span>
+          {% endif %}
         </span>
       </span>
     {% endif %}