1
Fork 0
userstyles/source/tildes-baukula/_misc.scss

93 lines
2.1 KiB
SCSS

// Anywhere a link will go to a user, color it $green
a.link-user,
a.site-header-context[href^='/user'] {
color: $green;
&:visited {
color: $green;
}
}
// Anywhere a link will go to a group, color it $orange
a.link-group,
a.site-header-context[href^='/~'],
.nav .nav-item a[href^='/~'] {
color: $orange;
&:visited {
color: $orange;
}
}
.group-list-item-subscribed a.link-group {
color: $cyan;
}
.group-list-item-not-subscribed a.link-group {
color: $yellow;
}
// Make sure the logo hover keeps the $foreground color, otherwise it would be pink from _anchors.scss
a.site-header-logo:hover {
color: $foreground;
}
a.logged-in-user-alert,
a.logged-in-user-alert:visited {
@include background-hover($orange, $yellow);
color: $background;
padding: 0.1rem 0.3rem;
}
// The logout button is actually a <button/> instead of an <a/> so we gotta reset the style
#sidebar {
form[action='/logout'] > button,
form[action='/logout'] > button:hover {
color: $cyan;
border: none;
background-color: transparent;
}
}
// "Edit filtered tags" button in the sidebar
#sidebar .btn.btn-link[href='/settings/filters'] {
width: 100%;
margin: 0.2rem 0;
}
// Target all label-topic-tags expect spoiler and nsfw ones
.label.label-topic-tag:not([class*='label-topic-tag-spoiler'], [class*='label-topic-tag-nsfw']) {
color: $comment;
a {
@include color-hover($comment, $pink);
}
}
.divider {
border-color: $foreground;
}
// Very specific target for the Tildes brand logo at the top
// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
& > header > a:nth-child(1):not(.no-header-logo) {
color: $foreground;
background-size: 32px 32px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAHlBMVEUoKjZQ+nticqSL6f29k/nx+oz/VVX/ecb/uGz///+3yBn7AAAAaklEQVR42u3Oxw2AQAADsNDZf2IGyO8kioQ9gQMAAAAAcLelCAkJCQkJCQkJ/Tk0lZS5ZMhZhISEhISEhISEvhbaSoasJWUvKUJCQkJCQkJCQu+GnnSUFCEhISEhISEhoXdDAAAAAAA3uwDrCC2R1NNC7QAAAABJRU5ErkJggg==');
}
.form-status-success {
color: $green;
}
.form-status-error {
color: $red;
}
.donation-goal {
meter {
background-color: $background;
}
}