mirror of
https://github.com/raphaelsalaja/userinterface-wiki.git
synced 2026-09-14 20:06:29 +08:00
Raphael S.
76 lines
1.4 KiB
CSS
76 lines
1.4 KiB
CSS
.header {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
align-items: flex-start;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
|
|
@media (max-width: 480px) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column-reverse;
|
|
min-height: 84px;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
flex: 1;
|
|
font-family: var(--font-family-display);
|
|
font-size: 24px;
|
|
font-weight: var(--font-weight-semibold);
|
|
line-height: 150%;
|
|
color: var(--foreground-primary);
|
|
letter-spacing: var(--font-letter-spacing-20px);
|
|
}
|
|
|
|
.actions {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
display: flex;
|
|
gap: 8px;
|
|
transform: translateY(-50%);
|
|
|
|
@media (max-width: 480px) {
|
|
position: relative;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 4px;
|
|
color: var(--gray-10);
|
|
}
|
|
|
|
.description {
|
|
font-family: var(--font-family-display);
|
|
font-size: 14px;
|
|
font-weight: var(--font-weight-normal);
|
|
line-height: 150%;
|
|
color: var(--foreground-tertiary);
|
|
letter-spacing: var(--font-letter-spacing-14px);
|
|
}
|
|
|
|
.metadata {
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
font-weight: var(--font-weight-normal);
|
|
line-height: 24px;
|
|
color: var(--gray-11);
|
|
letter-spacing: -0.09px;
|
|
}
|