github-mirror/framework
github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-02-27 00:48:55 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: format

Browse Source
This commit is contained in:
David Wheatley 2021-12-24 14:04:55 +01:00
parent 9d4790c053
commit bc24195cc4
No known key found for this signature in database
GPG Key ID: DCC0FCE349280DFF
49 changed files with 623 additions and 495 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
less/admin.less
View File

@ -1,14 +1,14 @@
@import "common/common"; @import 'common/common';
@import "admin/AdminHeader"; @import 'admin/AdminHeader';
@import "admin/AdminNav"; @import 'admin/AdminNav';
@import "admin/DashboardPage"; @import 'admin/DashboardPage';
@import "admin/BasicsPage"; @import 'admin/BasicsPage';
@import "admin/PermissionsPage"; @import 'admin/PermissionsPage';
@import "admin/EditGroupModal"; @import 'admin/EditGroupModal';
@import "admin/ExtensionPage"; @import 'admin/ExtensionPage';
@import "admin/ExtensionWidget"; @import 'admin/ExtensionWidget';
@import "admin/AppearancePage"; @import 'admin/AppearancePage';
@import "admin/MailPage"; @import 'admin/MailPage';
@import "admin/NoJs"; @import 'admin/NoJs';
@import "admin/UsersListPage"; @import 'admin/UsersListPage';

12
less/admin/AdminNav.less
View File

