Websites/app/javascript/styles/application.scss

116 lines
2.6 KiB
SCSS
Raw Normal View History

2024-05-03 03:04:43 +00:00
@import "butts-are.cool/home";
@import "e621.ws/status";
@import "furry.cool/home";
2024-07-25 06:44:22 +00:00
@import "maid.gay/home";
2024-05-03 03:04:43 +00:00
@import "oceanic.ws/home";
@import "yiff.media/home";
@import "yiff.rest/home";
@import "yiff.rocks/home";
2024-06-11 07:15:05 +00:00
@import "exceptions";
2024-05-03 03:04:43 +00:00
div#notice {
padding: 0.25em;
position: fixed;
top: 1rem;
left: 25%;
width: 50%;
z-index: 100;
color: #FFF;
background-color: darkgreen;
border: 1px solid #333333;
&.ui-state-error {
background-color: maroon;
}
&.ui-corner-all {
border-radius: 3px;
}
#close-notice-link {
display: flex;
float: right;
padding: 0 0.75em;
text-decoration: none;
color: #B4C7D9;
}
}
body.c-application {
background-color: #2C2F33;
color: #FFFDD0;
a {
color: #FFF;
}
div#page {
text-align: center;
}
}
.backtrace-line {
list-style: none;
}
2024-06-11 07:15:05 +00:00
// Bootstrap does not have built in dark pagination
.pagy-bootstrap {
$gray-100: #f8f9fa;
$gray-600: #6c757d;
$gray-800: #343a40;
$pagination-focus-outline: 0;
$focus-ring-width: 0.25rem;
$focus-ring-opacity: 0.25;
$blue: #0d6efd;
$white: #fff;
$primary: $blue;
$focus-ring-color: rgba($primary, $focus-ring-opacity);
$focus-ring-blur: 0;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width
$focus-ring-color;
$pagination-focus-box-shadow: $focus-ring-box-shadow;
$pagination-dark-color: $gray-100;
$pagination-dark-bg: $gray-800;
$pagination-dark-border-color: $gray-600;
$pagination-dark-hover-color: $pagination-dark-color;
$pagination-dark-hover-bg: $gray-600;
$pagination-dark-hover-border-color: $pagination-dark-border-color;
$component-active-color: $white;
$component-active-bg: $primary;
$pagination-active-color: $component-active-color;
$pagination-active-bg: $component-active-bg;
$pagination-active-border-color: $component-active-bg;
.page-link {
color: $pagination-dark-color;
background-color: $pagination-dark-bg;
border-color: $pagination-dark-border-color;
&:hover {
color: $pagination-dark-hover-color;
background-color: $pagination-dark-hover-bg;
border-color: $pagination-dark-hover-border-color;
}
&:focus {
outline: $pagination-focus-outline;
box-shadow: $pagination-focus-box-shadow;
}
}
.page-item {
&.active .page-link {
color: $pagination-active-color;
background-color: $pagination-active-bg;
border-color: $pagination-active-border-color;
}
&.disabled .page-link {
background-color: $pagination-dark-bg;
border-color: $pagination-dark-border-color;
}
}
}