User:Haza-w.debug/dynamic-menus.css

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

#firstHeading {
  text-align:center;
}
#p-personal, #mw_portlets .portlet:not(#p-lang) {
  height:auto;
  position:absolute;
  overflow:auto;
  top:2em;
  z-index:1000;
  width:20%; /* ***** $var1 ***** This needs to be customized for each wiki. It is 100% divided on the number of .portlets */
}
/***********************************
The following need to be customized for each wiki.
It contains the IDs of each individual portlet, and their positions. #p-search is placed separately; it should always be to the right.
The first one must have a value the same as $var1, the second one is 2 × $var1, the third one is 3 × $var1 and so on.
***********************************/
#p-navigation {
  left:0%;
}
#p-interaction {
  left:20%;
}
#p-tb {
  left:40%;
}
#p-personal {
  left:60%;
}
/***********************************
End of .portlet ID section.
***********************************/
#p-search {
  right:0;
}
#p-personal h5, #mw_portlets h5 {
  display:block;
  background-color:#3c78b5;
  cursor:default;
  color:white;
  font-size:100%;
  font-variant:small-caps;
  font-weight:bold;
  height:1em;
  text-transform:lowercase;
  text-align:center;
}
.portlet h5 {
  border-bottom:none;
  padding:0 0 0.4em;
}
#p-personal div.pBody, #mw_portlets div.pBody {
  display:none;
  background-color:#eee;
  border-left:1px solid #036;
  border-right:1px solid #036;
  border-bottom:5px solid #036;
  font-variant:normal;
  height:auto;
  margin:0;
  padding:0;
}
#p-personal ul, #mw_portlets .portlet ul, #searchBody {
  background-color:#eee;
  height:auto;
  line-height:1.5em;
  margin:0;
  padding:0;
}
#p-personal li, #mw_portlets li {
  display:block;
  border-bottom:1px solid #ddd;
  float:none;
  font-weight:normal;
  text-transform:none;
  margin:0;
  height:auto;
}
#p-personal li a, #mw_portlets li a {
  color:#036;
  width:100%;
  padding:0 1em;
}
#searchInput {
  width:95%;
}
#mw_contentwrapper, #mw_content {
  margin:0;
}
#p-cactions {
  margin:0;
}
#p-cactions li {
  margin:0;
  padding:0;
}
#p-cactions li a {
  padding:0 1em;
}
/* The following elements are the ones that make the actual dynamics */
#p-personal:hover h5, #mw_portlets .portlet:hover h5 {
  border-top:2px solid #3c78b5;
  background-color:#036;
}
#p-personal li a:hover, #mw_portlets li a:hover {
  text-decoration:underline;
  color:#036;
}
#p-personal li:hover, #mw_portlets li:hover {
  background-color:#ddd;
}
#p-personal:hover div.pBody, #mw_portlets .portlet:hover div.pBody {
  display:block;
}
#p-personal:hover, #mw_portlets .portlet:hover {
  -moz-box-shadow:#aaa 5px 5px 5px -2px;
}
#p-search.portlet:hover {
  -moz-box-shadow:#aaa -2px 5px 5px -2px;
}

/****************************
       #p-lang module
****************************/

#p-lang {
  position:fixed;
  top:6em;
  max-height:80%;
  left:-200px;
  width:200px;
  border-right:10px solid orange;
}
#p-lang div.pBody {
  display:block;
  border-bottom:1px solid #036;
}
#p-lang h5 {
  height:1.1em;
}
#p-lang:hover h5 {
  height:1em;
}
#p-lang:hover {
  position:fixed;
  top:6em;
  left:0;
  border:1px solid #036;
  border-bottom:5px solid #036;
  overflow:auto;
}
#p-lang:hover .pBody, #p-lang.portlet:hover h5 {
  border:0;
}

/* v1.1.4 */