sadira/www/css/menu.css

Web framework

ul{
  padding:0px;
  margin: 0px;
}

.actions > ul {
    float: right;
}


/*********************/
/* header menu style */
/*********************/

ul.menu{
    list-style-type: none;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    z-index: inherit;
}

ul.menu>li{
  display: inline-block;
  padding-left: .5em; 
  padding-right: .5em; 
  margin-right: .5em;
  background: transparent; 
  cursor: pointer;
                                
  text-shadow: 1px 1px 5px rgba(5, 70, 9, 1.0);
  color: white;  
}

/* positioning and display of items and subitems: */
/* items arranged horizontally with pop-up vertical subitems  */

ul.menu > li { display:inline-block; position:relative;  } /* items */
ul.menu ul, .actions > ul ul { display:none; position:absolute;  } /* subitems */
ul.menu > li li, .actions > ul > li li { display:block; } /* subitems */

/*  ul.menu li:hover > ul { display:block; } /\* subitems hover *\/ */

ul.menu li.hovering > ul, .actions > ul li.hovering > ul  { display:inline-block; } /* subitems hover */

/* style of items */

.menu { 
  margin: 0px;
  padding: 0px;
  font-size: 1.5em;
  display: inline-block;
  vertical-align: middle;
  max-width: calc(100% - 10px);
}


ul.menu > li{

  text-align:left;
  /* border-top: 1px solid #079907; */
  
  border-bottom: 1px solid springgreen;
  border-left:0px;
  border-right:0px;
  box-shadow: .1em .1em .5em rgba(200, 250, 200, .9);
  
  background: transparent; /*rgba(140,240,140,.7);*/
  
  display: inline-block;
  transition: background 0.3s;
  
  padding-left:.5em;
  padding-right:.5em;
  padding-top:.5em;
  padding-bottom:.5em;
  
  font-weight: bold;
  z-index: inherit;
  vertical-align: bottom;
}

ul.menu > ul > li:first-child{
  border-top:0px;
}

ul.menu.vertical > li {
     display: block;
}


ul.menu > li.alone{
  /* border-top: 2px solid #070799; */
  border-bottom: 1px solid #aaffaa;
  /* color: #5555AB; */
}

ul.menu > li.forbidden{
  /* border-top: 2px solid #990707; */
  border-bottom: 1px solid #aaffaa;
  /* color: #ffbbbb; */
}
 
 
ul.menu  li.hovering, .actions > ul li.hovering {
  background: rgba(110,20,110,.5);
  transition: all 0.4s;
  text-shadow: 1px 1px 5px rgba(5, 70, 9, 1.0);
  color: white;
  text-weight: bold;
}
 
ul.menu > li.alone.hovering{
  background: rgba(110,200,110,.8);
  transition: background 0.4s;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(20, 40, 20, .9);
}

ul.menu > li.forbidden.hovering{
  color: #ffbbbb;
  text-shadow: 0 1px 1px rgba(200, 250, 200, .4);
  
  /* -webkit-animation: blink .75s linear infinite; */
  /* -moz-animation: blink .75s linear infinite; */
     /* -ms-animation: blink .75s linear infinite; */
     /* -o-animation: blink .75s linear infinite; */
  /* animation: blink .75s linear infinite; */
  cursor : wait; 
}


 
/* rounded corners for first and last child */

ul.menu > li:first-child  {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 2px;
  border-left: 1px solid springgreen;
  margin-left: .5em;
 }
 
ul.menu > li:last-child  {
  border-bottom-right-radius: 8px;
  border-top-right-radius: 2px;
  border-right: 1px solid springgreen;
}

 

 /* style of subitems */
 
ul.menu ul { 
  width:180px;
  
  margin-top:1.8em;
  margin-left:-.8em;
  border:0px;
  border-bottom-left-radius: 0.8em;
  border-bottom-right-radius: 0.8em;
  
  /* border: 1px solid #07aa07; */
  background: rgba(80,5,90,.5);
/*  box-shadow:0em 0em .4em rgba(200,240,200,0.9); */
  z-index: inherit;
}

ul.menu ul>li:first-child  {

/*  color: orange;  background : -webkit-linear-gradient(rgba(40,40,40,.3), rgba(100,10,100,.4)); */
  background : -webkit-linear-gradient(rgba(10,10,10,.2), rgba(80,5,90,0.5) );
  border-top: 0px;
}
ul.menu ul>li:first-child:hover  {
  background : -webkit-linear-gradient(rgba(10,10,10,.2), rgba(110,20,110,1.0) );
}

ul.menu ul>li:last-child  {
  border-radius: 0em 0em 0.8em .8em;
}

ul.menu.vertical ul { 
  margin-left:130px;
  margin-top:-25px;
}
ul.menu.vertical ul ul { 
  margin-left:1px;
  margin-top:-25px;
}

ul.menu > li li{
  padding-top: .3em;
  padding-bottom: .3em;
  padding-left: 1em;
  text-align:left;
  line-height:2em; 
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 1.0);
  border-top: 1px solid rgba(200,255,200,.4);
}
ul.menu > li li:first-child{
  border-top: 0px;
}

/* style of level 3+ subitems */

ul.menu ul ul ul{
     left:180px;
     margin-top:-2em; /* same as line-height */
     border-left: 0px;
     margin-left:1px;
     z-index: inherit;
 }
 
 /* links */
 
ul.menu a{
  display:block; /* all  clickable */
  padding-left:5px;
  padding-right:5px;
  z-index: inherit;
 }

/* arrows if there are submenus 

ul.menu> li li > a:after { 
  content: '▸';
  margin-left:15px;
}

ul.menu> li li > a:after { 
  content: '▾'; 
  
}

ul.menu> li > a:only-child:after {
  content: ''; /* only who have childs */
}

*/

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "fontello"; /* defined in sadira.css */
}

.icon-cancel:before { 
    padding:4px;
    content: '\e809';  

} 
.icon-popup:before { 
    padding:4px;
    content: '\e807';  
} 


ul.tab_buttons{
    display : inline-block;
    vertical-align:middle;
    white-space: nowrap;
}

.tab_buttons > li{
    display: inline-block;
}

.tab_buttons > li > button {
    background:transparent;
}
.tab_buttons > li > button:hover {
    color: orange; /*rgb(153,51,69);*/
    transition: color 0.5s;
    cursor: pointer;
}


.top_buttons{
    display : inline-block;
    vertical-align:middle;
    list-style-type: none;
    color: white;
    float: right;
} 

.top_buttons > li{
    display: inline-block;
}

.top_buttons > li > button {
    background:transparent;
    padding: .2em;
}
.top_buttons > li > button:hover {
    color: orange; /*rgb(153,51,69);*/
    transition: color 0.5s;
    cursor: pointer;
}

.list_buttons{
    line-height:2em;
    margin-left: .1em;
    list-style-type: none;
    vertical-align:middle;
} 

.list_buttons > li{
    display: inline-block;
}
.list_buttons > li > button {
    padding-right:3px;
    padding-left:3px;

}
.list_buttons > li > button:hover {
    color: orange; /*rgb(153,51,69);*/
    transition: color 0.5s;
    cursor: pointer;
}