mirror of
https://github.com/flarum/core.git
synced 2025-08-10 10:24:46 +02:00
feat: theming and extensibility improvements (#3876)
* feat: make page structure customizable across different pages (#3867) * feat: create `PageStructure` component * feat: apply to `DiscussionPage` * feat: apply to `UserPage` * feat: apply to `TagsPage` * fix: adapt subscriptions ext * chore: cleanup * chore: use grid & flexbox for the discussion list item (#3868) * chore: rename `DiscussionPage-list` to `DiscussionListPane` * chore: itemlistify `DiscussionListItem` * chore: use flex and grid for `DiscussionListItem` * chore: use flexbox for `App-header` (#3869) * chore: use flex and grid for `App-header` * chore: drop search floats * fix: adapt admin styles * chore: use flexbox in dropdowns and SplitDropdown for subscriptions (#3874) * chore: flexbox dropdown menu items * chore: normalize subscriptions menu (use slit dropdown) * chore: cleanup * chore: misc flexbox/grid changes (#3875) * chore: `TagsPage` to tsx * chore: `TagsPage` flexbox/grid * chore: `IndexPage-toolbar` flexbox * chore: `UserCard` flexbox & itemlists * fix: `Post` improve spacing logic * chore: `Post` grid and proper spacing * fix: avatar editor hover layer layout * chore: `Button` flex * chore: normalize form semantics (#3877) * chore: normalize fieldsets * fix: `LinkButton` spacing * chore: consistent form semantics * fix: styling regressions (#3878) * fix: post spacing goes off in other pages * fix: regression * feat: extract reusable components from `NotificationsDropdown` (#3879) * feat: extensible global notices (#3880) * fix: js error on null item list * feat: extensible global notices * chore: housekeeping (#3881) * chore: use CSS variables where still not using * chore: cleanup suspension modal * chore: cleanup post flag * fix: badge vertical align * chore: use CSS variables for custom coloring * chore: `icon` helper to `Icon` component * chore: `avatar` helper to `Avatar` component * fix: chunk loading fails on admin frontend * chore: format * feat: reusable `UploadImageButton` component (#3882) * chore: convert `UploadImageButton` to tsx * feat: reusable `UploadImageButton` component * feat: add `image-upload` setting type * feat: extensible default footer component (#3883) * chore: yarn format
This commit is contained in:
Sami Mazouz
GitHub
@@ -17,6 +17,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.Header-navigation {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media @phone {
|
||||
.Dropdown-menu {
|
||||
height: 70vh;
|
||||
@@ -90,6 +94,8 @@
|
||||
margin-left: var(--admin-pane-width);
|
||||
}
|
||||
.App-nav .AdminNav {
|
||||
--extension-icon-size: 25px;
|
||||
|
||||
.Dropdown-menu {
|
||||
.item-search {
|
||||
margin-top: 10px;
|
||||
@@ -104,8 +110,8 @@
|
||||
|
||||
> li {
|
||||
> a {
|
||||
padding: 10px 10px 10px 45px;
|
||||
display: block;
|
||||
padding: 10px 10px 10px 15px;
|
||||
gap: 9px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -131,14 +137,11 @@
|
||||
}
|
||||
|
||||
.Button-icon {
|
||||
float: left;
|
||||
font-size: 13px !important;
|
||||
margin-left: -25px !important;
|
||||
margin-top: 4px !important;
|
||||
width: var(--extension-icon-size);
|
||||
}
|
||||
|
||||
.Button-label {
|
||||
padding-left: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
@@ -150,8 +153,7 @@
|
||||
}
|
||||
|
||||
.ExtensionIcon {
|
||||
--size: 25px;
|
||||
margin-left: -29px;
|
||||
--size: var(--extension-icon-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -194,12 +196,9 @@
|
||||
|
||||
.ExtensionNavButton {
|
||||
.Button-label {
|
||||
display: inline-block;
|
||||
max-width: ~"calc(100% - 18px)";
|
||||
max-width: ~"calc(100% - 72px)";
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -14,20 +14,9 @@
|
||||
}
|
||||
.AppearancePage-colors-input {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
.Form-group {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.Form-group:last-child {
|
||||
margin-bottom: 24px !important;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.AppearancePage-colors .Checkbox {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.TextareaCodeModal {
|
||||
|
||||
@@ -8,10 +8,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.Form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@@ -20,15 +16,10 @@
|
||||
}
|
||||
|
||||
.BasicsPage-welcomeBanner-input {
|
||||
input {
|
||||
margin-bottom: 1px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
.StackedFormControl > :first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
textarea {
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
margin-bottom: 10px;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,22 +1,8 @@
|
||||
.EditGroupModal {
|
||||
.Form-group:not(:last-child) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.Badge {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.EditGroupModal-name-input {
|
||||
:first-child {
|
||||
margin-bottom: 1px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
:last-child {
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
.EditGroupModal-delete {
|
||||
float: right;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@@ -27,6 +27,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
.clearfix();
|
||||
}
|
||||
}
|
||||
|
||||
&-header,
|
||||
|
||||
@@ -7,26 +7,4 @@
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button, .Alert {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.MailPage-MailSettings-input {
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.Select {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -169,6 +169,12 @@
|
||||
// ------------------------------------
|
||||
// Header
|
||||
|
||||
.App-header {
|
||||
display: flex;
|
||||
}
|
||||
.Header-navigation {
|
||||
position: absolute;
|
||||
}
|
||||
.Header-controls {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -176,7 +182,6 @@
|
||||
}
|
||||
.Header-logo {
|
||||
max-height: 30px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// On phones, the header is displayed inside of the drawer. We lay its
|
||||
@@ -239,6 +244,12 @@
|
||||
position: absolute;
|
||||
border-bottom: 0;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.affix & {
|
||||
position: fixed;
|
||||
}
|
||||
@@ -252,29 +263,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
.Header-navigation {
|
||||
float: left;
|
||||
margin-right: 25px;
|
||||
}
|
||||
.Header-controls {
|
||||
&, > li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.Header-primary {
|
||||
float: left;
|
||||
//
|
||||
}
|
||||
.Header-title {
|
||||
float: left;
|
||||
vertical-align: top;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
margin: 0 15px 0 0;
|
||||
line-height: 34px;
|
||||
}
|
||||
.Header-secondary {
|
||||
float: right;
|
||||
margin-left: auto;
|
||||
|
||||
.Search {
|
||||
margin-right: 10px;
|
||||
@@ -294,6 +296,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media @desktop-hd {
|
||||
.Header-navigation {
|
||||
.hasPane.panePinned & {
|
||||
position: relative;
|
||||
width: ~"min(20%, var(--pane-width))";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: calc(@screen-desktop-hd + 80px)) {
|
||||
.Header-navigation {
|
||||
position: relative;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------
|
||||
// Content Area
|
||||
|
||||
|
||||
@@ -8,7 +8,6 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
box-shadow: 0 2px 4px var(--shadow-color);
|
||||
|
||||
.Badge-label {
|
||||
|
||||
@@ -5,12 +5,14 @@
|
||||
// Make the div behave like a button
|
||||
.ButtonGroup {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
display: inline-flex;
|
||||
gap: 1px;
|
||||
|
||||
> .Button {
|
||||
position: relative;
|
||||
float: left;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
// Bring the "active" button to the front
|
||||
&:hover,
|
||||
&:focus,
|
||||
@@ -19,31 +21,33 @@
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:not(:first-child):not(:last-child):not(.Dropdown-toggle) {
|
||||
&:not(:first-of-type):not(:last-of-type):not(.Dropdown-toggle) {
|
||||
border-radius: 0;
|
||||
}
|
||||
&:first-child:not(:last-child):not(.Dropdown-toggle) {
|
||||
&:first-of-type:not(:last-of-type):not(.Dropdown-toggle) {
|
||||
margin-left: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
&:last-child:not(:first-child), &.Dropdown-toggle:not(:first-child) {
|
||||
&:last-of-type:not(:first-of-type), &.Dropdown-toggle:not(:first-of-type) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.Button + .Button {
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.Button, .LinkButton {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.Button {
|
||||
display: inline-block;
|
||||
justify-content: center;
|
||||
margin-bottom: 0; // For input.btn
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
@@ -159,10 +163,6 @@
|
||||
font-weight: bold;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
|
||||
.Button-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.Button--inverted {
|
||||
.Button--color-auto('button-inverted');
|
||||
@@ -179,7 +179,7 @@
|
||||
}
|
||||
}
|
||||
.Button--block {
|
||||
display: block;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -212,8 +212,11 @@
|
||||
.Avatar--size(24px);
|
||||
}
|
||||
}
|
||||
.Button-label {
|
||||
line-height: inherit;
|
||||
}
|
||||
.Button-icon {
|
||||
margin-right: 7px;
|
||||
line-height: inherit;
|
||||
}
|
||||
.Button-icon,
|
||||
.Button-caret {
|
||||
|
||||
@@ -31,6 +31,6 @@
|
||||
|
||||
&-icon {
|
||||
text-align: center;
|
||||
color: @validation-error-color;
|
||||
color: var(--validation-error-color);
|
||||
}
|
||||
}
|
||||
|
||||
22
framework/core/less/common/DetailedDropdownItem.less
Normal file
22
framework/core/less/common/DetailedDropdownItem.less
Normal file
@@ -0,0 +1,22 @@
|
||||
.DetailedDropdownItem {
|
||||
.Dropdown-menu > li > & {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.Button-icon {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.DetailedDropdownItem-content {
|
||||
display: grid;
|
||||
grid-template-columns: 25px 1fr;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.DetailedDropdownItem-description {
|
||||
display: block;
|
||||
color: var(--muted-color);
|
||||
font-size: 12px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
@@ -26,7 +26,9 @@
|
||||
> li {
|
||||
> a, > button, > span {
|
||||
padding: 8px 15px;
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
width: 100%;
|
||||
color: var(--text-color);
|
||||
border-radius: 0;
|
||||
@@ -41,17 +43,12 @@
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&.hasIcon {
|
||||
padding-left: 40px;
|
||||
}
|
||||
line-height: 20px;
|
||||
|
||||
.Button-icon {
|
||||
float: left;
|
||||
margin-left: -25px;
|
||||
margin-top: 2px;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@@ -135,7 +132,7 @@
|
||||
}
|
||||
|
||||
@media @tablet-up {
|
||||
.Dropdown-menu li:first-child {
|
||||
&:not(.Dropdown--withMainAction) .Dropdown-menu li:first-child {
|
||||
&, + li.Dropdown-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,25 @@
|
||||
.Form-group {
|
||||
margin-bottom: 24px;
|
||||
.Form {
|
||||
--gap: 24px;
|
||||
margin-bottom: 32px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.Form, .Form-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--gap);
|
||||
}
|
||||
.Form-header {
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> label {
|
||||
font-weight: bold;
|
||||
color: var(--muted-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,18 +41,63 @@
|
||||
}
|
||||
}
|
||||
|
||||
.Form-group {
|
||||
margin-bottom: 12px;
|
||||
> *, > .Form-body > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&, .Form-body {
|
||||
--gap: 12px;
|
||||
}
|
||||
.checkbox {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.Form-group > label {
|
||||
.Form-group, .FieldSet, .FieldSet-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.FieldSet, .FieldSet-items, .Form, .Form-body {
|
||||
> * {
|
||||
min-width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.FieldSet--col .FieldSet-items, .Form-controls {
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
gap: 5px;
|
||||
|
||||
> * {
|
||||
min-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.Form-group, .FieldSet {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.FieldSet-items {
|
||||
width: 100%;
|
||||
gap: 5px;
|
||||
|
||||
.FieldSet--form & {
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.Form-group > label, .FieldSet-label {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: var(--text-color);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.helpText {
|
||||
font-size: 12px;
|
||||
line-height: 1.5em;
|
||||
color: var(--muted-color);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
.FormControl {
|
||||
--transition: border-color .15s, background .15s;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 8px 13px;
|
||||
font-size: 13px;
|
||||
@@ -44,9 +43,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
.helpText {
|
||||
font-size: 12px;
|
||||
line-height: 1.5em;
|
||||
margin-bottom: 10px;
|
||||
color: var(--muted-color);
|
||||
.StackedFormControl {
|
||||
> :not(:last-child) {
|
||||
margin-bottom: 1px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
> :last-child {
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.FormControl, .StackedFormControl, .ColorInput {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -102,7 +102,6 @@
|
||||
.helpText {
|
||||
font-size: 14px;
|
||||
line-height: 1.5em;
|
||||
margin-bottom: 25px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,18 +61,16 @@
|
||||
&:before {
|
||||
.fas();
|
||||
content: @fa-var-search;
|
||||
float: left;
|
||||
margin-right: -36px;
|
||||
width: 36px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
padding: 8px 0;
|
||||
line-height: 1.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
input {
|
||||
float: left;
|
||||
width: 225px;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
@@ -85,7 +83,9 @@
|
||||
}
|
||||
|
||||
.Button {
|
||||
float: left;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-left: -36px;
|
||||
width: 36px !important;
|
||||
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
@import "ColorInput";
|
||||
@import "LabelValue";
|
||||
@import "Dropdown";
|
||||
@import "DetailedDropdownItem";
|
||||
@import "EditUserModal";
|
||||
@import "Form";
|
||||
@import "FormControl";
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
--control-color: @control-color;
|
||||
--control-danger-bg: @control-danger-bg;
|
||||
--control-danger-color: @control-danger-color;
|
||||
--control-body-bg-mix: mix(@control-bg, @body-bg, 50%);
|
||||
|
||||
--error-color: @error-color;
|
||||
|
||||
@@ -44,7 +45,7 @@
|
||||
}
|
||||
|
||||
// ---------------------------------
|
||||
// COMPONENTS
|
||||
// COMPONENT COLORS
|
||||
|
||||
--header-bg: @header-bg;
|
||||
--header-color: @header-color;
|
||||
@@ -86,7 +87,7 @@
|
||||
--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%);
|
||||
--discussion-list-item-bg-hover: var(--control-body-bg-mix);
|
||||
|
||||
.Button--color-vars(@control-color, @control-bg, 'button');
|
||||
.Button--color-vars(@body-bg, @primary-color, 'button-primary');
|
||||
@@ -120,15 +121,21 @@
|
||||
// available to the JS code.
|
||||
--flarum-screen: none;
|
||||
|
||||
--screen-phone-max: @screen-phone-max;
|
||||
--screen-tablet: @screen-tablet;
|
||||
--screen-tablet-max: @screen-tablet-max;
|
||||
--screen-desktop: @screen-desktop;
|
||||
--screen-desktop-max: @screen-desktop-max;
|
||||
--screen-desktop-hd: @screen-desktop-hd;
|
||||
--screen-phone-max: @screen-phone-max;
|
||||
--screen-tablet: @screen-tablet;
|
||||
--screen-tablet-max: @screen-tablet-max;
|
||||
--screen-desktop: @screen-desktop;
|
||||
--screen-desktop-max: @screen-desktop-max;
|
||||
--screen-desktop-hd: @screen-desktop-hd;
|
||||
|
||||
@media @phone { --flarum-screen: phone; }
|
||||
@media @tablet { --flarum-screen: tablet; }
|
||||
@media @desktop { --flarum-screen: desktop; }
|
||||
@media @desktop-hd { --flarum-screen: desktop-hd; }
|
||||
|
||||
// ---------------------------------
|
||||
// COMPONENT LAYOUTS
|
||||
|
||||
--avatar-column-width: 85px;
|
||||
--post-padding: 20px;
|
||||
}
|
||||
|
||||
@@ -62,7 +62,6 @@ p {
|
||||
margin-left: auto;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
.clearfix();
|
||||
|
||||
@media @tablet {
|
||||
width: @screen-tablet;
|
||||
@@ -91,16 +90,6 @@ fieldset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
|
||||
> ul > li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
legend {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
input[type="search"] {
|
||||
-webkit-appearance: none;
|
||||
@@ -183,3 +172,7 @@ blockquote ol:last-child {
|
||||
--contrast-color: var(--unchanged-color);
|
||||
}
|
||||
}
|
||||
|
||||
.text-colored {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
@@ -18,8 +18,9 @@
|
||||
|
||||
& .Dropdown-menu {
|
||||
& > li > a {
|
||||
padding: 8px 0 8px 30px;
|
||||
color: var(--sidenav-color, var(--muted-color));
|
||||
gap: 15px;
|
||||
padding-left: 0;
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
@@ -28,8 +29,6 @@
|
||||
}
|
||||
|
||||
& .Button-icon {
|
||||
float: left;
|
||||
margin-left: -30px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
@@ -58,14 +57,11 @@
|
||||
}
|
||||
.sideNav {
|
||||
flex-shrink: 0;
|
||||
margin-right: 50px;
|
||||
|
||||
&, > ul {
|
||||
width: 190px;
|
||||
}
|
||||
> ul {
|
||||
margin-top: 30px;
|
||||
|
||||
&.affix {
|
||||
top: var(--header-height);
|
||||
}
|
||||
@@ -101,11 +97,8 @@
|
||||
}
|
||||
|
||||
.Dropdown--select .Dropdown-menu > li > a {
|
||||
padding-left: 25px;
|
||||
|
||||
.icon {
|
||||
margin-left: -25px;
|
||||
}
|
||||
gap: 8px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.affix {
|
||||
|
||||
@@ -1,19 +1,21 @@
|
||||
@import "common/common";
|
||||
|
||||
@import "forum/PageStructure";
|
||||
@import "forum/ActivityPage";
|
||||
@import "forum/AvatarEditor";
|
||||
@import "forum/Composer";
|
||||
@import "forum/DiscussionHero";
|
||||
@import "forum/DiscussionList";
|
||||
@import "forum/DiscussionListItem";
|
||||
@import "forum/DiscussionListPane";
|
||||
@import "forum/DiscussionPage";
|
||||
@import "forum/Hero";
|
||||
@import "forum/IndexPage";
|
||||
@import "forum/LogInButton";
|
||||
@import "forum/LogInModal";
|
||||
@import "forum/NotificationGrid";
|
||||
@import "forum/NotificationList";
|
||||
@import "forum/NotificationsDropdown";
|
||||
@import "forum/HeaderDropdown";
|
||||
@import "forum/HeaderList";
|
||||
@import "forum/Post";
|
||||
@import "forum/PostStream";
|
||||
@import "forum/Scrubber";
|
||||
|
||||
@@ -1,13 +1,18 @@
|
||||
.AvatarEditor {
|
||||
position: relative;
|
||||
|
||||
.Dropdown-toggle {
|
||||
margin: 4px;
|
||||
font-size: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.Dropdown-toggle {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset: 0;
|
||||
border-radius: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
text-align: center;
|
||||
@@ -26,10 +31,7 @@
|
||||
.LoadingIndicator-container {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset: 0;
|
||||
}
|
||||
@media @tablet-up {
|
||||
.Dropdown-menu {
|
||||
|
||||
@@ -15,33 +15,35 @@
|
||||
.DiscussionListItem-content {
|
||||
position: relative;
|
||||
color: var(--muted-color);
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(50%, 1fr) auto;
|
||||
gap: 16px;
|
||||
padding: 12px 26px 12px 0;
|
||||
}
|
||||
.DiscussionListItem-main {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
.DiscussionListItem-author {
|
||||
float: left;
|
||||
margin-top: 13px;
|
||||
.DiscussionListItem-author-avatar {
|
||||
display: block;
|
||||
}
|
||||
.DiscussionListItem-badges {
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -2px;
|
||||
|
||||
.Badge {
|
||||
margin-left: -10px;
|
||||
position: relative;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
.DiscussionListItem-main {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.DiscussionListItem-title {
|
||||
margin: 0 0 3px;
|
||||
line-height: 1.3;
|
||||
@@ -89,9 +91,6 @@
|
||||
display: block;
|
||||
word-break: break-word;
|
||||
|
||||
.DiscussionPage-list & {
|
||||
margin-right: 0;
|
||||
}
|
||||
mark {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
@@ -100,10 +99,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.DiscussionListItem-count {
|
||||
float: right;
|
||||
margin-top: 12px;
|
||||
.DiscussionListItem-stats {
|
||||
width: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.DiscussionListItem-stats-item {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.unread & {
|
||||
cursor: pointer;
|
||||
@@ -121,23 +126,21 @@
|
||||
display: none;
|
||||
}
|
||||
.DiscussionListItem-content {
|
||||
padding-left: 15px + 45px;
|
||||
padding-right: 15px + 35px;
|
||||
padding-left: 15px;
|
||||
|
||||
&:active {
|
||||
background: var(--control-bg);
|
||||
}
|
||||
}
|
||||
.DiscussionListItem-author {
|
||||
margin-left: -45px;
|
||||
|
||||
.DiscussionListItem-author-avatar {
|
||||
.Avatar {
|
||||
.Avatar--size(32px);
|
||||
}
|
||||
}
|
||||
.DiscussionListItem-badges {
|
||||
margin-left: -45px;
|
||||
width: 38px;
|
||||
left: 19px;
|
||||
top: -4px;
|
||||
|
||||
.badge {
|
||||
.Badge--size(20px);
|
||||
@@ -145,7 +148,7 @@
|
||||
}
|
||||
}
|
||||
.DiscussionListItem-main {
|
||||
margin-right: -45px;
|
||||
//
|
||||
}
|
||||
.DiscussionListItem-title {
|
||||
font-size: 14px;
|
||||
@@ -156,13 +159,16 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.DiscussionListItem-stats {
|
||||
align-items: end;
|
||||
}
|
||||
.DiscussionListItem-count {
|
||||
margin-right: -35px;
|
||||
background: var(--control-bg);
|
||||
color: var(--control-color);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 12px;
|
||||
padding: 2px 6px;
|
||||
gap: 0;
|
||||
|
||||
.unread & {
|
||||
background: var(--primary-color);
|
||||
@@ -173,6 +179,10 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -225,52 +235,42 @@
|
||||
}
|
||||
}
|
||||
.DiscussionListItem-content {
|
||||
padding-left: 52px;
|
||||
padding-right: 80px;
|
||||
//
|
||||
}
|
||||
.DiscussionListItem-author {
|
||||
margin-left: -52px;
|
||||
|
||||
.DiscussionListItem-author-avatar {
|
||||
.Avatar {
|
||||
.Avatar--size(36px);
|
||||
}
|
||||
}
|
||||
.DiscussionListItem-badges {
|
||||
margin-left: -55px;
|
||||
width: 48px;
|
||||
}
|
||||
.DiscussionListItem-main {
|
||||
margin-right: -65px;
|
||||
//
|
||||
}
|
||||
.DiscussionListItem-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
.DiscussionListItem-count {
|
||||
margin-top: 12px;
|
||||
margin-right: -70px;
|
||||
width: 55px;
|
||||
.DiscussionListItem-stats-item {
|
||||
color: var(--muted-color);
|
||||
font-size: 14px;
|
||||
padding-left: 21px;
|
||||
|
||||
&:before {
|
||||
.far();
|
||||
content: @fa-var-comment;
|
||||
float: left;
|
||||
margin-left: -21px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
.DiscussionListItem-count {
|
||||
.unread & {
|
||||
color: var(--heading-color);
|
||||
font-weight: bold;
|
||||
|
||||
&:before {
|
||||
.fas();
|
||||
content: @fa-var-comment;
|
||||
._checkmark {
|
||||
display: none;
|
||||
}
|
||||
&:hover:before {
|
||||
.fas();
|
||||
content: @fa-var-check;
|
||||
|
||||
&:hover {
|
||||
._checkmark {
|
||||
display: block;
|
||||
}
|
||||
._comment {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
87
framework/core/less/forum/DiscussionListPane.less
Normal file
87
framework/core/less/forum/DiscussionListPane.less
Normal file
@@ -0,0 +1,87 @@
|
||||
@media @phone {
|
||||
.DiscussionListPane {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media @tablet-up {
|
||||
.DiscussionListPane {
|
||||
left: calc(~"-6px - var(--pane-width)");
|
||||
position: absolute;
|
||||
z-index: var(--zindex-pane);
|
||||
overflow: auto;
|
||||
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 var(--control-bg);
|
||||
box-shadow: 0 6px 6px var(--shadow-color);
|
||||
transition: left 0.2s;
|
||||
|
||||
.affix & {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
}
|
||||
.paneShowing & {
|
||||
left: 0;
|
||||
}
|
||||
.DiscussionListItem {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
|
||||
&.active {
|
||||
background: var(--control-bg);
|
||||
}
|
||||
}
|
||||
.DiscussionListItem-content {
|
||||
padding-left: 16px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
.DiscussionListItem-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
.DiscussionListItem-info {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.DiscussionListItem-badges {
|
||||
left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media @desktop-hd {
|
||||
.DiscussionListPane {
|
||||
.panePinned & {
|
||||
left: 0;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
// When the pane is pinned, move the other page content inwards
|
||||
.App-content, .App-footer {
|
||||
.hasPane.panePinned & {
|
||||
margin-left: var(--pane-width);
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.App-header .container {
|
||||
transition: width 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
.DiscussionListPane {
|
||||
.DiscussionListItem-info {
|
||||
.item-excerpt {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -23,15 +23,23 @@
|
||||
}
|
||||
}
|
||||
@media @tablet-up {
|
||||
.DiscussionPage-discussion {
|
||||
> .container {
|
||||
display: grid;
|
||||
grid-gap: 75px;
|
||||
grid-template-columns: 1fr 150px;
|
||||
grid-template-areas: 'stream nav';
|
||||
.DiscussionPage {
|
||||
--sidebar-width: 150px;
|
||||
--gap: 55px;
|
||||
|
||||
&::before, &::after {
|
||||
content: none;
|
||||
.Page {
|
||||
.Page--cols();
|
||||
|
||||
&-container {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
&-content {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&-sidebar {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -39,7 +47,6 @@
|
||||
.DiscussionPage-nav {
|
||||
align-self: start;
|
||||
position: sticky;
|
||||
grid-area: nav;
|
||||
top: var(--header-height);
|
||||
padding-top: 32px;
|
||||
z-index: 1;
|
||||
@@ -49,11 +56,11 @@
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.ButtonGroup, .Button {
|
||||
.ButtonGroup, :not(.ButtonGroup) > .Button {
|
||||
width: 100%;
|
||||
}
|
||||
.ButtonGroup:not(.itemCount1) {
|
||||
.Button:first-child {
|
||||
.Button:first-of-type {
|
||||
width: 77%;
|
||||
}
|
||||
.Dropdown-toggle {
|
||||
@@ -61,104 +68,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.DiscussionPage-stream {
|
||||
grid-area: stream;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------
|
||||
// Discussions Pane
|
||||
|
||||
@media @phone {
|
||||
.DiscussionPage-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media @tablet-up {
|
||||
.DiscussionPage-list {
|
||||
left: calc(~"-6px - var(--pane-width)");
|
||||
position: absolute;
|
||||
z-index: var(--zindex-pane);
|
||||
overflow: auto;
|
||||
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 var(--control-bg);
|
||||
box-shadow: 0 6px 6px var(--shadow-color);
|
||||
transition: left 0.2s;
|
||||
|
||||
.affix & {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
}
|
||||
.paneShowing & {
|
||||
left: 0;
|
||||
}
|
||||
.DiscussionListItem {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
|
||||
&.active {
|
||||
background: var(--control-bg);
|
||||
}
|
||||
}
|
||||
.DiscussionListItem-controls {
|
||||
top: 5px;
|
||||
}
|
||||
.DiscussionListItem-content {
|
||||
padding-left: 52px + 15px;
|
||||
padding-right: 65px + 15px;
|
||||
}
|
||||
.DiscussionListItem-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
.DiscussionListItem-info {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.DiscussionListItem-relevantPosts {
|
||||
margin-left: -52px;
|
||||
margin-right: -65px;
|
||||
}
|
||||
.DiscussionListItem-count {
|
||||
margin-top: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media @desktop-hd {
|
||||
.DiscussionPage-list {
|
||||
.panePinned & {
|
||||
left: 0;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
// When the pane is pinned, move the other page content inwards
|
||||
.App-content, .App-footer {
|
||||
.hasPane.panePinned & {
|
||||
margin-left: var(--pane-width);
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.App-header .container {
|
||||
transition: width 0.2s;
|
||||
|
||||
.hasPane.panePinned & {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
.NotificationsDropdown {
|
||||
.HeaderDropdown {
|
||||
.Dropdown-menu {
|
||||
padding: 0;
|
||||
|
||||
.NotificationList-content {
|
||||
.HeaderList-content {
|
||||
max-height: ~"min(70vh, 800px)";
|
||||
overflow: auto;
|
||||
}
|
||||
@@ -12,7 +12,7 @@
|
||||
}
|
||||
}
|
||||
@media @tablet-up {
|
||||
.NotificationsDropdown {
|
||||
.HeaderDropdown {
|
||||
.Dropdown-menu {
|
||||
width: 425px;
|
||||
}
|
||||
@@ -22,11 +22,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.NotificationsDropdown .Dropdown-toggle.new .Button-icon {
|
||||
.HeaderDropdown .Dropdown-toggle.new .Button-icon {
|
||||
color: var(--header-color);
|
||||
}
|
||||
|
||||
.NotificationsDropdown-unread {
|
||||
.HeaderDropdown-unread {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 18px;
|
||||
@@ -1,4 +1,4 @@
|
||||
.NotificationList {
|
||||
.HeaderList {
|
||||
overflow: hidden;
|
||||
|
||||
.App-primaryControl > button:not(:last-of-type) {
|
||||
@@ -28,7 +28,7 @@
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
|
||||
// The NotificationList may be displayed inside of the drawer as a
|
||||
// The HeaderList may be displayed inside of the drawer as a
|
||||
// dropdown menu – but the drawer may have .light-contents() applied to
|
||||
// it. In this case we will need to reset the button's styles back to
|
||||
// normal.
|
||||
@@ -59,7 +59,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.NotificationGroup {
|
||||
.HeaderListGroup {
|
||||
border-top: 1px solid var(--control-bg);
|
||||
margin-top: -1px;
|
||||
|
||||
@@ -69,7 +69,6 @@
|
||||
|
||||
&-header {
|
||||
font-weight: bold;
|
||||
color: var(--heading-color) !important;
|
||||
padding: 8px 16px;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -83,6 +82,9 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&, a {
|
||||
color: var(--heading-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-badges {
|
||||
@@ -105,7 +107,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.Notification {
|
||||
.HeaderListItem {
|
||||
padding: 8px 16px;
|
||||
color: var(--muted-color) !important; // required to override .light-contents applied to header
|
||||
overflow: hidden;
|
||||
@@ -114,7 +116,7 @@
|
||||
grid-template-columns: auto auto 1fr auto;
|
||||
|
||||
grid-template-areas:
|
||||
"avatar icon title button"
|
||||
"avatar icon title actions"
|
||||
"x x excerpt excerpt";
|
||||
|
||||
align-items: baseline;
|
||||
@@ -134,7 +136,7 @@
|
||||
text-decoration: none;
|
||||
background: var(--control-bg);
|
||||
|
||||
.Notification-action {
|
||||
.HeaderListItem-actions > .Button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -175,37 +177,37 @@
|
||||
}
|
||||
}
|
||||
|
||||
time {
|
||||
line-height: inherit;
|
||||
&-time {
|
||||
font-size: 11px;
|
||||
line-height: 19px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&-action {
|
||||
line-height: inherit;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
&-actions {
|
||||
grid-area: actions;
|
||||
|
||||
.add-keyboard-focus-ring();
|
||||
.add-keyboard-focus-ring-offset(4px);
|
||||
> .Button {
|
||||
line-height: inherit;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
|
||||
grid-area: button;
|
||||
.add-keyboard-focus-ring();
|
||||
.add-keyboard-focus-ring-offset(4px);
|
||||
|
||||
// Needs more specificity to fix hover/focus styles not applying in dropdown
|
||||
.Notification & when (@config-colored-header = true) {
|
||||
color: var(--control-color);
|
||||
// Needs more specificity to fix hover/focus styles not applying in dropdown
|
||||
.HeaderListItem & when (@config-colored-header = true) {
|
||||
color: var(--control-color);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--link-color);
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--link-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 13px;
|
||||
margin-right: 0;
|
||||
.icon {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,7 +18,6 @@
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.IndexPage-toolbar-view, .IndexPage-toolbar-action {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@@ -27,13 +26,10 @@
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.IndexPage-toolbar-view > li {
|
||||
margin-right: 5px;
|
||||
.IndexPage-toolbar, .IndexPage-toolbar-view, .IndexPage-toolbar-action {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
.IndexPage-toolbar-action {
|
||||
float: right;
|
||||
|
||||
> li {
|
||||
margin-left: 5px;
|
||||
}
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
38
framework/core/less/forum/PageStructure.less
Normal file
38
framework/core/less/forum/PageStructure.less
Normal file
@@ -0,0 +1,38 @@
|
||||
.Page {
|
||||
--content-width: 100%;
|
||||
--sidebar-width: 190px;
|
||||
--gap: 50px;
|
||||
|
||||
&-container {
|
||||
gap: var(--gap);
|
||||
}
|
||||
|
||||
@media @desktop-up {
|
||||
.Page--cols()
|
||||
}
|
||||
|
||||
@media @phone, @tablet {
|
||||
&-content {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Page--cols {
|
||||
&-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&-content {
|
||||
width: var(--content-width);
|
||||
}
|
||||
|
||||
&-sidebar {
|
||||
width: var(--sidebar-width);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&-content, &-sidebar {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
@@ -2,8 +2,7 @@
|
||||
// Posts
|
||||
|
||||
.Post {
|
||||
padding: 20px;
|
||||
margin: -1px -20px;
|
||||
padding: var(--post-padding) var(--post-padding) var(--post-padding) 0;
|
||||
transition: 0.2s box-shadow, top 0.2s, opacity 0.2s;
|
||||
position: relative;
|
||||
top: 0;
|
||||
@@ -18,7 +17,6 @@
|
||||
|
||||
.Post-header {
|
||||
margin-bottom: 15px;
|
||||
color: var(--muted-color);
|
||||
|
||||
&, a {
|
||||
color: var(--muted-color);
|
||||
@@ -33,6 +31,28 @@
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.UserCard {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 16px;
|
||||
z-index: var(--zindex-dropdown);
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
transform: scale(0.95);
|
||||
transform-origin: left top;
|
||||
opacity: 0;
|
||||
|
||||
&.in {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.Avatar {
|
||||
.Avatar--size(32px);
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.PostUser {
|
||||
margin: 0;
|
||||
@@ -40,13 +60,9 @@
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
|
||||
// TODO: remove styles for h3 on Flarum 2.0 cleanup - they may be used by extensions, but they should target `.PostUser-name` class instead
|
||||
h3,
|
||||
.PostUser-name {
|
||||
display: inline;
|
||||
}
|
||||
// TODO: remove styles for h3 on Flarum 2.0 cleanup - they may be used by extensions, but they should target `.PostUser-name` class instead
|
||||
h3, h3 a,
|
||||
.PostUser-name, .PostUser-name a {
|
||||
color: var(--heading-color);
|
||||
font-weight: bold;
|
||||
@@ -63,22 +79,6 @@
|
||||
color: var(--online-user-circle-color);
|
||||
}
|
||||
}
|
||||
|
||||
.UserCard {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -100px;
|
||||
z-index: var(--zindex-dropdown);
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
transform: scale(0.95);
|
||||
transform-origin: left top;
|
||||
opacity: 0;
|
||||
|
||||
&.in {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.PostUser-badges {
|
||||
text-align: right;
|
||||
@@ -195,8 +195,6 @@
|
||||
|
||||
.Post--hidden {
|
||||
.Post-header, .Post-header a,
|
||||
// TODO: remove styles for h3 on Flarum 2.0 cleanup - they may be used by extensions, but they should target `.PostUser-name` class instead
|
||||
.PostUser h3, .PostUser h3 a,
|
||||
.PostUser .PostUser-name, .PostUser .PostUser-name a {
|
||||
color: var(--muted-more-color);
|
||||
}
|
||||
@@ -206,18 +204,14 @@
|
||||
}
|
||||
.Post-body,
|
||||
.Post-footer,
|
||||
// TODO: remove styles for h3 on Flarum 2.0 cleanup - they may be used by extensions, but they should target `.PostUser-name` class instead
|
||||
h3 .Avatar,
|
||||
.PostUser-name .Avatar,
|
||||
.Post-side > *,
|
||||
.PostUser-badges {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.Post-body,
|
||||
.Post-footer,
|
||||
// TODO: remove styles for h3 on Flarum 2.0 cleanup - they may be used by extensions, but they should target `.PostUser-name` class instead
|
||||
h3 .Avatar,
|
||||
.PostUser-name .Avatar,
|
||||
.Post-side > *,
|
||||
.PostUser-badges {
|
||||
opacity: 0.5;
|
||||
}
|
||||
@@ -375,11 +369,9 @@
|
||||
}
|
||||
|
||||
@media @phone {
|
||||
.Post-header {
|
||||
.Avatar {
|
||||
.Avatar--size(32px);
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
.Post-side {
|
||||
.Post-avatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.PostUser-badges {
|
||||
@@ -403,30 +395,29 @@
|
||||
}
|
||||
}
|
||||
|
||||
@avatar-column-width: 85px;
|
||||
|
||||
@media @tablet-up {
|
||||
.Post {
|
||||
padding-left: 20px + @avatar-column-width;
|
||||
.Post-container {
|
||||
display: grid;
|
||||
grid-template-columns: var(--avatar-column-width) 1fr;
|
||||
}
|
||||
.CommentPost:not(.Post--hidden), .ReplyPlaceholder {
|
||||
min-height: 64px + 40px; // avatar height + padding
|
||||
}
|
||||
.PostUser-avatar {
|
||||
left: -@avatar-column-width;
|
||||
position: absolute;
|
||||
.Post-avatar {
|
||||
.Avatar--size(64px);
|
||||
}
|
||||
.Post-header .Post-avatar {
|
||||
display: none;
|
||||
}
|
||||
.PostUser-badges {
|
||||
float: left;
|
||||
position: relative;
|
||||
margin-left: -@avatar-column-width + 5px;
|
||||
margin-left: calc(~"5px - var(--avatar-column-width)");
|
||||
margin-top: -3px;
|
||||
width: 64px;
|
||||
}
|
||||
.EventPost-icon {
|
||||
text-align: right;
|
||||
margin-left: -@avatar-column-width;
|
||||
width: 64px;
|
||||
font-size: 22px;
|
||||
}
|
||||
@@ -437,17 +428,42 @@
|
||||
cursor: text;
|
||||
overflow: hidden;
|
||||
margin-top: 50px;
|
||||
margin-left: calc(0px - var(--post-padding));
|
||||
padding-left: var(--post-padding);
|
||||
border: 2px dashed var(--control-bg);
|
||||
color: var(--muted-color);
|
||||
border-radius: 10px;
|
||||
background-color: transparent;
|
||||
width: calc(~"100% + 20px * 2");
|
||||
display: flex;
|
||||
display: block;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
text-align: left;
|
||||
width: calc(100% + var(--post-padding));
|
||||
|
||||
.Post-container {
|
||||
display: grid;
|
||||
grid-template-columns: var(--avatar-column-width) 1fr;
|
||||
|
||||
@media @phone {
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.Post-header {
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.Post-avatar {
|
||||
.Avatar--size(32px);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.Post-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@media @tablet-up {
|
||||
.ReplyPlaceholder {
|
||||
@@ -455,15 +471,14 @@
|
||||
transition: border-color 0.2s;
|
||||
|
||||
.Post-header {
|
||||
padding-top: 18px;
|
||||
position: relative;
|
||||
}
|
||||
.Avatar {
|
||||
margin-top: -18px;
|
||||
}
|
||||
&:hover {
|
||||
border-color: var(--control-bg);
|
||||
}
|
||||
.Post-avatar {
|
||||
.Avatar--size(64px);
|
||||
}
|
||||
}
|
||||
.LoadingPost .Post-header {
|
||||
position: relative;
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
// ------------------------------------
|
||||
// Stream
|
||||
|
||||
.PostStream {
|
||||
@media @tablet-up {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.PostStream-item {
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid var(--control-bg);
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(~"100% - var(--post-padding)");
|
||||
height: 1px;
|
||||
background-color: var(--control-bg);
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media @phone {
|
||||
margin: 0 -15px;
|
||||
@@ -48,7 +50,7 @@
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
color: var(--muted-color);
|
||||
padding: 20px 20px 20px @avatar-column-width;
|
||||
padding: 20px 20px 20px calc(~"var(--avatar-column-width) + 20px");
|
||||
font-size: 12px;
|
||||
|
||||
@media @phone {
|
||||
|
||||
@@ -20,10 +20,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.Settings-account {
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -3,9 +3,11 @@
|
||||
.light-contents();
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.UserCard .container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
.UserCard-controls {
|
||||
float: right;
|
||||
|
||||
.Dropdown-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
@@ -26,15 +28,17 @@
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.UserCard-profile {
|
||||
display: grid;
|
||||
grid-template-columns: 104px 1fr;
|
||||
gap: 26px;
|
||||
text-align: left;
|
||||
padding-left: 130px;
|
||||
max-width: 800px;
|
||||
padding-right: 20px;
|
||||
|
||||
@media @phone {
|
||||
padding-left: 0;
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.UserCard-identity {
|
||||
@@ -43,24 +47,12 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
.UserCard-avatar {
|
||||
float: left;
|
||||
margin-left: -130px;
|
||||
|
||||
@media @phone {
|
||||
display: block;
|
||||
float: none;
|
||||
margin: 0 auto 20px;
|
||||
width: 64px + 8px;
|
||||
}
|
||||
.Dropdown-toggle {
|
||||
margin: 4px;
|
||||
line-height: 96px;
|
||||
font-size: 26px;
|
||||
|
||||
@media @phone {
|
||||
line-height: 64px;
|
||||
}
|
||||
}
|
||||
.Avatar {
|
||||
.Avatar--size(96px);
|
||||
border: 4px solid #fff;
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
flex-direction: column;
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user