Responsive my account

[github/Chocobozzz/PeerTube.git] / client / src / app / menu / menu.component.scss

diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 63d63d2874f18fadb25dad91b46e6d02c7950e54..97ceadde3200d2ec967cc647a7e0b933e5c0a19a 100644 (file)
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -9,10 +9,6 @@ menu {
   z-index: 1000;
   color: $menu-color;
 
-  @media screen and (max-width: 550px) {
-    font-size: 90%;
-  }
-
   .logged-in-block {
     height: 100px;
     background-color: rgba(255, 255, 255, 0.15);
@@ -68,7 +64,7 @@ menu {
       font-size: 15px;
       height: $button-height;
       line-height: $button-height;
-      width: 190px;
+      width: 100%;
       border-radius: 3px;
       text-align: center;
       color: $menu-color;
@@ -139,3 +135,59 @@ menu {
     }
   }
 }
+
+@media screen and (max-width: 800px) {
+  menu {
+    .logged-in-block {
+      padding-left: 10px;
+
+      img {
+        display: none;
+      }
+
+      .logged-in-info {
+        .logged-in-username {
+          font-size: 14px;
+        }
+
+        .logged-in-email {
+          font-size: 11px;
+          max-width: 120px;
+        }
+      }
+
+      .logged-in-more {
+        margin-right: 5px;
+
+        .login-button, .create-account-button {
+          font-weight: $font-semibold;
+          font-size: 15px;
+          height: $button-height;
+          line-height: $button-height;
+          width: 190px;
+        }
+      }
+    }
+
+    .button-block {
+      margin: 20px 10px 25px 10px;
+
+      .login-button, .create-account-button {
+        font-size: 13px;
+      }
+    }
+
+    .panel-block {
+      margin-bottom: 30px;
+      margin-left: 10px;
+
+      a {
+        font-size: 14px;
+
+        .icon {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}