app/javascript/stylesheets/collected_inks.scss
@use "~bootstrap/scss/bootstrap" as b;
#collected-inks {
.buttons {
display: flex;
flex-direction: column;
gap: 5px;
@include b.media-breakpoint-up("sm") {
flex-direction: row;
}
}
.export {
text-align: right;
margin-bottom: 10px;
@include b.media-breakpoint-up("sm") {
float: right;
}
.btn {
margin-left: 10px;
}
}
.row {
box-shadow: none;
}
.table {
i {
font-size: 18px;
margin: 0;
&.fa-check {
color: b.$success;
}
&.fa-times {
color: b.$secondary;
}
}
th {
white-space: nowrap;
&[role="columnheader"] {
&:hover {
background-color: var(--fpc-bright-background);
}
}
}
tbody td {
vertical-align: middle;
}
tfoot {
font-weight: bold;
.counter {
white-space: nowrap;
}
}
}
}
form.edit_collected_ink,
form.new_collected_ink {
.row {
box-shadow: none !important;
}
input[type="submit"] {
margin-right: 15px;
}
.boolean .form-text {
margin-top: -10px;
}
.form-text {
font-size: smaller;
line-height: 15px;
}
.chrome-picker {
input {
background-color: #fff; // fixes a bug in dark mode where text is invisible
}
}
}
.pick-kind {
display: flex;
gap: 5px;
}
ul.tags {
list-style: none;
padding: 0px;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
gap: 4px;
.cluster-tag {
opacity: 0.4;
}
a {
color: white;
text-decoration-line: none;
&:hover {
text-decoration-line: underline;
}
}
}