extern/the-glorious-startpage
1
0
Fork 1
mirror of https://github.com/manilarome/the-glorious-startpage.git synced 2025-02-12 07:29:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

dock responsiveness

Browse Source
This commit is contained in:
Gerome Matilla 2020-06-04 12:47:58 +08:00
parent 3ed199f8fa
commit 574b7d33df
1 changed files with 77 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
css/dock.css
View File

@ -30,34 +30,32 @@
z-index: 1 !important;
}
/*Translate dock to left side if width <= 580 and height >= 540*/
@media screen and (max-width: 580px) and (min-height: 540px) {
.dockContainer {
display: inline-block;
display: inline-block !important;
opacity: 1;
position: relative;
margin:0 auto;
position: relative !important;
margin:0 auto !important;
top: 50%;
left: 0;
bottom: 0;
right: 0;
top: 50% !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
-webkit-transform: translateY(-50%);
transition: opacity var(--transition-speed);
-webkit-transform: translateY(-50%) !important;
transition: opacity var(--transition-speed) !important;
}
#dock {
display: inline-block;
width: auto;
height: auto;
margin: 5px;
transform: scale(0.85);
transition: transform var(--transition-speed);
display: inline-block !important;
width: auto !important;
height: auto !important;
margin: 5px !important;
transform: scale(0.85) !important;
transition: transform var(--transition-speed) !important;
}
}
@ -67,28 +65,28 @@
@media screen and (max-width: 579px) and (max-height: 539px) {
.dockContainer {
position: absolute;
background: transparent;
z-index: 5;
margin: 0 auto;
bottom: 0;
position: absolute !important;
background: transparent !important;
z-index: 5 !important;
margin: 0 auto !important;
bottom: 0 !important;
/*On bottom, center horizontally*/
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 50% !important;
-ms-transform: translateX(-50%) !important;
transform: translateX(-50%) !important;
/*Add transition*/
transition: opacity var(--transition-speed);
transition: opacity var(--transition-speed) !important;
}
#dock {
display: flex;
width: auto;
height: auto;
margin: 5px;
transform: scale(0.85);
transition: transform var(--transition-speed);
display: flex !important;
width: auto !important;
height: auto !important;
margin: 5px !important;
transform: scale(0.85) !important;
transition: transform var(--transition-speed) !important;
}
}
@ -97,28 +95,28 @@
@media screen and (max-width: 490px) and (max-height: 539px) {
.dockContainer {
position: absolute;
background: transparent;
z-index: 5;
margin: 0 auto;
bottom: 0;
position: absolute !important;
background: transparent !important;
z-index: 5 !important;
margin: 0 auto !important;
bottom: 0 !important;
/*On bottom, center horizontally*/
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 50% !important;
-ms-transform: translateX(-50%) !important;
transform: translateX(-50%) !important;
/*Add transition*/
transition: opacity var(--transition-speed);
transition: opacity var(--transition-speed) !important;
}
#dock {
display: flex;
width: auto;
height: auto;
margin: 5px;
transform: scale(0.65);
transition: transform var(--transition-speed);
display: flex !important;
width: auto !important;
height: auto !important;
margin: 5px !important;
transform: scale(0.65) !important;
transition: transform var(--transition-speed) !important;
}
}
@ -127,28 +125,28 @@
@media screen and (max-width: 375px) and (min-width: 320px) and (max-height: 539px) {
.dockContainer {
position: absolute;
background: transparent;
z-index: 5;
margin: 0 auto;
bottom: 0;
position: absolute !important;
background: transparent !important;
z-index: 5 !important;
margin: 0 auto !important;
bottom: 0 !important;
/*On bottom, center horizontally*/
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 50% !important;
-ms-transform: translateX(-50%) !important;
transform: translateX(-50%) !important;
/*Add transition*/
transition: opacity var(--transition-speed);
transition: opacity var(--transition-speed) !important;
}
#dock {
display: flex;
width: auto;
height: auto;
margin: 5px;
transform: scale(0.55);
transition: transform var(--transition-speed);
display: flex !important;
width: auto !important;
height: auto !important;
margin: 5px !important;
transform: scale(0.55) !important;
transition: transform var(--transition-speed) !important;
}
}
@ -157,29 +155,30 @@
@media screen and (max-width: 319px) and (max-height: 539px) {
.dockContainer {
position: absolute;
background: transparent;
z-index: 5;
margin: 0 auto;
bottom: 0;
position: absolute !important;
background: transparent !important;
z-index: 5 !important;
margin: 0 auto !important;
bottom: 0 !important;
/*On bottom, center horizontally*/
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 50% !important;
-ms-transform: translateX(-50%) !important;
transform: translateX(-50%) !important;
/*Add transition*/
transition: opacity var(--transition-speed);
transition: opacity var(--transition-speed) !important;
}
#dock {
display: flex;
width: auto;
height: auto;
opacity: 0;
margin: 5px;
transform: scale(0.0);
transition: transform var(--transition-speed), opacity var(--transition-speed);
display: flex !important;
width: auto !important;
height: auto !important;
opacity: 0 !important;
margin: 5px !important;
transform: scale(0.0) !important;
transition: transform var(--transition-speed),
opacity var(--transition-speed) !important;
}
}