flex-direction: column;
align-items: stretch;
overflow: hidden;
- background-color: #FFF;
.edit-area {
flex: 1;
}
.pointer {
border: 1px solid #CCC;
+ @include lightDark(border-color, #ccc, #000);
display: flex;
align-items: center;
justify-items: center;
padding: $-s $-s;
border-radius: 4px;
- box-shadow: 0 0 12px 1px rgba(212, 209, 209, 0.3);
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
position: absolute;
top: -60px;
- background-color:#FFF;
+ @include lightDark(background-color, #fff, #333);
width: 275px;
z-index: 55;
margin-inline-start: -8px;
content: '';
display: block;
- background-color:#FFF;
transform: rotate(45deg);
transform-origin: 50% 50%;
- border-inline-startom: 1px solid #CCC;
+ border-block-end: 1px solid #CCC;
border-inline-end: 1px solid #CCC;
z-index: 56;
+ @include lightDark(background-color, #fff, #333);
+ @include lightDark(border-color, #ccc, #000);
}
input, button, a {
position: relative;
input {
background-color: #FFF;
border: 1px solid #DDD;
+ @include lightDark(border-color, #ddd, #000);
color: #666;
width: 172px;
z-index: 40;
width: 1.2em;
height: 1.2em;
}
+ .button {
+ @include lightDark(border-color, #ddd, #000);
+ }
}
// Attribute form
.floating-toolbox {
- background-color: #FFF;
border: 1px solid #DDD;
+ @include lightDark(background-color, #fff, #222);
+ @include lightDark(border-color, #DDD, #000);
right: $-xl*2;
width: 48px;
overflow: hidden;
.tabs {
display: block;
border-inline-end: 1px solid #DDD;
+ @include lightDark(border-color, #ddd, #000);
width: 48px;
flex: 0 1 auto;
}
.tabs svg {
- fill: rgba(0, 0, 0, 0.5);
padding: 0;
margin: 0;
}
.tabs > button {
+ @include lightDark(color, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
display: block;
cursor: pointer;
padding: $-s $-m;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
&.open .tabs > button.active {
- fill: #444;
+ @include lightDark(color, #444, #EEE);
background-color: rgba(0, 0, 0, 0.1);
}
div[toolbox-tab-content] {
display: flex;
flex: 1;
flex-direction: column;
- min-height: 0px;
+ min-height: 0;
overflow-y: scroll;
}
h4 {