mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-06 08:27:42 +02:00
Code Issues Releases Wiki Activity

feat: Declare & Use CSS Custom Properties (#3146)

Browse Source
This commit is contained in:
Sami Mazouz
2021-11-04 22:34:18 +01:00
committed by GitHub
parent 26bf5d350b
commit 809df29d29
44 changed files with 502 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
less/admin/AdminHeader.less
View File

@@ -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 {

32
less/admin/AdminNav.less
View File

@@ -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;
}

14
less/admin/DashboardPage.less
View File

@@ -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;

16
less/admin/ExtensionPage.less
View File

@@ -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);
}
}
}

20
less/admin/ExtensionWidget.less
View File

@@ -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");

24
less/admin/PermissionsPage.less
View File

@@ -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);
}
}

10
less/admin/UsersListPage.less
View File

@@ -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);
}
}
}