.thumbnail {
object-fit: cover;
- min-height: 60px;
- max-height: 80px;
+ aspect-ratio: 4/3;
width: 100%;
+ max-height: 6rem;
}
.thumbnail svg {
$link-decoration: none;
$min-contrast-ratio: 3;
-
-$container-max-widths: (
- lg: 1140px,
-);
}
abbr[title] {
- -webkit-text-decoration: underline dotted;
- text-decoration: underline dotted;
+ text-decoration: underline dotted;
cursor: help;
- -webkit-text-decoration-skip-ink: none;
- text-decoration-skip-ink: none;
+ text-decoration-skip-ink: none;
}
address {
background-color: #444;
background-clip: padding-box;
border: var(--bs-border-width) solid #222;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
+ appearance: none;
border-radius: var(--bs-border-radius);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
display: block;
padding: 0;
}
-.form-control::-moz-placeholder {
- color: var(--bs-secondary-color);
- opacity: 1;
-}
.form-control::placeholder {
color: var(--bs-secondary-color);
opacity: 1;
.form-control::file-selector-button {
padding: 0.375rem 0.75rem;
margin: -0.375rem -0.75rem;
- -webkit-margin-end: 0.75rem;
- margin-inline-end: 0.75rem;
+ margin-inline-end: 0.75rem;
color: #fff;
background-color: var(--bs-tertiary-bg);
pointer-events: none;
.form-control-sm::file-selector-button {
padding: 0.25rem 0.5rem;
margin: -0.25rem -0.5rem;
- -webkit-margin-end: 0.5rem;
- margin-inline-end: 0.5rem;
+ margin-inline-end: 0.5rem;
}
.form-control-lg {
.form-control-lg::file-selector-button {
padding: 0.5rem 1rem;
margin: -0.5rem -1rem;
- -webkit-margin-end: 1rem;
- margin-inline-end: 1rem;
+ margin-inline-end: 1rem;
}
textarea.form-control {
border: var(--bs-border-width) solid #222;
border-radius: var(--bs-border-radius);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
+ appearance: none;
}
@media (prefers-reduced-motion: reduce) {
.form-select {
background-position: center;
background-size: contain;
border: var(--bs-border-width) solid var(--bs-border-color);
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- -webkit-print-color-adjust: exact;
- print-color-adjust: exact;
+ appearance: none;
+ print-color-adjust: exact;
}
.form-check-input[type=checkbox] {
border-radius: 0.25em;
height: 1.5rem;
padding: 0;
background-color: transparent;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
+ appearance: none;
}
.form-range:focus {
outline: 0;
background-color: #00bc8c;
border: 0;
border-radius: 1rem;
- -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
- -webkit-appearance: none;
- appearance: none;
+ appearance: none;
}
@media (prefers-reduced-motion: reduce) {
.form-range::-webkit-slider-thumb {
- -webkit-transition: none;
transition: none;
}
}
background-color: #00bc8c;
border: 0;
border-radius: 1rem;
- -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
- -moz-appearance: none;
- appearance: none;
+ appearance: none;
}
@media (prefers-reduced-motion: reduce) {
.form-range::-moz-range-thumb {
- -moz-transition: none;
transition: none;
}
}
.form-floating > .form-control-plaintext {
padding: 1rem 0.75rem;
}
-.form-floating > .form-control::-moz-placeholder, .form-floating > .form-control-plaintext::-moz-placeholder {
- color: transparent;
-}
.form-floating > .form-control::placeholder,
.form-floating > .form-control-plaintext::placeholder {
color: transparent;
}
-.form-floating > .form-control:not(:-moz-placeholder-shown), .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
- padding-top: 1.625rem;
- padding-bottom: 0.625rem;
-}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown) {
padding-top: 1.625rem;
padding-bottom: 0.625rem;
}
-.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
- color: rgba(var(--bs-body-color-rgb), 0.65);
- transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
-}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
color: rgba(var(--bs-body-color-rgb), 0.65);
transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
-.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
- position: absolute;
- inset: 1rem 0.375rem;
- z-index: -1;
- height: 1.5em;
- content: "";
- background-color: #444;
- border-radius: var(--bs-border-radius);
-}
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control-plaintext ~ label::after,
text-align: center;
vertical-align: middle;
cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
+ user-select: none;
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
border-radius: var(--bs-btn-border-radius);
background-color: var(--bs-btn-bg);
}
.btn-close:disabled, .btn-close.disabled {
pointer-events: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
+ user-select: none;
opacity: var(--bs-btn-close-disabled-opacity);
}
--bs-toast-zindex: 1090;
position: absolute;
z-index: var(--bs-toast-zindex);
- width: -moz-max-content;
width: max-content;
max-width: 100%;
pointer-events: none;
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(-100%);
}
-}
-@media (max-width: 575.98px) {
.offcanvas-sm.offcanvas-end {
top: 0;
right: 0;
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(100%);
}
-}
-@media (max-width: 575.98px) {
.offcanvas-sm.offcanvas-top {
top: 0;
right: 0;
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(-100%);
}
-}
-@media (max-width: 575.98px) {
.offcanvas-sm.offcanvas-bottom {
right: 0;
left: 0;
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(100%);
}
-}
-@media (max-width: 575.98px) {
.offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) {
transform: none;
}
-}
-@media (max-width: 575.98px) {
.offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show {
visibility: visible;
}
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(-100%);
}
-}
-@media (max-width: 767.98px) {
.offcanvas-md.offcanvas-end {
top: 0;
right: 0;
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(100%);
}
-}
-@media (max-width: 767.98px) {
.offcanvas-md.offcanvas-top {
top: 0;
right: 0;
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(-100%);
}
-}
-@media (max-width: 767.98px) {
.offcanvas-md.offcanvas-bottom {
right: 0;
left: 0;
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(100%);
}
-}
-@media (max-width: 767.98px) {
.offcanvas-md.showing, .offcanvas-md.show:not(.hiding) {
transform: none;
}
-}
-@media (max-width: 767.98px) {
.offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show {
visibility: visible;
}
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(-100%);
}
-}
-@media (max-width: 991.98px) {
.offcanvas-lg.offcanvas-end {
top: 0;
right: 0;
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(100%);
}
-}
-@media (max-width: 991.98px) {
.offcanvas-lg.offcanvas-top {
top: 0;
right: 0;
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(-100%);
}
-}
-@media (max-width: 991.98px) {
.offcanvas-lg.offcanvas-bottom {
right: 0;
left: 0;
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(100%);
}
-}
-@media (max-width: 991.98px) {
.offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) {
transform: none;
}
-}
-@media (max-width: 991.98px) {
.offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show {
visibility: visible;
}
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(-100%);
}
-}
-@media (max-width: 1199.98px) {
.offcanvas-xl.offcanvas-end {
top: 0;
right: 0;
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(100%);
}
-}
-@media (max-width: 1199.98px) {
.offcanvas-xl.offcanvas-top {
top: 0;
right: 0;
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(-100%);
}
-}
-@media (max-width: 1199.98px) {
.offcanvas-xl.offcanvas-bottom {
right: 0;
left: 0;
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(100%);
}
-}
-@media (max-width: 1199.98px) {
.offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) {
transform: none;
}
-}
-@media (max-width: 1199.98px) {
.offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show {
visibility: visible;
}
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(-100%);
}
-}
-@media (max-width: 1399.98px) {
.offcanvas-xxl.offcanvas-end {
top: 0;
right: 0;
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(100%);
}
-}
-@media (max-width: 1399.98px) {
.offcanvas-xxl.offcanvas-top {
top: 0;
right: 0;
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(-100%);
}
-}
-@media (max-width: 1399.98px) {
.offcanvas-xxl.offcanvas-bottom {
right: 0;
left: 0;
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(100%);
}
-}
-@media (max-width: 1399.98px) {
.offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) {
transform: none;
}
-}
-@media (max-width: 1399.98px) {
.offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show {
visibility: visible;
}
}
}
.placeholder-wave {
- -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
- mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
- -webkit-mask-size: 200% 100%;
- mask-size: 200% 100%;
+ mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
+ mask-size: 200% 100%;
animation: placeholder-wave 2s linear infinite;
}
@keyframes placeholder-wave {
100% {
- -webkit-mask-position: -200% 0%;
- mask-position: -200% 0%;
+ mask-position: -200% 0%;
}
}
.clearfix::after {
}
.object-fit-contain {
- -o-object-fit: contain !important;
- object-fit: contain !important;
+ object-fit: contain !important;
}
.object-fit-cover {
- -o-object-fit: cover !important;
- object-fit: cover !important;
+ object-fit: cover !important;
}
.object-fit-fill {
- -o-object-fit: fill !important;
- object-fit: fill !important;
+ object-fit: fill !important;
}
.object-fit-scale {
- -o-object-fit: scale-down !important;
- object-fit: scale-down !important;
+ object-fit: scale-down !important;
}
.object-fit-none {
- -o-object-fit: none !important;
- object-fit: none !important;
+ object-fit: none !important;
}
.opacity-0 {
}
.column-gap-0 {
- -moz-column-gap: 0 !important;
- column-gap: 0 !important;
+ column-gap: 0 !important;
}
.column-gap-1 {
- -moz-column-gap: 0.25rem !important;
- column-gap: 0.25rem !important;
+ column-gap: 0.25rem !important;
}
.column-gap-2 {
- -moz-column-gap: 0.5rem !important;
- column-gap: 0.5rem !important;
+ column-gap: 0.5rem !important;
}
.column-gap-3 {
- -moz-column-gap: 1rem !important;
- column-gap: 1rem !important;
+ column-gap: 1rem !important;
}
.column-gap-4 {
- -moz-column-gap: 1.5rem !important;
- column-gap: 1.5rem !important;
+ column-gap: 1.5rem !important;
}
.column-gap-5 {
- -moz-column-gap: 3rem !important;
- column-gap: 3rem !important;
+ column-gap: 3rem !important;
}
.font-monospace {
}
.user-select-all {
- -webkit-user-select: all !important;
- -moz-user-select: all !important;
- user-select: all !important;
+ user-select: all !important;
}
.user-select-auto {
- -webkit-user-select: auto !important;
- -moz-user-select: auto !important;
- user-select: auto !important;
+ user-select: auto !important;
}
.user-select-none {
- -webkit-user-select: none !important;
- -moz-user-select: none !important;
- user-select: none !important;
+ user-select: none !important;
}
.pe-none {
float: none !important;
}
.object-fit-sm-contain {
- -o-object-fit: contain !important;
- object-fit: contain !important;
+ object-fit: contain !important;
}
.object-fit-sm-cover {
- -o-object-fit: cover !important;
- object-fit: cover !important;
+ object-fit: cover !important;
}
.object-fit-sm-fill {
- -o-object-fit: fill !important;
- object-fit: fill !important;
+ object-fit: fill !important;
}
.object-fit-sm-scale {
- -o-object-fit: scale-down !important;
- object-fit: scale-down !important;
+ object-fit: scale-down !important;
}
.object-fit-sm-none {
- -o-object-fit: none !important;
- object-fit: none !important;
+ object-fit: none !important;
}
.d-sm-inline {
display: inline !important;
row-gap: 3rem !important;
}
.column-gap-sm-0 {
- -moz-column-gap: 0 !important;
- column-gap: 0 !important;
+ column-gap: 0 !important;
}
.column-gap-sm-1 {
- -moz-column-gap: 0.25rem !important;
- column-gap: 0.25rem !important;
+ column-gap: 0.25rem !important;
}
.column-gap-sm-2 {
- -moz-column-gap: 0.5rem !important;
- column-gap: 0.5rem !important;
+ column-gap: 0.5rem !important;
}
.column-gap-sm-3 {
- -moz-column-gap: 1rem !important;
- column-gap: 1rem !important;
+ column-gap: 1rem !important;
}
.column-gap-sm-4 {
- -moz-column-gap: 1.5rem !important;
- column-gap: 1.5rem !important;
+ column-gap: 1.5rem !important;
}
.column-gap-sm-5 {
- -moz-column-gap: 3rem !important;
- column-gap: 3rem !important;
+ column-gap: 3rem !important;
}
.text-sm-start {
text-align: left !important;
float: none !important;
}
.object-fit-md-contain {
- -o-object-fit: contain !important;
- object-fit: contain !important;
+ object-fit: contain !important;
}
.object-fit-md-cover {
- -o-object-fit: cover !important;
- object-fit: cover !important;
+ object-fit: cover !important;
}
.object-fit-md-fill {
- -o-object-fit: fill !important;
- object-fit: fill !important;
+ object-fit: fill !important;
}
.object-fit-md-scale {
- -o-object-fit: scale-down !important;
- object-fit: scale-down !important;
+ object-fit: scale-down !important;
}
.object-fit-md-none {
- -o-object-fit: none !important;
- object-fit: none !important;
+ object-fit: none !important;
}
.d-md-inline {
display: inline !important;
row-gap: 3rem !important;
}
.column-gap-md-0 {
- -moz-column-gap: 0 !important;
- column-gap: 0 !important;
+ column-gap: 0 !important;
}
.column-gap-md-1 {
- -moz-column-gap: 0.25rem !important;
- column-gap: 0.25rem !important;
+ column-gap: 0.25rem !important;
}
.column-gap-md-2 {
- -moz-column-gap: 0.5rem !important;
- column-gap: 0.5rem !important;
+ column-gap: 0.5rem !important;
}
.column-gap-md-3 {
- -moz-column-gap: 1rem !important;
- column-gap: 1rem !important;
+ column-gap: 1rem !important;
}
.column-gap-md-4 {
- -moz-column-gap: 1.5rem !important;
- column-gap: 1.5rem !important;
+ column-gap: 1.5rem !important;
}
.column-gap-md-5 {
- -moz-column-gap: 3rem !important;
- column-gap: 3rem !important;
+ column-gap: 3rem !important;
}
.text-md-start {
text-align: left !important;
float: none !important;
}
.object-fit-lg-contain {
- -o-object-fit: contain !important;
- object-fit: contain !important;
+ object-fit: contain !important;
}
.object-fit-lg-cover {
- -o-object-fit: cover !important;
- object-fit: cover !important;
+ object-fit: cover !important;
}
.object-fit-lg-fill {
- -o-object-fit: fill !important;
- object-fit: fill !important;
+ object-fit: fill !important;
}
.object-fit-lg-scale {
- -o-object-fit: scale-down !important;
- object-fit: scale-down !important;
+ object-fit: scale-down !important;
}
.object-fit-lg-none {
- -o-object-fit: none !important;
- object-fit: none !important;
+ object-fit: none !important;
}
.d-lg-inline {
display: inline !important;
row-gap: 3rem !important;
}
.column-gap-lg-0 {
- -moz-column-gap: 0 !important;
- column-gap: 0 !important;
+ column-gap: 0 !important;
}
.column-gap-lg-1 {
- -moz-column-gap: 0.25rem !important;
- column-gap: 0.25rem !important;
+ column-gap: 0.25rem !important;
}
.column-gap-lg-2 {
- -moz-column-gap: 0.5rem !important;
- column-gap: 0.5rem !important;
+ column-gap: 0.5rem !important;
}
.column-gap-lg-3 {
- -moz-column-gap: 1rem !important;
- column-gap: 1rem !important;
+ column-gap: 1rem !important;
}
.column-gap-lg-4 {
- -moz-column-gap: 1.5rem !important;
- column-gap: 1.5rem !important;
+ column-gap: 1.5rem !important;
}
.column-gap-lg-5 {
- -moz-column-gap: 3rem !important;
- column-gap: 3rem !important;
+ column-gap: 3rem !important;
}
.text-lg-start {
text-align: left !important;
float: none !important;
}
.object-fit-xl-contain {
- -o-object-fit: contain !important;
- object-fit: contain !important;
+ object-fit: contain !important;
}
.object-fit-xl-cover {
- -o-object-fit: cover !important;
- object-fit: cover !important;
+ object-fit: cover !important;
}
.object-fit-xl-fill {
- -o-object-fit: fill !important;
- object-fit: fill !important;
+ object-fit: fill !important;
}
.object-fit-xl-scale {
- -o-object-fit: scale-down !important;
- object-fit: scale-down !important;
+ object-fit: scale-down !important;
}
.object-fit-xl-none {
- -o-object-fit: none !important;
- object-fit: none !important;
+ object-fit: none !important;
}
.d-xl-inline {
display: inline !important;
row-gap: 3rem !important;
}
.column-gap-xl-0 {
- -moz-column-gap: 0 !important;
- column-gap: 0 !important;
+ column-gap: 0 !important;
}
.column-gap-xl-1 {
- -moz-column-gap: 0.25rem !important;
- column-gap: 0.25rem !important;
+ column-gap: 0.25rem !important;
}
.column-gap-xl-2 {
- -moz-column-gap: 0.5rem !important;
- column-gap: 0.5rem !important;
+ column-gap: 0.5rem !important;
}
.column-gap-xl-3 {
- -moz-column-gap: 1rem !important;
- column-gap: 1rem !important;
+ column-gap: 1rem !important;
}
.column-gap-xl-4 {
- -moz-column-gap: 1.5rem !important;
- column-gap: 1.5rem !important;
+ column-gap: 1.5rem !important;
}
.column-gap-xl-5 {
- -moz-column-gap: 3rem !important;
- column-gap: 3rem !important;
+ column-gap: 3rem !important;
}
.text-xl-start {
text-align: left !important;
float: none !important;
}
.object-fit-xxl-contain {
- -o-object-fit: contain !important;
- object-fit: contain !important;
+ object-fit: contain !important;
}
.object-fit-xxl-cover {
- -o-object-fit: cover !important;
- object-fit: cover !important;
+ object-fit: cover !important;
}
.object-fit-xxl-fill {
- -o-object-fit: fill !important;
- object-fit: fill !important;
+ object-fit: fill !important;
}
.object-fit-xxl-scale {
- -o-object-fit: scale-down !important;
- object-fit: scale-down !important;
+ object-fit: scale-down !important;
}
.object-fit-xxl-none {
- -o-object-fit: none !important;
- object-fit: none !important;
+ object-fit: none !important;
}
.d-xxl-inline {
display: inline !important;
row-gap: 3rem !important;
}
.column-gap-xxl-0 {
- -moz-column-gap: 0 !important;
- column-gap: 0 !important;
+ column-gap: 0 !important;
}
.column-gap-xxl-1 {
- -moz-column-gap: 0.25rem !important;
- column-gap: 0.25rem !important;
+ column-gap: 0.25rem !important;
}
.column-gap-xxl-2 {
- -moz-column-gap: 0.5rem !important;
- column-gap: 0.5rem !important;
+ column-gap: 0.5rem !important;
}
.column-gap-xxl-3 {
- -moz-column-gap: 1rem !important;
- column-gap: 1rem !important;
+ column-gap: 1rem !important;
}
.column-gap-xxl-4 {
- -moz-column-gap: 1.5rem !important;
- column-gap: 1.5rem !important;
+ column-gap: 1.5rem !important;
}
.column-gap-xxl-5 {
- -moz-column-gap: 3rem !important;
- column-gap: 3rem !important;
+ column-gap: 3rem !important;
}
.text-xxl-start {
text-align: left !important;
.d-print-none {
display: none !important;
}
-}/*# sourceMappingURL=darkly-compact.css.map */
\ No newline at end of file
+}
+
+/*# sourceMappingURL=darkly-compact.css.map */
.container,
.container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
margin-left: auto;
}
+@media (min-width: 576px) {
+ .container-sm, .container {
+ max-width: 540px;
+ }
+}
+@media (min-width: 768px) {
+ .container-md, .container-sm, .container {
+ max-width: 720px;
+ }
+}
@media (min-width: 992px) {
.container-lg, .container-md, .container-sm, .container {
+ max-width: 960px;
+ }
+}
+@media (min-width: 1200px) {
+ .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1140px;
}
}
+@media (min-width: 1400px) {
+ .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+ max-width: 1320px;
+ }
+}
:root {
--bs-breakpoint-xs: 0;
--bs-breakpoint-sm: 576px;
}
.navbar > .container,
.navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
display: flex;
flex-wrap: inherit;
align-items: center;
.container,
.container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
margin-left: auto;
}
+@media (min-width: 576px) {
+ .container-sm, .container {
+ max-width: 540px;
+ }
+}
+@media (min-width: 768px) {
+ .container-md, .container-sm, .container {
+ max-width: 720px;
+ }
+}
@media (min-width: 992px) {
.container-lg, .container-md, .container-sm, .container {
+ max-width: 960px;
+ }
+}
+@media (min-width: 1200px) {
+ .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1140px;
}
}
+@media (min-width: 1400px) {
+ .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+ max-width: 1320px;
+ }
+}
:root {
--bs-breakpoint-xs: 0;
--bs-breakpoint-sm: 576px;
}
.navbar > .container,
.navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
display: flex;
flex-wrap: inherit;
align-items: center;
}
abbr[title] {
- -webkit-text-decoration: underline dotted;
- text-decoration: underline dotted;
+ text-decoration: underline dotted;
cursor: help;
- -webkit-text-decoration-skip-ink: none;
- text-decoration-skip-ink: none;
+ text-decoration-skip-ink: none;
}
address {
background-color: var(--bs-body-bg);
background-clip: padding-box;
border: var(--bs-border-width) solid var(--bs-border-color);
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
+ appearance: none;
border-radius: var(--bs-border-radius);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
display: block;
padding: 0;
}
-.form-control::-moz-placeholder {
- color: var(--bs-secondary-color);
- opacity: 1;
-}
.form-control::placeholder {
color: var(--bs-secondary-color);
opacity: 1;
.form-control::file-selector-button {
padding: 0.375rem 0.75rem;
margin: -0.375rem -0.75rem;
- -webkit-margin-end: 0.75rem;
- margin-inline-end: 0.75rem;
+ margin-inline-end: 0.75rem;
color: var(--bs-body-color);
background-color: var(--bs-tertiary-bg);
pointer-events: none;
.form-control-sm::file-selector-button {
padding: 0.25rem 0.5rem;
margin: -0.25rem -0.5rem;
- -webkit-margin-end: 0.5rem;
- margin-inline-end: 0.5rem;
+ margin-inline-end: 0.5rem;
}
.form-control-lg {
.form-control-lg::file-selector-button {
padding: 0.5rem 1rem;
margin: -0.5rem -1rem;
- -webkit-margin-end: 1rem;
- margin-inline-end: 1rem;
+ margin-inline-end: 1rem;
}
textarea.form-control {
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
+ appearance: none;
}
@media (prefers-reduced-motion: reduce) {
.form-select {
background-position: center;
background-size: contain;
border: var(--bs-border-width) solid var(--bs-border-color);
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- -webkit-print-color-adjust: exact;
- print-color-adjust: exact;
+ appearance: none;
+ print-color-adjust: exact;
}
.form-check-input[type=checkbox] {
border-radius: 0.25em;
height: 1.5rem;
padding: 0;
background-color: transparent;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
+ appearance: none;
}
.form-range:focus {
outline: 0;
background-color: #f1641e;
border: 0;
border-radius: 1rem;
- -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
- -webkit-appearance: none;
- appearance: none;
+ appearance: none;
}
@media (prefers-reduced-motion: reduce) {
.form-range::-webkit-slider-thumb {
- -webkit-transition: none;
transition: none;
}
}
background-color: #f1641e;
border: 0;
border-radius: 1rem;
- -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
- -moz-appearance: none;
- appearance: none;
+ appearance: none;
}
@media (prefers-reduced-motion: reduce) {
.form-range::-moz-range-thumb {
- -moz-transition: none;
transition: none;
}
}
.form-floating > .form-control-plaintext {
padding: 1rem 0.75rem;
}
-.form-floating > .form-control::-moz-placeholder, .form-floating > .form-control-plaintext::-moz-placeholder {
- color: transparent;
-}
.form-floating > .form-control::placeholder,
.form-floating > .form-control-plaintext::placeholder {
color: transparent;
}
-.form-floating > .form-control:not(:-moz-placeholder-shown), .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
- padding-top: 1.625rem;
- padding-bottom: 0.625rem;
-}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown) {
padding-top: 1.625rem;
padding-bottom: 0.625rem;
}
-.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
- color: rgba(var(--bs-body-color-rgb), 0.65);
- transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
-}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
color: rgba(var(--bs-body-color-rgb), 0.65);
transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
-.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
- position: absolute;
- inset: 1rem 0.375rem;
- z-index: -1;
- height: 1.5em;
- content: "";
- background-color: var(--bs-body-bg);
- border-radius: var(--bs-border-radius);
-}
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control-plaintext ~ label::after,
text-align: center;
vertical-align: middle;
cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
+ user-select: none;
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
border-radius: var(--bs-btn-border-radius);
background-color: var(--bs-btn-bg);
}
.btn-close:disabled, .btn-close.disabled {
pointer-events: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
+ user-select: none;
opacity: var(--bs-btn-close-disabled-opacity);
}
--bs-toast-zindex: 1090;
position: absolute;
z-index: var(--bs-toast-zindex);
- width: -moz-max-content;
width: max-content;
max-width: 100%;
pointer-events: none;
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(-100%);
}
-}
-@media (max-width: 575.98px) {
.offcanvas-sm.offcanvas-end {
top: 0;
right: 0;
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(100%);
}
-}
-@media (max-width: 575.98px) {
.offcanvas-sm.offcanvas-top {
top: 0;
right: 0;
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(-100%);
}
-}
-@media (max-width: 575.98px) {
.offcanvas-sm.offcanvas-bottom {
right: 0;
left: 0;
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(100%);
}
-}
-@media (max-width: 575.98px) {
.offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) {
transform: none;
}
-}
-@media (max-width: 575.98px) {
.offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show {
visibility: visible;
}
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(-100%);
}
-}
-@media (max-width: 767.98px) {
.offcanvas-md.offcanvas-end {
top: 0;
right: 0;
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(100%);
}
-}
-@media (max-width: 767.98px) {
.offcanvas-md.offcanvas-top {
top: 0;
right: 0;
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(-100%);
}
-}
-@media (max-width: 767.98px) {
.offcanvas-md.offcanvas-bottom {
right: 0;
left: 0;
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(100%);
}
-}
-@media (max-width: 767.98px) {
.offcanvas-md.showing, .offcanvas-md.show:not(.hiding) {
transform: none;
}
-}
-@media (max-width: 767.98px) {
.offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show {
visibility: visible;
}
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(-100%);
}
-}
-@media (max-width: 991.98px) {
.offcanvas-lg.offcanvas-end {
top: 0;
right: 0;
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(100%);
}
-}
-@media (max-width: 991.98px) {
.offcanvas-lg.offcanvas-top {
top: 0;
right: 0;
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(-100%);
}
-}
-@media (max-width: 991.98px) {
.offcanvas-lg.offcanvas-bottom {
right: 0;
left: 0;
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(100%);
}
-}
-@media (max-width: 991.98px) {
.offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) {
transform: none;
}
-}
-@media (max-width: 991.98px) {
.offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show {
visibility: visible;
}
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(-100%);
}
-}
-@media (max-width: 1199.98px) {
.offcanvas-xl.offcanvas-end {
top: 0;
right: 0;
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(100%);
}
-}
-@media (max-width: 1199.98px) {
.offcanvas-xl.offcanvas-top {
top: 0;
right: 0;
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(-100%);
}
-}
-@media (max-width: 1199.98px) {
.offcanvas-xl.offcanvas-bottom {
right: 0;
left: 0;
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(100%);
}
-}
-@media (max-width: 1199.98px) {
.offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) {
transform: none;
}
-}
-@media (max-width: 1199.98px) {
.offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show {
visibility: visible;
}
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(-100%);
}
-}
-@media (max-width: 1399.98px) {
.offcanvas-xxl.offcanvas-end {
top: 0;
right: 0;
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateX(100%);
}
-}
-@media (max-width: 1399.98px) {
.offcanvas-xxl.offcanvas-top {
top: 0;
right: 0;
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(-100%);
}
-}
-@media (max-width: 1399.98px) {
.offcanvas-xxl.offcanvas-bottom {
right: 0;
left: 0;
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
transform: translateY(100%);
}
-}
-@media (max-width: 1399.98px) {
.offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) {
transform: none;
}
-}
-@media (max-width: 1399.98px) {
.offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show {
visibility: visible;
}
}
}
.placeholder-wave {
- -webkit-mask-image: linear-gradient(130deg, #222 55%, rgba(0, 0, 0, 0.8) 75%, #222 95%);
- mask-image: linear-gradient(130deg, #222 55%, rgba(0, 0, 0, 0.8) 75%, #222 95%);
- -webkit-mask-size: 200% 100%;
- mask-size: 200% 100%;
+ mask-image: linear-gradient(130deg, #222 55%, rgba(0, 0, 0, 0.8) 75%, #222 95%);
+ mask-size: 200% 100%;
animation: placeholder-wave 2s linear infinite;
}
@keyframes placeholder-wave {
100% {
- -webkit-mask-position: -200% 0%;
- mask-position: -200% 0%;
+ mask-position: -200% 0%;
}
}
.clearfix::after {
}
.object-fit-contain {
- -o-object-fit: contain !important;
- object-fit: contain !important;
+ object-fit: contain !important;
}
.object-fit-cover {
- -o-object-fit: cover !important;
- object-fit: cover !important;
+ object-fit: cover !important;
}
.object-fit-fill {
- -o-object-fit: fill !important;
- object-fit: fill !important;
+ object-fit: fill !important;
}
.object-fit-scale {
- -o-object-fit: scale-down !important;
- object-fit: scale-down !important;
+ object-fit: scale-down !important;
}
.object-fit-none {
- -o-object-fit: none !important;
- object-fit: none !important;
+ object-fit: none !important;
}
.opacity-0 {
}
.column-gap-0 {
- -moz-column-gap: 0 !important;
- column-gap: 0 !important;
+ column-gap: 0 !important;
}
.column-gap-1 {
- -moz-column-gap: 0.25rem !important;
- column-gap: 0.25rem !important;
+ column-gap: 0.25rem !important;
}
.column-gap-2 {
- -moz-column-gap: 0.5rem !important;
- column-gap: 0.5rem !important;
+ column-gap: 0.5rem !important;
}
.column-gap-3 {
- -moz-column-gap: 1rem !important;
- column-gap: 1rem !important;
+ column-gap: 1rem !important;
}
.column-gap-4 {
- -moz-column-gap: 1.5rem !important;
- column-gap: 1.5rem !important;
+ column-gap: 1.5rem !important;
}
.column-gap-5 {
- -moz-column-gap: 3rem !important;
- column-gap: 3rem !important;
+ column-gap: 3rem !important;
}
.font-monospace {
}
.user-select-all {
- -webkit-user-select: all !important;
- -moz-user-select: all !important;
- user-select: all !important;
+ user-select: all !important;
}
.user-select-auto {
- -webkit-user-select: auto !important;
- -moz-user-select: auto !important;
- user-select: auto !important;
+ user-select: auto !important;
}
.user-select-none {
- -webkit-user-select: none !important;
- -moz-user-select: none !important;
- user-select: none !important;
+ user-select: none !important;
}
.pe-none {
float: none !important;
}
.object-fit-sm-contain {
- -o-object-fit: contain !important;
- object-fit: contain !important;
+ object-fit: contain !important;
}
.object-fit-sm-cover {
- -o-object-fit: cover !important;
- object-fit: cover !important;
+ object-fit: cover !important;
}
.object-fit-sm-fill {
- -o-object-fit: fill !important;
- object-fit: fill !important;
+ object-fit: fill !important;
}
.object-fit-sm-scale {
- -o-object-fit: scale-down !important;
- object-fit: scale-down !important;
+ object-fit: scale-down !important;
}
.object-fit-sm-none {
- -o-object-fit: none !important;
- object-fit: none !important;
+ object-fit: none !important;
}
.d-sm-inline {
display: inline !important;
row-gap: 3rem !important;
}
.column-gap-sm-0 {
- -moz-column-gap: 0 !important;
- column-gap: 0 !important;
+ column-gap: 0 !important;
}
.column-gap-sm-1 {
- -moz-column-gap: 0.25rem !important;
- column-gap: 0.25rem !important;
+ column-gap: 0.25rem !important;
}
.column-gap-sm-2 {
- -moz-column-gap: 0.5rem !important;
- column-gap: 0.5rem !important;
+ column-gap: 0.5rem !important;
}
.column-gap-sm-3 {
- -moz-column-gap: 1rem !important;
- column-gap: 1rem !important;
+ column-gap: 1rem !important;
}
.column-gap-sm-4 {
- -moz-column-gap: 1.5rem !important;
- column-gap: 1.5rem !important;
+ column-gap: 1.5rem !important;
}
.column-gap-sm-5 {
- -moz-column-gap: 3rem !important;
- column-gap: 3rem !important;
+ column-gap: 3rem !important;
}
.text-sm-start {
text-align: left !important;
float: none !important;
}
.object-fit-md-contain {
- -o-object-fit: contain !important;
- object-fit: contain !important;
+ object-fit: contain !important;
}
.object-fit-md-cover {
- -o-object-fit: cover !important;
- object-fit: cover !important;
+ object-fit: cover !important;
}
.object-fit-md-fill {
- -o-object-fit: fill !important;
- object-fit: fill !important;
+ object-fit: fill !important;
}
.object-fit-md-scale {
- -o-object-fit: scale-down !important;
- object-fit: scale-down !important;
+ object-fit: scale-down !important;
}
.object-fit-md-none {
- -o-object-fit: none !important;
- object-fit: none !important;
+ object-fit: none !important;
}
.d-md-inline {
display: inline !important;
row-gap: 3rem !important;
}
.column-gap-md-0 {
- -moz-column-gap: 0 !important;
- column-gap: 0 !important;
+ column-gap: 0 !important;
}
.column-gap-md-1 {
- -moz-column-gap: 0.25rem !important;
- column-gap: 0.25rem !important;
+ column-gap: 0.25rem !important;
}
.column-gap-md-2 {
- -moz-column-gap: 0.5rem !important;
- column-gap: 0.5rem !important;
+ column-gap: 0.5rem !important;
}
.column-gap-md-3 {
- -moz-column-gap: 1rem !important;
- column-gap: 1rem !important;
+ column-gap: 1rem !important;
}
.column-gap-md-4 {
- -moz-column-gap: 1.5rem !important;
- column-gap: 1.5rem !important;
+ column-gap: 1.5rem !important;
}
.column-gap-md-5 {
- -moz-column-gap: 3rem !important;
- column-gap: 3rem !important;
+ column-gap: 3rem !important;
}
.text-md-start {
text-align: left !important;
float: none !important;
}
.object-fit-lg-contain {
- -o-object-fit: contain !important;
- object-fit: contain !important;
+ object-fit: contain !important;
}
.object-fit-lg-cover {
- -o-object-fit: cover !important;
- object-fit: cover !important;
+ object-fit: cover !important;
}
.object-fit-lg-fill {
- -o-object-fit: fill !important;
- object-fit: fill !important;
+ object-fit: fill !important;
}
.object-fit-lg-scale {
- -o-object-fit: scale-down !important;
- object-fit: scale-down !important;
+ object-fit: scale-down !important;
}
.object-fit-lg-none {
- -o-object-fit: none !important;
- object-fit: none !important;
+ object-fit: none !important;
}
.d-lg-inline {
display: inline !important;
row-gap: 3rem !important;
}
.column-gap-lg-0 {
- -moz-column-gap: 0 !important;
- column-gap: 0 !important;
+ column-gap: 0 !important;
}
.column-gap-lg-1 {
- -moz-column-gap: 0.25rem !important;
- column-gap: 0.25rem !important;
+ column-gap: 0.25rem !important;
}
.column-gap-lg-2 {
- -moz-column-gap: 0.5rem !important;
- column-gap: 0.5rem !important;
+ column-gap: 0.5rem !important;
}
.column-gap-lg-3 {
- -moz-column-gap: 1rem !important;
- column-gap: 1rem !important;
+ column-gap: 1rem !important;
}
.column-gap-lg-4 {
- -moz-column-gap: 1.5rem !important;
- column-gap: 1.5rem !important;
+ column-gap: 1.5rem !important;
}
.column-gap-lg-5 {
- -moz-column-gap: 3rem !important;
- column-gap: 3rem !important;
+ column-gap: 3rem !important;
}
.text-lg-start {
text-align: left !important;
float: none !important;
}
.object-fit-xl-contain {
- -o-object-fit: contain !important;
- object-fit: contain !important;
+ object-fit: contain !important;
}
.object-fit-xl-cover {
- -o-object-fit: cover !important;
- object-fit: cover !important;
+ object-fit: cover !important;
}
.object-fit-xl-fill {
- -o-object-fit: fill !important;
- object-fit: fill !important;
+ object-fit: fill !important;
}
.object-fit-xl-scale {
- -o-object-fit: scale-down !important;
- object-fit: scale-down !important;
+ object-fit: scale-down !important;
}
.object-fit-xl-none {
- -o-object-fit: none !important;
- object-fit: none !important;
+ object-fit: none !important;
}
.d-xl-inline {
display: inline !important;
row-gap: 3rem !important;
}
.column-gap-xl-0 {
- -moz-column-gap: 0 !important;
- column-gap: 0 !important;
+ column-gap: 0 !important;
}
.column-gap-xl-1 {
- -moz-column-gap: 0.25rem !important;
- column-gap: 0.25rem !important;
+ column-gap: 0.25rem !important;
}
.column-gap-xl-2 {
- -moz-column-gap: 0.5rem !important;
- column-gap: 0.5rem !important;
+ column-gap: 0.5rem !important;
}
.column-gap-xl-3 {
- -moz-column-gap: 1rem !important;
- column-gap: 1rem !important;
+ column-gap: 1rem !important;
}
.column-gap-xl-4 {
- -moz-column-gap: 1.5rem !important;
- column-gap: 1.5rem !important;
+ column-gap: 1.5rem !important;
}
.column-gap-xl-5 {
- -moz-column-gap: 3rem !important;
- column-gap: 3rem !important;
+ column-gap: 3rem !important;
}
.text-xl-start {
text-align: left !important;
float: none !important;
}
.object-fit-xxl-contain {
- -o-object-fit: contain !important;
- object-fit: contain !important;
+ object-fit: contain !important;
}
.object-fit-xxl-cover {
- -o-object-fit: cover !important;
- object-fit: cover !important;
+ object-fit: cover !important;
}
.object-fit-xxl-fill {
- -o-object-fit: fill !important;
- object-fit: fill !important;
+ object-fit: fill !important;
}
.object-fit-xxl-scale {
- -o-object-fit: scale-down !important;
- object-fit: scale-down !important;
+ object-fit: scale-down !important;
}
.object-fit-xxl-none {
- -o-object-fit: none !important;
- object-fit: none !important;
+ object-fit: none !important;
}
.d-xxl-inline {
display: inline !important;
row-gap: 3rem !important;
}
.column-gap-xxl-0 {
- -moz-column-gap: 0 !important;
- column-gap: 0 !important;
+ column-gap: 0 !important;
}
.column-gap-xxl-1 {
- -moz-column-gap: 0.25rem !important;
- column-gap: 0.25rem !important;
+ column-gap: 0.25rem !important;
}
.column-gap-xxl-2 {
- -moz-column-gap: 0.5rem !important;
- column-gap: 0.5rem !important;
+ column-gap: 0.5rem !important;
}
.column-gap-xxl-3 {
- -moz-column-gap: 1rem !important;
- column-gap: 1rem !important;
+ column-gap: 1rem !important;
}
.column-gap-xxl-4 {
- -moz-column-gap: 1.5rem !important;
- column-gap: 1.5rem !important;
+ column-gap: 1.5rem !important;
}
.column-gap-xxl-5 {
- -moz-column-gap: 3rem !important;
- column-gap: 3rem !important;
+ column-gap: 3rem !important;
}
.text-xxl-start {
text-align: left !important;
.d-print-none {
display: none !important;
}
-}/*# sourceMappingURL=litely-compact.css.map */
\ No newline at end of file
+}
+
+/*# sourceMappingURL=litely-compact.css.map */
.container,
.container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
margin-left: auto;
}
+@media (min-width: 576px) {
+ .container-sm, .container {
+ max-width: 540px;
+ }
+}
+@media (min-width: 768px) {
+ .container-md, .container-sm, .container {
+ max-width: 720px;
+ }
+}
@media (min-width: 992px) {
.container-lg, .container-md, .container-sm, .container {
+ max-width: 960px;
+ }
+}
+@media (min-width: 1200px) {
+ .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1140px;
}
}
+@media (min-width: 1400px) {
+ .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+ max-width: 1320px;
+ }
+}
:root {
--bs-breakpoint-xs: 0;
--bs-breakpoint-sm: 576px;
}
.navbar > .container,
.navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
display: flex;
flex-wrap: inherit;
align-items: center;
.container,
.container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
margin-left: auto;
}
+@media (min-width: 576px) {
+ .container-sm, .container {
+ max-width: 540px;
+ }
+}
+@media (min-width: 768px) {
+ .container-md, .container-sm, .container {
+ max-width: 720px;
+ }
+}
@media (min-width: 992px) {
.container-lg, .container-md, .container-sm, .container {
+ max-width: 960px;
+ }
+}
+@media (min-width: 1200px) {
+ .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1140px;
}
}
+@media (min-width: 1400px) {
+ .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+ max-width: 1320px;
+ }
+}
:root {
--bs-breakpoint-xs: 0;
--bs-breakpoint-sm: 576px;
}
.navbar > .container,
.navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
display: flex;
flex-wrap: inherit;
align-items: center;
const siteView = this.props.siteRes?.site_view;
const person = UserService.Instance.myUserInfo?.local_user_view.person;
return (
- <nav
- className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg"
- id="navbar"
- >
- <NavLink
- id="navTitle"
- to="/"
- title={siteView?.site.description ?? siteView?.site.name}
- className="d-flex align-items-center navbar-brand me-md-3"
- onMouseUp={linkEvent(this, handleCollapseClick)}
+ <div className="shadow-sm">
+ <nav
+ className="navbar navbar-expand-md navbar-light p-0 px-3 container-lg"
+ id="navbar"
>
- {siteView?.site.icon && showAvatars() && (
- <PictrsImage src={siteView.site.icon} icon />
- )}
- {siteView?.site.name}
- </NavLink>
- {person && (
- <ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
- <li id="navMessages" className="nav-item nav-item-icon">
- <NavLink
- to="/inbox"
- className="p-1 nav-link border-0 nav-messages"
- title={I18NextService.i18n.t("unread_messages", {
- count: Number(this.state.unreadApplicationCountRes.state),
- formattedCount: numToSI(this.unreadInboxCount),
- })}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- <Icon icon="bell" />
- {this.unreadInboxCount > 0 && (
- <span className="mx-1 badge text-bg-light">
- {numToSI(this.unreadInboxCount)}
- </span>
- )}
- </NavLink>
- </li>
- {this.moderatesSomething && (
- <li className="nav-item nav-item-icon">
+ <NavLink
+ id="navTitle"
+ to="/"
+ title={siteView?.site.description ?? siteView?.site.name}
+ className="d-flex align-items-center navbar-brand me-md-3"
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ {siteView?.site.icon && showAvatars() && (
+ <PictrsImage src={siteView.site.icon} icon />
+ )}
+ {siteView?.site.name}
+ </NavLink>
+ {person && (
+ <ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
+ <li id="navMessages" className="nav-item nav-item-icon">
<NavLink
- to="/reports"
- className="p-1 nav-link border-0"
- title={I18NextService.i18n.t("unread_reports", {
- count: Number(this.unreadReportCount),
- formattedCount: numToSI(this.unreadReportCount),
+ to="/inbox"
+ className="p-1 nav-link border-0 nav-messages"
+ title={I18NextService.i18n.t("unread_messages", {
+ count: Number(this.state.unreadApplicationCountRes.state),
+ formattedCount: numToSI(this.unreadInboxCount),
})}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
- <Icon icon="shield" />
- {this.unreadReportCount > 0 && (
+ <Icon icon="bell" />
+ {this.unreadInboxCount > 0 && (
<span className="mx-1 badge text-bg-light">
- {numToSI(this.unreadReportCount)}
+ {numToSI(this.unreadInboxCount)}
</span>
)}
</NavLink>
</li>
- )}
- {amAdmin() && (
- <li className="nav-item nav-item-icon">
+ {this.moderatesSomething && (
+ <li className="nav-item nav-item-icon">
+ <NavLink
+ to="/reports"
+ className="p-1 nav-link border-0"
+ title={I18NextService.i18n.t("unread_reports", {
+ count: Number(this.unreadReportCount),
+ formattedCount: numToSI(this.unreadReportCount),
+ })}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ <Icon icon="shield" />
+ {this.unreadReportCount > 0 && (
+ <span className="mx-1 badge text-bg-light">
+ {numToSI(this.unreadReportCount)}
+ </span>
+ )}
+ </NavLink>
+ </li>
+ )}
+ {amAdmin() && (
+ <li className="nav-item nav-item-icon">
+ <NavLink
+ to="/registration_applications"
+ className="p-1 nav-link border-0"
+ title={I18NextService.i18n.t(
+ "unread_registration_applications",
+ {
+ count: Number(this.unreadApplicationCount),
+ formattedCount: numToSI(this.unreadApplicationCount),
+ }
+ )}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ <Icon icon="clipboard" />
+ {this.unreadApplicationCount > 0 && (
+ <span className="mx-1 badge text-bg-light">
+ {numToSI(this.unreadApplicationCount)}
+ </span>
+ )}
+ </NavLink>
+ </li>
+ )}
+ </ul>
+ )}
+ <button
+ className="navbar-toggler border-0 p-1"
+ type="button"
+ aria-label="menu"
+ data-tippy-content={I18NextService.i18n.t("expand_here")}
+ data-bs-toggle="collapse"
+ data-bs-target="#navbarDropdown"
+ aria-controls="navbarDropdown"
+ aria-expanded="false"
+ ref={this.collapseButtonRef}
+ >
+ <Icon icon="menu" />
+ </button>
+ <div
+ className="collapse navbar-collapse my-2"
+ id="navbarDropdown"
+ ref={this.mobileMenuRef}
+ >
+ <ul id="navbarLinks" className="me-auto navbar-nav">
+ <li className="nav-item">
<NavLink
- to="/registration_applications"
- className="p-1 nav-link border-0"
- title={I18NextService.i18n.t(
- "unread_registration_applications",
- {
- count: Number(this.unreadApplicationCount),
- formattedCount: numToSI(this.unreadApplicationCount),
- }
- )}
+ to="/communities"
+ className="nav-link"
+ title={I18NextService.i18n.t("communities")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
- <Icon icon="clipboard" />
- {this.unreadApplicationCount > 0 && (
- <span className="mx-1 badge text-bg-light">
- {numToSI(this.unreadApplicationCount)}
- </span>
- )}
+ {I18NextService.i18n.t("communities")}
</NavLink>
</li>
- )}
- </ul>
- )}
- <button
- className="navbar-toggler border-0 p-1"
- type="button"
- aria-label="menu"
- data-tippy-content={I18NextService.i18n.t("expand_here")}
- data-bs-toggle="collapse"
- data-bs-target="#navbarDropdown"
- aria-controls="navbarDropdown"
- aria-expanded="false"
- ref={this.collapseButtonRef}
- >
- <Icon icon="menu" />
- </button>
- <div
- className="collapse navbar-collapse my-2"
- id="navbarDropdown"
- ref={this.mobileMenuRef}
- >
- <ul id="navbarLinks" className="me-auto navbar-nav">
- <li className="nav-item">
- <NavLink
- to="/communities"
- className="nav-link"
- title={I18NextService.i18n.t("communities")}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- {I18NextService.i18n.t("communities")}
- </NavLink>
- </li>
- <li className="nav-item">
- {/* TODO make sure this works: https://github.com/infernojs/inferno/issues/1608 */}
- <NavLink
- to={{
- pathname: "/create_post",
- search: "",
- hash: "",
- key: "",
- state: { prevPath: this.currentLocation },
- }}
- className="nav-link"
- title={I18NextService.i18n.t("create_post")}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- {I18NextService.i18n.t("create_post")}
- </NavLink>
- </li>
- {this.props.siteRes && canCreateCommunity(this.props.siteRes) && (
<li className="nav-item">
+ {/* TODO make sure this works: https://github.com/infernojs/inferno/issues/1608 */}
<NavLink
- to="/create_community"
+ to={{
+ pathname: "/create_post",
+ search: "",
+ hash: "",
+ key: "",
+ state: { prevPath: this.currentLocation },
+ }}
className="nav-link"
- title={I18NextService.i18n.t("create_community")}
+ title={I18NextService.i18n.t("create_post")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
- {I18NextService.i18n.t("create_community")}
+ {I18NextService.i18n.t("create_post")}
</NavLink>
</li>
- )}
- <li className="nav-item">
- <a
- className="nav-link d-inline-flex align-items-center d-md-inline-block"
- title={I18NextService.i18n.t("support_lemmy")}
- href={donateLemmyUrl}
- >
- <Icon icon="heart" classes="small" />
- <span className="d-inline ms-1 d-md-none ms-md-0">
- {I18NextService.i18n.t("support_lemmy")}
- </span>
- </a>
- </li>
- </ul>
- <ul id="navbarIcons" className="navbar-nav">
- <li id="navSearch" className="nav-item">
- <NavLink
- to="/search"
- className="nav-link d-inline-flex align-items-center d-md-inline-block"
- title={I18NextService.i18n.t("search")}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- <Icon icon="search" />
- <span className="d-inline ms-1 d-md-none ms-md-0">
- {I18NextService.i18n.t("search")}
- </span>
- </NavLink>
- </li>
- {amAdmin() && (
- <li id="navAdmin" className="nav-item">
+ {this.props.siteRes && canCreateCommunity(this.props.siteRes) && (
+ <li className="nav-item">
+ <NavLink
+ to="/create_community"
+ className="nav-link"
+ title={I18NextService.i18n.t("create_community")}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ {I18NextService.i18n.t("create_community")}
+ </NavLink>
+ </li>
+ )}
+ <li className="nav-item">
+ <a
+ className="nav-link d-inline-flex align-items-center d-md-inline-block"
+ title={I18NextService.i18n.t("support_lemmy")}
+ href={donateLemmyUrl}
+ >
+ <Icon icon="heart" classes="small" />
+ <span className="d-inline ms-1 d-md-none ms-md-0">
+ {I18NextService.i18n.t("support_lemmy")}
+ </span>
+ </a>
+ </li>
+ </ul>
+ <ul id="navbarIcons" className="navbar-nav">
+ <li id="navSearch" className="nav-item">
<NavLink
- to="/admin"
+ to="/search"
className="nav-link d-inline-flex align-items-center d-md-inline-block"
- title={I18NextService.i18n.t("admin_settings")}
+ title={I18NextService.i18n.t("search")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
- <Icon icon="settings" />
+ <Icon icon="search" />
<span className="d-inline ms-1 d-md-none ms-md-0">
- {I18NextService.i18n.t("admin_settings")}
+ {I18NextService.i18n.t("search")}
</span>
</NavLink>
</li>
- )}
- {person ? (
- <>
- <li id="navMessages" className="nav-item">
+ {amAdmin() && (
+ <li id="navAdmin" className="nav-item">
<NavLink
+ to="/admin"
className="nav-link d-inline-flex align-items-center d-md-inline-block"
- to="/inbox"
- title={I18NextService.i18n.t("unread_messages", {
- count: Number(this.unreadInboxCount),
- formattedCount: numToSI(this.unreadInboxCount),
- })}
+ title={I18NextService.i18n.t("admin_settings")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
- <Icon icon="bell" />
- <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
- {I18NextService.i18n.t("unread_messages", {
- count: Number(this.unreadInboxCount),
- formattedCount: numToSI(this.unreadInboxCount),
- })}
+ <Icon icon="settings" />
+ <span className="d-inline ms-1 d-md-none ms-md-0">
+ {I18NextService.i18n.t("admin_settings")}
</span>
- {this.unreadInboxCount > 0 && (
- <span className="mx-1 badge text-bg-light">
- {numToSI(this.unreadInboxCount)}
- </span>
- )}
</NavLink>
</li>
- {this.moderatesSomething && (
- <li id="navModeration" className="nav-item">
+ )}
+ {person ? (
+ <>
+ <li id="navMessages" className="nav-item">
<NavLink
className="nav-link d-inline-flex align-items-center d-md-inline-block"
- to="/reports"
- title={I18NextService.i18n.t("unread_reports", {
- count: Number(this.unreadReportCount),
- formattedCount: numToSI(this.unreadReportCount),
+ to="/inbox"
+ title={I18NextService.i18n.t("unread_messages", {
+ count: Number(this.unreadInboxCount),
+ formattedCount: numToSI(this.unreadInboxCount),
})}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
- <Icon icon="shield" />
+ <Icon icon="bell" />
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
- {I18NextService.i18n.t("unread_reports", {
- count: Number(this.unreadReportCount),
- formattedCount: numToSI(this.unreadReportCount),
+ {I18NextService.i18n.t("unread_messages", {
+ count: Number(this.unreadInboxCount),
+ formattedCount: numToSI(this.unreadInboxCount),
})}
</span>
- {this.unreadReportCount > 0 && (
+ {this.unreadInboxCount > 0 && (
<span className="mx-1 badge text-bg-light">
- {numToSI(this.unreadReportCount)}
+ {numToSI(this.unreadInboxCount)}
</span>
)}
</NavLink>
</li>
- )}
- {amAdmin() && (
- <li id="navApplications" className="nav-item">
- <NavLink
- to="/registration_applications"
- className="nav-link d-inline-flex align-items-center d-md-inline-block"
- title={I18NextService.i18n.t(
- "unread_registration_applications",
- {
- count: Number(this.unreadApplicationCount),
- formattedCount: numToSI(this.unreadApplicationCount),
- }
- )}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- <Icon icon="clipboard" />
- <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
- {I18NextService.i18n.t(
+ {this.moderatesSomething && (
+ <li id="navModeration" className="nav-item">
+ <NavLink
+ className="nav-link d-inline-flex align-items-center d-md-inline-block"
+ to="/reports"
+ title={I18NextService.i18n.t("unread_reports", {
+ count: Number(this.unreadReportCount),
+ formattedCount: numToSI(this.unreadReportCount),
+ })}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ <Icon icon="shield" />
+ <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
+ {I18NextService.i18n.t("unread_reports", {
+ count: Number(this.unreadReportCount),
+ formattedCount: numToSI(this.unreadReportCount),
+ })}
+ </span>
+ {this.unreadReportCount > 0 && (
+ <span className="mx-1 badge text-bg-light">
+ {numToSI(this.unreadReportCount)}
+ </span>
+ )}
+ </NavLink>
+ </li>
+ )}
+ {amAdmin() && (
+ <li id="navApplications" className="nav-item">
+ <NavLink
+ to="/registration_applications"
+ className="nav-link d-inline-flex align-items-center d-md-inline-block"
+ title={I18NextService.i18n.t(
"unread_registration_applications",
{
count: Number(this.unreadApplicationCount),
),
}
)}
- </span>
- {this.unreadApplicationCount > 0 && (
- <span className="mx-1 badge text-bg-light">
- {numToSI(this.unreadApplicationCount)}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ <Icon icon="clipboard" />
+ <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
+ {I18NextService.i18n.t(
+ "unread_registration_applications",
+ {
+ count: Number(this.unreadApplicationCount),
+ formattedCount: numToSI(
+ this.unreadApplicationCount
+ ),
+ }
+ )}
</span>
- )}
+ {this.unreadApplicationCount > 0 && (
+ <span className="mx-1 badge text-bg-light">
+ {numToSI(this.unreadApplicationCount)}
+ </span>
+ )}
+ </NavLink>
+ </li>
+ )}
+ {person && (
+ <li id="dropdownUser" className="dropdown">
+ <button
+ type="button"
+ className="btn dropdown-toggle"
+ aria-expanded="false"
+ data-bs-toggle="dropdown"
+ >
+ {showAvatars() && person.avatar && (
+ <PictrsImage src={person.avatar} icon />
+ )}
+ {person.display_name ?? person.name}
+ </button>
+ <ul
+ className="dropdown-menu"
+ style={{ "min-width": "fit-content" }}
+ >
+ <li>
+ <NavLink
+ to={`/u/${person.name}`}
+ className="dropdown-item px-2"
+ title={I18NextService.i18n.t("profile")}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ <Icon icon="user" classes="me-1" />
+ {I18NextService.i18n.t("profile")}
+ </NavLink>
+ </li>
+ <li>
+ <NavLink
+ to="/settings"
+ className="dropdown-item px-2"
+ title={I18NextService.i18n.t("settings")}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ <Icon icon="settings" classes="me-1" />
+ {I18NextService.i18n.t("settings")}
+ </NavLink>
+ </li>
+ <li>
+ <hr className="dropdown-divider" />
+ </li>
+ <li>
+ <button
+ className="dropdown-item btn btn-link px-2"
+ onClick={linkEvent(this, handleLogOut)}
+ >
+ <Icon icon="log-out" classes="me-1" />
+ {I18NextService.i18n.t("logout")}
+ </button>
+ </li>
+ </ul>
+ </li>
+ )}
+ </>
+ ) : (
+ <>
+ <li className="nav-item">
+ <NavLink
+ to="/login"
+ className="nav-link"
+ title={I18NextService.i18n.t("login")}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ {I18NextService.i18n.t("login")}
</NavLink>
</li>
- )}
- {person && (
- <li id="dropdownUser" className="dropdown">
- <button
- type="button"
- className="btn dropdown-toggle"
- aria-expanded="false"
- data-bs-toggle="dropdown"
- >
- {showAvatars() && person.avatar && (
- <PictrsImage src={person.avatar} icon />
- )}
- {person.display_name ?? person.name}
- </button>
- <ul
- className="dropdown-menu"
- style={{ "min-width": "fit-content" }}
+ <li className="nav-item">
+ <NavLink
+ to="/signup"
+ className="nav-link"
+ title={I18NextService.i18n.t("sign_up")}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
>
- <li>
- <NavLink
- to={`/u/${person.name}`}
- className="dropdown-item px-2"
- title={I18NextService.i18n.t("profile")}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- <Icon icon="user" classes="me-1" />
- {I18NextService.i18n.t("profile")}
- </NavLink>
- </li>
- <li>
- <NavLink
- to="/settings"
- className="dropdown-item px-2"
- title={I18NextService.i18n.t("settings")}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- <Icon icon="settings" classes="me-1" />
- {I18NextService.i18n.t("settings")}
- </NavLink>
- </li>
- <li>
- <hr className="dropdown-divider" />
- </li>
- <li>
- <button
- className="dropdown-item btn btn-link px-2"
- onClick={linkEvent(this, handleLogOut)}
- >
- <Icon icon="log-out" classes="me-1" />
- {I18NextService.i18n.t("logout")}
- </button>
- </li>
- </ul>
+ {I18NextService.i18n.t("sign_up")}
+ </NavLink>
</li>
- )}
- </>
- ) : (
- <>
- <li className="nav-item">
- <NavLink
- to="/login"
- className="nav-link"
- title={I18NextService.i18n.t("login")}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- {I18NextService.i18n.t("login")}
- </NavLink>
- </li>
- <li className="nav-item">
- <NavLink
- to="/signup"
- className="nav-link"
- title={I18NextService.i18n.t("sign_up")}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- {I18NextService.i18n.t("sign_up")}
- </NavLink>
- </li>
- </>
- )}
- </ul>
- </div>
- </nav>
+ </>
+ )}
+ </ul>
+ </div>
+ </nav>
+ </div>
);
}
render() {
return (
- <div className="vote-bar col-1 pe-0 small text-center">
+ <div className="vote-bar pe-0 small text-center">
<button
type="button"
className={`btn-animate btn btn-link p-0 ${
/>
<div className="row">
- <div className="col-12 col-md-8">
+ <div className="col-12 col-md-8 col-lg-9">
{this.communityInfo(res)}
<div className="d-block d-md-none">
<button
{this.listings(res)}
<Paginator page={page} onChange={this.handlePageChange} />
</div>
- <div className="d-none d-md-block col-md-4">
+ <div className="d-none d-md-block col-md-4 col-lg-3">
{this.sidebar(res)}
</div>
</div>
/>
{site_setup && (
<div className="row">
- <main role="main" className="col-12 col-md-8">
+ <main role="main" className="col-12 col-md-8 col-lg-9">
{tagline && (
<div
id="tagline"
<div className="d-block d-md-none">{this.mobileView}</div>
{this.posts}
</main>
- <aside className="d-none d-md-block col-md-4">
+ <aside className="d-none d-md-block col-md-4 col-lg-3">
{this.mySidebar}
</aside>
</div>
<div className="d-none d-sm-block">
<article className="row post-container">
{!this.props.viewOnly && (
- <VoteButtons
- voteContentType={VoteContentType.Post}
- id={this.postView.post.id}
- onVote={this.props.onPostVote}
- enableDownvotes={this.props.enableDownvotes}
- counts={this.postView.counts}
- my_vote={this.postView.my_vote}
- />
+ <div className="col flex-grow-0">
+ <VoteButtons
+ voteContentType={VoteContentType.Post}
+ id={this.postView.post.id}
+ onVote={this.props.onPostVote}
+ enableDownvotes={this.props.enableDownvotes}
+ counts={this.postView.counts}
+ my_vote={this.postView.my_vote}
+ />
+ </div>
)}
- <div className="col-sm-2 pe-0 post-media">
- <div className="">{this.thumbnail()}</div>
- </div>
- <div className="col-12 col-sm-9">
+ <div className="col flex-grow-1">
<div className="row">
- <div className="col-12">
+ <div className="col-sm-3 col-lg-2 pe-0 post-media">
+ <div className="">{this.thumbnail()}</div>
+ </div>
+ <div className="col-12 col-sm-9 col-lg-10">
{this.postTitleLine()}
{this.createdLine()}
{this.showBodyPreview()}
const res = this.state.postRes.data;
return (
<div className="row">
- <div className="col-12 col-md-8 mb-3">
+ <div className="col-12 col-md-8 col-lg-9 mb-3">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
{this.state.commentViewType == CommentViewType.Flat &&
this.commentsFlat()}
</div>
- <div className="d-none d-md-block col-md-4">{this.sidebar()}</div>
+ <div className="d-none d-md-block col-md-4 col-lg-3">
+ {this.sidebar()}
+ </div>
</div>
);
}
projects / lemmy-ui.git / commitdiff