Cosmetic : menu and module , animate

This commit is contained in:
sparkyx 2024-09-18 13:54:59 +02:00
parent ae97523767
commit 124e1aa577
2 changed files with 79 additions and 37 deletions

View file

@ -190,6 +190,9 @@ td.tool a.mtitle:hover {
width: 100%; width: 100%;
} }
/***
* Style for module
*/
#module { #module {
/* position:absolute;*/ /* position:absolute;*/
top:0px; top:0px;
@ -210,7 +213,72 @@ td.tool a.mtitle:hover {
background-color: darkgray; background-color: darkgray;
display:block; 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 { div.lmenu {
float:left; float:left;
clear:left; clear:left;
@ -1308,7 +1376,7 @@ div#wait_box
left:30%; left:30%;
top:30%; top:30%;
border:1px solid #00008B; border:1px solid #00008B;
width:18%; width: 260px;
opacity: 0.8; opacity: 0.8;
border-radius: 20px; border-radius: 20px;
min-width:281px; min-width:281px;
@ -1475,7 +1543,7 @@ h2.title {
padding-top: 9px; padding-top: 9px;
margin-top: 0px; margin-top: 0px;
padding-bottom: 2px; padding-bottom: 2px;
background-color: #023575 !important; background-color: #023575;
font-size: 1.1rem; font-size: 1.1rem;
height: 40px; height: 40px;
vertical-align: middle; vertical-align: middle;
@ -3225,7 +3293,7 @@ margin:1px;
border-radius: 0px; border-radius: 0px;
} }
.nav-pills .nav-link { .nav-pills .nav-link {
color:white !important; color:white ;
} }
li.li-active { li.li-active {
@ -3264,32 +3332,7 @@ li.li-active {
.nav-level2 .active { .nav-level2 .active {
border-radius:0px !important; 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 * Module for smartphone menu
*/ */
@ -3507,7 +3550,6 @@ li.li-active {
padding: 0.5rem; padding: 0.5rem;
color:navy !important; color:navy !important;
text-decoration: underline; text-decoration: underline;
border-radius: 7px;
} }
.hoverclass-drag { .hoverclass-drag {
@ -3519,14 +3561,14 @@ li.li-active {
* User's widget list * User's widget list
* *
*********************************************************************************************************************/ *********************************************************************************************************************/
#widget_box_id { #widget_box_id {
width: 100%; #widget_box_id {
margin-left: 0px; width: 100%;
margin-right: 0px; margin-left: 0px;
margin-right: 0px;
}
} }
#contain_widget li { #contain_widget li {
padding : 0.75rem; padding : 0.75rem;
margin:2px; margin:2px;
@ -3674,7 +3716,7 @@ h2.h-section {
right:0; right:0;
position:absolute; position:absolute;
height:var(--border-size); height:var(--border-size);
background-color:orangered; background-color:crimson;
transform:scaleX(0); transform:scaleX(0);
transition:transform 300ms ease-in-out; transition:transform 300ms ease-in-out;
} }

View file

@ -104,7 +104,7 @@ endif;?>
echo '<ul class="nav nav-pills nav-fill flex-row" >'; echo '<ul class="nav nav-pills nav-fill flex-row" >';
continue; continue;
} }
$style="nav-item-module"; $style="nav-item-module nav-item-slide";
if ($row['me_code']==$selected_module) if ($row['me_code']==$selected_module)
{ {
$style='nav-item-active'; $style='nav-item-active';
@ -144,7 +144,7 @@ endif;?>
$js=""; $js="";
$style=""; $style="";
$style="nav-item-module"; $style="nav-item-module ";
if ( $row['me_code']=='new_line') if ( $row['me_code']=='new_line')
{ {
continue; continue;