mctaylors/NXInspired
mctaylors/NXInspired
1
1
Fork 0
Code Issues 1 Pull requests Activity

Implement two buttons, pt.2

Browse source 
Signed-off-by: mctaylors <cantsendmails@mctaylors.ru>
This commit is contained in:
Macintxsh 2024-05-02 22:40:24 +05:00
parent c0955b4fdf
commit 61958c4f5f
Signed by: mctaylors
GPG key ID: 7181BEBE676903C1
5 changed files with 122 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

8
assets/css/keyframes.css
View file

@ -25,14 +25,14 @@
@keyframes onload-dialog {
from {
opacity: 0;
width: var(--keyframe-dialog-width);
height: var(--keyframe-dialog-height);
width: var(--keyframe-show-dialog-width);
height: var(--keyframe-show-dialog-height);
}
80% {
opacity: 0;
width: var(--keyframe-dialog-width);
height: var(--keyframe-dialog-height);
width: var(--keyframe-show-dialog-width);
height: var(--keyframe-show-dialog-height);
}
to {

55
assets/css/style.css
View file

@ -9,9 +9,13 @@
--dark-blue: #10bfc7;
--dialog-width: 770px;
--dialog-height: 335px;
--details-button-width: 395px;
--details-button-height: 65px;
--keyframe-dialog-size-divider: 20;
--keyframe-dialog-width: calc(var(--dialog-width) - var(--dialog-width) / var(--keyframe-dialog-size-divider));
--keyframe-dialog-height: calc(var(--dialog-height) - var(--dialog-height) / var(--keyframe-dialog-size-divider));
--keyframe-show-dialog-width: calc(var(--dialog-width) - var(--dialog-width) / var(--keyframe-dialog-size-divider));
--keyframe-hide-dialog-width: calc(var(--dialog-width) + var(--dialog-width) / var(--keyframe-dialog-size-divider));
--keyframe-show-dialog-height: calc(var(--dialog-height) - var(--dialog-height) / var(--keyframe-dialog-size-divider));
--keyframe-hide-dialog-height: calc(var(--dialog-height) + var(--dialog-height) / var(--keyframe-dialog-size-divider));
}
.background-image {
@ -36,6 +40,11 @@ p, button {
letter-spacing: -0.025em;
}
.error-code {
color: lightgray;
font-size: 16px;
}
.dialog {
position: absolute;
animation: 1250ms forwards ease-out onload-dialog;
@ -48,21 +57,19 @@ p, button {
border-radius: 4px;
}
.dialog > .error-code {
.dialog-content {
animation: 1300ms forwards onload-visibility;
}
.dialog .error-code {
margin-top: 40px;
margin-left: 60px;
color: lightgray;
font-size: 16px;
}
.dialog .description > p {
margin: 12px 32px 0 64px;
}
.dialog p, .dialog button > span {
animation: 1300ms forwards onload-visibility;
}
.dialog button {
position: absolute;
bottom: 0;
@ -86,7 +93,7 @@ p, button {
left: 50%;
}
.dialog button:hover {
.dialog button:hover, .details button:hover {
background-color: var(--background-active);
border-radius: 4px;
outline: 5px solid;
@ -107,4 +114,32 @@ p, button {
.dialog button:active {
transition: none;
background-color: #274747cf;
}
.details {
display: none;
opacity: 0;
}
.details-content {
margin: 65px 15% 0;
height: calc(100vh - var(--details-button-height) * 3.75);
overflow-y: scroll;
}
.details .description > p {
font-size: 20px;
line-height: 36px;
}
.details button {
position: absolute;
background-color: var(--background);
width: var(--details-button-width);
height: var(--details-button-height);
left: 50%;
top: calc(100% - var(--details-button-height) * 1.25);
transform: translate(-50%, -50%);
border: 1px solid var(--border);
border-radius: 4px;
}