Files
kredits-web/app/styles/components/_contribution-details.scss
raucao 8a8d4f3d04
CI / Lint (pull_request) Successful in 52s
CI / Test (pull_request) Successful in 1m31s
Make details pane sticky on desktop
closes #234
2026-07-26 18:06:04 +02:00

150 lines
2.5 KiB
SCSS

section#contribution-details {
header {
nav {
.amount {
font-size: 1.5rem;
}
.symbol {
padding-left: 0.2rem;
}
}
}
.content {
width: 100%;
margin: 0 0 1.5rem;
padding: 2rem 2rem;
border-top: 1px solid $item-border-color;
border-bottom: 1px solid $item-border-color;
background-color: $item-background-color;
h3 {
font-size: 1.5rem;
margin-bottom: 2rem;
}
p {
margin-bottom: 2rem;
span {
}
&.who-what-when {
font-size: 1.2rem;
margin-bottom: 1.2rem;
}
&:last-of-type {
margin-bottom: 0;
}
}
a:not(.button) {
color: $primary-color;
text-decoration: none;
&:not(.button):hover {
text-decoration: underline;
}
}
.co-contributors {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid $item-border-color;
h4 {
font-size: 1.2rem;
margin-bottom: 1rem;
color: $body-text-color;
}
ul {
list-style: none;
li {
display: flex;
align-items: center;
padding: 0.5rem 0;
gap: 0.5rem;
.co-contributor {
display: inline-flex;
align-items: center;
text-decoration: none;
color: $body-text-color;
flex: 1;
.name {
margin-left: 0.5rem;
}
.amount {
margin-left: auto;
font-weight: 500;
}
.symbol {
font-size: 0.8rem;
padding-left: 0.2rem;
}
&:hover .name {
color: $primary-color;
}
}
}
}
}
}
.actions {
text-align: center;
}
&.vetoed {
.content {
h3 {
text-decoration: line-through;
}
}
}
.hint.vetoed {
overflow: auto;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid $item-border-color;
font-size: 1.2rem;
.icon {
display: inline-block;
width: 40px;
height: 40px;
float: left;
margin-right: 1rem;
margin-bottom: 1rem;
svg {
width: 100%;
height: auto;
}
}
}
}
// On small screens, hide intro text, contributor and contributions list when
// showing details
@include media-max(medium) {
#dashboard.with-details {
#contributions, #stats {
display: none;
}
}
#intro.with-details {
display: none;
}
}