92 lines
1.5 KiB
SCSS
92 lines
1.5 KiB
SCSS
@import "mixin";
|
|
|
|
$separator_thickness: 5px;
|
|
$small_device: 650px;
|
|
$animation_length: .5s;
|
|
|
|
html:root {
|
|
--app-background: #1e1e1e;
|
|
|
|
--chat-background: #353535;
|
|
--channel-tree-background: #353535;
|
|
--server-log-background: #353535;
|
|
|
|
--footer-background: #252525;
|
|
--footer-text: #666666;
|
|
|
|
--channel-chat-seperator: #1e1e1e;
|
|
--channel-chat-seperator-selected: #707070;
|
|
}
|
|
|
|
.hide-small {
|
|
opacity: 1;
|
|
transition: opacity $animation_length linear;
|
|
}
|
|
|
|
.show-small {
|
|
display: none;
|
|
|
|
opacity: 0;
|
|
transition: opacity $animation_length linear;
|
|
}
|
|
|
|
.app-container {
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
overflow: auto;
|
|
padding: 0;
|
|
}
|
|
|
|
@media only screen and (max-width: $small_device) {
|
|
.hide-small {
|
|
display: none;
|
|
opacity: 0;
|
|
transition: opacity $animation_length linear;
|
|
}
|
|
|
|
.show-small {
|
|
display: block !important;
|
|
|
|
opacity: 1 !important;
|
|
transition: opacity $animation_length linear;
|
|
}
|
|
}
|
|
|
|
$animation_seperator_length: .1s;
|
|
.container-seperator {
|
|
@include transition(all $animation_seperator_length ease-in-out);
|
|
background: var(--channel-chat-seperator);
|
|
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
|
|
&.horizontal {
|
|
height: $separator_thickness;
|
|
width: 100%;
|
|
|
|
cursor: row-resize;
|
|
}
|
|
|
|
&.vertical {
|
|
width: $separator_thickness;
|
|
height: 100%;
|
|
|
|
cursor: col-resize;
|
|
}
|
|
|
|
&.seperator-selected {
|
|
@include transition(all $animation_seperator_length ease-in-out);
|
|
|
|
background-color: var(--channel-chat-seperator-selected);
|
|
}
|
|
}
|
|
|
|
html, body {
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
background: var(--app-background)!important;
|
|
} |