2024-07-14 12:28:44 +00:00
|
|
|
.card {
|
2024-08-05 07:33:00 +00:00
|
|
|
composes: surface from "material.module.css";
|
2024-07-14 12:28:44 +00:00
|
|
|
border-radius: 2px;
|
|
|
|
box-shadow: var(--tutu-shadow-e2);
|
|
|
|
transition: var(--tutu-transition-shadow);
|
|
|
|
overflow: hidden;
|
|
|
|
background-color: var(--tutu-color-surface-l);
|
|
|
|
|
|
|
|
&:focus-within,
|
|
|
|
&:focus-visible {
|
|
|
|
box-shadow: var(--tutu-shadow-e8);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:not(.manualMargin) {
|
2024-08-05 13:10:48 +00:00
|
|
|
&> :not(.cardNoPad) {
|
2024-07-14 12:28:44 +00:00
|
|
|
margin-inline: var(--card-pad, 20px);
|
|
|
|
}
|
|
|
|
|
|
|
|
> :not(.cardGutSkip):first-child {
|
|
|
|
margin-top: var(--card-gut, 20px);
|
|
|
|
}
|
|
|
|
|
2024-08-05 13:10:48 +00:00
|
|
|
>.cardGutSkip+*:not(.cardGutSkip) {
|
2024-07-14 12:28:44 +00:00
|
|
|
margin-top: var(--card-gut, 20px);
|
|
|
|
}
|
|
|
|
|
|
|
|
> :not(.cardGutSkip):last-child {
|
|
|
|
margin-bottom: var(--card-gut, 20px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.layoutCentered {
|
|
|
|
position: absolute;
|
|
|
|
left: 50%;
|
|
|
|
top: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
width: 448px;
|
|
|
|
|
|
|
|
@media (max-width: 600px) {
|
|
|
|
& {
|
|
|
|
position: static;
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
transform: none;
|
|
|
|
display: grid;
|
|
|
|
grid-template-rows: 1fr auto;
|
|
|
|
height: 100vh;
|
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
}
|
2024-08-05 07:33:00 +00:00
|
|
|
}
|