src/minibar.css
/*!
* MiniBar 0.5.1
* http://mobius.ovh/
*
* Released under the MIT license
*/
.mb-container {
overflow: hidden;
height: 100%;
width: 100%;
}
.mb-container:hover.mb-scroll-x > .mb-track-x, .mb-container:hover.mb-scroll-x > .mb-buttons-x, .mb-container:hover.mb-scroll-x > .mb-buttons-x > .mb-track-x, .mb-visible.mb-scroll-x > .mb-track-x, .mb-visible.mb-scroll-x > .mb-buttons-x, .mb-visible.mb-scroll-x > .mb-buttons-x > .mb-track-x {
opacity: 1;
}
.mb-container:hover.mb-scroll-y > .mb-track-y, .mb-container:hover.mb-scroll-y > .mb-buttons-y, .mb-container:hover.mb-scroll-y > .mb-buttons-y > .mb-track-y, .mb-visible.mb-scroll-y > .mb-track-y, .mb-visible.mb-scroll-y > .mb-buttons-y, .mb-visible.mb-scroll-y > .mb-buttons-y > .mb-track-y {
opacity: 1;
}
.mb-content {
overflow: auto;
height: 100%;
width: auto;
box-sizing: content-box;
}
.mb-track {
position: absolute;
-webkit-transition: opacity 250ms;
transition: opacity 250ms;
border-radius: 5px;
}
.mb-bar {
position: absolute;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 5px;
z-index: 10;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.mb-track-x {
left: 5px;
bottom: 5px;
width: calc(100% - 10px);
height: 10px;
opacity: 0;
}
.mb-track-x .mb-bar {
left: 0;
top: 0;
height: 100%;
min-width: 10px;
}
.mb-track-y {
right: 5px;
top: 5px;
height: calc(100% - 10px);
width: 10px;
opacity: 0;
}
.mb-track-y .mb-bar {
right: 0;
top: 0;
width: 100%;
min-height: 10px;
}
.mb-progress {
overflow: hidden;
}
.mb-progress .mb-bar {
min-height: 0;
}
/* Buttons */
.mb-buttons {
position: absolute;
}
.mb-buttons-x {
height: 16px;
width: 100%;
bottom: 0;
left: 0;
opacity: 0;
}
.mb-buttons-x .mb-decrease {
left: 0;
}
.mb-buttons-x .mb-decrease::before {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.mb-buttons-x .mb-increase {
right: 0;
}
.mb-buttons-x .mb-increase::before {
left: -1px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.mb-buttons-y {
width: 16px;
height: 100%;
right: 0;
top: 0;
opacity: 0;
}
.mb-buttons-y .mb-decrease {
top: 0;
}
.mb-buttons-y .mb-increase {
bottom: 0;
}
.mb-buttons-y .mb-increase::before {
top: 5px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.mb-nav .mb-bar {
border-radius: 0;
background-color: #969696;
}
.mb-nav .mb-bar:hover {
background-color: #a3a3a3;
}
.mb-nav .mb-track {
border-radius: 0;
background-color: #d6d6d6;
}
.mb-nav .mb-track-x {
left: 16px;
height: 16px;
width: calc(100% - 32px);
}
.mb-nav .mb-track-y {
top: 16px;
width: 16px;
height: calc(100% - 32px);
}
.mb-button {
border: none;
width: 16px;
height: 16px;
position: absolute;
padding: 0;
background-color: #969696;
cursor: pointer;
}
.mb-button:hover {
background-color: #a3a3a3;
}
.mb-button::before {
border-style: solid;
border-width: 2px 2px 0 0;
border-color: #fff;
content: "";
display: inline-block;
height: 3px;
width: 3px;
left: 0px;
top: 6px;
position: relative;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
vertical-align: top;
}
.mb-track-x .mb-decrease {
left: 0;
}
.mb-track-x .mb-increase {
right: 0;
}
.mb-track-y .mb-decrease {
top: 0;
}
.mb-track-y .mb-increase {
bottom: 0;
}
.mb-scroll-x .mb-buttons-y {
height: calc(100% - 16px);
}
.mb-scroll-x .mb-buttons-y::before {
position: absolute;
left: 0;
bottom: -16px;
width: 100%;
height: 100%;
content: "";
background-color: #fff;
z-index: 0;
}
.mb-scroll-y .mb-buttons-x {
width: calc(100% - 16px);
}
/* Textarea */
.mb-wrapper {
width: 100%;
height: 100%;
padding: 10px 0 10px 10px;
box-sizing: border-box;
background-color: #2E222D;
}
.mb-textarea .mb-content {
border: none;
width: 100%;
height: 100%;
margin: 0;
}
.mb-textarea .mb-track-x {
display: none;
}