Files
start-os/frontend/projects/setup-wizard/src/app/pages/success/success.page.scss

150 lines
2.4 KiB
SCSS

canvas {
position: fixed;
left: 0;
top: 0;
z-index: -1;
}
h1 {
font-variant: all-small-caps;
margin: unset;
}
ion-content {
position: absolute;
z-index: 0;
--background: transparent;
}
ion-grid {
max-width: 760px;
height: 100%;
}
.login-btn {
--background: var(--color-accent);
--border-radius: 44px;
--box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
--padding-start: 36px;
--padding-end: 36px;
height: 76px;
}
.grid-center-wrapper {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
ion-card {
padding: 3rem;
h1 {
color: var(--ion-color-success);
padding-left: 0.5rem;
}
ion-icon {
font-size: 40px;
}
li {
margin-bottom: 2rem;
}
ion-card {
max-width: 91%;
min-width: 91%;
background: #615F5F;
color: var(--ion-text-color);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 44px;
margin: auto;
text-align: left;
cursor: pointer;
position: relative;
padding: 1rem 2rem;
transition: all 350ms ease;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
&:hover {
transition-property: transform;
transform: scale(1.05);
transition-delay: 40ms;
}
ion-card-title {
color: var(--ion-text-color);
font-size: 1.3rem;
}
ion-card-content {
padding-bottom: 4rem;
p {
padding: 1rem 0;
}
}
ion-footer {
position: absolute;
bottom: 10px;
left: 0;
color: var(--ion-text-color);
p {
font-size: 1.1rem;
font-weight: bold;
margin: unset;
}
ion-icon {
font-size: 1.6rem;
}
}
.footer-md::before {
background-image: none;
}
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
#information:after {
content: '';
position: absolute;
left: 0;
top: 80%;
width: 100%;
height: 100%;
background: var(--color-accent);
}
#launch:after {
content: '';
position: absolute;
left: 0;
top: 80%;
width: 100%;
height: 100%;
background: var(--alt-blue);
}
}
.card-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2rem;
}
.emphasis-warn {
font-weight: 600;
color: var(--ion-color-warning);
}