philomena/assets/css/views/metabar.css
2024-04-30 20:38:28 +02:00

67 lines
1.2 KiB
CSS

@define-mixin fix-interaction $type {
.metabar__interactions .interaction--$(type) {
padding: var(--padding-tiny) var(--padding-small);
}
}
@mixin if-phone {
.metabar__interactions {
display: grid;
width: 100%;
grid-template-columns: repeat(5, 1fr);
}
@mixin fix-interaction fave;
@mixin fix-interaction upvote;
@mixin fix-interaction downvote;
@mixin fix-interaction hide;
.metabar__interactions * {
align-self: center;
justify-self: center;
}
.metabar__mobile-separator {
height: 1px;
width: 100%;
margin-top: var(--padding-small);
margin-bottom: var(--padding-normal);
background: var(--primary-color);
}
.metabar__navigation {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: var(--padding-small);
}
.metabar__navigation a {
align-self: center;
justify-self: center;
}
}
.metabar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
line-height: var(--block-header-height);
}
.metabar a,
.metabar .score {
padding: var(--padding-small);
}
.metabar__user-credit {
box-sizing: border-box;
}
.metabar__mobile-info td {
padding: var(--padding-small);
}
.badges {
display: inline-block;
}