janis/teamspeak-obs-overlay
1
0
Fork 0
mirror of https://github.com/DerTyp7/teamspeak-obs-overlay.git synced 2025-11-01 22:22:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

add responsive design

Browse Source
This commit is contained in:
Janis
2023-11-12 17:16:58 +01:00
parent ce7aee8481
commit 9870fdcdb4
4 changed files with 175 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
src/styles/Generator.scss
View File

@@ -1,6 +1,7 @@
// Breakpoints
$breakpoint-1: 760px;
$breakpoint-2: 565px;
$breakpoint-1: 1200px;
$breakpoint-2: 790px;
$breakpoint-3: 600px;
@keyframes tooltipAnimation {
0% {
@@ -22,7 +23,6 @@ $breakpoint-2: 565px;
flex-direction: column;
align-items: center;
gap: 50px;
box-sizing: border-box;
padding: 50px 0;
.headline {
@@ -48,15 +48,8 @@ $breakpoint-2: 565px;
background-color: #313136;
border-radius: 5px;
text-align: center;
@media screen and (max-width: $breakpoint-1) {
width: 300px;
}
@media screen and (max-width: $breakpoint-2) {
width: 200px;
}
}
.copy {
padding: 5px 10px;
border: 2px solid #31f39973;
@@ -81,6 +74,7 @@ $breakpoint-2: 565px;
font-weight: bold;
}
}
.generatorContent {
display: flex;
flex-direction: row;
@@ -89,15 +83,96 @@ $breakpoint-2: 565px;
padding: 0 50px;
gap: 30px;
width: 100%;
box-sizing: border-box;
.configurations {
display: flex;
flex-direction: column;
align-items: left;
gap: 10px;
align-items: center;
height: 100%;
flex: 1;
gap: 50px;
.options {
display: flex;
flex-direction: row;
align-items: center;
gap: 100px;
user-select: none;
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: left;
gap: 10px;
}
.option {
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
column-gap: 10px;
width: 100%;
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #31f399;
border-radius: 5px;
background-color: #202024;
outline: none;
transition: all 200ms ease-in-out;
position: relative;
color: white;
text-align: center;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
// make it a cross when checked
&:checked {
&:after {
content: "";
position: absolute;
width: 10px;
height: 2px;
background-color: #31f399;
transform: rotate(45deg);
}
&:before {
content: "";
position: absolute;
width: 10px;
height: 2px;
background-color: #31f399;
transform: rotate(-45deg);
}
&:after,
&:before {
top: 7px;
left: 3px;
}
}
cursor: pointer;
}
input[type="number"] {
width: 50px;
cursor: text;
}
label {
cursor: pointer;
}
}
}
}
.preview {
flex: 1;
@@ -109,70 +184,45 @@ $breakpoint-2: 565px;
min-height: 500px;
}
}
}
.option {
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
column-gap: 10px;
@media screen and (max-width: $breakpoint-1) {
.generatorContent {
flex-direction: column;
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #31f399;
border-radius: 5px;
background-color: #202024;
outline: none;
transition: all 200ms ease-in-out;
position: relative;
color: white;
text-align: center;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
// make it a cross when checked
&:checked {
&:after {
content: "";
position: absolute;
width: 10px;
height: 2px;
background-color: #31f399;
transform: rotate(45deg);
}
&:before {
content: "";
position: absolute;
width: 10px;
height: 2px;
background-color: #31f399;
transform: rotate(-45deg);
}
&:after,
&:before {
top: 7px;
left: 3px;
}
}
cursor: pointer;
.preview {
width: 80%;
}
}
}
input[type="number"] {
width: 50px;
cursor: text;
@media screen and (max-width: $breakpoint-2) {
.output {
.url {
width: 300px;
}
}
label {
cursor: pointer;
.generatorContent {
.preview {
width: 100%;
}
}
}
@media screen and (max-width: $breakpoint-3) {
.output {
.url {
width: 200px;
}
}
.generatorContent {
.configurations {
.options {
flex-direction: column;
gap: 30px;
}
}
}
}