diff --git a/src/assets/css/themes/_variables.scss b/src/assets/css/themes/_variables.scss index 47a01ce0..3aff4cf3 100644 --- a/src/assets/css/themes/_variables.scss +++ b/src/assets/css/themes/_variables.scss @@ -1,3 +1,3 @@ $link-decoration: none; $min-contrast-ratio: 3; -$font-size-base: 0.875rem; +$font-size-root: 93.75%; diff --git a/src/assets/css/themes/darkly-compact.css b/src/assets/css/themes/darkly-compact.css index 3b422edb..5061c106 100644 --- a/src/assets/css/themes/darkly-compact.css +++ b/src/assets/css/themes/darkly-compact.css @@ -114,8 +114,9 @@ hr.my-3 { --bs-font-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-root-font-size: 93.75%; --bs-body-font-family: var(--bs-font-sans-serif); - --bs-body-font-size: 0.875rem; + --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: #dee2e6; @@ -224,6 +225,9 @@ hr.my-3 { box-sizing: border-box; } +:root { + font-size: var(--bs-root-font-size); +} @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; @@ -287,20 +291,20 @@ h3, .h3 { } h4, .h4 { - font-size: calc(1.25625rem + 0.075vw); + font-size: calc(1.275rem + 0.3vw); } @media (min-width: 1200px) { h4, .h4 { - font-size: 1.3125rem; + font-size: 1.5rem; } } h5, .h5 { - font-size: 1.09375rem; + font-size: 1.25rem; } h6, .h6 { - font-size: 0.875rem; + font-size: 1rem; } p { @@ -626,7 +630,7 @@ progress { } .lead { - font-size: 1.09375rem; + font-size: 1.25rem; font-weight: 300; } @@ -720,7 +724,7 @@ progress { .blockquote { margin-bottom: 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; } .blockquote > :last-child { margin-bottom: 0; @@ -2103,13 +2107,13 @@ progress { .col-form-label-lg { padding-top: calc(0.5rem + var(--bs-border-width)); padding-bottom: calc(0.5rem + var(--bs-border-width)); - font-size: 1.09375rem; + font-size: 1.25rem; } .col-form-label-sm { padding-top: calc(0.25rem + var(--bs-border-width)); padding-bottom: calc(0.25rem + var(--bs-border-width)); - font-size: 0.765625rem; + font-size: 0.875rem; } .form-text { @@ -2122,7 +2126,7 @@ progress { display: block; width: 100%; padding: 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: #fff; @@ -2213,7 +2217,7 @@ progress { .form-control-sm { min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2)); padding: 0.25rem 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } .form-control-sm::file-selector-button { @@ -2225,7 +2229,7 @@ progress { .form-control-lg { min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2)); padding: 0.5rem 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } .form-control-lg::file-selector-button { @@ -2272,7 +2276,7 @@ textarea.form-control-lg { display: block; width: 100%; padding: 0.375rem 2.25rem 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: #fff; @@ -2312,7 +2316,7 @@ textarea.form-control-lg { padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } @@ -2320,7 +2324,7 @@ textarea.form-control-lg { padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } @@ -2330,7 +2334,7 @@ textarea.form-control-lg { .form-check { display: block; - min-height: 1.3125rem; + min-height: 1.5rem; padding-left: 1.5em; margin-bottom: 0.125rem; } @@ -2658,7 +2662,7 @@ textarea.form-control-lg { display: flex; align-items: center; padding: 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: #adb5bd; @@ -2674,7 +2678,7 @@ textarea.form-control-lg { .input-group-lg > .input-group-text, .input-group-lg > .btn { padding: 0.5rem 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } @@ -2683,7 +2687,7 @@ textarea.form-control-lg { .input-group-sm > .input-group-text, .input-group-sm > .btn { padding: 0.25rem 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } @@ -2733,7 +2737,7 @@ textarea.form-control-lg { max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.765625rem; + font-size: 0.875rem; color: #fff; background-color: var(--bs-success); border-radius: var(--bs-border-radius); @@ -2823,7 +2827,7 @@ textarea.form-control-lg { max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.765625rem; + font-size: 0.875rem; color: #fff; background-color: var(--bs-danger); border-radius: var(--bs-border-radius); @@ -2901,7 +2905,7 @@ textarea.form-control-lg { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.375rem; --bs-btn-font-family: ; - --bs-btn-font-size: 0.875rem; + --bs-btn-font-size: 1rem; --bs-btn-font-weight: 400; --bs-btn-line-height: 1.5; --bs-btn-color: var(--bs-body-color); @@ -3269,14 +3273,14 @@ textarea.form-control-lg { .btn-lg, .btn-group-lg > .btn { --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1rem; - --bs-btn-font-size: 1.09375rem; + --bs-btn-font-size: 1.25rem; --bs-btn-border-radius: var(--bs-border-radius-lg); } .btn-sm, .btn-group-sm > .btn { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.5rem; - --bs-btn-font-size: 0.765625rem; + --bs-btn-font-size: 0.875rem; --bs-btn-border-radius: var(--bs-border-radius-sm); } @@ -3349,7 +3353,7 @@ textarea.form-control-lg { --bs-dropdown-padding-x: 0; --bs-dropdown-padding-y: 0.5rem; --bs-dropdown-spacer: 0.125rem; - --bs-dropdown-font-size: 0.875rem; + --bs-dropdown-font-size: 1rem; --bs-dropdown-color: var(--bs-body-color); --bs-dropdown-bg: #222; --bs-dropdown-border-color: #444; @@ -3607,7 +3611,7 @@ textarea.form-control-lg { display: block; padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x); margin-bottom: 0; - font-size: 0.765625rem; + font-size: 0.875rem; color: var(--bs-dropdown-header-color); white-space: nowrap; } @@ -3884,15 +3888,15 @@ textarea.form-control-lg { --bs-navbar-hover-color: #fff; --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3); --bs-navbar-active-color: #fff; - --bs-navbar-brand-padding-y: 0.3359375rem; + --bs-navbar-brand-padding-y: 0.3125rem; --bs-navbar-brand-margin-end: 1rem; - --bs-navbar-brand-font-size: 1.09375rem; + --bs-navbar-brand-font-size: 1.25rem; --bs-navbar-brand-color: #fff; --bs-navbar-brand-hover-color: #fff; --bs-navbar-nav-link-padding-x: 0.5rem; --bs-navbar-toggler-padding-y: 0.25rem; --bs-navbar-toggler-padding-x: 0.75rem; - --bs-navbar-toggler-font-size: 1.09375rem; + --bs-navbar-toggler-font-size: 1.25rem; --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --bs-navbar-toggler-border-color: rgba(34, 34, 34, 0.1); --bs-navbar-toggler-border-radius: var(--bs-border-radius); @@ -4517,7 +4521,7 @@ textarea.form-control-lg { align-items: center; width: 100%; padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x); - font-size: 0.875rem; + font-size: 1rem; color: var(--bs-accordion-btn-color); text-align: left; background-color: var(--bs-accordion-btn-bg); @@ -4661,7 +4665,7 @@ textarea.form-control-lg { .pagination { --bs-pagination-padding-x: 0.75rem; --bs-pagination-padding-y: 0.375rem; - --bs-pagination-font-size: 0.875rem; + --bs-pagination-font-size: 1rem; --bs-pagination-color: #fff; --bs-pagination-bg: #00bc8c; --bs-pagination-border-width: 0; @@ -4740,14 +4744,14 @@ textarea.form-control-lg { .pagination-lg { --bs-pagination-padding-x: 1.5rem; --bs-pagination-padding-y: 0.75rem; - --bs-pagination-font-size: 1.09375rem; + --bs-pagination-font-size: 1.25rem; --bs-pagination-border-radius: var(--bs-border-radius-lg); } .pagination-sm { --bs-pagination-padding-x: 0.5rem; --bs-pagination-padding-y: 0.25rem; - --bs-pagination-font-size: 0.765625rem; + --bs-pagination-font-size: 0.875rem; --bs-pagination-border-radius: var(--bs-border-radius-sm); } @@ -4881,7 +4885,7 @@ textarea.form-control-lg { .progress, .progress-stacked { --bs-progress-height: 1rem; - --bs-progress-font-size: 0.65625rem; + --bs-progress-font-size: 0.75rem; --bs-progress-bg: #444; --bs-progress-border-radius: var(--bs-border-radius); --bs-progress-box-shadow: var(--bs-box-shadow-inset); @@ -5685,7 +5689,7 @@ textarea.form-control-lg { --bs-tooltip-padding-x: 0.5rem; --bs-tooltip-padding-y: 0.25rem; --bs-tooltip-margin: ; - --bs-tooltip-font-size: 0.765625rem; + --bs-tooltip-font-size: 0.875rem; --bs-tooltip-color: var(--bs-body-bg); --bs-tooltip-bg: var(--bs-emphasis-color); --bs-tooltip-border-radius: var(--bs-border-radius); @@ -5784,7 +5788,7 @@ textarea.form-control-lg { .popover { --bs-popover-zindex: 1070; --bs-popover-max-width: 276px; - --bs-popover-font-size: 0.765625rem; + --bs-popover-font-size: 0.875rem; --bs-popover-bg: #303030; --bs-popover-border-width: var(--bs-border-width); --bs-popover-border-color: var(--bs-border-color-translucent); @@ -5793,7 +5797,7 @@ textarea.form-control-lg { --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --bs-popover-header-padding-x: 1rem; --bs-popover-header-padding-y: 0.5rem; - --bs-popover-header-font-size: 0.875rem; + --bs-popover-header-font-size: 1rem; --bs-popover-header-color: inherit; --bs-popover-header-bg: #444; --bs-popover-body-padding-x: 1rem; @@ -8267,15 +8271,15 @@ textarea.form-control-lg { } .fs-4 { - font-size: calc(1.25625rem + 0.075vw) !important; + font-size: calc(1.275rem + 0.3vw) !important; } .fs-5 { - font-size: 1.09375rem !important; + font-size: 1.25rem !important; } .fs-6 { - font-size: 0.875rem !important; + font-size: 1rem !important; } .fst-italic { @@ -11827,7 +11831,7 @@ textarea.form-control-lg { font-size: 2rem !important; } .fs-4 { - font-size: 1.3125rem !important; + font-size: 1.5rem !important; } } @media print { diff --git a/src/assets/css/themes/darkly-pureblack.css b/src/assets/css/themes/darkly-pureblack.css index e5189043..3fe1e912 100644 --- a/src/assets/css/themes/darkly-pureblack.css +++ b/src/assets/css/themes/darkly-pureblack.css @@ -74,6 +74,7 @@ --bs-font-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(243, 243, 243, 0.15), rgba(243, 243, 243, 0)); + --bs-root-font-size: 93.75%; --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: 0.9375rem; --bs-body-font-weight: 400; @@ -184,6 +185,9 @@ box-sizing: border-box; } +:root { + font-size: var(--bs-root-font-size); +} @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; @@ -726,7 +730,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 +744,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 +3895,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-red.css b/src/assets/css/themes/darkly-red.css index a5292e8d..0527b429 100644 --- a/src/assets/css/themes/darkly-red.css +++ b/src/assets/css/themes/darkly-red.css @@ -74,8 +74,9 @@ --bs-font-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-root-font-size: 93.75%; --bs-body-font-family: var(--bs-font-sans-serif); - --bs-body-font-size: 0.875rem; + --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: #dee2e6; @@ -184,6 +185,9 @@ box-sizing: border-box; } +:root { + font-size: var(--bs-root-font-size); +} @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; @@ -247,20 +251,20 @@ h3, .h3 { } h4, .h4 { - font-size: calc(1.25625rem + 0.075vw); + font-size: calc(1.275rem + 0.3vw); } @media (min-width: 1200px) { h4, .h4 { - font-size: 1.3125rem; + font-size: 1.5rem; } } h5, .h5 { - font-size: 1.09375rem; + font-size: 1.25rem; } h6, .h6 { - font-size: 0.875rem; + font-size: 1rem; } p { @@ -586,7 +590,7 @@ progress { } .lead { - font-size: 1.09375rem; + font-size: 1.25rem; font-weight: 300; } @@ -680,7 +684,7 @@ progress { .blockquote { margin-bottom: 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; } .blockquote > :last-child { margin-bottom: 0; @@ -2087,13 +2091,13 @@ progress { .col-form-label-lg { padding-top: calc(0.5rem + var(--bs-border-width)); padding-bottom: calc(0.5rem + var(--bs-border-width)); - font-size: 1.09375rem; + font-size: 1.25rem; } .col-form-label-sm { padding-top: calc(0.25rem + var(--bs-border-width)); padding-bottom: calc(0.25rem + var(--bs-border-width)); - font-size: 0.765625rem; + font-size: 0.875rem; } .form-text { @@ -2106,7 +2110,7 @@ progress { display: block; width: 100%; padding: 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: #fff; @@ -2197,7 +2201,7 @@ progress { .form-control-sm { min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2)); padding: 0.25rem 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } .form-control-sm::file-selector-button { @@ -2209,7 +2213,7 @@ progress { .form-control-lg { min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2)); padding: 0.5rem 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } .form-control-lg::file-selector-button { @@ -2256,7 +2260,7 @@ textarea.form-control-lg { display: block; width: 100%; padding: 0.375rem 2.25rem 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: #fff; @@ -2296,7 +2300,7 @@ textarea.form-control-lg { padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } @@ -2304,7 +2308,7 @@ textarea.form-control-lg { padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } @@ -2314,7 +2318,7 @@ textarea.form-control-lg { .form-check { display: block; - min-height: 1.3125rem; + min-height: 1.5rem; padding-left: 1.5em; margin-bottom: 0.125rem; } @@ -2642,7 +2646,7 @@ textarea.form-control-lg { display: flex; align-items: center; padding: 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: #adb5bd; @@ -2658,7 +2662,7 @@ textarea.form-control-lg { .input-group-lg > .input-group-text, .input-group-lg > .btn { padding: 0.5rem 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } @@ -2667,7 +2671,7 @@ textarea.form-control-lg { .input-group-sm > .input-group-text, .input-group-sm > .btn { padding: 0.25rem 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } @@ -2717,7 +2721,7 @@ textarea.form-control-lg { max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.765625rem; + font-size: 0.875rem; color: #fff; background-color: var(--bs-success); border-radius: var(--bs-border-radius); @@ -2807,7 +2811,7 @@ textarea.form-control-lg { max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.765625rem; + font-size: 0.875rem; color: #fff; background-color: var(--bs-danger); border-radius: var(--bs-border-radius); @@ -2885,7 +2889,7 @@ textarea.form-control-lg { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.375rem; --bs-btn-font-family: ; - --bs-btn-font-size: 0.875rem; + --bs-btn-font-size: 1rem; --bs-btn-font-weight: 400; --bs-btn-line-height: 1.5; --bs-btn-color: var(--bs-body-color); @@ -3253,14 +3257,14 @@ textarea.form-control-lg { .btn-lg, .btn-group-lg > .btn { --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1rem; - --bs-btn-font-size: 1.09375rem; + --bs-btn-font-size: 1.25rem; --bs-btn-border-radius: var(--bs-border-radius-lg); } .btn-sm, .btn-group-sm > .btn { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.5rem; - --bs-btn-font-size: 0.765625rem; + --bs-btn-font-size: 0.875rem; --bs-btn-border-radius: var(--bs-border-radius-sm); } @@ -3333,7 +3337,7 @@ textarea.form-control-lg { --bs-dropdown-padding-x: 0; --bs-dropdown-padding-y: 0.5rem; --bs-dropdown-spacer: 0.125rem; - --bs-dropdown-font-size: 0.875rem; + --bs-dropdown-font-size: 1rem; --bs-dropdown-color: var(--bs-body-color); --bs-dropdown-bg: #222; --bs-dropdown-border-color: #444; @@ -3591,7 +3595,7 @@ textarea.form-control-lg { display: block; padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x); margin-bottom: 0; - font-size: 0.765625rem; + font-size: 0.875rem; color: var(--bs-dropdown-header-color); white-space: nowrap; } @@ -3868,15 +3872,15 @@ textarea.form-control-lg { --bs-navbar-hover-color: #fff; --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3); --bs-navbar-active-color: #fff; - --bs-navbar-brand-padding-y: 0.3359375rem; + --bs-navbar-brand-padding-y: 0.3125rem; --bs-navbar-brand-margin-end: 1rem; - --bs-navbar-brand-font-size: 1.09375rem; + --bs-navbar-brand-font-size: 1.25rem; --bs-navbar-brand-color: #fff; --bs-navbar-brand-hover-color: #fff; --bs-navbar-nav-link-padding-x: 0.5rem; --bs-navbar-toggler-padding-y: 0.25rem; --bs-navbar-toggler-padding-x: 0.75rem; - --bs-navbar-toggler-font-size: 1.09375rem; + --bs-navbar-toggler-font-size: 1.25rem; --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --bs-navbar-toggler-border-color: rgba(34, 34, 34, 0.1); --bs-navbar-toggler-border-radius: var(--bs-border-radius); @@ -4505,7 +4509,7 @@ textarea.form-control-lg { align-items: center; width: 100%; padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x); - font-size: 0.875rem; + font-size: 1rem; color: var(--bs-accordion-btn-color); text-align: left; background-color: var(--bs-accordion-btn-bg); @@ -4649,7 +4653,7 @@ textarea.form-control-lg { .pagination { --bs-pagination-padding-x: 0.75rem; --bs-pagination-padding-y: 0.375rem; - --bs-pagination-font-size: 0.875rem; + --bs-pagination-font-size: 1rem; --bs-pagination-color: #fff; --bs-pagination-bg: #00bc8c; --bs-pagination-border-width: 0; @@ -4728,14 +4732,14 @@ textarea.form-control-lg { .pagination-lg { --bs-pagination-padding-x: 1.5rem; --bs-pagination-padding-y: 0.75rem; - --bs-pagination-font-size: 1.09375rem; + --bs-pagination-font-size: 1.25rem; --bs-pagination-border-radius: var(--bs-border-radius-lg); } .pagination-sm { --bs-pagination-padding-x: 0.5rem; --bs-pagination-padding-y: 0.25rem; - --bs-pagination-font-size: 0.765625rem; + --bs-pagination-font-size: 0.875rem; --bs-pagination-border-radius: var(--bs-border-radius-sm); } @@ -4869,7 +4873,7 @@ textarea.form-control-lg { .progress, .progress-stacked { --bs-progress-height: 1rem; - --bs-progress-font-size: 0.65625rem; + --bs-progress-font-size: 0.75rem; --bs-progress-bg: #444; --bs-progress-border-radius: var(--bs-border-radius); --bs-progress-box-shadow: var(--bs-box-shadow-inset); @@ -5673,7 +5677,7 @@ textarea.form-control-lg { --bs-tooltip-padding-x: 0.5rem; --bs-tooltip-padding-y: 0.25rem; --bs-tooltip-margin: ; - --bs-tooltip-font-size: 0.765625rem; + --bs-tooltip-font-size: 0.875rem; --bs-tooltip-color: var(--bs-body-bg); --bs-tooltip-bg: var(--bs-emphasis-color); --bs-tooltip-border-radius: var(--bs-border-radius); @@ -5772,7 +5776,7 @@ textarea.form-control-lg { .popover { --bs-popover-zindex: 1070; --bs-popover-max-width: 276px; - --bs-popover-font-size: 0.765625rem; + --bs-popover-font-size: 0.875rem; --bs-popover-bg: #303030; --bs-popover-border-width: var(--bs-border-width); --bs-popover-border-color: var(--bs-border-color-translucent); @@ -5781,7 +5785,7 @@ textarea.form-control-lg { --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --bs-popover-header-padding-x: 1rem; --bs-popover-header-padding-y: 0.5rem; - --bs-popover-header-font-size: 0.875rem; + --bs-popover-header-font-size: 1rem; --bs-popover-header-color: inherit; --bs-popover-header-bg: #444; --bs-popover-body-padding-x: 1rem; @@ -8255,15 +8259,15 @@ textarea.form-control-lg { } .fs-4 { - font-size: calc(1.25625rem + 0.075vw) !important; + font-size: calc(1.275rem + 0.3vw) !important; } .fs-5 { - font-size: 1.09375rem !important; + font-size: 1.25rem !important; } .fs-6 { - font-size: 0.875rem !important; + font-size: 1rem !important; } .fst-italic { @@ -11815,7 +11819,7 @@ textarea.form-control-lg { font-size: 2rem !important; } .fs-4 { - font-size: 1.3125rem !important; + font-size: 1.5rem !important; } } @media print { diff --git a/src/assets/css/themes/darkly.css b/src/assets/css/themes/darkly.css index 3b3a6f2e..8baaf71c 100644 --- a/src/assets/css/themes/darkly.css +++ b/src/assets/css/themes/darkly.css @@ -74,8 +74,9 @@ --bs-font-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-root-font-size: 93.75%; --bs-body-font-family: var(--bs-font-sans-serif); - --bs-body-font-size: 0.875rem; + --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: #dee2e6; @@ -184,6 +185,9 @@ box-sizing: border-box; } +:root { + font-size: var(--bs-root-font-size); +} @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; @@ -247,20 +251,20 @@ h3, .h3 { } h4, .h4 { - font-size: calc(1.25625rem + 0.075vw); + font-size: calc(1.275rem + 0.3vw); } @media (min-width: 1200px) { h4, .h4 { - font-size: 1.3125rem; + font-size: 1.5rem; } } h5, .h5 { - font-size: 1.09375rem; + font-size: 1.25rem; } h6, .h6 { - font-size: 0.875rem; + font-size: 1rem; } p { @@ -586,7 +590,7 @@ progress { } .lead { - font-size: 1.09375rem; + font-size: 1.25rem; font-weight: 300; } @@ -680,7 +684,7 @@ progress { .blockquote { margin-bottom: 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; } .blockquote > :last-child { margin-bottom: 0; @@ -2087,13 +2091,13 @@ progress { .col-form-label-lg { padding-top: calc(0.5rem + var(--bs-border-width)); padding-bottom: calc(0.5rem + var(--bs-border-width)); - font-size: 1.09375rem; + font-size: 1.25rem; } .col-form-label-sm { padding-top: calc(0.25rem + var(--bs-border-width)); padding-bottom: calc(0.25rem + var(--bs-border-width)); - font-size: 0.765625rem; + font-size: 0.875rem; } .form-text { @@ -2106,7 +2110,7 @@ progress { display: block; width: 100%; padding: 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: #fff; @@ -2197,7 +2201,7 @@ progress { .form-control-sm { min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2)); padding: 0.25rem 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } .form-control-sm::file-selector-button { @@ -2209,7 +2213,7 @@ progress { .form-control-lg { min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2)); padding: 0.5rem 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } .form-control-lg::file-selector-button { @@ -2256,7 +2260,7 @@ textarea.form-control-lg { display: block; width: 100%; padding: 0.375rem 2.25rem 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: #fff; @@ -2296,7 +2300,7 @@ textarea.form-control-lg { padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } @@ -2304,7 +2308,7 @@ textarea.form-control-lg { padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } @@ -2314,7 +2318,7 @@ textarea.form-control-lg { .form-check { display: block; - min-height: 1.3125rem; + min-height: 1.5rem; padding-left: 1.5em; margin-bottom: 0.125rem; } @@ -2642,7 +2646,7 @@ textarea.form-control-lg { display: flex; align-items: center; padding: 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: #adb5bd; @@ -2658,7 +2662,7 @@ textarea.form-control-lg { .input-group-lg > .input-group-text, .input-group-lg > .btn { padding: 0.5rem 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } @@ -2667,7 +2671,7 @@ textarea.form-control-lg { .input-group-sm > .input-group-text, .input-group-sm > .btn { padding: 0.25rem 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } @@ -2717,7 +2721,7 @@ textarea.form-control-lg { max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.765625rem; + font-size: 0.875rem; color: #fff; background-color: var(--bs-success); border-radius: var(--bs-border-radius); @@ -2807,7 +2811,7 @@ textarea.form-control-lg { max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.765625rem; + font-size: 0.875rem; color: #fff; background-color: var(--bs-danger); border-radius: var(--bs-border-radius); @@ -2885,7 +2889,7 @@ textarea.form-control-lg { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.375rem; --bs-btn-font-family: ; - --bs-btn-font-size: 0.875rem; + --bs-btn-font-size: 1rem; --bs-btn-font-weight: 400; --bs-btn-line-height: 1.5; --bs-btn-color: var(--bs-body-color); @@ -3253,14 +3257,14 @@ textarea.form-control-lg { .btn-lg, .btn-group-lg > .btn { --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1rem; - --bs-btn-font-size: 1.09375rem; + --bs-btn-font-size: 1.25rem; --bs-btn-border-radius: var(--bs-border-radius-lg); } .btn-sm, .btn-group-sm > .btn { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.5rem; - --bs-btn-font-size: 0.765625rem; + --bs-btn-font-size: 0.875rem; --bs-btn-border-radius: var(--bs-border-radius-sm); } @@ -3333,7 +3337,7 @@ textarea.form-control-lg { --bs-dropdown-padding-x: 0; --bs-dropdown-padding-y: 0.5rem; --bs-dropdown-spacer: 0.125rem; - --bs-dropdown-font-size: 0.875rem; + --bs-dropdown-font-size: 1rem; --bs-dropdown-color: var(--bs-body-color); --bs-dropdown-bg: #222; --bs-dropdown-border-color: #444; @@ -3591,7 +3595,7 @@ textarea.form-control-lg { display: block; padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x); margin-bottom: 0; - font-size: 0.765625rem; + font-size: 0.875rem; color: var(--bs-dropdown-header-color); white-space: nowrap; } @@ -3868,15 +3872,15 @@ textarea.form-control-lg { --bs-navbar-hover-color: #fff; --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3); --bs-navbar-active-color: #fff; - --bs-navbar-brand-padding-y: 0.3359375rem; + --bs-navbar-brand-padding-y: 0.3125rem; --bs-navbar-brand-margin-end: 1rem; - --bs-navbar-brand-font-size: 1.09375rem; + --bs-navbar-brand-font-size: 1.25rem; --bs-navbar-brand-color: #fff; --bs-navbar-brand-hover-color: #fff; --bs-navbar-nav-link-padding-x: 0.5rem; --bs-navbar-toggler-padding-y: 0.25rem; --bs-navbar-toggler-padding-x: 0.75rem; - --bs-navbar-toggler-font-size: 1.09375rem; + --bs-navbar-toggler-font-size: 1.25rem; --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --bs-navbar-toggler-border-color: rgba(34, 34, 34, 0.1); --bs-navbar-toggler-border-radius: var(--bs-border-radius); @@ -4505,7 +4509,7 @@ textarea.form-control-lg { align-items: center; width: 100%; padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x); - font-size: 0.875rem; + font-size: 1rem; color: var(--bs-accordion-btn-color); text-align: left; background-color: var(--bs-accordion-btn-bg); @@ -4649,7 +4653,7 @@ textarea.form-control-lg { .pagination { --bs-pagination-padding-x: 0.75rem; --bs-pagination-padding-y: 0.375rem; - --bs-pagination-font-size: 0.875rem; + --bs-pagination-font-size: 1rem; --bs-pagination-color: #fff; --bs-pagination-bg: #00bc8c; --bs-pagination-border-width: 0; @@ -4728,14 +4732,14 @@ textarea.form-control-lg { .pagination-lg { --bs-pagination-padding-x: 1.5rem; --bs-pagination-padding-y: 0.75rem; - --bs-pagination-font-size: 1.09375rem; + --bs-pagination-font-size: 1.25rem; --bs-pagination-border-radius: var(--bs-border-radius-lg); } .pagination-sm { --bs-pagination-padding-x: 0.5rem; --bs-pagination-padding-y: 0.25rem; - --bs-pagination-font-size: 0.765625rem; + --bs-pagination-font-size: 0.875rem; --bs-pagination-border-radius: var(--bs-border-radius-sm); } @@ -4869,7 +4873,7 @@ textarea.form-control-lg { .progress, .progress-stacked { --bs-progress-height: 1rem; - --bs-progress-font-size: 0.65625rem; + --bs-progress-font-size: 0.75rem; --bs-progress-bg: #444; --bs-progress-border-radius: var(--bs-border-radius); --bs-progress-box-shadow: var(--bs-box-shadow-inset); @@ -5673,7 +5677,7 @@ textarea.form-control-lg { --bs-tooltip-padding-x: 0.5rem; --bs-tooltip-padding-y: 0.25rem; --bs-tooltip-margin: ; - --bs-tooltip-font-size: 0.765625rem; + --bs-tooltip-font-size: 0.875rem; --bs-tooltip-color: var(--bs-body-bg); --bs-tooltip-bg: var(--bs-emphasis-color); --bs-tooltip-border-radius: var(--bs-border-radius); @@ -5772,7 +5776,7 @@ textarea.form-control-lg { .popover { --bs-popover-zindex: 1070; --bs-popover-max-width: 276px; - --bs-popover-font-size: 0.765625rem; + --bs-popover-font-size: 0.875rem; --bs-popover-bg: #303030; --bs-popover-border-width: var(--bs-border-width); --bs-popover-border-color: var(--bs-border-color-translucent); @@ -5781,7 +5785,7 @@ textarea.form-control-lg { --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --bs-popover-header-padding-x: 1rem; --bs-popover-header-padding-y: 0.5rem; - --bs-popover-header-font-size: 0.875rem; + --bs-popover-header-font-size: 1rem; --bs-popover-header-color: inherit; --bs-popover-header-bg: #444; --bs-popover-body-padding-x: 1rem; @@ -8255,15 +8259,15 @@ textarea.form-control-lg { } .fs-4 { - font-size: calc(1.25625rem + 0.075vw) !important; + font-size: calc(1.275rem + 0.3vw) !important; } .fs-5 { - font-size: 1.09375rem !important; + font-size: 1.25rem !important; } .fs-6 { - font-size: 0.875rem !important; + font-size: 1rem !important; } .fst-italic { @@ -11815,7 +11819,7 @@ textarea.form-control-lg { font-size: 2rem !important; } .fs-4 { - font-size: 1.3125rem !important; + font-size: 1.5rem !important; } } @media print { diff --git a/src/assets/css/themes/i386.css b/src/assets/css/themes/i386.css index a389a6ad..51de7d67 100644 --- a/src/assets/css/themes/i386.css +++ b/src/assets/css/themes/i386.css @@ -74,8 +74,9 @@ --bs-font-sans-serif: DOS, Monaco, Menlo, Consolas, "Courier New", monospace; --bs-font-monospace: DOS, Monaco, Menlo, Consolas, "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-root-font-size: 93.75%; --bs-body-font-family: var(--bs-font-sans-serif); - --bs-body-font-size: 0.875rem; + --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: #bbb; @@ -184,6 +185,9 @@ box-sizing: border-box; } +:root { + font-size: var(--bs-root-font-size); +} @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; @@ -220,47 +224,47 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { } h1, .h1 { - font-size: calc(1.34375rem + 1.125vw); + font-size: calc(1.375rem + 1.5vw); } @media (min-width: 1200px) { h1, .h1 { - font-size: 2.1875rem; + font-size: 2.5rem; } } h2, .h2 { - font-size: calc(1.3rem + 0.6vw); + font-size: calc(1.325rem + 0.9vw); } @media (min-width: 1200px) { h2, .h2 { - font-size: 1.75rem; + font-size: 2rem; } } h3, .h3 { - font-size: calc(1.278125rem + 0.3375vw); + font-size: calc(1.3rem + 0.6vw); } @media (min-width: 1200px) { h3, .h3 { - font-size: 1.53125rem; + font-size: 1.75rem; } } h4, .h4 { - font-size: calc(1.25625rem + 0.075vw); + font-size: calc(1.275rem + 0.3vw); } @media (min-width: 1200px) { h4, .h4 { - font-size: 1.3125rem; + font-size: 1.5rem; } } h5, .h5 { - font-size: 1.09375rem; + font-size: 1.25rem; } h6, .h6 { - font-size: 0.875rem; + font-size: 1rem; } p { @@ -584,7 +588,7 @@ progress { } .lead { - font-size: 1.09375rem; + font-size: 1.25rem; font-weight: 300; } @@ -678,7 +682,7 @@ progress { .blockquote { margin-bottom: 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; } .blockquote > :last-child { margin-bottom: 0; @@ -2084,13 +2088,13 @@ progress { .col-form-label-lg { padding-top: calc(0.5rem + var(--bs-border-width)); padding-bottom: calc(0.5rem + var(--bs-border-width)); - font-size: 1.09375rem; + font-size: 1.25rem; } .col-form-label-sm { padding-top: calc(0.25rem + var(--bs-border-width)); padding-bottom: calc(0.25rem + var(--bs-border-width)); - font-size: 0.765625rem; + font-size: 0.875rem; } .form-text { @@ -2103,7 +2107,7 @@ progress { display: block; width: 100%; padding: 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: #fff; @@ -2194,7 +2198,7 @@ progress { .form-control-sm { min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2)); padding: 0.25rem 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; } .form-control-sm::file-selector-button { padding: 0.25rem 0.5rem; @@ -2205,7 +2209,7 @@ progress { .form-control-lg { min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2)); padding: 0.5rem 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; } .form-control-lg::file-selector-button { padding: 0.5rem 1rem; @@ -2249,7 +2253,7 @@ textarea.form-control-lg { display: block; width: 100%; padding: 0.375rem 2.25rem 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: #fff; @@ -2289,14 +2293,14 @@ textarea.form-control-lg { padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; } .form-select-lg { padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; } [data-bs-theme=dark] .form-select { @@ -2305,7 +2309,7 @@ textarea.form-control-lg { .form-check { display: block; - min-height: 1.3125rem; + min-height: 1.5rem; padding-left: 1.5em; margin-bottom: 0.125rem; } @@ -2624,7 +2628,7 @@ textarea.form-control-lg { display: flex; align-items: center; padding: 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: #fff; @@ -2639,7 +2643,7 @@ textarea.form-control-lg { .input-group-lg > .input-group-text, .input-group-lg > .btn { padding: 0.5rem 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; } .input-group-sm > .form-control, @@ -2647,7 +2651,7 @@ textarea.form-control-lg { .input-group-sm > .input-group-text, .input-group-sm > .btn { padding: 0.25rem 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; } .input-group-lg > .form-select, @@ -2674,7 +2678,7 @@ textarea.form-control-lg { max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.765625rem; + font-size: 0.875rem; color: #fff; background-color: var(--bs-success); } @@ -2763,7 +2767,7 @@ textarea.form-control-lg { max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.765625rem; + font-size: 0.875rem; color: #fff; background-color: var(--bs-danger); } @@ -2840,7 +2844,7 @@ textarea.form-control-lg { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.375rem; --bs-btn-font-family: ; - --bs-btn-font-size: 0.875rem; + --bs-btn-font-size: 1rem; --bs-btn-font-weight: 400; --bs-btn-line-height: 1.5; --bs-btn-color: var(--bs-body-color); @@ -3207,14 +3211,14 @@ textarea.form-control-lg { .btn-lg, .btn-group-lg > .btn { --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1rem; - --bs-btn-font-size: 1.09375rem; + --bs-btn-font-size: 1.25rem; --bs-btn-border-radius: var(--bs-border-radius-lg); } .btn-sm, .btn-group-sm > .btn { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.5rem; - --bs-btn-font-size: 0.765625rem; + --bs-btn-font-size: 0.875rem; --bs-btn-border-radius: var(--bs-border-radius-sm); } @@ -3287,7 +3291,7 @@ textarea.form-control-lg { --bs-dropdown-padding-x: 0; --bs-dropdown-padding-y: 0.5rem; --bs-dropdown-spacer: 0.125rem; - --bs-dropdown-font-size: 0.875rem; + --bs-dropdown-font-size: 1rem; --bs-dropdown-color: var(--bs-body-color); --bs-dropdown-bg: var(--bs-body-bg); --bs-dropdown-border-color: var(--bs-border-color-translucent); @@ -3543,7 +3547,7 @@ textarea.form-control-lg { display: block; padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x); margin-bottom: 0; - font-size: 0.765625rem; + font-size: 0.875rem; color: var(--bs-dropdown-header-color); white-space: nowrap; } @@ -3786,15 +3790,15 @@ textarea.form-control-lg { --bs-navbar-hover-color: #ebebeb; --bs-navbar-disabled-color: #303030; --bs-navbar-active-color: #f8f9fa; - --bs-navbar-brand-padding-y: 0.3359375rem; + --bs-navbar-brand-padding-y: 0.3125rem; --bs-navbar-brand-margin-end: 1rem; - --bs-navbar-brand-font-size: 1.09375rem; + --bs-navbar-brand-font-size: 1.25rem; --bs-navbar-brand-color: #bbb; --bs-navbar-brand-hover-color: #f8f9fa; --bs-navbar-nav-link-padding-x: 0.5rem; --bs-navbar-toggler-padding-y: 0.25rem; --bs-navbar-toggler-padding-x: 0.75rem; - --bs-navbar-toggler-font-size: 1.09375rem; + --bs-navbar-toggler-font-size: 1.25rem; --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28187, 187, 187, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15); --bs-navbar-toggler-border-radius: var(--bs-border-radius); @@ -4372,7 +4376,7 @@ textarea.form-control-lg { align-items: center; width: 100%; padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x); - font-size: 0.875rem; + font-size: 1rem; color: var(--bs-accordion-btn-color); text-align: left; background-color: var(--bs-accordion-btn-bg); @@ -4488,7 +4492,7 @@ textarea.form-control-lg { .pagination { --bs-pagination-padding-x: 0.75rem; --bs-pagination-padding-y: 0.375rem; - --bs-pagination-font-size: 0.875rem; + --bs-pagination-font-size: 1rem; --bs-pagination-color: var(--bs-link-color); --bs-pagination-bg: var(--bs-body-bg); --bs-pagination-border-width: var(--bs-border-width); @@ -4558,14 +4562,14 @@ textarea.form-control-lg { .pagination-lg { --bs-pagination-padding-x: 1.5rem; --bs-pagination-padding-y: 0.75rem; - --bs-pagination-font-size: 1.09375rem; + --bs-pagination-font-size: 1.25rem; --bs-pagination-border-radius: var(--bs-border-radius-lg); } .pagination-sm { --bs-pagination-padding-x: 0.5rem; --bs-pagination-padding-y: 0.25rem; - --bs-pagination-font-size: 0.765625rem; + --bs-pagination-font-size: 0.875rem; --bs-pagination-border-radius: var(--bs-border-radius-sm); } @@ -4697,7 +4701,7 @@ textarea.form-control-lg { .progress, .progress-stacked { --bs-progress-height: 1rem; - --bs-progress-font-size: 0.65625rem; + --bs-progress-font-size: 0.75rem; --bs-progress-bg: var(--bs-secondary-bg); --bs-progress-border-radius: var(--bs-border-radius); --bs-progress-box-shadow: var(--bs-box-shadow-inset); @@ -5401,7 +5405,7 @@ textarea.form-control-lg { --bs-tooltip-padding-x: 0.5rem; --bs-tooltip-padding-y: 0.25rem; --bs-tooltip-margin: ; - --bs-tooltip-font-size: 0.765625rem; + --bs-tooltip-font-size: 0.875rem; --bs-tooltip-color: var(--bs-body-bg); --bs-tooltip-bg: var(--bs-emphasis-color); --bs-tooltip-border-radius: var(--bs-border-radius); @@ -5499,7 +5503,7 @@ textarea.form-control-lg { .popover { --bs-popover-zindex: 1070; --bs-popover-max-width: 276px; - --bs-popover-font-size: 0.765625rem; + --bs-popover-font-size: 0.875rem; --bs-popover-bg: var(--bs-body-bg); --bs-popover-border-width: var(--bs-border-width); --bs-popover-border-color: var(--bs-border-color-translucent); @@ -5508,7 +5512,7 @@ textarea.form-control-lg { --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --bs-popover-header-padding-x: 1rem; --bs-popover-header-padding-y: 0.5rem; - --bs-popover-header-font-size: 0.875rem; + --bs-popover-header-font-size: 1rem; --bs-popover-header-color: inherit; --bs-popover-header-bg: var(--bs-secondary-bg); --bs-popover-body-padding-x: 1rem; @@ -7967,27 +7971,27 @@ textarea.form-control-lg { } .fs-1 { - font-size: calc(1.34375rem + 1.125vw) !important; + font-size: calc(1.375rem + 1.5vw) !important; } .fs-2 { - font-size: calc(1.3rem + 0.6vw) !important; + font-size: calc(1.325rem + 0.9vw) !important; } .fs-3 { - font-size: calc(1.278125rem + 0.3375vw) !important; + font-size: calc(1.3rem + 0.6vw) !important; } .fs-4 { - font-size: calc(1.25625rem + 0.075vw) !important; + font-size: calc(1.275rem + 0.3vw) !important; } .fs-5 { - font-size: 1.09375rem !important; + font-size: 1.25rem !important; } .fs-6 { - font-size: 0.875rem !important; + font-size: 1rem !important; } .fst-italic { @@ -11530,16 +11534,16 @@ textarea.form-control-lg { } @media (min-width: 1200px) { .fs-1 { - font-size: 2.1875rem !important; + font-size: 2.5rem !important; } .fs-2 { - font-size: 1.75rem !important; + font-size: 2rem !important; } .fs-3 { - font-size: 1.53125rem !important; + font-size: 1.75rem !important; } .fs-4 { - font-size: 1.3125rem !important; + font-size: 1.5rem !important; } } @media print { diff --git a/src/assets/css/themes/litely-compact.css b/src/assets/css/themes/litely-compact.css index cfb1e0a4..80e84db4 100644 --- a/src/assets/css/themes/litely-compact.css +++ b/src/assets/css/themes/litely-compact.css @@ -114,8 +114,9 @@ hr.my-3 { --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI", "Helvetica", Arial, sans-serif; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-root-font-size: 93.75%; --bs-body-font-family: var(--bs-font-sans-serif); - --bs-body-font-size: 0.875rem; + --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: #495057; @@ -224,6 +225,9 @@ hr.my-3 { box-sizing: border-box; } +:root { + font-size: var(--bs-root-font-size); +} @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; @@ -260,47 +264,47 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { } h1, .h1 { - font-size: calc(1.34375rem + 1.125vw); + font-size: calc(1.375rem + 1.5vw); } @media (min-width: 1200px) { h1, .h1 { - font-size: 2.1875rem; + font-size: 2.5rem; } } h2, .h2 { - font-size: calc(1.3rem + 0.6vw); + font-size: calc(1.325rem + 0.9vw); } @media (min-width: 1200px) { h2, .h2 { - font-size: 1.75rem; + font-size: 2rem; } } h3, .h3 { - font-size: calc(1.278125rem + 0.3375vw); + font-size: calc(1.3rem + 0.6vw); } @media (min-width: 1200px) { h3, .h3 { - font-size: 1.53125rem; + font-size: 1.75rem; } } h4, .h4 { - font-size: calc(1.25625rem + 0.075vw); + font-size: calc(1.275rem + 0.3vw); } @media (min-width: 1200px) { h4, .h4 { - font-size: 1.3125rem; + font-size: 1.5rem; } } h5, .h5 { - font-size: 1.09375rem; + font-size: 1.25rem; } h6, .h6 { - font-size: 0.875rem; + font-size: 1rem; } p { @@ -625,7 +629,7 @@ progress { } .lead { - font-size: 1.09375rem; + font-size: 1.25rem; font-weight: 300; } @@ -719,7 +723,7 @@ progress { .blockquote { margin-bottom: 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; } .blockquote > :last-child { margin-bottom: 0; @@ -2102,13 +2106,13 @@ progress { .col-form-label-lg { padding-top: calc(0.5rem + var(--bs-border-width)); padding-bottom: calc(0.5rem + var(--bs-border-width)); - font-size: 1.09375rem; + font-size: 1.25rem; } .col-form-label-sm { padding-top: calc(0.25rem + var(--bs-border-width)); padding-bottom: calc(0.25rem + var(--bs-border-width)); - font-size: 0.765625rem; + font-size: 0.875rem; } .form-text { @@ -2121,7 +2125,7 @@ progress { display: block; width: 100%; padding: 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color); @@ -2212,7 +2216,7 @@ progress { .form-control-sm { min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2)); padding: 0.25rem 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } .form-control-sm::file-selector-button { @@ -2224,7 +2228,7 @@ progress { .form-control-lg { min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2)); padding: 0.5rem 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } .form-control-lg::file-selector-button { @@ -2271,7 +2275,7 @@ textarea.form-control-lg { display: block; width: 100%; padding: 0.375rem 2.25rem 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color); @@ -2311,7 +2315,7 @@ textarea.form-control-lg { padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } @@ -2319,7 +2323,7 @@ textarea.form-control-lg { padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } @@ -2329,7 +2333,7 @@ textarea.form-control-lg { .form-check { display: block; - min-height: 1.3125rem; + min-height: 1.5rem; padding-left: 1.5em; margin-bottom: 0.125rem; } @@ -2657,7 +2661,7 @@ textarea.form-control-lg { display: flex; align-items: center; padding: 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color); @@ -2673,7 +2677,7 @@ textarea.form-control-lg { .input-group-lg > .input-group-text, .input-group-lg > .btn { padding: 0.5rem 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } @@ -2682,7 +2686,7 @@ textarea.form-control-lg { .input-group-sm > .input-group-text, .input-group-sm > .btn { padding: 0.25rem 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } @@ -2732,7 +2736,7 @@ textarea.form-control-lg { max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.765625rem; + font-size: 0.875rem; color: #fff; background-color: var(--bs-success); border-radius: var(--bs-border-radius); @@ -2822,7 +2826,7 @@ textarea.form-control-lg { max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.765625rem; + font-size: 0.875rem; color: #fff; background-color: var(--bs-danger); border-radius: var(--bs-border-radius); @@ -2900,7 +2904,7 @@ textarea.form-control-lg { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.375rem; --bs-btn-font-family: ; - --bs-btn-font-size: 0.875rem; + --bs-btn-font-size: 1rem; --bs-btn-font-weight: 400; --bs-btn-line-height: 1.5; --bs-btn-color: var(--bs-body-color); @@ -3268,14 +3272,14 @@ textarea.form-control-lg { .btn-lg, .btn-group-lg > .btn { --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1rem; - --bs-btn-font-size: 1.09375rem; + --bs-btn-font-size: 1.25rem; --bs-btn-border-radius: var(--bs-border-radius-lg); } .btn-sm, .btn-group-sm > .btn { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.5rem; - --bs-btn-font-size: 0.765625rem; + --bs-btn-font-size: 0.875rem; --bs-btn-border-radius: var(--bs-border-radius-sm); } @@ -3348,7 +3352,7 @@ textarea.form-control-lg { --bs-dropdown-padding-x: 0; --bs-dropdown-padding-y: 0.5rem; --bs-dropdown-spacer: 0.125rem; - --bs-dropdown-font-size: 0.875rem; + --bs-dropdown-font-size: 1rem; --bs-dropdown-color: var(--bs-body-color); --bs-dropdown-bg: var(--bs-body-bg); --bs-dropdown-border-color: var(--bs-border-color-translucent); @@ -3606,7 +3610,7 @@ textarea.form-control-lg { display: block; padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x); margin-bottom: 0; - font-size: 0.765625rem; + font-size: 0.875rem; color: var(--bs-dropdown-header-color); white-space: nowrap; } @@ -3883,15 +3887,15 @@ textarea.form-control-lg { --bs-navbar-hover-color: #212529; --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3); --bs-navbar-active-color: #212529; - --bs-navbar-brand-padding-y: 0.3359375rem; + --bs-navbar-brand-padding-y: 0.3125rem; --bs-navbar-brand-margin-end: 1rem; - --bs-navbar-brand-font-size: 1.09375rem; + --bs-navbar-brand-font-size: 1.25rem; --bs-navbar-brand-color: #212529; --bs-navbar-brand-hover-color: #212529; --bs-navbar-nav-link-padding-x: 0.5rem; --bs-navbar-toggler-padding-y: 0.25rem; --bs-navbar-toggler-padding-x: 0.75rem; - --bs-navbar-toggler-font-size: 1.09375rem; + --bs-navbar-toggler-font-size: 1.25rem; --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2873, 80, 87, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15); --bs-navbar-toggler-border-radius: var(--bs-border-radius); @@ -4516,7 +4520,7 @@ textarea.form-control-lg { align-items: center; width: 100%; padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x); - font-size: 0.875rem; + font-size: 1rem; color: var(--bs-accordion-btn-color); text-align: left; background-color: var(--bs-accordion-btn-bg); @@ -4660,7 +4664,7 @@ textarea.form-control-lg { .pagination { --bs-pagination-padding-x: 0.75rem; --bs-pagination-padding-y: 0.375rem; - --bs-pagination-font-size: 0.875rem; + --bs-pagination-font-size: 1rem; --bs-pagination-color: var(--bs-link-color); --bs-pagination-bg: var(--bs-body-bg); --bs-pagination-border-width: var(--bs-border-width); @@ -4739,14 +4743,14 @@ textarea.form-control-lg { .pagination-lg { --bs-pagination-padding-x: 1.5rem; --bs-pagination-padding-y: 0.75rem; - --bs-pagination-font-size: 1.09375rem; + --bs-pagination-font-size: 1.25rem; --bs-pagination-border-radius: var(--bs-border-radius-lg); } .pagination-sm { --bs-pagination-padding-x: 0.5rem; --bs-pagination-padding-y: 0.25rem; - --bs-pagination-font-size: 0.765625rem; + --bs-pagination-font-size: 0.875rem; --bs-pagination-border-radius: var(--bs-border-radius-sm); } @@ -4880,7 +4884,7 @@ textarea.form-control-lg { .progress, .progress-stacked { --bs-progress-height: 1rem; - --bs-progress-font-size: 0.65625rem; + --bs-progress-font-size: 0.75rem; --bs-progress-bg: var(--bs-secondary-bg); --bs-progress-border-radius: var(--bs-border-radius); --bs-progress-box-shadow: var(--bs-box-shadow-inset); @@ -5684,7 +5688,7 @@ textarea.form-control-lg { --bs-tooltip-padding-x: 0.5rem; --bs-tooltip-padding-y: 0.25rem; --bs-tooltip-margin: ; - --bs-tooltip-font-size: 0.765625rem; + --bs-tooltip-font-size: 0.875rem; --bs-tooltip-color: var(--bs-body-bg); --bs-tooltip-bg: var(--bs-emphasis-color); --bs-tooltip-border-radius: var(--bs-border-radius); @@ -5783,7 +5787,7 @@ textarea.form-control-lg { .popover { --bs-popover-zindex: 1070; --bs-popover-max-width: 276px; - --bs-popover-font-size: 0.765625rem; + --bs-popover-font-size: 0.875rem; --bs-popover-bg: var(--bs-body-bg); --bs-popover-border-width: var(--bs-border-width); --bs-popover-border-color: var(--bs-border-color-translucent); @@ -5792,7 +5796,7 @@ textarea.form-control-lg { --bs-popover-box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15); --bs-popover-header-padding-x: 1rem; --bs-popover-header-padding-y: 0.5rem; - --bs-popover-header-font-size: 0.875rem; + --bs-popover-header-font-size: 1rem; --bs-popover-header-color: #495057; --bs-popover-header-bg: var(--bs-secondary-bg); --bs-popover-body-padding-x: 1rem; @@ -8254,27 +8258,27 @@ textarea.form-control-lg { } .fs-1 { - font-size: calc(1.34375rem + 1.125vw) !important; + font-size: calc(1.375rem + 1.5vw) !important; } .fs-2 { - font-size: calc(1.3rem + 0.6vw) !important; + font-size: calc(1.325rem + 0.9vw) !important; } .fs-3 { - font-size: calc(1.278125rem + 0.3375vw) !important; + font-size: calc(1.3rem + 0.6vw) !important; } .fs-4 { - font-size: calc(1.25625rem + 0.075vw) !important; + font-size: calc(1.275rem + 0.3vw) !important; } .fs-5 { - font-size: 1.09375rem !important; + font-size: 1.25rem !important; } .fs-6 { - font-size: 0.875rem !important; + font-size: 1rem !important; } .fst-italic { @@ -11817,16 +11821,16 @@ textarea.form-control-lg { } @media (min-width: 1200px) { .fs-1 { - font-size: 2.1875rem !important; + font-size: 2.5rem !important; } .fs-2 { - font-size: 1.75rem !important; + font-size: 2rem !important; } .fs-3 { - font-size: 1.53125rem !important; + font-size: 1.75rem !important; } .fs-4 { - font-size: 1.3125rem !important; + font-size: 1.5rem !important; } } @media print { diff --git a/src/assets/css/themes/litely-red.css b/src/assets/css/themes/litely-red.css index fbe7cdfb..0e2e8e34 100644 --- a/src/assets/css/themes/litely-red.css +++ b/src/assets/css/themes/litely-red.css @@ -74,8 +74,9 @@ --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI", "Helvetica", Arial, sans-serif; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-root-font-size: 93.75%; --bs-body-font-family: var(--bs-font-sans-serif); - --bs-body-font-size: 0.875rem; + --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: #495057; @@ -184,6 +185,9 @@ box-sizing: border-box; } +:root { + font-size: var(--bs-root-font-size); +} @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; @@ -220,47 +224,47 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { } h1, .h1 { - font-size: calc(1.34375rem + 1.125vw); + font-size: calc(1.375rem + 1.5vw); } @media (min-width: 1200px) { h1, .h1 { - font-size: 2.1875rem; + font-size: 2.5rem; } } h2, .h2 { - font-size: calc(1.3rem + 0.6vw); + font-size: calc(1.325rem + 0.9vw); } @media (min-width: 1200px) { h2, .h2 { - font-size: 1.75rem; + font-size: 2rem; } } h3, .h3 { - font-size: calc(1.278125rem + 0.3375vw); + font-size: calc(1.3rem + 0.6vw); } @media (min-width: 1200px) { h3, .h3 { - font-size: 1.53125rem; + font-size: 1.75rem; } } h4, .h4 { - font-size: calc(1.25625rem + 0.075vw); + font-size: calc(1.275rem + 0.3vw); } @media (min-width: 1200px) { h4, .h4 { - font-size: 1.3125rem; + font-size: 1.5rem; } } h5, .h5 { - font-size: 1.09375rem; + font-size: 1.25rem; } h6, .h6 { - font-size: 0.875rem; + font-size: 1rem; } p { @@ -585,7 +589,7 @@ progress { } .lead { - font-size: 1.09375rem; + font-size: 1.25rem; font-weight: 300; } @@ -679,7 +683,7 @@ progress { .blockquote { margin-bottom: 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; } .blockquote > :last-child { margin-bottom: 0; @@ -2086,13 +2090,13 @@ progress { .col-form-label-lg { padding-top: calc(0.5rem + var(--bs-border-width)); padding-bottom: calc(0.5rem + var(--bs-border-width)); - font-size: 1.09375rem; + font-size: 1.25rem; } .col-form-label-sm { padding-top: calc(0.25rem + var(--bs-border-width)); padding-bottom: calc(0.25rem + var(--bs-border-width)); - font-size: 0.765625rem; + font-size: 0.875rem; } .form-text { @@ -2105,7 +2109,7 @@ progress { display: block; width: 100%; padding: 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color); @@ -2196,7 +2200,7 @@ progress { .form-control-sm { min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2)); padding: 0.25rem 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } .form-control-sm::file-selector-button { @@ -2208,7 +2212,7 @@ progress { .form-control-lg { min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2)); padding: 0.5rem 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } .form-control-lg::file-selector-button { @@ -2255,7 +2259,7 @@ textarea.form-control-lg { display: block; width: 100%; padding: 0.375rem 2.25rem 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color); @@ -2295,7 +2299,7 @@ textarea.form-control-lg { padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } @@ -2303,7 +2307,7 @@ textarea.form-control-lg { padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } @@ -2313,7 +2317,7 @@ textarea.form-control-lg { .form-check { display: block; - min-height: 1.3125rem; + min-height: 1.5rem; padding-left: 1.5em; margin-bottom: 0.125rem; } @@ -2641,7 +2645,7 @@ textarea.form-control-lg { display: flex; align-items: center; padding: 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color); @@ -2657,7 +2661,7 @@ textarea.form-control-lg { .input-group-lg > .input-group-text, .input-group-lg > .btn { padding: 0.5rem 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } @@ -2666,7 +2670,7 @@ textarea.form-control-lg { .input-group-sm > .input-group-text, .input-group-sm > .btn { padding: 0.25rem 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } @@ -2716,7 +2720,7 @@ textarea.form-control-lg { max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.765625rem; + font-size: 0.875rem; color: #fff; background-color: var(--bs-success); border-radius: var(--bs-border-radius); @@ -2806,7 +2810,7 @@ textarea.form-control-lg { max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.765625rem; + font-size: 0.875rem; color: #fff; background-color: var(--bs-danger); border-radius: var(--bs-border-radius); @@ -2884,7 +2888,7 @@ textarea.form-control-lg { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.375rem; --bs-btn-font-family: ; - --bs-btn-font-size: 0.875rem; + --bs-btn-font-size: 1rem; --bs-btn-font-weight: 400; --bs-btn-line-height: 1.5; --bs-btn-color: var(--bs-body-color); @@ -3252,14 +3256,14 @@ textarea.form-control-lg { .btn-lg, .btn-group-lg > .btn { --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1rem; - --bs-btn-font-size: 1.09375rem; + --bs-btn-font-size: 1.25rem; --bs-btn-border-radius: var(--bs-border-radius-lg); } .btn-sm, .btn-group-sm > .btn { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.5rem; - --bs-btn-font-size: 0.765625rem; + --bs-btn-font-size: 0.875rem; --bs-btn-border-radius: var(--bs-border-radius-sm); } @@ -3332,7 +3336,7 @@ textarea.form-control-lg { --bs-dropdown-padding-x: 0; --bs-dropdown-padding-y: 0.5rem; --bs-dropdown-spacer: 0.125rem; - --bs-dropdown-font-size: 0.875rem; + --bs-dropdown-font-size: 1rem; --bs-dropdown-color: var(--bs-body-color); --bs-dropdown-bg: var(--bs-body-bg); --bs-dropdown-border-color: var(--bs-border-color-translucent); @@ -3590,7 +3594,7 @@ textarea.form-control-lg { display: block; padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x); margin-bottom: 0; - font-size: 0.765625rem; + font-size: 0.875rem; color: var(--bs-dropdown-header-color); white-space: nowrap; } @@ -3867,15 +3871,15 @@ textarea.form-control-lg { --bs-navbar-hover-color: #212529; --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3); --bs-navbar-active-color: #212529; - --bs-navbar-brand-padding-y: 0.3359375rem; + --bs-navbar-brand-padding-y: 0.3125rem; --bs-navbar-brand-margin-end: 1rem; - --bs-navbar-brand-font-size: 1.09375rem; + --bs-navbar-brand-font-size: 1.25rem; --bs-navbar-brand-color: #212529; --bs-navbar-brand-hover-color: #212529; --bs-navbar-nav-link-padding-x: 0.5rem; --bs-navbar-toggler-padding-y: 0.25rem; --bs-navbar-toggler-padding-x: 0.75rem; - --bs-navbar-toggler-font-size: 1.09375rem; + --bs-navbar-toggler-font-size: 1.25rem; --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2873, 80, 87, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15); --bs-navbar-toggler-border-radius: var(--bs-border-radius); @@ -4504,7 +4508,7 @@ textarea.form-control-lg { align-items: center; width: 100%; padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x); - font-size: 0.875rem; + font-size: 1rem; color: var(--bs-accordion-btn-color); text-align: left; background-color: var(--bs-accordion-btn-bg); @@ -4648,7 +4652,7 @@ textarea.form-control-lg { .pagination { --bs-pagination-padding-x: 0.75rem; --bs-pagination-padding-y: 0.375rem; - --bs-pagination-font-size: 0.875rem; + --bs-pagination-font-size: 1rem; --bs-pagination-color: var(--bs-link-color); --bs-pagination-bg: var(--bs-body-bg); --bs-pagination-border-width: var(--bs-border-width); @@ -4727,14 +4731,14 @@ textarea.form-control-lg { .pagination-lg { --bs-pagination-padding-x: 1.5rem; --bs-pagination-padding-y: 0.75rem; - --bs-pagination-font-size: 1.09375rem; + --bs-pagination-font-size: 1.25rem; --bs-pagination-border-radius: var(--bs-border-radius-lg); } .pagination-sm { --bs-pagination-padding-x: 0.5rem; --bs-pagination-padding-y: 0.25rem; - --bs-pagination-font-size: 0.765625rem; + --bs-pagination-font-size: 0.875rem; --bs-pagination-border-radius: var(--bs-border-radius-sm); } @@ -4868,7 +4872,7 @@ textarea.form-control-lg { .progress, .progress-stacked { --bs-progress-height: 1rem; - --bs-progress-font-size: 0.65625rem; + --bs-progress-font-size: 0.75rem; --bs-progress-bg: var(--bs-secondary-bg); --bs-progress-border-radius: var(--bs-border-radius); --bs-progress-box-shadow: var(--bs-box-shadow-inset); @@ -5672,7 +5676,7 @@ textarea.form-control-lg { --bs-tooltip-padding-x: 0.5rem; --bs-tooltip-padding-y: 0.25rem; --bs-tooltip-margin: ; - --bs-tooltip-font-size: 0.765625rem; + --bs-tooltip-font-size: 0.875rem; --bs-tooltip-color: var(--bs-body-bg); --bs-tooltip-bg: var(--bs-emphasis-color); --bs-tooltip-border-radius: var(--bs-border-radius); @@ -5771,7 +5775,7 @@ textarea.form-control-lg { .popover { --bs-popover-zindex: 1070; --bs-popover-max-width: 276px; - --bs-popover-font-size: 0.765625rem; + --bs-popover-font-size: 0.875rem; --bs-popover-bg: var(--bs-body-bg); --bs-popover-border-width: var(--bs-border-width); --bs-popover-border-color: var(--bs-border-color-translucent); @@ -5780,7 +5784,7 @@ textarea.form-control-lg { --bs-popover-box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15); --bs-popover-header-padding-x: 1rem; --bs-popover-header-padding-y: 0.5rem; - --bs-popover-header-font-size: 0.875rem; + --bs-popover-header-font-size: 1rem; --bs-popover-header-color: #495057; --bs-popover-header-bg: var(--bs-secondary-bg); --bs-popover-body-padding-x: 1rem; @@ -8242,27 +8246,27 @@ textarea.form-control-lg { } .fs-1 { - font-size: calc(1.34375rem + 1.125vw) !important; + font-size: calc(1.375rem + 1.5vw) !important; } .fs-2 { - font-size: calc(1.3rem + 0.6vw) !important; + font-size: calc(1.325rem + 0.9vw) !important; } .fs-3 { - font-size: calc(1.278125rem + 0.3375vw) !important; + font-size: calc(1.3rem + 0.6vw) !important; } .fs-4 { - font-size: calc(1.25625rem + 0.075vw) !important; + font-size: calc(1.275rem + 0.3vw) !important; } .fs-5 { - font-size: 1.09375rem !important; + font-size: 1.25rem !important; } .fs-6 { - font-size: 0.875rem !important; + font-size: 1rem !important; } .fst-italic { @@ -11805,16 +11809,16 @@ textarea.form-control-lg { } @media (min-width: 1200px) { .fs-1 { - font-size: 2.1875rem !important; + font-size: 2.5rem !important; } .fs-2 { - font-size: 1.75rem !important; + font-size: 2rem !important; } .fs-3 { - font-size: 1.53125rem !important; + font-size: 1.75rem !important; } .fs-4 { - font-size: 1.3125rem !important; + font-size: 1.5rem !important; } } @media print { diff --git a/src/assets/css/themes/litely.css b/src/assets/css/themes/litely.css index 801319a3..bf286314 100644 --- a/src/assets/css/themes/litely.css +++ b/src/assets/css/themes/litely.css @@ -74,8 +74,9 @@ --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI", "Helvetica", Arial, sans-serif; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-root-font-size: 93.75%; --bs-body-font-family: var(--bs-font-sans-serif); - --bs-body-font-size: 0.875rem; + --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: #495057; @@ -184,6 +185,9 @@ box-sizing: border-box; } +:root { + font-size: var(--bs-root-font-size); +} @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; @@ -220,47 +224,47 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { } h1, .h1 { - font-size: calc(1.34375rem + 1.125vw); + font-size: calc(1.375rem + 1.5vw); } @media (min-width: 1200px) { h1, .h1 { - font-size: 2.1875rem; + font-size: 2.5rem; } } h2, .h2 { - font-size: calc(1.3rem + 0.6vw); + font-size: calc(1.325rem + 0.9vw); } @media (min-width: 1200px) { h2, .h2 { - font-size: 1.75rem; + font-size: 2rem; } } h3, .h3 { - font-size: calc(1.278125rem + 0.3375vw); + font-size: calc(1.3rem + 0.6vw); } @media (min-width: 1200px) { h3, .h3 { - font-size: 1.53125rem; + font-size: 1.75rem; } } h4, .h4 { - font-size: calc(1.25625rem + 0.075vw); + font-size: calc(1.275rem + 0.3vw); } @media (min-width: 1200px) { h4, .h4 { - font-size: 1.3125rem; + font-size: 1.5rem; } } h5, .h5 { - font-size: 1.09375rem; + font-size: 1.25rem; } h6, .h6 { - font-size: 0.875rem; + font-size: 1rem; } p { @@ -585,7 +589,7 @@ progress { } .lead { - font-size: 1.09375rem; + font-size: 1.25rem; font-weight: 300; } @@ -679,7 +683,7 @@ progress { .blockquote { margin-bottom: 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; } .blockquote > :last-child { margin-bottom: 0; @@ -2086,13 +2090,13 @@ progress { .col-form-label-lg { padding-top: calc(0.5rem + var(--bs-border-width)); padding-bottom: calc(0.5rem + var(--bs-border-width)); - font-size: 1.09375rem; + font-size: 1.25rem; } .col-form-label-sm { padding-top: calc(0.25rem + var(--bs-border-width)); padding-bottom: calc(0.25rem + var(--bs-border-width)); - font-size: 0.765625rem; + font-size: 0.875rem; } .form-text { @@ -2105,7 +2109,7 @@ progress { display: block; width: 100%; padding: 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color); @@ -2196,7 +2200,7 @@ progress { .form-control-sm { min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2)); padding: 0.25rem 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } .form-control-sm::file-selector-button { @@ -2208,7 +2212,7 @@ progress { .form-control-lg { min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2)); padding: 0.5rem 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } .form-control-lg::file-selector-button { @@ -2255,7 +2259,7 @@ textarea.form-control-lg { display: block; width: 100%; padding: 0.375rem 2.25rem 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color); @@ -2295,7 +2299,7 @@ textarea.form-control-lg { padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } @@ -2303,7 +2307,7 @@ textarea.form-control-lg { padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } @@ -2313,7 +2317,7 @@ textarea.form-control-lg { .form-check { display: block; - min-height: 1.3125rem; + min-height: 1.5rem; padding-left: 1.5em; margin-bottom: 0.125rem; } @@ -2641,7 +2645,7 @@ textarea.form-control-lg { display: flex; align-items: center; padding: 0.375rem 0.75rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color); @@ -2657,7 +2661,7 @@ textarea.form-control-lg { .input-group-lg > .input-group-text, .input-group-lg > .btn { padding: 0.5rem 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } @@ -2666,7 +2670,7 @@ textarea.form-control-lg { .input-group-sm > .input-group-text, .input-group-sm > .btn { padding: 0.25rem 0.5rem; - font-size: 0.765625rem; + font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } @@ -2716,7 +2720,7 @@ textarea.form-control-lg { max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.765625rem; + font-size: 0.875rem; color: #fff; background-color: var(--bs-success); border-radius: var(--bs-border-radius); @@ -2806,7 +2810,7 @@ textarea.form-control-lg { max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.765625rem; + font-size: 0.875rem; color: #fff; background-color: var(--bs-danger); border-radius: var(--bs-border-radius); @@ -2884,7 +2888,7 @@ textarea.form-control-lg { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.375rem; --bs-btn-font-family: ; - --bs-btn-font-size: 0.875rem; + --bs-btn-font-size: 1rem; --bs-btn-font-weight: 400; --bs-btn-line-height: 1.5; --bs-btn-color: var(--bs-body-color); @@ -3252,14 +3256,14 @@ textarea.form-control-lg { .btn-lg, .btn-group-lg > .btn { --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1rem; - --bs-btn-font-size: 1.09375rem; + --bs-btn-font-size: 1.25rem; --bs-btn-border-radius: var(--bs-border-radius-lg); } .btn-sm, .btn-group-sm > .btn { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.5rem; - --bs-btn-font-size: 0.765625rem; + --bs-btn-font-size: 0.875rem; --bs-btn-border-radius: var(--bs-border-radius-sm); } @@ -3332,7 +3336,7 @@ textarea.form-control-lg { --bs-dropdown-padding-x: 0; --bs-dropdown-padding-y: 0.5rem; --bs-dropdown-spacer: 0.125rem; - --bs-dropdown-font-size: 0.875rem; + --bs-dropdown-font-size: 1rem; --bs-dropdown-color: var(--bs-body-color); --bs-dropdown-bg: var(--bs-body-bg); --bs-dropdown-border-color: var(--bs-border-color-translucent); @@ -3590,7 +3594,7 @@ textarea.form-control-lg { display: block; padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x); margin-bottom: 0; - font-size: 0.765625rem; + font-size: 0.875rem; color: var(--bs-dropdown-header-color); white-space: nowrap; } @@ -3867,15 +3871,15 @@ textarea.form-control-lg { --bs-navbar-hover-color: #212529; --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3); --bs-navbar-active-color: #212529; - --bs-navbar-brand-padding-y: 0.3359375rem; + --bs-navbar-brand-padding-y: 0.3125rem; --bs-navbar-brand-margin-end: 1rem; - --bs-navbar-brand-font-size: 1.09375rem; + --bs-navbar-brand-font-size: 1.25rem; --bs-navbar-brand-color: #212529; --bs-navbar-brand-hover-color: #212529; --bs-navbar-nav-link-padding-x: 0.5rem; --bs-navbar-toggler-padding-y: 0.25rem; --bs-navbar-toggler-padding-x: 0.75rem; - --bs-navbar-toggler-font-size: 1.09375rem; + --bs-navbar-toggler-font-size: 1.25rem; --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2873, 80, 87, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15); --bs-navbar-toggler-border-radius: var(--bs-border-radius); @@ -4504,7 +4508,7 @@ textarea.form-control-lg { align-items: center; width: 100%; padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x); - font-size: 0.875rem; + font-size: 1rem; color: var(--bs-accordion-btn-color); text-align: left; background-color: var(--bs-accordion-btn-bg); @@ -4648,7 +4652,7 @@ textarea.form-control-lg { .pagination { --bs-pagination-padding-x: 0.75rem; --bs-pagination-padding-y: 0.375rem; - --bs-pagination-font-size: 0.875rem; + --bs-pagination-font-size: 1rem; --bs-pagination-color: var(--bs-link-color); --bs-pagination-bg: var(--bs-body-bg); --bs-pagination-border-width: var(--bs-border-width); @@ -4727,14 +4731,14 @@ textarea.form-control-lg { .pagination-lg { --bs-pagination-padding-x: 1.5rem; --bs-pagination-padding-y: 0.75rem; - --bs-pagination-font-size: 1.09375rem; + --bs-pagination-font-size: 1.25rem; --bs-pagination-border-radius: var(--bs-border-radius-lg); } .pagination-sm { --bs-pagination-padding-x: 0.5rem; --bs-pagination-padding-y: 0.25rem; - --bs-pagination-font-size: 0.765625rem; + --bs-pagination-font-size: 0.875rem; --bs-pagination-border-radius: var(--bs-border-radius-sm); } @@ -4868,7 +4872,7 @@ textarea.form-control-lg { .progress, .progress-stacked { --bs-progress-height: 1rem; - --bs-progress-font-size: 0.65625rem; + --bs-progress-font-size: 0.75rem; --bs-progress-bg: var(--bs-secondary-bg); --bs-progress-border-radius: var(--bs-border-radius); --bs-progress-box-shadow: var(--bs-box-shadow-inset); @@ -5672,7 +5676,7 @@ textarea.form-control-lg { --bs-tooltip-padding-x: 0.5rem; --bs-tooltip-padding-y: 0.25rem; --bs-tooltip-margin: ; - --bs-tooltip-font-size: 0.765625rem; + --bs-tooltip-font-size: 0.875rem; --bs-tooltip-color: var(--bs-body-bg); --bs-tooltip-bg: var(--bs-emphasis-color); --bs-tooltip-border-radius: var(--bs-border-radius); @@ -5771,7 +5775,7 @@ textarea.form-control-lg { .popover { --bs-popover-zindex: 1070; --bs-popover-max-width: 276px; - --bs-popover-font-size: 0.765625rem; + --bs-popover-font-size: 0.875rem; --bs-popover-bg: var(--bs-body-bg); --bs-popover-border-width: var(--bs-border-width); --bs-popover-border-color: var(--bs-border-color-translucent); @@ -5780,7 +5784,7 @@ textarea.form-control-lg { --bs-popover-box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15); --bs-popover-header-padding-x: 1rem; --bs-popover-header-padding-y: 0.5rem; - --bs-popover-header-font-size: 0.875rem; + --bs-popover-header-font-size: 1rem; --bs-popover-header-color: #495057; --bs-popover-header-bg: var(--bs-secondary-bg); --bs-popover-body-padding-x: 1rem; @@ -8242,27 +8246,27 @@ textarea.form-control-lg { } .fs-1 { - font-size: calc(1.34375rem + 1.125vw) !important; + font-size: calc(1.375rem + 1.5vw) !important; } .fs-2 { - font-size: calc(1.3rem + 0.6vw) !important; + font-size: calc(1.325rem + 0.9vw) !important; } .fs-3 { - font-size: calc(1.278125rem + 0.3375vw) !important; + font-size: calc(1.3rem + 0.6vw) !important; } .fs-4 { - font-size: calc(1.25625rem + 0.075vw) !important; + font-size: calc(1.275rem + 0.3vw) !important; } .fs-5 { - font-size: 1.09375rem !important; + font-size: 1.25rem !important; } .fs-6 { - font-size: 0.875rem !important; + font-size: 1rem !important; } .fst-italic { @@ -11805,16 +11809,16 @@ textarea.form-control-lg { } @media (min-width: 1200px) { .fs-1 { - font-size: 2.1875rem !important; + font-size: 2.5rem !important; } .fs-2 { - font-size: 1.75rem !important; + font-size: 2rem !important; } .fs-3 { - font-size: 1.53125rem !important; + font-size: 1.75rem !important; } .fs-4 { - font-size: 1.3125rem !important; + font-size: 1.5rem !important; } } @media print {