- Fix theme-wrapper size on touch devices

- Make x-instructor shrinkable on small screens
- Evaluate x-Peers overflow when header expand button is clicked
- Refactor padding/margin classnames
This commit is contained in:
schlagmichdoch 2023-12-12 13:39:55 +01:00
parent 1f1e029071
commit a5cc115fa6
4 changed files with 69 additions and 49 deletions

View file

@ -30,24 +30,24 @@ html {
width: 100%;
}
.p1 {
.p-1 {
padding: 5px;
}
.p2 {
.p-2 {
padding: 10px;
}
.pb0 {
.pb-0 {
padding-bottom: 0;
}
.mx1 {
.mx-1 {
margin-left: 5px;
margin-right: 5px;
}
.m1 {
.m-1 {
margin: 5px;
}
@ -75,6 +75,11 @@ html {
flex-grow: 2;
}
.grow-5 {
display: flex;
flex-grow: 5;
}
.shrink {
display: flex;
flex-shrink: 1;
@ -138,6 +143,7 @@ header {
z-index: 20;
top: 0;
right: 0;
min-height: 56px;
}
header.overflow-hidden {
@ -193,19 +199,26 @@ header * {
margin-bottom: 8px;
}
#theme-wrapper:hover .icon-button:not(.selected):hover:before {
opacity: 0.3;
}
#theme-wrapper:hover .icon-button.selected::before {
opacity: 0.3;
}
@media (pointer: coarse) {
#theme-wrapper:hover .icon-button.selected:hover::before {
@media (hover: hover) and (pointer: fine) {
#theme-wrapper:hover .icon-button:not(.selected):hover:before {
opacity: 0.3;
}
#theme-wrapper:hover .icon-button.selected::before {
opacity: 0.3;
}
}
@media (hover: none) and (pointer: coarse) {
#theme-wrapper:before {
opacity: 0.3 !important;
height: 40px !important;
}
#theme-wrapper .icon-button:before {
opacity: 0;
}
#theme-wrapper .icon-button:not(.selected) {
height: 0;
opacity: 0;
@ -830,9 +843,11 @@ x-instructions {
position: relative;
opacity: 0.5;
text-align: center;
margin: 50px 10px 0px;
margin-right: 10px;
margin-left: 10px;
min-height: max(6vh, 40px);
flex-direction: column;
justify-content: center;
justify-content: end;
}
x-instructions:not([drop-peer]):not([drop-bg]):before {