3544 lines
No EOL
70 KiB
SCSS
3544 lines
No EOL
70 KiB
SCSS
$theme-colors: (
|
|
"primary": $primary,
|
|
"secondary": $secondary,
|
|
"danger": $danger,
|
|
"dark": $dark,
|
|
"white": $white,
|
|
"black": $black,
|
|
"light": $light,
|
|
"success": $success,
|
|
"muted": $muted,
|
|
"downvote": $downvote,
|
|
"upvote": $upvote,
|
|
"purple": $purple,
|
|
"gold": $gold,
|
|
"admin": $admin,
|
|
"gray": $gray,
|
|
"gray-100": $gray-100,
|
|
"gray-200": $gray-200,
|
|
"gray-300": $gray-300,
|
|
"gray-400": $gray-400,
|
|
"gray-500": $gray-500,
|
|
"gray-600": $gray-600,
|
|
"gray-700": $gray-700,
|
|
"gray-800": $gray-800,
|
|
"gray-900": $gray-900,
|
|
"reddit": $reddit
|
|
);
|
|
|
|
|
|
$input-border-color: $gray-400;
|
|
$border-color: $gray-400;
|
|
|
|
$border-radius: .35rem;
|
|
|
|
$text-white: $white;
|
|
|
|
|
|
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
|
|
|
|
$font-size-base: 1rem;
|
|
|
|
$medium-font-size: 0.9rem;
|
|
|
|
$small-font-size: 12px;
|
|
|
|
$extra-small-font-size: 10.1px;
|
|
|
|
$display5-size: 3rem !default;
|
|
|
|
$display5-weight: 400;
|
|
|
|
$lead-font-size: $font-size-base * 1.325 !default;
|
|
|
|
|
|
$font-weight-bold: 600;
|
|
$font-weight-bolder: 700;
|
|
$headings-font-weight: $font-weight-bold;
|
|
|
|
|
|
$spacer: 1rem;
|
|
$spacers: (
|
|
6: ($spacer * 3.5),
|
|
7: ($spacer * 5),
|
|
8: ($spacer * 10)
|
|
);
|
|
|
|
|
|
$sizes: () !default;
|
|
$sizes: map-merge(
|
|
(
|
|
25: 25%,
|
|
50: 50%,
|
|
75: 75%,
|
|
100: 100%,
|
|
130: 130%,
|
|
auto: auto
|
|
),
|
|
$sizes
|
|
);
|
|
|
|
|
|
$box-shadow-sm: 0 0.1px 3px 0 rgba(0, 0, 0, 0.05), 0 0.1px 2px 0 rgba(0, 0, 0, 0.03);
|
|
|
|
$box-shadow: 0 0.1px 3px rgba(0, 0, 0, 0.05), 0 0 0 0.1px rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
$tooltip-opacity: 1;
|
|
|
|
|
|
$yiq-contrasted-threshold: 160 !default;
|
|
|
|
|
|
@each $color, $value in $theme-colors {
|
|
.bd-callout-#{$color} {
|
|
border-left-color: #{$value};
|
|
}
|
|
}
|
|
|
|
@import "./bootstrap/bootstrap.scss";
|
|
|
|
html {
|
|
font-size: 14px;
|
|
}
|
|
|
|
@supports (font-variation-settings: normal) {
|
|
html { font-family: 'Inter var', sans-serif; }
|
|
}
|
|
|
|
body {
|
|
color: $black;
|
|
padding-top: 49px;
|
|
background-color: $gray-700;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.container{
|
|
max-width: 1300px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: 14px;
|
|
}
|
|
|
|
pre {
|
|
white-space: pre-wrap; /* Since CSS 2.1 */
|
|
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
|
|
white-space: -pre-wrap; /* Opera 4-6 */
|
|
white-space: -o-pre-wrap; /* Opera 7 */
|
|
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
|
}
|
|
|
|
body.using-mouse :focus {
|
|
outline: none;
|
|
}
|
|
|
|
#settings, #submit {
|
|
padding-top: 98px;
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
#page {
|
|
padding-top: 49px;
|
|
background-color: $gray-700;
|
|
}
|
|
|
|
#article {
|
|
padding-top: 0;
|
|
background-color: $gray-700;
|
|
}
|
|
|
|
#thread, #userpage {
|
|
background-color: $gray-700;
|
|
}
|
|
|
|
|
|
#article .navbar-light .navbar-nav .nav-link {
|
|
color: $black;
|
|
}
|
|
|
|
#article .navbar-light .navbar-nav .nav-link:hover {
|
|
background-color: transparent;
|
|
color: $primary;
|
|
}
|
|
|
|
#article .navbar-light .navbar-nav .nav-link:focus {
|
|
background-color: transparent;
|
|
color: $primary;
|
|
}
|
|
|
|
.article-title {
|
|
margin-bottom: 3rem;
|
|
font-weight: $font-weight-bold;
|
|
line-height: 3rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
|
|
|
|
#thread .custom-gutters {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.custom-gutters {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
|
|
.sticky {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 47px;
|
|
height: auto;
|
|
overflow-y: auto;
|
|
z-index: 4;
|
|
}
|
|
|
|
.sticky-63 {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 63px;
|
|
height: auto;
|
|
overflow-y: auto;
|
|
z-index: 2;
|
|
}
|
|
|
|
.sticky-105 {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 105px;
|
|
height: auto;
|
|
overflow-y: auto;
|
|
z-index: 4;
|
|
}
|
|
|
|
|
|
.text-lg {
|
|
font-size: $font-size-lg!important;
|
|
}
|
|
|
|
.text-base {
|
|
font-size: $font-size-base!important;
|
|
}
|
|
|
|
.text-small {
|
|
font-size: $small-font-size!important;
|
|
}
|
|
|
|
.text-small-extra {
|
|
font-size: $extra-small-font-size!important;
|
|
}
|
|
|
|
.display-5 {
|
|
@include font-size($display5-size);
|
|
font-weight: $display5-weight;
|
|
line-height: $display-line-height;
|
|
}
|
|
|
|
.lead {
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
|
|
#page p {
|
|
font-size: 16px;
|
|
}
|
|
|
|
|
|
a.dropdown-toggle:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
.comment-text ul li ul {
|
|
padding-left: 0;
|
|
}
|
|
|
|
ul.no-bullets {
|
|
list-style-type: none;
|
|
}
|
|
|
|
ol > li {
|
|
list-style-type: none;
|
|
counter-increment: count;
|
|
margin-bottom: .75rem;
|
|
}
|
|
|
|
ol > li::before {
|
|
content: counter(count) ".";
|
|
font-weight: $font-weight-bold;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.footer .list-inline-item:not(:last-child) {
|
|
margin-right: 1.5rem;
|
|
}
|
|
|
|
[data-bs-toggle="collapse"] .fa:before {
|
|
content: "\f139";
|
|
}
|
|
|
|
[data-bs-toggle="collapse"].collapsed .fa:before {
|
|
content: "\f13a";
|
|
}
|
|
|
|
|
|
.btn {
|
|
font-weight: $font-weight-bold;
|
|
font-size: $font-size-base;
|
|
border-radius: $border-radius-sm;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 0.75rem;
|
|
font-size: $small-font-size;
|
|
}
|
|
|
|
.btn-lg {
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
.btn-tag {
|
|
border-radius: 3rem;
|
|
font-size: $small-font-size;
|
|
padding: 0.25rem 0.5rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.btn.disabled, .btn:disabled {
|
|
opacity: .5;
|
|
}
|
|
|
|
.btn-white {
|
|
color: $dark
|
|
}
|
|
|
|
.btn-success, .btn-danger {
|
|
color: $white;
|
|
}
|
|
|
|
.btn.login, .btn.register {
|
|
height: calc(1.5em + 0.75rem + 2px);
|
|
border-radius: .35rem;
|
|
}
|
|
|
|
.btn-group.btn-integration {
|
|
border-radius: $border-radius;
|
|
border: 0.1px solid $border-color;
|
|
}
|
|
|
|
.btn-integration {
|
|
font-weight: $font-weight-bold;
|
|
border-left: 0.1px solid $border-color;
|
|
}
|
|
|
|
.btn-integration .fab, .btn-integration .fas, .btn-integration .far {
|
|
font-size: $lead-font-size;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
|
|
.tooltip {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
.tooltip-inner {
|
|
background-color: $white;
|
|
color: $dark;
|
|
}
|
|
|
|
.tooltip.bs-tooltip-right .arrow:before {
|
|
border-right-color: $white !important;
|
|
}
|
|
|
|
.tooltip.bs-tooltip-left .arrow:before {
|
|
border-left-color: $white !important;
|
|
}
|
|
|
|
.tooltip.bs-tooltip-bottom .arrow:before {
|
|
border-bottom-color: $white !important;
|
|
}
|
|
|
|
.tooltip.bs-tooltip-top .arrow:before {
|
|
border-top-color: $white !important;
|
|
}
|
|
|
|
|
|
.alert {
|
|
padding: .5rem 1rem;
|
|
}
|
|
|
|
.alert-dismissible .close {
|
|
padding: 0.5rem 1.25rem;
|
|
bottom: 0;
|
|
}
|
|
|
|
.alert-dismissible .close .fa, .alert-dismissible .close .fas, .alert-dismissible .close .far, .alert-dismissible .close .fab {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.alert .fa, .alert .fas, .alert .far, .alert .fab {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
|
|
.toast {
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-bold;
|
|
color: $black;
|
|
border: 0;
|
|
display: none;
|
|
position: fixed;
|
|
bottom: 1.5rem;
|
|
margin: 0 auto;
|
|
left: 1.5rem;
|
|
right: 0;
|
|
width: 300px;
|
|
z-index: 1041;
|
|
background-color: $dark;
|
|
}
|
|
|
|
|
|
.navbar-light {
|
|
background-color: $gray-500!important;
|
|
box-shadow: 0 0.1px 2px rgba(0,0,0,.15),0 0 2px rgba(0,0,0,.1)!important;
|
|
}
|
|
|
|
.navbar-toggler-icon {
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.navbar-toggler-icon, .navbar-dark .navbar-toggler-icon, .navbar-light .navbar-toggler-icon {
|
|
background: transparent;
|
|
}
|
|
|
|
.navbar-toggler, .navbar-dark .navbar-toggler, .navbar-light .navbar-toggler {
|
|
border: none;
|
|
}
|
|
|
|
.navbar-expand-md .navbar-nav .nav-link {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
#page .navbar-light .navbar-nav .nav-link {
|
|
color: $dark;
|
|
}
|
|
|
|
#page .navbar-light .navbar-nav .nav-link:hover {
|
|
background-color: transparent;
|
|
color: $primary;
|
|
}
|
|
|
|
.navbar-brand, .navbar-light .navbar-brand {
|
|
color: $purple;
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
.navbar-dark .navbar-brand {
|
|
color: $white;
|
|
}
|
|
|
|
.navbar .text-white {
|
|
color: $white;
|
|
}
|
|
|
|
.tab-bar {
|
|
box-shadow: inset 0 -0.1px 0 $border-color;
|
|
border-top-left-radius: $border-radius;
|
|
border-top-right-radius: $border-radius;
|
|
padding: .75rem 1rem 0 1rem;
|
|
background-color: $light;
|
|
z-index: 5;
|
|
}
|
|
|
|
|
|
.navbar-nav .nav-link {
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
.navbar-expand-md .navbar-nav .nav-link {
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
.navbar-light .navbar-nav .nav-link {
|
|
color: $black;
|
|
}
|
|
|
|
.navbar-light .navbar-nav .nav-link:hover {
|
|
background-color: $light;
|
|
border-radius: $border-radius
|
|
}
|
|
|
|
.navbar-light .navbar-nav .nav-link:focus {
|
|
background-color: rgba(0, 0, 0, 0.15);
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
.navbar-light .navbar-nav .nav-link:active .fa, .navbar-light .navbar-nav .nav-link:active .fas, .navbar-light .navbar-nav .nav-link:active .far, .navbar-light .navbar-nav .nav-link:active .fab {
|
|
color: $primary;
|
|
text-align: center;
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
.navbar-light .navbar-nav .nav-link .fa, .navbar-light .navbar-nav .nav-link .fas, .navbar-light .navbar-nav .nav-link .far, .navbar-light .navbar-nav .nav-link .fab {
|
|
color: $white;
|
|
text-align: center;
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
.navbar-light .navbar-nav .btn-primary.nav-link {
|
|
color: $white;
|
|
}
|
|
|
|
.navbar-light .navbar-nav .btn-outline-primary.nav-link {
|
|
color: $primary;
|
|
}
|
|
|
|
.navbar-light .navbar-nav .btn-outline-primary.nav-link:hover {
|
|
color: $white;
|
|
}
|
|
|
|
.navbar-dark .navbar-nav .nav-link {
|
|
color: $white;
|
|
}
|
|
|
|
.navbar-dark .navbar-nav .nav-link:hover {
|
|
background-color: rgba(0, 0, 0, 0.15);
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
.navbar-dark .navbar-nav .show>.nav-link:focus, .navbar-dark .navbar-nav .show>.nav-link:active, .navbar-dark .navbar-nav .show>.nav-link:hover {
|
|
background-color: $light;
|
|
border-radius: $border-radius
|
|
}
|
|
|
|
.navbar-dark .navbar-nav .nav-link .fa, .navbar-dark .navbar-nav .nav-link .fas, .navbar-dark .navbar-nav .nav-link .far, .navbar-dark .navbar-nav .nav-link .fab {
|
|
color: $white;
|
|
text-align: center;
|
|
font-size: $font-size-lg;
|
|
}
|
|
|
|
.navbar-dark .navbar-nav .show>.nav-link:focus .fa, .navbar-dark .navbar-nav .show>.nav-link:focus .fas, .navbar-dark .navbar-nav .show>.nav-link:focus .far, .navbar-dark .navbar-nav .show>.nav-link:focus .fab {
|
|
color: $black;
|
|
}
|
|
|
|
.navbar-dark .navbar-nav .nav-link:hover:active .fa, .navbar-dark .navbar-nav .nav-link:hover:active .fas, .navbar-dark .navbar-nav .nav-link:hover:active .far, .navbar-dark .navbar-nav .nav-link:hover:active .fab {
|
|
color: $white;
|
|
}
|
|
|
|
.badge-count {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background-color: #E53E3E;
|
|
position: absolute;
|
|
color: #cfcfcf;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
top: -4px;
|
|
left: 8px;
|
|
padding: 0 2px 2px 2px;
|
|
}
|
|
|
|
.post-nav .nav-link {
|
|
color: $muted;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-bold;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.settings-nav .nav-link {
|
|
color: $gray-200;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-normal;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.post-nav > .nav-item > .nav-link.active {
|
|
color: $primary;
|
|
}
|
|
|
|
.settings-nav > .nav-item > .nav-link.active {
|
|
color: $primary;
|
|
box-shadow: inset 0 -2px 0 $primary;
|
|
}
|
|
|
|
.post-nav .nav-link:hover, .post-nav .nav-link:focus, .settings-nav .nav-link:hover, .settings-nav .nav-link:focus {
|
|
color: $primary;
|
|
}
|
|
|
|
.post-nav .nav-link:hover .fa , .post-nav .nav-link:focus .fa, .post-nav .nav-link:hover .fas, .post-nav .nav-link:focus .fas, .post-nav .nav-link:hover .far, .post-nav .nav-link:focus .far, .post-nav .nav-link:hover .fab , .post-nav .nav-link:focus .fab {
|
|
color: $primary;
|
|
}
|
|
|
|
.post-nav > .nav-item > .nav-link.active .fa, .post-nav > .nav-item > .nav-link.active .fas, .post-nav > .nav-item > .nav-link.active .far, .post-nav > .nav-item > .nav-link.active .fab {
|
|
color: $primary;
|
|
}
|
|
|
|
.post-nav .fa, .post-nav .fas, .post-nav .far, .post-nav .fab, .post-nav .fal {
|
|
font-size: $small-font-size;
|
|
margin-right: .5rem;
|
|
color: $muted;
|
|
}
|
|
|
|
|
|
.settings-nav > .nav-item > .nav-link.active {
|
|
color: $primary;
|
|
box-shadow: inset 0 -2px 0 $primary;
|
|
}
|
|
|
|
.settings-nav > .nav-item > .nav-link.active .fa, .settings-nav > .nav-item > .nav-link.active .fas, .settings-nav > .nav-item > .nav-link.active .far, .settings-nav > .nav-item > .nav-link.active .fab {
|
|
color: $primary;
|
|
}
|
|
|
|
.settings-nav .fa, .settings-nav .fas, .settings-nav .far, .settings-nav .fab, .settings-nav .fal {
|
|
font-size: $small-font-size;
|
|
margin-right: .5rem;
|
|
color: $muted;
|
|
}
|
|
|
|
|
|
.color-picker input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
label.color-radio {
|
|
display: inline-block;
|
|
width: 25px;
|
|
height: 25px;
|
|
margin: 0.5rem 1rem 0.5rem 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
label.color-radio span {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 100%;
|
|
text-align: center;
|
|
line-height: 2.25;
|
|
}
|
|
|
|
|
|
#page .nav-pills .nav-link {
|
|
border-radius: 0;
|
|
font-size: 1rem;
|
|
font-weight: $font-weight-bold;
|
|
color: $muted;
|
|
border-bottom: 2px solid transparent;
|
|
padding: 1rem 1.5rem;
|
|
}
|
|
|
|
#page .nav-pills .nav-link:hover {
|
|
color: $primary;
|
|
}
|
|
|
|
#page .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
|
|
color: $primary;
|
|
background-color: transparent;
|
|
transition: ease 0.25s;
|
|
border-bottom: 2px solid $primary;
|
|
}
|
|
|
|
#page .bg-light .nav-pills .nav-link.active, .bg-light .nav-pills .show > .nav-link {
|
|
color: $primary;
|
|
background-color: transparent;
|
|
transition: ease 0.25s;
|
|
border-bottom: 2px solid $primary;
|
|
}
|
|
|
|
|
|
.form-inline.search .form-control:hover, .form-inline.search .form-control:active, .form-inline.search .form-control:focus {
|
|
border-color: $purple;
|
|
}
|
|
|
|
.form-inline.search .form-control:active, .form-inline.search .form-control:focus {
|
|
background-color: $gray-900;
|
|
color: $black;
|
|
}
|
|
|
|
.form-inline.search .form-control,
|
|
.form-control[readonly] {
|
|
background-color: $gray-800;
|
|
font-size: $font-size-base;
|
|
color: $white;
|
|
}
|
|
|
|
.form-inline.search .input-group-append .input-group-text .fa.fa-search, .form-inline.search .input-group-append-focus .input-group-text .fa.fa-search {
|
|
color: $black;
|
|
}
|
|
|
|
.form-inline.search .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
|
color: $black;
|
|
}
|
|
|
|
.form-inline.search .form-control::-ms-input-placeholder { /* Internet Explorer 10-11 */
|
|
color: $black;
|
|
}
|
|
|
|
.form-inline.search .form-control::-ms-input-placeholder { /* Microsoft Edge */
|
|
color: $black;
|
|
}
|
|
|
|
.form-inline.search .form-control:active::placeholder, .form-inline.search .form-control:focus::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
|
color: $black;
|
|
}
|
|
|
|
.form-inline.search .form-control:active::-ms-input-placeholder, .form-inline.search .form-control:focus::-ms-input-placeholder { /* Internet Explorer 10-11 */
|
|
color: $black;
|
|
}
|
|
|
|
.form-inline.search .form-control:active::-ms-input-placeholder, .form-inline.search .form-control:focus::-ms-input-placeholder{ /* Microsoft Edge */
|
|
color: $black;
|
|
}
|
|
|
|
|
|
.bg-svg {
|
|
background-color: $dark;
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
}
|
|
|
|
|
|
.form-control {
|
|
color: $muted;
|
|
border-color: $muted;
|
|
border-width: 2px;
|
|
background: $gray-300;
|
|
transition: none;
|
|
}
|
|
|
|
.form-control:disabled, .form-control[readonly] {
|
|
background-color: $dark;
|
|
}
|
|
|
|
.home-submission .form-control, .home-submission .input-group-text {
|
|
border-color: $border-color;
|
|
background-color: $light;
|
|
}
|
|
|
|
.home-submission .input-group-prepend .fa, .home-submission .input-group-prepend .fas, .home-submission .input-group-append .fa, .home-submission .input-group-append .fas {
|
|
color: $gray-300;
|
|
}
|
|
|
|
.input-group-append-focus {
|
|
margin-left: -0.1px;
|
|
}
|
|
|
|
.form-control:hover {
|
|
color: $black;
|
|
background-color: $gray-600;
|
|
outline: 0;
|
|
border-color: $primary;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.form-control:focus, .form-control:active {
|
|
color: $black;
|
|
background-color: $gray-900;
|
|
outline: 0;
|
|
border-color: $primary;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
|
color: $black;
|
|
}
|
|
|
|
.form-control::-ms-input-placeholder { /* Internet Explorer 10-11 */
|
|
color: $black;
|
|
}
|
|
|
|
.form-control::-ms-input-placeholder { /* Microsoft Edge */
|
|
color: $black;
|
|
}
|
|
|
|
.form-check-label {
|
|
margin-bottom: 0;
|
|
text-transform: none;
|
|
font-weight: $font-weight-normal;
|
|
font-size: $font-size-base;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
label {
|
|
text-transform: uppercase;
|
|
font-weight: $font-weight-bold;
|
|
font-size: 12px;
|
|
letter-spacing: 0.025rem;
|
|
color: $black;
|
|
}
|
|
|
|
#login label {
|
|
color: $black;
|
|
}
|
|
|
|
label.terms {
|
|
font-weight: normal;
|
|
text-transform: none;
|
|
font-size: 13px;
|
|
color: $black;
|
|
vertical-align: middle;
|
|
padding: .1rem 0;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
padding: 0.5rem;
|
|
color: $white;
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
.user-profile > .dropdown-toggle::after {
|
|
display:none;
|
|
}
|
|
|
|
.dropdown-item {
|
|
padding: 0.5rem 1rem;
|
|
border-radius: $border-radius;
|
|
color: $black;
|
|
}
|
|
|
|
.dropdown .dropdown-menu .dropdown-meta {
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active {
|
|
color: $black;
|
|
text-decoration: none;
|
|
background-color: $gray-300;
|
|
}
|
|
|
|
.dropdown-item:hover .fas, .dropdown-item:focus .fas, .dropdown-item.active .fas, .dropdown-item:hover .far, .dropdown-item:focus .far, .dropdown-item.active .far
|
|
.dropdown-item:hover .fa, .dropdown-item:focus .fa, .dropdown-item.active .fa {
|
|
color: $black;
|
|
}
|
|
|
|
|
|
small, .small {
|
|
font-size: $small-font-size;
|
|
}
|
|
|
|
|
|
th {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
|
|
.fa-rotate-45 {
|
|
-webkit-transform: rotate(45deg);
|
|
-moz-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
-o-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.fa-rotate--45 {
|
|
-webkit-transform: rotate(-45deg);
|
|
-moz-transform: rotate(-45deg);
|
|
-ms-transform: rotate(-45deg);
|
|
-o-transform: rotate(-45deg);
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.icon::before {
|
|
display: inline-block;
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.fa-icon-circle {
|
|
font-size: $font-size-lg;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
padding: 0 0.5rem;
|
|
}
|
|
|
|
.fa-width-rem {
|
|
width: 1.25rem;
|
|
}
|
|
|
|
.format .fa-bold:hover,
|
|
.format .fa-italic:hover,
|
|
.format .fa-quote-right:hover,
|
|
.format .fa-link:hover,
|
|
.format .fa-image:hover {
|
|
color: $black;
|
|
}
|
|
|
|
|
|
.voting {
|
|
position: relative;
|
|
z-index: 2;
|
|
font-size: $small-font-size;
|
|
font-weight: $font-weight-bold;
|
|
text-align: center;
|
|
word-break: keep-all;
|
|
min-width: 40px;
|
|
}
|
|
|
|
#thread .voting {
|
|
min-width: 10px;
|
|
margin-right: 10px;
|
|
overflow-wrap: normal;
|
|
}
|
|
|
|
#frontpage .voting, #search .voting, #userpage .voting {
|
|
margin: auto 0;
|
|
}
|
|
|
|
/*
|
|
|
|
#frontpage.toggle-card-view .voting, #search.toggle-card-view .voting, #userpage.toggle-card-view .voting {
|
|
margin: 0;
|
|
}
|
|
|
|
*/
|
|
|
|
/* .voting div:focus {
|
|
outline: 0;
|
|
} */
|
|
|
|
.active.arrow-up::before {
|
|
color: $upvote;
|
|
}
|
|
|
|
.arrow-up::before {
|
|
cursor: pointer;
|
|
font-size: 1.3rem;
|
|
color: $gray-200;
|
|
font-family: "Font Awesome 5 Pro";
|
|
font-weight: 900;
|
|
content: "\f357";
|
|
|
|
}
|
|
|
|
.arrow-up:hover::before {
|
|
color: $upvote;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.active.arrow-down::before {
|
|
color: $downvote;
|
|
}
|
|
|
|
.arrow-down::before {
|
|
cursor: pointer;
|
|
font-size: 1.3rem;
|
|
color: $gray-200;
|
|
font-family: "Font Awesome 5 Pro";
|
|
font-weight: 900;
|
|
content: "\f354";
|
|
}
|
|
|
|
.arrow-down:hover::before {
|
|
color: $downvote;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* .upvoted .arrow-up::before {
|
|
color: $upvote;
|
|
}
|
|
|
|
.upvoted .arrow-up:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.downvoted .arrow-down::before {
|
|
color: $downvote;
|
|
}
|
|
|
|
.downvoted .arrow-down:hover::before {
|
|
opacity: 1;
|
|
} */
|
|
|
|
.comment-actions .arrow-up {
|
|
top: 0;
|
|
}
|
|
|
|
.comment-actions .arrow-down {
|
|
bottom: 0;
|
|
}
|
|
|
|
.upvoted .arrow-mobile-up {
|
|
color: $upvote!important;
|
|
}
|
|
|
|
.downvoted .arrow-mobile-down {
|
|
color: $downvote!important;
|
|
}
|
|
|
|
.comment-actions .score {
|
|
color: $muted;
|
|
}
|
|
|
|
.score {
|
|
color: $black;
|
|
}
|
|
|
|
.score-up {
|
|
color: $upvote !important;
|
|
}
|
|
|
|
.score-down {
|
|
color: $downvote !important;
|
|
}
|
|
|
|
.banned .score {
|
|
color: $gray-300 !important;
|
|
}
|
|
|
|
|
|
a .link-arrow {
|
|
position: relative;
|
|
right: 0;
|
|
transition: right ease 0.25s;
|
|
margin-left: .5rem;
|
|
font-size: $small-font-size;
|
|
}
|
|
|
|
a:hover .link-arrow {
|
|
right: -.5rem;
|
|
color: $dark;
|
|
}
|
|
|
|
|
|
.box-shadow-bottom {
|
|
box-shadow: inset 0 -0.1px 0 $border-color;
|
|
}
|
|
|
|
|
|
.border-1 {
|
|
border-width: 0.1px;
|
|
border-style: solid;
|
|
}
|
|
|
|
.border-2 {
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
}
|
|
|
|
.border-3 {
|
|
border-width: 3px;
|
|
border-style: solid;
|
|
}
|
|
|
|
.border-4 {
|
|
border-width: 4px;
|
|
border-style: solid;
|
|
}
|
|
|
|
.border-5 {
|
|
border-width: 5px;
|
|
border-style: solid;
|
|
}
|
|
|
|
|
|
.opacity-25 {
|
|
opacity: .25;
|
|
}
|
|
|
|
.opacity-50 {
|
|
opacity: .5;
|
|
}
|
|
|
|
.opacity-80 {
|
|
opacity: .8;
|
|
}
|
|
|
|
|
|
.pseudo-submit-form .card-header {
|
|
background-color: $gray-600!important;
|
|
}
|
|
|
|
#frontpage .pseudo-submit-form.card, #search .search-results.card {
|
|
background-color: $gray-600;
|
|
border-radius: $border-radius;
|
|
border: none;
|
|
}
|
|
|
|
#frontpage .pseudo-submit-form.card .card-body, #search .search-results.card .card-body {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
#frontpage .pseudo-submit-form.card .card-body .form-control {
|
|
background-color: $light;
|
|
}
|
|
|
|
#frontpage .pseudo-submit-form.card .card-body .form-control:hover, #frontpage .pseudo-submit-form.card .card-body .form-control:active, #frontpage .pseudo-submit-form.card .card-body .form-control:focus {
|
|
background-color: $light;
|
|
}
|
|
|
|
.post-filter {
|
|
display: inline-block;
|
|
font-size: $small-font-size;
|
|
font-weight: $font-weight-bold;
|
|
color: $muted;
|
|
}
|
|
|
|
.post-filter .fa, .post-filter .fas {
|
|
font-size: $extra-small-font-size;
|
|
margin-right: .5rem;
|
|
opacity: .9;
|
|
color: $primary;
|
|
width: 1rem;
|
|
}
|
|
|
|
|
|
.filter-list .filter-item {
|
|
color: $muted;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.filter-list .filter-link {
|
|
display: block;
|
|
padding: 0.5rem 1rem;
|
|
color: $muted;
|
|
font-size: $small-font-size;
|
|
font-weight: $font-weight-bold;
|
|
margin-bottom: 0.25rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.filter-list .filter-link:hover, .filter-list .filter-link:focus {
|
|
color: $black;
|
|
}
|
|
|
|
.filter-list > .filter-item > .filter-link.active {
|
|
color: $black;
|
|
background-color: $light;
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
.filter-list .filter-item .fa, .filter-list .filter-item .fas, .filter-list .filter-item .far, .filter-list .filter-item .fab, .filter-list .filter-item .fal {
|
|
font-size: $small-font-size;
|
|
margin-right: 0.5rem;
|
|
color: $gray-600;
|
|
text-align: center;
|
|
}
|
|
|
|
.filter-list .filter-link:hover .fa , .filter-list .filter-link:focus .fa, .filter-list .filter-link:hover .fas, .filter-list .filter-link:focus .fas, .filter-list .filter-link:hover .far, .filter-list .filter-link:focus .far, .filter-list .filter-link:hover .fab , .filter-list .filter-link:focus .fab {
|
|
color: $primary;
|
|
}
|
|
|
|
.filter-list > .filter-item > .filter-link.active .fa, .filter-list > .filter-item > .filter-link.active .fas, .filter-list > .filter-item > .filter-link.active .far, .filter-list > .filter-item > .filter-link.active .fab {
|
|
color: $primary;
|
|
}
|
|
|
|
.filter-link:hover, .filter-link:focus {
|
|
color: $primary;
|
|
}
|
|
|
|
.dashboard-list .dashboard-item {
|
|
color: $muted;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.dashboard-list .dashboard-link {
|
|
display: block;
|
|
padding: 0.5rem 0;
|
|
color: $muted;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-bold;
|
|
margin-bottom: 0.25rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.dashboard-list .dashboard-link:hover, .dashboard-list .dashboard-link:focus {
|
|
color: $black;
|
|
}
|
|
|
|
.dashboard-list > .dashboard-item > .dashboard-link.active {
|
|
color: $primary;
|
|
}
|
|
|
|
.dashboard-list .dashboard-item .fa, .dashboard-list .dashboard-item .fas, .dashboard-list .dashboard-item .far, .dashboard-list .dashboard-item .fab, .dashboard-list .dashboard-item .fal {
|
|
font-size: $small-font-size;
|
|
margin-right: 0.5rem;
|
|
color: $gray-600;
|
|
text-align: center;
|
|
}
|
|
|
|
.dashboard-list .dashboard-link:hover .fa , .dashboard-list .dashboard-link:focus .fa, .dashboard-list .dashboard-link:hover .fas, .dashboard-list .dashboard-link:focus .fas, .dashboard-list .dashboard-link:hover .far, .dashboard-list .dashboard-link:focus .far, .dashboard-list .dashboard-link:hover .fab , .dashboard-list .dashboard-link:focus .fab {
|
|
color: $primary;
|
|
}
|
|
|
|
.dashboard-list > .dashboard-item > .dashboard-link.active .fa, .dashboard-list > .dashboard-item > .dashboard-link.active .fas, .dashboard-list > .dashboard-item > .dashboard-link.active .far, .dashboard-list > .dashboard-item > .dashboard-link.active .fab {
|
|
color: $primary;
|
|
}
|
|
|
|
.dashboard-link:hover, .dashboard-link:focus {
|
|
color: $primary;
|
|
}
|
|
|
|
.list-group-item-action {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
a.bg-dark:hover, a.bg-dark:focus, button.bg-dark:hover, button.bg-dark:focus {
|
|
background-color: transparent!important;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.user-count {
|
|
margin-bottom: .25rem;
|
|
}
|
|
|
|
.online-count {
|
|
margin-bottom: .25rem;
|
|
}
|
|
|
|
|
|
.progress {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
|
|
.user-name {
|
|
color: inherit;
|
|
}
|
|
|
|
.banner-pic-135 {
|
|
object-fit: cover;
|
|
height: 135px;
|
|
max-width: 572px;
|
|
width: 572px;
|
|
}
|
|
|
|
.profile-pic.transition-square {
|
|
transition: border-radius 0.25s;
|
|
}
|
|
|
|
.profile-pic.profile-pic.transition-square:hover {
|
|
border-radius: .35rem;
|
|
}
|
|
|
|
.profile-pic {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
margin: auto;
|
|
text-align: center;
|
|
object-fit: cover;
|
|
color: $white;
|
|
background-color: #1f2023;
|
|
}
|
|
|
|
.profile-pic .letter {
|
|
line-height: 3.6rem;
|
|
font-size: $font-size-lg;
|
|
font-weight: $font-weight-bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.profile-pic-30 .letter {
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.profile-pic-35 .letter {
|
|
line-height: 2;
|
|
}
|
|
|
|
.profile-pic-75 .letter {
|
|
line-height: 2.75;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.navbar .navbar-nav .profile-pic {
|
|
display: inline-block;
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
.navbar .navbar-nav .profile-pic .letter {
|
|
line-height: 2rem;
|
|
font-size: $small-font-size;
|
|
}
|
|
|
|
.profile-pic-20 {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
object-fit: cover;
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
.profile-pic-25 {
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
object-fit: cover;
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
.profile-pic-28 {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
object-fit: cover;
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
.profile-pic-30 {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
object-fit: cover;
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
.profile-pic-35 {
|
|
width: 35px;
|
|
height: 35px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
object-fit: cover;
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
.profile-pic-40 {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
object-fit: cover;
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
.profile-pic-50 {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
object-fit: cover;
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
.profile-pic-65 {
|
|
width: 65px;
|
|
height: 65px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
object-fit: cover;
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
.profile-pic-75 {
|
|
width: 75px;
|
|
height: 75px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
object-fit: cover;
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
.profile-pic-100 {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
object-fit: cover;
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
|
|
.profile-pic-overlap {
|
|
margin-left: -1rem;
|
|
}
|
|
|
|
.profile-pic-overlap:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
|
|
/*
|
|
|
|
#frontpage.toggle-card-view .tab-bar, #userpage.toggle-card-view .tab-bar, #search.toggle-card-view .tab-bar {
|
|
border-radius: 0;
|
|
}
|
|
|
|
#frontpage.toggle-card-view .posts .card, #userpage.toggle-card-view .posts .card, #search.toggle-card-view .posts .card {
|
|
border: 0.1px solid $border-color;
|
|
border-radius: $border-radius;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
#frontpage.toggle-card-view .posts .card:last-of-type, #userpage.toggle-card-view .posts .card:last-of-type, #search.toggle-card-view .posts .card:last-of-type {
|
|
border-bottom-left-radius: $border-radius;
|
|
border-bottom-right-radius: $border-radius;
|
|
border: 0.1px solid $border-color;
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
#frontpage.toggle-card-view .posts .card:first-of-type, #userpage.toggle-card-view .posts .card:first-of-type, #search.toggle-card-view .posts .card:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#frontpage.toggle-card-view .posts .card .post-img, #userpage.toggle-card-view .posts .card .post-img, #search.toggle-card-view .posts .card .post-img {
|
|
display: none;
|
|
}
|
|
|
|
#frontpage.toggle-card-view .posts .card .post-img-lg, #userpage.toggle-card-view .posts .card .post-img-lg, #search.toggle-card-view .posts .card .post-img-lg {
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
#frontpage.toggle-card-view .posts .card .post-img-lg img, #userpage.toggle-card-view .posts .card .post-img-lg img, #search.toggle-card-view .posts .card .post-img-lg img {
|
|
max-width: 55%;
|
|
height: auto;
|
|
}
|
|
|
|
#frontpage.toggle-card-view .posts .card .embed-lg, #userpage.toggle-card-view .posts .card .embed-lg, #search.toggle-card-view .posts .card .embed-lg {
|
|
display: flex;
|
|
z-index: 2;
|
|
}
|
|
|
|
#frontpage.toggle-card-view .posts .card .post-preview-lg, #userpage.toggle-card-view .posts .card .post-preview-lg, #search.toggle-card-view .posts .card .post-preview-lg {
|
|
display: block;
|
|
}
|
|
|
|
#frontpage.toggle-card-view .posts .card .post-preview-lg .post-body, #userpage.toggle-card-view .posts .card .post-preview-lg .post-body, #search.toggle-card-view .posts .card .post-preview-lg .post-body {
|
|
-webkit-mask-image: linear-gradient(180deg,#000 40%,transparent);
|
|
mask-image: linear-gradient(180deg,#000 40%,transparent);
|
|
overflow: hidden;
|
|
}
|
|
|
|
*/
|
|
|
|
.toggle-view .nav-link {
|
|
color: $gray;
|
|
font-size: $small-font-size;
|
|
font-weight: $font-weight-bold;
|
|
padding: 0;
|
|
line-height: 1;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.toggle-view .fa, .toggle-view .fas, .toggle-view .far, .toggle-view .fab, .toggle-view .fal {
|
|
font-size: $small-font-size;
|
|
margin-right: .5rem;
|
|
color: $gray-600;
|
|
}
|
|
|
|
.toggle-view .nav-link:hover, .toggle-view .nav-link:focus {
|
|
color: $primary;
|
|
}
|
|
|
|
.toggle-view > .nav-item > .nav-link.active .fa, .toggle-view > .nav-item > .nav-link.active .fas, .toggle-view > .nav-item > .nav-link.active .far, .toggle-view > .nav-item > .nav-link.active .fab {
|
|
color: $primary;
|
|
}
|
|
|
|
.toggle-view .nav-link:hover .fa, .toggle-view .nav-link:focus .fa, .toggle-view .nav-link:hover .fas, .toggle-view .nav-link:focus .fas, .toggle-view .nav-link:hover .far, .toggle-view .nav-link:focus .far, .toggle-view .nav-link:hover .fab , .toggle-view .nav-link:focus .fab {
|
|
color: $primary;
|
|
}
|
|
|
|
.toggle-card-view .posts {
|
|
background: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
border: none;
|
|
}
|
|
|
|
|
|
.card-header:first-child {
|
|
border-radius: $border-radius $border-radius 0 0;
|
|
}
|
|
|
|
.card-header {
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-bold;
|
|
color: $black;
|
|
padding: 0.5rem 1rem;
|
|
border-bottom: 0.1px solid $input-border-color;
|
|
}
|
|
|
|
.card {
|
|
background-color: $gray-900;
|
|
}
|
|
|
|
#thread .card {
|
|
background-color: $gray-700;
|
|
}
|
|
|
|
#frontpage .posts .card:first-of-type, #userpage .posts .card:first-of-type, #search .posts .card:first-of-type {
|
|
border-top-left-radius: $border-radius;
|
|
border-top-right-radius: $border-radius;
|
|
}
|
|
|
|
#frontpage .posts .card:nth-last-of-type(2), #userpage .posts .card:nth-last-of-type(2), #search .posts .card:nth-last-of-type(2) {
|
|
border-bottom-left-radius: $border-radius;
|
|
border-bottom-right-radius: $border-radius;
|
|
border-bottom: 0.1px solid $border-color;
|
|
}
|
|
|
|
#frontpage .posts .card, #userpage .posts .card, #search .posts .card {
|
|
border-width: 0.1px 0.1px 0 0.1px;
|
|
border-color: $border-color;
|
|
border-style: solid;
|
|
border-radius: 0;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
#frontpage .posts .card:hover, #userpage .posts .card:hover, #search .posts .card:hover {
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
.post-title {
|
|
font-size: 16px;
|
|
font-weight: $font-weight-bold;
|
|
word-break: break-word;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.post-title a {
|
|
color: $black;
|
|
}
|
|
|
|
.post-title a:hover, .post-title a:active, .post-title a:focus {
|
|
text-decoration: none;
|
|
color: $primary;
|
|
}
|
|
|
|
#frontpage .post-title a {
|
|
color: $black;
|
|
}
|
|
|
|
#frontpage .post-title a:hover, #frontpage .post-title a:active, #frontpage .post-title a:focus {
|
|
text-decoration: none;
|
|
color: $black;
|
|
}
|
|
|
|
.stretched-link a:hover {
|
|
color: $purple
|
|
}
|
|
|
|
.post-meta {
|
|
position: relative;
|
|
z-index: 2;
|
|
color: $muted;
|
|
font-size: $small-font-size;
|
|
width: fit-content;
|
|
}
|
|
|
|
#frontpage .posts .card .card-footer, #userpage .posts .card .card-footer, #thread .card .card-footer, #search .posts .card .card-footer {
|
|
border: 0;
|
|
background-color: transparent;
|
|
padding: 0;
|
|
}
|
|
|
|
.post-body {
|
|
word-break: break-word;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.modal-backdrop.show {
|
|
opacity: 1;
|
|
background-color:rgba(30,30,30,0.9);
|
|
}
|
|
|
|
.modal-backdrop {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.modal-header {
|
|
border-bottom: none;
|
|
background-color: $gray-400;
|
|
border-top-left-radius: $border-radius;
|
|
border-top-right-radius: $border-radius;
|
|
padding: 0.5rem 1rem;
|
|
box-shadow: $box-shadow;
|
|
}
|
|
|
|
.modal-header .close {
|
|
padding: 1.25rem 1rem 1.25rem 0.5rem;
|
|
}
|
|
|
|
.modal-content {
|
|
border: none;
|
|
background-color: $gray-400;
|
|
border-radius: $border-radius;
|
|
box-shadow: $box-shadow;
|
|
}
|
|
|
|
.modal-footer {
|
|
border: none;
|
|
background-color: $gray-400;
|
|
border-bottom-right-radius: $border-radius;
|
|
border-bottom-left-radius: $border-radius;
|
|
background-image: linear-gradient(180deg, #ffffff00 25%, $gray-400 100%)!important;
|
|
}
|
|
|
|
.modal .post-actions .list-group-item {
|
|
border: none;
|
|
border-radius: $border-radius;
|
|
background-color: $gray-400;
|
|
}
|
|
|
|
.modal .post-actions .list-group-item:focus, .modal .post-actions .list-group-item:hover {
|
|
background-color: $gray-300;
|
|
}
|
|
|
|
.modal .post-actions a {
|
|
color: $black;
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
.modal .post-actions .fa, .modal .post-actions .fas, .modal .post-actions .far {
|
|
width: 1.25rem;
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
.post-actions {
|
|
position: relative;
|
|
color: $muted;
|
|
font-weight: $font-weight-bold;
|
|
font-size: $small-font-size;
|
|
z-index: 3;
|
|
}
|
|
|
|
.post-actions .fa, .post-actions .fas, .post-actions .far {
|
|
font-size: $small-font-size;
|
|
margin-right: .5rem;
|
|
width: 1rem;
|
|
}
|
|
|
|
.post-actions .voting .fa, .post-actions .voting .fas, .post-actions .voting .far {
|
|
color: inherit;
|
|
}
|
|
|
|
.post-actions .fa-ellipsis-v {
|
|
font-size: $font-size-lg;
|
|
}
|
|
|
|
.post-actions .dropdown-item:active .fa, .post-actions .dropdown-item:active .fas {
|
|
color: $black;
|
|
}
|
|
|
|
.post-actions .dropdown-item:hover .fa, .post-actions .dropdown-item:hover .fas {
|
|
color: $gray;
|
|
}
|
|
|
|
.post-actions a:hover .fa, .post-actions a:hover .fas {
|
|
color: $black;
|
|
}
|
|
|
|
.post-actions:hover, .post-actions:focus {
|
|
z-index: 4;
|
|
}
|
|
|
|
.post-actions .copy-link:hover {
|
|
color: $black;
|
|
}
|
|
|
|
.post-actions .fas.fa-ellipsis-h, .post-actions .far.fa-ellipsis-h {
|
|
font-size: $font-size-lg;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.post-actions .removeDropdownItem.dropdown-item:hover, .post-actions .removeDropdownItem.dropdown-item:focus, .post-actions .removeDropdownItem.dropdown-item.active {
|
|
color: $white;
|
|
text-decoration: none;
|
|
background-color: $warning;
|
|
}
|
|
|
|
.post-actions .removeDropdownItem.dropdown-item:hover .fas, .post-actions .removeDropdownItem.dropdown-item:focus .fas, .post-actions .removeDropdownItem.dropdown-item.active .fas, .post-actions .removeDropdownItem.dropdown-item:hover .far, .post-actions .removeDropdownItem.dropdown-item:focus .far, .post-actions .removeDropdownItem.dropdown-item.active .far
|
|
.post-actions .removeDropdownItem.dropdown-item:hover .fa, .post-actions .removeDropdownItem.dropdown-item:focus .fa, .post-actions .removeDropdownItem.dropdown-item.active .fa {
|
|
color: $white;
|
|
}
|
|
|
|
.post-actions .approveDropdownItem.dropdown-item:hover, .post-actions .approveDropdownItem.dropdown-item:focus, .post-actions .approveDropdownItem.dropdown-item.active {
|
|
color: $white;
|
|
text-decoration: none;
|
|
background-color: $success;
|
|
}
|
|
|
|
.post-actions .approveDropdownItem.dropdown-item:hover .fas, .post-actions .approveDropdownItem.dropdown-item:focus .fas, .post-actions .approveDropdownItem.dropdown-item.active .fas, .post-actions .approveDropdownItem.dropdown-item:hover .far, .post-actions .approveDropdownItem.dropdown-item:focus .far, .post-actions .approveDropdownItem.dropdown-item.active .far
|
|
.post-actions .approveDropdownItem.dropdown-item:hover .fa, .post-actions .approveDropdownItem.dropdown-item:focus .fa, .post-actions .approveDropdownItem.dropdown-item.active .fa {
|
|
color: $white;
|
|
}
|
|
|
|
.post-actions .list-inline {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.post-actions .list-inline .list-inline-item {
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.post-actions .list-inline .list-inline-item:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.close .far, .close .fab, .close .fal, .close .fas {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.modal.modal.modal-sm-bottom .modal-dialog {
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1030;
|
|
}
|
|
|
|
.modal.modal-sm-bottom .modal-content {
|
|
position: absolute;
|
|
bottom: 0;
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.modal.fade.modal-sm-bottom .modal-dialog {
|
|
transform: translate3d(0, 100vh, 0);
|
|
}
|
|
|
|
.modal.show.modal-sm-bottom .modal-dialog {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.modal.modal-sm-bottom .modal-header {
|
|
border-top-right-radius: 1rem;
|
|
border-top-left-radius: 1rem;
|
|
}
|
|
}
|
|
|
|
|
|
.dropdown-actions {
|
|
position: relative;
|
|
color: $muted;
|
|
font-weight: $font-weight-bold;
|
|
font-size: $small-font-size;
|
|
z-index: 3;
|
|
}
|
|
|
|
.dropdown-actions .fa, .dropdown-actions .fas, .dropdown-actions .far {
|
|
font-size: $small-font-size;
|
|
color: $muted;
|
|
margin-right: .5rem;
|
|
width: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.dropdown-actions .voting .fa, .dropdown-actions .voting .fas, .dropdown-actions .voting .far {
|
|
color: inherit;
|
|
}
|
|
|
|
.dropdown-actions .fa-ellipsis-v {
|
|
font-size: $font-size-lg;
|
|
}
|
|
|
|
.dropdown-actions .dropdown-item:active .fa, .dropdown-actions .dropdown-item:active .fas {
|
|
color: $black;
|
|
}
|
|
|
|
.dropdown-actions .dropdown-item:hover .fa, .dropdown-actions .dropdown-item:hover .fas {
|
|
color: $black;
|
|
}
|
|
|
|
.dropdown-actions a:hover .fa, .dropdown-actions a:hover .fas {
|
|
color: $black;
|
|
}
|
|
|
|
.dropdown-actions:hover, .dropdown-actions:focus {
|
|
z-index: 4;
|
|
}
|
|
|
|
.dropdown-actions .copy-link:hover {
|
|
color: $black;
|
|
}
|
|
|
|
.dropdown-actions .fas.fa-ellipsis-h, .dropdown-actions .far.fa-ellipsis-h {
|
|
font-size: $font-size-lg;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.dropdown-actions .removeDropdownItem.dropdown-item:hover, .dropdown-actions .removeDropdownItem.dropdown-item:focus, .dropdown-actions .removeDropdownItem.dropdown-item.active {
|
|
color: $white;
|
|
text-decoration: none;
|
|
background-color: $warning;
|
|
}
|
|
|
|
.dropdown-actions .removeDropdownItem.dropdown-item:hover .fas, .dropdown-actions .removeDropdownItem.dropdown-item:focus .fas, .dropdown-actions .removeDropdownItem.dropdown-item.active .fas, .dropdown-actions .removeDropdownItem.dropdown-item:hover .far, .dropdown-actions .removeDropdownItem.dropdown-item:focus .far, .dropdown-actions .removeDropdownItem.dropdown-item.active .far
|
|
.dropdown-actions .removeDropdownItem.dropdown-item:hover .fa, .dropdown-actions .removeDropdownItem.dropdown-item:focus .fa, .dropdown-actions .removeDropdownItem.dropdown-item.active .fa {
|
|
color: $white;
|
|
}
|
|
|
|
.dropdown-actions .approveDropdownItem.dropdown-item:hover, .dropdown-actions .approveDropdownItem.dropdown-item:focus, .dropdown-actions .approveDropdownItem.dropdown-item.active {
|
|
color: $white;
|
|
text-decoration: none;
|
|
background-color: $success;
|
|
}
|
|
|
|
.dropdown-actions .approveDropdownItem.dropdown-item:hover .fas, .dropdown-actions .approveDropdownItem.dropdown-item:focus .fas, .dropdown-actions .approveDropdownItem.dropdown-item.active .fas, .dropdown-actions .approveDropdownItem.dropdown-item:hover .far, .dropdown-actions .approveDropdownItem.dropdown-item:focus .far, .dropdown-actions .approveDropdownItem.dropdown-item.active .far
|
|
.dropdown-actions .approveDropdownItem.dropdown-item:hover .fa, .dropdown-actions .approveDropdownItem.dropdown-item:focus .fa, .dropdown-actions .approveDropdownItem.dropdown-item.active .fa {
|
|
color: $white;
|
|
}
|
|
|
|
.dropdown-actions .list-inline {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dropdown-actions .list-inline .list-inline-item {
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.dropdown-actions .list-inline .list-inline-item:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
|
|
.page-link {
|
|
font-weight: $font-weight-bold;
|
|
background-color: $dark;
|
|
border: 0.1px solid $dark;
|
|
}
|
|
|
|
.page-link:hover {
|
|
background-color: $gray-100;
|
|
}
|
|
|
|
.page-item.disabled .page-link {
|
|
font-weight: $font-weight-bold;
|
|
background-color: $dark;
|
|
border: 0.1px solid $dark;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.post-actions .list-inline .list-inline-item {
|
|
margin-right: 1.5rem;
|
|
}
|
|
|
|
.post-actions .list-inline .list-inline-item:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.post-actions .list-inline .list-inline-item .dropdown-item {
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
.post-actions .list-inline .list-inline-item .dropdown-item:active {
|
|
color: $white;
|
|
}
|
|
|
|
.post-actions a {
|
|
color: $gray-100;
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
}
|
|
|
|
.post-actions a:hover {
|
|
color: $black;
|
|
}
|
|
|
|
.post-actions .dropdown-item:hover {
|
|
color: $black;
|
|
}
|
|
|
|
.post-img {
|
|
width: 100px;
|
|
height: 70px;
|
|
object-fit: cover;
|
|
border: 0.1px solid $primary;
|
|
border-radius: $border-radius;
|
|
z-index: 2;
|
|
background-color: $gray-300;
|
|
}
|
|
|
|
.post-img-lg, .mobile-thumb-enlarged {
|
|
display: none;
|
|
}
|
|
|
|
.post-img-overlay {
|
|
position: absolute;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
bottom: 0px;
|
|
padding: .25rem .5rem;
|
|
text-align: right;
|
|
width: 100%;
|
|
color: $white;
|
|
}
|
|
|
|
.thumb-img-link-overlay {
|
|
display: none;
|
|
}
|
|
|
|
div:hover .thumb-img-link-overlay {
|
|
position: absolute;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
bottom: 0px;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: $white;
|
|
line-height: 2;
|
|
text-transform: uppercase;
|
|
font-size: 10.1px;
|
|
}
|
|
|
|
.embed-lg {
|
|
display: none;
|
|
}
|
|
|
|
.post-preview-lg {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.post-img {
|
|
width: 80px;
|
|
height: 60px;
|
|
}
|
|
|
|
.post-img-overlay {
|
|
position: absolute;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
padding: .25rem .5rem;
|
|
text-align: right;
|
|
width: 100%;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
.post-actions .comments, .post-actions .share, .post-actions .save, .post-actions .flag {
|
|
margin-right: .5rem;
|
|
vertical-align: top;
|
|
|
|
}
|
|
|
|
.time-stamp, .points {
|
|
color: $muted;
|
|
}
|
|
|
|
|
|
.comments-count {
|
|
display: flex;
|
|
}
|
|
|
|
.comments-count .total {
|
|
font-weight: $font-weight-bold;
|
|
font-size: $small-font-size;
|
|
color: $muted;
|
|
}
|
|
|
|
.comment {
|
|
display: flex;
|
|
position: relative;
|
|
margin-top: 2rem;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
#notifications .comment, #userpage .comment {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
#notifications .comment:last-child, #userpage .comment:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.comment .comment-profile {
|
|
margin: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.comment .comment-body {
|
|
width: 100%;
|
|
}
|
|
|
|
.comment .comment-body .user-info {
|
|
font-size: $small-font-size;
|
|
color: $muted;
|
|
margin-bottom: .25rem;
|
|
margin-top: -0.25rem;
|
|
}
|
|
|
|
.comment .comment-body .user-name {
|
|
color: $black;
|
|
}
|
|
|
|
.comment .comment-body .comment-text {
|
|
margin-bottom: 1rem;
|
|
word-break: break-word;
|
|
color: $black;
|
|
overflow: hidden;
|
|
padding-right: 10px !important;
|
|
padding-top: 5px !important;
|
|
}
|
|
|
|
.comment .comment-body .comment-image {
|
|
border: 0.1px solid $primary
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 2px solid $primary;
|
|
color: $black;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-normal;
|
|
background-color: #46444a;
|
|
padding: 0.5rem 1rem;
|
|
margin: 0.5rem 0rem 1rem 0.5rem;
|
|
}
|
|
|
|
blockquote > blockquote {
|
|
padding: 0;
|
|
margin: 0;
|
|
border-left: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
blockquote p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
.modal .comment-actions .list-group-item {
|
|
border: none;
|
|
border-radius: $border-radius;
|
|
background-color: $gray-400;
|
|
}
|
|
|
|
.modal .comment-actions .list-group-item:focus, .modal .comment-actions .list-group-item:hover {
|
|
background-color: $gray-300;
|
|
}
|
|
|
|
.modal .comment-actions a {
|
|
color: $gray-100;
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
.modal .comment-actions .fa, .modal .comment-actions .fas, .modal .comment-actions .far {
|
|
width: 1.25rem;
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
|
|
.comment-section {
|
|
background-color: $gray-700;
|
|
}
|
|
|
|
.comment p {
|
|
word-break: break-word;
|
|
}
|
|
|
|
.comment-actions {
|
|
font-weight: $font-weight-bold;
|
|
font-size: $small-font-size;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.comment-actions .fa, .comment-actions .fas, .comment-actions .far {
|
|
font-size: 12px;
|
|
margin-right: .5rem;
|
|
color: $gray-100;
|
|
}
|
|
|
|
.comment-actions .dropdown-item:active .fa, .comment-actions .dropdown-item:active .fas, .comment-actions .dropdown-item:active .far {
|
|
color: $black;
|
|
}
|
|
|
|
.comment-actions .dropdown-item:hover .fa, .comment-actions .dropdown-item:hover .fas, .comment-actions .dropdown-item:hover .far {
|
|
color: $black;
|
|
}
|
|
|
|
.comment-actions a:hover .fa, .comment-actions a:hover .fas, .comment-actions a:hover .far {
|
|
color: $black;
|
|
}
|
|
|
|
.comment-actions .fas.fa-ellipsis-h {
|
|
font-size: $font-size-lg;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.comment-actions .list-inline {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.comment-actions .list-inline .list-inline-item {
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.comment-actions .list-inline .list-inline-item .dropdown-item {
|
|
font-size: $small-font-size;
|
|
}
|
|
|
|
.comment-actions .list-inline .list-inline-item .dropdown-item:active {
|
|
color: $black;
|
|
}
|
|
|
|
.comment-actions a {
|
|
color: $gray-100;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.comment-actions a:hover, .comment-actions .copy-link:hover {
|
|
color: $black;
|
|
}
|
|
|
|
.comment-actions .dropdown-item:hover {
|
|
color: $black;
|
|
}
|
|
|
|
.comment-actions .removeDropdownItem.dropdown-item:hover, .comment-actions .removeDropdownItem.dropdown-item:focus, .comment-actions .removeDropdownItem.dropdown-item.active {
|
|
color: $white;
|
|
text-decoration: none;
|
|
background-color: $warning;
|
|
}
|
|
|
|
.comment-actions .removeDropdownItem.dropdown-item:hover .fas, .comment-actions .removeDropdownItem.dropdown-item:focus .fas, .comment-actions .removeDropdownItem.dropdown-item.active .fas, .comment-actions .removeDropdownItem.dropdown-item:hover .far, .comment-actions .removeDropdownItem.dropdown-item:focus .far, .comment-actions .removeDropdownItem.dropdown-item.active .far
|
|
.comment-actions .removeDropdownItem.dropdown-item:hover .fa, .comment-actions .removeDropdownItem.dropdown-item:focus .fa, .comment-actions .removeDropdownItem.dropdown-item.active .fa {
|
|
color: $white;
|
|
}
|
|
|
|
.comment-actions .approveDropdownItem.dropdown-item:hover, .comment-actions .approveDropdownItem.dropdown-item:focus, .comment-actions .approveDropdownItem.dropdown-item.active {
|
|
color: $white;
|
|
text-decoration: none;
|
|
background-color: $success;
|
|
}
|
|
|
|
.comment-actions .approveDropdownItem.dropdown-item:hover .fas, .comment-actions .approveDropdownItem.dropdown-item:focus .fas, .comment-actions .approveDropdownItem.dropdown-item.active .fas, .comment-actions .approveDropdownItem.dropdown-item:hover .far, .comment-actions .approveDropdownItem.dropdown-item:focus .far, .comment-actions .approveDropdownItem.dropdown-item.active .far
|
|
.comment-actions .approveDropdownItem.dropdown-item:hover .fa, .comment-actions .approveDropdownItem.dropdown-item:focus .fa, .comment-actions .approveDropdownItem.dropdown-item.active .fa {
|
|
color: $white;
|
|
}
|
|
|
|
ul.comment-section {
|
|
padding-left: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.comment-count {
|
|
font-size: $h5-font-size;
|
|
color: $black;
|
|
}
|
|
|
|
.comment-write {
|
|
position: relative;
|
|
}
|
|
|
|
.comment-write.child {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.comment-write.collapsed textarea:focus, .comment-write.collapsed textarea:active {
|
|
background-color: $gray-900;
|
|
}
|
|
|
|
.comment-write.collapsed textarea {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: .5rem .75rem;
|
|
min-height: 84px;
|
|
}
|
|
|
|
.comment-write textarea {
|
|
background: $light;
|
|
}
|
|
|
|
.comment-write textarea:hover,
|
|
.form-control[readonly]:hover {
|
|
background: $gray-600;
|
|
}
|
|
|
|
.comment-format {
|
|
display: flex;
|
|
align-items: center;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 0.5rem 0;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.comment-write .comment-format .format {
|
|
padding: 0 .5rem;
|
|
font-size: $font-size-base;
|
|
color: $gray-200;
|
|
}
|
|
|
|
.comment-write .comment-format .format:hover {
|
|
color: $black;
|
|
}
|
|
|
|
.comment .comment-collapse::before {
|
|
content: "";
|
|
position: absolute;
|
|
font-family: "Font Awesome 5 Pro";
|
|
border-left: 2px solid $gray-100;
|
|
font-size: $font-size-base;
|
|
color: $primary;
|
|
display: inline-block;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
width: 10px;
|
|
}
|
|
|
|
.comment .comment-collapse:hover::before {
|
|
border-left-color: $primary;
|
|
}
|
|
|
|
.comment.collapsed .comment-collapse::before {
|
|
content: "\f055";
|
|
font-family: "Font Awesome 5 Pro";
|
|
font-weight: 900;
|
|
border-left: none;
|
|
color: $gray-500;
|
|
top: -0.1px;
|
|
left: -3px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.comment.collapsed .comment-collapse:hover::before {
|
|
color: $primary;
|
|
}
|
|
|
|
.comment.collapsed .comment-profile, .comment.collapsed .comment-body p.text, .comment.collapsed div.comment-text, .comment.collapsed .comment-actions, .comment.collapsed .comment-write,
|
|
.comment.collapsed .comment {
|
|
display: none;
|
|
}
|
|
|
|
.comment.collapsed .user-info {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.comment.collapsed .profile-pic-25 {
|
|
opacity: .5;
|
|
}
|
|
|
|
.comment.collapsed .comment-body {
|
|
opacity: .5;
|
|
}
|
|
|
|
.comment.collapsed .comment-body:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.dropdown-menu.user-profile-menu {
|
|
padding: 1rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.dropdown-menu.user-profile-menu .fa, .dropdown-menu.user-profile-menu .far, .dropdown-menu.user-profile-menu .fas {
|
|
text-align: center;
|
|
width: 18px;
|
|
padding-right: .25rem;
|
|
}
|
|
|
|
|
|
.reactions-count {
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.reactions-count .total {
|
|
font-weight: $font-weight-bold;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.reaction {
|
|
border: 0.1px solid $gray-300;
|
|
background-color: $light;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: .35rem;
|
|
font-weight: $font-weight-bold;
|
|
margin-right: .25rem;
|
|
}
|
|
|
|
.reaction:hover {
|
|
background-color: $gray-200;
|
|
}
|
|
|
|
.reaction .count {
|
|
margin-left: .5rem;
|
|
}
|
|
|
|
.reaction .reacted {
|
|
border-color: $purple;
|
|
background-color: rgba(60, 173, 243, 0.08);
|
|
color: $purple
|
|
}
|
|
|
|
|
|
#login {
|
|
padding-top: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-color: $light;
|
|
}
|
|
|
|
.splash-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 0;
|
|
}
|
|
|
|
.splash-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(127, 127, 127, 0.25);
|
|
background-image: linear-gradient(135deg, rgba(30, 30, 36, 0.1) 0%, $primary 150%);
|
|
|
|
}
|
|
|
|
.splash-img {
|
|
height: 100%;
|
|
width: 100%;
|
|
background-size: cover;
|
|
background-position: bottom;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.splash-text {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 1.5rem;
|
|
color: $white;
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
|
|
|
|
.pagination {
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
|
|
.table .thead-dark th {
|
|
color: $muted;
|
|
font-size: $small-font-size;
|
|
text-transform: uppercase;
|
|
background-color: $light;
|
|
border: none;
|
|
}
|
|
|
|
|
|
.settings .settings-section {
|
|
margin-bottom: 3rem;
|
|
background: $gray-500;
|
|
border: 0.1px solid $border-color;
|
|
border-radius: $border-radius;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#settings .bg-gray-300 {
|
|
background-color: $dark!important;
|
|
}
|
|
|
|
.settings .settings-section .title, .settings .settings-section .body, .settings .settings-section .footer {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.settings .settings-section .title p:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.settings .settings-section .footer {
|
|
background-color: $secondary;
|
|
}
|
|
|
|
|
|
.modal .profile-actions .list-group-item {
|
|
border: none;
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
.modal .profile-actions .list-group-item:focus, .modal .profile-actions .list-group-item:hover {
|
|
background-color: $gray-200;
|
|
}
|
|
|
|
.modal .profile-actions a {
|
|
color: $black;
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
.modal .profile-actions .fa, .modal .profile-actions .fas, .modal .profile-actions .far {
|
|
width: 1.25rem;
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
|
|
.profile-actions a {
|
|
color: $gray;
|
|
text-decoration: none;
|
|
font-size: $small-font-size;
|
|
}
|
|
|
|
.profile-actions .fa, .profile-actions .fas, .profile-actions .far {
|
|
font-size: $small-font-size;
|
|
color: $gray;
|
|
}
|
|
|
|
.profile-actions .dropdown-item:hover {
|
|
color: $black;
|
|
}
|
|
|
|
.profile-actions .dropdown-item {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.profile-actions .dropdown .dropdown-menu .dropdown-item .fa, .profile-actions .dropdown .dropdown-menu .dropdown-item .fas, .profile-actions .dropdown .dropdown-menu .dropdown-item .far {
|
|
font-size: $small-font-size;
|
|
color: $gray;
|
|
width: 1rem;
|
|
margin-right: 0.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.profile-actions .dropdown-item:active .fa, .profile-actions .dropdown-item:active .fas, .profile-actions .dropdown-item:active .far {
|
|
color: $black;
|
|
}
|
|
|
|
.profile-actions .dropdown-item:hover .fa, .profile-actions .dropdown-item:hover .fas, .profile-actions .dropdown-item:active .far {
|
|
color: $black;
|
|
}
|
|
|
|
|
|
#page .footer h1, #page .footer h2, #page .footer h3, #page .footer h4, #page .footer h5, #page .footer h6,
|
|
#article .footer h1, #article .footer h2, #article .footer h3, #article .footer h4, #article .footer h5, #article .footer h6 {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
#page .footer a, #article .footer a {
|
|
color: $white;
|
|
opacity: .8;
|
|
}
|
|
|
|
#page .footer li, #article .footer li {
|
|
padding: .25rem 0;
|
|
}
|
|
|
|
.footer .list-inline-item {
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
|
|
.footer a {
|
|
text-decoration: none;
|
|
color: $muted;
|
|
}
|
|
|
|
.footer a:hover, .footer a:focus, .footer a:active {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.footer.footer-dark a:hover, .footer.footer-dark a:focus, .footer.footer-dark a:active {
|
|
color: $white;
|
|
}
|
|
|
|
|
|
.empty-state-img {
|
|
width: 200px;
|
|
opacity: .35;
|
|
filter: brightness(0);
|
|
}
|
|
|
|
|
|
.ghost {
|
|
-webkit-animation: ghost 2s infinite alternate;
|
|
animation: ghost 2s infinite alternate;
|
|
};
|
|
@-webkit-keyframes ghost {
|
|
0% { transform: translateY(0); }
|
|
100% { transform: translateY(-20px); }
|
|
};
|
|
@keyframes ghost {
|
|
0% { transform: translateY(0); }
|
|
100% { transform: translateY(-20px); }
|
|
};
|
|
@-moz-keyframes ghost {
|
|
0% { transform: translateY(0); }
|
|
100% { transform: translateY(-20px); }
|
|
};
|
|
|
|
|
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
@include media-breakpoint-up($breakpoint) {
|
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
|
|
.border#{$infix}-top { border-top: $border-width solid $border-color !important; }
|
|
.border#{$infix}-right { border-right: $border-width solid $border-color !important; }
|
|
.border#{$infix}-bottom { border-bottom: $border-width solid $border-color !important; }
|
|
.border#{$infix}-left { border-left: $border-width solid $border-color !important; }
|
|
|
|
.border#{$infix}-top-0 { border-top: 0 !important; }
|
|
.border#{$infix}-right-0 { border-right: 0 !important; }
|
|
.border#{$infix}-bottom-0 { border-bottom: 0 !important; }
|
|
.border#{$infix}-left-0 { border-left: 0 !important; }
|
|
|
|
.border#{$infix}-x {
|
|
border-left: $border-width solid $border-color !important;
|
|
border-right: $border-width solid $border-color !important;
|
|
}
|
|
|
|
.border#{$infix}-y {
|
|
border-top: $border-width solid $border-color !important;
|
|
border-bottom: $border-width solid $border-color !important;
|
|
}
|
|
|
|
.border#{$infix} {
|
|
border: $border-width solid $border-color !important;
|
|
}
|
|
|
|
.border#{$infix}-0 {
|
|
border: none !important;
|
|
}
|
|
|
|
|
|
.rounded#{$infix} { @include border-radius($border-radius); }
|
|
.rounded#{$infix}-top { @include border-top-radius($border-radius); @include border-bottom-radius(0); }
|
|
.rounded#{$infix}-right { @include border-right-radius($border-radius); @include border-left-radius(0); }
|
|
.rounded#{$infix}-bottom { @include border-bottom-radius($border-radius); @include border-top-radius(0); }
|
|
.rounded#{$infix}-left { @include border-left-radius($border-radius); @include border-right-radius(0); }
|
|
.rounded#{$infix}-circle { border-radius: 50%; }
|
|
.rounded#{$infix}-0 { border-radius: 0; }
|
|
|
|
}
|
|
}
|
|
|
|
|
|
@media (min-width: 576px) {
|
|
.w-sm-25 {
|
|
width: 25% !important;
|
|
}
|
|
.w-sm-50 {
|
|
width: 50% !important;
|
|
}
|
|
.w-sm-75 {
|
|
width: 75% !important;
|
|
}
|
|
.w-sm-100 {
|
|
width: 100% !important;
|
|
}
|
|
.w-sm-auto {
|
|
width: auto !important;
|
|
}
|
|
.h-sm-25 {
|
|
height: 25% !important;
|
|
}
|
|
.h-sm-50 {
|
|
height: 50% !important;
|
|
}
|
|
.h-sm-75 {
|
|
height: 75% !important;
|
|
}
|
|
.h-sm-100 {
|
|
height: 100% !important;
|
|
}
|
|
.h-sm-auto {
|
|
height: auto !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.w-md-25 {
|
|
width: 25% !important;
|
|
}
|
|
.w-md-50 {
|
|
width: 50% !important;
|
|
}
|
|
.w-md-75 {
|
|
width: 75% !important;
|
|
}
|
|
.w-md-100 {
|
|
width: 100% !important;
|
|
}
|
|
.w-md-auto {
|
|
width: auto !important;
|
|
}
|
|
.h-md-25 {
|
|
height: 25% !important;
|
|
}
|
|
.h-md-50 {
|
|
height: 50% !important;
|
|
}
|
|
.h-md-75 {
|
|
height: 75% !important;
|
|
}
|
|
.h-md-100 {
|
|
height: 100% !important;
|
|
}
|
|
.h-md-auto {
|
|
height: auto !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.w-lg-25 {
|
|
width: 25% !important;
|
|
}
|
|
.w-lg-50 {
|
|
width: 50% !important;
|
|
}
|
|
.w-lg-75 {
|
|
width: 75% !important;
|
|
}
|
|
.w-lg-100 {
|
|
width: 100% !important;
|
|
}
|
|
.w-lg-auto {
|
|
width: auto !important;
|
|
}
|
|
.h-lg-25 {
|
|
height: 25% !important;
|
|
}
|
|
.h-lg-50 {
|
|
height: 50% !important;
|
|
}
|
|
.h-lg-75 {
|
|
height: 75% !important;
|
|
}
|
|
.h-lg-100 {
|
|
height: 100% !important;
|
|
}
|
|
.h-lg-auto {
|
|
height: auto !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.w-xl-25 {
|
|
width: 25% !important;
|
|
}
|
|
.w-xl-50 {
|
|
width: 50% !important;
|
|
}
|
|
.w-xl-75 {
|
|
width: 75% !important;
|
|
}
|
|
.w-xl-100 {
|
|
width: 100% !important;
|
|
}
|
|
.w-xl-auto {
|
|
width: auto !important;
|
|
}
|
|
.h-xl-25 {
|
|
height: 25% !important;
|
|
}
|
|
.h-xl-50 {
|
|
height: 50% !important;
|
|
}
|
|
.h-xl-75 {
|
|
height: 75% !important;
|
|
}
|
|
.h-xl-100 {
|
|
height: 100% !important;
|
|
}
|
|
.h-xl-auto {
|
|
height: auto !important;
|
|
}
|
|
}
|
|
|
|
|
|
.text-format {
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: .5rem;
|
|
width: 100%;
|
|
border-width: 0 0.1px 0.1px 0.1px;
|
|
border-style: solid;
|
|
border-color: $gray-300;
|
|
border-bottom-left-radius: .25rem;
|
|
border-bottom-right-radius: .25rem;
|
|
z-index: 3;
|
|
}
|
|
|
|
.text-format .format {
|
|
padding: 0 0.5rem;
|
|
font-size: 1rem;
|
|
color: #adb5bd;
|
|
}
|
|
|
|
.submission .body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.submission .footer {
|
|
background-color: transparent;
|
|
padding: 1rem;
|
|
border-bottom-left-radius: .25rem;
|
|
border-bottom-right-radius: .25rem;
|
|
}
|
|
|
|
|
|
.transition-15 {
|
|
-webkit-transition: width .15s;
|
|
transition: width .15s;
|
|
}
|
|
|
|
|
|
.custom-control-label {
|
|
text-transform: none;
|
|
font-weight: $font-weight-normal;
|
|
font-size: $font-size-base;
|
|
letter-spacing: 0;
|
|
color: $black;
|
|
}
|
|
|
|
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
|
|
background-color: $purple;
|
|
border: 0.1px solid $purple;
|
|
}
|
|
|
|
|
|
.custom-switch {
|
|
padding-left: 2.25rem;
|
|
padding-bottom: 1rem; }
|
|
|
|
.custom-switch .custom-control-label { padding-top: 0.5rem;
|
|
padding-left: 2rem;
|
|
padding-bottom: 0.1rem;
|
|
}
|
|
|
|
.custom-control-input:checked ~ .custom-control-label::before {
|
|
opacity: 1;
|
|
background-color: $success;
|
|
border: $success solid 0.1px;
|
|
|
|
}
|
|
|
|
.custom-control-input:checked ~ .custom-control-label:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.custom-switch .custom-control-label::before {
|
|
left: -2.25rem;
|
|
height: 1.5rem;
|
|
width: 2.75rem; pointer-events: all;
|
|
border-radius: 1rem;
|
|
background-color: $gray-100;
|
|
border: $gray-100 solid 0.1px;
|
|
opacity: .7;
|
|
}
|
|
|
|
.custom-switch .custom-control-label:hover::before {
|
|
opacity: .85;
|
|
}
|
|
|
|
.custom-switch .custom-control-label::after {
|
|
top: calc(0.25rem + 2px);
|
|
left: calc(-2.25rem + 2px);
|
|
width: calc(1.5rem - 4px); height: calc(1.5rem - 4px); background-color: $light;
|
|
border-radius: 2rem; // it was 0.5rem before. Oval is bigger than before.
|
|
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
|
|
transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.custom-switch .custom-control-label::after {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
|
|
background-color: $white;
|
|
-webkit-transform: translateX(1.25rem); //translateX(0.75rem);
|
|
transform: translateX(1.25rem); //translateX(0.75rem);
|
|
}
|
|
|
|
|
|
pre code {
|
|
word-break: break-word;
|
|
white-space: break-spaces;
|
|
color: $code;
|
|
}
|
|
|
|
|
|
pre.prettyprint {
|
|
padding: 0;
|
|
}
|
|
|
|
pre ol.linenums {
|
|
padding-left: 0;
|
|
}
|
|
|
|
pre ol > li {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
pre ol > li::before {
|
|
color: $white;
|
|
font-weight: $font-weight-normal;
|
|
background-color: transparent;
|
|
right: 1rem;
|
|
padding: .25rem;
|
|
text-align: right;
|
|
margin-right: 0.5rem;
|
|
width: 3rem;
|
|
}
|
|
|
|
pre li.L1, pre li.L3, pre li.L5, pre li.L7, pre li.L9 {
|
|
background: none;
|
|
}
|
|
|
|
pre .pln, code .pln {
|
|
color: #29b1f3;
|
|
}
|
|
|
|
pre .lit, code .lit {
|
|
color: #d55a7c;
|
|
}
|
|
|
|
pre .kwd, code .kwd {
|
|
color: $green;
|
|
}
|
|
|
|
pre .str, code .str {
|
|
color: $green;
|
|
opacity: .75;
|
|
}
|
|
|
|
pre .com, code .com {
|
|
color: #ab4bc3;
|
|
}
|
|
|
|
pre .typ, code .typ {
|
|
color: $white;
|
|
}
|
|
|
|
pre .clo, pre .opn, pre .pun, code .clo, code .opn, code .pun {
|
|
color: $white;
|
|
}
|
|
|
|
|
|
.gif-categories .card {
|
|
overflow: hidden;
|
|
border: none;
|
|
}
|
|
|
|
.gif-categories img {
|
|
border-radius: $border-radius;
|
|
height: 110px;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
-webkit-transition: all .15s ease;
|
|
-moz-transition: all .15s ease;
|
|
-o-transition: all .15s ease;
|
|
-ms-transition: all .15s ease;
|
|
transition: all .15s ease;
|
|
}
|
|
|
|
.gif-categories img:hover {
|
|
border: 3px solid $primary;
|
|
}
|
|
|
|
.gif-categories .card .gif-cat-overlay {
|
|
position: absolute;
|
|
text-align: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
-webkit-transition: all .15s ease;
|
|
-moz-transition: all .15s ease;
|
|
-o-transition: all .15s ease;
|
|
-ms-transition: all .15s ease;
|
|
transition: all .15s ease;
|
|
}
|
|
|
|
.gif-categories .card:hover .gif-cat-overlay {
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
border: 3px solid $primary;
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
|
|
@media (max-width: 991.98px) {
|
|
#frontpage, #search {
|
|
padding-top: 49px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
|
|
html {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.container {
|
|
overflow: hidden;
|
|
max-width: none;
|
|
}
|
|
|
|
body, #settings, #notifications, #submit {
|
|
padding-top: 49px;
|
|
background-color: $gray-700;
|
|
}
|
|
|
|
#thread, #userpage {
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
.custom-gutters {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.shadow-sm-0 {
|
|
box-shadow: none!important;
|
|
}
|
|
|
|
.navbar.bg-primary {
|
|
background-color: $dark!important;
|
|
}
|
|
|
|
.navbar-nav {
|
|
height: 100vh;
|
|
}
|
|
|
|
.navbar-nav .nav-link, .navbar-expand-md .navbar-nav .nav-link {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.navbar-dark .navbar-nav .nav-link:hover {
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.navbar-dark .navbar-nav .nav-link:active {
|
|
background-color: rgba(0, 0, 0, 0.15);
|
|
border-radius: 0;
|
|
}
|
|
|
|
.navbar-dark .navbar-nav .nav-link .fa, .navbar-dark .navbar-nav .nav-link .fas, .navbar-dark .navbar-nav .nav-link .far, .navbar-dark .navbar-nav .nav-link .fab {
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
.navbar-light .navbar-nav .nav-link .fa, .navbar-light .navbar-nav .nav-link .fas, .navbar-light .navbar-nav .nav-link .far, .navbar-light .navbar-nav .nav-link .fab {
|
|
color: $purple;
|
|
font-size: $font-size-lg;
|
|
}
|
|
|
|
#fixed-bar-mobile {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.mobile-nav-icon {
|
|
padding: 0.25rem 0.75rem;
|
|
}
|
|
|
|
#thread, #submit, #error-401, #error-403, #error-404, #error-405, #error-409, #error-410, #error-422, #error-429, #error-451, #error-500 {
|
|
background-color: $light;
|
|
}
|
|
|
|
#frontpage {
|
|
padding-top: 49px;
|
|
}
|
|
|
|
#search .search-results.card {
|
|
border-bottom: 0.1px solid $border-color;
|
|
border-width: 0 0 0.1px 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
#frontpage .posts .card, #userpage .posts .card, #search .posts .card {
|
|
padding: 7px;
|
|
border-width: 0 0 0.1px 0;
|
|
}
|
|
|
|
#frontpage .posts .card:first-of-type, #userpage .posts .card:first-of-type, #search .posts .card:first-of-type {
|
|
border-radius: 0;
|
|
}
|
|
|
|
#frontpage .posts .card, #userpage .posts .card, #search .posts .card, #userpage .posts .card {
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
#frontpage .posts .card:last-of-type, #search .posts .card:last-of-type {
|
|
border-bottom: 0.1px solid $border-color;
|
|
}
|
|
|
|
#frontpage .posts .card:hover .post-title a, #search .posts .card:hover .post-title a{
|
|
color: $primary;
|
|
}
|
|
|
|
#frontpage .posts .card .post-img, #search .posts .card .post-img {
|
|
z-index: 3;
|
|
}
|
|
|
|
#frontpage .posts .card.enlarged .mobile-thumb-enlarged, #userpage .posts .card.enlarged .mobile-thumb-enlarged, #search .posts .card.enlarged .mobile-thumb-enlarged {
|
|
display: block;
|
|
}
|
|
|
|
.toggle-view {
|
|
padding-top: 2px;
|
|
}
|
|
|
|
|
|
.toast {
|
|
bottom: 1.5rem;
|
|
margin: 0 auto;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
|
|
#thread .card {
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
.card {
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
.posts, #thread #main-content-col {
|
|
box-shadow: none;
|
|
border: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
#thread #main-content-col {
|
|
margin: 0;
|
|
}
|
|
|
|
.thumb-img-link-overlay {
|
|
display: none;
|
|
}
|
|
|
|
.post-title a {
|
|
color: $black;
|
|
}
|
|
|
|
.post-title a:hover, .post-title a:active, .post-title a:focus {
|
|
color: $primary;
|
|
}
|
|
|
|
#thread .voting {
|
|
min-width: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.voting {
|
|
font-weight: $font-weight-normal;
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
|
|
#frontpage .voting, #search .voting, #userpage .voting {
|
|
margin: 0;
|
|
}
|
|
|
|
.post-title {
|
|
font-size: 14px;
|
|
font-weight: $font-weight-normal;
|
|
line-height: normal;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.post-meta {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.post-actions {
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
|
|
.post-actions a {
|
|
font-size: $font-size-base;
|
|
color: $gray-200;
|
|
}
|
|
|
|
.post-actions .fa, .post-actions .fas, .post-actions .far {
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
.post-actions .voting .fa, .post-actions .voting .fas, .post-actions .voting .far {
|
|
font-size: $font-size-lg;
|
|
}
|
|
|
|
|
|
.comment-actions .score {
|
|
color: $gray-200;
|
|
}
|
|
|
|
.score {
|
|
color: $gray-200;
|
|
}
|
|
|
|
.arrow-up::before, .arrow-down::before, .arrow-up:hover::before, .arrow-down:hover::before {
|
|
font-size: 1.3rem;
|
|
color: $gray-200;
|
|
opacity: 1;
|
|
}
|
|
|
|
.active.arrow-up::before, .active.arrow-up:hover::before {
|
|
color: $upvote;
|
|
}
|
|
|
|
.active.arrow-down::before, .active.arrow-down:hover::before {
|
|
color: $downvote;
|
|
}
|
|
|
|
.dropdown-actions a {
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
.dropdown-actions .fa, .dropdown-actions .fas, .dropdown-actions .far {
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
.btn-tag {
|
|
font-size: $small-font-size;
|
|
}
|
|
|
|
|
|
.comment-section {
|
|
background-color: $gray-600;
|
|
}
|
|
|
|
.comment-section > .comment {
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.comment {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.comment .comment-collapse {
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.comment.collapsed .user-info {
|
|
padding-top: 0.5rem;
|
|
}
|
|
|
|
.comment .comment-collapse::before {
|
|
content: "\f056";
|
|
position: static;
|
|
font-size: 10px;
|
|
font-weight: 900;
|
|
border: none;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.comment.collapsed .comment-body:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.comment-actions .fa, .comment-actions .fas, .comment-actions .far {
|
|
color: $gray-100;
|
|
}
|
|
|
|
|
|
.banner-pic-135 {
|
|
max-width: 100%
|
|
}
|
|
|
|
|
|
.x-scroll-parent {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.x-scroll {
|
|
width: 100%;
|
|
overflow-x: scroll;
|
|
white-space: nowrap;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE 10+ */
|
|
}
|
|
|
|
.x-scroll::-webkit-scrollbar {
|
|
width: 100%;
|
|
overflow-x: scroll;
|
|
white-space: nowrap;
|
|
background: transparent; /* Chrome/Safari/Webkit */
|
|
}
|
|
|
|
#thread .post-title {
|
|
font-size: 16px;
|
|
}
|
|
|
|
#submit .submission {
|
|
border: none;
|
|
}
|
|
|
|
#submit .submission .body {
|
|
padding: 0;
|
|
}
|
|
|
|
#submit .submission .footer {
|
|
background: transparent;
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.footer .list-inline-item {
|
|
line-height: 3;
|
|
}
|
|
|
|
.comments-count .total {
|
|
font-weight: $font-weight-normal;
|
|
font-size: $font-size-base;
|
|
|
|
}
|
|
|
|
.comment-actions {
|
|
font-weight: $font-weight-normal;
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
.comment-write .comment-format .format {
|
|
display: none;
|
|
}
|
|
|
|
.post-filter {
|
|
font-weight: $font-weight-normal;
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
.post-filter .dropdown-item {
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
|
|
.user-name {
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
|
|
.comment .comment-body .user-name {
|
|
color: $black;
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
.pagination {
|
|
padding: 1rem;
|
|
}
|
|
|
|
input[type="color"],
|
|
input[type="date"],
|
|
input[type="datetime"],
|
|
input[type="datetime-local"],
|
|
input[type="email"],
|
|
input[type="month"],
|
|
input[type="number"],
|
|
input[type="password"],
|
|
input[type="search"],
|
|
input[type="tel"],
|
|
input[type="text"],
|
|
input[type="time"],
|
|
input[type="url"],
|
|
input[type="week"],
|
|
select:focus,
|
|
textarea {
|
|
font-size: 16px!important;
|
|
}
|
|
|
|
textarea, input[type=text] {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.bg-white {
|
|
background-color: $gray-600!important;
|
|
}
|
|
|
|
.text-muted {
|
|
color: $muted!important;
|
|
}
|
|
|
|
.text-primary {
|
|
color: $primary!important;
|
|
}
|
|
|
|
.text-gray-400, .text-gray-500 {
|
|
color: $gray-200!important;
|
|
}
|
|
|
|
.white-overlay {
|
|
background-color: rgba(0, 0, 0, 0.5)!important;
|
|
background-image: linear-gradient(180deg, #ffffff00 25%, $gray-600 100%)!important;
|
|
}
|
|
|
|
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
width: 0px;
|
|
background: transparent;
|
|
}
|
|
|
|
|
|
.hide-scrollbar {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.noshow {
|
|
display: none;
|
|
}
|
|
|
|
span.red {
|
|
color: $admin;
|
|
}
|
|
|
|
span.green {
|
|
color: $green;
|
|
}
|
|
|
|
div.banned {
|
|
background-color: $banned;
|
|
border-left: 3px solid #ff0000!important;
|
|
}
|
|
|
|
div.deleted {
|
|
background-color: $deleted !important;
|
|
}
|
|
|
|
div.deleted.banned {
|
|
background-color: $deletedandbanned !important;
|
|
}
|
|
|
|
.text-admin {
|
|
color: $admin;
|
|
}
|
|
|
|
.in-comment-image {
|
|
max-height: 100px !important;
|
|
max-width: 100px !important;
|
|
}
|
|
|
|
.onboarding-card {
|
|
height: 180px;
|
|
.onboarding-card-overlay {
|
|
background-color: rgba(0,0,0,0.65);
|
|
}
|
|
&.selected {
|
|
.onboarding-card-overlay {
|
|
background-color: rgba($purple, .65);
|
|
}
|
|
}
|
|
}
|
|
|
|
.object-cover {
|
|
object-fit: cover;
|
|
}
|
|
|
|
.cat-item {
|
|
display: none;
|
|
&.selected {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
img.emoji {
|
|
width: 30px;
|
|
height: 30px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* Dark mode spoiler */
|
|
.spoiler {
|
|
color: $white;
|
|
background-color: $white;
|
|
font-weight: 600 !important;
|
|
padding: 5px;
|
|
}
|
|
|
|
.spoiler:hover {
|
|
color: $gray;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.comment {
|
|
border-left: 0 !important;
|
|
padding-left: 0 !important;
|
|
}
|
|
}
|
|
|
|
.comment .comment-collapse-desktop {
|
|
padding-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.comment .comment-collapse-desktop:hover {
|
|
border-left-color: $white !important;
|
|
}
|
|
|
|
.comment.collapsed .comment-collapse-desktop:hover {
|
|
color:$white !important; }
|
|
#frontpage .post-title a:visited {
|
|
color: $gray-200;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.settings-nav .nav-link {
|
|
font-size: $medium-font-size;
|
|
padding: 0.75rem 0.4rem;}
|
|
}
|
|
|
|
.table {
|
|
color: $white;
|
|
}
|
|
|
|
.comment-box {
|
|
border: 2px solid $gray-200;
|
|
}
|
|
|
|
.btn {
|
|
background: transparent;
|
|
}
|
|
|
|
.form-control {
|
|
background: transparent;
|
|
}
|
|
|
|
.navbar-light .navbar-nav .nav-link {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
|
|
.btn-secondary {
|
|
color: $muted;
|
|
}
|
|
|
|
.btn-primary {
|
|
color: $muted;
|
|
}
|
|
|
|
.btn-success {
|
|
border-color: #38A169 !important;
|
|
}
|
|
|
|
.btn-danger {
|
|
border-color: #E53E3E !important;
|
|
}
|
|
|
|
.alert {
|
|
color: #000000;
|
|
}
|
|
|
|
#context, .context {
|
|
padding: 10px !important;
|
|
border: 2px solid $primary !important;
|
|
}
|
|
|
|
.btn-lg {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.followbutton {
|
|
margin-bottom: 10px !important;
|
|
}
|
|
.comment-actions {
|
|
margin-top: -8px;
|
|
}
|
|
}
|
|
|
|
.btn-primary:focus, .btn-primary.focus {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.px-25 {
|
|
padding-left: 0.8rem !important;
|
|
padding-right: 0.8rem !important;
|
|
}
|
|
|
|
.flaggers {
|
|
margin: 7px;
|
|
border: 1px solid $primary;
|
|
padding: 10px;
|
|
border-radius: 3px;
|
|
background-color: $gray-700 !important;
|
|
}
|
|
|
|
.text-info {
|
|
color: $primary !important;
|
|
}
|
|
|
|
* {
|
|
-webkit-animation: None !important;
|
|
animation: None !important;
|
|
}
|
|
|
|
.patron {
|
|
padding: 2px 5px 3px 5px !important;
|
|
border-radius: 5px !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.container, .container-fluid {
|
|
background-color: $gray-700 !important;
|
|
border-radius: 5px !important;
|
|
}
|
|
|
|
.btn {
|
|
background-color: $gray-700 !important;
|
|
}
|
|
|
|
.nobackground {
|
|
background: None !important;
|
|
}
|
|
|
|
.navbar {
|
|
padding: 0.5rem 0.8rem 0.3rem 0.7rem;
|
|
}
|
|
|
|
textarea {
|
|
resize: both !important;
|
|
}
|
|
|
|
.jumbotron-guild {
|
|
position: relative;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: 0;
|
|
overflow: hidden;
|
|
margin-bottom: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 1
|
|
|
|
}
|
|
|
|
.jumbotron-guild .jumbotron-overlay {
|
|
background-color: transparent;
|
|
background-image: linear-gradient(180deg, #fff0 0%, rgba(0, 0, 0, 0.8) 50%);
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.jumbotron-guild {
|
|
height: 110px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 767.98px) {
|
|
.card-columns {
|
|
column-count: 4 !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.card-columns {
|
|
column-count: 5 !important;
|
|
}
|
|
}
|
|
|
|
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
|
|
padding-bottom: 30px;
|
|
} |