X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fcore%2Fhotkeys%2Fhotkeys.component.scss;h=da23b1f482d67b0ae159421fa2cc460ea4c15d84;hb=393f9d396cdbe39e50856859a44f3996a2bc76f9;hp=3aa0b625266e4531260bf06b513ae938051f29e7;hpb=97567dd81f508dd6295ac4d73d849aa2ce0a6549;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/core/hotkeys/hotkeys.component.scss b/client/src/app/core/hotkeys/hotkeys.component.scss
index 3aa0b6252..da23b1f48 100644
--- a/client/src/app/core/hotkeys/hotkeys.component.scss
+++ b/client/src/app/core/hotkeys/hotkeys.component.scss
@@ -1,3 +1,6 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
 .cfp-hotkeys-container {
   display: flex !important;
   align-items: center;
@@ -7,23 +10,20 @@
   height: 100%;
   top: 0;
   left: 0;
-  color: #333;
+  color: pvar(--mainForegroundColor);
   font-size: 1em;
-  background-color: rgba(255,255,255,0.9);
+  background-color: pvar(--mainBackgroundColor);
 }
 
 .cfp-hotkeys-container.fade {
   z-index: -1024;
   visibility: hidden;
   opacity: 0;
-  -webkit-transition: opacity 0.15s linear;
-  -moz-transition: opacity 0.15s linear;
-  -o-transition: opacity 0.15s linear;
   transition: opacity 0.15s linear;
 }
 
 .cfp-hotkeys-container.fade.in {
-  z-index: 10002;
+  z-index: z(hotkeys);
   visibility: visible;
   opacity: 1;
 }
@@ -41,7 +41,7 @@
 
 .cfp-hotkeys table {
   margin: auto;
-  color: #333;
+  color: pvar(--mainForegroundColor);
 }
 
 .cfp-content {
@@ -51,24 +51,25 @@
 
 .cfp-hotkeys-keys {
   padding: 5px;
-  text-align: right;
+  text-align: end;
 }
 
 .cfp-hotkeys-key {
+  @include margin-right(5px);
+
   display: inline-block;
-  color: #fff;
-  background-color: #333;
-  border: 1px solid #333;
+  color: pvar(--mainBackgroundColor);
+  background-color: pvar(--mainForegroundColor);
+  border: 1px solid pvar(--mainForegroundColor);
   border-radius: 5px;
   text-align: center;
-  margin-right: 5px;
   box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb;
   padding: 5px 9px;
   font-size: 1em;
 }
 
 .cfp-hotkeys-text {
-  padding-left: 10px;
+  @include padding-left(10px);
   font-size: 1em;
 }
 
@@ -91,7 +92,7 @@
   cursor: pointer;
 }
 
-@media all and (max-width: 500px) {
+@media all and (max-width: $mobile-view) {
   .cfp-hotkeys {
     font-size: 0.8em;
   }