From 71b7375773e745a5dc0db647b4fbe090c7a94442 Mon Sep 17 00:00:00 2001 From: Jay Sitter <jay@jaysitter.com> Date: Sun, 25 Jun 2023 14:00:55 -0400 Subject: [PATCH] fix(UI): Make max-width wider, and make sidebar narrower on wide screens #1536 --- src/assets/css/main.css | 3 +- src/assets/css/themes/_variables.scss | 4 - src/assets/css/themes/darkly-compact.css | 350 +++++------------- src/assets/css/themes/darkly-red.css | 32 +- src/assets/css/themes/darkly.css | 32 +- src/assets/css/themes/litely-compact.css | 350 +++++------------- src/assets/css/themes/litely-red.css | 32 +- src/assets/css/themes/litely.css | 32 +- src/shared/components/community/community.tsx | 4 +- src/shared/components/home/home.tsx | 4 +- src/shared/components/post/post-listing.tsx | 4 +- src/shared/components/post/post.tsx | 6 +- 12 files changed, 309 insertions(+), 544 deletions(-) diff --git a/src/assets/css/main.css b/src/assets/css/main.css index cb4a8b8..ba234c0 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -198,8 +198,7 @@ blockquote { .thumbnail { object-fit: cover; - min-height: 60px; - max-height: 80px; + aspect-ratio: 4/3; width: 100%; } diff --git a/src/assets/css/themes/_variables.scss b/src/assets/css/themes/_variables.scss index e7d7dae..1418597 100644 --- a/src/assets/css/themes/_variables.scss +++ b/src/assets/css/themes/_variables.scss @@ -1,6 +1,2 @@ $link-decoration: none; $min-contrast-ratio: 3; - -$container-max-widths: ( - lg: 1140px, -); diff --git a/src/assets/css/themes/darkly-compact.css b/src/assets/css/themes/darkly-compact.css index 38274dc..6bc0f21 100644 --- a/src/assets/css/themes/darkly-compact.css +++ b/src/assets/css/themes/darkly-compact.css @@ -309,11 +309,9 @@ p { } 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 { @@ -2131,9 +2129,7 @@ progress { 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; } @@ -2164,10 +2160,6 @@ progress { 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; @@ -2179,8 +2171,7 @@ progress { .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; @@ -2228,8 +2219,7 @@ progress { .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 { @@ -2241,8 +2231,7 @@ progress { .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 { @@ -2295,9 +2284,7 @@ textarea.form-control-lg { 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 { @@ -2375,11 +2362,8 @@ textarea.form-control-lg { 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; @@ -2478,9 +2462,7 @@ textarea.form-control-lg { height: 1.5rem; padding: 0; background-color: transparent; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + appearance: none; } .form-range:focus { outline: 0; @@ -2501,14 +2483,11 @@ textarea.form-control-lg { 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; } } @@ -2530,14 +2509,11 @@ textarea.form-control-lg { 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; } } @@ -2598,17 +2574,10 @@ textarea.form-control-lg { .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) { @@ -2624,10 +2593,6 @@ textarea.form-control-lg { 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, @@ -2635,15 +2600,6 @@ textarea.form-control-lg { 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, @@ -2967,9 +2923,7 @@ textarea.form-control-lg { 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); @@ -5354,9 +5308,7 @@ textarea.form-control-lg { } .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); } @@ -5406,7 +5358,6 @@ textarea.form-control-lg { --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; @@ -6307,8 +6258,6 @@ textarea.form-control-lg { 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; @@ -6316,8 +6265,6 @@ textarea.form-control-lg { 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; @@ -6327,8 +6274,6 @@ textarea.form-control-lg { 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; @@ -6337,13 +6282,9 @@ textarea.form-control-lg { 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; } @@ -6395,8 +6336,6 @@ textarea.form-control-lg { 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; @@ -6404,8 +6343,6 @@ textarea.form-control-lg { 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; @@ -6415,8 +6352,6 @@ textarea.form-control-lg { 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; @@ -6425,13 +6360,9 @@ textarea.form-control-lg { 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; } @@ -6483,8 +6414,6 @@ textarea.form-control-lg { 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; @@ -6492,8 +6421,6 @@ textarea.form-control-lg { 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; @@ -6503,8 +6430,6 @@ textarea.form-control-lg { 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; @@ -6513,13 +6438,9 @@ textarea.form-control-lg { 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; } @@ -6571,8 +6492,6 @@ textarea.form-control-lg { 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; @@ -6580,8 +6499,6 @@ textarea.form-control-lg { 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; @@ -6591,8 +6508,6 @@ textarea.form-control-lg { 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; @@ -6601,13 +6516,9 @@ textarea.form-control-lg { 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; } @@ -6659,8 +6570,6 @@ textarea.form-control-lg { 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; @@ -6668,8 +6577,6 @@ textarea.form-control-lg { 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; @@ -6679,8 +6586,6 @@ textarea.form-control-lg { 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; @@ -6689,13 +6594,9 @@ textarea.form-control-lg { 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; } @@ -6850,17 +6751,14 @@ textarea.form-control-lg { } } .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 { @@ -7233,28 +7131,23 @@ textarea.form-control-lg { } .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 { @@ -8334,33 +8227,27 @@ textarea.form-control-lg { } .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 { @@ -8916,21 +8803,15 @@ textarea.form-control-lg { } .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 { @@ -9196,24 +9077,19 @@ textarea.form-control-lg { 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; @@ -9713,28 +9589,22 @@ textarea.form-control-lg { 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; @@ -9757,24 +9627,19 @@ textarea.form-control-lg { 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; @@ -10274,28 +10139,22 @@ textarea.form-control-lg { 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; @@ -10318,24 +10177,19 @@ textarea.form-control-lg { 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; @@ -10835,28 +10689,22 @@ textarea.form-control-lg { 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; @@ -10879,24 +10727,19 @@ textarea.form-control-lg { 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; @@ -11396,28 +11239,22 @@ textarea.form-control-lg { 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; @@ -11440,24 +11277,19 @@ textarea.form-control-lg { 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; @@ -11957,28 +11789,22 @@ textarea.form-control-lg { 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; @@ -12038,4 +11864,6 @@ textarea.form-control-lg { .d-print-none { display: none !important; } -}/*# sourceMappingURL=darkly-compact.css.map */ \ No newline at end of file +} + +/*# sourceMappingURL=darkly-compact.css.map */ diff --git a/src/assets/css/themes/darkly-red.css b/src/assets/css/themes/darkly-red.css index 4a7459c..3fadd29 100644 --- a/src/assets/css/themes/darkly-red.css +++ b/src/assets/css/themes/darkly-red.css @@ -726,7 +726,11 @@ progress { .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%; @@ -736,11 +740,31 @@ progress { 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; @@ -3867,7 +3891,11 @@ textarea.form-control-lg { } .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; diff --git a/src/assets/css/themes/darkly.css b/src/assets/css/themes/darkly.css index e8ac226..5b7e8a0 100644 --- a/src/assets/css/themes/darkly.css +++ b/src/assets/css/themes/darkly.css @@ -726,7 +726,11 @@ progress { .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%; @@ -736,11 +740,31 @@ progress { 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; @@ -3867,7 +3891,11 @@ textarea.form-control-lg { } .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; diff --git a/src/assets/css/themes/litely-compact.css b/src/assets/css/themes/litely-compact.css index 3cfc347..89bb4c6 100644 --- a/src/assets/css/themes/litely-compact.css +++ b/src/assets/css/themes/litely-compact.css @@ -309,11 +309,9 @@ p { } 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 { @@ -2130,9 +2128,7 @@ progress { 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; } @@ -2163,10 +2159,6 @@ progress { 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; @@ -2178,8 +2170,7 @@ progress { .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; @@ -2227,8 +2218,7 @@ progress { .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 { @@ -2240,8 +2230,7 @@ progress { .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 { @@ -2294,9 +2283,7 @@ textarea.form-control-lg { 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 { @@ -2374,11 +2361,8 @@ textarea.form-control-lg { 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; @@ -2477,9 +2461,7 @@ textarea.form-control-lg { height: 1.5rem; padding: 0; background-color: transparent; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + appearance: none; } .form-range:focus { outline: 0; @@ -2500,14 +2482,11 @@ textarea.form-control-lg { 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; } } @@ -2529,14 +2508,11 @@ textarea.form-control-lg { 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; } } @@ -2597,17 +2573,10 @@ textarea.form-control-lg { .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) { @@ -2623,10 +2592,6 @@ textarea.form-control-lg { 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, @@ -2634,15 +2599,6 @@ textarea.form-control-lg { 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, @@ -2966,9 +2922,7 @@ textarea.form-control-lg { 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); @@ -5353,9 +5307,7 @@ textarea.form-control-lg { } .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); } @@ -5405,7 +5357,6 @@ textarea.form-control-lg { --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; @@ -6306,8 +6257,6 @@ textarea.form-control-lg { 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; @@ -6315,8 +6264,6 @@ textarea.form-control-lg { 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; @@ -6326,8 +6273,6 @@ textarea.form-control-lg { 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; @@ -6336,13 +6281,9 @@ textarea.form-control-lg { 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; } @@ -6394,8 +6335,6 @@ textarea.form-control-lg { 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; @@ -6403,8 +6342,6 @@ textarea.form-control-lg { 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; @@ -6414,8 +6351,6 @@ textarea.form-control-lg { 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; @@ -6424,13 +6359,9 @@ textarea.form-control-lg { 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; } @@ -6482,8 +6413,6 @@ textarea.form-control-lg { 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; @@ -6491,8 +6420,6 @@ textarea.form-control-lg { 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; @@ -6502,8 +6429,6 @@ textarea.form-control-lg { 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; @@ -6512,13 +6437,9 @@ textarea.form-control-lg { 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; } @@ -6570,8 +6491,6 @@ textarea.form-control-lg { 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; @@ -6579,8 +6498,6 @@ textarea.form-control-lg { 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; @@ -6590,8 +6507,6 @@ textarea.form-control-lg { 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; @@ -6600,13 +6515,9 @@ textarea.form-control-lg { 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; } @@ -6658,8 +6569,6 @@ textarea.form-control-lg { 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; @@ -6667,8 +6576,6 @@ textarea.form-control-lg { 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; @@ -6678,8 +6585,6 @@ textarea.form-control-lg { 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; @@ -6688,13 +6593,9 @@ textarea.form-control-lg { 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; } @@ -6849,17 +6750,14 @@ textarea.form-control-lg { } } .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 { @@ -7232,28 +7130,23 @@ textarea.form-control-lg { } .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 { @@ -8333,33 +8226,27 @@ textarea.form-control-lg { } .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 { @@ -8915,21 +8802,15 @@ textarea.form-control-lg { } .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 { @@ -9195,24 +9076,19 @@ textarea.form-control-lg { 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; @@ -9712,28 +9588,22 @@ textarea.form-control-lg { 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; @@ -9756,24 +9626,19 @@ textarea.form-control-lg { 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; @@ -10273,28 +10138,22 @@ textarea.form-control-lg { 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; @@ -10317,24 +10176,19 @@ textarea.form-control-lg { 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; @@ -10834,28 +10688,22 @@ textarea.form-control-lg { 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; @@ -10878,24 +10726,19 @@ textarea.form-control-lg { 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; @@ -11395,28 +11238,22 @@ textarea.form-control-lg { 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; @@ -11439,24 +11276,19 @@ textarea.form-control-lg { 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; @@ -11956,28 +11788,22 @@ textarea.form-control-lg { 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; @@ -12037,4 +11863,6 @@ textarea.form-control-lg { .d-print-none { display: none !important; } -}/*# sourceMappingURL=litely-compact.css.map */ \ No newline at end of file +} + +/*# sourceMappingURL=litely-compact.css.map */ diff --git a/src/assets/css/themes/litely-red.css b/src/assets/css/themes/litely-red.css index ba1a7f8..23aa4cb 100644 --- a/src/assets/css/themes/litely-red.css +++ b/src/assets/css/themes/litely-red.css @@ -725,7 +725,11 @@ progress { .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%; @@ -735,11 +739,31 @@ progress { 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; @@ -3866,7 +3890,11 @@ textarea.form-control-lg { } .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; diff --git a/src/assets/css/themes/litely.css b/src/assets/css/themes/litely.css index 5a482c5..89f2d48 100644 --- a/src/assets/css/themes/litely.css +++ b/src/assets/css/themes/litely.css @@ -725,7 +725,11 @@ progress { .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%; @@ -735,11 +739,31 @@ progress { 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; @@ -3866,7 +3890,11 @@ textarea.form-control-lg { } .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; diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx index 111b47c..191f8ae 100644 --- a/src/shared/components/community/community.tsx +++ b/src/shared/components/community/community.tsx @@ -317,7 +317,7 @@ export class Community extends Component< /> <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 @@ -340,7 +340,7 @@ export class Community extends Component< {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> diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index 7fa942a..5ef1a87 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -387,7 +387,7 @@ export class Home extends Component<any, HomeState> { /> {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" @@ -397,7 +397,7 @@ export class Home extends Component<any, HomeState> { <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> diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index 092e253..75d026a 100644 --- a/src/shared/components/post/post-listing.tsx +++ b/src/shared/components/post/post-listing.tsx @@ -1413,10 +1413,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> { my_vote={this.postView.my_vote} /> )} - <div className="col-sm-2 pe-0 post-media"> + <div className="col-sm-1 col-md-2 pe-0 post-media"> <div className="">{this.thumbnail()}</div> </div> - <div className="col-12 col-sm-9"> + <div className="col-12 col-sm-8 col-md-9 "> <div className="row"> <div className="col-12"> {this.postTitleLine()} diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx index f0aa3ff..fe7897f 100644 --- a/src/shared/components/post/post.tsx +++ b/src/shared/components/post/post.tsx @@ -348,7 +348,7 @@ export class Post extends Component<any, PostState> { 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} @@ -416,7 +416,9 @@ export class Post extends Component<any, PostState> { {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> ); } -- 2.44.1