holm/the-glorious-startpage
1
0
Fork 0
forked from extern/the-glorious-startpage
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adjust duck responsiveness

Browse Source
This commit is contained in:
Gerome Matilla 2020-06-11 15:03:48 +08:00
parent 316cd14586
commit a97bb6eb96
1 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
css/dock.css
View File

@ -30,8 +30,8 @@
z-index: 1 !important; z-index: 1 !important;
} }
/*Translate dock to left side if width <= 580 and height >= 540*/ /*Translate dock to left side if width <= 470 and height >= 540*/
@media screen and (max-width: 580px) and (min-height: 540px) { @media screen and (max-width: 470px) and (min-height: 540px) {
.dockContainer { .dockContainer {
display: inline-block !important; display: inline-block !important;
@ -54,15 +54,13 @@
width: auto !important; width: auto !important;
height: auto !important; height: auto !important;
margin: 5px !important; margin: 5px !important;
transform: scale(0.85) !important; transform: scale(0.90) !important;
transition: transform var(--transition-speed) !important; transition: transform var(--transition-speed) !important;
} }
} }
/*If there's no enough height, move dock to bottom then scale up to 320px*/
/*Decrease scale to 0.85 if width is less than 580px*/ /*Decrease scale to 0.85 if width is less than 580px*/
@media screen and (max-width: 579px) and (max-height: 539px) { @media screen and (max-width: 469px) and (max-height: 539px) {
.dockContainer { .dockContainer {
position: absolute !important; position: absolute !important;
@ -91,8 +89,9 @@
} }
/*Decrease scale to 0.65 if width is less than 490px*/
@media screen and (max-width: 490px) and (max-height: 539px) { /*Decrease scale to 0.75 if width is less than 380px*/
@media screen and (max-width: 380px) and (max-height: 539px) {
.dockContainer { .dockContainer {
position: absolute !important; position: absolute !important;
@ -115,14 +114,14 @@
width: auto !important; width: auto !important;
height: auto !important; height: auto !important;
margin: 5px !important; margin: 5px !important;
transform: scale(0.65) !important; transform: scale(0.75) !important;
transition: transform var(--transition-speed) !important; transition: transform var(--transition-speed) !important;
} }
} }
/*Decrease scale to 0.55 if width is less than or equal to 374px and greater than or equal to 320px*/ /*Decrease scale to 0.70 if width is less than or equal to 374px and greater than or equal to 320px*/
@media screen and (max-width: 375px) and (min-width: 320px) and (max-height: 539px) { @media screen and (max-width: 350px) and (min-width: 320px) and (max-height: 539px) {
.dockContainer { .dockContainer {
position: absolute !important; position: absolute !important;
@ -145,12 +144,12 @@
width: auto !important; width: auto !important;
height: auto !important; height: auto !important;
margin: 5px !important; margin: 5px !important;
transform: scale(0.55) !important; transform: scale(0.70) !important;
transition: transform var(--transition-speed) !important; transition: transform var(--transition-speed) !important;
} }
} }
/*Scale to 0 if less than 320px*/ /*Scale to 0 if less than 320px*/
@media screen and (max-width: 319px) and (max-height: 539px) { @media screen and (max-width: 319px) and (max-height: 539px) {
@ -181,4 +180,4 @@
opacity var(--transition-speed) !important; opacity var(--transition-speed) !important;
} }
} }