@ -25,7 +25,7 @@
margin: 10px; margin: 10px;
.SearchBar { .SearchBar {
width: 100% width: 100%;
} }
} }
} }
@ -43,8 +43,8 @@
@media @tablet { @media @tablet {
.AdminNav { .AdminNav {
.item-search, .item-search,
li[class^="item-category"], li[class^='item-category'],
li[class^="item-extension"], li[class^='item-extension'],
.AdminLinkButton-description { .AdminLinkButton-description {
display: none !important; display: none !important;
} }
@ -68,12 +68,11 @@
} }
} }
@media @desktop-up { @media @desktop-up {
.App-nav { .App-nav {
position: absolute; position: absolute;
top: var(--header-height); top: var(--header-height);
height: ~"calc(100vh - var(--header-height))"; height: ~'calc(100vh - var(--header-height))';
width: var(--admin-pane-width); width: var(--admin-pane-width);
box-shadow: 0 6px 6px var(--shadow-color); box-shadow: 0 6px 6px var(--shadow-color);
background: var(--body-bg); background: var(--body-bg);
@ -168,7 +167,6 @@
padding: 0; padding: 0;
} }
} }
} }
.AdminLinkButton-description { .AdminLinkButton-description {
@ -195,7 +193,7 @@
.ExtensionNavButton { .ExtensionNavButton {
.Button-label { .Button-label {
display: inline-block; display: inline-block;
max-width: ~"calc(100% - 18px)"; max-width: ~'calc(100% - 18px)';
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: middle; vertical-align: middle;

6
less/admin/DashboardPage.less
View File

@ -20,17 +20,17 @@
.StatusWidget { .StatusWidget {
color: var(--muted-color); color: var(--muted-color);
>ul { > ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
>li { > li {
display: inline-block; display: inline-block;
margin-right: 30px; margin-right: 30px;
vertical-align: middle; vertical-align: middle;
&[class^="item-version-"] { &[class^='item-version-'] {
max-width: 100px; max-width: 100px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;

22
less/admin/ExtensionPage.less
View File

@ -59,7 +59,6 @@
color: var(--muted-color); color: var(--muted-color);
margin-left: 13px; margin-left: 13px;
> a { > a {
color: var(--muted-color); color: var(--muted-color);
} }
@ -85,13 +84,16 @@
position: relative; position: relative;
} }
.item-website, .item-source, .item-documentation { .item-website,
.item-source,
.item-documentation {
display: none; display: none;
} }
} }
} }
&-settings, &-permissions { &-settings,
&-permissions {
.ExtensionPage-subHeader { .ExtensionPage-subHeader {
margin: 5px 0px; margin: 5px 0px;
} }
@ -151,11 +153,11 @@
} }
.ReadmeModal { .ReadmeModal {
.Placeholder { .Placeholder {
margin-bottom: 40px; margin-bottom: 40px;
} }
img { img {
max-width: 100%; max-width: 100%;
} }
} }

4
less/admin/ExtensionWidget.less
View File

@ -58,7 +58,7 @@
} }
.ExtensionListItem { .ExtensionListItem {
transition: .15s ease-in-out; transition: 0.15s ease-in-out;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
@ -84,7 +84,7 @@
color: var(--control-color); color: var(--control-color);
border-radius: 6px; border-radius: 6px;
display: inline-flex; display: inline-flex;
font-size: calc(~"var(--size) / 2"); font-size: calc(~'var(--size) / 2');
text-align: center; text-align: center;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

4
less/admin/MailPage.less
View File

@ -8,7 +8,8 @@
} }
} }
button, .Alert { button,
.Alert {
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -20,7 +21,6 @@
} }
.MailPage-MailSettings-input { .MailPage-MailSettings-input {
label { label {
display: block; display: block;
margin-bottom: 7px; margin-bottom: 7px;

10
less/admin/PermissionsPage.less
View File

@ -32,7 +32,6 @@
} }
} }
.PermissionsPage-permissions { .PermissionsPage-permissions {
margin: 20px 0 30px; margin: 20px 0 30px;
overflow-x: auto; overflow-x: auto;
@ -42,7 +41,8 @@
.PermissionGrid { .PermissionGrid {
white-space: nowrap; white-space: nowrap;
td, th { td,
th {
padding: 5px; padding: 5px;
text-align: left; text-align: left;
} }
@ -134,14 +134,16 @@
.PermissionGrid-section { .PermissionGrid-section {
background: var(--body-bg); background: var(--body-bg);
td, th { td,
th {
padding-top: 10px; padding-top: 10px;
} }
} }
.PermissionGrid-child { .PermissionGrid-child {
background: var(--body-bg); background: var(--body-bg);
td, th { td,
th {
position: relative; position: relative;
} }
th { th {

6
less/admin/UsersListPage.less
View File

@ -16,7 +16,7 @@
// Table refreshing overlay // Table refreshing overlay
&--loadingPage { &--loadingPage {
&::after { &::after {
content: ""; content: '';
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
@ -53,7 +53,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
&[data-column-name="editUser"] { &[data-column-name='editUser'] {
padding: 0; padding: 0;
position: relative; position: relative;
} }
@ -100,7 +100,7 @@
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
&[data-email-shown="false"] { &[data-email-shown='false'] {
.UserList-emailAddress { .UserList-emailAddress {
user-select: none; user-select: none;
filter: blur(4px); filter: blur(4px);

6
less/common/Alert.less
View File

@ -23,7 +23,8 @@
.Alert--success { .Alert--success {
.Alert--color(var(--alert-success-color), var(--alert-success-bg)); .Alert--color(var(--alert-success-color), var(--alert-success-bg));
a, a:hover { a,
a:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
@ -41,7 +42,8 @@
display: inline-block; display: inline-block;
margin: 0 5px; margin: 0 5px;
> a, > .Button { > a,
> .Button {
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;

35
less/common/App.less
View File

@ -27,13 +27,16 @@
box-shadow: 0 2px 6px var(--shadow-color); box-shadow: 0 2px 6px var(--shadow-color);
} }
} }
.App-primaryControl, .App-titleControl, .App-backControl { .App-primaryControl,
.App-titleControl,
.App-backControl {
position: absolute !important; position: absolute !important;
z-index: calc(~"var(--zindex-header) + 1"); z-index: calc(~'var(--zindex-header) + 1');
top: 0 !important; top: 0 !important;
margin: 0; margin: 0;
.App.affix &, .Composer & { .App.affix &,
.Composer & {
position: fixed !important; position: fixed !important;
} }
@ -59,15 +62,18 @@
right: 0; right: 0;
&.Dropdown { &.Dropdown {
.Button, .Button-caret { .Button,
.Button-caret {
display: none !important; display: none !important;
} }
.Dropdown-toggle, .Button-icon { .Dropdown-toggle,
.Button-icon {
display: block !important; display: block !important;
} }
} }
} }
.App-primaryControl, .App-backControl { .App-primaryControl,
.App-backControl {
margin: 0 !important; margin: 0 !important;
> .Button { > .Button {
@ -90,7 +96,8 @@
text-align: center; text-align: center;
color: var(--header-color) !important; color: var(--header-color) !important;
&, > .Button { &,
> .Button {
font-size: 16px; font-size: 16px;
} }
> .Button { > .Button {
@ -137,13 +144,13 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
box-shadow: 0 2px 6px var(--shadow-color); box-shadow: 0 2px 6px var(--shadow-color);
transform: translateX(calc(~"-6px - var(--drawer-width)")); transform: translateX(calc(~'-6px - var(--drawer-width)'));
transition: transform 0.2s; transition: transform 0.2s;
z-index: var(--zindex-modal); z-index: var(--zindex-modal);
.drawerOpen & { .drawerOpen & {
-webkit-transform: none !important; -webkit-transform: none !important;
transform: none !important; transform: none !important;
} }
} }
.drawer-backdrop { .drawer-backdrop {
@ -200,12 +207,15 @@
> li { > li {
padding: 0 10px 0; padding: 0 10px 0;
} }
.FormControl, .ButtonGroup, .Button { .FormControl,
.ButtonGroup,
.Button {
width: 100%; width: 100%;
text-align: left; text-align: left;
} }
.Dropdown-menu { .Dropdown-menu {
.ButtonGroup, .Button { .ButtonGroup,
.Button {
width: auto; width: auto;
} }
} }
@ -254,7 +264,8 @@
margin-right: 25px; margin-right: 25px;
} }
.Header-controls { .Header-controls {
&, > li { &,
> li {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }

2
less/common/Avatar.less
View File

@ -11,7 +11,7 @@
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
border-radius: 100%; border-radius: 100%;
font-size: calc(~"var(--size) / 2"); font-size: calc(~'var(--size) / 2');
img { img {
display: inline-block; display: inline-block;

10
less/common/Badge.less
View File

@ -2,7 +2,7 @@
.Badge--size(22px); .Badge--size(22px);
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
border-radius: calc(~"var(--size) / 2"); border-radius: calc(~'var(--size) / 2');
background: var(--badge-bg); background: var(--badge-bg);
color: var(--badge-color); color: var(--badge-color);
display: inline-flex; display: inline-flex;
@ -15,8 +15,9 @@
display: none; display: none;
} }
&, .Badge-icon { &,
font-size: calc(~"0.56 * var(--size)"); .Badge-icon {
font-size: calc(~'0.56 * var(--size)');
} }
} }
@ -29,7 +30,8 @@
padding: 0; padding: 0;
list-style: none; list-style: none;
&, > li { &,
> li {
display: inline-block; display: inline-block;
} }
} }

8
less/common/Button.less
View File

@ -27,7 +27,8 @@
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
&:last-child:not(:first-child), &.Dropdown-toggle:not(:first-child) { &:last-child:not(:first-child),
&.Dropdown-toggle:not(:first-child) {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
@ -64,7 +65,7 @@
&:active, &:active,
&.active, &.active,
.open > &.Dropdown-toggle { .open > &.Dropdown-toggle {
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125)); .box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
} }
&.disabled, &.disabled,
@ -192,7 +193,8 @@
text-align: center; text-align: center;
padding: 8px 0; padding: 8px 0;
.Button-label, .Button-caret { .Button-label,
.Button-caret {
display: none; display: none;
} }
.Button-icon { .Button-icon {

12
less/common/Checkbox.less
View File

@ -4,7 +4,7 @@
margin: 0; margin: 0;
position: relative; position: relative;
input[type="checkbox"] { input[type='checkbox'] {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
@ -20,7 +20,7 @@
cursor: pointer; cursor: pointer;
.add-keyboard-focus-ring-nearby("+ .Checkbox-display"); .add-keyboard-focus-ring-nearby('+ .Checkbox-display');
} }
} }
.Checkbox--switch { .Checkbox--switch {
@ -29,7 +29,7 @@
padding-left: var(--left-pad); padding-left: var(--left-pad);
margin: 5px 0; margin: 5px 0;
input[type="checkbox"] { input[type='checkbox'] {
top: -4px; top: -4px;
width: 50px; width: 50px;
height: 28px; height: 28px;
@ -37,7 +37,7 @@
.Checkbox-display { .Checkbox-display {
float: left; float: left;
margin-left: calc(~"0px - var(--left-pad)"); margin-left: calc(~'0px - var(--left-pad)');
margin-top: -4px; margin-top: -4px;
} }
} }
@ -88,7 +88,7 @@
} }
} }
&:before { &:before {
content: " "; content: ' ';
background: var(--body-bg); background: var(--body-bg);
border-radius: 11px; border-radius: 11px;
box-shadow: 0 2px 4px var(--shadow-color); box-shadow: 0 2px 4px var(--shadow-color);
@ -101,7 +101,7 @@
color: var(--switch-on-color); color: var(--switch-on-color);
} }
.off & { .off & {
color:var(--switch-off-color); color: var(--switch-off-color);
} }
.disabled & { .disabled & {
color: var(--muted-more-color) !important; color: var(--muted-more-color) !important;

3
less/common/ColorInput.less
View File

@ -1,7 +1,8 @@
.ColorInput { .ColorInput {
position: relative; position: relative;
&-preview, &-icon { &-preview,
&-icon {
position: absolute; position: absolute;
right: 8px; right: 8px;
bottom: 8px; bottom: 8px;

29
less/common/Dropdown.less
View File

@ -24,7 +24,9 @@
} }
> li { > li {
> a, > button, > span { > a,
> button,
> span {
padding: 8px 15px; padding: 8px 15px;
display: block; display: block;
width: 100%; width: 100%;
@ -59,13 +61,15 @@
background: none !important; background: none !important;
} }
} }
> a, > button { > a,
> button {
&:hover { &:hover {
background: var(--control-bg); background: var(--control-bg);
} }
} }
&.active { &.active {
> a, > button { > a,
> button {
background: var(--control-bg); background: var(--control-bg);
} }
} }
@ -100,17 +104,15 @@
height: 1px; height: 1px;
} }
.dropdown-backdrop { .dropdown-backdrop {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
top: 0; top: 0;
z-index: calc(~"var(--zindex-dropdown) - 10"); z-index: calc(~'var(--zindex-dropdown) - 10');
} }
.Dropdown--split { .Dropdown--split {
.Dropdown-toggle .Button-icon { .Dropdown-toggle .Button-icon {
display: none; display: none;
@ -131,7 +133,8 @@
@media @tablet-up { @media @tablet-up {
.Dropdown-menu li:first-child { .Dropdown-menu li:first-child {
&, + li.Dropdown-separator { &,
+ li.Dropdown-separator {
display: none; display: none;
} }
} }
@ -156,7 +159,6 @@
} }
} }
@media @phone { @media @phone {
.Dropdown.open { .Dropdown.open {
z-index: var(--zindex-modal); z-index: var(--zindex-modal);
@ -182,7 +184,8 @@
transition: transform 0.3s, visibility 0s 0.3s; transition: transform 0.3s, visibility 0s 0.3s;
> li { > li {
> a, > button { > a,
> button {
background: var(--body-bg); background: var(--body-bg);
font-size: 16px; font-size: 16px;
padding: 15px 20px; padding: 15px 20px;
@ -200,8 +203,10 @@
} }
} }
> .active { > .active {
> a, > button { > a,
&, &:hover { > button {
&,
&:hover {
background: var(--primary-color) !important; background: var(--primary-color) !important;
color: #fff !important; color: #fff !important;
} }
@ -209,7 +214,7 @@
} }
.open& { .open& {
-webkit-transform: none; -webkit-transform: none;
transform: none; transform: none;
visibility: visible; visibility: visible;
transition-delay: 0s; transition-delay: 0s;
} }

6
less/common/Form.less
View File

@ -9,9 +9,9 @@
.Form--centered { .Form--centered {
text-align: center; text-align: center;
.FormControl[type=text], .FormControl[type='text'],
.FormControl[type=email], .FormControl[type='email'],
.FormControl[type=password], .FormControl[type='password'],
.Button { .Button {
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;

2
less/common/FormControl.less
View File

@ -1,5 +1,5 @@
.FormControl { .FormControl {
--transition: border-color .15s, background .15s; --transition: border-color 0.15s, background 0.15s;
display: block; display: block;
width: 100%; width: 100%;
height: 36px; height: 36px;

7
less/common/Modal.less
View File

@ -144,10 +144,10 @@
&.in { &.in {
-webkit-transform: none !important; -webkit-transform: none !important;
transform: none !important; transform: none !important;
} }
&:before { &:before {
content: " "; content: ' ';
.header-background(); .header-background();
position: absolute; position: absolute;
} }
@ -156,7 +156,7 @@
max-width: 100%; max-width: 100%;
margin: 0; margin: 0;
-webkit-transform: none !important; -webkit-transform: none !important;
transform: none !important; transform: none !important;
} }
.Modal-content { .Modal-content {
border-radius: 0; border-radius: 0;
@ -183,7 +183,6 @@
z-index: 1; z-index: 1;
} }
.Modal-content { .Modal-content {
border: 0; border: 0;
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: 0 7px 15px var(--shadow-color); box-shadow: 0 7px 15px var(--shadow-color);

3
less/common/Navigation.less
View File

@ -28,7 +28,8 @@
.Navigation-pin { .Navigation-pin {
display: block; display: block;
} }
.hasPane.panePinned, .hasPane.paneShowing { .hasPane.panePinned,
.hasPane.paneShowing {
.Navigation-back { .Navigation-back {
border-radius: var(--border-radius) 0 0 var(--border-radius) !important; border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
} }

4
less/common/Search.less
View File

@ -14,8 +14,8 @@
} }
// ...so we display the ring around the icon inside the button, with an offset // ...so we display the ring around the icon inside the button, with an offset
.add-keyboard-focus-ring-nearby("> *"); .add-keyboard-focus-ring-nearby('> *');
.add-keyboard-focus-ring-nearby-offset("> *", 4px); .add-keyboard-focus-ring-nearby-offset('> *', 4px);
} }
} }
@media @tablet-up { @media @tablet-up {

14
less/common/Table.less
View File

@ -8,16 +8,21 @@
text-align: start; text-align: start;
} }
td, th { td,
th {
border-bottom: 1px solid var(--body-bg); border-bottom: 1px solid var(--body-bg);
color: var(--control-color); color: var(--control-color);
} }
td, th, .Checkbox, &-controls-item { td,
th,
.Checkbox,
&-controls-item {
padding: 10px 15px; padding: 10px 15px;
} }
& &-checkbox, & &-controls { & &-checkbox,
& &-controls {
padding: 0; padding: 0;
} }
@ -55,7 +60,8 @@
cursor: pointer; cursor: pointer;
} }
&.highlighted .Checkbox, .Checkbox:hover { &.highlighted .Checkbox,
.Checkbox:hover {
&:not(.disabled) { &:not(.disabled) {
background: var(--control-bg-shaded); background: var(--control-bg-shaded);
} }

4
less/common/TextEditor.less
View File

@ -7,7 +7,9 @@
font-size: 14px; font-size: 14px;
line-height: 1.7; line-height: 1.7;
&, &:focus, &[disabled] { &,
&:focus,
&[disabled] {
background: none; background: none;
border: 0; border: 0;
} }

32
less/common/Tooltip.less
View File

@ -14,11 +14,25 @@
opacity: 0; opacity: 0;
transition: opacity 0.15s linear; transition: opacity 0.15s linear;
&.in { opacity: 1; } &.in {
&.top { margin-top: -3px; padding: var(--tooltip-arrow-width) 0; } opacity: 1;
&.right { margin-left: 3px; padding: 0 var(--tooltip-arrow-width); } }
&.bottom { margin-top: 3px; padding: var(--tooltip-arrow-width) 0; } &.top {
&.left { margin-left: -3px; padding: 0 var(--tooltip-arrow-width); } 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 // Wrapper for the tooltip content
@ -46,28 +60,28 @@
&.top .tooltip-arrow { &.top .tooltip-arrow {
bottom: 0; bottom: 0;
left: 50%; left: 50%;
margin-left: calc(~"0px - var(--tooltip-arrow-width)"); margin-left: calc(~'0px - var(--tooltip-arrow-width)');
border-width: var(--tooltip-arrow-width) var(--tooltip-arrow-width) 0; border-width: var(--tooltip-arrow-width) var(--tooltip-arrow-width) 0;
border-top-color: var(--tooltip-bg); border-top-color: var(--tooltip-bg);
} }
&.right .tooltip-arrow { &.right .tooltip-arrow {
top: 50%; top: 50%;
left: 0; left: 0;
margin-top: calc(~"0px - var(--tooltip-arrow-width)"); margin-top: calc(~'0px - var(--tooltip-arrow-width)');
border-width: var(--tooltip-arrow-width) var(--tooltip-arrow-width) var(--tooltip-arrow-width) 0; border-width: var(--tooltip-arrow-width) var(--tooltip-arrow-width) var(--tooltip-arrow-width) 0;
border-right-color: var(--tooltip-bg); border-right-color: var(--tooltip-bg);
} }
&.left .tooltip-arrow { &.left .tooltip-arrow {
top: 50%; top: 50%;
right: 0; right: 0;
margin-top: calc(~"0px - var(--tooltip-arrow-width)"); margin-top: calc(~'0px - var(--tooltip-arrow-width)');
border-width: var(--tooltip-arrow-width) 0 var(--tooltip-arrow-width) 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); border-left-color: var(--tooltip-bg);
} }
&.bottom .tooltip-arrow { &.bottom .tooltip-arrow {
top: 0; top: 0;
left: 50%; left: 50%;
margin-left: calc(~"0px - var(--tooltip-arrow-width)"); margin-left: calc(~'0px - var(--tooltip-arrow-width)');
border-width: 0 var(--tooltip-arrow-width) var(--tooltip-arrow-width); border-width: 0 var(--tooltip-arrow-width) var(--tooltip-arrow-width);
border-bottom-color: var(--tooltip-bg); border-bottom-color: var(--tooltip-bg);
} }

64
less/common/common.less
View File

@ -1,34 +1,34 @@
@import "fontawesome"; @import 'fontawesome';
@import "brands"; @import 'brands';
@import "regular"; @import 'regular';
@import "solid"; @import 'solid';
@fa-font-path: "./fonts"; @fa-font-path: './fonts';
@import "normalize"; @import 'normalize';
@import "print"; @import 'print';
@import "root"; @import 'root';
@import "scaffolding"; @import 'scaffolding';
@import "sideNav"; @import 'sideNav';
@import "App"; @import 'App';
@import "Alert"; @import 'Alert';
@import "AlertManager"; @import 'AlertManager';
@import "Avatar"; @import 'Avatar';
@import "Badge"; @import 'Badge';
@import "Button"; @import 'Button';
@import "Checkbox"; @import 'Checkbox';
@import "ColorInput"; @import 'ColorInput';
@import "Dropdown"; @import 'Dropdown';
@import "EditUserModal"; @import 'EditUserModal';
@import "Form"; @import 'Form';
@import "FormControl"; @import 'FormControl';
@import "LoadingIndicator"; @import 'LoadingIndicator';
@import "Modal"; @import 'Modal';
@import "Navigation"; @import 'Navigation';
@import "Placeholder"; @import 'Placeholder';
@import "Search"; @import 'Search';
@import "Select"; @import 'Select';
@import "Table"; @import 'Table';
@import "TextEditor"; @import 'TextEditor';
@import "Tooltip"; @import 'Tooltip';
@import "ValidationError"; @import 'ValidationError';

14
less/common/mixins.less
View File

@ -1,7 +1,7 @@
@import "mixins/accessibility.less"; @import 'mixins/accessibility.less';
@import "mixins/border-radius.less"; @import 'mixins/border-radius.less';
@import "mixins/button-color.less"; @import 'mixins/button-color.less';
@import "mixins/clearfix.less"; @import 'mixins/clearfix.less';
@import "mixins/light-contents.less"; @import 'mixins/light-contents.less';
@import "mixins/header-background.less"; @import 'mixins/header-background.less';
@import "mixins/vendor-prefixes.less"; @import 'mixins/vendor-prefixes.less';

8
less/common/mixins/accessibility.less
View File

@ -50,7 +50,7 @@
*? button :focus-within { <styles> } *? button :focus-within { <styles> }
*/ */
.add-keyboard-focus-ring(@customFocusSelector) { .add-keyboard-focus-ring(@customFocusSelector) {
@realFocusSelector: ~"@{customFocusSelector}"; @realFocusSelector: ~'@{customFocusSelector}';
&@{realFocusSelector} { &@{realFocusSelector} {
#private.__focus-ring-styles(); #private.__focus-ring-styles();
@ -69,7 +69,7 @@
*? button:focus-within + .myOtherElement { <styles> } *? button:focus-within + .myOtherElement { <styles> }
*/ */
.add-keyboard-focus-ring-nearby(@nearbySelector) { .add-keyboard-focus-ring-nearby(@nearbySelector) {
@realNearbySelector: ~"@{nearbySelector}"; @realNearbySelector: ~'@{nearbySelector}';
// We need to declare these separately, otherwise // We need to declare these separately, otherwise
// browsers will ignore `:focus-visible` as they // browsers will ignore `:focus-visible` as they
@ -124,7 +124,7 @@
outline-offset: @offset; outline-offset: @offset;
} }
@realFocusSelector: ~"@{customFocusSelector}"; @realFocusSelector: ~'@{customFocusSelector}';
&@{realFocusSelector} { &@{realFocusSelector} {
.offset(); .offset();
@ -143,7 +143,7 @@
*? button:focus-within + .myOtherElement { <styles> } *? button:focus-within + .myOtherElement { <styles> }
*/ */
.add-keyboard-focus-ring-nearby-offset(@nearbySelector, @offset) { .add-keyboard-focus-ring-nearby-offset(@nearbySelector, @offset) {
@realNearbySelector: ~"@{nearbySelector}"; @realNearbySelector: ~'@{nearbySelector}';
.offset() { .offset() {
outline-offset: @offset; outline-offset: @offset;

8
less/common/mixins/border-radius.less
View File

@ -2,17 +2,17 @@
.border-top-radius(@radius) { .border-top-radius(@radius) {
border-top-right-radius: @radius; border-top-right-radius: @radius;
border-top-left-radius: @radius; border-top-left-radius: @radius;
} }
.border-right-radius(@radius) { .border-right-radius(@radius) {
border-bottom-right-radius: @radius; border-bottom-right-radius: @radius;
border-top-right-radius: @radius; border-top-right-radius: @radius;
} }
.border-bottom-radius(@radius) { .border-bottom-radius(@radius) {
border-bottom-right-radius: @radius; border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius; border-bottom-left-radius: @radius;
} }
.border-left-radius(@radius) { .border-left-radius(@radius) {
border-bottom-left-radius: @radius; border-bottom-left-radius: @radius;
border-top-left-radius: @radius; border-top-left-radius: @radius;
} }

12
less/common/mixins/button-color.less
View File

@ -14,7 +14,7 @@
* } * }
*/ */
.Button--color-vars(@color; @background; @name: 'button') { .Button--color-vars(@color; @background; @name: 'button') {
@componentName: ~"@{name}"; @componentName: ~'@{name}';
--@{componentName}-color: @color; --@{componentName}-color: @color;
--@{componentName}-bg: @background; --@{componentName}-bg: @background;
@ -24,11 +24,11 @@
} }
.Button--color-auto(@name: 'button') { .Button--color-auto(@name: 'button') {
--button-color: var(~"--@{name}-color"); --button-color: var(~'--@{name}-color');
--button-bg: var(~"--@{name}-bg"); --button-bg: var(~'--@{name}-bg');
--button-bg-hover: var(~"--@{name}-bg-hover"); --button-bg-hover: var(~'--@{name}-bg-hover');
--button-bg-active: var(~"--@{name}-bg-active"); --button-bg-active: var(~'--@{name}-bg-active');
--button-bg-disabled: var(~"--@{name}-bg-disabled"); --button-bg-disabled: var(~'--@{name}-bg-disabled');
} }
/** /**

2
less/common/mixins/clearfix.less
View File

@ -13,7 +13,7 @@
.clearfix() { .clearfix() {
&:before, &:before,
&:after { &:after {
content: " "; // 1 content: ' '; // 1
display: table; // 2 display: table; // 2
} }
&:after { &:after {

31
less/common/mixins/light-contents.less
View File

@ -1,26 +1,29 @@
// This is a mixin which styles components (buttons, inputs, etc.) for use on // This is a mixin which styles components (buttons, inputs, etc.) for use on
// dark backgrounds. // dark backgrounds.
.light-contents(@color: #fff; @control-bg: fade(#000, 10%); @control-color: #fff; @name: 'light-content') { .light-contents(@color: #fff; @control-bg: fade(#000, 10%); @control-color: #fff; @name: 'light-content') {
&, a { &,
color: var(~"--@{name}-color", @color); a {
color: var(~'--@{name}-color', @color);
} }
.Button--link, .Search-input { .Button--link,
color: var(~"--@{name}-control-color", @control-color); .Search-input {
color: var(~'--@{name}-control-color', @control-color);
} }
.FormControl { .FormControl {
background: var(~"--@{name}-control-bg", @control-bg); background: var(~'--@{name}-control-bg', @control-bg);
border: 0; border: 0;
color: var(~"--@{name}-control-color", @control-color); color: var(~'--@{name}-control-color', @control-color);
.placeholder(var(~"--@{name}-control-color", @control-color)); .placeholder(var(~'--@{name}-control-color', @control-color));
&:focus { &:focus {
color: @color; color: @color;
background: var(~"--@{name}-control-bg-shaded", fadein(darken(@control-bg, 5%), 10%)); background: var(~'--@{name}-control-bg-shaded', fadein(darken(@control-bg, 5%), 10%));
} }
} }
.Button, .Button:hover { .Button,
color: var(~"--@{name}-control-color", @control-color); .Button:hover {
background: var(~"--@{name}-control-bg", @control-bg); color: var(~'--@{name}-control-color', @control-color);
background: var(~'--@{name}-control-bg', @control-bg);
} }
.Button--flat { .Button--flat {
background: transparent; background: transparent;
@ -30,13 +33,13 @@
.Button:focus, .Button:focus,
.Button.focus, .Button.focus,
.open > .Dropdown-toggle.Button { .open > .Dropdown-toggle.Button {
background: var(~"--@{name}-control-bg-fadedin", fadein(@control-bg, 5%)); background: var(~'--@{name}-control-bg-fadedin', fadein(@control-bg, 5%));
color: var(~"--@{name}-control-color", @control-color); color: var(~'--@{name}-control-color', @control-color);
} }
} }
.light-contents-vars(@color: #fff; @control-bg: fade(#000, 10%); @control-color: #fff; @name: 'light-content') { .light-contents-vars(@color: #fff; @control-bg: fade(#000, 10%); @control-color: #fff; @name: 'light-content') {
@componentName: ~"@{name}"; @componentName: ~'@{name}';
--@{componentName}-color: @color; --@{componentName}-color: @color;
--@{componentName}-control-color: @control-color; --@{componentName}-control-color: @control-color;

26
less/common/normalize.less vendored
View File

@ -169,9 +169,9 @@ select {
*/ */
button, button,
[type="button"], [type='button'],
[type="reset"], [type='reset'],
[type="submit"] { [type='submit'] {
-webkit-appearance: button; -webkit-appearance: button;
} }
@ -180,9 +180,9 @@ button,
*/ */
button::-moz-focus-inner, button::-moz-focus-inner,
[type="button"]::-moz-focus-inner, [type='button']::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type='reset']::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { [type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
@ -192,9 +192,9 @@ button::-moz-focus-inner,
*/ */
button:-moz-focusring, button:-moz-focusring,
[type="button"]:-moz-focusring, [type='button']:-moz-focusring,
[type="reset"]:-moz-focusring, [type='reset']:-moz-focusring,
[type="submit"]:-moz-focusring { [type='submit']:-moz-focusring {
outline: 1px dotted ButtonText; outline: 1px dotted ButtonText;
} }
@ -232,8 +232,8 @@ progress {
* Correct the cursor style of increment and decrement buttons in Chrome. * Correct the cursor style of increment and decrement buttons in Chrome.
*/ */
[type="number"]::-webkit-inner-spin-button, [type='number']::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { [type='number']::-webkit-outer-spin-button {
height: auto; height: auto;
} }
@ -242,7 +242,7 @@ progress {
* 2. Correct the outline style in Safari. * 2. Correct the outline style in Safari.
*/ */
[type="search"] { [type='search'] {
-webkit-appearance: textfield; /* 1 */ -webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */ outline-offset: -2px; /* 2 */
} }
@ -251,7 +251,7 @@ progress {
* Remove the inner padding in Chrome and Safari on macOS. * Remove the inner padding in Chrome and Safari on macOS.
*/ */
[type="search"]::-webkit-search-decoration { [type='search']::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }

98
less/common/print.less
View File

@ -6,63 +6,63 @@
// ========================================================================== // ==========================================================================
@media print { @media print {
*, *,
*:before, *:before,
*:after { *:after {
background: transparent !important; background: transparent !important;
color: #000 !important; // Black prints faster: h5bp.com/s color: #000 !important; // Black prints faster: h5bp.com/s
box-shadow: none !important; box-shadow: none !important;
text-shadow: none !important; text-shadow: none !important;
} }
a, a,
a:visited { a:visited {
text-decoration: underline; text-decoration: underline;
} }
a[href]:after { a[href]:after {
content: " (" attr(href) ")"; content: ' (' attr(href) ')';
} }
abbr[title]:after { abbr[title]:after {
content: " (" attr(title) ")"; content: ' (' attr(title) ')';
} }
// Don't show links that are fragment identifiers, // Don't show links that are fragment identifiers,
// or use the `javascript:` pseudo protocol // or use the `javascript:` pseudo protocol
a[href^="#"]:after, a[href^='#']:after,
a[href^="javascript:"]:after { a[href^='javascript:']:after {
content: ""; content: '';
} }
pre, pre,
blockquote { blockquote {
border: 1px solid #999; border: 1px solid #999;
page-break-inside: avoid; page-break-inside: avoid;
} }
thead { thead {
display: table-header-group; // h5bp.com/t display: table-header-group; // h5bp.com/t
} }
tr, tr,
img { img {
page-break-inside: avoid; page-break-inside: avoid;
} }
img { img {
max-width: 100% !important; max-width: 100% !important;
} }
p, p,
h2, h2,
h3 { h3 {
orphans: 3; orphans: 3;
widows: 3; widows: 3;
} }
h2, h2,
h3 { h3 {
page-break-after: avoid; page-break-after: avoid;
} }
} }

155
less/common/root.less
View File

@ -1,76 +1,75 @@
:root { :root {
// --------------------------------- // ---------------------------------
// COLORS // COLORS
--primary-color: @primary-color; --primary-color: @primary-color;
--secondary-color: @secondary-color; --secondary-color: @secondary-color;
--body-bg: @body-bg; --body-bg: @body-bg;
--body-bg-shaded: darken(@body-bg, 3%); --body-bg-shaded: darken(@body-bg, 3%);
--body-bg-light: lighten(@body-bg, 5%); --body-bg-light: lighten(@body-bg, 5%);
--body-bg-faded: fade(@body-bg, 93%); --body-bg-faded: fade(@body-bg, 93%);
--text-color: @text-color; --text-color: @text-color;
--link-color: @link-color; --link-color: @link-color;
--heading-color: @heading-color; --heading-color: @heading-color;
--muted-color: @muted-color; --muted-color: @muted-color;
--muted-color-light: lighten(@muted-color, 10%); --muted-color-light: lighten(@muted-color, 10%);
--muted-color-dark: darken(@muted-color, 50%); --muted-color-dark: darken(@muted-color, 50%);
--muted-more-color: @muted-more-color; --muted-more-color: @muted-more-color;
--shadow-color: @shadow-color; --shadow-color: @shadow-color;
--control-bg: @control-bg; --control-bg: @control-bg;
--control-bg-light: lighten(@control-bg, 3%); --control-bg-light: lighten(@control-bg, 3%);
--control-bg-shaded: darken(@control-bg, 4%); --control-bg-shaded: darken(@control-bg, 4%);
--control-color: @control-color; --control-color: @control-color;
--control-danger-bg: @control-danger-bg; --control-danger-bg: @control-danger-bg;
--control-danger-color: @control-danger-color; --control-danger-color: @control-danger-color;
--error-color: @error-color; --error-color: @error-color;
// --------------------------------- // ---------------------------------
// COMPONENTS // COMPONENTS
--header-bg: @header-bg; --header-bg: @header-bg;
--header-color: @header-color; --header-color: @header-color;
--header-control-bg: @header-control-bg; --header-control-bg: @header-control-bg;
--header-control-color: @header-control-color; --header-control-color: @header-control-color;
--overlay-bg: @overlay-bg; --overlay-bg: @overlay-bg;
--code-bg: @code-bg; --code-bg: @code-bg;
--code-color: @code-color; --code-color: @code-color;
--alert-bg: @alert-bg; --alert-bg: @alert-bg;
--alert-color: @alert-color; --alert-color: @alert-color;
--alert-error-bg: @alert-error-bg; --alert-error-bg: @alert-error-bg;
--alert-error-color: @alert-error-color; --alert-error-color: @alert-error-color;
--alert-success-bg: @alert-success-bg; --alert-success-bg: @alert-success-bg;
--alert-success-color: @alert-success-color; --alert-success-color: @alert-success-color;
--switch-on-color: #58a400; --switch-on-color: #58a400;
--switch-off-color: #d0021b; --switch-off-color: #d0021b;
--enabled-color: #2ECC40; --enabled-color: #2ecc40;
--disabled-color: #FF4136; --disabled-color: #ff4136;
--validation-error-color: @validation-error-color; --validation-error-color: @validation-error-color;
--avatar-bg: var(--control-bg); --avatar-bg: var(--control-bg);
--badge-bg: var(--muted-color); --badge-bg: var(--muted-color);
--badge-color: #fff; --badge-color: #fff;
--badge-hidden-bg: #888; --badge-hidden-bg: #888;
--usercard-bg: var(--control-bg); --usercard-bg: var(--control-bg);
--hero-bg: @hero-bg; --hero-bg: @hero-bg;
--hero-color: @hero-color; --hero-color: @hero-color;
--tooltip-bg: @tooltip-bg; --tooltip-bg: @tooltip-bg;
--tooltip-color: @tooltip-color; --tooltip-color: @tooltip-color;
--online-user-circle-color: @online-user-circle-color; --online-user-circle-color: @online-user-circle-color;
--discussion-title-color: mix(@heading-color, @body-bg, 55%); --discussion-title-color: mix(@heading-color, @body-bg, 55%);
--discussion-list-item-bg-hover: mix(@control-bg, @body-bg, 50%); --discussion-list-item-bg-hover: mix(@control-bg, @body-bg, 50%);
.Button--color-vars(@control-color, @control-bg, 'button'); .Button--color-vars(@control-color, @control-bg, 'button');
@ -85,35 +84,43 @@
// --------------------------------- // ---------------------------------
// LAYOUT // LAYOUT
--border-radius: @border-radius; --border-radius: @border-radius;
--drawer-width: @drawer-width; --drawer-width: @drawer-width;
--pane-width: @pane-width; --pane-width: @pane-width;
--header-height: @header-height; --header-height: @header-height;
--header-height-phone: @header-height-phone; --header-height-phone: @header-height-phone;
--zindex-header: @zindex-header; --zindex-header: @zindex-header;
--zindex-pane: @zindex-pane; --zindex-pane: @zindex-pane;
--zindex-composer: @zindex-composer; --zindex-composer: @zindex-composer;
--zindex-dropdown: @zindex-dropdown; --zindex-dropdown: @zindex-dropdown;
--zindex-modal-background: @zindex-modal-background; --zindex-modal-background: @zindex-modal-background;
--zindex-modal: @zindex-modal; --zindex-modal: @zindex-modal;
--zindex-alerts: @zindex-alerts; --zindex-alerts: @zindex-alerts;
--zindex-tooltip: @zindex-tooltip; --zindex-tooltip: @zindex-tooltip;
// Store the current responsive screen mode in a CSS variable, to make it // Store the current responsive screen mode in a CSS variable, to make it
// available to the JS code. // available to the JS code.
--flarum-screen: none; --flarum-screen: none;
--screen-phone-max: @screen-phone-max; --screen-phone-max: @screen-phone-max;
--screen-tablet: @screen-tablet; --screen-tablet: @screen-tablet;
--screen-tablet-max: @screen-tablet-max; --screen-tablet-max: @screen-tablet-max;
--screen-desktop: @screen-desktop; --screen-desktop: @screen-desktop;
--screen-desktop-max: @screen-desktop-max; --screen-desktop-max: @screen-desktop-max;
--screen-desktop-hd: @screen-desktop-hd; --screen-desktop-hd: @screen-desktop-hd;
@media @phone { --flarum-screen: phone; } @media @phone {
@media @tablet { --flarum-screen: tablet; } --flarum-screen: phone;
@media @desktop { --flarum-screen: desktop; } }
@media @desktop-hd { --flarum-screen: desktop-hd; } @media @tablet {
--flarum-screen: tablet;
}
@media @desktop {
--flarum-screen: desktop;
}
@media @desktop-hd {
--flarum-screen: desktop-hd;
}
} }

19
less/common/scaffolding.less
View File

@ -9,13 +9,18 @@
body { body {
background: var(--body-bg); background: var(--body-bg);
color: var(--text-color); color: var(--text-color);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif;
font-size: 13px; font-size: 13px;
line-height: 1.5; line-height: 1.5;
overflow-y: scroll; overflow-y: scroll;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.3; line-height: 1.3;
} }
@ -73,7 +78,7 @@ p {
} }
mark { mark {
background: #FFE300; background: #ffe300;
padding: 1px; padding: 1px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
@ -94,7 +99,7 @@ legend {
margin-bottom: 10px; margin-bottom: 10px;
color: var(--text-color); color: var(--text-color);
} }
input[type="search"] { input[type='search'] {
-webkit-appearance: none; -webkit-appearance: none;
} }
@ -104,8 +109,8 @@ input[type="search"] {
margin-bottom: 5px; margin-bottom: 5px;
cursor: pointer; cursor: pointer;
input[type=checkbox], input[type='checkbox'],
input[type=radio] { input[type='radio'] {
margin-left: -20px; margin-left: -20px;
margin-top: 2px; margin-top: 2px;
float: left; float: left;
@ -114,7 +119,7 @@ input[type="search"] {
.fade { .fade {
opacity: 0; opacity: 0;
transition: opacity .15s linear; transition: opacity 0.15s linear;
&.in { &.in {
opacity: 1; opacity: 1;
} }

8
less/common/sideNav.less
View File

@ -60,7 +60,8 @@
flex-shrink: 0; flex-shrink: 0;
margin-right: 50px; margin-right: 50px;
&, > ul { &,
> ul {
width: 190px; width: 190px;
} }
> ul { > ul {
@ -83,7 +84,7 @@
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
&:after { &:after {
content: " "; content: ' ';
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
@ -91,7 +92,8 @@
border-bottom: 1px solid var(--control-bg); border-bottom: 1px solid var(--control-bg);
} }
> ul > li, .Dropdown-menu > li { > ul > li,
.Dropdown-menu > li {
display: inline-block; display: inline-block;
margin: 0 20px 0 0; margin: 0 20px 0 0;
vertical-align: top; vertical-align: top;

176
less/common/variables.less
View File

@ -1,120 +1,120 @@
// --------------------------------- // ---------------------------------
// CONFIG // CONFIG
@config-primary-color: #536F90; @config-primary-color: #536f90;
@config-secondary-color: #536F90; @config-secondary-color: #536f90;
@config-dark-mode: false; @config-dark-mode: false;
@config-colored-header: false; @config-colored-header: false;
// --------------------------------- // ---------------------------------
// COLORS // COLORS
@primary-hue: hue(@primary-color); @primary-hue: hue(@primary-color);
@primary-sat: saturation(@primary-color); @primary-sat: saturation(@primary-color);
@secondary-hue: hue(@secondary-color); @secondary-hue: hue(@secondary-color);
@secondary-sat: saturation(@secondary-color); @secondary-sat: saturation(@secondary-color);
// Derive the primary/secondary colors from the config variables. In dark mode, // Derive the primary/secondary colors from the config variables. In dark mode,
// we make the user-set colors a bit darker, otherwise they will stand out too // we make the user-set colors a bit darker, otherwise they will stand out too
// much. // much.
.define-colors(@config-dark-mode); .define-colors(@config-dark-mode);
.define-colors(false) { .define-colors(false) {
@primary-color: @config-primary-color; @primary-color: @config-primary-color;
@secondary-color: @config-secondary-color; @secondary-color: @config-secondary-color;
@body-bg: #fff; @body-bg: #fff;
@text-color: #111; @text-color: #111;
@link-color: saturate(@primary-color, 10%); @link-color: saturate(@primary-color, 10%);
@heading-color: @text-color; @heading-color: @text-color;
@muted-color: hsl(@secondary-hue, min(20%, @secondary-sat), 50%); @muted-color: hsl(@secondary-hue, min(20%, @secondary-sat), 50%);
@muted-more-color: #aaa; @muted-more-color: #aaa;
@shadow-color: rgba(0, 0, 0, 0.35); @shadow-color: rgba(0, 0, 0, 0.35);
@control-bg: hsl(@secondary-hue, min(50%, @secondary-sat), 93%); @control-bg: hsl(@secondary-hue, min(50%, @secondary-sat), 93%);
@control-color: @muted-color; @control-color: @muted-color;
@control-danger-bg: #fdd; @control-danger-bg: #fdd;
@control-danger-color: #d66; @control-danger-color: #d66;
@overlay-bg: fade(@secondary-color, 90%); @overlay-bg: fade(@secondary-color, 90%);
@code-bg: darken(@body-bg, 3%); @code-bg: darken(@body-bg, 3%);
@code-color: lighten(@text-color, 30%); @code-color: lighten(@text-color, 30%);
} }
.define-colors(true) { .define-colors(true) {
@primary-color: @config-primary-color; @primary-color: @config-primary-color;
@secondary-color: @config-secondary-color; @secondary-color: @config-secondary-color;
@body-bg: hsl(@secondary-hue, min(20%, @secondary-sat), 10%); @body-bg: hsl(@secondary-hue, min(20%, @secondary-sat), 10%);
@text-color: #ddd; @text-color: #ddd;
@link-color: saturate(@primary-color, 10%); @link-color: saturate(@primary-color, 10%);
@heading-color: @text-color; @heading-color: @text-color;
@muted-color: hsl(@secondary-hue, min(15%, @secondary-sat), 50%); @muted-color: hsl(@secondary-hue, min(15%, @secondary-sat), 50%);
@muted-more-color: hsl(@secondary-hue, min(10%, @secondary-sat), 40%); @muted-more-color: hsl(@secondary-hue, min(10%, @secondary-sat), 40%);
@shadow-color: rgba(0, 0, 0, 0.5); @shadow-color: rgba(0, 0, 0, 0.5);
@control-bg: hsl(@secondary-hue, min(20%, @secondary-sat), 13%); @control-bg: hsl(@secondary-hue, min(20%, @secondary-sat), 13%);
@control-color: @muted-color; @control-color: @muted-color;
@control-danger-bg: #411; @control-danger-bg: #411;
@control-danger-color: #a88; @control-danger-color: #a88;
@overlay-bg: fade(darken(@body-bg, 5%), 90%); @overlay-bg: fade(darken(@body-bg, 5%), 90%);
@code-bg: darken(@body-bg, 3%); @code-bg: darken(@body-bg, 3%);
@code-color: #fff; @code-color: #fff;
} }
@hero-bg: @control-bg; @hero-bg: @control-bg;
@hero-color: @control-color; @hero-color: @control-color;
@hero-muted-color: @control-color; @hero-muted-color: @control-color;
@error-color: #d83e3e; @error-color: #d83e3e;
@alert-bg: #fff2ae; @alert-bg: #fff2ae;
@alert-color: #ad6c00; @alert-color: #ad6c00;
@alert-error-bg: @error-color; @alert-error-bg: @error-color;
@alert-error-color: #fff; @alert-error-color: #fff;
@alert-success-bg: #B4F1AF; @alert-success-bg: #b4f1af;
@alert-success-color: #33722D; @alert-success-color: #33722d;
@validation-error-color: @error-color; @validation-error-color: @error-color;
.define-header(@config-colored-header); .define-header(@config-colored-header);
.define-header(false) { .define-header(false) {
@header-bg: @body-bg; @header-bg: @body-bg;
@header-color: @primary-color; @header-color: @primary-color;
@header-control-bg: @control-bg; @header-control-bg: @control-bg;
@header-control-color: @control-color; @header-control-color: @control-color;
} }
.define-header(true) { .define-header(true) {
@header-bg: @primary-color; @header-bg: @primary-color;
@header-color: @body-bg; @header-color: @body-bg;
@header-control-bg: mix(#000, @header-bg, 10%); @header-control-bg: mix(#000, @header-bg, 10%);
@header-control-color: mix(@body-bg, @header-bg, 60%); @header-control-color: mix(@body-bg, @header-bg, 60%);
} }
// --------------------------------- // ---------------------------------
// LAYOUT // LAYOUT
@drawer-width: 270px; @drawer-width: 270px;
@pane-width: 400px; @pane-width: 400px;
@header-height: 52px; @header-height: 52px;
@header-height-phone: 46px; @header-height-phone: 46px;
@border-radius: 4px; @border-radius: 4px;
@zindex-header: 1000; @zindex-header: 1000;
@zindex-pane: 1010; @zindex-pane: 1010;
@zindex-composer: 1020; @zindex-composer: 1020;
@zindex-dropdown: 1030; @zindex-dropdown: 1030;
@zindex-modal-background: 1040; @zindex-modal-background: 1040;
@zindex-modal: 1050; @zindex-modal: 1050;
@zindex-alerts: 1060; @zindex-alerts: 1060;
@zindex-tooltip: 1070; @zindex-tooltip: 1070;
@expand-side-nav: @tablet-up; @expand-side-nav: @tablet-up;
// --------------------------------- // ---------------------------------
// BREAKPOINTS // BREAKPOINTS
@ -123,28 +123,28 @@
// with specific viewport sizes. This can result in the browser actually being 'between' media queries, which // with specific viewport sizes. This can result in the browser actually being 'between' media queries, which
// breaks our UI. See: https://github.com/flarum/core/issues/2915 // breaks our UI. See: https://github.com/flarum/core/issues/2915
@screen-phone-max: (@screen-tablet - 0.02); @screen-phone-max: (@screen-tablet - 0.02);
@screen-tablet: 768px; @screen-tablet: 768px;
@screen-tablet-max: (@screen-desktop - 0.02); @screen-tablet-max: (@screen-desktop - 0.02);
@screen-desktop: 992px; @screen-desktop: 992px;
@screen-desktop-max: (@screen-desktop-hd - 0.02); @screen-desktop-max: (@screen-desktop-hd - 0.02);
@screen-desktop-hd: 1100px; @screen-desktop-hd: 1100px;
@phone: ~"(max-width: @{screen-phone-max})"; @phone: ~'(max-width: @{screen-phone-max})';
@tablet: ~"(min-width: @{screen-tablet}) and (max-width: @{screen-tablet-max})"; @tablet: ~'(min-width: @{screen-tablet}) and (max-width: @{screen-tablet-max})';
@desktop: ~"(min-width: @{screen-desktop}) and (max-width: @{screen-desktop-max})"; @desktop: ~'(min-width: @{screen-desktop}) and (max-width: @{screen-desktop-max})';
@desktop-hd: ~"(min-width: @{screen-desktop-hd})"; @desktop-hd: ~'(min-width: @{screen-desktop-hd})';
@tablet-up: ~"(min-width: @{screen-tablet})"; @tablet-up: ~'(min-width: @{screen-tablet})';
@desktop-up: ~"(min-width: @{screen-desktop})"; @desktop-up: ~'(min-width: @{screen-desktop})';
// --------------------------------- // ---------------------------------
// COMPONENTS // COMPONENTS
@tooltip-bg: rgba(0, 0, 0, 0.9); @tooltip-bg: rgba(0, 0, 0, 0.9);
@tooltip-color: #fff; @tooltip-color: #fff;
@online-user-circle-color: #7FBA00; @online-user-circle-color: #7fba00;

46
less/forum.less
View File

@ -1,24 +1,24 @@
@import "common/common"; @import 'common/common';
@import "forum/ActivityPage"; @import 'forum/ActivityPage';
@import "forum/AvatarEditor"; @import 'forum/AvatarEditor';
@import "forum/Composer"; @import 'forum/Composer';
@import "forum/DiscussionHero"; @import 'forum/DiscussionHero';
@import "forum/DiscussionList"; @import 'forum/DiscussionList';
@import "forum/DiscussionListItem"; @import 'forum/DiscussionListItem';
@import "forum/DiscussionPage"; @import 'forum/DiscussionPage';
@import "forum/Hero"; @import 'forum/Hero';
@import "forum/IndexPage"; @import 'forum/IndexPage';
@import "forum/LogInButton"; @import 'forum/LogInButton';
@import "forum/LogInModal"; @import 'forum/LogInModal';
@import "forum/NotificationGrid"; @import 'forum/NotificationGrid';
@import "forum/NotificationList"; @import 'forum/NotificationList';
@import "forum/NotificationsDropdown"; @import 'forum/NotificationsDropdown';
@import "forum/Post"; @import 'forum/Post';
@import "forum/PostStream"; @import 'forum/PostStream';
@import "forum/Scrubber"; @import 'forum/Scrubber';
@import "forum/SettingsPage"; @import 'forum/SettingsPage';
@import "forum/SignUpModal"; @import 'forum/SignUpModal';
@import "forum/Slidable"; @import 'forum/Slidable';
@import "forum/UserCard"; @import 'forum/UserCard';
@import "forum/UserPage"; @import 'forum/UserPage';

3
less/forum/ActivityPage.less
View File

@ -26,7 +26,8 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
&, a { &,
a {
color: var(--muted-color); color: var(--muted-color);
} }
a { a {

33
less/forum/Composer.less
View File

@ -41,18 +41,23 @@
line-height: 1.5em; line-height: 1.5em;
color: var(--secondary-color); color: var(--secondary-color);
&, input, a { &,
input,
a {
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
} }
input, a { input,
a {
color: inherit; color: inherit;
} }
input { input {
font-size: 16px; font-size: 16px;
width: 500px; width: 500px;
&, &[disabled], &:focus { &,
&[disabled],
&:focus {
background: none; background: none;
border: 0; border: 0;
padding: 0 20px 0 0; padding: 0 20px 0 0;
@ -127,7 +132,7 @@
} }
&:before { &:before {
content: " "; content: ' ';
.header-background(); .header-background();
position: absolute; position: absolute;
opacity: 0; opacity: 0;
@ -139,7 +144,7 @@
& .Composer-controls { & .Composer-controls {
position: static; position: static;
z-index: calc(~"var(--zindex-header) + 1"); z-index: calc(~'var(--zindex-header) + 1');
li:not(.App-backControl) { li:not(.App-backControl) {
display: none; display: none;
@ -159,7 +164,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: calc(~"var(--zindex-composer) - 1"); z-index: calc(~'var(--zindex-composer) - 1');
background-color: var(--overlay-bg); background-color: var(--overlay-bg);
opacity: 0.9; opacity: 0.9;
} }
@ -185,10 +190,10 @@
} }
.normal &:first-child { .normal &:first-child {
margin: calc(~"0px - var(--header-height-phone)") 50px 0; margin: calc(~'0px - var(--header-height-phone)') 50px 0;
text-align: center; text-align: center;
position: relative; position: relative;
z-index: calc(~"var(--zindex-header) + 1"); z-index: calc(~'var(--zindex-header) + 1');
border: 0; border: 0;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -230,7 +235,8 @@
height: 300px; height: 300px;
transition: background 0.2s, box-shadow 0.2s; transition: background 0.2s, box-shadow 0.2s;
&.active, &.fullScreen { &.active,
&.fullScreen {
background: var(--body-bg); background: var(--body-bg);
} }
&.active:not(.fullScreen) { &.active:not(.fullScreen) {
@ -279,7 +285,8 @@
margin-bottom: -17px; margin-bottom: -17px;
position: relative; position: relative;
.minimized &, .fullScreen & { .minimized &,
.fullScreen & {
display: none; display: none;
} }
} }
@ -287,14 +294,16 @@
float: left; float: left;
.Avatar--size(64px); .Avatar--size(64px);
.minimized &, .fullScreen & { .minimized &,
.fullScreen & {
display: none; display: none;
} }
} }
.ComposerBody-content { .ComposerBody-content {
margin-left: 85px; margin-left: 85px;
.minimized &, .fullScreen & { .minimized &,
.fullScreen & {
margin-left: 0; margin-left: 0;
} }
} }

2
less/forum/DiscussionListItem.less
View File

@ -176,8 +176,6 @@
} }
} }
@media @tablet-up { @media @tablet-up {
.DiscussionListItem { .DiscussionListItem {
position: relative; position: relative;

16
less/forum/DiscussionPage.less
View File

@ -15,7 +15,8 @@
margin: 15px; margin: 15px;
display: inline-block; display: inline-block;
&.item-controls, &.item-scrubber { &.item-controls,
&.item-scrubber {
margin: 0; margin: 0;
display: block; display: block;
} }
@ -26,7 +27,8 @@
.DiscussionPage-nav { .DiscussionPage-nav {
float: right; float: right;
&, > ul { &,
> ul {
width: 150px; width: 150px;
} }
> ul { > ul {
@ -38,7 +40,8 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.ButtonGroup, .Button { .ButtonGroup,
.Button {
width: 100%; width: 100%;
} }
.ButtonGroup:not(.itemCount1) { .ButtonGroup:not(.itemCount1) {
@ -69,12 +72,12 @@
@media @tablet-up { @media @tablet-up {
.DiscussionPage-list { .DiscussionPage-list {
left: calc(~"-6px - var(--pane-width)"); left: calc(~'-6px - var(--pane-width)');
position: absolute; position: absolute;
z-index: var(--zindex-pane); z-index: var(--zindex-pane);
overflow: auto; overflow: auto;
top: var(--header-height); top: var(--header-height);
height: ~"calc(100vh - var(--header-height))"; height: ~'calc(100vh - var(--header-height))';
width: var(--pane-width); width: var(--pane-width);
background: var(--body-bg); background: var(--body-bg);
padding-bottom: 40px; padding-bottom: 40px;
@ -132,7 +135,8 @@
} }
} }
// When the pane is pinned, move the other page content inwards // When the pane is pinned, move the other page content inwards
.App-content, .App-footer { .App-content,
.App-footer {
.hasPane.panePinned & { .hasPane.panePinned & {
margin-left: var(--pane-width); margin-left: var(--pane-width);

3
less/forum/IndexPage.less
View File

@ -17,7 +17,8 @@
.IndexPage-toolbar { .IndexPage-toolbar {
margin-bottom: 15px; margin-bottom: 15px;
} }
.IndexPage-toolbar-view, .IndexPage-toolbar-action { .IndexPage-toolbar-view,
.IndexPage-toolbar-action {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
list-style: none; list-style: none;

6
less/forum/NotificationList.less
View File

@ -85,7 +85,7 @@
padding-right: var(--overlap); padding-right: var(--overlap);
.Badge { .Badge {
margin-right: calc(~"0px - var(--overlap)"); margin-right: calc(~'0px - var(--overlap)');
position: relative; position: relative;
.Badge--size(21px); .Badge--size(21px);
} }
@ -107,8 +107,8 @@
grid-template-columns: auto auto 1fr auto; grid-template-columns: auto auto 1fr auto;
grid-template-areas: grid-template-areas:
"avatar icon title button" 'avatar icon title button'
"x x excerpt excerpt"; 'x x excerpt excerpt';
align-items: baseline; align-items: baseline;
row-gap: 1px; row-gap: 1px;

74
less/forum/Post.less
View File

@ -20,7 +20,8 @@
margin-bottom: 15px; margin-bottom: 15px;
color: var(--muted-color); color: var(--muted-color);
&, a { &,
a {
color: var(--muted-color); color: var(--muted-color);
} }
> ul { > ul {
@ -43,7 +44,8 @@
h3 { h3 {
display: inline; display: inline;
} }
h3, h3 a { h3,
h3 a {
color: var(--heading-color); color: var(--heading-color);
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
@ -95,14 +97,19 @@
overflow: auto; overflow: auto;
overflow-wrap: break-word; overflow-wrap: break-word;
p, ul, ol, blockquote { p,
ul,
ol,
blockquote {
margin-bottom: 1em; margin-bottom: 1em;
} }
a { a {
border-bottom: 1px solid var(--control-bg); border-bottom: 1px solid var(--control-bg);
font-weight: 600; font-weight: 600;
&:hover, &:focus, &:active { &:hover,
&:focus,
&:active {
text-decoration: none; text-decoration: none;
border-color: var(--link-color); border-color: var(--link-color);
} }
@ -120,13 +127,13 @@
} }
// Inline code // Inline code
code { code {
font-family: source-code-pro, Monaco, Consolas, "Courier New", monospace; font-family: source-code-pro, Monaco, Consolas, 'Courier New', monospace;
padding: 5px; padding: 5px;
background: var(--code-bg); background: var(--code-bg);
color: var(--code-color); color: var(--code-color);
line-height: 1.3; line-height: 1.3;
font-size: 90%; font-size: 90%;
border-radius: 4px border-radius: 4px;
} }
// Code blocks // Code blocks
pre { pre {
@ -149,10 +156,15 @@
overflow-x: auto; overflow-x: auto;
// Backwards compatibility for browsers that don't support `max()` // Backwards compatibility for browsers that don't support `max()`
max-height: 50vh; max-height: 50vh;
max-height: ~"max(50vh, 250px)"; max-height: ~'max(50vh, 250px)';
} }
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1em; margin-top: 1em;
margin-bottom: 16px; margin-bottom: 16px;
font-weight: bold; font-weight: bold;
@ -169,17 +181,20 @@
h4 { h4 {
font-size: 125%; font-size: 125%;
} }
h5, h6 { h5,
h6 {
font-size: 100%; font-size: 100%;
} }
h6 { h6 {
color: var(--muted-more-color); color: var(--muted-more-color);
} }
img, iframe { img,
iframe {
max-width: 100%; max-width: 100%;
} }
} }
.Post-body, .Post-preview { .Post-body,
.Post-preview {
> *:first-child { > *:first-child {
margin-top: 0 !important; margin-top: 0 !important;
} }
@ -190,18 +205,27 @@
} }
.Post--hidden { .Post--hidden {
.Post-header, .Post-header a, .PostUser h3, .PostUser h3 a { .Post-header,
.Post-header a,
.PostUser h3,
.PostUser h3 a {
color: var(--muted-more-color); color: var(--muted-more-color);
} }
&:not(.revealContent) { &:not(.revealContent) {
.Post-header { .Post-header {
margin-bottom: 0; margin-bottom: 0;
} }
.Post-body, .Post-footer, h3 .Avatar, .PostUser-badges { .Post-body,
.Post-footer,
h3 .Avatar,
.PostUser-badges {
display: none; display: none;
} }
} }
.Post-body, .Post-footer, h3 .Avatar, .PostUser-badges { .Post-body,
.Post-footer,
h3 .Avatar,
.PostUser-badges {
opacity: 0.5; opacity: 0.5;
} }
.Post-header .Button--more { .Post-header .Button--more {
@ -227,7 +251,8 @@
color: var(--text-color); color: var(--text-color);
font-weight: bold; font-weight: bold;
} }
.PostMeta-time, .PostMeta-ip { .PostMeta-time,
.PostMeta-ip {
margin-left: 5px; margin-left: 5px;
} }
.PostMeta-permalink { .PostMeta-permalink {
@ -248,7 +273,8 @@
float: left; float: left;
} }
.EventPost { .EventPost {
&, a { &,
a {
color: var(--muted-color); color: var(--muted-color);
} }
a { a {
@ -259,13 +285,15 @@
font-size: 14px; font-size: 14px;
} }
.Post-footer, .Post-actions { .Post-footer,
.Post-actions {
> ul { > ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
&, a { &,
a {
color: var(--muted-color); color: var(--muted-color);
} }
a { a {
@ -303,7 +331,8 @@
transition: opacity 0.2s; transition: opacity 0.2s;
.EventPost &, .Post--hidden:not(.revealContent) & { .EventPost &,
.Post--hidden:not(.revealContent) & {
margin-top: -27px; margin-top: -27px;
margin-bottom: -15px; margin-bottom: -15px;
} }
@ -322,7 +351,9 @@
vertical-align: top; vertical-align: top;
} }
} }
.Post:hover &, .Post:focus-within &, &.open { .Post:hover &,
.Post:focus-within &,
&.open {
opacity: 1; opacity: 1;
} }
} }
@ -389,7 +420,8 @@
.Post { .Post {
padding-left: 20px + @avatar-column-width; padding-left: 20px + @avatar-column-width;
} }
.CommentPost:not(.Post--hidden), .ReplyPlaceholder { .CommentPost:not(.Post--hidden),
.ReplyPlaceholder {
min-height: 64px + 40px; // avatar height + padding min-height: 64px + 40px; // avatar height + padding
} }
.PostUser-avatar { .PostUser-avatar {

32
less/forum/PostStream.less
View File

@ -18,9 +18,15 @@
} }
@keyframes blink { @keyframes blink {
0% {opacity: 0.5} 0% {
50% {opacity: 1} opacity: 0.5;
100% {opacity: 0.5} }
50% {
opacity: 1;
}
100% {
opacity: 0.5;
}
} }
.LoadingPost { .LoadingPost {
animation: blink 1s linear infinite; animation: blink 1s linear infinite;
@ -58,9 +64,15 @@
} }
@keyframes pulsate { @keyframes pulsate {
0% {transform: scale(1)} 0% {
50% {transform: scale(1.02)} transform: scale(1);
100% {transform: scale(1)} }
50% {
transform: scale(1.02);
}
100% {
transform: scale(1);
}
} }
.pulsate { .pulsate {
animation: pulsate 1s ease-in-out infinite; animation: pulsate 1s ease-in-out infinite;
@ -70,8 +82,12 @@
} }
@keyframes fadeIn { @keyframes fadeIn {
0% {opacity: 0} 0% {
100% {opacity: 1} opacity: 0;
}
100% {
opacity: 1;
}
} }
.fadeIn { .fadeIn {
animation: fadeIn 0.4s ease-in-out; animation: fadeIn 0.4s ease-in-out;

6
less/forum/Scrubber.less
View File

@ -7,7 +7,8 @@
font-size: 14px; font-size: 14px;
margin-right: 2px; margin-right: 2px;
} }
&:hover, &:focus { &:hover,
&:focus {
text-decoration: none; text-decoration: none;
color: var(--link-color); color: var(--link-color);
} }
@ -21,7 +22,8 @@
cursor: pointer; cursor: pointer;
.user-select(none); .user-select(none);
} }
.Scrubber-before, .Scrubber-after { .Scrubber-before,
.Scrubber-after {
border-left: 1px solid var(--control-bg); border-left: 1px solid var(--control-bg);
} }
.Scrubber-unread { .Scrubber-unread {

1
less/forum/SettingsPage.less
View File

@ -26,4 +26,3 @@
margin-right: 5px; margin-right: 5px;
} }
} }

8
less/forum/UserCard.less
View File

@ -15,7 +15,8 @@
width: 500px; width: 500px;
box-shadow: 0 2px 6px var(--shadow-color); box-shadow: 0 2px 6px var(--shadow-color);
&, .darkenBackground { &,
.darkenBackground {
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
.container { .container {
@ -76,9 +77,10 @@
margin: 0 0 0 15px; margin: 0 0 0 15px;
padding: 0; padding: 0;
&, > li { &,
> li {
display: inline-block; display: inline-block;
margin-right: 5px margin-right: 5px;
} }
} }
.UserCard-info { .UserCard-info {