b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
103 lines
2 KiB
CSS
Executable file
103 lines
2 KiB
CSS
Executable file
/**
|
|
* Smart-Dialog
|
|
* - State:
|
|
* 1. closed
|
|
* 2. opening
|
|
* 3. opened - content visible
|
|
* 4. closing
|
|
* Default scale: 1920x1080 (2*sqrt(960*960 + 1080*1080) / 20 = 144.5)
|
|
*/
|
|
|
|
smart-dialog {
|
|
position: fixed;
|
|
z-index: 2147483647;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
smart-dialog:before {
|
|
content: attr(title);
|
|
display: block;
|
|
margin-top: 5rem;
|
|
margin-left: 7.6rem;
|
|
font-family: "Fira Sans";
|
|
font-size: 5.4rem;
|
|
font-style: italic;
|
|
color: #ffffff;
|
|
}
|
|
|
|
smart-dialog:after {
|
|
content: "";
|
|
display: block;
|
|
position: fixed;
|
|
height: 2rem;
|
|
width: 2rem;
|
|
top: calc(100% - 1rem);
|
|
left: calc(50% - 1rem);
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
transition: none;
|
|
transform: scale(20);
|
|
}
|
|
|
|
smart-dialog.closed > *,
|
|
smart-dialog.closing > *,
|
|
smart-dialog.opening > *,
|
|
smart-dialog.closed:before,
|
|
smart-dialog.closing:before,
|
|
smart-dialog.opening:before {
|
|
display: none;
|
|
}
|
|
|
|
smart-dialog.closed {
|
|
visibility: hidden;
|
|
}
|
|
|
|
smart-dialog.opened {
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
smart-dialog.opened:after {
|
|
visibility: hidden;
|
|
border-radius: 50%;
|
|
transform: scale(144.5);
|
|
}
|
|
|
|
smart-dialog.opening:after {
|
|
border-radius: 50%;
|
|
transform: scale(144.5);
|
|
/* transitionDuration should be the same as openDuration variable in script */
|
|
transition: transform 1s cubic-bezier(0, 0, 0 ,1);
|
|
}
|
|
|
|
smart-dialog.closing:after {
|
|
border-radius: 50%;
|
|
transform: scale(20);
|
|
/* transitionDuration should be the same as closeDuration variable in script */
|
|
transition: transform 0.65s cubic-bezier(0.6, 0, 1 ,1);
|
|
}
|
|
|
|
/* 1280x800 for flatfish */
|
|
@media (width: 1280px) and (height: 800px) {
|
|
smart-dialog:after,
|
|
smart-dialog.closing:after {
|
|
transform: scale(7.5);
|
|
}
|
|
|
|
smart-dialog.opening:after {
|
|
transform: scale(102.5);
|
|
}
|
|
}
|
|
|
|
/* 800x1280 for flatfish vertical */
|
|
@media (width: 800px) and (height: 1280px) {
|
|
smart-dialog:after,
|
|
smart-dialog.closing:after {
|
|
transform: scale(8.3);
|
|
}
|
|
|
|
smart-dialog.opening:after {
|
|
transform: scale(134);
|
|
}
|
|
}
|