pyfedi/app/static/styles.scss

430 lines
7 KiB
SCSS
Raw Normal View History

2023-08-22 21:24:11 +12:00
/* */
@import "scss/colours";
@import "scss/mixins";
@import "scss/typography";
@import "scss/controls";
body {
font-size: 0.95rem;
}
2024-01-26 09:37:05 +13:00
a {
text-decoration: none;
border: solid 2px transparent;
}
#outer_container, footer {
a:not(.btn):hover {
text-decoration: underline;
}
2024-01-26 09:51:48 +13:00
a:not(.btn):has(span.fe):hover { /* do not have underlines on icons */
text-decoration: none;
}
2024-01-26 09:37:05 +13:00
a:not(.btn):active {
border: dotted 2px #0A5CA0;
}
}
2024-01-23 19:17:05 +13:00
div.navbar {
border-bottom: 1px solid rgba(0, 40, 100, 0.12);
min-height: 60px;
2024-02-23 18:41:15 +13:00
background-color: var(--bs-body-bg);
}
2023-10-28 21:33:40 +13:00
.navbar-brand {
2024-02-08 17:30:27 +13:00
line-height: 46px;
2023-10-28 21:33:40 +13:00
img {
margin-right: 20px;
}
}
.navbar-light .navbar-nav .nav-link {
outline-style: none;
}
2023-12-24 17:41:34 +13:00
.navbar-toggler {
border: none;
height: 48px;
}
.navbar-light .navbar-toggler-icon {
2023-12-24 17:41:34 +13:00
background-image: url(/static/images/menu.svg);
width: 35px;
height: 40px;
background-position: top;
}
.dropdown.active {
background-color: $primary-colour;
}
.navbar-light .navbar-nav .active > .nav-link {
color: white;
opacity: 0.9;
}
2023-09-17 21:19:51 +12:00
.tab-content > .tab-pane {
border-right: solid 1px #dee2e6;
border-bottom: solid 1px #dee2e6;
border-left: solid 1px #dee2e6;
border-radius: 0 0 5px 5px;
padding: 10px 15px 0 15px;
}
.dropdown-menu {
.dropdown-item.active {
background-color: $primary-colour;
}
}
2023-12-22 14:05:39 +13:00
#outer_container {
2024-03-01 20:32:29 +13:00
margin-top: -1px;
2023-12-22 14:05:39 +13:00
@include breakpoint(tablet) {
margin-top: 1rem;
padding-top: 0.25rem;
}
}
.card-title {
font-size: 140%;
}
2023-11-12 20:54:11 +13:00
.card-header {
h2 {
margin-bottom: 5px;
}
}
.alert-info, .alert-message, .alert-error {
color: #0c5460;
background-color: #d1ecf1;
border-color: #bee5eb;
@include breakpoint(tablet) {
padding-left: 1.8rem;
padding-right: 1.8rem;
}
}
.alert-error {
color: #722047;
background-color: #f8d7da;
}
2023-11-09 21:32:29 +13:00
.main_pane {
border: solid 1px $light-grey;
border-radius: 5px;
padding-top: 8px;
padding-bottom: 12px;
2023-12-22 14:05:39 +13:00
.url_thumbnail {
width: 120px;
height: auto;
img {
width: 100%;
2023-12-27 19:51:07 +13:00
height: auto;
2023-12-22 14:05:39 +13:00
}
}
2023-11-09 21:32:29 +13:00
}
[data-bs-theme=dark] .main_pane {
border-color: $super-dark-grey;
}
.community_icon {
2023-12-22 14:05:39 +13:00
width: 20vw;
height: 20vw;
max-width: 30px;
max-height: 30px;
min-width: 20px;
min-height: 20px;
vertical-align: text-top;
}
2024-01-05 16:41:50 +13:00
.list-group-item .community_icon {
vertical-align: middle;
}
.community_icon_big {
2023-12-22 14:05:39 +13:00
width: 20vw;
height: 20vw;
max-width: 120px;
max-height: 120px;
min-width: 80px;
min-height: 80px;
object-fit: cover;
}
.bump_up {
position: absolute;
2023-12-22 14:05:39 +13:00
top: 115px;
left: 26px;
}
.external_link_icon {
width: 12px;
height: 12px;
margin-left: 4px;
margin-bottom: 3px;
}
2023-10-15 21:13:32 +13:00
.coolfieldset, .coolfieldset.expanded{
border:1px solid $light-grey;
border-radius: 5px;
padding: 0 20px;
}
.coolfieldset.collapsed{
border:0;
border-top:1px solid $grey;
border-radius: 0;
}
.coolfieldset legend{
padding-left:13px;
font-weight:bold;
cursor:pointer;
background-color: white;
display: block;
position: relative;
top: -11px;
}
.coolfieldset legend, .coolfieldset.expanded legend{
background: whitesmoke url(/static/images/expanded.gif) no-repeat center left;
}
.coolfieldset.collapsed legend{
background: whitesmoke url(/static/images/collapsed.gif) no-repeat center left;
2023-10-23 22:54:11 +13:00
}
.domain_link {
2024-01-23 19:17:05 +13:00
color: #777;
2023-10-23 22:54:11 +13:00
font-size: 73%;
a {
2024-01-23 19:17:05 +13:00
color: #777;
2023-10-23 22:54:11 +13:00
}
2023-11-09 22:44:09 +13:00
}
.comment_author {
a {
2024-01-01 14:49:15 +13:00
2023-11-09 22:44:09 +13:00
}
}
.low_score {
.hide_button, .comment_author {
a {
font-weight: normal;
color: $dark-grey;
}
}
2023-11-12 20:54:11 +13:00
}
.communities_table tr td {
vertical-align: middle;
padding-top: 6px;
&:first-child {
padding-top: 8px;
}
}
2024-01-26 16:19:06 +13:00
.table tbody tr th {
a {
font-weight: normal;
}
}
2023-11-27 22:05:35 +13:00
.text-right {
text-align: right;
}
2023-11-30 17:39:13 +13:00
#timeSpent {
cursor: wait;
}
.option_list {
list-style-type: none;
margin-bottom: 0;
li {
margin-bottom: 15px;
}
}
.field_hint {
margin-top: -15px;
display: block;
margin-bottom: 10px;
}
.post_options_link {
display: block;
position: absolute;
bottom: 0;
right: -2px;
width: 41px;
text-decoration: none;
}
2023-12-28 20:00:07 +13:00
.comment_actions_link {
display: block;
position: absolute;
bottom: 0;
2024-01-17 18:46:03 +13:00
right: -16px;
2023-12-28 20:00:07 +13:00
width: 41px;
text-decoration: none;
}
.alert {
width: 96%;
}
.reported {
background-color: antiquewhite;
}
2024-01-12 17:15:08 +13:00
.dropdown-header {
color: black;
}
2024-01-21 12:14:05 +13:00
.current_post {
background-color: aliceblue;
.replies {
background-color: var(--bs-body-bg);
}
}
[data-bs-theme=dark] .current_post {
background-color: $super-dark-grey;
}
.h1, h1 {
@include breakpoint(tablet) {
font-size: 2rem;
2024-01-06 11:31:45 +13:00
}
}
2024-01-06 11:31:45 +13:00
.h2, h2 {
@include breakpoint(tablet) {
font-size: 1.8rem;
2024-01-06 11:31:45 +13:00
}
}
2024-01-06 11:31:45 +13:00
.h3, h3 {
@include breakpoint(tablet) {
font-size: 1.6rem;
2024-01-06 11:31:45 +13:00
}
}
2024-02-17 20:05:57 +13:00
.sender_list {
border-right: solid 1px #ddd;
}
.message {
border: solid 1px #ddd;
border-radius: 5px;
padding: 8px 15px 0 15px;
&.from_other_party {
float: right;
}
&.from_me {
color: var(--bs-card-cap-color);
background-color: var(--bs-card-cap-bg);
}
}
/* high contrast */
@media (prefers-contrast: more) {
:root {
--bs-link-color: black;
--bs-link-color-rgb: black;
--bs-link-hover-color-rgb: #333;
}
[data-bs-theme="dark"] {
--bs-body-bg: black;
--bs-link-color: white;
--bs-link-color-rgb: white;
--bs-link-hover-color-rgb: #eee;
--bs-heading-color: white;
--bs-body-color: white;
--bs-body-color-rgb: white;
}
.btn-primary {
--bs-btn-bg: black;
--bs-btn-border-color: black;
--bs-btn-hover-bg: #333;
}
[data-bs-theme="dark"] .btn-primary {
--bs-btn-bg: white;
--bs-btn-border-color: white;
--bs-btn-hover-bg: white;
--bs-btn-color: black;
}
[data-bs-theme="dark"] .btn-primary:hover {
--bs-btn-hover-color: black;
}
.btn-outline-secondary {
--bs-btn-color: black;
}
[data-bs-theme="dark"] .btn-outline-secondary {
--bs-btn-color: white;
}
.post_list .post_teaser {
border-bottom: solid 1px black;
}
[data-bs-theme="dark"] .post_list .post_teaser {
border-bottom: solid 1px white;
}
.domain_link, .domain_link a {
color: black;
}
[data-bs-theme="dark"] .domain_link, [data-bs-theme="dark"] .domain_link a {
color: ghostwhite;
}
.main_pane, .voting_buttons div {
border: solid 1px #333;
}
[data-bs-theme="dark"] .main_pane, [data-bs-theme="dark"] .voting_buttons div {
border: solid 1px #eee;
}
div.navbar {
border-bottom: solid 1px #333;
}
[data-bs-theme="dark"] div.navbar {
border-bottom: solid 1px #fff;
}
.nav-link {
color: black;
}
[data-bs-theme="dark"] .nav-link {
color: white;
}
.card {
--bs-card-border-color: #333;
}
[data-bs-theme="dark"] .card {
--bs-card-border-color: #fff;
}
.coolfieldset.collapsed legend, .coolfieldset legend, .coolfieldset.expanded legend {
background-color: white;
}
[data-bs-theme="dark"] .coolfieldset.collapsed legend, [data-bs-theme="dark"] .coolfieldset legend, [data-bs-theme="dark"] .coolfieldset.expanded legend {
background-color: black;
}
}