VersaWhiteboard/assets/css/main.css

98 lines
1.7 KiB
CSS
Raw Normal View History

body {
position: relative;
margin: 0px;
height: calc(var(--vh, 1vh) * 100);
width: 100%;
overflow: hidden;
}
#whiteboardContainer {
height: calc(var(--vh, 1vh) * 100);
width: 100%;
}
2018-02-08 20:04:13 +01:00
.btn-group button {
2019-05-07 22:59:20 +02:00
background: transparent;
2019-05-21 11:58:02 +02:00
border: 1px solid #636060;
/* Green border */
color: black;
/* White text */
padding: 11px 14px;
/* Some padding */
cursor: pointer;
/* Pointer/hand icon */
float: left;
/* Float the buttons side by side */
font-size: 1.2em;
height: 45px;
}
button::-moz-focus-inner {
border: 0;
2018-02-08 20:04:13 +01:00
}
.btn-group button:not(:last-child) {
2019-05-21 11:58:02 +02:00
border-right: none;
/* Prevent double borders */
2018-02-08 20:04:13 +01:00
}
/* Clear floats (clearfix hack) */
2019-05-21 11:58:02 +02:00
2018-02-08 20:04:13 +01:00
.btn-group:after {
content: "";
clear: both;
display: table;
}
/* Add a background color on hover */
2019-05-21 11:58:02 +02:00
2018-02-08 20:04:13 +01:00
.btn-group button:hover {
2019-05-07 22:59:20 +02:00
background-color: #9a9a9a;
2018-02-08 22:26:19 +01:00
}
button {
outline-width: 0;
2018-02-08 20:04:13 +01:00
}
.btn-group {
2019-05-07 22:59:20 +02:00
background-color: #808080ab;
2018-02-08 20:04:13 +01:00
margin-left: 5px;
float: left;
position: relative;
}
.whiteboardTool.active {
2018-02-08 22:26:19 +01:00
background: #bfbfbf;
2018-02-08 20:04:13 +01:00
}
#whiteboardThicknessSlider {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 3px;
background: transparent;
outline: none;
opacity: 1;
-webkit-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
2019-01-11 15:58:58 +01:00
}
.textBox.active {
border: 1px dashed gray;
2019-01-14 14:11:21 +01:00
}
2019-05-21 11:58:02 +02:00
.textBox>.removeIcon, .textBox>.moveIcon {
display: none;
2019-01-14 14:11:21 +01:00
}
2019-02-05 13:04:26 +01:00
2019-05-21 11:58:02 +02:00
.textBox.active>.removeIcon, .textBox.active>.moveIcon {
display: block;
2019-07-01 13:15:11 +02:00
}
.modalBtn {
padding: 5px;
border-radius: 5px;
border: 0px;
min-width: 50px;
cursor: pointer;
2018-02-08 20:04:13 +01:00
}