mirror of
https://github.com/flarum/core.git
synced 2025-08-06 16:36:47 +02:00
feat: Declare & Use CSS Custom Properties (#3146)
This commit is contained in:
Sami Mazouz
GitHub
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -36,6 +36,6 @@
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: @text-color;
|
||||
color: var(--text-color);
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
p {
|
||||
font-size: 1.4em;
|
||||
color: @muted-more-color;
|
||||
color: var(--muted-more-color);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -15,6 +15,6 @@
|
||||
.Select-caret {
|
||||
margin-left: -30px;
|
||||
pointer-events: none;
|
||||
color: @control-color;
|
||||
color: var(--control-color);
|
||||
.fa-fw();
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.ValidationError {
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
color: @validation-error-color;
|
||||
color: var(--validation-error-color);
|
||||
}
|
||||
|
||||
@@ -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";
|
||||
|
||||
41
less/common/mixins/button-color.less
Normal file
41
less/common/mixins/button-color.less
Normal file
@@ -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');
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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%);
|
||||
}
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user