forked from extern/the-glorious-startpage
c59d1ec0ec
* add screens css * separate dir for screens * separate dir for dashboard and settings * separate dir for centeredbox and its contents * move autosuggestion to centeredbox dir * rename webmenu to webmenuscreen * fix bugs and errors caused by renaming webmenu * fix missing dashboard icons * fix missing weather forecast icons * reduced the use of !important * reduced the use of !important * reduced the use of !important * reduced the use of !important * reduced the use of !important * reduced the use of !important * combine bars and panels * bars css cleanup * dashboard missing icon fix and css * decrease the usage of !important * decrease the usage of important
184 lines
3.5 KiB
CSS
184 lines
3.5 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;
|
|
}
|
|
|
|
/*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;
|
|
opacity: 1;
|
|
|
|
position: relative;
|
|
margin:0 auto;
|
|
|
|
top: 50%;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
|
|
-webkit-transform: translateY(-50%);
|
|
transition: opacity var(--transition-speed);
|
|
}
|
|
|
|
#dock {
|
|
display: inline-block;
|
|
width: auto;
|
|
height: auto;
|
|
margin: 5px;
|
|
transform: scale(0.90);
|
|
transition: transform var(--transition-speed);
|
|
}
|
|
}
|
|
|
|
|
|
/*Decrease scale to 0.85 if width is less than 470px*/
|
|
@media screen and (max-width: 469px) and (max-height: 489px) {
|
|
|
|
.dockContainer {
|
|
position: absolute;
|
|
background: transparent;
|
|
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 {
|
|
display: flex;
|
|
width: auto;
|
|
height: auto;
|
|
margin: 5px;
|
|
transform: scale(0.85);
|
|
transition: transform var(--transition-speed);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/*Decrease scale to 0.75 if width is less than 380px*/
|
|
@media screen and (max-width: 380px) and (max-height: 489px) {
|
|
|
|
.dockContainer {
|
|
position: absolute;
|
|
background: transparent;
|
|
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 {
|
|
display: flex;
|
|
width: auto;
|
|
height: auto;
|
|
margin: 5px;
|
|
transform: scale(0.75);
|
|
transition: transform var(--transition-speed);
|
|
}
|
|
|
|
}
|
|
|
|
/*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;
|
|
background: transparent;
|
|
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 {
|
|
display: flex;
|
|
width: auto;
|
|
height: auto;
|
|
margin: 5px;
|
|
transform: scale(0.70);
|
|
transition: transform var(--transition-speed);
|
|
}
|
|
}
|
|
|
|
|
|
/*Scale to 0 if less than 320px*/
|
|
@media screen and (max-width: 319px) and (max-height: 489px) {
|
|
|
|
.dockContainer {
|
|
position: absolute;
|
|
background: transparent;
|
|
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 {
|
|
display: flex;
|
|
width: auto;
|
|
height: auto;
|
|
opacity: 0;
|
|
margin: 5px;
|
|
transform: scale(0.0);
|
|
transition: transform var(--transition-speed),
|
|
opacity var(--transition-speed);
|
|
}
|
|
|
|
} |