[Noalyss-commit] [noalyss] 04/26: Cosmetic : menu and module , animate

[dwm]

sparkyx pushed a commit to branch pre-stable
in repository noalyss.

commit d7b13de885c57a2abe4a9664ad5b73b352e7fd46
Author: sparkyx <danydb@noalyss.eu>
AuthorDate: Wed Sep 18 13:54:59 2024 +0200

    Cosmetic : menu and module , animate
---
 html/css/style-classic7.css | 110 ++++++++++++++++++++++++++++++--------------
 include/template/module.php |   4 +-
 2 files changed, 78 insertions(+), 36 deletions(-)

diff --git a/html/css/style-classic7.css b/html/css/style-classic7.css
index 5e9436d34..f983e7418 100644
--- a/html/css/style-classic7.css
+++ b/html/css/style-classic7.css
@@ -190,6 +190,9 @@ td.tool a.mtitle:hover {
     width: 100%;
 }
 
+/***
+ * Style for module
+ */
 #module {
 /*    position:absolute;*/
     top:0px;
@@ -210,7 +213,72 @@ td.tool a.mtitle:hover {
     background-color: darkgray;
     display:block;
 }
+#module .nav-pills #module.nav-link {
+     color: navy !important;
+ }
+ #module .nav-pills a.nav-link {
+     border:1px solid blue;
+     margin:1px;
+     border-radius: 0px;
+     font-size: 75%;
+     color:navy !important;
 
+ }
+ #module .nav-pills a.nav-link:hover {
+         color:white !important;
+ }
+ #module .nav-item-active , #module .nav-item-active > a.nav-link{
+     background-color: #5d90cd ;
+     color:white !important;
+     border: 0px solid black;
+ }
+ /* animate module : sliding */
+ #module .nav-item-module {
+     position:relative;
+     background-color: white;
+     color:navy;
+ }
+ #module .nav-item-module.nav-item-slide::before {
+     content:'';
+     top:0;
+     left:0;
+     bottom:0;
+     right:0;
+     position:absolute;
+     background-color:#5d90cd;
+     z-index:-1;
+     transform:scaleX(0);
+     /*     transform-origin:left; */
+     transition:transform 300ms ease-in-out;
+ }
+ #module  .nav-item-module.nav-item-slide:hover::before,
+ #module  .nav-item-module.nav-item-slide:focus::before {
+     transform:scaleX(1);
+ }
+ #module .nav-item-slide {
+     z-index:0;
+     transition:color 300ms ease-in-out;
+ }
+
+
+
+
+ #module .nav-fill  #module .nav-item {
+     background: white !important;
+     color: blue !important;
+ }
+
+ #module .nav-link:hover {
+     /*background-color:white;*/
+     color:white;
+ }
+ #module  .nav-link:hover {
+     background-color: transparent;
+     color:white;
+ }
+/**
+    menu left (not used)
+ */
 div.lmenu {
     float:left;
     clear:left;
@@ -1308,7 +1376,7 @@ div#wait_box
     left:30%;
     top:30%;
     border:1px solid #00008B;
-    width:18%;
+    width: 260px;
     opacity: 0.8;
     border-radius: 20px;
     min-width:281px;
@@ -3225,7 +3293,7 @@ margin:1px;
      border-radius: 0px;
 } 
 .nav-pills .nav-link {
-    color:white !important;
+    color:white ;
    
 }
 li.li-active {
@@ -3264,32 +3332,7 @@ li.li-active {
 .nav-level2 .active {
     border-radius:0px !important;
 }
-/**
- * Module 
- */
-.nav-item-module {
-}
-
-#module .nav-pills a.nav-link {
-    background-color:white !important;
-    color:navy !important;
-    border:1px solid blue;
-    margin:1px;
-    border-radius: 0px;
-    font-size: 75%;
-}
-#module .nav-pills a.nav-link:hover {
-    background-color: navy !important;
-    color:white !important;
-    border-radius: 0px;
-    transition: all 300ms ease-in-out;
 
-}
-#module .nav-item-active , #module .nav-item-active > a.nav-link{
-    background-color: #5d90cd !important;
-    color:white !important;
-    border: 0px solid black;
-}
 /**
  * Module for smartphone menu
  */
@@ -3507,7 +3550,6 @@ li.li-active {
      padding: 0.5rem;
      color:navy !important;
      text-decoration: underline;
-     border-radius: 7px;
  }
 
  .hoverclass-drag {
@@ -3519,14 +3561,14 @@ li.li-active {
   * User's widget list
   *
   
*********************************************************************************************************************/
-
  #widget_box_id {
-     width: 100%;
-     margin-left: 0px;
-     margin-right: 0px;
+     #widget_box_id {
+         width: 100%;
+         margin-left: 0px;
+         margin-right: 0px;
+     }
  }
 
-
  #contain_widget  li {
      padding : 0.75rem;
      margin:2px;
@@ -3674,7 +3716,7 @@ h2.h-section {
     right:0;
     position:absolute;
     height:var(--border-size);
-    background-color:orangered;
+    background-color:crimson;
     transform:scaleX(0);
     transition:transform 300ms ease-in-out;
 }
diff --git a/include/template/module.php b/include/template/module.php
index ef825db22..6095c1778 100644
--- a/include/template/module.php
+++ b/include/template/module.php
@@ -104,7 +104,7 @@ endif;?>
                        echo '<ul class="nav nav-pills nav-fill  flex-row" >';
                        continue;
                    }
-                    $style="nav-item-module";
+                    $style="nav-item-module nav-item-slide";
                    if ($row['me_code']==$selected_module)
                    {
                        $style='nav-item-active';
@@ -144,7 +144,7 @@ endif;?>
                             $js="";
                         $style="";
 
-                        $style="nav-item-module";
+                        $style="nav-item-module ";
                         if ( $row['me_code']=='new_line')
                         {
                                                continue;