diff --git a/framework/core/less/admin/AdminHeader.less b/framework/core/less/admin/AdminHeader.less index 5c41e75df..178aacfc2 100644 --- a/framework/core/less/admin/AdminHeader.less +++ b/framework/core/less/admin/AdminHeader.less @@ -1,17 +1,17 @@ .AdminHeader { - background: @control-bg; + background: var(--control-bg); margin-bottom: 20px; padding: 20px 0; h2 { margin-top: 0; margin-bottom: 10px; - color: @muted-color; + color: var(--muted-color); } &-description { margin: 0; - color: @control-color; + color: var(--control-color); } .icon { diff --git a/framework/core/less/admin/AdminNav.less b/framework/core/less/admin/AdminNav.less index 74978fe60..5206047e7 100644 --- a/framework/core/less/admin/AdminNav.less +++ b/framework/core/less/admin/AdminNav.less @@ -1,6 +1,6 @@ -@admin-pane-width: 250px; - .App { + --admin-pane-width: 250px; + padding-bottom: 0; } @@ -72,12 +72,12 @@ @media @desktop-up { .App-nav { position: absolute; - top: @header-height; - height: ~"calc(100vh - @{header-height})"; - width: @admin-pane-width; - box-shadow: 0 6px 6px @shadow-color; - background: @body-bg; - z-index: @zindex-pane; + top: var(--header-height); + height: ~"calc(100vh - var(--header-height))"; + width: var(--admin-pane-width); + box-shadow: 0 6px 6px var(--shadow-color); + background: var(--body-bg); + z-index: var(--zindex-pane); overflow-y: scroll; padding-bottom: 40px; @@ -87,7 +87,7 @@ } } .App-content .sideNavOffset { - margin-left: @admin-pane-width; + margin-left: var(--admin-pane-width); } .App-nav .AdminNav { .Dropdown-menu { @@ -112,17 +112,17 @@ > a, > a:hover, &.active > a { - color: @text-color; + color: var(--text-color); } > a:hover { - background: @control-bg; + background: var(--control-bg); } &.active > a { - background: @control-color; + background: var(--control-color); font-weight: normal; - color: @body-bg; + color: var(--body-bg); .Button-label, .Button-icon { @@ -177,7 +177,7 @@ } .ExtensionListTitle { - color: @muted-color; + color: var(--muted-color); text-transform: uppercase; margin: 25px 0 8px 15px; } @@ -204,9 +204,9 @@ } .ExtensionListItem-Dot.enabled { - background-color: #2ECC40; + background-color: var(--enabled-color); } .ExtensionListItem-Dot.disabled { - border: 2px solid #FF4136; + border: 2px solid var(--disabled-color); box-sizing: border-box; } diff --git a/framework/core/less/admin/DashboardPage.less b/framework/core/less/admin/DashboardPage.less index 5e7c771e7..081966f5d 100644 --- a/framework/core/less/admin/DashboardPage.less +++ b/framework/core/less/admin/DashboardPage.less @@ -1,24 +1,24 @@ .DashboardPage { - background: @body-bg; - color: @control-color; + background: var(--body-bg); + color: var(--control-color); min-height: 100vh; padding-bottom: 30px; } .Widget { - background: @control-bg; - color: @text-color; - border-radius: @border-radius; + background: var(--control-bg); + color: var(--text-color); + border-radius: var(--border-radius); padding: 20px; margin-bottom: 20px; .Button { - .Button--color(@control-color, @body-bg, 'button-alternate') + .Button--color-auto('button-inverted'); } } .StatusWidget { - color: @muted-color; + color: var(--muted-color); >ul { margin: 0; diff --git a/framework/core/less/admin/ExtensionPage.less b/framework/core/less/admin/ExtensionPage.less index a9b00085a..074fd0e2b 100644 --- a/framework/core/less/admin/ExtensionPage.less +++ b/framework/core/less/admin/ExtensionPage.less @@ -23,7 +23,7 @@ .Checkbox.off { .Checkbox-display { - background: @muted-more-color; + background: var(--muted-more-color); } } } @@ -31,14 +31,14 @@ &-header, &-permissions-header { - background: @control-bg; + background: var(--control-bg); h2 { - color: @muted-color; + color: var(--muted-color); span { font-size: 13px; - color: @muted-color; + color: var(--muted-color); font-weight: normal; } } @@ -56,12 +56,12 @@ > li { display: inline; - color: @muted-color; + color: var(--muted-color); margin-left: 13px; > a { - color: @muted-color; + color: var(--muted-color); } > .icon { @@ -107,7 +107,7 @@ } &-subHeader { - color: @muted-color; + color: var(--muted-color); font-weight: normal; } @@ -140,7 +140,7 @@ .item-authors { a { - color: @muted-color; + color: var(--muted-color); } } } diff --git a/framework/core/less/admin/ExtensionWidget.less b/framework/core/less/admin/ExtensionWidget.less index 3f5413d6b..79d8d0a8a 100644 --- a/framework/core/less/admin/ExtensionWidget.less +++ b/framework/core/less/admin/ExtensionWidget.less @@ -1,17 +1,17 @@ .ExtensionsWidget { - background-color: @body-bg; + background-color: var(--body-bg); padding: 0; } .ExtensionsWidget-list { padding: 0; - background-color: @body-bg; + background-color: var(--body-bg); .ExtensionGroup { margin-bottom: 20px; h3 { - color: @muted-color; + color: var(--muted-color); text-transform: uppercase; font-size: 12px; margin: 0 0 10px; @@ -35,21 +35,21 @@ } .ExtensionList-Category { - background: @control-bg; + background: var(--control-bg); padding: 20px 0 20px 20px; margin-bottom: 20px; - border-radius: @border-radius; + border-radius: var(--border-radius); } .ExtensionList-Label { margin-top: 0; - color: @muted-color; + color: var(--muted-color); } .ExtensionListItem.disabled { .ExtensionListItem-title { opacity: 0.5; - color: @muted-color; + color: var(--muted-color); } .ExtensionListItem-icon { @@ -73,15 +73,15 @@ display: block; text-align: center; margin-top: 5px; - color: @text-color; + color: var(--text-color); } .ExtensionIcon { --size: 90px; width: var(--size); height: var(--size); - background: @control-bg; - color: @control-color; + background: var(--control-bg); + color: var(--control-color); border-radius: 6px; display: inline-flex; font-size: calc(~"var(--size) / 2"); diff --git a/framework/core/less/admin/PermissionsPage.less b/framework/core/less/admin/PermissionsPage.less index 39ba8047e..f318f8d58 100644 --- a/framework/core/less/admin/PermissionsPage.less +++ b/framework/core/less/admin/PermissionsPage.less @@ -1,6 +1,6 @@ .PermissionsPage-groups { - background: @control-bg; - border-radius: @border-radius; + background: var(--control-bg); + border-radius: var(--border-radius); display: block; overflow-x: auto; padding: 10px; @@ -9,7 +9,7 @@ width: 90px; display: inline-block; text-align: center; - color: @text-color; + color: var(--text-color); font-weight: bold; padding-left: 10px; padding-right: 10px; @@ -21,7 +21,7 @@ text-overflow: ellipsis; } .Group--add { - color: @muted-color; + color: var(--muted-color); width: auto; margin-left: 10px; font-weight: normal; @@ -47,7 +47,7 @@ text-align: left; } td { - color: @muted-color; + color: var(--muted-color); } thead th { position: -webkit-sticky; @@ -57,15 +57,15 @@ text-transform: uppercase; font-weight: bold; font-size: 12px; - color: @muted-color; - background: @body-bg; + color: var(--muted-color); + background: var(--body-bg); min-width: 140px; z-index: 1; &:first-child { left: 0; z-index: 3; - background: @body-bg; + background: var(--body-bg); } &:not(:hover) .PermissionGrid-removeScope { @@ -86,7 +86,7 @@ font-size: 14px; width: 18px; text-align: center; - color: @muted-color; + color: var(--muted-color); } } .Dropdown { @@ -132,14 +132,14 @@ } } .PermissionGrid-section { - background: @body-bg; + background: var(--body-bg); td, th { padding-top: 10px; } } .PermissionGrid-child { - background: @body-bg; + background: var(--body-bg); td, th { position: relative; @@ -149,6 +149,6 @@ } &:hover { - background: lighten(@control-bg, 3%); + background: var(--control-bg-light); } } diff --git a/framework/core/less/admin/UsersListPage.less b/framework/core/less/admin/UsersListPage.less index 9ba0d7452..b76b653f0 100644 --- a/framework/core/less/admin/UsersListPage.less +++ b/framework/core/less/admin/UsersListPage.less @@ -5,7 +5,7 @@ &-grid { width: 100%; position: relative; - border-radius: @border-radius; + border-radius: var(--border-radius); // Use CSS custom properties to define the number of columns in the grid grid-template-columns: repeat(var(--columns), max-content); @@ -43,9 +43,9 @@ &-header { font-weight: bold; - border-bottom: 1px solid @muted-more-color; + border-bottom: 1px solid var(--muted-more-color); padding: 8px 16px; - background: @control-bg; + background: var(--control-bg); } &-rowItem { @@ -59,10 +59,10 @@ } &--shaded { - background: darken(@body-bg, 3%); + background: var(--body-bg-shaded); & when (@config-dark-mode = true) { - background: lighten(@body-bg, 5%); + background: var(--body-bg-light); } } } diff --git a/framework/core/less/common/Alert.less b/framework/core/less/common/Alert.less index 72db46e62..8af4ad80a 100644 --- a/framework/core/less/common/Alert.less +++ b/framework/core/less/common/Alert.less @@ -1,6 +1,6 @@ .Alert { padding: 12px 16px; - border-radius: @border-radius; + border-radius: var(--border-radius); line-height: 1.5; background: var(--alert-bg); @@ -16,14 +16,12 @@ .Button.focus { color: var(--alert-color); } - - .Alert--color(@alert-color, @alert-bg); } .Alert--error { - .Alert--color(@alert-error-color, @alert-error-bg); + .Alert--color(var(--alert-error-color), var(--alert-error-bg)); } .Alert--success { - .Alert--color(@alert-success-color, @alert-success-bg); + .Alert--color(var(--alert-success-color), var(--alert-success-bg)); a, a:hover { text-decoration: underline; diff --git a/framework/core/less/common/AlertManager.less b/framework/core/less/common/AlertManager.less index d362e06cd..54815f8a3 100644 --- a/framework/core/less/common/AlertManager.less +++ b/framework/core/less/common/AlertManager.less @@ -2,11 +2,11 @@ position: fixed; bottom: 20px; left: 20px; - z-index: @zindex-alerts; + z-index: var(--zindex-alerts); .Alert { display: inline-block; margin-top: 20px; - box-shadow: 0 2px 6px @shadow-color; + box-shadow: 0 2px 6px var(--shadow-color); } } diff --git a/framework/core/less/common/App.less b/framework/core/less/common/App.less index bf9cd0512..291c3b794 100644 --- a/framework/core/less/common/App.less +++ b/framework/core/less/common/App.less @@ -1,12 +1,12 @@ .App { position: relative !important; - padding-top: @header-height; + padding-top: var(--header-height); padding-bottom: 50px; overflow-x: hidden; min-height: 100vh; @media @phone { - padding-top: @header-height-phone; + padding-top: var(--header-height-phone); } } @@ -24,12 +24,12 @@ } .scrolled & { - box-shadow: 0 2px 6px @shadow-color; + box-shadow: 0 2px 6px var(--shadow-color); } } .App-primaryControl, .App-titleControl, .App-backControl { position: absolute !important; - z-index: @zindex-header + 1; + z-index: calc(~"var(--zindex-header) + 1"); top: 0 !important; margin: 0; @@ -41,7 +41,7 @@ float: none; background: transparent !important; box-shadow: none !important; - height: @header-height-phone; + height: var(--header-height-phone); width: auto; padding: 13px !important; margin: 0 !important; @@ -71,7 +71,7 @@ margin: 0 !important; > .Button { - color: @header-control-color !important; + color: var(--header-control-color) !important; .Button-icon { display: block; @@ -88,13 +88,13 @@ left: 50%; margin-left: -100px; text-align: center; - color: @header-color !important; + color: var(--header-color) !important; &, > .Button { font-size: 16px; } > .Button { - color: @header-color; + color: var(--header-color); width: 100%; overflow: hidden; text-overflow: ellipsis; @@ -130,16 +130,16 @@ overflow: hidden; } .App-drawer { - background: @header-bg; - width: @drawer-width; + background: var(--header-bg); + width: var(--drawer-width); position: fixed; left: 0; top: 0; bottom: 0; - box-shadow: 0 2px 6px @shadow-color; - transform: translate(-@drawer-width - 6px, 0); + box-shadow: 0 2px 6px var(--shadow-color); + transform: translateX(calc(~"-6px - var(--drawer-width)")); transition: transform 0.2s; - z-index: @zindex-modal; + z-index: var(--zindex-modal); .drawerOpen & { -webkit-transform: none !important; @@ -152,8 +152,8 @@ right: 0; bottom: 0; left: 0; - z-index: @zindex-modal-background; - background-color: @overlay-bg; + z-index: var(--zindex-modal-background); + background-color: var(--overlay-bg); opacity: 0; transition: opacity 0.2s; @@ -221,7 +221,7 @@ @media @phone { .App-drawer { & when (@config-colored-header = true) { - .light-contents(@header-color, @header-control-bg, @header-control-color); + .light-contents(@name: 'header-colored'); } } } @@ -241,11 +241,11 @@ } .scrolled & { - box-shadow: 0 2px 6px @shadow-color; + box-shadow: 0 2px 6px var(--shadow-color); } & when (@config-colored-header = true) { - .light-contents(@header-color, @header-control-bg, @header-control-color); + .light-contents(@name: 'header-colored'); } } @@ -295,7 +295,7 @@ // Content Area .App-content { - border-top: 1px solid @control-bg; + border-top: 1px solid var(--control-bg); } // On phones, the content area overlays the drawer, so we must give it a @@ -303,7 +303,7 @@ // meant to be open, we slide the content to the right to reveal the drawer. @media @phone { .App-content { - background: @body-bg; + background: var(--body-bg); width: 100%; min-height: 100vh; padding-bottom: 50px; diff --git a/framework/core/less/common/Badge.less b/framework/core/less/common/Badge.less index 5d94cb282..3df260b79 100644 --- a/framework/core/less/common/Badge.less +++ b/framework/core/less/common/Badge.less @@ -9,7 +9,7 @@ align-items: center; justify-content: center; vertical-align: middle; - box-shadow: 0 2px 4px @shadow-color; + box-shadow: 0 2px 4px var(--shadow-color); .Badge-label { display: none; @@ -35,5 +35,5 @@ } .Badge--hidden { - background: #888; + --badge-bg: var(--badge-hidden-bg); } diff --git a/framework/core/less/common/Button.less b/framework/core/less/common/Button.less index 430145691..32169af6d 100644 --- a/framework/core/less/common/Button.less +++ b/framework/core/less/common/Button.less @@ -51,9 +51,10 @@ white-space: nowrap; line-height: 20px; padding: 8px 13px; - border-radius: @border-radius; + border-radius: var(--border-radius); .user-select(none); - .Button--color(@control-color, @control-bg, 'button'); + color: var(--button-color); + background: var(--button-bg); border: 0; &:hover { @@ -90,34 +91,26 @@ margin-top: -0.175em; margin-left: 4px; } -} - -.Button--color(@color; @background; @name: 'button') { - color: var(~"--@{name}-color", ~"@{color}"); - background: var(~"--@{name}-bg", ~"@{background}"); - @bg-hover: darken(fadein(@background, 5%), 5%); - @bg-active: darken(fadein(@background, 10%), 10%); &:hover, &:focus, &.focus { - background-color: var(~"--@{name}-bg-hover", ~"@{bg-hover}"); + background-color: var(--button-bg-hover); } &:active, &.active, .open > .Dropdown-toggle& { - background-color: var(~"--@{name}-bg-active", ~"@{bg-active}"); + background-color: var(--button-bg-active); } &.disabled, &[disabled], fieldset[disabled] & { - background: var(~"--@{name}-bg-disabled", ~"@{background}"); + background: var(--button-bg-disabled); } } - .Button--square { padding-left: 9px; padding-right: 9px; @@ -134,7 +127,7 @@ &:hover { background: transparent !important; - color: @link-color; + color: var(--link-color); } &:active, &.active, @@ -143,7 +136,7 @@ .open > &.Dropdown-toggle { background: transparent !important; box-shadow: none; - color: @link-color; + color: var(--link-color); } } .Button--text { @@ -162,7 +155,7 @@ } } .Button--primary { - .Button--color(@body-bg, @primary-color, 'button-primary'); + .Button--color-auto('button-primary'); font-weight: bold; padding-left: 20px; padding-right: 20px; @@ -172,7 +165,7 @@ } } .Button--danger { - .Button--color(@control-danger-color, @control-danger-bg, 'control-danger'); + .Button--color-auto('control-danger'); } .Button--more { padding: 2px 4px; diff --git a/framework/core/less/common/Checkbox.less b/framework/core/less/common/Checkbox.less index ce9d322b7..79949e7fb 100644 --- a/framework/core/less/common/Checkbox.less +++ b/framework/core/less/common/Checkbox.less @@ -24,9 +24,9 @@ } } .Checkbox--switch { - @left-pad: 65px; + --left-pad: 65px; - padding-left: @left-pad; + padding-left: var(--left-pad); margin: 5px 0; input[type="checkbox"] { @@ -37,7 +37,7 @@ .Checkbox-display { float: left; - margin-left: -@left-pad; + margin-left: calc(~"0px - var(--left-pad)"); margin-top: -4px; } } @@ -48,7 +48,7 @@ padding: 3px; position: relative; border-radius: 14px; - background: @control-bg; + background: var(--control-bg); transition: background-color 0.2s; .LoadingIndicator { @@ -60,7 +60,7 @@ } .on& { - background: #58a400; + background: var(--switch-on-color); .LoadingIndicator-container { // Show loading indicator over the switch button @@ -89,34 +89,34 @@ } &:before { content: " "; - background: @body-bg; + background: var(--body-bg); border-radius: 11px; - box-shadow: 0 2px 4px @shadow-color; + box-shadow: 0 2px 4px var(--shadow-color); } } .Checkbox-display { font-size: 14px; .on & { - color: #58a400; + color: var(--switch-on-color); } .off & { - color: #d0021b; + color:var(--switch-off-color); } .disabled & { - color: @muted-more-color !important; + color: var(--muted-more-color) !important; } } .Checkbox--switch.loading { - color: @muted-more-color !important; + color: var(--muted-more-color) !important; &.on .Checkbox-display { - background: fade(#58a400, 0.5); + background: transparent; } &.off .Checkbox-display { - background: fade(@control-bg, 0.5); + background: transparent; } .LoadingIndicator { - color: darken(@muted-color, 50%); + color: var(--muted-color-dark); } } diff --git a/framework/core/less/common/Dropdown.less b/framework/core/less/common/Dropdown.less index f94851226..bba41342b 100644 --- a/framework/core/less/common/Dropdown.less +++ b/framework/core/less/common/Dropdown.less @@ -5,17 +5,17 @@ position: absolute; top: 100%; left: 0; - z-index: @zindex-dropdown; + z-index: var(--zindex-dropdown); display: none; min-width: 160px; padding: 8px 0; margin: 7px 0; - background: @body-bg; - border-radius: @border-radius; - box-shadow: 0 2px 6px @shadow-color; + background: var(--body-bg); + border-radius: var(--border-radius); + box-shadow: 0 2px 6px var(--shadow-color); list-style: none; text-align: left; - color: @text-color; + color: var(--text-color); font-size: 13px; line-height: 1.5; @@ -28,7 +28,7 @@ padding: 8px 15px; display: block; width: 100%; - color: @text-color; + color: var(--text-color); border-radius: 0; border: 0; background: none; @@ -61,12 +61,12 @@ } > a, > button { &:hover { - background: @control-bg; + background: var(--control-bg); } } &.active { > a, > button { - background: @control-bg; + background: var(--control-bg); } } } @@ -81,12 +81,12 @@ } .Dropdown-header { padding: 10px 15px; - color: @heading-color; + color: var(--heading-color); text-transform: uppercase; font-size: 12px; font-weight: bold; margin-top: 8px; - border-top: 1px solid @control-bg; + border-top: 1px solid var(--control-bg); white-space: nowrap; &:first-child { @@ -96,7 +96,7 @@ } .Dropdown-separator { margin: 8px 0; - background-color: @control-bg; + background-color: var(--control-bg); height: 1px; } @@ -107,7 +107,7 @@ right: 0; bottom: 0; top: 0; - z-index: (@zindex-dropdown - 10); + z-index: calc(~"var(--zindex-dropdown) - 10"); } @@ -122,7 +122,7 @@ &.itemCount1 { .Button { - border-radius: @border-radius !important; + border-radius: var(--border-radius) !important; } .Dropdown-toggle { display: none; @@ -159,7 +159,7 @@ @media @phone { .Dropdown.open { - z-index: @zindex-modal; + z-index: var(--zindex-modal); } .Dropdown .Dropdown-menu { margin: 0; @@ -174,7 +174,7 @@ display: block; max-height: 70vh; border-radius: 0; - box-shadow: 0 2px 6px @shadow-color; + box-shadow: 0 2px 6px var(--shadow-color); visibility: hidden; overflow: auto; -webkit-overflow-scrolling: touch; @@ -183,7 +183,7 @@ > li { > a, > button { - background: @body-bg; + background: var(--body-bg); font-size: 16px; padding: 15px 20px; @@ -195,14 +195,14 @@ margin-left: -30px; } &:hover { - background: @control-bg; + background: var(--control-bg); } } } > .active { > a, > button { &, &:hover { - background: @primary-color !important; + background: var(--primary-color) !important; color: #fff !important; } } @@ -218,7 +218,7 @@ margin: 0; } .dropdown-backdrop { - background: fade(@secondary-color, 90%); + background: var(--overlay-bg); opacity: 0; transition: opacity 0.3s; transform: translate(0, 0); diff --git a/framework/core/less/common/Form.less b/framework/core/less/common/Form.less index 8f3b1de85..85bca9817 100644 --- a/framework/core/less/common/Form.less +++ b/framework/core/less/common/Form.less @@ -36,6 +36,6 @@ font-size: 14px; font-weight: bold; margin-bottom: 10px; - color: @text-color; + color: var(--text-color); display: block; } diff --git a/framework/core/less/common/FormControl.less b/framework/core/less/common/FormControl.less index 20f99f1f3..07d374e4a 100644 --- a/framework/core/less/common/FormControl.less +++ b/framework/core/less/common/FormControl.less @@ -6,22 +6,22 @@ padding: 8px 13px; font-size: 13px; line-height: 1.5; - color: @control-color; - background-color: @control-bg; + color: var(--control-color); + background-color: var(--control-bg); border: 2px solid transparent; - border-radius: @border-radius; + border-radius: var(--border-radius); transition: var(--transition); -webkit-appearance: none; &:focus { - background-color: @body-bg; - color: @text-color; - border-color: @primary-color; + background-color: var(--body-bg); + color: var(--text-color); + border-color: var(--primary-color); outline: none; } // Placeholder - .placeholder(@control-color); + .placeholder(var(--control-color)); // Disabled and read-only inputs &[disabled], @@ -48,5 +48,5 @@ font-size: 12px; line-height: 1.5em; margin-bottom: 10px; - color: @muted-color; + color: var(--muted-color); } diff --git a/framework/core/less/common/LoadingIndicator.less b/framework/core/less/common/LoadingIndicator.less index 96fa2d980..21aedd78d 100644 --- a/framework/core/less/common/LoadingIndicator.less +++ b/framework/core/less/common/LoadingIndicator.less @@ -22,7 +22,7 @@ --size: 24px; --thickness: 2px; - color: @muted-color; + color: var(--muted-color); // Center vertically and horizontally // Allows people to set `height` and it'll stay centered within the new height diff --git a/framework/core/less/common/Modal.less b/framework/core/less/common/Modal.less index 4607ed052..892057850 100644 --- a/framework/core/less/common/Modal.less +++ b/framework/core/less/common/Modal.less @@ -13,8 +13,8 @@ right: 0; bottom: 0; left: 0; - z-index: @zindex-modal-background; - background-color: @overlay-bg; + z-index: var(--zindex-modal-background); + background-color: var(--overlay-bg); opacity: 0; transition: opacity 0.2s; @@ -32,7 +32,7 @@ right: 0; bottom: 0; left: 0; - z-index: @zindex-modal; + z-index: var(--zindex-modal); -webkit-overflow-scrolling: touch; // When fading in the modal, animate it to slide down @@ -60,7 +60,7 @@ // Actual modal .Modal-content { position: relative; - background-color: @body-bg; + background-color: var(--body-bg); background-clip: padding-box; margin: 0 auto; overflow: hidden; @@ -88,13 +88,13 @@ } .Modal-body { - background-color: @control-bg; + background-color: var(--control-bg); padding: 25px 30px; - color: @control-color; + color: var(--control-color); .FormControl { - background-color: @body-bg; - color: @text-color; + background-color: var(--body-bg); + color: var(--text-color); } .Form--centered { @@ -107,37 +107,20 @@ } .off.Checkbox--switch .Checkbox-display { - background: @muted-more-color; + background: var(--muted-more-color); } } .Modal-footer { border: 0; padding: 20px; text-align: center; - color: @muted-color; -} -.Modal-loading { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: fade(@body-bg, 90%); - opacity: 0; - pointer-events: none; - border-radius: @border-radius; - transition: opacity 0.2s; - - &.active { - opacity: 1; - pointer-events: auto; - } + color: var(--muted-color); } .Modal--inverted { .Modal-header { - background-color: @control-bg; - color: @control-color; + background-color: var(--control-bg); + color: var(--control-color); } .Modal-body { background-color: transparent; @@ -179,7 +162,7 @@ border-radius: 0; border: 0; min-height: 100vh; - padding-top: @header-height-phone; + padding-top: var(--header-height-phone); box-shadow: none; } .Modal-header { @@ -202,8 +185,8 @@ .Modal-content { border: 0; - border-radius: @border-radius; - box-shadow: 0 7px 15px @shadow-color; + border-radius: var(--border-radius); + box-shadow: 0 7px 15px var(--shadow-color); } .Modal--small { max-width: 375px; diff --git a/framework/core/less/common/Navigation.less b/framework/core/less/common/Navigation.less index c50cb1d40..8b9d20c75 100644 --- a/framework/core/less/common/Navigation.less +++ b/framework/core/less/common/Navigation.less @@ -1,6 +1,6 @@ .Navigation-back { z-index: 3 !important; // z-index of an active .btn-group .btn is 2 - border-radius: @border-radius !important; + border-radius: var(--border-radius) !important; transition: border-radius 0.2s; max-width: 150px; overflow: hidden; @@ -16,7 +16,7 @@ display: none; opacity: 0; margin-left: -5px !important; - border-radius: 0 @border-radius @border-radius 0; + border-radius: 0 var(--border-radius) var(--border-radius) 0; transition: opacity 0.2s, margin-left 0.2s; .icon { @@ -30,7 +30,7 @@ } .hasPane.panePinned, .hasPane.paneShowing { .Navigation-back { - border-radius: @border-radius 0 0 @border-radius !important; + border-radius: var(--border-radius) 0 0 var(--border-radius) !important; } .Navigation-pin { opacity: 1; @@ -49,12 +49,12 @@ content: ' '; display: block; position: absolute; - background: @header-color; + background: var(--header-color); top: 10px; right: 3px; width: 14px; height: 14px; border-radius: 7px; - border: 2px solid @header-bg; + border: 2px solid var(--header-bg); } } diff --git a/framework/core/less/common/Placeholder.less b/framework/core/less/common/Placeholder.less index be0f13e5a..1d714a951 100644 --- a/framework/core/less/common/Placeholder.less +++ b/framework/core/less/common/Placeholder.less @@ -3,7 +3,7 @@ p { font-size: 1.4em; - color: @muted-more-color; + color: var(--muted-more-color); text-align: center; } } diff --git a/framework/core/less/common/Search.less b/framework/core/less/common/Search.less index 7ec3b8714..f0236e6fe 100644 --- a/framework/core/less/common/Search.less +++ b/framework/core/less/common/Search.less @@ -56,7 +56,7 @@ .Search-input { overflow: hidden; - color: @muted-color; + color: var(--muted-color); &:before { .fa(); @@ -98,7 +98,7 @@ .DiscussionSearchResult-excerpt { margin-top: 3px; - color: @muted-color; + color: var(--muted-color); font-size: 11px; } .UserSearchResult .Avatar { diff --git a/framework/core/less/common/Select.less b/framework/core/less/common/Select.less index 73185966a..89b08bc29 100644 --- a/framework/core/less/common/Select.less +++ b/framework/core/less/common/Select.less @@ -15,6 +15,6 @@ .Select-caret { margin-left: -30px; pointer-events: none; - color: @control-color; + color: var(--control-color); .fa-fw(); } diff --git a/framework/core/less/common/Table.less b/framework/core/less/common/Table.less index dbcb52c8a..9499c6750 100644 --- a/framework/core/less/common/Table.less +++ b/framework/core/less/common/Table.less @@ -1,6 +1,6 @@ .Table { - background: @control-bg; - border-radius: @border-radius; + background: var(--control-bg); + border-radius: var(--border-radius); border-collapse: collapse; border-spacing: 0; @@ -9,8 +9,8 @@ } td, th { - border-bottom: 1px solid @body-bg; - color: @control-color; + border-bottom: 1px solid var(--body-bg); + color: var(--control-color); } td, th, .Checkbox, &-controls-item { @@ -57,7 +57,7 @@ &.highlighted .Checkbox, .Checkbox:hover { &:not(.disabled) { - background: darken(@control-bg, 4%); + background: var(--control-bg-shaded); } } } diff --git a/framework/core/less/common/TextEditor.less b/framework/core/less/common/TextEditor.less index 9c6580988..91ed6e099 100644 --- a/framework/core/less/common/TextEditor.less +++ b/framework/core/less/common/TextEditor.less @@ -3,7 +3,7 @@ padding: 0 0 10px; border: 0; resize: none; - color: @text-color; + color: var(--text-color); font-size: 14px; line-height: 1.7; @@ -38,7 +38,7 @@ .TextEditor-controls { margin: 0 -20px 0 -105px; padding: 10px 20px; - border-top: 1px solid @control-bg; + border-top: 1px solid var(--control-bg); .fullScreen & { margin: 0; diff --git a/framework/core/less/common/Tooltip.less b/framework/core/less/common/Tooltip.less index 08ac8d498..1a5eaa71f 100644 --- a/framework/core/less/common/Tooltip.less +++ b/framework/core/less/common/Tooltip.less @@ -3,8 +3,10 @@ // Base class .tooltip { + --tooltip-arrow-width: @tooltip-arrow-width; + position: absolute; - z-index: @zindex-tooltip; + z-index: var(--zindex-tooltip); display: block; font-size: 12px; font-weight: normal; @@ -13,21 +15,21 @@ transition: opacity 0.15s linear; &.in { opacity: 1; } - &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; } - &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; } - &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; } - &.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; } + &.top { margin-top: -3px; padding: var(--tooltip-arrow-width) 0; } + &.right { margin-left: 3px; padding: 0 var(--tooltip-arrow-width); } + &.bottom { margin-top: 3px; padding: var(--tooltip-arrow-width) 0; } + &.left { margin-left: -3px; padding: 0 var(--tooltip-arrow-width); } } // Wrapper for the tooltip content .tooltip-inner { max-width: 200px; padding: 7px 12px; - color: @tooltip-color; + color: var(--tooltip-color); text-align: center; text-decoration: none; - background-color: @tooltip-bg; - border-radius: @border-radius; + background-color: var(--tooltip-bg); + border-radius: var(--border-radius); } // Arrows @@ -44,29 +46,29 @@ &.top .tooltip-arrow { bottom: 0; left: 50%; - margin-left: -@tooltip-arrow-width; - border-width: @tooltip-arrow-width @tooltip-arrow-width 0; - border-top-color: @tooltip-bg; + margin-left: calc(~"0px - var(--tooltip-arrow-width)"); + border-width: var(--tooltip-arrow-width) var(--tooltip-arrow-width) 0; + border-top-color: var(--tooltip-bg); } &.right .tooltip-arrow { top: 50%; left: 0; - margin-top: -@tooltip-arrow-width; - border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0; - border-right-color: @tooltip-bg; + margin-top: calc(~"0px - var(--tooltip-arrow-width)"); + border-width: var(--tooltip-arrow-width) var(--tooltip-arrow-width) var(--tooltip-arrow-width) 0; + border-right-color: var(--tooltip-bg); } &.left .tooltip-arrow { top: 50%; right: 0; - margin-top: -@tooltip-arrow-width; - border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width; - border-left-color: @tooltip-bg; + margin-top: calc(~"0px - var(--tooltip-arrow-width)"); + border-width: var(--tooltip-arrow-width) 0 var(--tooltip-arrow-width) var(--tooltip-arrow-width); + border-left-color: var(--tooltip-bg); } &.bottom .tooltip-arrow { top: 0; left: 50%; - margin-left: -@tooltip-arrow-width; - border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; - border-bottom-color: @tooltip-bg; + margin-left: calc(~"0px - var(--tooltip-arrow-width)"); + border-width: 0 var(--tooltip-arrow-width) var(--tooltip-arrow-width); + border-bottom-color: var(--tooltip-bg); } } diff --git a/framework/core/less/common/ValidationError.less b/framework/core/less/common/ValidationError.less index a6a5018b5..2bf597bdc 100644 --- a/framework/core/less/common/ValidationError.less +++ b/framework/core/less/common/ValidationError.less @@ -1,5 +1,5 @@ .ValidationError { font-size: 0.9em; font-weight: bold; - color: @validation-error-color; + color: var(--validation-error-color); } diff --git a/framework/core/less/common/mixins.less b/framework/core/less/common/mixins.less index af6c77ec6..7a778a82e 100644 --- a/framework/core/less/common/mixins.less +++ b/framework/core/less/common/mixins.less @@ -1,5 +1,6 @@ @import "mixins/accessibility.less"; @import "mixins/border-radius.less"; +@import "mixins/button-color.less"; @import "mixins/clearfix.less"; @import "mixins/light-contents.less"; @import "mixins/header-background.less"; diff --git a/framework/core/less/common/mixins/button-color.less b/framework/core/less/common/mixins/button-color.less new file mode 100644 index 000000000..dd89227e9 --- /dev/null +++ b/framework/core/less/common/mixins/button-color.less @@ -0,0 +1,41 @@ +/** + * Should be used at the `:root` level to declare the color variations as custom CSS properties first. + * Then use the `.Button--color-auto()` below to use those variations on your element. + * + * `@name` parameter must be unique. + * + * For example: + * :root { + * .Button--color-vars(green, white, 'button-success'); + * } + * + * .Button--success { + * .Button-color-auto('button-success'); + * } + */ +.Button--color-vars(@color; @background; @name: 'button') { + @componentName: ~"@{name}"; + + --@{componentName}-color: @color; + --@{componentName}-bg: @background; + --@{componentName}-bg-hover: darken(fadein(@background, 5%), 5%); + --@{componentName}-bg-active: darken(fadein(@background, 10%), 10%); + --@{componentName}-bg-disabled: @background; +} + +.Button--color-auto(@name: 'button') { + --button-color: var(~"--@{name}-color"); + --button-bg: var(~"--@{name}-bg"); + --button-bg-hover: var(~"--@{name}-bg-hover"); + --button-bg-active: var(~"--@{name}-bg-active"); + --button-bg-disabled: var(~"--@{name}-bg-disabled"); +} + +/** + * Legacy mixin, allows customizing button colors inline without declaring custom CSS properties at the root. + * For a better theming experience, declaring the custom CSS properties at the root first using `Button--color-vars()` + * then using `Button--color-auto()` is recommended. + */ +.Button--color(@color; @background) { + .Button--color-vars(@color, @background, 'button'); +} diff --git a/framework/core/less/common/mixins/header-background.less b/framework/core/less/common/mixins/header-background.less index 74d98c606..86d175622 100644 --- a/framework/core/less/common/mixins/header-background.less +++ b/framework/core/less/common/mixins/header-background.less @@ -1,17 +1,17 @@ .header-background() { - background: @header-bg; + background: var(--header-bg); position: fixed; top: 0; left: 0; right: 0; - z-index: @zindex-header; - border-bottom: 1px solid @control-bg; + z-index: var(--zindex-header); + border-bottom: 1px solid var(--control-bg); transition: box-shadow 0.2s, transform 0.2s; @media @phone { - height: @header-height-phone; + height: var(--header-height-phone); } @media @tablet-up { - height: @header-height; + height: var(--header-height); } } diff --git a/framework/core/less/common/mixins/light-contents.less b/framework/core/less/common/mixins/light-contents.less index 3224d04cc..8a726b812 100644 --- a/framework/core/less/common/mixins/light-contents.less +++ b/framework/core/less/common/mixins/light-contents.less @@ -1,26 +1,26 @@ // This is a mixin which styles components (buttons, inputs, etc.) for use on // dark backgrounds. -.light-contents(@color: #fff, @control-bg: fade(#000, 10%), @control-color: #fff) { +.light-contents(@color: #fff; @control-bg: fade(#000, 10%); @control-color: #fff; @name: 'light-content') { &, a { - color: @color; + color: var(~"--@{name}-color", @color); } .Button--link, .Search-input { - color: @control-color; + color: var(~"--@{name}-control-color", @control-color); } .FormControl { - background: @control-bg; + background: var(~"--@{name}-control-bg", @control-bg); border: 0; - color: @control-color; - .placeholder(@control-color); + color: var(~"--@{name}-control-color", @control-color); + .placeholder(var(~"--@{name}-control-color", @control-color)); &:focus { color: @color; - background: fadein(darken(@control-bg, 5%), 10%); + background: var(~"--@{name}-control-bg-shaded", fadein(darken(@control-bg, 5%), 10%)); } } .Button, .Button:hover { - color: @control-color; - background: @control-bg; + color: var(~"--@{name}-control-color", @control-color); + background: var(~"--@{name}-control-bg", @control-bg); } .Button--flat { background: transparent; @@ -30,7 +30,17 @@ .Button:focus, .Button.focus, .open > .Dropdown-toggle.Button { - background: fadein(@control-bg, 5%); - color: @control-color; + background: var(~"--@{name}-control-bg-fadedin", fadein(@control-bg, 5%)); + color: var(~"--@{name}-control-color", @control-color); } } + +.light-contents-vars(@color: #fff; @control-bg: fade(#000, 10%); @control-color: #fff; @name: 'light-content') { + @componentName: ~"@{name}"; + + --@{componentName}-color: @color; + --@{componentName}-control-color: @control-color; + --@{componentName}-control-bg: @control-bg; + --@{componentName}-control-bg-shaded: fadein(darken(@control-bg, 5%), 10%); + --@{componentName}-control-bg-fadedin: fadein(@control-bg, 5%); +} diff --git a/framework/core/less/common/root.less b/framework/core/less/common/root.less index 3df86817d..2790ef75b 100644 --- a/framework/core/less/common/root.less +++ b/framework/core/less/common/root.less @@ -1,15 +1,109 @@ :root { - // Component colors - --avatar-bg: @control-bg; - --badge-bg: @muted-color; - --badge-color: #fff; - --usercard-bg: @control-bg; - --hero-bg: @hero-bg; - --hero-color: @hero-color; + + // --------------------------------- + // COLORS + + --primary-color: @primary-color; + --secondary-color: @secondary-color; + + --body-bg: @body-bg; + --body-bg-shaded: darken(@body-bg, 3%); + --body-bg-light: lighten(@body-bg, 5%); + --body-bg-faded: fade(@body-bg, 93%); + --text-color: @text-color; + --link-color: @link-color; + --heading-color: @heading-color; + + --muted-color: @muted-color; + --muted-color-light: lighten(@muted-color, 10%); + --muted-color-dark: darken(@muted-color, 50%); + --muted-more-color: @muted-more-color; + + --shadow-color: @shadow-color; + + --control-bg: @control-bg; + --control-bg-light: lighten(@control-bg, 3%); + --control-bg-shaded: darken(@control-bg, 4%); + --control-color: @control-color; + --control-danger-bg: @control-danger-bg; + --control-danger-color: @control-danger-color; + + --error-color: @error-color; + + // --------------------------------- + // COMPONENTS + + --header-bg: @header-bg; + --header-color: @header-color; + --header-control-bg: @header-control-bg; + --header-control-color: @header-control-color; + + --overlay-bg: @overlay-bg; + --code-bg: @code-bg; + --code-color: @code-color; + + --alert-bg: @alert-bg; + --alert-color: @alert-color; + --alert-error-bg: @alert-error-bg; + --alert-error-color: @alert-error-color; + --alert-success-bg: @alert-success-bg; + --alert-success-color: @alert-success-color; + + --switch-on-color: #58a400; + --switch-off-color: #d0021b; + + --enabled-color: #2ECC40; + --disabled-color: #FF4136; + + --validation-error-color: @validation-error-color; + + --avatar-bg: var(--control-bg); + --badge-bg: var(--muted-color); + --badge-color: #fff; + --badge-hidden-bg: #888; + --usercard-bg: var(--control-bg); + --hero-bg: @hero-bg; + --hero-color: @hero-color; + + --tooltip-bg: @tooltip-bg; + --tooltip-color: @tooltip-color; + + --online-user-circle-color: @online-user-circle-color; + + --discussion-title-color: mix(@heading-color, @body-bg, 55%); + --discussion-list-item-bg-hover: mix(@control-bg, @body-bg, 50%); + + .Button--color-vars(@control-color, @control-bg, 'button'); + .Button--color-vars(@body-bg, @primary-color, 'button-primary'); + .Button--color-vars(@control-danger-color, @control-danger-bg, 'control-danger'); + .Button--color-vars(@muted-more-color, fade(@muted-more-color, 30%), 'muted-more'); + .Button--color-vars(@control-color, @body-bg, 'button-inverted'); + + .light-contents-vars(); + .light-contents-vars(@header-color, @header-control-bg, @header-control-color, 'header-colored'); + + // --------------------------------- + // LAYOUT + + --border-radius: @border-radius; + + --drawer-width: @drawer-width; + --pane-width: @pane-width; + --header-height: @header-height; + --header-height-phone: @header-height-phone; + + --zindex-header: @zindex-header; + --zindex-pane: @zindex-pane; + --zindex-composer: @zindex-composer; + --zindex-dropdown: @zindex-dropdown; + --zindex-modal-background: @zindex-modal-background; + --zindex-modal: @zindex-modal; + --zindex-alerts: @zindex-alerts; + --zindex-tooltip: @zindex-tooltip; // Store the current responsive screen mode in a CSS variable, to make it // available to the JS code. - --flarum-screen: none; + --flarum-screen: none; @media @phone { --flarum-screen: phone; } @media @tablet { --flarum-screen: tablet; } diff --git a/framework/core/less/common/scaffolding.less b/framework/core/less/common/scaffolding.less index cf6b75d48..48280dae6 100644 --- a/framework/core/less/common/scaffolding.less +++ b/framework/core/less/common/scaffolding.less @@ -7,8 +7,8 @@ } body { - background: @body-bg; - color: @text-color; + background: var(--body-bg); + color: var(--text-color); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.5; @@ -30,7 +30,7 @@ textarea { a { cursor: pointer; - color: @link-color; + color: var(--link-color); text-decoration: none; &:hover { @@ -42,7 +42,7 @@ hr { margin-top: 15px; margin-bottom: 15px; border: 0; - border-top: 2px solid @control-bg; + border-top: 2px solid var(--control-bg); } p { @@ -75,7 +75,7 @@ p { mark { background: #FFE300; padding: 1px; - border-radius: @border-radius; + border-radius: var(--border-radius); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); } @@ -92,7 +92,7 @@ legend { font-size: 14px; font-weight: bold; margin-bottom: 10px; - color: @text-color; + color: var(--text-color); } input[type="search"] { -webkit-appearance: none; @@ -120,7 +120,7 @@ input[type="search"] { } } .darkenBackground { - background: @shadow-color; + background: var(--shadow-color); } blockquote p:last-child, @@ -146,7 +146,7 @@ blockquote ol:last-child { text-align: center; padding: 50px 0; font-size: 18px; - color: @muted-more-color; + color: var(--muted-more-color); } .visually-hidden { diff --git a/framework/core/less/common/sideNav.less b/framework/core/less/common/sideNav.less index c37e92e0a..e5c169663 100644 --- a/framework/core/less/common/sideNav.less +++ b/framework/core/less/common/sideNav.less @@ -19,11 +19,11 @@ & .Dropdown-menu { & > li > a { padding: 8px 0 8px 30px; - color: var(--sidenav-color, @muted-color); + color: var(--sidenav-color, var(--muted-color)); &:hover { background: none; - color: var(--sidenav-color-hover, @link-color); + color: var(--sidenav-color-hover, var(--link-color)); text-decoration: none; } @@ -35,7 +35,7 @@ } & > li.active > a { background: none; - color: var(--sidenav-color-active, @primary-color); + color: var(--sidenav-color-active, var(--primary-color)); font-weight: bold; } & > .Dropdown-separator { @@ -67,7 +67,7 @@ margin-top: 30px; &.affix { - top: @header-height; + top: var(--header-height); } > li { margin-bottom: 10px; @@ -88,7 +88,7 @@ left: 0; right: 0; margin-top: 15px; - border-bottom: 1px solid @control-bg; + border-bottom: 1px solid var(--control-bg); } > ul > li, .Dropdown-menu > li { diff --git a/framework/core/less/forum/ActivityPage.less b/framework/core/less/forum/ActivityPage.less index d051c753e..53ced69ea 100644 --- a/framework/core/less/forum/ActivityPage.less +++ b/framework/core/less/forum/ActivityPage.less @@ -12,7 +12,7 @@ list-style: none; > li { - border-bottom: 1px solid @control-bg; + border-bottom: 1px solid var(--control-bg); margin-bottom: 15px; } @@ -27,7 +27,7 @@ z-index: 1; &, a { - color: @muted-color; + color: var(--muted-color); } a { font-style: italic; diff --git a/framework/core/less/forum/Composer.less b/framework/core/less/forum/Composer.less index d33147e86..6ce20d3b5 100644 --- a/framework/core/less/forum/Composer.less +++ b/framework/core/less/forum/Composer.less @@ -3,12 +3,12 @@ .Composer { pointer-events: auto; - box-shadow: 0 2px 6px @shadow-color; + box-shadow: 0 2px 6px var(--shadow-color); &.minimized { height: 46px; cursor: pointer; - background: @control-bg; + background: var(--control-bg); } } .Composer-controls { @@ -39,7 +39,7 @@ h3 { margin: 0; line-height: 1.5em; - color: @secondary-color; + color: var(--secondary-color); &, input, a { font-size: 14px; @@ -87,9 +87,9 @@ left: 0; right: 0; bottom: 0; - background: fade(@body-bg, 90%); + background: var(--body-bg-faded); display: none; - border-radius: @border-radius @border-radius 0 0; + border-radius: var(--border-radius) var(--border-radius) 0 0; &.active { display: flex; @@ -110,15 +110,15 @@ bottom: 0; left: 0; right: 0; - z-index: @zindex-composer; - background: @body-bg; + z-index: var(--zindex-composer); + background: var(--body-bg); &:not(.minimized) { position: fixed; top: 0; height: 350px !important; max-height: 100%; - padding-top: @header-height-phone; + padding-top: var(--header-height-phone); // Fixes a bug where fixed position doesn't properly work in Safari mobile // https://github.com/flarum/core/issues/2652 @@ -139,7 +139,7 @@ & .Composer-controls { position: static; - z-index: @zindex-header + 1; + z-index: calc(~"var(--zindex-header) + 1"); li:not(.App-backControl) { display: none; @@ -159,8 +159,8 @@ right: 0; bottom: 0; left: 0; - z-index: @zindex-composer - 1; - background-color: @overlay-bg; + z-index: calc(~"var(--zindex-composer) - 1"); + background-color: var(--overlay-bg); opacity: 0.9; } .ComposerBody-content { @@ -176,7 +176,7 @@ > li { display: block; - border-bottom: 1px solid @control-bg; + border-bottom: 1px solid var(--control-bg); padding: 10px 15px; .minimized & { @@ -185,17 +185,17 @@ } .normal &:first-child { - margin: -@header-height-phone 50px 0; + margin: calc(~"0px - var(--header-height-phone)") 50px 0; text-align: center; position: relative; - z-index: @zindex-header + 1; + z-index: calc(~"var(--zindex-header) + 1"); border: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; h3 { - color: @header-control-color; + color: var(--header-control-color); } } } @@ -219,22 +219,22 @@ bottom: 0; left: 0; right: 0; - z-index: @zindex-composer; + z-index: var(--zindex-composer); pointer-events: none; transition: left 0.2s; } .Composer { - border-radius: @border-radius @border-radius 0 0; - background: fade(@body-bg, 95%); + border-radius: var(--border-radius) var(--border-radius) 0 0; + background: var(--body-bg-faded); position: relative; height: 300px; transition: background 0.2s, box-shadow 0.2s; &.active, &.fullScreen { - background: @body-bg; + background: var(--body-bg); } &.active:not(.fullScreen) { - box-shadow: 0 0 0 2px @primary-color, 0 2px 6px @shadow-color; + box-shadow: 0 0 0 2px var(--primary-color), 0 2px 6px var(--shadow-color); } &.fullScreen { position: fixed; @@ -322,6 +322,6 @@ @media @desktop-hd { .hasPane.panePinned .App-composer { - left: @pane-width; + left: var(--pane-width); } } diff --git a/framework/core/less/forum/DiscussionListItem.less b/framework/core/less/forum/DiscussionListItem.less index 9ae569d39..6f805ce0e 100644 --- a/framework/core/less/forum/DiscussionListItem.less +++ b/framework/core/less/forum/DiscussionListItem.less @@ -14,7 +14,7 @@ } .DiscussionListItem-content { position: relative; - color: @muted-color; + color: var(--muted-color); } .DiscussionListItem-main { color: inherit; @@ -45,13 +45,13 @@ .DiscussionListItem-title { margin: 0 0 3px; line-height: 1.3; - color: @heading-color; + color: var(--heading-color); font-weight: normal; overflow: hidden; text-overflow: ellipsis; .DiscussionList:not(.DiscussionList--searchResults) .read & { - color: mix(@heading-color, @body-bg, 55%); + color: var(--discussion-title-color); } .DiscussionList:not(.DiscussionList--searchResults) .unread & { font-weight: 600; @@ -61,7 +61,7 @@ background: none; box-shadow: none; font-weight: bold; - color: @text-color; + color: var(--text-color); } } .DiscussionListItem-info { @@ -69,7 +69,7 @@ padding: 0; margin: 0; font-size: 11px; - color: @muted-more-color; + color: var(--muted-more-color); > li { display: inline; @@ -110,10 +110,10 @@ } } -@media (any-hover: none) { - .DiscussionListItem-controls > .Dropdown-toggle { +@media (any-hover: none) { + .DiscussionListItem-controls > .Dropdown-toggle { display: none; - } + } } @media @phone { @@ -125,7 +125,7 @@ padding-right: 15px + 35px; &:active { - background: @control-bg; + background: var(--control-bg); } } .DiscussionListItem-author { @@ -158,14 +158,14 @@ } .DiscussionListItem-count { margin-right: -35px; - background: @control-bg; - color: @control-color; - border-radius: @border-radius; + background: var(--control-bg); + color: var(--control-color); + border-radius: var(--border-radius); font-size: 12px; padding: 2px 6px; .unread & { - background: @primary-color; + background: var(--primary-color); color: #fff; font-weight: bold; @@ -185,11 +185,11 @@ padding-right: 25px; padding-left: 15px; margin-left: -15px; - border-radius: @border-radius; + border-radius: var(--border-radius); transition: background 0.2s; &:hover { - background: mix(@control-bg, @body-bg, 50%); + background: var(--discussion-list-item-bg-hover); } &:hover .DiscussionListItem-controls, .DiscussionListItem-controls.open { @@ -245,7 +245,7 @@ margin-top: 12px; margin-right: -70px; width: 55px; - color: @muted-color; + color: var(--muted-color); font-size: 14px; padding-left: 21px; @@ -257,7 +257,7 @@ margin-top: 3px; } .unread & { - color: @heading-color; + color: var(--heading-color); font-weight: bold; &:before { diff --git a/framework/core/less/forum/DiscussionPage.less b/framework/core/less/forum/DiscussionPage.less index a283d23d8..a3f53c9e1 100644 --- a/framework/core/less/forum/DiscussionPage.less +++ b/framework/core/less/forum/DiscussionPage.less @@ -9,7 +9,7 @@ @media @phone { .DiscussionPage-nav { margin: 0 -15px; - border-bottom: 1px solid @control-bg; + border-bottom: 1px solid var(--control-bg); > ul > li { margin: 15px; @@ -69,17 +69,17 @@ @media @tablet-up { .DiscussionPage-list { - left: -@pane-width - 6px; + left: calc(~"-6px - var(--pane-width)"); position: absolute; - z-index: @zindex-pane; + z-index: var(--zindex-pane); overflow: auto; - top: @header-height; - height: ~"calc(100vh - @{header-height})"; - width: @pane-width; - background: @body-bg; + top: var(--header-height); + height: ~"calc(100vh - var(--header-height))"; + width: var(--pane-width); + background: var(--body-bg); padding-bottom: 40px; - border-top: 1px solid @control-bg; - box-shadow: 0 6px 6px @shadow-color; + border-top: 1px solid var(--control-bg); + box-shadow: 0 6px 6px var(--shadow-color); transition: left 0.2s; .affix & { @@ -96,7 +96,7 @@ border-radius: 0; &.active { - background: @control-bg; + background: var(--control-bg); } } .DiscussionListItem-controls { @@ -134,7 +134,7 @@ // When the pane is pinned, move the other page content inwards .App-content, .App-footer { .hasPane.panePinned & { - margin-left: @pane-width; + margin-left: var(--pane-width); .container { max-width: 100%; diff --git a/framework/core/less/forum/NotificationList.less b/framework/core/less/forum/NotificationList.less index 130f16480..081de1b41 100644 --- a/framework/core/less/forum/NotificationList.less +++ b/framework/core/less/forum/NotificationList.less @@ -4,7 +4,7 @@ &-header { @media @tablet-up { padding: 12px 15px; - border-bottom: 1px solid @control-bg; + border-bottom: 1px solid var(--control-bg); display: flex; justify-content: space-between; @@ -15,7 +15,7 @@ text-transform: uppercase; font-weight: bold; margin: 0; - color: @muted-color; + color: var(--muted-color); } } @@ -29,11 +29,11 @@ // it. In this case we will need to reset the button's styles back to // normal. & when (@config-colored-header = true) { - color: @control-color; + color: var(--control-color); &:hover, &:focus { - color: @link-color; + color: var(--link-color); } } @@ -48,7 +48,7 @@ // Message displayed when notifications are empty &-empty { - color: @muted-color; + color: var(--muted-color); text-align: center; padding: 50px 0; font-size: 16px; @@ -56,7 +56,7 @@ } .NotificationGroup { - border-top: 1px solid @control-bg; + border-top: 1px solid var(--control-bg); margin-top: -1px; &:not(:last-child) { @@ -65,7 +65,7 @@ &-header { font-weight: bold; - color: @heading-color !important; + color: var(--heading-color) !important; padding: 8px 16px; white-space: nowrap; overflow: hidden; @@ -79,13 +79,13 @@ } &-badges { - @overlap: 13px; + --overlap: 13px; margin-right: 8px; - padding-right: @overlap; + padding-right: var(--overlap); .Badge { - margin-right: -@overlap; + margin-right: calc(~"0px - var(--overlap)"); position: relative; .Badge--size(21px); } @@ -100,7 +100,7 @@ .Notification { padding: 8px 16px; - color: @muted-color !important; // required to override .light-contents applied to header + color: var(--muted-color) !important; // required to override .light-contents applied to header overflow: hidden; display: grid; @@ -118,14 +118,14 @@ .add-keyboard-focus-ring-offset(-1px); &.unread { - background: @control-bg; + background: var(--control-bg); } &:hover, &:focus, &:focus-within { text-decoration: none; - background: @control-bg; + background: var(--control-bg); .Notification-action { opacity: 1; @@ -136,7 +136,7 @@ .Avatar--size(24px); grid-area: avatar; } - + // Since images don't have baselines, aligning against the baseline won't work. // Instead we need to do some manual hackery to fix then, otherwise they won't // be correctly vertically aligned. @@ -187,11 +187,11 @@ // Needs more specificity to fix hover/focus styles not applying in dropdown .Notification & when (@config-colored-header = true) { - color: @control-color; + color: var(--control-color); &:hover, &:focus { - color: @link-color; + color: var(--link-color); } } @@ -203,7 +203,7 @@ &-excerpt { grid-area: excerpt; - color: @muted-more-color; + color: var(--muted-more-color); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; diff --git a/framework/core/less/forum/NotificationsDropdown.less b/framework/core/less/forum/NotificationsDropdown.less index 5b5e9c0f3..ad66c57d2 100644 --- a/framework/core/less/forum/NotificationsDropdown.less +++ b/framework/core/less/forum/NotificationsDropdown.less @@ -23,21 +23,21 @@ } .NotificationsDropdown .Dropdown-toggle.new .Button-icon { - color: @header-color; + color: var(--header-color); } .NotificationsDropdown-unread { position: absolute; top: 2px; left: 18px; - background: @header-control-color; - color: @header-bg; + background: var(--header-control-color); + color: var(--header-bg); font-size: 11px; font-weight: bold; padding: 2px 4px 3px; line-height: 1em; border-radius: 10px; - box-shadow: 0 0 0 1px @header-bg; + box-shadow: 0 0 0 1px var(--header-bg); min-width: 16px; height: 16px; text-align: center; @@ -47,6 +47,6 @@ } .new & { - background: @header-color; + background: var(--header-color); } } diff --git a/framework/core/less/forum/Post.less b/framework/core/less/forum/Post.less index aa6994104..31a53cbb0 100644 --- a/framework/core/less/forum/Post.less +++ b/framework/core/less/forum/Post.less @@ -7,7 +7,7 @@ transition: 0.2s box-shadow, top 0.2s, opacity 0.2s; position: relative; top: 0; - border-radius: @border-radius; + border-radius: var(--border-radius); .clearfix(); &.editing { @@ -18,10 +18,10 @@ .Post-header { margin-bottom: 15px; - color: @muted-color; + color: var(--muted-color); &, a { - color: @muted-color; + color: var(--muted-color); } > ul { list-style-type: none; @@ -44,7 +44,7 @@ display: inline; } h3, h3 a { - color: @heading-color; + color: var(--heading-color); font-weight: bold; font-size: 14px; } @@ -56,7 +56,7 @@ font-size: 12px; } & .fa-circle { - color: @online-user-circle-color; + color: var(--online-user-circle-color); } } @@ -64,7 +64,7 @@ position: absolute; top: -10px; left: -100px; - z-index: @zindex-dropdown; + z-index: var(--zindex-dropdown); transition: opacity 0.2s, transform 0.2s; transform: scale(0.95); transform-origin: left top; @@ -99,31 +99,31 @@ margin-bottom: 1em; } a { - border-bottom: 1px solid @control-bg; + border-bottom: 1px solid var(--control-bg); font-weight: 600; &:hover, &:focus, &:active { text-decoration: none; - border-color: @link-color; + border-color: var(--link-color); } } blockquote { font-size: inherit; border: 0; - background: @control-bg; - color: @control-color; - border-radius: @border-radius; + background: var(--control-bg); + color: var(--control-color); + border-radius: var(--border-radius); padding: 8px 15px; - border-top: 2px dotted @body-bg; - border-bottom: 2px dotted @body-bg; + border-top: 2px dotted var(--body-bg); + border-bottom: 2px dotted var(--body-bg); margin: 1em 0; } // Inline code code { font-family: source-code-pro, Monaco, Consolas, "Courier New", monospace; padding: 5px; - background: @code-bg; - color: @code-color; + background: var(--code-bg); + color: var(--code-color); line-height: 1.3; font-size: 90%; border-radius: 4px @@ -132,10 +132,10 @@ pre { border: 0; padding: 0; - background: @code-bg; - color: #666; + background: var(--code-bg); + color: var(--code-color); font-size: 90%; - border-radius: @border-radius; + border-radius: var(--border-radius); overflow-wrap: normal; code { @@ -173,7 +173,7 @@ font-size: 100%; } h6 { - color: @muted-more-color; + color: var(--muted-more-color); } img, iframe { max-width: 100%; @@ -186,12 +186,12 @@ } .Post--renderFailed { - background-color: @control-danger-bg; + background-color: var(--control-danger-bg); } .Post--hidden { .Post-header, .Post-header a, .PostUser h3, .PostUser h3 a { - color: @muted-more-color; + color: var(--muted-more-color); } &:not(.revealContent) { .Post-header { @@ -205,7 +205,7 @@ opacity: 0.5; } .Post-header .Button--more { - .Button--color(@muted-more-color, fade(@muted-more-color, 30%), 'muted-more'); + .Button--color-auto('muted-more'); } } .Post--loading { @@ -217,14 +217,14 @@ .PostMeta .Dropdown-menu { width: 420px; padding: 10px; - color: @muted-color; + color: var(--muted-color); @media @phone { padding: 15px !important; } } .PostMeta-number { - color: @text-color; + color: var(--text-color); font-weight: bold; } .PostMeta-time, .PostMeta-ip { @@ -249,7 +249,7 @@ } .EventPost { &, a { - color: @muted-color; + color: var(--muted-color); } a { font-weight: bold; @@ -266,7 +266,7 @@ margin: 0; } &, a { - color: @muted-color; + color: var(--muted-color); } a { display: inline-block; @@ -328,7 +328,7 @@ } .PostPreview { - color: @muted-color; + color: var(--muted-color); padding-left: 50px; line-height: 1.7em; @@ -342,7 +342,7 @@ .Avatar--size(32px); } .username { - color: @text-color; + color: var(--text-color); font-weight: bold; margin-right: 5px; } @@ -417,8 +417,8 @@ cursor: text; overflow: hidden; margin-top: 50px; - border: 2px dashed @control-bg; - color: @muted-color; + border: 2px dashed var(--control-bg); + color: var(--muted-color); border-radius: 10px; .Post-header { @@ -439,7 +439,7 @@ margin-top: -18px; } &:hover { - border-color: @control-bg; + border-color: var(--control-bg); } } .LoadingPost .Post-header { diff --git a/framework/core/less/forum/PostStream.less b/framework/core/less/forum/PostStream.less index 400ba77f8..59ffecdec 100644 --- a/framework/core/less/forum/PostStream.less +++ b/framework/core/less/forum/PostStream.less @@ -8,7 +8,7 @@ } .PostStream-item { &:not(:last-child) { - border-bottom: 1px solid @control-bg; + border-bottom: 1px solid var(--control-bg); @media @phone { margin: 0 -15px; @@ -28,11 +28,11 @@ .fakeText { display: inline-block; vertical-align: middle; - background: @control-bg; + background: var(--control-bg); height: 12px; width: 100%; margin-bottom: 20px; - border-radius: @border-radius; + border-radius: var(--border-radius); .Post-header & { height: 16px; @@ -47,7 +47,7 @@ .PostStream-timeGap { text-transform: uppercase; font-weight: bold; - color: @muted-color; + color: var(--muted-color); padding: 20px 20px 20px @avatar-column-width; font-size: 12px; diff --git a/framework/core/less/forum/Scrubber.less b/framework/core/less/forum/Scrubber.less index 50cd880f1..d322832a4 100644 --- a/framework/core/less/forum/Scrubber.less +++ b/framework/core/less/forum/Scrubber.less @@ -1,7 +1,7 @@ .Scrubber { & a { margin-left: -1px; - color: @muted-color; + color: var(--muted-color); & .fa { font-size: 14px; @@ -9,7 +9,7 @@ } &:hover, &:focus { text-decoration: none; - color: @link-color; + color: var(--link-color); } } } @@ -22,16 +22,16 @@ .user-select(none); } .Scrubber-before, .Scrubber-after { - border-left: 1px solid @control-bg; + border-left: 1px solid var(--control-bg); } .Scrubber-unread { position: absolute; - border-left: 1px solid lighten(@muted-color, 10%); + border-left: 1px solid var(--muted-color-light); width: 100%; - background-image: linear-gradient(to right, @control-bg, fade(@control-bg, 0) 10px, fade(@control-bg, 0)); + background-image: linear-gradient(to right, var(--control-bg), transparent 10px, transparent); display: flex; align-items: center; - color: @muted-color; + color: var(--muted-color); text-transform: uppercase; font-size: 11px; font-weight: bold; @@ -49,14 +49,14 @@ .Scrubber-bar { height: 100%; width: 5px; - background: @primary-color; + background: var(--primary-color); border-radius: 4px; float: left; margin-left: -2px; transition: background 0.2s; .disabled & { - background: @control-bg; + background: var(--control-bg); } } .Scrubber-info { @@ -71,7 +71,7 @@ } } .Scrubber-description { - color: @muted-color; + color: var(--muted-color); } @media @phone { diff --git a/framework/core/less/forum/Slidable.less b/framework/core/less/forum/Slidable.less index f0610d376..329a25d1b 100644 --- a/framework/core/less/forum/Slidable.less +++ b/framework/core/less/forum/Slidable.less @@ -11,7 +11,7 @@ } .Slidable-underneath { display: none; - background: @secondary-color !important; + background: var(--secondary-color) !important; position: absolute; right: 0; top: 0; @@ -44,10 +44,10 @@ .sliding& { position: relative; - background: @control-bg; + background: var(--control-bg); z-index: 2; border-radius: 2px; - box-shadow: 0 2px 6px @shadow-color; + box-shadow: 0 2px 6px var(--shadow-color); } } } diff --git a/framework/core/less/forum/UserCard.less b/framework/core/less/forum/UserCard.less index a19e9682d..6319cfa55 100644 --- a/framework/core/less/forum/UserCard.less +++ b/framework/core/less/forum/UserCard.less @@ -13,10 +13,10 @@ } .UserCard--popover { width: 500px; - box-shadow: 0 2px 6px @shadow-color; + box-shadow: 0 2px 6px var(--shadow-color); &, .darkenBackground { - border-radius: @border-radius; + border-radius: var(--border-radius); } .container { width: auto !important; @@ -64,7 +64,7 @@ .Avatar { .Avatar--size(96px); border: 4px solid #fff; - box-shadow: 0 2px 6px @shadow-color; + box-shadow: 0 2px 6px var(--shadow-color); @media @phone { .Avatar--size(64px); @@ -97,7 +97,7 @@ font-size: 14px; } &.online .fa-circle { - color: @online-user-circle-color; + color: var(--online-user-circle-color); } &.online .icon { font-size: 12px;