andras/decla-red
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

Improve settings

Browse source
This commit is contained in:
schmelczerandras 2020-10-22 10:53:31 +02:00
parent 2509199abc
commit 81a8834c4d
19 changed files with 439 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

79
frontend/src/styles/main.scss
View file

@ -1,8 +1,11 @@
@import './vars.scss';
@import './button.scss';
@import './form.scss';
@import './mixins.scss';
@import './settings.scss';
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Open+Sans&display=swap');
* {
margin: 0;
box-sizing: border-box;
@ -22,8 +25,11 @@ html {
}
}
h1,
h2 {
img {
user-select: none;
}
h1 {
&,
* {
font-family: 'Comfortaa', sans-serif;
@ -31,6 +37,10 @@ h2 {
font-size: 6rem;
text-align: center;
padding-bottom: $medium-padding;
@media (max-height: $height-breakpoint) {
display: none;
}
}
h2 {
@ -131,30 +141,29 @@ body {
}
}
#open-settings {
position: absolute;
top: 0;
right: 0;
#server-container {
max-height: 30vh;
overflow-y: auto;
animation: spin 32s linear infinite;
@keyframes spin {
100% {
transform: rotate(360deg);
}
&::-webkit-scrollbar-track,
&::-webkit-scrollbar {
background-color: transparent;
width: 2px;
}
&::-webkit-scrollbar-thumb {
background-color: $accent;
border-radius: $border-radius;
}
}
.icon {
box-sizing: content-box;
user-select: none;
cursor: pointer;
padding: $medium-padding;
@include square(48px);
@media (max-width: $breakpoint) {
@include square(32px);
padding: $small-padding;
&.scroll {
box-shadow: inset 0 -8px 8px -8px rgba(0, 0, 0, 0.4),
inset 0 8px 8px -8px rgba(0, 0, 0, 0.4);
&.top {
box-shadow: inset 0 -8px 8px -8px rgba(0, 0, 0, 0.4);
}
&.bottom {
box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, 0.4);
}
}
}
@ -162,17 +171,21 @@ body {
position: absolute;
bottom: 0;
left: 0;
}
#settings {
@include background;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
box-sizing: content-box;
padding: $large-padding;
visibility: hidden;
user-select: none;
cursor: pointer;
padding: $medium-padding;
@include square($large-icon);
@media (max-width: $breakpoint) {
@include square($small-icon);
padding: $small-padding;
}
&:not(:first-child) {
visibility: hidden;
}
}
}