CSS color

vincentberry · Mar 10, 2024 · c373f10 · c373f10
1 parent cd1f8ec
commit c373f10
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 37 deletions.
diff --git a/app/public/assets/style/compoments/_inputContainerContent.scss b/app/public/assets/style/compoments/_inputContainerContent.scss
@@ -365,10 +365,11 @@ label {
             }
         }
 
-        #inputContainer_content_gt_value{
-            .gt_text{
+        #inputContainer_content_gt_value {
+            .gt_text {
                 display: none;
-                &.active{
+
+                &.active {
                     display: block;
                 }
 
@@ -378,44 +379,60 @@ label {
                     padding: 10px;
                 }
 
-                .countdown{
-                    @include center;
-                    justify-content: flex-end;
-                    align-items: stretch;
+                .bottum {
+                    display: grid;
+                    grid-template-columns: 1fr 1fr;
 
-                    h4{
+                    .countdown,
+                    .color {
                         @include center;
-                        margin-right: 10px;
-                        color: $background_item;
-                    }
+                        align-items: stretch;
 
-                    button{
-                        @include center;
-                        color: $background_item;
-                        background: $color-muted;
-                        padding: 5px;
-                        margin: 2px;
-                        &:hover{
-                            background: $primary-btn;
+                        h4 {
+                            @include center;
+                            margin-right: 10px;
+                            color: $background_item;
+                        }
+
+                        button {
+                            @include center;
+                            color: $background_item;
+                            background: $color-muted;
+                            padding: 5px;
+                            margin: 2px;
+
+                            &:hover {
+                                background: $primary-btn;
+                            }
                         }
-                    }
 
-                    .play{
-                        @include icon($icon-play3);
+                        .play {
+                            @include icon($icon-play3);
+                        }
+
+                        .pause {
+                            @include icon($icon-pause2);
+                        }
+
+                        .reset {
+                            @include icon($icon-stop2);
+                        }
+
+                        .input_color{
+                            width: 150px;
+                        }
                     }
 
-                    .pause{
-                        @include icon($icon-pause2);
+                    .countdown{
+                        justify-content: flex-end;
                     }
-
-                    .reset{
-                        @include icon($icon-stop2);
+                    .color {
+                        justify-content: flex-start;
                     }
                 }
             }
 
 
-
         }
 
 

diff --git a/app/public/assets/style/index.css b/app/public/assets/style/index.css
@@ -2100,21 +2100,27 @@ nav div .statut_vmix_contener .statut_vmix .activeContainer div.active {
   width: 100%;
   padding: 10px;
 }
-.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .countdown {
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .countdown,
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .color {
   display: flex;
   justify-content: center;
   align-items: center;
-  justify-content: flex-end;
   align-items: stretch;
 }
-.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .countdown h4 {
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .countdown h4,
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .color h4 {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-right: 10px;
   color: #0a0f14;
 }
-.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .countdown button {
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .countdown button,
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .color button {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -2123,10 +2129,12 @@ nav div .statut_vmix_contener .statut_vmix .activeContainer div.active {
   padding: 5px;
   margin: 2px;
 }
-.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .countdown button:hover {
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .countdown button:hover,
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .color button:hover {
   background: #616161;
 }
-.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .countdown .play::before {
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .countdown .play::before,
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .color .play::before {
   display: inline-block;
   font-family: "Pe-icon-7-stroke";
   speak: none;
@@ -2140,7 +2148,8 @@ nav div .statut_vmix_contener .statut_vmix .activeContainer div.active {
   -moz-osx-font-smoothing: grayscale;
   content: url(/assets/icon/play3.svg);
 }
-.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .countdown .pause::before {
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .countdown .pause::before,
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .color .pause::before {
   display: inline-block;
   font-family: "Pe-icon-7-stroke";
   speak: none;
@@ -2154,7 +2163,8 @@ nav div .statut_vmix_contener .statut_vmix .activeContainer div.active {
   -moz-osx-font-smoothing: grayscale;
   content: url(/assets/icon/pause2.svg);
 }
-.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .countdown .reset::before {
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .countdown .reset::before,
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .color .reset::before {
   display: inline-block;
   font-family: "Pe-icon-7-stroke";
   speak: none;
@@ -2168,6 +2178,16 @@ nav div .statut_vmix_contener .statut_vmix .activeContainer div.active {
   -moz-osx-font-smoothing: grayscale;
   content: url(/assets/icon/stop2.svg);
 }
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .countdown .input_color,
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .color .input_color {
+  width: 150px;
+}
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .countdown {
+  justify-content: flex-end;
+}
+.inputContainer .Container .body .content .GT .GeneralContainer #inputContainer_content_gt_value .gt_text .bottum .color {
+  justify-content: flex-start;
+}
 
 .closeButton {
   cursor: pointer;