добавляю css стили страницы с меню приложений Magic 2.0

2026-03-21 20:03:39 +03:00
parent 2097d3487c
commit 52920040a1
1 changed files with 187 additions and 9 deletions
@@ -1,11 +1,189 @@
-@import 'tailwindcss';
+/* ГАВРИЛОВ. ВЫЯСНИТЬ, ГДЕ ИСПОЛЬЗУЮТСЯ */

-@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
-@source '../../storage/framework/views/*.php';
-@source '../**/*.blade.php';
-@source '../**/*.js';
-
-@theme {
-    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-        'Segoe UI Symbol', 'Noto Color Emoji';
+html {
+  overflow-y: scroll;
+}
+
+#root{
+  --color_ruby: #ff0078;
+}
+
+.container {
+  background-color: lightblue;
+  padding: 20px;
+}
+
+#menu-container{
+  display: flex;
+
+  &>#menu__left-block{
+    flex-basis: 15%;
+
+    &>.menu__left-block__call-app{
+      display: flex;
+
+      &>.fa{
+        flex-basis: 20%;
+      }
+    }
+  }
+}
+
+.switcher-container{
+  position: fixed;
+  top: 0;
+  right: 0;
+  display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  
+  &>.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+    margin: 9px;
+  
+    &>.switcher__favorite-app { 
+      opacity: 0;
+      width: 0;
+      height: 0;
+
+      &.showFav + .slider{
+        background-color: var(--color_ruby);
+
+        &:before{
+          transform: translateX(26px);
+          color: var(--color_ruby);
+          padding: 2px 0 0 0;
+          align-content: baseline;
+        }
+      }
+    }
+
+    &>.slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      -webkit-transition: .4s;
+      transition: .4s cubic-bezier(0,1,0.5,1);
+      border-radius: 4px;
+    
+      @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
+      &:before {
+        position: absolute;
+        content: "\f006";
+        font-family: FontAwesome;
+        text-align: center;
+        font-size: 1.2rem;
+        height: 26px;
+        width: 26px;
+        left: 4px;
+        bottom: 4px;
+        background-color: white;
+        -webkit-transition: .4s;
+        transition: .4s cubic-bezier(0,1,0.5,1);
+        border-radius: 3px;
+      }
+
+      &.round {
+        border-radius: 34px;
+      
+        &:before {
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+}
+
+
+
+
+.switcher__favorite-app.showFav + .slider {
+  background-color: var(--color_ruby);
+}
+.switcher__favorite-app.showFav + .slider:before {
+  transform: translateX(26px);
+}
+/* Rounded sliders */
+/* .slider.round {
+  border-radius: 34px;
+
+  &:before {
+    border-radius: 50%;
+  }
+} */
+
+#round {
+  border-radius: 34px;
+
+  &:before {
+    border-radius: 50%;
+  }  
+}
+
+#menu__app-container__app-block{
+  /* display: grid;
+    grid-template-columns: 50% 50%; */
+  column-count: 2;
+
+  >.apps-block__proc{
+    margin-bottom: 20px;
+
+    >.proc__title{
+      font-size: 1.1rem;
+      padding: 10px 0;
+      font-weight: 600;
+    }
+
+    >.proc__title.proc-hide{
+      display: none;
+    }
+  }
+
+  .script-list__el{
+    display: flex;
+
+    >.script-list__el__script-name{
+      margin-bottom: 5px;
+      transition: 0.2s;
+      &:hover{
+        transform: translateY(-1px);
+      }
+
+      >a{
+        text-decoration: none;
+        color: black;
+        
+        &:hover{
+          color: var(--color_ruby);
+        }
+      }
+    }
+
+    >.fa-star{
+      margin-left: 5px;
+      cursor: pointer;
+      opacity: 0.2;
+      transition: 0.3s;
+    }
+
+    >.fa-star:hover{
+      opacity: 1;
+    }
+
+    >.fa-star.favorite{
+      opacity: 1;
+      color: var(--color_ruby);
+    }
+  }
+
+  .script-list__el.script-hide{
+    display: none;
+  }
 }