mirror of
https://github.com/schlagmichdoch/PairDrop.git
synced 2025-04-26 09:46:19 -04:00
- 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:
parent
1f1e029071
commit
a5cc115fa6
4 changed files with 69 additions and 49 deletions
|
@ -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 {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue