forked from extern/the-glorious-startpage
184 lines
4.3 KiB
CSS
184 lines
4.3 KiB
CSS
.dockContainer {
|
|
background: transparent;
|
|
position: absolute;
|
|
z-index: 5;
|
|
margin: 0 auto;
|
|
bottom: 0;
|
|
|
|
/*On bottom, center horizontally*/
|
|
left: 50%;
|
|
-ms-transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
|
|
/*Add transition*/
|
|
transition: opacity var(--transition-speed);
|
|
}
|
|
|
|
#dock {
|
|
background: var(--panel-bg);
|
|
border-radius: var(--rounded-radius);
|
|
|
|
display: flex;
|
|
position: relative;
|
|
height: auto;
|
|
width: auto;
|
|
|
|
padding: 5px;
|
|
margin: 10px;
|
|
|
|
transition: transform var(--transition-speed);
|
|
z-index: 1 !important;
|
|
}
|
|
|
|
/*Translate dock to left side if width <= 470 and height >= 540*/
|
|
@media screen and (max-width: 470px) and (min-height: 490px) {
|
|
|
|
.dockContainer {
|
|
display: inline-block !important;
|
|
opacity: 1;
|
|
|
|
position: relative !important;
|
|
margin:0 auto !important;
|
|
|
|
top: 50% !important;
|
|
left: 0 !important;
|
|
bottom: 0 !important;
|
|
right: 0 !important;
|
|
|
|
-webkit-transform: translateY(-50%) !important;
|
|
transition: opacity var(--transition-speed) !important;
|
|
}
|
|
|
|
#dock {
|
|
display: inline-block !important;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
margin: 5px !important;
|
|
transform: scale(0.90) !important;
|
|
transition: transform var(--transition-speed) !important;
|
|
}
|
|
}
|
|
|
|
|
|
/*Decrease scale to 0.85 if width is less than 580px*/
|
|
@media screen and (max-width: 469px) and (max-height: 489px) {
|
|
|
|
.dockContainer {
|
|
position: absolute !important;
|
|
background: transparent !important;
|
|
z-index: 5 !important;
|
|
margin: 0 auto !important;
|
|
bottom: 0 !important;
|
|
|
|
/*On bottom, center horizontally*/
|
|
left: 50% !important;
|
|
-ms-transform: translateX(-50%) !important;
|
|
transform: translateX(-50%) !important;
|
|
|
|
/*Add transition*/
|
|
transition: opacity var(--transition-speed) !important;
|
|
}
|
|
|
|
#dock {
|
|
display: flex !important;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
margin: 5px !important;
|
|
transform: scale(0.85) !important;
|
|
transition: transform var(--transition-speed) !important;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/*Decrease scale to 0.75 if width is less than 380px*/
|
|
@media screen and (max-width: 380px) and (max-height: 489px) {
|
|
|
|
.dockContainer {
|
|
position: absolute !important;
|
|
background: transparent !important;
|
|
z-index: 5 !important;
|
|
margin: 0 auto !important;
|
|
bottom: 0 !important;
|
|
|
|
/*On bottom, center horizontally*/
|
|
left: 50% !important;
|
|
-ms-transform: translateX(-50%) !important;
|
|
transform: translateX(-50%) !important;
|
|
|
|
/*Add transition*/
|
|
transition: opacity var(--transition-speed) !important;
|
|
}
|
|
|
|
#dock {
|
|
display: flex !important;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
margin: 5px !important;
|
|
transform: scale(0.75) !important;
|
|
transition: transform var(--transition-speed) !important;
|
|
}
|
|
|
|
}
|
|
|
|
/*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: 350px) and (min-width: 320px) and (max-height: 489px) {
|
|
|
|
.dockContainer {
|
|
position: absolute !important;
|
|
background: transparent !important;
|
|
z-index: 5 !important;
|
|
margin: 0 auto !important;
|
|
bottom: 0 !important;
|
|
|
|
/*On bottom, center horizontally*/
|
|
left: 50% !important;
|
|
-ms-transform: translateX(-50%) !important;
|
|
transform: translateX(-50%) !important;
|
|
|
|
/*Add transition*/
|
|
transition: opacity var(--transition-speed) !important;
|
|
}
|
|
|
|
#dock {
|
|
display: flex !important;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
margin: 5px !important;
|
|
transform: scale(0.70) !important;
|
|
transition: transform var(--transition-speed) !important;
|
|
}
|
|
}
|
|
|
|
|
|
/*Scale to 0 if less than 320px*/
|
|
@media screen and (max-width: 319px) and (max-height: 489px) {
|
|
|
|
.dockContainer {
|
|
position: absolute !important;
|
|
background: transparent !important;
|
|
z-index: 5 !important;
|
|
margin: 0 auto !important;
|
|
bottom: 0 !important;
|
|
|
|
/*On bottom, center horizontally*/
|
|
left: 50% !important;
|
|
-ms-transform: translateX(-50%) !important;
|
|
transform: translateX(-50%) !important;
|
|
|
|
/*Add transition*/
|
|
transition: opacity var(--transition-speed) !important;
|
|
}
|
|
|
|
#dock {
|
|
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;
|
|
}
|
|
|
|
} |