/* ********************** von ad im März 2016 **************************
das ganze als bootstrap-Erweiterung
Bei Bootstrap hat die Navbar-fixed (oben) nen z-index von 1030
Bei Bootstrap hat die sidebar nen z-index von 1000
Verwendung: einbinden von ad-panels.css und ad-panels.js (nach jquery)
im body:
dat wird angezeigt, wenn das Panel aktiv ist
dat wird angezeigt, wenn das Panel inaktiv ist
dat wird angezeigt, wenn das Panel aktiv ist
dat wird angezeigt, wenn das Panel inaktiv ist
....
evetuell:
....
hier ist der eigentliche content .....
wenn hier Bootstrap verwendet wird, hat das div meistens noch die Klasse: container-fluid
**************************************************************************** */
/* keine selektion zwecks swipe */
/* body :not(INPUT):not(TEXTAREA),*/
.ad-panel
{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
.ad-button
{
position:fixed;
/*width:50px;
height:50px;*/
background-color: lightblue;
opacity:0.3;
z-index:1100;
border:1px solid black;
font-family: Arial;
font-size: 18pt;
padding:5px 15px;
border-radius:4px;
}
.ad-button:hover
{
opacity:0.8;
}
.ad-bottom-right
{
right:10px;
bottom:30px;
}
.ad-bottom-left
{
left:10px;
bottom:30px;
}
div.custom{display:none;}
/* der Content, der zwischen den panels liegt - da sollte der margin-left dem panel-left genug platz einräumen */
.ad-content
{
margin-left:300px;
margin-right:0px;
padding:20px;
/* RG: min-width auskommentiert, da es sonst auf Mobilgeräten grottig aussieht */
/*min-width:500px;*/
overflow-x:hidden;
}
/* wenn der ad-content rechts von einem inaktiven content liegt ist der margin-left weniger */
.ad-panel-left.ad-is-inactive ~ .ad-content
{
margin-left:0px;
}
.ad-toggle-right
.ad-toggle-left
{
/* die klassen sind eigentlich nur da, um umschalter zu kennzeichnen */
}
.ad-header
{
background-color:#333;
z-index:1080;
position:fixed;
height:50px;
top:0px; /* anpassen je nach höhe topBar (aus Bootstrap) */
right:0px;
left:0px;
overflow:hide;
}
#ad-debug
{
display:none;
background-color:#333;
color:cyan;
border:1px dashed cyan;
padding:10px;
padding-left:50px;
z-index:1080;
position:fixed;
min-height:50px;
max-height:100px;
bottom:0px; /* anpassen je nach höhe topBar (aus Bootstrap) */
right:0px;
left:0px;
overflow:auto;
}
.ad-panel
{
z-index:1020;
position:fixed;
width:200px;
xbackground-color:red;
xcolor:black;
xborder:1px solid black;
overflow-y:auto;
overflow-x:hidden;
/*animate all props smooth */
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.ad-panel-left
{
width:300px;
top:50px; /* anpassen je nach höhe topBar (aus Bootstrap) */
bottom:0px;
left:0px;
}
.ad-panel-right
{
width:300px;
top:50px; /* anpassen je nach höhe topBar (aus Bootstrap) */
bottom:0px;
right:0px;
xbackground-color: #f8f8f8;
}
.ad-is-active
{
opacity:1;
/* width:50px; normalerweise sollte es keinen Unterschied geben */
}
.ad-is-inactive /* marker-Klasse für inaktiven bereich - wird von js gesetzt */
{
opacity:1;
width:5px;
/* width:50px; normalerweise sollte es keinen Unterschied geben */
}
.ad-is-inactive > .ad-activecontent
{
display:none;
}
.ad-activecontent{
height:100%;
width:100%;
background-color:#333;
color:#eee;
padding:10px;
overflow:auto;
}
.ad-inactivecontent
{
padding-top:20px;
display:none;
height:100%;
overflow:hidden;
}
.ad-quer
{
box-sizing: border-box;
font-size:18px;
font-family:arial;
width:1000px;
height:50px;
line-height: 48px;
border:0px solid black;
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform:rotate(90deg);
transform-origin: 0% 45px;
}
.ad-panel-left .ad-quer{
transform-origin: 0% 45px;
}
.ad-panel-right .ad-quer{
transform-origin: 0% 55px;
}
.ad-quer >*:hover
{
opacity:0.7;
background-color:#224;
}
.ad-quer >*
{
opacity:0.2;
box-sizing: border-box;
border:1px solid #111;
border-radius:5px;
margin-right:10px;
padding: 1px 20px;
background-color:#333; /*#224#02e;*/
color:#7f1;
display:inline-block;
}
.ad-is-inactive > .ad-inactivecontent
{
display:block;
}
@media (max-width: 750px) { /* Breite beträgt höchstens 50em */
.ad-panel.ad-is-inactive
{
width:50px;
}
}
/* dieses div wird verwendet, um den Pagecontent (evtl. sichtbar) zu maskieren,
damit bei einem Click die Panels wieder rausgefahren werden und der overlay gehided wird */
#ad-overlay
{
z-index:777;
background-color:#888;
opacity:0.2;
position:fixed;
left:0px;
right:0px;
top:0px;
bottom:0px;
}