mirror of
https://github.com/flarum/framework.git
synced 2024-11-29 04:33:47 +08:00
feat: Declare & Use CSS Custom Properties (#3146)
This commit is contained in:
Sami Mazouz
GitHub
parent
8aebf482f3
commit
9a275e8e1b
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
framework/core/less/common/mixins/button-color.less
Normal file
41
framework/core/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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user