128 lines
2.5 KiB
CSS
128 lines
2.5 KiB
CSS
@charset "UTF-8";
|
|
|
|
/*Hide all mobile elements when in desktop usage*/
|
|
.trigger, .toptrigger, .triggerLabel, toptriggerlabel {
|
|
display: none;
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
.triggerLabel {
|
|
display: initial;
|
|
border-radius: 10px 0px 0px 10px;
|
|
background: white;
|
|
width: 20px;
|
|
height: 50px;
|
|
position: absolute;
|
|
top: 50px;
|
|
right: 0;
|
|
z-index: 1;
|
|
transition: right 1s;
|
|
}
|
|
.triggerLabel:before {
|
|
content: "‖";
|
|
font-size: 32px;
|
|
padding-left: 3px;
|
|
position: absolute;
|
|
padding-top: 5px;
|
|
}
|
|
.toptriggerlabel {
|
|
z-index: 1;
|
|
top: 5px;
|
|
right: 5px;
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
}
|
|
.toptriggerlabel:before {
|
|
content: "☰";
|
|
font-size: 16px;
|
|
padding-left: 2px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/*Trick to hide the menu when the user taps out of the menu*/
|
|
.toptrigger:checked {
|
|
display: block;
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
position: absolute;
|
|
}
|
|
.trigger:checked+.triggerLabel {
|
|
right: 128px;
|
|
}
|
|
|
|
/* selects the top panel */
|
|
.gwt-MenuBar-horizontal>table {
|
|
display: none;
|
|
}
|
|
|
|
/* shows the top menu when the user taps the menu icon */
|
|
.toptrigger:checked+label+div>div>table {
|
|
display: block !important;
|
|
}
|
|
|
|
/* selects the side panel */
|
|
.trigger+.triggerLabel+div {
|
|
width: 0 !important;
|
|
background: white;
|
|
z-index: 1;
|
|
transition: width 1s;
|
|
}
|
|
.trigger:checked+.triggerLabel+div {
|
|
width: 128px !important;
|
|
}
|
|
|
|
/* selects the top menu */
|
|
.gwt-MenuBar-horizontal>table {
|
|
height: auto;
|
|
position: fixed;
|
|
width: 100%;
|
|
text-align: center;
|
|
top: 30px;
|
|
background: white;
|
|
z-index: 2;
|
|
}
|
|
.gwt-MenuBar-horizontal * {
|
|
display: block;
|
|
}
|
|
.gwt-MenuBarPopup {
|
|
z-index: 2;
|
|
width: 100%;
|
|
left: 0 !important;
|
|
}
|
|
.gwt-MenuBarPopup>div {
|
|
overflow: scroll;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 300px;
|
|
position: fixed;
|
|
top: 30px;
|
|
/* trick to prevent sub menus from opening in the same touch */
|
|
transition:all 0.1s;
|
|
}
|
|
.gwt-MenuBarPopup>div>table {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.menuPopupMiddleCenterInner>div>table {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
.menuPopupTopLeft, .menuPopupTopCenter, .menuPopupTopRight,
|
|
.menuPopupMiddleLeft, .menuPopupMiddleRight, .menuPopupMiddleCenter,
|
|
.menuPopupBottomLeft, .menuPopupBottomCenter, .menuPopupBottomRight {
|
|
background: white !important;
|
|
}
|
|
|
|
/* selects the div containing the canvas */
|
|
.trigger+.triggerLabel+div+div {
|
|
width: 100% !important;
|
|
}
|
|
/* added extra div for toolbar */
|
|
.trigger+.triggerLabel+div+div+div {
|
|
width: 100% !important;
|
|
}
|
|
}
|