Discource-C/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-28 08:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

DEV: Introduce stylelint (#29852)

Browse Source 
Stylelint is a css linter: https://stylelint.io/

As part of this change we have added two javascript scripts:

```
pnpm lint:css
pnpm lint:css:fix
```

Look at `.vscode/settings.json.sample` and `.vscode/extensions.json` for
configuration in VSCode.

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
This commit is contained in:
David Taylor 2025-01-20 15:27:42 +00:00 committed by GitHub
parent 89df65e843
commit d88ee33eb6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
297 changed files with 3174 additions and 793 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.devcontainer/devcontainer.json
View File

@ -29,7 +29,8 @@
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint",
"lifeart.vscode-glimmer-syntax",
"typed-ember.glint-vscode"
"typed-ember.glint-vscode",
"stylelint.vscode-stylelint"
]
}
}

4
.github/workflows/linting.yml vendored
View File

@ -74,6 +74,10 @@ jobs:
if: ${{ !cancelled() }}
run: pnpm lint:hbs
- name: Stylelint
if: ${{ !cancelled() }}
run: pnpm lint:css
- name: English locale lint (core)
if: ${{ !cancelled() }}
run: bundle exec ruby script/i18n_lint.rb "config/**/locales/{client,server}.en.yml"

3
.vscode/extensions.json vendored
View File

@ -5,6 +5,7 @@
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint",
"lifeart.vscode-glimmer-syntax",
"typed-ember.glint-vscode"
"typed-ember.glint-vscode",
"stylelint.vscode-stylelint"
]
}

8
.vscode/settings.json.sample vendored
View File

@ -34,4 +34,12 @@
"task.autoDetect": "off",
"eslint.debug": false,
"rubyLsp.formatter": "syntax_tree",
// stylelint scss support
"stylelint.validate": ["css", "postcss", "scss"],
// disable other stylesheet linters
"css.validate": false,
"less.validate": false,
"scss.validate": false
}

20
app/assets/stylesheets/color_definitions.scss
View File

@ -1,7 +1,6 @@
// This file maps all SCSS color variables to CSS custom properties.
// It is compiled to CSS separately from the rest of the app.
// The source variables come from color_transformations.scss and variables.scss
:root {
--scheme-type: #{schemeType()};
--primary: #{$primary};
@ -16,7 +15,6 @@
--love: #{$love};
--d-selected: #{$selected};
--d-hover: #{$hover};
--always-black-rgb: 0, 0, 0;
--primary-rgb: #{hexToRGB($primary)};
--primary-low-rgb: #{hexToRGB($primary-low)};
@ -26,14 +24,12 @@
--tertiary-rgb: #{hexToRGB($tertiary)};
--highlight-rgb: #{hexToRGB($highlight)};
--success-rgb: #{hexToRGB($success)};
--primary-very-low: #{$primary-very-low};
--primary-low: #{$primary-low};
--primary-low-mid: #{$primary-low-mid};
--primary-medium: #{$primary-medium};
--primary-high: #{$primary-high};
--primary-very-high: #{$primary-very-high};
--primary-50: #{$primary-50};
--primary-100: #{$primary-100};
--primary-200: #{$primary-200};
@ -44,25 +40,20 @@
--primary-700: #{$primary-700};
--primary-800: #{$primary-800};
--primary-900: #{$primary-900};
--header_primary-low: #{$header_primary-low};
--header_primary-low-mid: #{$header_primary-low-mid};
--header_primary-medium: #{$header_primary-medium};
--header_primary-high: #{$header_primary-high};
--header_primary-very-high: #{$header_primary-very-high};
--secondary-low: #{$secondary-low};
--secondary-medium: #{$secondary-medium};
--secondary-high: #{$secondary-high};
--secondary-very-high: #{$secondary-very-high};
--tertiary-very-low: #{$tertiary-very-low};
--tertiary-low: #{$tertiary-low};
--tertiary-medium: #{$tertiary-medium};
--tertiary-high: #{$tertiary-high};
--tertiary-hover: #{$tertiary-hover};
--tertiary-50: #{$tertiary-50};
--tertiary-100: #{$tertiary-100};
--tertiary-200: #{$tertiary-200};
@ -73,26 +64,20 @@
--tertiary-700: #{$tertiary-700};
--tertiary-800: #{$tertiary-800};
--tertiary-900: #{$tertiary-900};
--quaternary-low: #{$quaternary-low};
--highlight-bg: #{$highlight-bg};
--highlight-low: #{$highlight-low};
--highlight-medium: #{$highlight-medium};
--highlight-high: #{$highlight-high};
--danger-low: #{$danger-low};
--danger-low-mid: #{$danger-low-mid};
--danger-medium: #{$danger-medium};
--danger-hover: #{$danger-hover};
--success-low: #{$success-low};
--success-medium: #{$success-medium};
--success-hover: #{$success-hover};
--love-low: #{$love-low};
--wiki: #{$wiki};
--blend-primary-secondary-5: #{$blend-primary-secondary-5};
--primary-med-or-secondary-med: #{$primary-med-or-secondary-med};
--primary-med-or-secondary-high: #{$primary-med-or-secondary-high};
@ -108,7 +93,6 @@
--tertiary-or-white: #{$tertiary-or-white};
--facebook-or-white: #{$facebook-or-white};
--twitter-or-white: #{$twitter-or-white};
--hljs-attr: #{$hljs-attr};
--hljs-attribute: #{$hljs-attribute};
--hljs-addition: #{$hljs-addition};
@ -123,7 +107,6 @@
--hljs-symbol: #{$hljs-symbol};
--hljs-variable: #{$hljs-variable};
--hljs-string: #{$hljs-string};
--google: #{$google};
--google-hover: #{$google-hover};
--instagram: #{$instagram};
@ -136,11 +119,9 @@
--github-hover: #{$github-hover};
--discord: #{$discord};
--discord-hover: #{$discord-hover};
--gold: #{$gold};
--silver: #{$silver};
--bronze: #{$bronze};
--shadow-modal: 0 8px 60px rgba(0, 0, 0, #{$shadow-opacity-modal});
--shadow-composer: 0 -1px 40px rgba(0, 0, 0, #{$shadow-opacity-composer});
--shadow-menu-panel: 0 8px 12px rgba(0, 0, 0, #{$shadow-opacity-menu-panel});
@ -149,7 +130,6 @@
--shadow-header: 0 0 0 1px var(--primary-low);
--shadow-footer-nav: 0 0 2px 0 rgba(0, 0, 0, #{$shadow-opacity-footer-nav});
--shadow-focus-danger: 0 0 6px 0 var(--danger);
--float-kit-arrow-stroke-color: var(--primary-low);
--float-kit-arrow-fill-color: var(--secondary);
}

146
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -13,7 +13,6 @@ $mobile-breakpoint: 700px;
}
// Common admin styles
.admin-main-nav {
display: inline-flex;
position: relative;
@ -42,11 +41,14 @@ $mobile-breakpoint: 700px;
margin: 0 0 0 -10px;
padding: 0 10px 10px 10px;
}
&:before {
&::before {
display: none;
}
> li {
margin: 0;
&:last-of-type {
> a {
margin-right: 25px;
@ -56,7 +58,7 @@ $mobile-breakpoint: 700px;
}
@include breakpoint(tablet) {
// Fade-out for horizontal scroll nav
&:before {
&::before {
content: "";
position: absolute;
width: 10px;
@ -68,10 +70,11 @@ $mobile-breakpoint: 700px;
rgba(var(--secondary-rgb), 0)
);
}
&:after {
&::after {
content: "";
position: absolute;
right: 0px;
right: 0;
width: 30px;
height: 100%;
background: linear-gradient(
@ -85,25 +88,27 @@ $mobile-breakpoint: 700px;
.admin-contents {
position: relative;
.nav-stacked {
@media screen and (max-width: 700px) {
@media screen and (width <= 700px) {
margin: 0;
}
}
.row:before,
.row:after {
.row::before,
.row::after {
display: table;
content: "";
}
.row:after {
.row::after {
clear: both;
}
&.admin-site-settings-category {
overflow: hidden;
@media (max-width: 500px) {
@media (width <= 500px) {
background-color: var(--primary-very-low);
}
}
@ -116,31 +121,38 @@ $mobile-breakpoint: 700px;
tr {
text-align: left;
}
td,
th {
padding: 8px;
}
tr:hover {
background-color: var(--primary-very-low);
}
tr.selected {
background-color: var(--primary-low);
}
.filters input {
margin-bottom: 0;
}
.label {
display: none;
}
@media screen and (max-width: 970px) and (min-width: 768px) {
@media screen and (width <= 970px) and (width >= 768px) {
td,
th {
padding: 6px 4px;
}
th {
vertical-align: bottom;
}
th.sortable {
max-width: 100px;
}
@ -161,22 +173,25 @@ $mobile-breakpoint: 700px;
.admin-contents table.grid {
// Table switches to grid for narrow screens
@media screen and (max-width: 767px) {
@media screen and (width <= 767px) {
thead {
display: none;
}
.label {
display: block;
color: var(--primary-medium);
font-size: var(--font-down-1);
margin: 0.5em 0 0.15em 0;
}
tr {
grid-template-columns: repeat(3, 1fr);
display: grid;
line-height: var(--line-height-medium);
padding: 8px 0;
min-width: 0;
td {
padding: 2px;
align-self: center;
@ -185,33 +200,39 @@ $mobile-breakpoint: 700px;
tr.flagged-topic {
grid-template-columns: 0.25fr 1fr 1fr;
td.topic-title {
grid-column-start: 2;
grid-column-end: -2;
min-width: 0;
align-self: start;
}
td.last-flagged {
grid-row: 1;
grid-column-end: -1;
text-align: right;
align-self: start;
}
td.flag-details {
grid-row: 2;
grid-column-end: -1;
text-align: right;
}
td.flagged-topic-users {
grid-row: 1;
grid-column-start: 1;
max-width: 60px;
align-self: start;
a {
display: inline-block;
margin: 0 0.25em 0.25em 0;
}
}
td.flag-counts {
grid-row: 2;
grid-column-start: 2;
@ -219,7 +240,7 @@ $mobile-breakpoint: 700px;
}
}
@media screen and (min-width: 550px) {
@media screen and (width >= 550px) {
tr {
grid-template-columns: repeat(6, 1fr);
}
@ -229,34 +250,43 @@ $mobile-breakpoint: 700px;
.site-texts {
.search-area {
margin-bottom: 2em;
p {
margin-top: 0;
}
.site-text-search {
padding: 0.5em;
font-size: var(--font-0);
width: 50%;
}
.reseed {
float: right;
}
.locale {
margin-bottom: 0.5em;
}
.locale-search {
width: 50%;
}
}
.text-highlight {
font-weight: bold;
}
.site-text {
cursor: pointer;
border-bottom: 1px solid var(--primary-low);
margin-bottom: 0.5em;
&.overridden {
background-color: var(--highlight-bg);
}
h3 {
font-weight: normal;
font-size: var(--font-0);
@ -264,6 +294,7 @@ $mobile-breakpoint: 700px;
word-wrap: break-word;
}
}
.site-text-edit {
float: right;
}
@ -276,6 +307,7 @@ $mobile-breakpoint: 700px;
max-height: $maxHeight;
overflow: hidden;
position: relative;
&::after {
content: " ";
position: absolute;
@ -298,6 +330,7 @@ $mobile-breakpoint: 700px;
color: var(--primary-medium);
}
}
.edit-site-text {
textarea {
display: block;
@ -305,9 +338,11 @@ $mobile-breakpoint: 700px;
max-width: 800px;
margin: 0;
}
.save-button {
margin-top: 1em;
}
.save-button,
.title {
margin-bottom: 1em;
@ -317,15 +352,18 @@ $mobile-breakpoint: 700px;
word-wrap: break-word;
}
}
.go-back {
margin-top: 1em;
}
.desc {
padding-top: 3px;
font-size: var(--font-down-1);
line-height: var(--line-height-large);
color: var(--primary-medium);
}
.outdated {
border: 1px solid var(--primary-low);
box-sizing: border-box;
@ -339,6 +377,7 @@ $mobile-breakpoint: 700px;
}
}
}
p.warning {
color: var(--danger);
}
@ -347,6 +386,7 @@ $mobile-breakpoint: 700px;
.content-list {
width: 27%;
float: left;
li a span.count {
font-size: var(--font-down-1);
float: right;
@ -366,13 +406,16 @@ $mobile-breakpoint: 700px;
.admin-content {
.admin-contents {
padding: 0 0 8px 0;
@include clearfix();
@include clearfix;
}
.view-options {
float: right;
}
table.report {
margin-top: 20px;
tr {
th:nth-of-type(1) {
width: 20%;
@ -392,11 +435,13 @@ $mobile-breakpoint: 700px;
width: 60%;
}
}
td.x-value {
max-width: 0;
@include ellipsis;
}
}
.bar-container {
float: left;
width: 300px;
@ -441,7 +486,6 @@ $mobile-breakpoint: 700px;
&__controls {
display: flex;
margin-left: auto;
align-items: center;
}
@ -460,6 +504,7 @@ $mobile-breakpoint: 700px;
dt {
font-weight: bold;
&.other-accounts {
display: flex;
align-items: center;
@ -469,9 +514,11 @@ $mobile-breakpoint: 700px;
.btn {
margin-left: auto;
}
.count {
font-weight: bold;
margin-left: 0.25em;
&.--nonzero {
color: var(--danger);
}
@ -481,6 +528,7 @@ $mobile-breakpoint: 700px;
dd {
margin: 0.25em 0 1em;
&.other-accounts {
margin: 1em 0 0 0;
max-height: 13em;
@ -493,6 +541,7 @@ $mobile-breakpoint: 700px;
top: 0;
line-height: 1.2;
background: var(--secondary);
th {
padding: 0.25em;
}
@ -501,6 +550,7 @@ $mobile-breakpoint: 700px;
ul {
margin: 0;
}
li {
list-style: none;
}
@ -537,24 +587,28 @@ $mobile-breakpoint: 700px;
.username {
input[type="text"] {
min-width: 15em;
@media screen and (max-width: 500px) {
@media screen and (width <= 500px) {
box-sizing: border-box;
width: 100%;
}
}
}
.select-kit {
width: 350px;
}
.select-kit.multi-select {
width: 500px;
}
.select-kit.dropdown-select-box {
width: auto;
}
.search-logs-filter {
margin-left: auto;
@media screen and (max-width: 700px) {
@media screen and (width <= 700px) {
flex: 1 1 100%;
margin-left: 0;
}
@ -568,6 +622,7 @@ $mobile-breakpoint: 700px;
.controls {
@include clearfix;
}
.users-list-container {
overflow-x: auto;
}
@ -577,6 +632,7 @@ $mobile-breakpoint: 700px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
.show-emails,
.hide-emails {
margin-left: auto;
@ -591,15 +647,16 @@ $mobile-breakpoint: 700px;
.admin-actions {
margin-left: auto;
}
nav {
background-color: var(--primary-low);
width: 100%;
}
nav {
display: inline-flex;
position: relative;
flex: 1 0 0px;
height: auto;
overflow: hidden;
padding: 0;
height: 100%;
@ -610,7 +667,7 @@ $mobile-breakpoint: 700px;
margin-right: -10px;
}
&:before {
&::before {
// Fade out sides of horizontal nav
content: "";
position: absolute;
@ -624,10 +681,10 @@ $mobile-breakpoint: 700px;
);
}
&:after {
&::after {
content: "";
position: absolute;
right: 0px;
right: 0;
width: 15px;
height: calc(100% - 5px);
background: linear-gradient(
@ -651,24 +708,28 @@ $mobile-breakpoint: 700px;
-webkit-overflow-scrolling: touch;
}
&:before {
&::before {
display: none;
}
}
h1 {
font-size: var(--font-up-3);
line-height: var(--line-height-medium);
color: var(--primary);
}
.controls {
background: var(--primary-low);
width: 100%;
padding: 10px;
display: flex;
align-items: center;
.inline-form {
// Hacky, but fixes email preview summary
margin-bottom: -0.5em;
> div {
margin-right: 0.5em;
}
@ -677,29 +738,35 @@ $mobile-breakpoint: 700px;
@include breakpoint(mobile-extra-large) {
margin: 0 -10px;
}
input {
@include breakpoint(tablet) {
max-width: 150px;
}
}
&.search {
width: auto;
white-space: nowrap;
label {
flex: 1 1 250px;
display: flex;
align-items: center;
input {
margin-right: 0.5em;
}
}
}
}
.menu-toggle {
border-color: var(--primary-medium);
border-radius: 3px;
background: transparent;
color: var(--primary);
&:hover {
background-color: var(--primary-low-mid);
}
@ -716,12 +783,12 @@ $mobile-breakpoint: 700px;
.search {
label {
margin-bottom: 0px;
margin-bottom: 0;
}
// Hide the search checkbox for very small screens
// Todo: find somewhere to display it - probably requires switching its order in the html
@media (max-width: 550px) {
@media (width <= 550px) {
display: none;
}
}
@ -731,6 +798,7 @@ $mobile-breakpoint: 700px;
font-weight: bold;
}
}
label {
display: inline-block;
margin-right: 5px;
@ -772,9 +840,10 @@ $mobile-breakpoint: 700px;
z-index: z("base") - 1;
width: 250px;
}
@media (max-width: 500px) {
@media (width <= 500px) {
width: 50%;
}
.nav-stacked {
background-color: inherit;
@ -806,7 +875,7 @@ $mobile-breakpoint: 700px;
transition: transform 0.3s ease;
@include transform(translateX(250px));
}
@media (max-width: 500px) {
@media (width <= 500px) {
transition: transform 0.3s ease;
@include transform(translateX(50%));
}
@ -834,6 +903,7 @@ section.details {
padding: 5px;
clear: both;
text-align: right;
.btn {
line-height: var(--line-height-medium);
}
@ -848,6 +918,7 @@ section.details {
input[type="text"] {
width: 500px;
}
input#group-users {
width: 600px;
}
@ -868,40 +939,48 @@ section.details {
.d-icon-check {
color: var(--success);
}
.d-icon-xmark {
color: var(--danger);
}
}
@media all and (min-width: 320px) and (max-width: 500px) {
@media all and (width >= 320px) and (width <= 500px) {
.full-width {
margin: 0;
}
.site-settings-nav {
width: 100%;
}
.site-settings-detail {
width: 100%;
padding: 0;
border: none;
.settings .setting {
.setting-label {
float: left;
width: 100%;
h3 {
margin-bottom: 5px;
font-weight: bold;
margin-top: 25px;
}
}
.setting-value {
width: 100%;
}
}
}
.content-editor {
width: 100%;
}
div.ac-wrap {
width: 100% !important;
box-sizing: border-box;
@ -911,17 +990,21 @@ section.details {
.dashboard-right {
width: 100%;
}
.dashboard-stats {
margin: 0;
}
.badges {
.current-badge {
margin: 70px 0 0 0;
}
.current-badge-actions {
padding: 0;
}
}
.customize .content-list,
.customize .current-style {
width: 100%;
@ -1002,6 +1085,7 @@ table#user-badges {
}
}
}
.values {
margin-bottom: 0.5em;
}
@ -1054,25 +1138,31 @@ table#user-badges {
flex-flow: row wrap;
margin-left: -0.25em;
margin-top: -0.125em;
.new-value-input {
flex: 1 0 0px;
}
.value-input,
.new-value-input {
margin-top: 0.125em;
&:last-of-type {
margin-left: 0.25em;
}
}
.remove-value-btn {
margin-left: 0.25em;
margin-top: 0.125em;
}
.add-value-btn {
@include value-btn;
margin-left: 0.25em;
margin-top: 0.125em;
}
.new-value-input {
margin-left: 0.25em;
}
@ -1083,10 +1173,12 @@ table#user-badges {
.add-value-btn {
margin-bottom: 9px;
}
.value {
.value-input:last-of-type {
margin-left: 2.35em;
}
.new-value-input:first-of-type {
margin-right: 2.15em;
margin-left: 0.25em;

3
app/assets/stylesheets/common/admin/admin_bulk_users_delete_modal.scss
View File

@ -6,16 +6,19 @@
padding: 1em;
overflow-y: auto;
}
&__progress-line {
overflow-anchor: none;
&.-success {
color: var(--success);
}
&.-error {
color: var(--danger);
}
}
&__progress-anchor {
overflow-anchor: auto;
height: 1px;

3
app/assets/stylesheets/common/admin/admin_config_area.scss
View File

@ -3,6 +3,7 @@
margin-bottom: 1em;
}
}
.admin-config-area-card {
padding: 20px 5px 20px 20px;
border: 1px solid var(--primary-low);
@ -31,6 +32,7 @@
&__control-group-horizontal {
display: flex;
margin-bottom: 18px;
label {
margin-right: 1em;
}
@ -46,6 +48,7 @@
align-items: center;
flex: 1;
}
&__content {
margin-top: 0.5rem;
padding-right: 15px;

5
app/assets/stylesheets/common/admin/admin_filter.scss
View File

@ -6,13 +6,14 @@
.admin-filter__input-container {
min-width: 50%;
@media screen and (max-width: 500px) {
@media screen and (width <= 500px) {
width: 100%;
}
input {
min-width: 15em;
margin: 0;
@media screen and (max-width: 500px) {
@media screen and (width <= 500px) {
box-sizing: border-box;
width: 100%;
}

6
app/assets/stylesheets/common/admin/admin_intro.scss
View File

@ -13,18 +13,22 @@
vertical-align: top;
margin-top: 5px;
}
.create-actions {
margin-bottom: 1em;
}
.content-wrapper {
display: inline-block;
vertical-align: top;
width: 65%;
h1 {
display: inline-block;
line-height: var(--line-height-medium);
}
}
.external-link {
display: block;
margin-bottom: 5px;
@ -33,9 +37,11 @@
@include breakpoint(mobile-extra-large) {
width: 100%;
margin: 2em 0;
.content-wrapper {
width: 100%;
}
img {
display: none;
}

7
app/assets/stylesheets/common/admin/admin_report.scss
View File

@ -61,6 +61,7 @@
&.no-change {
color: var(--primary-medium);
.d-icon {
display: none;
}
@ -97,7 +98,7 @@
}
.d-icon {
color: currentColor;
color: currentcolor;
font-size: var(--font-up-5);
display: block;
margin: 0.25em auto;
@ -212,7 +213,7 @@
border-bottom: 1px solid var(--primary-low);
padding-bottom: 0.5em;
@media screen and (max-width: 400px) {
@media screen and (width <= 400px) {
flex-wrap: wrap;
}
@ -227,7 +228,6 @@
.admin-reports-list {
--d-border-radius: var(--space-0);
display: flex;
flex-wrap: wrap;
list-style-type: none;
@ -237,7 +237,6 @@
padding-top: 0;
.admin-section-landing-item {
margin-bottom: 0;
padding: var(--space-4);
border-radius: var(--d-border-radius);
outline: 1px solid var(--primary-low);

3
app/assets/stylesheets/common/admin/admin_report_counters.scss
View File

@ -26,7 +26,7 @@
}
}
@media screen and (max-width: 400px) {
@media screen and (width <= 400px) {
&.title .d-icon {
display: none;
}
@ -43,6 +43,7 @@
color: var(--success);
}
}
&.high-trending-down,
&.trending-down {
.d-icon {

1
app/assets/stylesheets/common/admin/admin_report_table.scss
View File

@ -50,6 +50,7 @@
&:hover {
color: var(--primary-medium);
background: var(--primary-low);
.d-icon {
color: var(--primary-medium);
}

1
app/assets/stylesheets/common/admin/admin_table.scss
View File

@ -71,7 +71,6 @@
.status-label {
--d-border-radius: var(--space-4);
--status-icon-diameter: 8px;
display: flex;
flex-wrap: nowrap;
width: fit-content;

32
app/assets/stylesheets/common/admin/api.scss
View File

@ -1,5 +1,4 @@
// Styles for admin/api
.d-admin-table.web-hooks {
.d-admin-row__overview.payload-url {
word-wrap: break-word;
@ -24,7 +23,6 @@
}
// Api keys
.admin-api-keys {
.api-key-show {
.form-element,
@ -43,8 +41,10 @@
margin: 0;
}
}
&.label-area {
width: 25%;
label {
margin-right: 1em;
}
@ -59,18 +59,22 @@
.api-key {
padding: 10px;
margin-bottom: 10px;
.form-element,
.form-element-desc {
float: left;
padding: 0.5em 0;
&.input-area {
input[type="checkbox"] {
margin-top: 0.5em;
}
.ac-wrap {
width: 50% !important;
}
}
&.label-area {
label {
text-align: left;
@ -78,20 +82,24 @@
}
}
}
.controls {
float: right;
text-align: left;
width: 50%;
}
.scopes-title {
margin-top: 20px;
}
}
.scopes-table.grid {
margin: 20px 0;
tr {
grid-template-columns: repeat(4, 1fr);
input {
margin-bottom: 2px;
}
@ -127,9 +135,11 @@
.tip.good:empty {
display: none;
}
input {
max-width: calc(100% - 10px);
}
.select-kit,
.select-kit.multi-select {
width: 100%;
@ -159,15 +169,19 @@
padding-bottom: 10px;
border-bottom: var(--primary-low) 1px solid;
}
.filters {
border-bottom: var(--primary-low) 1px solid;
.filter {
margin-bottom: 1em;
}
label .d-icon {
margin-right: 0.25em;
}
}
.instructions {
margin-top: 5px;
}
@ -199,6 +213,7 @@
li {
padding: 2px 0;
}
.col {
display: inline-block;
padding-top: 6px;
@ -206,38 +221,49 @@
overflow-y: auto;
overflow-x: hidden;
}
.col.heading {
font-weight: bold;
padding: 4px 0;
}
.col.heading.actions {
padding: 4px 0;
}
.col.first {
width: 90px;
}
.col.event-id {
width: 90px;
}
.col.timestamp {
width: 180px;
}
.col.completion {
width: 250px;
}
.col.actions {
padding-top: 0;
a {
text-decoration: underline;
}
}
.details {
display: block;
margin-top: 1rem;
}
label {
font-size: var(--font-0);
}
&.content-list {
width: 100%;
}
@ -259,9 +285,11 @@
.hook-event {
display: inline-block;
width: 100%;
label {
display: inline-block;
}
p {
margin: 0 0 5px 25px;
}

1
app/assets/stylesheets/common/admin/backups.scss
View File

@ -1,5 +1,4 @@
// Styles for /admin/backups
.admin-backups {
.before-backup-list-outlet {
margin-top: 1em;

15
app/assets/stylesheets/common/admin/badges.scss
View File

@ -1,15 +1,16 @@
// Styles for admin/badges
.admin-badges {
// flex page layout
.badges {
display: flex;
flex-wrap: wrap;
flex-direction: column;
.badges-header {
display: flex;
align-items: center;
flex: 1 0 100%;
.create-new-badge {
margin-left: auto;
display: flex;
@ -17,6 +18,7 @@
gap: 0.5em;
}
}
.content-list {
flex: 0 0 27%;
}
@ -29,14 +31,17 @@
border-right: 1px solid var(--primary-low);
border-left: 1px solid var(--primary-low);
border-bottom: 1px solid var(--primary-low);
.admin-badge-list-item {
&:first-child {
border-top: none;
}
&:last-child {
border-top: none;
}
}
.list-badge {
float: right;
font-size: var(--font-down-1);
@ -47,6 +52,7 @@
border-radius: 3px;
}
}
.user-badge {
border: none;
background-color: unset;
@ -138,6 +144,7 @@
&.success {
color: var(--success);
}
&.failure {
color: var(--danger);
}
@ -149,9 +156,11 @@
.badge-groupings {
margin-bottom: 10px;
}
.badge-groupings-list {
list-style: none;
margin: 0;
.badge-grouping-item {
border-bottom: 1px solid var(--primary-low);
display: flex;
@ -159,6 +168,7 @@
align-items: center;
padding: 5px 0;
}
.badge-grouping {
.badge-grouping-name-input {
margin: 0;
@ -179,13 +189,16 @@
background-color: var(--primary-low);
white-space: pre-wrap;
}
.count-warning {
background-color: var(--danger-low);
margin-bottom: 5px;
padding: 10px;
p {
margin: 0;
}
.heading {
color: var(--danger);
font-weight: bold;

14
app/assets/stylesheets/common/admin/customize-install-theme.scss
View File

@ -4,9 +4,11 @@
.install-theme-items {
flex: 0 0 150px;
}
.install-theme-content {
flex: 1 1 100%;
}
.select-kit {
width: 100%;
}
@ -34,13 +36,14 @@
label {
display: block;
padding: 10px 30px 10px 10px;
margin-bottom: 0px;
margin-bottom: 0;
cursor: pointer;
}
input:checked + label {
color: var(--secondary);
background-color: var(--tertiary);
+ .d-icon {
display: block;
color: var(--secondary);
@ -57,6 +60,7 @@
.install-theme-content {
width: calc(100% - 20px);
input[type="file"] {
width: 100%;
overflow: hidden; // Chrome needs this
@ -64,7 +68,7 @@
}
.install-theme-items + .install-theme-content {
padding: 0px 0px 10px 20px;
padding: 0 0 10px 20px;
width: calc(100% - 200px);
}
@ -82,7 +86,7 @@
.popular-theme-item {
border-bottom: 1px solid var(--primary-low);
padding: 8px 0px;
padding: 8px 0;
display: flex;
align-items: center;
@ -90,8 +94,10 @@
flex-direction: column;
align-items: initial;
}
.popular-theme-name {
flex: 1;
.popular-theme-type {
font-weight: normal;
font-size: var(--font-down-2);
@ -101,6 +107,7 @@
a {
color: var(--primary-very-high);
font-weight: bold;
&:hover,
&:visited,
&:active {
@ -113,6 +120,7 @@
padding-right: 20px;
}
}
.popular-theme-buttons {
@include breakpoint(mobile-extra-large) {
display: flex;

119
app/assets/stylesheets/common/admin/customize.scss
View File

@ -1,9 +1,9 @@
// Customize area
.email-template {
input {
width: 100%;
}
label {
font-weight: bold;
}
@ -12,6 +12,7 @@
.create-theme-modal {
div.input {
margin-bottom: 12px;
.label {
width: 20%;
display: inline-block;
@ -29,6 +30,7 @@
width: 100%;
height: 100%;
min-height: 300px;
.ace_editor {
position: absolute;
left: 0;
@ -49,16 +51,19 @@
.admin-container {
padding: 0;
}
.error-message,
.raw-error {
margin-top: 5px;
margin-bottom: 5px;
}
.error-message {
.fa {
color: var(--danger);
}
}
.raw-error {
background-color: var(--primary-very-low);
padding: 5px;
@ -75,13 +80,16 @@
/* TODO: Remove when admin header has been added to all /customize pages */
h1 {
margin-bottom: 10px;
input {
margin-bottom: 0;
font-size: var(--font-down-2);
.ios-device & {
font-size: var(--font-down-2);
}
}
&.d-page-header__title {
margin: 0;
}
@ -104,15 +112,18 @@
padding-left: 10px;
padding-right: 10px;
}
.admin-footer {
margin-top: 20px;
}
.color-schemes li {
.d-icon {
margin-right: 0.25em;
color: var(--primary-medium);
}
}
.show-current-style {
display: inline-block;
vertical-align: top;
@ -128,12 +139,15 @@
min-width: 0;
overflow-wrap: anywhere;
}
input {
margin: 0;
}
.btn {
margin-left: 0.5em;
}
a {
font-size: var(--font-down-2);
}
@ -165,6 +179,7 @@
a.license-url {
display: inline-block;
margin-right: 10px;
.d-icon {
margin-left: 5px;
}
@ -175,6 +190,7 @@
font-weight: bold;
margin-bottom: 7px;
}
.control-unit {
margin-top: 0.5em;
margin-bottom: 2em;
@ -184,11 +200,11 @@
justify-content: space-between;
width: 79.7%;
@media screen and (max-width: 700px) {
@media screen and (width <= 700px) {
width: 100%;
}
@media screen and (min-width: 700px) and (max-width: 768px) {
@media screen and (width >= 700px) and (width <= 768px) {
width: 73%;
}
@ -198,15 +214,19 @@
}
}
}
.control {
margin-bottom: 10px;
}
.description {
margin-bottom: 12px;
}
.theme-controls {
display: flex;
flex-wrap: wrap;
.btn {
margin: 0 0.5em 0.5em 0;
}
@ -215,25 +235,32 @@
&.color-scheme .admin-controls {
display: flex;
padding: 1em;
label {
margin-bottom: 0;
input[type="checkbox"] {
margin-top: 0;
}
}
.pull-left {
width: 70%;
}
.pull-right {
width: 30%;
}
}
}
.add-component-button {
vertical-align: middle;
}
.themes-list {
display: inline-block;
.create-actions {
margin-top: 0.5em;
}
@ -243,6 +270,7 @@
width: 100%;
display: flex;
border: 1px solid var(--primary-low);
.tab {
border: none;
padding: 1em;
@ -250,11 +278,13 @@
box-sizing: border-box;
text-align: center;
background: var(--d-nav-bg-color);
&.themes-tab {
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
&.components-tab {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -266,10 +296,12 @@
&:hover {
color: var(--d-nav-color--hover);
background: var(--d-nav-bg-color--hover);
&.active {
color: var(--d-nav-color--active);
background: var(--d-nav-bg-color--active);
}
.d-icon {
color: inherit;
}
@ -278,7 +310,7 @@
&.active {
position: relative;
@include nav-active();
@include nav-active;
}
}
@ -286,6 +318,7 @@
@include ellipsis;
}
}
.themes-list-search {
display: flex;
align-items: center;
@ -299,6 +332,7 @@
position: absolute;
padding-left: 0.5em;
}
&__input {
width: 100%;
height: 100%;
@ -328,17 +362,19 @@
white-space: nowrap;
margin-right: 1em;
}
&__input {
margin-right: 0.5em;
summary {
width: auto;
}
}
}
.themes-list-filter,
.themes-list-search {
color: var(--primary);
border-bottom: 1px solid var(--primary-low);
display: flex;
border-right: 1px solid var(--primary-low);
border-bottom: 1px solid var(--primary-low);
@ -350,10 +386,10 @@
max-height: 60vh;
border-bottom-right-radius: var(--d-border-radius);
border-bottom-left-radius: var(--d-border-radius);
@media screen and (max-height: 1000px) {
@media screen and (height <= 1000px) {
max-height: 50vh;
}
@media screen and (max-height: 800px) {
@media screen and (height <= 800px) {
max-height: 40vh;
}
border-right: 1px solid var(--primary-low);
@ -364,6 +400,7 @@
&__item:last-child {
border-bottom: none;
}
&__item {
color: var(--primary);
border-bottom: 1px solid var(--primary-low);
@ -377,6 +414,7 @@
&.inactive-theme {
color: var(--primary-high);
background: var(--primary-very-low);
&:not(.selected):hover {
color: var(--primary);
}
@ -392,14 +430,17 @@
padding-left: 0.33em;
padding-top: 1em;
}
.btn.select-inactive-mode {
padding-left: 0;
padding-top: 0;
padding-bottom: 0;
}
}
&:not(.inactive-indicator):not(.selected):hover {
&:not(.inactive-indicator, .selected):hover {
background-color: var(--primary-very-low);
.component {
border-color: var(--primary-low-mid);
}
@ -408,17 +449,21 @@
&.selected {
color: var(--secondary);
background-color: var(--tertiary);
.components-list {
color: var(--secondary);
}
}
&:not(.selected) {
.broken-indicator {
color: var(--danger);
}
.fa {
opacity: 0.7;
}
.default-indicator {
color: var(--success);
}
@ -433,6 +478,7 @@
display: flex;
align-items: center;
@include line-clamp(4);
.icons {
margin-left: auto;
}
@ -440,13 +486,16 @@
.cancel-select-inactive-mode {
margin-left: auto;
}
.btn-delete {
font-size: var(--font-down-1);
margin-left: 0.5em;
svg {
margin-right: 0.5em;
}
}
input {
margin-top: 0;
}
@ -496,6 +545,7 @@
.theme-setting {
min-height: 35px;
}
.theme-translation {
padding-bottom: 0;
margin-top: 18px;
@ -505,16 +555,19 @@
height: unset;
}
}
.setting-label {
@include breakpoint(tablet, min-width) {
width: 25%;
}
word-wrap: break-word;
h3 {
margin-top: 0;
margin-bottom: 0.5rem;
}
}
.setting {
padding-bottom: 0;
}
@ -555,6 +608,7 @@
width: 100%;
padding: 0;
margin: 0;
.wrapper {
position: absolute;
top: 20px;
@ -568,9 +622,11 @@
.current-style {
float: left;
}
.content-list ul {
margin-bottom: 10px;
}
.current-style {
width: 100%;
@ -633,9 +689,11 @@
top: 80px;
width: 100%;
}
.admin-footer {
margin-top: 10px;
}
.ace-wrapper {
height: calc(100vh - 200px);
}
@ -658,6 +716,7 @@
.status-actions {
float: right;
margin-top: 7px;
span {
margin-right: 10px;
}
@ -666,6 +725,7 @@
.buttons {
float: left;
width: 200px;
.saving {
padding: 5px 0 0 0;
margin-left: 10px;
@ -674,11 +734,13 @@
}
}
}
.color-scheme {
.controls {
display: flex;
align-items: center;
margin-bottom: 1em;
button:not(:last-child),
a {
margin-right: 10px;
@ -693,32 +755,41 @@
display: block;
}
}
.colors {
thead th {
border: none;
}
td.hex {
width: 160px;
.color-picker {
display: inline-flex;
}
}
td.actions {
width: 200px;
}
.color-picker input {
width: 80px;
margin-bottom: 0;
}
th.overridden {
text-align: right;
}
.color-input {
display: flex;
}
h3 {
margin: 0;
}
.description {
margin: 0.15em 0 0;
color: var(--primary-high);
@ -742,24 +813,29 @@
.removable-list {
list-style: none;
margin-left: 0;
li {
&.disabled-child {
.child-link {
color: var(--primary-medium);
&:hover {
text-decoration: underline;
}
}
}
.btn {
margin-left: 5px;
}
display: table-row;
.col.child-link {
padding-right: 10px;
padding-bottom: 10px;
min-width: 80px;
}
.col {
display: table-cell;
}
@ -771,10 +847,12 @@
input[type="file"] {
display: block;
margin-bottom: 0.25em;
+ label {
color: var(--primary-medium);
}
}
label {
display: inline-block;
}
@ -786,11 +864,13 @@
.public-key {
margin-top: 1em;
textarea {
cursor: auto;
min-height: 220px;
margin-bottom: 0;
}
button {
position: absolute;
top: 0;
@ -817,6 +897,7 @@
}
}
}
.admin-config-area__settings-no-results {
padding-left: 18px;
}
@ -833,38 +914,46 @@
// embedding
.embeddable-hosts {
margin-bottom: 2em;
table.grid {
margin-bottom: 1em;
.tag-chooser,
.user-chooser {
width: 100%;
}
tr td {
word-wrap: break-word;
max-width: 25vw;
align-self: start;
}
td.controls {
min-width: 6em;
}
.select-kit.combo-box.category-chooser {
width: calc(100% - 10px);
}
}
@media screen and (max-width: 880px) {
@media screen and (width <= 880px) {
table.grid {
thead {
display: none;
}
div.label {
display: block;
font-size: var(--font-down-1);
color: var(--primary-medium);
}
td.controls,
td.editing-controls {
align-self: end;
}
tr {
display: grid;
grid-template-columns: repeat(3, 1fr);
@ -872,16 +961,18 @@
}
}
@media screen and (max-width: 580px) {
@media screen and (width <= 580px) {
table.grid {
tr td.editing-input {
grid-column-start: 1;
grid-column-end: 4;
max-width: 100%;
input {
width: calc(100% - 20px);
}
}
td.editing-controls {
margin-top: 1em;
max-width: 100%;
@ -892,6 +983,7 @@
@include breakpoint(mobile-medium) {
table.grid tr {
grid-template-columns: repeat(2, 1fr);
td.controls {
text-align: left;
}
@ -906,6 +998,7 @@
color: var(--primary-medium);
}
}
svg.d-icon {
color: var(--primary-low-mid);
}
@ -916,14 +1009,17 @@
h2 {
margin-bottom: 1em;
}
.user-field {
padding-block: 0.5em;
margin-bottom: 1em;
border-bottom: 1px solid var(--primary-low);
.form-display {
width: 25%;
float: left;
}
.clearfix {
clear: both;
}
@ -948,6 +1044,7 @@
padding: 7px;
margin-bottom: 7px;
}
.robots-txt-input {
width: 100%;
box-sizing: border-box;
@ -972,6 +1069,7 @@
width: 100%;
height: calc(100vh - 480px);
min-height: 200px;
.ace_editor {
position: absolute;
left: 0;
@ -1027,6 +1125,7 @@
.footer-buttons {
display: flex;
gap: 0.5rem;
.btn-danger {
margin-left: auto;
}

3
app/assets/stylesheets/common/admin/customize_themes_show_schema.scss
View File

@ -8,9 +8,10 @@
align-items: center;
gap: 0.25em;
color: var(--tertiary);
.d-icon {
font-size: var(--font-down-1);
color: currentColor;
color: currentcolor;
}
}
}

43
app/assets/stylesheets/common/admin/dashboard.scss
View File

@ -22,7 +22,7 @@
overflow-x: auto;
// Fade-out for horizontal scroll nav
&:before {
&::before {
content: "";
position: absolute;
width: 10px;
@ -34,10 +34,11 @@
rgba(var(--secondary-rgb), 0)
);
}
&:after {
&::after {
content: "";
position: absolute;
right: 0px;
right: 0;
width: 30px;
height: 100%;
background: linear-gradient(
@ -108,7 +109,7 @@
border-bottom: 1px solid var(--primary-low);
padding-bottom: 0.5em;
@media screen and (max-width: 400px) {
@media screen and (width <= 400px) {
flex-wrap: wrap;
}
@ -196,13 +197,15 @@
}
}
@media screen and (max-width: 400px) {
@media screen and (width <= 400px) {
flex-wrap: wrap;
.storage-stats,
.last-dashboard-update {
flex: 1 1 100%;
text-align: left;
}
.last-dashboard-update {
display: block;
margin: 0 20px 20px 20px;
@ -211,13 +214,16 @@
border-left: none;
}
}
.last-dashboard-update {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
div {
align-self: center;
h4 {
margin-bottom: 0;
}
@ -274,6 +280,7 @@
display: flex;
align-items: center;
color: var(--primary-medium);
.btn {
margin-right: 1em;
}
@ -403,21 +410,27 @@
color: var(--primary-high);
}
}
&.user-basic,
&.user-member {
background: var(--bronze);
.label {
color: var(--secondary);
}
}
&.user-regular {
background: var(--silver);
.label {
color: var(--secondary);
}
}
&.user-leader {
background: var(--gold);
.label {
color: var(--secondary);
}
@ -534,7 +547,7 @@
.update-header {
flex: 1 1 100%;
@media screen and (max-width: 650px) {
@media screen and (width <= 650px) {
margin: 0;
}
@ -590,26 +603,33 @@
@include breakpoint(medium) {
max-width: unset;
}
.face {
margin: 0 0.75em 0 0;
font-size: var(--font-up-3);
}
}
&.critical .version-notes .normal-note {
display: none;
}
&.normal .version-notes .critical-note {
display: none;
}
.fa {
font-size: var(--font-up-4);
}
.up-to-date {
color: var(--success);
}
.updates-available {
color: var(--danger);
}
.critical-updates-available {
color: var(--danger);
}
@ -642,6 +662,7 @@
display: flex;
justify-content: flex-end;
align-items: center;
.btn {
margin-left: 1em;
}
@ -654,6 +675,7 @@
font-size: var(--font-up-1);
margin-bottom: 1em;
}
.admin-new-feature-item__learn-more {
display: inline-block;
}
@ -674,10 +696,12 @@
display: flex;
justify-content: space-between;
margin-bottom: 1em;
.d-toggle-switch {
margin-left: 1em;
align-items: flex-start;
}
p {
margin-top: 0;
}
@ -686,9 +710,11 @@
.admin-new-feature-item__screenshot {
margin-bottom: 1em;
}
.admin-new-feature-item__tooltip-header {
font-weight: bold;
}
.admin-new-feature-item__tooltip-content {
margin-top: 0.5em;
}
@ -697,9 +723,11 @@
display: flex;
align-items: flex-start;
border-bottom: 1px solid var(--primary-low);
&:not(:first-child) {
margin-top: var(--space-4);
}
&:last-child {
border-bottom: none;
}
@ -713,15 +741,18 @@
&__content {
width: 100%;
}
&__header {
display: flex;
align-items: baseline;
font-weight: bold;
margin-bottom: 0.5em;
}
&__screenshot {
width: 100%;
}
&__new-feature-version {
margin-left: auto;
color: var(--primary-low-mid);

19
app/assets/stylesheets/common/admin/emails.scss
View File

@ -5,29 +5,35 @@
.filters input {
width: 100%;
}
.time {
width: 50px;
}
.reply-key {
display: block;
font-size: var(--font-down-1);
color: var(--primary-medium);
}
.username div {
max-width: 180px;
@include ellipsis;
}
.addresses p {
margin: 2px 0;
max-width: 200px;
@include ellipsis;
}
.sent-email-address a {
// prevent long email addresses from breaking the layout
display: inline-block;
max-width: 300px;
overflow-wrap: break-word;
}
.email-address {
max-width: 250px;
@include ellipsis;
@ -35,6 +41,7 @@
.email-details {
text-align: right;
a {
color: var(--primary-high);
}
@ -45,19 +52,24 @@
.control-group {
margin: 8px 0;
}
.controls {
margin-left: 110px;
}
p {
margin: 5px 10px;
}
.error-description {
color: var(--primary-medium);
font-size: var(--font-down-1);
}
hr {
margin: 0;
}
label {
font-weight: bold;
float: left;
@ -65,10 +77,12 @@
text-align: right;
margin: 0 10px;
}
ul {
list-style: none;
margin: 0 10px;
}
textarea {
width: 95%;
height: 150px;
@ -87,6 +101,7 @@
.controls {
margin: 1em 0.5em;
}
.preview-output iframe {
width: 100%;
height: 600px;
@ -138,17 +153,21 @@
margin: 0;
width: unset;
}
.control-group {
textarea {
height: 200px;
}
&:last-of-type textarea {
height: 40px;
}
}
.controls {
margin: 0;
}
p {
margin: 5px 0;
}

7
app/assets/stylesheets/common/admin/json_schema_editor.scss
View File

@ -32,13 +32,14 @@
> .btn-group:last-child {
position: absolute;
right: 0px;
top: 0px;
right: 0;
top: 0;
.btn {
font-size: var(--font-down-1);
}
}
> .btn-group {
margin-top: 0;
display: flex;
@ -65,6 +66,7 @@
th {
vertical-align: middle;
padding: 0.5em 0;
&:last-child {
text-align: right;
}
@ -102,6 +104,7 @@
> .card-title {
width: 100%;
border-bottom: 1px solid var(--primary-low);
> .json-editor-btn-collapse {
float: right;
}

1
app/assets/stylesheets/common/admin/mini_profiler.scss
View File

@ -1,6 +1,5 @@
// Some basic overrides to https://github.com/MiniProfiler/rack-mini-profiler/blob/master/lib/html/includes.scss
// which make the badge conform to the current site theme.
.profiler-queries-bg {
z-index: z("header") - 2;
}

4
app/assets/stylesheets/common/admin/penalty.scss
View File

@ -83,16 +83,18 @@
th,
td {
padding: 8px 0px;
padding: 8px 0;
}
}
}
.penalty-history {
position: sticky;
bottom: 0;
background-color: var(--secondary);
padding: 0 0 1em 0;
}
.penalty-history::before {
position: absolute;
content: "";

5
app/assets/stylesheets/common/admin/plugins.scss
View File

@ -1,5 +1,4 @@
// Styles for /admin/plugins
.admin-contents.admin-plugins {
.controls {
.settings-button {
@ -82,11 +81,11 @@
.horizontal-overflow-nav {
background: transparent;
&:before {
&::before {
display: none;
}
&:after {
&::after {
display: none;
}
}

15
app/assets/stylesheets/common/admin/schema_theme_setting_editor.scss
View File

@ -26,6 +26,7 @@
ul {
padding: 0 calc(var(--schema-space) * 2) 0 var(--schema-space);
margin: 0 0 1em;
li:hover {
background: var(--primary-very-low);
}
@ -41,6 +42,7 @@
padding: var(--schema-space) calc(var(--schema-space) * 3)
var(--schema-space) calc(var(--schema-space) * 2);
gap: 0.5em;
.d-icon {
font-size: var(--font-down-3);
margin-left: auto;
@ -52,15 +54,17 @@
width: 100%;
border-bottom: 1px solid var(--primary-low);
color: var(--primary-700);
&:hover {
color: var(--primary-800);
background: var(--primary-very-low);
}
.schema-theme-setting-editor__tree-node-text {
color: currentColor;
color: currentcolor;
.d-icon {
color: currentColor;
color: currentcolor;
margin-left: 0;
margin-right: var(--schema-space);
}
@ -120,6 +124,7 @@
.d-icon {
color: var(--primary-700);
}
&:hover {
background: var(--primary-very-low);
}
@ -128,6 +133,7 @@
&.--child {
margin-left: var(--schema-space);
border-left: 1px solid var(--primary-200);
.schema-theme-setting-editor__tree-node-text {
color: var(--primary-800);
}
@ -143,15 +149,16 @@
padding: var(--schema-space);
.d-icon {
color: currentColor;
color: currentcolor;
font-size: var(--font-down-1);
}
&:hover {
background: var(--primary-very-low);
color: var(--tertiary-hover);
.d-icon {
color: currentColor;
color: currentcolor;
}
}
}

28
app/assets/stylesheets/common/admin/settings.scss
View File

@ -1,8 +1,8 @@
// styles for admin/settings
.settings {
.setting {
padding-bottom: 20px;
.setting-label {
float: left;
width: 17.6576%;
@ -12,27 +12,33 @@
margin-right: 0;
margin-left: 0;
width: 100%;
h3 {
margin-bottom: 6px;
}
}
.history-icon {
opacity: 0;
transition: opacity 0.3s;
color: var(--primary-medium);
}
&:hover .history-icon {
opacity: 1;
}
}
.setting-value {
float: left;
width: 53%;
padding-right: 20px;
input[type="checkbox"],
input[type="radio"] {
flex: 0 0 auto;
}
.category-selector {
width: 95%;
}
@ -40,24 +46,29 @@
width: 100%;
padding-right: 0;
}
.select-kit {
width: 100% !important; // Needs !important to override hard-coded value
@media (max-width: $mobile-breakpoint) {
width: 100% !important; // !important overrides hard-coded mobile width of 68px
}
}
.image-uploader {
display: flex;
}
.uploaded-image-preview {
background-size: contain;
background-repeat: no-repeat;
background-color: var(--primary-medium);
}
}
.setting-controls {
float: left;
}
.input-setting-string,
.input-setting-integer,
.input-setting-textarea {
@ -66,9 +77,11 @@
width: 100%;
}
}
.input-setting-textarea {
height: 150px;
}
.input-setting-list {
@media (max-width: $mobile-breakpoint) {
width: 100%;
@ -78,6 +91,7 @@
border: 1px solid var(--primary-low);
border-radius: 3px;
transition: border linear 0.2s, box-shadow linear 0.2s;
li.sortable-placeholder {
@include unselectable;
padding: 3px 5px 3px 18px;
@ -93,30 +107,37 @@
height: 1em;
}
}
.desc,
.validation-error {
padding-top: 3px;
font-size: var(--font-down-1);
line-height: var(--line-height-large);
}
.validation-error {
color: var(--danger);
}
.desc {
color: var(--primary-medium);
}
h3 {
font-size: var(--font-0);
font-weight: normal;
}
}
.setting.overridden {
.values input {
background-color: var(--highlight-bg);
}
h3 {
position: relative;
&:before {
&::before {
content: "";
position: absolute;
top: 0.5rem;
@ -128,6 +149,7 @@
}
}
}
.setting.overridden.string {
input[type="text"],
input[type="password"],
@ -135,9 +157,11 @@
background-color: var(--highlight-bg);
}
}
.warning {
color: var(--danger);
}
.file-types-list__button {
margin-top: 0.5em;
margin-bottom: 0.2em;

1
app/assets/stylesheets/common/admin/sidebar.scss
View File

@ -1,5 +1,6 @@
.admin-area .sidebar-wrapper .admin-panel {
background-color: var(--d-sidebar-admin-background);
.sidebar-section-header-text {
font-weight: bold;
color: var(--primary-very-high);

51
app/assets/stylesheets/common/admin/staff_logs.scss
View File

@ -1,5 +1,4 @@
// Styles for /admin/logs
.log-details-modal {
pre {
white-space: pre-wrap;
@ -10,11 +9,12 @@
.staff-actions {
width: 100%;
word-wrap: break-word;
@media screen and (min-width: 550px) and (max-width: 767px) {
@media screen and (width >= 550px) and (width <= 767px) {
table.staff-logs tr {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: repeat(4, 1fr);
td {
align-self: start;
padding: 2px 4px;
@ -24,11 +24,14 @@
td.created-at {
grid-column-start: -1;
}
td.subject {
grid-row: 2;
grid-column-start: 2;
div.subject {
display: flex;
a {
word-wrap: break-word;
min-width: 25px;
@ -53,29 +56,35 @@
@include breakpoint(mobile-extra-large) {
table.staff-logs tr {
grid-template-columns: 1fr 1fr 0.5fr;
td.staff-users {
grid-column-start: 1;
grid-column-end: 3;
}
td.created-at {
grid-row: 1;
grid-column-start: -1;
text-align: right;
}
td.action {
grid-row: 2;
grid-column-start: 1;
}
td.subject {
grid-row: 2;
grid-column-start: 2;
grid-column-end: 5;
max-width: 60vw;
}
td.details,
td.context {
max-width: unset;
}
td.details {
grid-row: 3;
grid-column-start: 1;
@ -83,6 +92,7 @@
padding: 0.25em 0;
max-width: 90vw;
}
td.context {
grid-row: 4;
grid-column-start: 1;
@ -94,24 +104,30 @@
.staff-user {
font-weight: bold;
display: flex;
a:first-of-type {
margin-right: 0.25em;
}
.deleted-user {
font-size: var(--font-up-2);
}
}
.created_at {
text-align: center;
}
td.subject,
td.details {
max-width: 10vw;
> div {
max-height: 100px;
overflow-y: auto;
}
}
td.context {
word-break: break-all;
}
@ -120,17 +136,21 @@
.staff-action-logs-controls {
display: flex;
align-items: center;
.select-kit {
margin: 0 0.5em;
}
button {
margin-left: auto;
}
margin: 0 0 1em 0;
a.filter {
.label {
font-weight: bold;
}
.d-icon {
margin-left: 0.5em;
}
@ -144,14 +164,15 @@
.screened-ip-controls {
display: flex;
flex-wrap: wrap;
.screened-ip-address-form {
.combobox {
width: 140px;
}
@media screen and (min-width: 900px) {
@media screen and (width >= 900px) {
margin-left: auto;
}
@media screen and (max-width: 899px) {
@media screen and (width <= 899px) {
margin-top: 1em;
}
}
@ -161,22 +182,24 @@ table.screened-ip-addresses {
td.ip_address {
min-width: 150px;
word-wrap: break-word;
input {
width: 80%;
}
}
td.actions {
text-align: right;
}
}
@media screen and (min-width: 550px) {
@media screen and (width >= 550px) {
table.screened-ip-addresses tr {
grid-template-columns: repeat(5, 1fr) auto;
}
}
@media screen and (max-width: 549px) {
@media screen and (width <= 549px) {
table.screened-ip-addresses tr {
td.actions {
grid-row: 3;
@ -185,16 +208,19 @@ table.screened-ip-addresses {
text-align: right;
margin-top: 0.5em;
}
td.created_at {
grid-row: 1;
grid-column-start: 3;
text-align: right;
}
td.last_match_at {
grid-row: 2;
grid-column-start: 3;
text-align: right;
}
td.match_count {
grid-row: 2;
grid-column-start: 2;
@ -229,11 +255,13 @@ table.screened-ip-addresses {
grid-column-end: 3;
word-wrap: break-word;
}
td.ip_address {
grid-row: 2;
grid-column-start: 1;
grid-column-end: -1;
}
td.action {
margin-top: 0.25em;
}
@ -241,7 +269,6 @@ table.screened-ip-addresses {
}
// Watched words
.watched-word-box {
display: inline-block;
width: 250px;
@ -279,6 +306,7 @@ table.screened-ip-addresses {
.watched-words-uploader {
display: inline-block;
label {
font-weight: normal;
}
@ -334,9 +362,11 @@ table.screened-ip-addresses {
padding-top: 4px;
vertical-align: top;
}
input.watched-word-input-field {
min-width: 300px;
}
.select-kit.multi-select.watched-word-input-field {
width: 300px;
margin-bottom: 9px;
@ -348,20 +378,20 @@ table.screened-ip-addresses {
}
// Search logs
table.search-logs-list {
td.term {
width: 60%;
word-wrap: break-word;
@media screen and (max-width: 767px) {
@media screen and (width <= 767px) {
width: 100%;
}
}
th:not(.term),
td:not(.term) {
text-align: center;
}
@media screen and (min-width: 550px) {
@media screen and (width >= 550px) {
tr {
td.term {
grid-column-start: 1;
@ -375,6 +405,7 @@ table.search-logs-list {
grid-column-start: 1;
grid-column-end: 4;
}
th:not(.term),
td:not(.term) {
text-align: left;

28
app/assets/stylesheets/common/admin/users.scss
View File

@ -1,5 +1,4 @@
//Styles for /admin/users
.display-row.associations .value {
width: 750px;
@media (max-width: $mobile-breakpoint) {
@ -14,25 +13,31 @@
display: flex;
align-items: center;
padding: 10px 5px;
&:nth-of-type(1) {
border-top: 0;
}
&.highlight-danger {
background-color: var(--danger-low);
}
border-top: 1px solid var(--primary-low);
&:before,
&:after {
&::before,
&::after {
display: table;
content: "";
}
&:after {
&::after {
clear: both;
}
&.secondary-emails ul {
margin: 0;
list-style: none;
}
.field {
font-weight: bold;
width: 17.65765%;
@ -44,12 +49,14 @@
margin-top: 5px;
}
}
.value {
width: 100%;
max-width: 350px;
min-width: 50px;
margin-left: 12px;
word-break: break-word;
.select-kit {
min-width: 100px;
}
@ -57,17 +64,21 @@
text-align: left;
margin-left: 0;
}
.select-kit {
width: inherit;
}
}
.long-value {
margin-left: 12px;
font-size: var(--font-down-1);
button {
margin-left: 10px;
}
}
.controls {
margin-left: 12px;
@media (max-width: $mobile-breakpoint) {
@ -75,10 +86,12 @@
text-align: left;
margin-left: 0;
}
.btn {
margin-right: 5px;
}
}
&.username,
&.name {
.value {
@ -91,6 +104,7 @@
input {
margin-bottom: 0;
}
.users-list {
.username .d-icon {
color: var(--primary-medium);
@ -103,8 +117,10 @@
&.username {
justify-content: start;
}
&.email {
justify-content: start;
span {
display: flex;
min-width: 17em;
@ -115,6 +131,7 @@
.directory-table {
margin-top: 1em;
&__column-header {
&--username,
&---email,
@ -145,6 +162,7 @@
@include breakpoint("tablet") {
grid-column-start: 1;
grid-column-end: -1;
span {
max-width: 100%;
}
@ -187,6 +205,7 @@
.display-row {
flex-direction: column;
align-items: flex-start;
.field,
.value {
width: 100%;
@ -201,6 +220,7 @@
word-wrap: break-word;
max-width: 100%;
margin: 0;
button {
margin: 5px 0;
display: block;

1
app/assets/stylesheets/common/base/_bookmark-list.scss
View File

@ -3,6 +3,7 @@
.texts .name {
font-weight: normal;
}
.icons {
font-size: var(--font-down-2);
margin-right: 0.75em;

28
app/assets/stylesheets/common/base/_topic-list.scss
View File

@ -1,5 +1,4 @@
// Topic list navigation & controls
.list-controls {
background: var(--d-content-background);
@ -9,10 +8,12 @@
border: 1px solid var(--primary-medium);
font-size: var(--font-0);
height: 100%;
&:focus {
border-color: var(--tertiary);
}
}
.select-kit {
.select-kit-collection {
max-height: 40vh;
@ -22,6 +23,7 @@
.navigation-container {
width: 100%;
--nav-space: 0.75em;
display: flex;
flex-wrap: wrap;
@ -34,6 +36,7 @@
list-style: none;
padding: 0;
margin: 0 0 var(--nav-space) 0;
> li {
// only target the top-level li, not dropdowns
display: flex;
@ -56,12 +59,15 @@
align-items: stretch;
margin-bottom: var(--nav-space);
gap: var(--nav-space) 0; // used if the buttons wrap
> * {
white-space: nowrap;
&:not(:last-child) {
margin-right: 0.4em;
}
}
.select-kit-header {
height: 100%;
}
@ -70,6 +76,7 @@
.d-button-label {
display: none;
}
.d-icon {
margin: 0;
}
@ -83,6 +90,7 @@
.category-heading {
max-width: 100%;
p {
margin-top: 0;
line-height: var(--line-height-large);
@ -120,16 +128,17 @@
}
// Topic list body
.topic-list-item.visited .topic-list-data,
.latest-topic-list-item.visited,
.category-topic-link.visited {
a.title:not(.badge-notification) {
color: var(--primary-medium);
}
.badge-category {
color: var(--primary-medium);
}
.discourse-tag,
.discourse-tag:visited {
color: var(--primary-medium);
@ -147,6 +156,7 @@
.topic-list-main-link {
font-size: var(--font-up-1);
a.title {
padding: 15px 0;
word-break: break-word;
@ -176,6 +186,7 @@
.texts .name {
font-weight: normal;
}
.icons {
font-size: var(--font-down-2);
margin-right: 0.75em;
@ -228,8 +239,9 @@
text-align: left;
vertical-align: middle;
}
.btn-flat .d-icon {
color: currentColor;
color: currentcolor;
}
td {
@ -250,6 +262,7 @@
.title:focus {
outline: none;
}
.title:focus-visible {
outline: none;
}
@ -259,6 +272,7 @@
&.read {
display: none;
}
.d-icon {
vertical-align: middle;
font-size: var(--font-down-5);
@ -271,13 +285,16 @@
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
.discourse-tags {
flex-wrap: wrap;
}
a.discourse-tag.box {
padding-top: 0;
padding-bottom: 0;
}
.discourse-tag.box {
margin-right: 0.25em;
}
@ -298,9 +315,11 @@
align-items: center;
height: 1.25em;
color: var(--primary-high);
.mobile-view & {
height: 1.1em;
}
.d-icon {
margin-right: 5px;
}
@ -343,6 +362,7 @@
.num.activity {
a {
padding: 15px 5px;
span.relative-date {
pointer-events: none;
}
@ -378,6 +398,7 @@
.loading .topic-list {
border: 0;
box-shadow: none;
.topic-list-item {
background-color: transparent;
}
@ -406,6 +427,7 @@
margin-bottom: 0;
font-size: var(--font-0);
}
.spinner {
margin-top: 40px;
}

5
app/assets/stylesheets/common/base/activation.scss
View File

@ -1,6 +1,5 @@
// Styles used before the user is logged into discourse. For example, activating their
// account or changing their email.
.account-created-page,
.activate-account-page {
background: var(--secondary);
@ -9,6 +8,7 @@
padding: 0;
height: 100%;
}
.above-main-container-outlet {
display: none;
}
@ -24,7 +24,7 @@
padding: 2rem 3rem;
background: var(--secondary);
margin: 10vh auto 1em auto;
@media screen and (max-height: 700px) {
@media screen and (height <= 700px) {
margin: 1em auto 1em auto;
}
}
@ -34,6 +34,7 @@
font-size: var(--font-up-1);
line-height: var(--line-height-large);
}
.activation-controls {
display: flex;
flex-wrap: wrap;

5
app/assets/stylesheets/common/base/alert.scss
View File

@ -11,6 +11,7 @@
top: 0.265em;
right: 0.66em;
padding: 0;
.d-icon {
color: var(--primary-medium);
}
@ -20,17 +21,21 @@
background-color: var(--success-low);
color: var(--primary);
}
&.alert-error {
background-color: var(--danger-low);
color: var(--primary);
}
&.alert-warning {
background-color: var(--highlight-bg);
color: var(--primary);
}
&.alert-info {
background-color: var(--tertiary-low);
color: var(--primary);
&.clickable {
color: var(--tertiary);
z-index: z("base");

4
app/assets/stylesheets/common/base/bbcode.scss
View File

@ -1,15 +1,17 @@
// Support for BBCode styles like colors and font sizes
span {
&.bbcode-b {
font-weight: bold;
}
&.bbcode-i {
font-style: italic;
}
&.bbcode-u {
text-decoration: underline;
}
&.bbcode-s {
text-decoration: line-through;
}

43
app/assets/stylesheets/common/base/category-list.scss
View File

@ -1,9 +1,11 @@
.category-list {
table-layout: fixed;
.category-text-title {
display: flex;
align-items: baseline;
}
.category-name {
display: inline-block;
max-width: 100%;
@ -11,6 +13,7 @@
vertical-align: text-top;
line-height: var(--line-height-medium);
}
&.with-topics {
.subcategories-with-subcategories {
.category-description {
@ -18,6 +21,7 @@
}
}
}
&.hidden {
display: none;
}
@ -32,9 +36,11 @@
h3 {
display: inline;
}
.category-text-title {
display: inline-flex;
}
.stat {
margin-left: 0.5em;
}
@ -66,7 +72,7 @@
.parent-box-link {
// This avoids an issue with nested links by layering links instead
&:before {
&::before {
content: "";
position: absolute;
z-index: 0;
@ -100,10 +106,8 @@
padding: 1em;
display: flex;
flex-direction: column;
border-width: 2px;
border-left-width: 0;
border-style: solid;
border-color: var(--primary-low);
}
@ -117,11 +121,13 @@
.category-boxes {
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
.category-box {
> a {
width: 100%;
padding: 0;
}
.category-box-inner {
padding: 1em;
@ -148,8 +154,10 @@
// allow clicks to fall through the description text to the category below...
pointer-events: none;
.overflow {
max-height: 6em;
div a {
// ...but links in description should still be clickable
pointer-events: auto;
@ -180,11 +188,14 @@
.category-title-link {
display: flex;
.category-logo {
flex: 1 0 auto;
margin: 0.25em 0.5em 0.5em 0;
--max-height: 40px;
}
.category-text-title {
order: 2;
line-height: var(--line-height-medium);
@ -192,7 +203,8 @@
margin-bottom: 0.25em;
word-wrap: break-word;
}
&:before {
&::before {
// This avoids an issue with nested links by layering links instead
content: "";
position: absolute;
@ -222,25 +234,31 @@
.subcategories {
display: flex;
flex-flow: wrap;
.subcategory {
display: flex;
align-items: center;
@include ellipsis;
margin-bottom: 0.6em;
.badge-category__wrapper {
overflow: hidden;
}
.subcategory-image-placeholder {
display: inline-block;
margin-right: 0.6em;
flex: 1 0 auto;
}
.subcategory-link {
min-width: 0;
@include ellipsis;
}
.category-logo img {
display: inline-block;
--height: 20px;
height: var(--height);
width: calc(var(--height) * var(--aspect-ratio));
@ -252,6 +270,7 @@
.category-boxes-with-topics {
grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
.category-box {
padding: 0;
}
@ -264,6 +283,7 @@
.category-box-heading {
margin-bottom: 0.5em;
a[href] {
width: 100%;
color: var(--primary);
@ -272,22 +292,27 @@
.featured-topics {
margin-bottom: 1em;
// we absolutely position the parent category's link so the whole box is clickable
// to prevent this covering topic links, we need to raise the z-index
z-index: 1;
ul {
color: var(--primary-medium);
list-style: none;
padding: 0;
margin: 0;
}
li {
padding: 4px 0;
display: flex;
align-items: baseline;
a {
@include line-clamp(2);
}
.d-icon {
margin-right: 0.15em;
width: 0.76em;
@ -301,6 +326,7 @@
h3,
h4 {
margin-bottom: 0;
.d-icon {
color: var(--primary-high);
height: 0.76em;
@ -309,11 +335,13 @@
margin-right: 0.1em;
}
}
.category-description {
margin-top: 0.5em;
overflow: hidden;
color: var(--primary-high);
}
.category-logo.aspect-image {
margin-top: 0.5em;
}
@ -330,9 +358,11 @@
margin-top: 1em;
margin-bottom: 0;
border-top: 1px solid var(--primary-low);
.category-description {
font-size: var(--font-down-1);
}
.category-logo.aspect-image {
--max-height: 75px;
}
@ -344,6 +374,7 @@
color: var(--primary-medium);
font-size: var(--font-down-1);
}
> .category-description,
tr.category-description {
display: none;
@ -355,8 +386,8 @@
.category {
&.no-category-style {
border-color: transparent;
border-left: 0px;
padding-left: 0px;
border-left: 0;
padding-left: 0;
}
}
}

3
app/assets/stylesheets/common/base/colorpicker.scss
View File

@ -1,5 +1,4 @@
// styles for the category badge color picker
.category-color-editor {
input {
width: 5.5em;
@ -29,9 +28,11 @@
padding: 0;
flex: 0 0 auto;
color: white;
svg {
display: none;
}
&.used-color svg {
display: inline-flex;
opacity: 0.8;

35
app/assets/stylesheets/common/base/compose.scss
View File

@ -29,13 +29,14 @@ html.composer-open {
.submit-panel .mobile-preview {
display: none;
}
.d-editor-preview-wrapper {
display: none;
flex: 0;
}
}
@media screen and (max-width: 1200px) {
@media screen and (width <= 1200px) {
min-width: 0;
}
z-index: z("composer", "content");
@ -59,6 +60,7 @@ html.composer-open {
border-color: var(--secondary);
border-right-color: transparent;
}
.d-icon {
color: var(--secondary);
}
@ -100,10 +102,12 @@ html.composer-open {
&.draft {
cursor: pointer;
display: flex;
.draft-text {
display: block;
@include ellipsis;
}
.grippie,
.saving-text {
display: none;
@ -132,6 +136,7 @@ html.composer-open {
color: var(--primary-medium);
}
}
.composer-action-title {
display: flex;
align-items: center;
@ -157,7 +162,7 @@ html.composer-open {
margin-right: 5px;
max-width: 100px;
@include ellipsis;
@media screen and (max-width: 500px) {
@media screen and (width <= 500px) {
display: none;
}
}
@ -193,9 +198,11 @@ html.composer-open {
.display-edit-reason {
display: inline-flex;
a {
display: inline-flex;
}
.d-icon {
padding: 0.3em 0.5em;
color: var(--tertiary);
@ -274,13 +281,16 @@ html.composer-open {
.selected-name {
max-width: 100%;
overflow: hidden;
.name {
display: flex;
max-width: 100%;
gap: 0 0.5em;
.badge-category {
overflow: hidden;
}
// This prevents the first category from being too-truncated at the expense of a long subcategory
> span:last-of-type:not(:first-of-type) {
flex-shrink: 10;
@ -333,11 +343,13 @@ html.composer-open {
.tags-input {
position: relative;
margin: 0 0 8px 0px;
margin: 0 0 8px 0;
flex-grow: 1;
.mini-tag-chooser {
z-index: z("composer", "dropdown");
width: 100%;
.select-kit-header {
color: var(--primary-high);
}
@ -399,10 +411,12 @@ html.composer-open {
display: flex;
align-items: center;
margin-right: auto;
a {
margin-left: 0.33em;
color: var(--primary-high);
}
.spinner {
margin-right: 0.33em;
}
@ -410,11 +424,13 @@ html.composer-open {
#draft-status {
margin-left: auto;
.d-icon-user-pen {
color: var(--danger);
font-size: 20px;
vertical-align: -5.5px;
}
+ .btn-mini-toggle {
margin-left: 0;
}
@ -452,10 +468,12 @@ html.composer-open {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
&:last-of-type a {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
a {
@include ellipsis;
align-items: center;
@ -518,6 +536,7 @@ html.composer-open {
li a {
padding: 0.5em 1em;
}
.emoji {
height: 0.75em;
width: 0.75em;
@ -528,6 +547,7 @@ html.composer-open {
li:last-of-type a {
color: var(--primary-high);
}
.emoji {
margin-right: 0.25em;
}
@ -538,6 +558,7 @@ div.ac-wrap.disabled {
input {
display: none;
}
.item a {
display: none;
}
@ -552,6 +573,7 @@ div.ac-wrap div.item a.remove,
border-radius: 12px;
box-sizing: border-box;
border: 1px solid var(--primary-low);
&:hover {
background-color: var(--danger-low);
border: 1px solid var(--danger-medium);
@ -567,10 +589,12 @@ div.ac-wrap {
align-items: center;
min-height: 30px;
box-sizing: border-box;
div.item {
float: left;
padding: 4px 10px;
line-height: var(--line-height-large);
span {
display: inline-block;
line-height: var(--line-height-medium);
@ -587,6 +611,7 @@ div.ac-wrap {
input[type="text"] {
float: left;
&.fullwidth-input {
width: 100%;
}
@ -596,6 +621,7 @@ div.ac-wrap {
.md-table {
overflow-y: auto;
margin: 1em 0;
.mobile-view & {
table {
width: 100%;
@ -624,6 +650,7 @@ div.ac-wrap {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
@ -641,7 +668,7 @@ div.ac-wrap {
// this might be overkill
// but on iPad with a physical keyboard the composer is shifted up on scroll
// this adds a solid box shadow below, looks cleaner
box-shadow: 0 150px 0px 0px var(--secondary);
box-shadow: 0 150px 0 0 var(--secondary);
&.open {
z-index: z("mobile-composer");

1
app/assets/stylesheets/common/base/composer-user-selector.scss
View File

@ -2,6 +2,7 @@ div.ac-wrap.composer-user-selector-limited {
width: 400px;
padding: 0 10px;
margin-bottom: 5px;
.btn-primary {
margin-left: 0.5em;
padding: 3px 6px 2px;

57
app/assets/stylesheets/common/base/crawler_layout.scss
View File

@ -1,10 +1,10 @@
// IMPORTANT: This stylesheet needs to work for super old browsers, including those
// without support for `var()`. Therefore every color definition needs to define a simple
// value first, as a fallback
body.crawler,
body > noscript {
font-family: serif;
h1,
h2,
h3,
@ -13,11 +13,13 @@ body > noscript {
h6 {
font-family: serif;
}
&.browser-update {
header {
height: 50px;
margin-bottom: 1em;
}
.buorg {
position: absolute;
top: 50px;
@ -29,33 +31,32 @@ body > noscript {
font-size: 14px;
margin-bottom: 10px;
}
#topic-title {
margin-top: 2em;
}
}
&:after,
&:before {
&::after,
&::before {
// common way to show fixed background images
display: none;
}
a {
// we want all links to look like links
color: blue !important;
color: var(--tertiary) !important;
text-decoration: underline !important;
}
> header {
// site header
box-sizing: border-box;
width: 100%;
top: 0;
background-color: #fff;
background-color: var(--header_background);
padding: 10px;
box-shadow: none;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--header_primary-medium);
}
@ -64,11 +65,12 @@ body > noscript {
}
// topic list
div#main-outlet {
padding: 10px;
div.post {
word-break: break-word;
img {
max-width: 100%;
height: auto;
@ -82,27 +84,32 @@ body > noscript {
margin: 2em 0;
thead {
border-bottom: 1px solid #ddd;
border-bottom: 1px solid var(--primary_low);
th {
padding: 0 0 0.5em;
}
th:nth-child(2) {
display: none;
}
th:first-of-type {
width: 60%;
padding-left: 0;
}
th:last-of-type,
th.replies,
th.views {
text-align: center;
}
th:last-of-type,
th.replies {
width: 20%;
}
th.posters {
display: none;
}
@ -111,31 +118,38 @@ body > noscript {
td {
padding: 10px 0;
}
td.posters {
display: none;
}
td:last-of-type,
td.replies,
td.views {
text-align: center;
}
td:first-of-type {
width: 60%;
}
td:last-of-type,
td.replies {
width: 20%;
}
@media (max-width: 850px) {
@media (width <= 850px) {
table-layout: auto;
margin: 0;
td {
word-break: break-word;
&.posters {
a:not(:last-of-type) {
display: none;
}
a:last-of-type {
display: block;
}
@ -161,14 +175,16 @@ body > noscript {
}
.topic-list-item {
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--primary-low);
> * {
padding: 0.75em 0;
}
td.main-link {
padding-right: 1em;
}
p.excerpt {
font-size: var(--font-down-1);
}
@ -190,17 +206,18 @@ body > noscript {
}
// topics
div#main-outlet {
div.post {
word-break: break-word;
overflow: auto;
max-width: 100%;
img {
max-width: 100%;
height: auto;
}
}
.topic-body {
float: unset;
}
@ -210,14 +227,15 @@ body > noscript {
margin-top: 1em;
margin-bottom: 2em;
padding-top: 1.5em;
border-top: 1px solid #eee;
border-top: 1px solid var(--primary-low);
}
.crawler-post-meta {
margin-bottom: 1em;
.creator {
word-break: break-all;
a {
font-weight: bold;
}
@ -234,6 +252,7 @@ body > noscript {
@include breakpoint(tablet, min-width) {
float: right;
}
[itemprop="position"] {
float: left;
margin-right: 0.5em;
@ -242,10 +261,10 @@ body > noscript {
.crawler-linkback-list {
margin-top: 1em;
a {
display: block;
padding: 0.5em 0;
border-top: 1px solid #ddd;
border-top: 1px solid var(--primary-low);
}
}
@ -260,6 +279,7 @@ body > noscript {
> * {
display: block;
}
h1 {
margin-bottom: 0.25em;
}
@ -274,34 +294,33 @@ body > noscript {
code,
blockquote,
aside.quote .title {
background: #eee;
background: var(--primary-low);
}
.md-table {
tr {
border: 1px solid #ddd;
border: 1px solid var(--primary-low);
}
th {
font-weight: bold;
}
td,
th {
padding: 0.25em;
border-right: 1px solid #ddd;
border-right: 1px solid var(--primary-low);
}
}
// footer
footer {
margin-top: 2em;
}
.noscript-footer-nav {
margin-top: 4em;
a {
margin-right: 0.25em;
white-space: nowrap;
@ -315,13 +334,16 @@ body > noscript {
.crawler-nav {
margin: 1em 0;
ul {
margin: 0;
list-style-type: none;
}
li {
display: inline-block;
}
a {
display: inline-block;
padding: 0.5em 1em 0.5em 0;
@ -332,6 +354,7 @@ body > noscript {
.buorg div {
padding: 8px;
}
.buorg a,
.buorg a:visited {
color: #e25600;

12
app/assets/stylesheets/common/base/d-image-grid.scss
View File

@ -18,12 +18,14 @@
.d-image-grid-column {
box-sizing: border-box;
// use flex layout, flex-grow and object-fit: cover
// to better have the images fill their containers
// and line up vertically (it's not perfect!)
display: flex;
flex-direction: column;
justify-content: flex-start;
.button-wrapper {
bottom: 0;
min-width: unset;
@ -33,11 +35,12 @@
> span {
flex-grow: 1;
overflow: hidden;
// hardcoded max-height here prevents extra tall images
// from having an outsized effect on the grid
max-height: 1200px;
img:not(.thumbnail):not(.ytp-thumbnail-image):not(.emoji) {
img:not(.thumbnail, .ytp-thumbnail-image, .emoji) {
height: 100%;
object-fit: cover;
}
@ -63,9 +66,11 @@
.meta .informations {
display: none;
}
.meta .filename {
flex-grow: 3;
}
// full-height lightbox element in container
> .lightbox {
height: 100%;
@ -76,14 +81,15 @@
.image-wrapper {
display: block;
margin-bottom: $grid-column-gap;
padding-bottom: 0em;
padding-bottom: 0;
}
}
.d-editor-preview & {
.image-wrapper {
margin-bottom: $grid-column-gap;
padding-bottom: 0em;
padding-bottom: 0;
.button-wrapper {
.scale-btn-container,
&[editing] .wrap-image-grid-button {

4
app/assets/stylesheets/common/base/dialog.scss
View File

@ -16,6 +16,7 @@
* Ensures the dialog container and all its descendants are not
* visible and not focusable when it is hidden.
*/
.dialog-container[aria-hidden="true"] {
display: none;
}
@ -69,6 +70,7 @@
margin-left: auto;
flex-basis: content;
padding-left: 15px;
.d-icon {
color: var(--primary-high);
}
@ -81,7 +83,9 @@
align-items: center;
padding: 14px 15px 10px;
border-top: 1px solid var(--primary-low);
--btn-bottom-margin: 0.3em;
.btn {
margin: 0 0.75em var(--btn-bottom-margin) 0;
}

22
app/assets/stylesheets/common/base/directory.scss
View File

@ -5,10 +5,9 @@
.directory {
.directory-value-list-item:not(:empty)
~ .directory-value-list-item:not(:empty):before {
~ .directory-value-list-item:not(:empty)::before {
content: "| ";
}
margin-bottom: 100px;
background: var(--d-content-background);
@ -29,6 +28,7 @@
.directory-controls {
display: flex;
justify-content: space-between;
.total-rows {
color: var(--primary-medium);
font-weight: normal;
@ -55,6 +55,7 @@
align-items: center;
margin-bottom: 0;
}
.d-icon-heart {
color: var(--love);
margin: 0 0.25em 0 0;
@ -75,6 +76,7 @@
}
}
}
.d-modal__footer {
justify-content: space-between;
}
@ -86,6 +88,7 @@
&__value {
white-space: nowrap;
font-size: var(--font-up-2);
&,
&--user-field {
color: var(--primary-medium);
@ -98,7 +101,8 @@
.directory-table-container {
container-type: inline-size;
container-name: directory-table;
transform: translateX(0px);
transform: translateX(0);
// transform here creates a containing blocks which
// is used by fixed-positioned dropdowns
// if omitted, `overflow-x: auto;` below will clip them
@ -150,6 +154,7 @@
white-space: nowrap;
color: var(--primary-medium);
padding: 0.5em;
.d-icon {
margin-right: 0.25em;
}
@ -170,6 +175,7 @@
&__value {
white-space: nowrap;
&--user-field {
max-width: 30em;
}
@ -194,6 +200,7 @@
display: flex;
min-width: 0;
width: 100%;
.user-detail {
padding: 0;
width: 100%;
@ -205,6 +212,7 @@
font-size: var(--font-down-1);
}
}
.title {
margin: 0;
}
@ -247,11 +255,12 @@
}
// flexible divider between the label and value
&:after {
&::after {
flex: 1 1 0; // can grow or shrink, but should be 0 width if needed
color: var(--primary-300);
min-width: 0;
overflow: hidden;
// this needs to be long to account for all possible widths
content: "................................................................................................................................................................";
}
@ -266,6 +275,7 @@
font-size: var(--font-0);
color: var(--primary);
align-self: start;
&--user-field {
overflow: hidden;
text-overflow: ellipsis;
@ -293,10 +303,12 @@
&--user-field {
padding: 0.25em;
border: none;
&:first-child {
width: 100%;
padding: 0.5em 0.25em 1em;
justify-content: start;
// force full width of the cell
grid-column-start: 1;
grid-column-end: -1;
@ -306,10 +318,12 @@
&--user-field {
display: flex;
order: 2;
// force full width of the cell
// because we don't know how much content there is
grid-column-start: 1;
grid-column-end: -1;
.directory-table__label {
margin-right: 0.25em;
}

34
app/assets/stylesheets/common/base/discourse.scss
View File

@ -2,7 +2,6 @@
// global styles that apply to the Discourse application specifically
// BEWARE: changing these styles implies they take effect anywhere they are seen
// throughout the Discourse application
:root {
--d-input-bg-color: var(--secondary);
--d-input-text-color: var(--primary);
@ -26,6 +25,7 @@
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
@ -35,6 +35,7 @@
0% {
background-color: var(--tertiary-low);
}
100% {
background-color: transparent;
}
@ -45,6 +46,7 @@
0% {
background-position: -1000px 0;
}
100% {
background-position: 1100px 0;
}
@ -57,7 +59,6 @@
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: var(--primary-very-low);
background: linear-gradient(
to right,
var(--primary-very-low) 10%,
@ -85,6 +86,7 @@ body {
big {
font-size: var(--font-up-5);
}
small {
font-size: var(--font-down-2);
}
@ -110,6 +112,7 @@ a.cancel {
line-height: normal;
color: var(--primary-high);
transition: var(--d-button-transition);
&:hover {
color: var(--danger);
}
@ -149,10 +152,12 @@ label {
&:not(.checkbox-label) {
font-weight: bold;
}
> .d-icon {
align-self: center;
margin-right: 4px;
}
a {
// flex removes whitespace characters between text nodes and elements
// so we need to add it back
@ -170,6 +175,7 @@ input {
cursor: pointer;
flex-shrink: 0; // Adding for safety, Safari will shrink checkboxes
}
&[type="submit"],
&[type="reset"],
&[type="button"],
@ -213,6 +219,7 @@ input {
border: var(--d-input-border);
border-radius: var(--d-input-border-radius);
color-scheme: var(--scheme-type);
&:focus {
@include default-focus;
}
@ -226,7 +233,6 @@ input {
input[type="search"] {
&::-webkit-search-cancel-button,
&::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
}
@ -280,7 +286,7 @@ input,
select,
textarea {
color: var(--d-input-text-color);
caret-color: currentColor;
caret-color: currentcolor;
&[disabled],
&[readonly] {
@ -298,15 +304,16 @@ textarea {
}
// Common Classes
.sortable {
white-space: nowrap;
.discourse-no-touch & {
&:hover,
&:focus {
background-color: var(--primary-low);
}
}
.d-icon {
margin-left: 0.25em;
}
@ -351,6 +358,7 @@ textarea {
margin-right: auto;
margin-left: auto;
padding: 0 var(--d-wrap-padding-h);
.contents {
position: relative;
}
@ -372,9 +380,11 @@ textarea {
.tip {
display: inline-block;
&.good {
color: var(--success);
}
&.bad {
color: var(--danger);
}
@ -409,7 +419,7 @@ textarea {
background-color: var(--secondary);
border-radius: 50%;
height: 1em;
box-shadow: 0px 0px 0px 2px var(--secondary);
box-shadow: 0 0 0 2px var(--secondary);
.d-icon.d-icon-discourse-dnd {
color: var(--header_primary-medium) !important;
@ -522,7 +532,6 @@ textarea {
.spinner {
margin: 20px auto 20px auto;
position: relative;
-webkit-animation: rotate-forever 1s infinite linear;
animation: rotate-forever 1s infinite linear;
height: 30px;
width: 30px;
@ -597,6 +606,7 @@ textarea {
.control-group,
.controls {
margin-left: 0;
label {
font-weight: normal;
}
@ -604,7 +614,6 @@ textarea {
}
// Special elements
#main-outlet-wrapper {
box-sizing: border-box;
width: 100%;
@ -667,8 +676,10 @@ textarea {
#footer {
.container {
height: 50px;
.contents {
padding-top: 10px;
a[href] {
color: var(--secondary);
}
@ -750,8 +761,10 @@ textarea {
grid-area: dropdown;
align-self: center;
justify-self: end;
summary {
background: transparent;
.d-icon {
color: var(--primary-high);
}
@ -766,11 +779,13 @@ textarea {
.topic-statuses {
// avoid adding margin/padding on this parent; sometimes it appears as an empty container
float: left;
.topic-status {
margin: 0;
display: inline-flex;
color: var(--primary-medium);
margin-right: 0.2em;
.d-icon {
height: 0.74em;
width: 0.75em;
@ -832,8 +847,9 @@ a#skip-link {
background: var(--tertiary);
transition: top 0.3s ease-out;
z-index: z("header") + 1;
&:focus {
top: 0px;
top: 0;
transition: top 0.15s ease-in;
}
}

18
app/assets/stylesheets/common/base/edit-category.scss
View File

@ -27,6 +27,7 @@ div.edit-category {
.edit-category-nav {
grid-area: sidebar;
grid-row: 2 / span 3;
.nav-stacked {
background-color: var(--secondary);
}
@ -75,6 +76,7 @@ div.edit-category {
margin-top: 10px;
padding: 5px 10px;
position: relative;
.arrow-div {
border: solid transparent;
content: " ";
@ -90,18 +92,22 @@ div.edit-category {
list-style: none;
margin: 0 0 30px;
padding: 0;
.name {
margin-right: 20px;
display: inline-block;
min-width: 100px;
}
.permission {
margin-left: 20px;
}
.d-icon-circle-xmark {
margin-left: 5px;
color: var(--danger);
}
li {
margin-bottom: 10px;
}
@ -122,6 +128,7 @@ div.edit-category {
label {
max-width: $category-settings-width;
}
input[type="number"] {
width: $number-input-width;
}
@ -178,7 +185,6 @@ div.edit-category {
input[type="number"] {
width: 4em;
}
margin-bottom: 1em;
}
}
@ -198,35 +204,42 @@ div.edit-category {
.permission-row {
border-bottom: 1px solid var(--primary-low);
display: flex;
&.row-header {
font-weight: bold;
border-bottom: 2px solid var(--primary-low);
}
.group-name,
.options {
display: flex;
box-sizing: border-box;
text-align: center;
width: 50%;
margin: 0px;
margin: 0;
align-items: center;
}
.group-name {
text-align: left;
padding: 0.5em;
padding-left: 0;
.group-name-label {
@include ellipsis;
}
}
.cell,
.btn-flat {
width: 33%;
padding: 0.5em;
}
.btn-flat:hover {
background-color: transparent;
}
.btn-flat .d-icon-square-check,
.btn-flat:hover .d-icon-square-check {
color: var(--success);
@ -256,6 +269,7 @@ div.edit-category {
.add-group {
margin: 1em 0;
.group-name {
width: 100%;
}

6
app/assets/stylesheets/common/base/edit-topic-timer-modal.scss
View File

@ -2,26 +2,32 @@
.select-kit.combo-box {
width: 100%;
}
.radios {
margin-bottom: 10px;
}
label {
display: inline-flex;
padding-right: 5px;
align-items: center;
input {
margin-top: 0;
}
}
.topic-timer-duration {
width: 100%;
}
.pika-single {
position: absolute !important; /* inline JS styles */
}
.modal-topic-timer-info {
margin-top: 1rem;
.topic-timer-info {
border-top: 0;
}

5
app/assets/stylesheets/common/base/exception.scss
View File

@ -5,19 +5,24 @@
.face {
font-size: 4.286em;
}
.reason {
font-size: var(--font-up-4);
}
.url {
font-style: italic;
font-size: var(--font-down-1);
}
.desc {
margin-top: 16px;
.d-icon-circle-check {
color: var(--success);
}
}
.buttons {
align-items: center;
display: inline-flex;

5
app/assets/stylesheets/common/base/explain-reviewable.scss
View File

@ -4,18 +4,23 @@
.thresholds {
margin-top: 1em;
}
table {
width: 100%;
}
table td {
padding: 0.5em;
}
td.sum {
text-align: right;
}
td.sum.total {
font-weight: bold;
}
tr.total {
td {
background-color: var(--primary-low);

19
app/assets/stylesheets/common/base/faqs.scss
View File

@ -2,28 +2,40 @@
/* covers /about, /faq, /guidelines, /tos, /privacy, and login-required */
max-width: 700px;
background: var(--d-content-background);
.about-page & {
max-width: unset;
section:not(.admins):not(.moderators):not(.category-moderators):not(
.about__admins
):not(.about__moderators):not(.about__header) {
section:not(
.admins,
.moderators,
.category-moderators,
.about__admins,
.about__moderators,
.about__header
) {
max-width: 700px;
}
.about.category-moderators {
.badge-category__wrapper .badge-category {
color: var(--primary);
}
}
}
.mobile-view & {
font-size: var(--font-0);
}
li {
margin-bottom: 8px;
}
.nav-pills {
margin: 0 0 2em;
}
ul:not(.nav-pills),
ol:not(.nav-pills) {
margin-left: 40px;
@ -32,6 +44,7 @@
.body-page-button-container {
display: flex;
button {
margin-right: 0.75em;
}

9
app/assets/stylesheets/common/base/group.scss
View File

@ -98,6 +98,7 @@
.group-details-button {
display: flex;
flex-wrap: wrap;
button:not(:last-child) {
margin-right: 0.5em;
}
@ -148,9 +149,11 @@ table.group-manage-logs {
grid-column-start: 1;
grid-column-end: -1;
}
.member-settings {
margin-left: auto;
}
.user-info {
padding-right: 3.5em;
}
@ -277,11 +280,11 @@ table.group-category-permissions {
li {
display: inline-block;
&:before {
&::before {
content: "|";
}
&:first-child:before {
&:first-child::before {
content: "";
}
}
@ -313,6 +316,6 @@ table.group-category-permissions {
}
.groups-form .control-group.buttons {
margin-bottom: 0px;
margin-bottom: 0;
padding: 1em 0;
}

6
app/assets/stylesheets/common/base/groups.scss
View File

@ -4,6 +4,7 @@
display: flex;
flex-wrap: wrap;
margin-bottom: 1em;
.groups-header-new {
order: 2;
margin-bottom: 0.5em;
@ -99,12 +100,14 @@
display: flex;
align-items: center;
color: var(--primary-high);
.d-icon {
margin-right: 0.25em;
font-size: 0.8em;
color: var(--primary-medium);
}
}
.group-description {
color: var(--primary-high);
word-wrap: break-word;
@ -134,6 +137,7 @@
}
}
}
.avatar-flair-image {
width: $size;
}
@ -144,8 +148,10 @@
.control-group-inline {
display: inline;
}
&.groups-notifications-form {
max-width: 33em;
.control-instructions {
color: var(--primary-medium);
margin-bottom: 10px;

48
app/assets/stylesheets/common/base/header.scss
View File

@ -29,6 +29,7 @@
.logo-wrapper {
float: left;
}
.auth-buttons {
float: right;
margin-top: 0.4em;
@ -51,10 +52,12 @@
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
// min-width acts as a placeholder if the small logo takes a while to load
// it prevents topic title from shifting after the small logo loads
// it's set to match the #site-logo height so square small logos don't resize when titles dock
min-width: var(--d-logo-height);
a,
a:visited {
min-width: 0;
@ -116,6 +119,7 @@
.login-button,
.sign-up-button {
padding: 6px 10px;
.fa {
margin-right: 3px;
}
@ -155,25 +159,30 @@
cursor: pointer;
border: 1px solid transparent;
outline: none;
img.avatar {
width: 2.1333em;
height: 2.1333em;
}
.discourse-no-touch &:hover,
.discourse-no-touch &:focus {
background-color: var(--primary-low);
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
> .d-icon {
color: var(--primary-medium);
}
}
&:active {
color: var(--primary);
background-color: var(--primary-low);
}
}
.drop-down-mode & {
.active .icon {
position: relative;
@ -182,10 +191,12 @@
border-top: 1px solid var(--primary-low);
border-left: 1px solid var(--primary-low);
border-right: 1px solid var(--primary-low);
> .d-icon {
color: var(--primary-medium);
}
&:after {
&::after {
display: block;
position: absolute;
top: 100%;
@ -196,6 +207,7 @@
content: "";
border-top: 1px solid var(--secondary);
}
&:hover {
border-bottom: none;
}
@ -213,14 +225,15 @@
.notifications {
position: relative;
}
.header-dropdown-toggle {
position: relative;
}
.badge-notification {
border: 2px solid var(--header_background);
position: absolute;
z-index: z("base");
left: 0;
top: -4px;
min-width: 0.6em;
left: auto;
@ -230,9 +243,11 @@
&.new-pms {
background-color: var(--success);
}
&.new-reviewables {
background-color: var(--danger);
}
.d-icon {
color: var(--secondary);
font-size: var(--font-down-1);
@ -240,9 +255,11 @@
}
}
}
.unread-notifications {
background-color: var(--tertiary-med-or-tertiary);
}
.unread-high-priority-notifications {
left: auto;
right: 25px;
@ -258,12 +275,14 @@
width: 2.2857em;
height: 2.2857em;
padding: 0.2143em;
&:focus,
.discourse-no-touch & {
&:hover {
background-color: var(--primary-low);
}
}
.d-icon {
width: 100%;
font-size: var(--font-up-4);
@ -282,8 +301,10 @@
height: 100%;
line-height: var(--line-height-medium);
padding: 0 1.5em 0 0.5em;
// we need to hide overflow in both to truncate the title in a flexbox
overflow: hidden;
.extra-info {
overflow: hidden;
width: 100%;
@ -292,6 +313,7 @@
animation-duration: 0s;
}
}
.title-wrapper {
display: grid;
grid-template-areas:
@ -300,67 +322,83 @@
grid-template-columns: auto minmax(2em, 1fr); // min must be as wide as ellipsis
align-items: baseline;
gap: 0 0.5em;
.header-title {
grid-area: title;
}
.categories-wrapper {
grid-area: categories;
}
.topic-header-extra {
grid-area: extra;
.archetype-private_message & {
grid-area: categories;
}
}
}
.topic-link {
color: var(--header_primary);
display: block;
@include ellipsis;
}
.topic-statuses {
.d-icon {
color: var(--header_primary-medium);
}
.d-icon-envelope {
color: var(--danger);
}
}
.header-title {
padding: 0;
margin: 0;
font-size: var(--font-up-3);
width: 100%;
}
.categories-wrapper {
display: inline-flex;
flex: 0 1 auto;
gap: 0 0.5em;
@include ellipsis;
}
.badge-category__wrapper {
min-width: 2.75em; // min needed for ellipsis
@include ellipsis;
.badge-category {
color: var(--header_primary-high);
}
}
.topic-header-extra {
display: inline-flex;
align-items: center;
max-width: 100%;
gap: 0.5em;
.discourse-tags {
display: inline;
color: var(--header_primary-high);
@include ellipsis;
.discourse-tag {
display: inline; // tags need to stay inline in order for them to truncate
vertical-align: unset;
}
}
.topic-featured-link {
align-self: baseline;
.d-icon {
font-size: var(--font-down-2);
}
@ -378,9 +416,11 @@ $mobile-avatar-height: 1.532em;
align-items: center;
font-size: var(--font-down-1);
@include ellipsis;
&:not(:first-child) {
margin-left: 5px;
}
.trigger-user-card,
.trigger-group-card {
&:not(:last-of-type) {
@ -391,10 +431,12 @@ $mobile-avatar-height: 1.532em;
.trigger-user-card {
.icon {
height: $avatar-height;
.mobile-view & {
height: $mobile-avatar-height;
}
display: inline-block;
img {
height: 100%;
width: auto;
@ -413,6 +455,7 @@ $mobile-avatar-height: 1.532em;
display: flex;
align-items: center;
height: $avatar-height;
.mobile-view & {
height: $mobile-avatar-height;
}
@ -455,6 +498,7 @@ $mobile-avatar-height: 1.532em;
#additional-panel-wrapper {
position: absolute;
// positions are relative to the .d-header .panel div
top: 100%; // directly underneath .panel
right: -10px; // 10px to the right of .panel - adjust as needed

28
app/assets/stylesheets/common/base/history.scss
View File

@ -1,5 +1,4 @@
// styles that apply to the popup that appears when you show the edit history of a post
.modal.history-modal {
.d-modal__footer {
justify-content: space-between;
@ -44,12 +43,15 @@
@include breakpoint(tablet) {
width: 100%;
margin-top: 0.5em;
.nav-pills {
width: 100%;
li {
margin: 0;
flex: 1 1 auto;
}
a {
width: 100%;
justify-content: center;
@ -77,6 +79,7 @@
.-tag-revisions {
display: block;
}
.discourse-tags {
display: inline;
font-size: var(--font-down-1);
@ -122,11 +125,13 @@
width: 100%;
border-collapse: collapse;
border-spacing: 0;
td {
word-wrap: anywhere;
white-space: pre-wrap;
flex: 0 1 50%;
}
tbody {
border: none;
}
@ -153,8 +158,10 @@
#revisions {
word-wrap: break-word;
table {
margin-top: 10px;
tr {
border: none;
}
@ -163,6 +170,7 @@
.row:first-of-type {
margin-top: 10px;
}
.revision-content table {
thead {
th {
@ -174,6 +182,7 @@
td {
padding: 3px 3px 3px 0.5em;
img {
max-width: none;
}
@ -184,10 +193,12 @@
#revision-footer-buttons {
display: flex;
gap: 0.5em;
button {
margin: 0;
flex: 1 1 auto;
min-width: 0;
.d-button-label {
@include ellipsis;
}
@ -195,6 +206,7 @@
@include breakpoint(tablet) {
width: 100%;
flex: 1 1 100%;
button {
font-size: var(--font-down-1);
}
@ -212,13 +224,16 @@
del,
.diff-del {
color: var(--primary);
&:not(s, .bbcode-u, .bbcode-s) {
text-decoration: none;
}
code,
img {
border: 2px solid;
}
a {
text-decoration: none;
}
@ -227,14 +242,17 @@
ins,
.diff-ins {
background: var(--success-low);
code,
img {
border-color: var(--success);
}
img {
opacity: 0.75;
filter: alpha(opacity=75);
}
a {
color: var(--success);
}
@ -243,14 +261,17 @@
del,
.diff-del {
background: var(--danger-low);
code,
img {
border-color: var(--danger);
}
img {
opacity: 0.5;
filter: alpha(opacity=50);
}
a {
color: var(--danger);
}
@ -259,21 +280,26 @@
span.date {
font-weight: bold;
}
span.edit-reason {
background-color: var(--highlight-bg);
}
.d-icon-ban {
color: var(--danger);
}
.hidden-revision-either {
opacity: 0.5;
}
.hidden-revision-previous .row {
div:nth-of-type(1),
td:nth-of-type(1) {
opacity: 0.5;
}
}
.hidden-revision-current .row {
div:nth-of-type(2),
td:nth-of-type(2) {

15
app/assets/stylesheets/common/base/json_schema.scss
View File

@ -1,5 +1,4 @@
// styles used for JSON schema settings
.d-modal.json-schema-editor-modal {
--modal-max-width: 95vw;
--modal-width: unset;
@ -44,6 +43,7 @@
.json-editor-btn-add {
@extend .btn, .ok;
gap: var(--space-1);
span {
display: inline;
}
@ -52,6 +52,7 @@
button {
@extend .btn;
@extend .no-text;
span {
display: none;
}
@ -79,6 +80,7 @@
); // down chevron
background-repeat: no-repeat;
background-position: 98%;
&:focus {
@include default-focus;
}
@ -109,12 +111,14 @@
display: flex;
align-items: center;
margin: 0;
button.json-editor-btn-collapse.json-editor-btntype-toggle {
// needs the specificity
background: transparent;
margin: 0 0 0 calc(var(--space-2) * -1);
padding: var(--space-1) var(--space-2);
font-size: var(--font-down-2);
.d-icon {
color: var(--primary-medium);
}
@ -136,11 +140,13 @@
[data-schemaid="root"] {
position: relative;
> .je-header {
label,
.json-editor-btn-collapse {
display: none;
}
button {
position: absolute;
right: 0;
@ -158,7 +164,6 @@
}
// for "format":"tabs-top"
.je-tabholder--top {
margin: 0;
display: flex;
@ -208,16 +213,16 @@
}
// for "format":"table"
table {
width: 100%;
margin-bottom: 1em;
td,
th {
&:not(:first-child):not(:last-child) {
&:not(:first-child, :last-child) {
padding: var(--space-2);
}
&:first-child,
&:last-child {
padding: var(--space-2) 0;
@ -237,9 +242,11 @@
display: flex;
flex-direction: column;
gap: var(--space-1);
button {
margin: 0;
}
.delete {
order: 2;
}

6
app/assets/stylesheets/common/base/lightbox.scss
View File

@ -4,6 +4,7 @@ $meta-element-margin: 6px;
position: relative;
display: inline-block;
overflow: hidden;
&:hover .meta {
opacity: 0.9;
transition: opacity 0.5s;
@ -25,10 +26,12 @@ $meta-element-margin: 6px;
.lightbox-wrapper {
display: inline-block;
vertical-align: middle;
img {
object-fit: cover;
object-position: top;
}
&,
* {
outline: 0;
@ -55,8 +58,9 @@ $meta-element-margin: 6px;
margin: $meta-element-margin;
opacity: 0.8;
color: var(--secondary);
+ .filename {
margin-left: 0px;
margin-left: 0;
}
}

19
app/assets/stylesheets/common/base/login-signup-page.scss
View File

@ -1,5 +1,4 @@
// Shared styles
.login-fullpage,
.signup-fullpage {
height: 100%;
@ -20,17 +19,21 @@ body.activate-account-page {
.below-site-header-outlet {
display: none;
}
#main-outlet {
padding: 0;
}
.d-header {
box-shadow: none;
border: none;
background-color: var(--secondary);
}
.d-header .home-logo-wrapper-outlet {
width: 100%;
}
.d-header .title a {
margin: 0 auto;
}
@ -80,7 +83,6 @@ body.signup-page {
.login-left-side {
box-sizing: border-box;
width: 100%;
padding: 3rem;
overflow: auto;
width: 100%;
@ -144,7 +146,7 @@ body.signup-page {
pointer-events: none;
left: 1em;
top: 13px;
box-shadow: 0 0 0 0px rgba(var(--tertiary-rgb), 0);
box-shadow: 0 0 0 0 rgba(var(--tertiary-rgb), 0);
transition: 0.2s ease all;
}
@ -158,9 +160,11 @@ body.signup-page {
padding: 0 0.25em 0 0.25em;
font-size: $font-down-1;
}
.user-field.text label.control-label {
top: 13px;
}
.user-field.text:focus-within,
.user-field.dropdown:focus-within,
.user-field.multiselect:focus-within {
@ -179,6 +183,7 @@ body.signup-page {
input.alt-placeholder:invalid {
color: var(--primary);
}
.user-field.dropdown,
.user-field.multiselect {
.more-info,
@ -243,6 +248,7 @@ body.signup-page {
font-size: var(--font-down-1);
min-height: 1.4em;
display: block;
&.bad {
color: var(--danger);
}
@ -267,6 +273,7 @@ body.signup-page {
.create-account__password-info {
display: flex;
justify-content: space-between;
.create-account__password-tip-validation {
display: flex;
}
@ -280,9 +287,11 @@ body.signup-page {
display: flex;
flex-direction: column;
gap: 1rem;
&__accept {
width: 100%;
}
&__info {
display: flex;
align-items: center;
@ -292,6 +301,7 @@ body.signup-page {
line-height: 1rem;
color: var(--primary-medium);
}
&__sign-in {
padding: 0;
height: 100%;
@ -301,7 +311,6 @@ body.signup-page {
}
// Login page
.login-fullpage {
#second-factor {
input {
@ -320,7 +329,6 @@ body.signup-page {
}
// Signup page
.signup-fullpage {
.password-confirmation {
display: none;
@ -372,6 +380,7 @@ body.signup-page {
.controls .checkbox-label {
display: flex;
align-items: center;
input[type="checkbox"].ember-checkbox {
width: 1em !important;
min-width: unset;

21
app/assets/stylesheets/common/base/login.scss
View File

@ -1,6 +1,7 @@
body.invite-page {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif;
#main-outlet-wrapper {
padding: 0;
}
@ -11,6 +12,7 @@ body.invite-page {
#modal-alert {
box-sizing: border-box;
display: inline-block;
// if you want to use flexbox here make sure child elements like <b> don't cause line breaks
padding: 1em 3.5em 1em 1em; // large right padding to make sure long text isn't under the close button
width: 100%;
@ -18,9 +20,10 @@ body.invite-page {
margin-bottom: 0;
min-height: 35px;
}
#modal-alert:empty {
min-height: 0px;
padding: 0px;
min-height: 0;
padding: 0;
overflow: hidden;
display: inline;
}
@ -30,6 +33,7 @@ body.invite-page {
#new-account-link {
cursor: pointer;
text-align: left;
// the second button can wrap in some locales, and this helps alignment
}
@ -39,16 +43,19 @@ body.invite-page {
display: flex;
flex-direction: column;
width: 400px;
input {
padding: 0.75em 0.77em;
min-width: 250px;
margin-bottom: 0.25em;
width: 100%;
}
.input {
position: relative;
margin-bottom: 1em;
}
.tip {
display: block;
}
@ -64,6 +71,7 @@ body.invite-page {
right: 0;
top: 0;
padding: 0.75em 0.77em; // alligns with input padding
.ios-device & {
// reset form-item-sizing mixin styles
padding: 0.7em;
@ -73,6 +81,7 @@ body.invite-page {
.auth-message {
padding: 0 15px 15px 15px;
&:empty {
padding: 0;
}
@ -82,15 +91,18 @@ body.invite-page {
display: flex;
flex-wrap: wrap;
align-items: center;
p {
margin: 0;
font-size: var(--font-0);
}
a {
display: inline-block;
padding: 1em 0.5em 1em 0;
color: var(--tertiary);
}
button {
margin-right: 1em;
}
@ -101,8 +113,10 @@ body.invite-page {
background-color: var(--secondary);
padding: 20px;
margin: 0 auto;
.content-wrapper {
padding: 1em 2.5em 1em 2.5em;
.image-wrapper {
text-align: center;
padding-bottom: 1em;
@ -111,11 +125,14 @@ body.invite-page {
max-width: 200px;
}
}
.email-login-form {
text-align: center;
.btn-primary {
margin-top: 10px;
}
#security-key {
justify-content: center;
}

93
app/assets/stylesheets/common/base/magnific-popup.scss
View File

@ -29,7 +29,7 @@
@use "sass:math";
$overlay-color: #000000 !default;
$overlay-color: #000 !default;
$overlay-opacity: 0.8 !default;
$shadow: 0 0 8px rgba(0, 0, 0, 0.6) !default; // shadow on image or iframe
$popup-padding-left: 8px !default; // Padding from left and from right side
@ -77,7 +77,6 @@ $use-visuallyhidden: false !default; // Hide content from browsers, but make it
z-index: z("modal", "popover");
overflow: hidden;
position: fixed;
background: $overlay-color;
animation: fade 0.3s alternate;
}
@ -91,7 +90,7 @@ $use-visuallyhidden: false !default; // Hide content from browsers, but make it
z-index: z("modal", "popover") + 1;
position: fixed;
outline: 0 !important;
-webkit-backface-visibility: hidden; // fixes webkit bug that can cause "false" scrollbar
backface-visibility: hidden; // fixes webkit bug that can cause "false" scrollbar
}
// Root container
@ -103,14 +102,12 @@ $use-visuallyhidden: false !default; // Hide content from browsers, but make it
left: 0;
top: 0;
padding: 0 $popup-padding-left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
// Vertical centerer helper
.mfp-container {
&:before {
&::before {
content: "";
display: inline-block;
height: 100%;
@ -121,7 +118,7 @@ $use-visuallyhidden: false !default; // Hide content from browsers, but make it
// Remove vertical centering when popup has class `mfp-align-top`
.mfp-align-top {
.mfp-container {
&:before {
&::before {
display: none;
}
}
@ -136,6 +133,7 @@ $use-visuallyhidden: false !default; // Hide content from browsers, but make it
text-align: left;
z-index: $z-index-base + 5;
}
.mfp-inline-holder,
.mfp-ajax-holder {
.mfp-content {
@ -148,20 +146,18 @@ $use-visuallyhidden: false !default; // Hide content from browsers, but make it
.mfp-ajax-cur {
cursor: progress;
}
.mfp-zoom-out-cur {
&,
.mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out;
}
}
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.mfp-auto-cursor {
.mfp-content {
cursor: auto;
@ -216,8 +212,10 @@ $use-visuallyhidden: false !default; // Hide content from browsers, but make it
left: 8px;
right: 8px;
z-index: $z-index-base + 4;
a {
color: $controls-text-color;
&:hover {
color: $controls-text-color-hover;
}
@ -246,13 +244,13 @@ button {
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
appearance: none;
display: block;
padding: 0;
z-index: $z-index-base + 6;
-webkit-box-shadow: none;
box-shadow: none;
}
&::-moz-focus-inner {
padding: 0;
border: 0;
@ -286,11 +284,13 @@ button {
top: 1px;
}
}
.mfp-close-btn-in {
.mfp-close {
color: $inner-close-icon-color;
}
}
.mfp-image-holder,
.mfp-iframe-holder {
.mfp-close {
@ -323,16 +323,19 @@ button {
width: 90px;
height: 110px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
&:active {
margin-top: -54px;
}
&:hover,
&:focus {
outline: 0;
opacity: 1;
}
&:before,
&:after,
&::before,
&::after,
.mfp-b,
.mfp-a {
content: "";
@ -347,14 +350,14 @@ button {
border: medium inset transparent;
}
&:after,
&::after,
.mfp-a {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px;
}
&:before,
&::before,
.mfp-b {
border-top-width: 21px;
border-bottom-width: 21px;
@ -364,12 +367,13 @@ button {
.mfp-arrow-left {
left: 0;
&:after,
&::after,
.mfp-a {
border-right: 17px solid #fff;
margin-left: 31px;
}
&:before,
&::before,
.mfp-b {
margin-left: 25px;
border-right: 27px solid #3f3f3f;
@ -378,12 +382,14 @@ button {
.mfp-arrow-right {
right: 0;
&:after,
&::after,
.mfp-a {
border-left: 17px solid #fff;
margin-left: 39px;
}
&:before,
&::before,
.mfp-b {
border-left: 27px solid #3f3f3f;
}
@ -395,20 +401,24 @@ button {
.mfp-iframe-holder {
padding-top: $iframe-padding-top;
padding-bottom: $iframe-padding-top;
.mfp-content {
line-height: 0;
width: 100%;
max-width: $iframe-max-width;
}
.mfp-close {
top: -40px;
}
}
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: $iframe-ratio * 100%;
iframe {
position: absolute;
display: block;
@ -432,8 +442,6 @@ button {
height: auto;
display: block;
line-height: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: $image-padding-top 0 $image-padding-bottom;
margin: 0 auto;
@ -443,7 +451,8 @@ button {
/* The shadow behind the image */
.mfp-figure {
line-height: 0;
&:after {
&::after {
content: "";
position: absolute;
left: 0;
@ -457,16 +466,19 @@ button {
box-shadow: $shadow;
background: $image-background;
}
small {
color: $caption-subtitle-color;
display: block;
font-size: var(--font-down-1);
line-height: var(--line-height-medium);
}
figure {
margin: 0;
}
}
.mfp-bottom-bar {
margin-top: -$image-padding-bottom + 4;
position: absolute;
@ -475,6 +487,7 @@ button {
width: 100%;
cursor: auto;
}
.mfp-title {
text-align: left;
line-height: var(--line-height-medium);
@ -482,6 +495,7 @@ button {
word-wrap: break-word;
padding-right: 36px; // leave some space for counter at right side
max-width: 100%;
// add the download icon
a.image-source-link .d-icon {
padding-right: 5px;
@ -518,32 +532,37 @@ button {
}
@if $include-mobile-layout-for-image {
@media all and (max-width: 800px) and (orientation: landscape),
screen and (max-height: 300px) {
@media all and (width <= 800px) and (orientation: landscape),
screen and (height <= 300px) {
/**
* Remove all paddings around the image on small screen
*/
.mfp-img-mobile {
.mfp-image-holder {
padding-left: 0;
padding-right: 0;
}
img {
&.mfp-img {
padding: 0;
}
}
.mfp-figure {
/* The shadow behind the image */
&:after {
&::after {
top: 0;
bottom: 0;
}
small {
display: inline;
margin-left: 5px;
}
}
.mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
@ -551,17 +570,18 @@ button {
top: auto;
padding: 3px 5px;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&:empty {
padding: 0;
}
}
.mfp-counter {
right: 5px;
top: 3px;
}
.mfp-close {
top: 0;
right: 0;
@ -579,18 +599,19 @@ button {
}
// Scale navigation arrows and reduce padding from sides
@media all and (max-width: 900px) {
@media all and (width <= 900px) {
.mfp-arrow {
@include transform(scale(0.75));
}
.mfp-arrow-left {
transform-origin: 0;
-webkit-transform-origin: 0;
}
.mfp-arrow-right {
transform-origin: 100%;
-webkit-transform-origin: 100%;
}
.mfp-container {
padding-left: $popup-padding-left-mobile;
padding-right: $popup-padding-left-mobile;
@ -604,8 +625,6 @@ button {
@media screen and (prefers-reduced-motion: no-preference) {
transition: all 0.2s;
}
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
@ -620,6 +639,7 @@ button {
opacity: 1;
@include transform(scale(1));
}
&.mfp-bg {
opacity: 0.7;
}
@ -631,6 +651,7 @@ button {
@include transform(scale(0.8));
opacity: 0;
}
&.mfp-bg {
opacity: 0;
}
@ -642,9 +663,11 @@ button {
overflow-y: auto !important;
overflow-x: auto !important;
}
.mfp-figure {
overflow: auto;
}
.mfp-img {
max-width: none;
}

51
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -7,12 +7,14 @@
width: 100%;
}
}
.header-cloak {
display: none;
}
.menu-panel.drop-down {
position: absolute;
// positions are relative to the .d-header .panel div
top: 100%; // directly underneath .panel
right: -10px; // 10px to the right of .panel - adjust as needed
@ -70,10 +72,12 @@
.show-all {
display: flex;
flex: 1 1 auto;
button {
width: 100%;
}
}
.notifications-dismiss {
margin-left: 0.5em;
}
@ -81,6 +85,7 @@
.btn {
background-color: var(--primary-very-low);
color: var(--primary-high);
&:hover {
background: var(--primary-low);
color: var(--primary);
@ -105,7 +110,7 @@
right: 0;
width: 320px;
padding: 0;
border-top-right-radius: 0px;
border-top-right-radius: 0;
.panel-body-bottom {
flex: 0;
@ -129,7 +134,7 @@
position: relative;
border-radius: 0;
padding: 0.857em;
@media screen and (max-height: 400px) {
@media screen and (height <= 400px) {
// helps with 400% zoom level
font-size: var(--font-down-1);
padding: 0.5em 0.875em;
@ -145,7 +150,7 @@
right: 6px;
top: 6px;
font-size: var(--font-down-3);
@media screen and (max-height: 400px) {
@media screen and (height <= 400px) {
// helps with 400% zoom level
right: 0;
top: 0;
@ -155,6 +160,7 @@
&.active {
background-color: var(--d-selected);
}
&:hover {
background-color: var(--d-hover);
}
@ -189,9 +195,11 @@
align-items: center;
overflow-y: auto; // really short viewports
}
li {
flex: 1 1 auto;
max-height: 3em; // prevent buttons from getting too tall
> * {
// button, a, and everything else
height: 100%;
@ -199,15 +207,18 @@
margin: 0;
padding: 0 0.5em;
}
img.emoji {
height: 1em;
width: 1em;
padding-top: 0.2em;
margin-right: 0.5em;
}
.d-icon {
padding-top: 0;
}
&.enabled .d-icon {
color: var(--tertiary);
}
@ -224,7 +235,6 @@
font-size: var(--font-down-3);
color: var(--primary-medium);
}
justify-content: unset;
line-height: var(--line-height-large);
width: 100%;
@ -267,6 +277,7 @@
padding: 0.25em 0.5em;
display: block;
color: var(--primary);
&:hover,
&:focus {
background-color: var(--d-hover);
@ -294,6 +305,7 @@
padding: 0.25em 0.5em;
display: block;
color: var(--primary);
&:hover,
&:focus {
background-color: var(--d-hover);
@ -324,8 +336,10 @@
padding: 0.25em 0.5em;
width: 50%;
box-sizing: border-box;
a {
display: inline-flex;
&:hover,
&:focus {
background: transparent;
@ -335,6 +349,7 @@
}
}
}
.badge-notification {
color: var(--primary-med-or-secondary-med);
background-color: transparent;
@ -365,6 +380,7 @@
color: var(--d-sidebar-link-color);
display: flex;
align-items: center;
svg {
margin-right: var(--d-sidebar-section-link-prefix-margin-right);
height: 0.75em;
@ -413,6 +429,7 @@
&:hover .d-icon {
color: var(--primary-medium);
}
.icon {
color: var(--primary-high);
}
@ -439,6 +456,7 @@
&.pending {
background-color: var(--tertiary-low);
}
&:hover {
background-color: var(--d-hover);
outline: none;
@ -446,6 +464,7 @@
&:focus-within {
background: var(--d-hover);
a {
// we don't need the link focus because we're styling the parent
outline: 0;
@ -484,6 +503,7 @@
flex: 0 1 auto;
min-width: 1.2em;
max-width: 10em;
&:nth-of-type(2) {
// margin for comma between username and username2
margin-left: 0.25em;
@ -497,10 +517,12 @@
&:focus-within {
background: var(--d-hover);
a {
// we don't need the link focus because we're styling the parent
outline: 0;
}
.btn-flat:focus {
// undo default btn-flat style
background: transparent;
@ -511,7 +533,7 @@
.profile-tab-btn {
display: flex;
margin: 0.25em;
padding: 0em 0.25em;
padding: 0 0.25em;
}
button {
@ -537,6 +559,7 @@
overflow: hidden;
}
}
li:not(.show-all) {
padding: 0;
align-self: flex-start;
@ -547,26 +570,32 @@
margin-right: 0.5em;
}
}
.is-warning {
.d-icon-envelope {
color: var(--danger);
}
}
.read {
background-color: var(--secondary);
}
.none {
padding-top: 5px;
}
.spinner-container {
min-height: 2em;
}
.spinner {
width: 20px;
height: 20px;
border-width: 2px;
margin: 0 auto;
}
.show-all a {
width: 100%;
display: flex;
@ -575,11 +604,13 @@
min-height: 30px;
color: var(--primary-med-or-secondary-high);
background: var(--blend-primary-secondary-5);
&:hover {
color: var(--primary);
background: var(--primary-low);
}
}
/* as a big ol' click target, don't let text inside be selected */
@include unselectable;
}
@ -599,6 +630,7 @@
.item-label {
font-weight: bold;
}
.item-description {
color: var(--primary);
}
@ -617,6 +649,7 @@
width: 100%;
height: 100%;
}
&__icon-wrapper {
position: absolute;
right: -0.65em;
@ -638,10 +671,12 @@
}
}
}
& + div {
padding: 0.25em 0;
}
}
&.unread .icon-avatar__icon-wrapper {
background: var(--tertiary);
@ -658,11 +693,13 @@
.panel-body {
display: block;
}
.panel-body-contents {
max-height: unset;
min-height: 100%;
}
}
.header-cloak {
height: 100%;
width: 100%;
@ -677,6 +714,7 @@
.menu-panel.slide-in {
top: 0;
box-sizing: border-box;
// ensure there's always space to click outside on tiny devices
max-width: 90vw;
@ -684,7 +722,6 @@
@supports (height: 100dvh) {
--100dvh: 100dvh;
}
box-shadow: 0px 0 30px -2px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 30px -2px rgba(0, 0, 0, 0.5);
height: var(--100dvh);
}

34
app/assets/stylesheets/common/base/modal.scss
View File

@ -1,8 +1,6 @@
// Modal wrappers
.d-modal {
pointer-events: none; // Allow clicks through wrappers so they hit the adjacent backdrop element
display: flex;
align-items: center;
width: 100%;
@ -37,10 +35,12 @@
.modal-close {
margin-left: auto;
align-self: start;
.d-icon {
font-size: var(--font-up-2);
color: var(--primary-high);
}
&:focus-visible {
.d-icon {
color: var(--primary);
@ -82,6 +82,7 @@
width: 100%;
}
}
textarea {
width: 100%;
height: 80px;
@ -94,10 +95,12 @@
section.field {
padding: 0.25em 0;
margin-bottom: 5px;
&.with-items {
display: flex;
align-items: flex-start;
}
.field-item {
display: inline-block;
margin-right: 10px;
@ -109,6 +112,7 @@
max-width: 100%;
}
}
&__footer {
display: flex;
flex-wrap: wrap;
@ -117,6 +121,7 @@
border-top: 1px solid var(--primary-low);
gap: 0.5rem;
}
&__backdrop {
user-select: none;
position: fixed;
@ -139,7 +144,6 @@
}
//legacy
.input-hint-text {
margin-left: 0.5em;
color: var(--secondary-high);
@ -154,6 +158,7 @@
left: 0;
z-index: z("modal", "overlay");
background-color: #111;
&.fade {
opacity: 0;
}
@ -174,6 +179,7 @@
from {
opacity: 0;
}
to {
opacity: 0.6;
}
@ -187,6 +193,7 @@
.nav {
padding: 10px 30px 10px 15px;
background-color: var(--secondary);
li > a {
font-size: var(--font-0);
}
@ -237,6 +244,7 @@
&.btn-reply-here {
--text-color: var(--primary);
.discourse-no-touch & {
&:hover {
--text-color: var(--secondary);
@ -260,6 +268,7 @@
align-items: baseline;
color: var(--text-color);
font-size: var(--font-up-1);
.d-icon {
color: var(--text-color);
margin: 0;
@ -276,9 +285,11 @@
display: flex;
align-items: baseline;
gap: 0.5em;
.discourse-tags {
font-size: var(--font-down-1);
}
.badge-category__name,
.discourse-tag {
color: var(--text-color);
@ -295,6 +306,7 @@
border-radius: 25px;
overflow: hidden;
margin: 30px 0 20px;
span {
display: block;
width: 0%;
@ -312,24 +324,30 @@
.btn {
background-color: transparent;
margin-right: 5px;
&:hover,
&.active {
color: var(--primary);
}
&.active {
font-weight: bold;
}
&:focus {
outline: 2px solid var(--primary-low);
}
}
.incoming-email-tabs {
margin-bottom: 15px;
}
.incoming-email-content {
height: 300px;
max-width: 100%;
width: 90vw; // forcing textarea wider
textarea,
.incoming-email-html-part {
height: 95%;
@ -338,17 +356,19 @@
padding-top: 10px;
width: 100%;
}
textarea {
font-family: var(--d-font-family--monospace);
resize: none;
border-radius: 0;
box-shadow: none;
}
.incoming-email-html-part {
width: calc(100% - 36px);
padding: 10px 4px 4px 4px;
}
@media screen and (max-width: 760px) {
@media screen and (width <= 760px) {
.incoming-email-html-part {
width: calc(100% - 10px);
}
@ -388,17 +408,22 @@
form {
margin: 0;
}
.flag-action-type .controls .checkbox-label {
margin-bottom: 0.25em;
}
.flag-action-type-details {
width: 100%;
// max-width: 500px;
line-height: var(--line-height-large);
a {
margin: 0;
}
}
.flag-confirmation {
margin-top: 0.5em;
padding-left: 1.125em;
@ -466,6 +491,7 @@
flex-wrap: wrap;
align-items: baseline;
margin-bottom: 0.5em;
.description {
width: 100%;
margin-top: 0.25em;

9
app/assets/stylesheets/common/base/new-user.scss
View File

@ -27,6 +27,7 @@
@mixin bordered-nav-pills {
width: 100%;
margin: 0;
.d-icon {
font-size: var(--font-down-1);
}
@ -38,6 +39,7 @@
font-size: var(--font-up-1);
margin: 0;
}
span {
display: none;
}
@ -68,6 +70,7 @@
.user-navigation-primary {
[class*="horizontal-overflow-nav__scroll"] {
font-size: var(--font-up-1);
.d-icon {
margin-top: 0.15em; // minor alignment
}
@ -78,7 +81,6 @@
position: relative;
display: flex;
min-width: 0;
gap: 0 0.5em;
font-size: var(--font-down-1);
@ -95,10 +97,12 @@
// manage long group names
max-width: 20vw;
min-width: 7em;
.select-kit-selected-name,
.name {
@include ellipsis;
}
.name {
min-width: 0;
}
@ -110,6 +114,7 @@
@include breakpoint(extra-large) {
font-size: var(--font-down-1);
}
> li {
margin: 0;
}
@ -163,6 +168,7 @@
.user-preferences__tracking-topics-wrapper {
margin-bottom: 3em;
.control-label {
margin-bottom: 1em;
}
@ -172,6 +178,7 @@
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
gap: 2em;
.control-group {
width: 100%;
min-width: 16em;

9
app/assets/stylesheets/common/base/not-found.scss
View File

@ -1,5 +1,4 @@
// Page not found styles
.not-found-container {
background: var(--d-content-background);
}
@ -19,7 +18,7 @@
.page-not-found-topics {
display: flex;
@media screen and (max-width: 600px) {
@media screen and (width <= 600px) {
flex-wrap: wrap;
}
}
@ -31,9 +30,10 @@
max-width: 400px;
margin-bottom: 40px;
padding-right: 20px;
@media screen and (max-width: 600px) {
@media screen and (width <= 600px) {
width: 100%;
}
h2 {
margin-bottom: 10px;
}
@ -44,11 +44,12 @@
flex-wrap: wrap;
align-items: baseline;
margin-bottom: 15px;
@media screen and (max-width: 600px) {
@media screen and (width <= 600px) {
&:nth-of-type(n + 6) {
display: none;
}
}
a:not(.badge-category__wrapper) {
flex-basis: 100%;
}

75
app/assets/stylesheets/common/base/onebox.scss
View File

@ -1,5 +1,5 @@
a.loading-onebox {
&:before {
&::before {
content: "";
display: inline-flex;
float: left;
@ -16,10 +16,10 @@ a.loading-onebox {
.onebox-result {
@include post-aside;
margin-top: 15px;
padding: 12px;
font-size: var(--font-0);
> .source {
margin-bottom: 12px;
margin-right: 10px;
@ -27,6 +27,7 @@ a.loading-onebox {
color: var(--primary);
position: relative;
height: 20px;
.info {
a {
color: black;
@ -35,6 +36,7 @@ a.loading-onebox {
}
position: absolute;
font-size: var(--font-0);
img.favicon {
margin-right: 3px;
}
@ -43,6 +45,7 @@ a.loading-onebox {
.onebox-result-body {
padding-top: 5px;
img {
max-height: 80%;
max-width: 25%;
@ -50,16 +53,20 @@ a.loading-onebox {
float: left;
margin-right: 1em;
}
h3,
h4 {
margin: 0;
}
code {
max-height: 400px;
}
.metrics {
clear: both;
padding-bottom: 25px;
.metric {
padding-left: 33px;
float: left;
@ -75,6 +82,7 @@ a.loading-onebox {
float: none;
margin-right: 7px;
}
img.popcorn {
float: none;
margin-left: 20px;
@ -145,12 +153,13 @@ aside.onebox {
img:not(.avatar, .onebox-avatar-inline) {
max-height: 170px;
max-width: 20%;
@media all and (max-width: 600px) {
@media all and (width <= 600px) {
max-width: 35%;
}
height: auto;
float: left;
margin-right: 1em;
&.onebox-full-image {
max-height: none;
max-width: none;
@ -160,6 +169,7 @@ aside.onebox {
[style*="--aspect-ratio"] > :first-child {
width: 100%;
}
[style*="--aspect-ratio"] > img {
height: auto;
}
@ -169,6 +179,7 @@ aside.onebox {
@supports (--custom: property) {
.aspect-image {
max-height: 170px;
--magic-ratio: calc(var(--aspect-ratio) + 0.15);
width: calc(128px * var(--magic-ratio));
max-width: 20%;
@ -204,11 +215,13 @@ aside.onebox {
[style*="--aspect-ratio"] {
position: relative;
}
[style*="--aspect-ratio"]::before {
content: "";
display: block;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
[style*="--aspect-ratio"] > :first-child {
position: absolute;
top: 0;
@ -246,14 +259,17 @@ aside.onebox {
.fa {
margin-right: 5px;
}
.full-name,
.location {
margin-right: 10px;
}
.user-onebox--joined {
color: var(--primary-medium);
margin-top: 10px;
}
.aspect-image {
width: 80px;
height: 80px;
@ -283,8 +299,9 @@ aside.onebox {
}
.video-icon {
&:before {
&::before {
opacity: 0.8;
// ideally, the SVG used here should be in HTML and reference the SVG sprite
content: svg-uri(
'<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 512 512" fill="white"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>'
@ -323,10 +340,12 @@ aside.onebox {
background-color: var(--primary-low-mid);
color: var(--primary);
border: 1px inset var(--primary);
.gdocs-onebox-logo {
display: inline-block;
width: 128px;
height: 128px;
&.g-calendar-logo {
background: absolute-image-url(
"/favicons/google_branding/logo_calendar_128px.png"
@ -354,7 +373,7 @@ pre.onebox {
}
// -- Onebox Github Code Blob --
pre.onebox code ol.lines li:before {
pre.onebox code ol.lines li::before {
position: absolute;
display: inline-block;
width: 35px;
@ -375,6 +394,7 @@ pre.onebox code ol.lines li:before {
margin-bottom: 5px;
font-size: 1rem;
}
.git-blob-info {
font-size: var(--font-down-1);
}
@ -384,9 +404,11 @@ pre.onebox code ol {
margin-left: 0;
line-height: var(--line-height-large);
}
pre.onebox code {
background-color: var(--primary-very-low);
}
pre.onebox code li {
padding-left: 5px;
}
@ -417,6 +439,7 @@ pre.onebox code {
.onebox-warning-message {
margin-top: 5px;
color: var(--primary-med-or-secondary-med);
img.emoji {
width: 20px;
height: 20px;
@ -481,6 +504,7 @@ pre.onebox code {
.branches {
grid-area: branches;
font-size: var(--font-down-1);
code {
word-break: break-all;
}
@ -489,6 +513,7 @@ pre.onebox code {
.github-info-container {
width: 100%;
overflow-x: hidden;
> span {
// TODO: remove in a few months
// replaced by .github-info in new commit oneboxes
@ -510,6 +535,7 @@ pre.onebox code {
.added {
color: var(--success);
}
.removed {
color: var(--danger);
}
@ -533,7 +559,7 @@ pre.onebox code {
.show-more {
// padding on right for larger hitzone
padding: 0.5em 1.5em 0em 0.25em;
padding: 0.5em 1.5em 0 0.25em;
}
}
@ -624,9 +650,11 @@ pre.onebox code {
.onebox-body .status_tag.open {
background-color: #6cc644;
}
.onebox-body .status_tag.merged {
background-color: #6e5494;
}
.onebox-body .status_tag.closed {
background-color: #bd2c00;
}
@ -646,6 +674,7 @@ aside.onebox.twitterstatus .onebox-body {
height: 36px;
margin-right: 12px;
}
.twitter-screen-name {
font-size: var(--font-down-1);
}
@ -704,7 +733,7 @@ aside.onebox.twitterstatus .onebox-body {
white-space: nowrap;
svg {
fill: currentColor;
fill: currentcolor;
margin-right: 0.25em;
}
}
@ -775,6 +804,7 @@ aside.onebox.xkcd .onebox-body img {
background: absolute-image-url("/favicons/pdf_64px.png") no-repeat;
background-size: 48px 48px;
}
.filesize {
color: gray;
}
@ -788,9 +818,11 @@ aside.onebox.xkcd .onebox-body img {
.label2 {
color: var(--primary-med-or-secondary-med);
}
.label1 {
float: left;
}
.label2 {
float: right;
}
@ -802,6 +834,7 @@ aside.onebox.xkcd .onebox-body img {
height: 16px;
margin-right: 0.5em;
}
&.category-onebox {
border: 1px solid var(--primary-low);
padding-left: calc(1em - 5px);
@ -817,6 +850,7 @@ aside.onebox.xkcd .onebox-body img {
.discourse-tags {
vertical-align: bottom;
.d-icon-tag {
font-size: var(--font-down-1);
margin-right: 0.35em;
@ -844,6 +878,7 @@ aside.onebox.xkcd .onebox-body img {
div.aspect-image-full-size {
position: relative;
}
div.description {
color: var(--primary-med-or-secondary-med);
}
@ -853,11 +888,13 @@ aside.onebox.xkcd .onebox-body img {
.thumbnail {
width: 60px;
height: 60px;
&.onebox-full-image {
max-height: 60px;
max-width: 60px;
}
}
.label1 {
color: var(--primary-med-or-secondary-med);
}
@ -884,16 +921,19 @@ aside.onebox.mixcloud-preview {
border: 0;
height: 120px;
background-color: #1c1f21;
article.onebox-body img {
padding: 0;
max-height: 120px;
}
.onebox-body {
a[href],
a[href]:visited,
a[href]:hover {
color: #d1d1d1;
}
.video-icon {
position: relative;
top: 17px;
@ -901,9 +941,11 @@ aside.onebox.mixcloud-preview {
float: left;
padding-left: 6px;
}
.mixcloud-text {
padding-left: 170px;
font-family: sans-serif;
h3 {
font-size: 13px;
font-weight: 300;
@ -911,6 +953,7 @@ aside.onebox.mixcloud-preview {
padding-top: 15px;
height: 20px;
}
h4 {
font-size: 12px;
font-weight: 200;
@ -1044,39 +1087,43 @@ iframe.loom-onebox {
align-items: center;
&.image {
&:before {
&::before {
opacity: 0.8;
content: svg-uri(
'<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="grey" d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"></path></svg>'
);
}
}
&.video {
&:before {
&::before {
opacity: 0.8;
content: svg-uri(
'<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="white" d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z"></path></svg>'
);
}
}
&.audio {
&:before {
&::before {
opacity: 0.4;
content: svg-uri(
'<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M511.99 32.01c0-21.71-21.1-37.01-41.6-30.51L150.4 96c-13.3 4.2-22.4 16.5-22.4 30.5v261.42c-10.05-2.38-20.72-3.92-32-3.92-53.02 0-96 28.65-96 64s42.98 64 96 64 96-28.65 96-64V214.31l256-75.02v184.63c-10.05-2.38-20.72-3.92-32-3.92-53.02 0-96 28.65-96 64s42.98 64 96 64 96-28.65 96-64l-.01-351.99z"></path></svg>'
);
}
}
&.map {
&:before {
&::before {
opacity: 0.4;
content: svg-uri(
'<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M288 0c-69.59 0-126 56.41-126 126 0 56.26 82.35 158.8 113.9 196.02 6.39 7.54 17.82 7.54 24.2 0C331.65 284.8 414 182.26 414 126 414 56.41 357.59 0 288 0zm0 168c-23.2 0-42-18.8-42-42s18.8-42 42-42 42 18.8 42 42-18.8 42-42 42zM20.12 215.95A32.006 32.006 0 0 0 0 245.66v250.32c0 11.32 11.43 19.06 21.94 14.86L160 448V214.92c-8.84-15.98-16.07-31.54-21.25-46.42L20.12 215.95zM288 359.67c-14.07 0-27.38-6.18-36.51-16.96-19.66-23.2-40.57-49.62-59.49-76.72v182l192 64V266c-18.92 27.09-39.82 53.52-59.49 76.72-9.13 10.77-22.44 16.95-36.51 16.95zm266.06-198.51L416 224v288l139.88-55.95A31.996 31.996 0 0 0 576 426.34V176.02c0-11.32-11.43-19.06-21.94-14.86z"></path></svg>'
);
}
}
&.generic {
&:before {
&::before {
opacity: 0.4;
content: svg-uri(
'<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"></path></svg>'
@ -1099,9 +1146,11 @@ aside.onebox.preview-error .site-icon {
height: 36px;
margin-right: 12px;
}
.threads-screen-name {
font-size: var(--font-down-1);
}
h4 {
margin-bottom: 0;
}
@ -1159,7 +1208,7 @@ aside.onebox.preview-error .site-icon {
margin-left: 0.75em;
svg {
fill: currentColor;
fill: currentcolor;
margin-right: 0.25em;
}
}

15
app/assets/stylesheets/common/base/personal-message.scss
View File

@ -4,6 +4,7 @@
.topic-post {
margin-bottom: 0.5em;
&:last-child {
margin-bottom: 1.5em;
}
@ -14,6 +15,7 @@
var(--pm-border-radius);
border: 1px solid var(--primary-low);
padding-left: var(--pm-padding);
.desktop-view & {
margin-left: calc(var(--pm-padding) * -1);
}
@ -52,6 +54,7 @@
var(--topic-body-width) + var(--topic-body-width-padding) * 2 +
var(--topic-avatar-width) - 1.65em
);
&.old {
border: 1px solid var(--primary-low);
}
@ -97,6 +100,7 @@
.participants {
margin-bottom: 1.5em;
.user {
border: none;
background: var(--primary-low);
@ -113,21 +117,26 @@
.embedded-posts {
border: none;
.topic-body {
overflow: visible;
width: 100%;
}
.topic-avatar {
padding-left: 0;
}
.collapse-down,
.collapse-up {
display: none;
}
&.bottom {
margin-bottom: 0;
margin-right: calc(var(--topic-body-width-padding) * 2);
}
&.top {
.cooked {
border: 1px solid var(--primary-low);
@ -135,6 +144,7 @@
margin-left: calc(var(--pm-padding) * -1);
padding-left: 2.15em;
}
.row {
.topic-body,
.topic-avatar {
@ -151,12 +161,12 @@
}
// special post type colors
.current-user-post {
.regular.contents {
background: var(--tertiary-very-low);
border-color: var(--tertiary-very-low);
}
.embedded-posts {
.topic-body .cooked {
background: transparent;
@ -174,6 +184,7 @@
.regular.contents {
background: var(--highlight-low);
border-color: var(--highlight-low);
.cooked {
background: transparent;
}
@ -195,10 +206,12 @@
.topic-body .regular.contents {
background: var(--danger-low);
border-color: transparent;
.cooked {
background: transparent;
}
}
&.whisper {
.topic-body .regular.contents {
border-color: var(--danger-low-mid);

1
app/assets/stylesheets/common/base/popup-menu.scss
View File

@ -1,6 +1,5 @@
// LEGACY STYLES
// some plugins rely on these (discourse-topic-voting is one)
.popup-menu {
background-color: var(--secondary);
width: 14em;

1
app/assets/stylesheets/common/base/reorder-categories.scss
View File

@ -14,6 +14,7 @@
width: 100%;
padding-bottom: 150px;
margin: 0 0.667em;
td {
padding: 0.5em 0.5em 0.5em 0;
min-width: 10em;

54
app/assets/stylesheets/common/base/reviewables.scss
View File

@ -9,19 +9,24 @@
.status {
color: var(--primary-medium);
span.approved {
color: var(--success);
.d-icon {
color: currentColor;
color: currentcolor;
}
}
span.rejected {
color: var(--danger);
.d-icon {
color: currentColor;
color: currentcolor;
}
}
}
.explain {
margin-left: 0.5em;
}
@ -64,6 +69,7 @@
.saved {
margin-left: 0.5em;
}
.reviewable-score-type {
display: flex;
margin-bottom: 0.5em;
@ -71,6 +77,7 @@
.select-kit {
min-width: 10em;
}
.title {
width: 30%;
}
@ -80,6 +87,7 @@
.reviewable-user-info {
max-width: 100%;
margin: 0.5em 0;
.reviewable-user-fields {
margin-bottom: 2em;
}
@ -87,13 +95,14 @@
.reviewable-user-details {
border-bottom: 1px solid var(--primary-low);
padding-bottom: 0.25em;
display: flex;
.name {
width: 8em;
font-weight: bold;
margin-right: 1em;
}
.value {
max-width: calc(
100% - 8em - 1em
@ -136,6 +145,7 @@
.reviewable-claimed-topic {
display: flex;
align-items: center;
.btn-small {
margin-left: 0.5em;
}
@ -152,6 +162,7 @@
.claimed-by {
display: flex;
align-items: center;
.claimed-username {
margin-left: 0.5em;
}
@ -188,6 +199,7 @@
width: 5em;
}
}
.user-flag-percentage {
display: flex;
align-items: center;
@ -195,22 +207,28 @@
.percentage-label {
margin-right: 0.25em;
&.agreed {
color: var(--success);
+ .d-icon {
color: var(--success);
}
}
&.disagreed {
color: var(--danger);
+ .d-icon {
color: var(--danger);
}
}
&.ignored {
color: var(--primary-medium);
}
}
.d-icon {
font-size: 0.9em;
}
@ -231,6 +249,7 @@
margin-bottom: 0.5em;
font-size: var(--font-down-1);
align-items: baseline;
.reviewable-type {
margin-right: 0.25em;
padding: 0.25em 0.5em;
@ -239,26 +258,32 @@
color: var(--secondary);
border-radius: 8px;
background-color: var(--secondary-high);
&.-flagged-post,
&.-flagged-chat-message {
background-color: var(--danger);
}
&.-queued-post,
&.-queued-topic,
&.-user {
background-color: var(--tertiary);
}
}
.reply-count {
margin-left: 1em;
}
.created-at {
margin-left: 1em;
margin-right: auto;
a {
color: var(--primary-med-or-secondary-med);
}
}
.score {
font-size: var(--font-down-1);
}
@ -287,6 +312,7 @@
background-color: var(--success);
color: var(--secondary);
}
.reject-post,
.reject-post > summary {
background-color: var(--danger);
@ -313,7 +339,7 @@
}
.blur-images {
img:not(.avatar):not(.emoji) {
img:not(.avatar, .emoji) {
filter: blur(10px);
transition: 0.2s ease-in-out;
@ -346,6 +372,7 @@
margin-left: 0.5em;
}
}
.user,
.reviewed-by {
display: flex;
@ -378,18 +405,22 @@
tbody {
border-width: 1px;
td {
white-space: nowrap;
vertical-align: baseline;
&.user a,
&.reviewed-by a {
max-width: 150px;
@include ellipsis;
}
}
> tr > th {
text-align: left;
}
> tr > th,
> tr > td {
&:not(:empty) {
@ -429,13 +460,16 @@
.reviewable-item {
margin-block: 3rem;
.show-raw-email {
color: var(--primary-medium);
font-size: var(--font-down-2);
}
.post-title {
background-color: yellow;
}
.created-by {
margin-right: 1em;
padding-top: 0.35em;
@ -458,6 +492,7 @@
display: flex;
}
}
.reviewable-post-header {
display: flex;
justify-content: space-between;
@ -470,6 +505,7 @@
align-items: center;
color: var(--primary-medium);
font-size: 0.9em;
.d-icon {
margin-right: 0.5em;
}
@ -490,7 +526,7 @@
max-height: 50vh;
overflow: hidden;
&:after {
&::after {
content: "";
position: absolute;
left: 0;
@ -504,9 +540,11 @@
transform: translateX(-50%) translateY(-50%);
}
}
p {
margin-bottom: 0;
}
&__toggle-btn {
background: var(--primary-very-low);
color: var(--primary-high);
@ -549,6 +587,7 @@
width: 100%;
color: var(--primary-medium);
margin-bottom: 0.75em;
.title-text {
font-weight: bold;
color: var(--primary);
@ -556,9 +595,11 @@
font-size: var(--font-up-2);
margin-right: 0.75em;
}
.badge-category__wrapper {
margin-left: 0.25em;
}
.discourse-tag {
vertical-align: bottom;
padding-left: 0.1em;
@ -573,13 +614,14 @@
.editable-fields {
.editable-created-by {
display: flex;
.avatar {
margin-right: 0.25em;
}
margin-bottom: 0.5em;
}
width: 100%;
.editable-field {
.mini-tag-chooser {
margin: 0;

1
app/assets/stylesheets/common/base/revise-and-reject-post-reviewable.scss
View File

@ -10,7 +10,6 @@
.revise-and-reject-reviewable__queued-post {
@extend .reviewable-item;
padding: 1em;
margin: 0 0 1em 0;

1
app/assets/stylesheets/common/base/rtl.scss
View File

@ -1,5 +1,4 @@
// Right to left styles.
.rtl {
.d-icon-align-right,
.d-icon-angles-right,

30
app/assets/stylesheets/common/base/search-menu.scss
View File

@ -37,6 +37,7 @@ $search-pad-horizontal: 0.5em;
width: auto;
flex-grow: 1;
padding-right: 50px;
&:focus {
outline: none;
}
@ -47,10 +48,12 @@ $search-pad-horizontal: 0.5em;
margin-right: 0;
white-space: nowrap;
background-color: var(--primary-200);
&:hover {
background-color: var(--primary-medium);
}
}
&:focus-within {
@include default-focus;
}
@ -58,6 +61,7 @@ $search-pad-horizontal: 0.5em;
.heading {
padding: 5px 0 5px 5px;
.filter {
padding: 0 5px;
}
@ -94,9 +98,7 @@ $search-pad-horizontal: 0.5em;
// https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
hyphens: auto;
margin-top: 0.25em;
}
@ -127,6 +129,7 @@ $search-pad-horizontal: 0.5em;
.badge-category__wrapper {
font-size: var(--font-0);
}
.widget-link {
margin-bottom: 0;
}
@ -160,6 +163,7 @@ $search-pad-horizontal: 0.5em;
font-size: var(--font-down-2);
}
}
.user-result {
display: flex;
align-items: center;
@ -195,12 +199,13 @@ $search-pad-horizontal: 0.5em;
.d-icon {
font-size: var(--font-down-2);
color: currentColor;
color: currentcolor;
}
}
.avatar-flair {
border-radius: 50%;
&.avatar-flair-image {
background-repeat: no-repeat;
background-size: 100% 100%;
@ -210,6 +215,7 @@ $search-pad-horizontal: 0.5em;
.group-names {
@include user-item-flex;
min-width: 0;
.name,
.slug {
@include ellipsis;
@ -241,6 +247,7 @@ $search-pad-horizontal: 0.5em;
height: 20px;
margin-right: 0.5em;
}
.username {
margin-right: 0.33em;
}
@ -270,9 +277,11 @@ $search-pad-horizontal: 0.5em;
overflow-wrap: anywhere;
white-space: wrap;
min-width: 0;
.keyword {
margin-right: 0.33em;
}
.badge-wrapper {
font-size: var(--font-0);
margin-left: 2px;
@ -294,21 +303,26 @@ $search-pad-horizontal: 0.5em;
.search-item-prefix {
margin-right: 0.33em;
}
.badge-category__wrapper {
font-size: var(--font-0);
}
.search-link {
display: flex;
flex-wrap: wrap;
align-items: baseline;
@include ellipsis;
.d-icon {
margin-right: 0.33em;
vertical-align: middle;
}
.d-icon-tag {
font-size: 0.7em;
}
.d-icon-magnifying-glass {
font-size: var(--font-down-1);
}
@ -321,12 +335,14 @@ $search-pad-horizontal: 0.5em;
padding: $search-pad-vertical 1px;
font-size: var(--font-down-2);
color: var(--primary-medium);
.tip-label {
background-color: rgba(var(--tertiary-rgb), 0.1);
margin-right: 4px;
padding: 2px 4px;
display: inline-block;
border: none;
&.tip-clickable {
cursor: pointer;
}
@ -339,14 +355,17 @@ $search-pad-horizontal: 0.5em;
.search-menu-assistant-item .search-link {
flex-wrap: nowrap;
}
.heading {
display: flex;
justify-content: space-between;
h4 {
color: var(--primary-medium);
font-weight: normal;
margin-bottom: 0;
}
.clear-recent-searches {
cursor: pointer;
color: var(--primary-low-mid);
@ -369,12 +388,14 @@ $search-pad-horizontal: 0.5em;
.show-advanced-search,
a.clear-search {
padding: 0px 3px;
padding: 0 3px;
display: inline-block;
background-color: transparent;
.d-icon {
color: var(--primary-medium);
}
&:focus,
&:hover {
.d-icon {
@ -417,6 +438,7 @@ $search-pad-horizontal: 0.5em;
margin-right: 0.25em;
}
}
.search-result-topic,
.search-result-post {
.search-link {

25
app/assets/stylesheets/common/base/search.scss
View File

@ -18,9 +18,10 @@
}
.search-header {
@include search-page-spacing();
@include search-page-spacing;
background: var(--primary-very-low);
}
.warning {
background-color: var(--danger-medium);
padding: 5px 8px;
@ -56,6 +57,7 @@
.select-kit {
flex: 1 1 20%;
.name {
white-space: nowrap;
}
@ -74,6 +76,7 @@
.search-advanced {
position: relative;
.search-actions,
.search-title,
.search-bar {
@ -81,7 +84,7 @@
}
.search-results {
@include search-page-spacing();
@include search-page-spacing;
@include breakpoint(tablet) {
padding: 1rem 0.5rem 1rem 0.25rem;
@ -121,6 +124,7 @@
margin: 0;
padding: 0;
display: inline;
button {
margin-right: 0.5em;
}
@ -129,6 +133,7 @@
.sort-by.inline-form label {
margin-bottom: 0;
}
#search-sort-by {
margin-bottom: 0;
}
@ -177,18 +182,22 @@
cursor: pointer;
padding-top: 0.25em;
padding-bottom: 0.25em;
&:focus-visible {
outline: 2px solid transparent;
background-color: var(--tertiary-very-low);
}
}
&[open] > summary {
color: var(--primary);
margin-bottom: 1em;
&:focus-visible {
background-color: var(--tertiary-very-low);
}
}
.control-label {
font-weight: bold;
color: var(--primary-high);
@ -220,6 +229,7 @@
.search-advanced-options {
column-count: 2;
column-gap: 2em;
.control-group {
break-inside: avoid;
}
@ -238,6 +248,7 @@
// overriding inline width from JS
width: 100% !important;
}
.select-kit {
min-width: unset;
}
@ -334,6 +345,7 @@
flex-wrap: wrap;
margin-top: 0.25em;
gap: 0 0.5em;
.badge-category__wrapper {
max-width: 100%;
}
@ -353,6 +365,7 @@
font-size: var(--font-0);
line-height: var(--line-height-large);
color: var(--primary-medium);
.date {
color: var(--primary-high);
}
@ -366,6 +379,7 @@
display: block;
color: var(--primary-high);
margin-top: 0.25em;
.d-icon {
color: var(--love);
font-size: var(--font-down-1);
@ -375,18 +389,21 @@
a.search-link.visited .topic-title {
color: var(--primary-medium);
}
.search-link {
.topic-title {
font-size: var(--font-up-1);
line-height: var(--line-height-medium);
color: var(--primary);
}
.topic-statuses {
display: inline-block;
flex-shrink: 0;
font-size: 1.1em;
line-height: var(--line-height-medium);
color: var(--primary-medium);
span {
line-height: 1;
}
@ -414,17 +431,20 @@
min-width: 25px;
flex: 0 0 auto;
}
.user-titles {
display: flex;
flex-direction: column;
max-width: 300px;
overflow: hidden;
.name {
color: var(--primary-high-or-secondary-low);
font-size: var(--font-0);
font-weight: 700;
@include ellipsis;
}
.username {
color: var(--primary-high-or-secondary-low);
font-size: var(--font-down-1);
@ -436,6 +456,7 @@
.category-items,
.tag-items {
margin-bottom: 1.5em;
.fps-category-item,
.fps-tag-item {
margin-bottom: 1.5em;

2
app/assets/stylesheets/common/base/share_link.scss
View File

@ -1,5 +1,4 @@
// styles that apply to the "share" modal & popup when sharing a link to a post or topic
.link-share-container,
.notify-user-input {
display: flex;
@ -47,6 +46,7 @@
color: var(--twitter);
}
}
.share-facebook {
.d-icon {
color: var(--facebook);

6
app/assets/stylesheets/common/base/sidebar-custom-section.scss
View File

@ -2,9 +2,11 @@
.sidebar-section-wrapper {
padding-bottom: 0;
}
.sidebar-section-header {
display: flex;
}
.sidebar-section[data-section-name="community"]
.sidebar-section-link-prefix.icon {
cursor: pointer;
@ -20,15 +22,18 @@
a {
pointer-events: none;
}
.sidebar-section-link-wrapper {
.sidebar-section-link-prefix.icon,
.sidebar-section-link {
background: none;
color: var(--primary-low-mid);
}
.sidebar-section-link.drag {
font-weight: bold;
color: var(--primary-high);
.sidebar-section-link-prefix.icon {
color: var(--primary-high);
}
@ -36,6 +41,7 @@
}
}
}
.discourse-touch {
.sidebar-custom-sections {
a:hover {

5
app/assets/stylesheets/common/base/sidebar-footer.scss
View File

@ -11,7 +11,8 @@
position: relative;
padding: 0.5em 0.8em;
padding-bottom: max(env(safe-area-inset-bottom), 0.5em);
&:before {
&::before {
// fade to make scroll more apparent
position: absolute;
content: "";
@ -37,6 +38,7 @@
font-size: var(--font-down-1);
color: var(--d-sidebar-link-color);
padding: 0 0.5em;
&:hover,
&:focus {
background: var(--d-sidebar-highlight-background);
@ -60,6 +62,7 @@
&:focus,
&:hover {
background: var(--d-sidebar-highlight-background);
.d-icon {
color: var(--d-sidebar-highlight-color);
}

13
app/assets/stylesheets/common/base/sidebar-section-link.scss
View File

@ -19,8 +19,9 @@
.prefix-image {
border: 1px solid transparent;
}
&.active .prefix-image {
box-shadow: 0px 0px 0px 1px var(--success);
box-shadow: 0 0 0 1px var(--success);
}
}
@ -36,9 +37,11 @@
background: var(--d-sidebar-highlight-background);
color: var(--d-sidebar-highlight-color);
outline: none;
.prefix-text {
background: var(--d-sidebar-highlight-prefix-background);
}
.sidebar-section-link-suffix.icon.unread svg {
color: var(--d-sidebar-highlight-suffix-color);
}
@ -55,15 +58,19 @@
color: var(--d-sidebar-active-color);
}
}
.prefix-text {
background: var(--d-sidebar-active-prefix-background);
}
.sidebar-section-link-content-badge {
color: var(--d-sidebar-active-color);
}
.sidebar-section-link-suffix.icon.unread svg {
color: var(--d-sidebar-active-suffix-color);
}
.sidebar-section-link-hover:hover .sidebar-section-hover-button {
background-color: var(--d-sidebar-active-background);
}
@ -71,9 +78,11 @@
&--muted {
opacity: 0.5;
.sidebar-section-link-prefix.icon .d-icon {
color: var(--primary-medium);
}
&.active {
.sidebar-section-link-prefix.icon .d-icon {
color: var(--primary-high);
@ -95,6 +104,7 @@
.sidebar-section-link-suffix {
margin-left: 1em;
font-size: var(--font-down-4);
&.icon {
&.urgent svg {
color: var(--success);
@ -198,6 +208,7 @@
margin-right: -0.2em;
}
}
.prefix-span {
width: 0.8em;
height: 0.8em;

6
app/assets/stylesheets/common/base/sidebar-section.scss
View File

@ -32,7 +32,6 @@
opacity: 1;
}
}
background: transparent;
border: none;
margin-right: calc(var(--d-sidebar-row-horizontal-padding) / 3 * -1);
@ -48,6 +47,7 @@
&:focus {
outline: none;
background: var(--d-sidebar-highlight-hover-background);
.d-icon {
color: var(--d-sidebar-highlight-hover-icon);
}
@ -56,6 +56,7 @@
.discourse-no-touch & {
&:hover {
background: var(--d-sidebar-highlight-hover-background);
.d-icon {
color: var(--d-sidebar-highlight-hover-icon);
}
@ -80,6 +81,7 @@
&:hover {
color: var(--d-sidebar-header-color);
.d-icon {
color: var(--d-sidebar-header-icon-color);
}
@ -100,6 +102,7 @@
.sidebar-section-header-global-indicator {
margin: 0 0.75em 0 0.25em;
font-size: var(--font-down-2);
.d-icon {
margin-top: -0.125em; // optical alignment
}
@ -124,6 +127,7 @@
font-size: var(--font-0);
text-transform: none;
line-height: var(--line-height-medium);
.name {
font-size: var(--font-0);
}

47
app/assets/stylesheets/common/base/sidebar.scss
View File

@ -3,24 +3,21 @@
@include breakpoint(large) {
--d-sidebar-width: #{$d-sidebar-narrow-width};
}
--d-sidebar-row-horizontal-padding: 1rem;
// ems so height is variable along with font size
--d-sidebar-row-height: 2.2em;
--d-sidebar-animation-time: 0.25s;
--d-sidebar-animation-ease: ease-in-out;
--d-sidebar-background: var(--secondary);
--d-sidebar-admin-background: var(--primary-very-low);
// must be rgba for gradient
--d-sidebar-footer-fade: rgba(var(--secondary-rgb), 1);
--d-sidebar-header-color: var(--primary-medium);
--d-sidebar-header-icon-color: var(--primary-medium);
--d-sidebar-border-color: var(--primary-low);
--d-sidebar-link-color: var(--primary-high);
--d-sidebar-link-icon-color: var(--primary-500);
--d-sidebar-link-badge-color: var(--primary-700); // example: new count
@ -38,10 +35,10 @@
--d-sidebar-highlight-prefix-background: var(--primary-300);
--d-sidebar-highlight-prefix-color: var(--d-sidebar-highlight-color);
--d-sidebar-highlight-suffix-color: var(--tertiary-med-or-tertiary);
--d-sidebar-highlight-hover-background: var(
--primary-medium
); // example: hovering a button within a highlighted section
--d-sidebar-highlight-hover-icon: var(
--primary-very-low
); // example: hovering a button within a highlighted section
@ -74,11 +71,9 @@
@supports (height: 1dvh) {
--1dvh: 1dvh;
}
height: calc(
var(--composer-vh, var(--1dvh)) * 100 - var(--main-outlet-offset, 0px)
);
align-self: start;
overflow-y: auto;
@ -86,11 +81,11 @@
display: flex;
flex-direction: column;
box-sizing: border-box;
height: 100%;
width: 100%;
padding: 0;
border-right: 1px solid var(--primary-low);
overflow-x: hidden;
// allows sidebar to scroll to the bottom when the composer is open
height: calc(100% - var(--composer-height, 0px));
}
@ -112,7 +107,6 @@
--scrollbarBg: transparent;
--scrollbarThumbBg: var(--primary-low);
--scrollbarWidth: 0.5em;
scrollbar-color: transparent var(--scrollbarBg);
transition: scrollbar-color 0.25s ease-in-out;
transition-delay: 0.5s;
@ -136,7 +130,6 @@
&::-webkit-scrollbar-thumb {
background-color: var(--scrollbarThumbBg);
}
transition-delay: 0s;
}
@ -144,6 +137,7 @@
color: var(--d-sidebar-link-color);
display: flex;
align-items: center;
svg {
margin-right: var(--d-sidebar-section-link-prefix-margin-right);
height: 0.75em;
@ -168,23 +162,29 @@
cursor: move;
-webkit-user-drag: element;
}
.dragging {
opacity: 0.4;
}
form {
margin-bottom: 0;
}
.input-group input {
width: 100%;
margin-bottom: 0;
}
input.warning {
border: 1px solid var(--danger);
}
.icon.warning,
.value.warning {
position: absolute;
}
.sidebar-section-form__input-wrapper {
margin-bottom: 1em;
@ -198,7 +198,6 @@
grid-template-columns: 2em 4.5em repeat(2, 1fr) 2em;
padding: 0.55em 0 0.7em;
-webkit-user-drag: none;
user-drag: none;
cursor: default;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
@ -215,9 +214,11 @@
&.drag-above {
border-top: 2px solid var(--tertiary);
}
&.drag-below {
border-bottom: 2px solid var(--tertiary);
}
.link-icon {
grid-column: 2;
}
@ -237,19 +238,23 @@
.btn-flat.add-link {
margin-top: 0.5em;
margin-left: -0.5em;
&:active,
&:focus {
background: none;
}
svg {
color: var(--tertiary);
width: 0.75em;
height: 0.75em;
}
&:hover svg {
color: var(--tertiary-hover);
}
}
.d-modal__footer {
display: grid;
grid-template-columns: auto 1fr auto;
@ -257,36 +262,45 @@
@include breakpoint(mobile-extra-large) {
grid-template-columns: auto 1fr;
justify-items: left;
.mark-public-wrapper {
grid-row: 1;
grid-column: 1 / span 2;
}
.checkbox-label {
padding: 0 0 0.5em 0;
}
}
.reset-link,
.delete {
margin: 0;
justify-self: right;
}
.mark-public-wrapper {
&.-disabled label {
cursor: not-allowed;
}
.checkbox-label {
margin: 0;
}
}
}
.select-kit.multi-select .multi-select-header .formatted-selection {
display: none;
}
.select-kit.is-expanded .select-kit-body {
min-width: 220px;
}
.reset-link {
margin-right: 0;
.discourse-no-touch & {
&:hover {
.d-icon {
@ -294,15 +308,18 @@
}
}
}
.d-icon {
font-size: var(--font-down-1);
color: var(--tertiary);
}
}
.delete-link {
.d-icon {
color: var(--primary-medium);
}
.discourse-no-touch & {
&:hover {
.d-icon {
@ -315,6 +332,7 @@
.sidebar__panel-switch-button {
margin: 1em 1.3em 0 1.3em;
&:last-of-type {
margin-bottom: 1em;
}
@ -356,8 +374,8 @@
border: 0;
background: none;
margin-bottom: 0;
width: 50px;
height: 2em;
&:focus-within {
outline: 0;
}
@ -375,10 +393,12 @@
.sidebar-no-results {
margin: 0.5em var(--d-sidebar-row-horizontal-padding) 0
var(--d-sidebar-row-horizontal-padding);
&__title {
font-weight: bold;
}
}
.sidebar-no-results {
display: block;
}
@ -396,6 +416,7 @@
.sidebar-toggle-all-sections.btn-transparent {
padding-right: 0;
color: var(--d-sidebar-link-color);
svg {
width: 0.75em;
height: 0.85em;

37
app/assets/stylesheets/common/base/tagging.scss
View File

@ -84,6 +84,7 @@
background-color: var(--primary-low);
color: var(--primary-high);
padding: 2px 8px;
.extra-info-wrapper & {
background-color: var(--header_primary-low);
color: var(--header_primary-medium);
@ -100,7 +101,8 @@
margin-right: 0.5em;
display: inline-flex;
align-items: center;
&:before {
&::before {
flex-shrink: 0;
background: var(--primary-low-mid);
margin-right: 5px;
@ -110,7 +112,8 @@
display: inline-block;
content: "";
}
&.large:before {
&.large::before {
width: 13px;
height: 13px;
}
@ -120,7 +123,7 @@
.discourse-tags,
.list-tags,
.search-category {
.discourse-tag.simple:not(:last-child):after {
.discourse-tag.simple:not(:last-child)::after {
content: ",\00a0";
margin-left: 1px;
}
@ -174,10 +177,12 @@ header .discourse-tag {
.tag-sort-options {
margin-bottom: 20px;
a {
text-decoration: underline;
display: inline-flex;
}
span.active a {
font-weight: bold;
}
@ -197,6 +202,7 @@ header .discourse-tag {
.tags-admin-menu {
margin-top: 20px;
ul {
width: 320px;
}
@ -215,11 +221,14 @@ header .discourse-tag {
padding: 20px;
margin: 1em 0;
}
.tag-groups-sidebar {
grid-area: sidebar;
// generic .content-list overrides
width: auto;
float: none;
ul li:last-child {
margin-bottom: 1em;
}
@ -246,9 +255,10 @@ header .discourse-tag {
font-size: var(--font-0);
display: inline-block;
margin-right: 5px;
&.radio {
padding-left: 0px;
margin-right: 0px;
padding-left: 0;
margin-right: 0;
}
}
@ -259,24 +269,30 @@ header .discourse-tag {
grid-template-areas:
"input label"
"empty dropdown";
input {
grid-area: input;
}
label {
grid-area: label;
}
}
.btn {
margin-right: 10px;
}
.group-access-control {
margin-bottom: 1em;
grid-area: dropdown;
grid-row: 2;
}
input[type="radio"] ~ .group-access-control {
display: none;
}
input[type="radio"]:checked ~ .group-access-control {
display: block;
}
@ -288,6 +304,7 @@ header .discourse-tag {
.tag-groups-sidebar {
max-width: 90px;
ul li a {
word-break: break-word;
max-width: 90px;
@ -304,10 +321,12 @@ header .discourse-tag {
.saving {
margin-left: 20px;
}
.parent-tag-section {
.tag-chooser {
width: 210px;
}
.description {
color: var(--primary-medium);
margin-top: 0.5em;
@ -337,6 +356,7 @@ section.tag-info {
#edit-description {
height: 120px;
}
.edit-controls {
display: flex;
gap: 0.5em;
@ -347,17 +367,21 @@ section.tag-info {
display: flex;
font-size: var(--font-up-4);
align-items: baseline;
button {
font-size: var(--font-down-1);
.d-icon {
color: var(--primary-high);
}
.discourse-no-touch & {
&:hover {
background: transparent;
}
}
}
.edit-tag {
color: var(--primary-high);
font-size: var(--font-down-2);
@ -374,6 +398,7 @@ section.tag-info {
display: flex;
align-items: center;
margin-bottom: 0.25em;
a {
margin-left: 0.5em;
}
@ -400,6 +425,7 @@ section.tag-info {
margin: 0.5em 0 0;
padding: 0;
border: none;
a {
color: var(--primary-medium);
}
@ -421,6 +447,7 @@ body.tags-intersection {
.tags-controls {
display: flex;
margin: 0;
h2 {
order: -1;
margin-right: auto;

9
app/assets/stylesheets/common/base/tooltip.scss
View File

@ -1,7 +1,6 @@
#discourse-tooltip {
--d-tooltip-background: var(--secondary);
--d-tooltip-border: var(--primary-medium);
background-color: var(--d-tooltip-background);
position: absolute;
z-index: z("tooltip");
@ -22,8 +21,8 @@
background: var(--d-tooltip-background);
}
.tooltip-pointer:before,
.tooltip-pointer:after {
.tooltip-pointer::before,
.tooltip-pointer::after {
position: absolute;
pointer-events: none;
border: solid transparent;
@ -33,7 +32,7 @@
width: 0;
}
.tooltip-pointer:after {
.tooltip-pointer::after {
border-bottom-color: var(--d-tooltip-background);
border-width: 8px;
left: 50%;
@ -41,7 +40,7 @@
margin-bottom: -0.5px;
}
.tooltip-pointer:before {
.tooltip-pointer::before {
border-bottom-color: var(--d-tooltip-border);
border-width: 9px;
left: 50%;

11
app/assets/stylesheets/common/base/topic-admin-menu.scss
View File

@ -1,5 +1,4 @@
// Styles for the topic admin menu
.topic-admin-popup-menu {
ul {
margin: 0;
@ -7,13 +6,16 @@
li {
border: none;
&:not(:last-of-type) {
// so buttons don't appear "stuck" together when multiple are highlighted
margin-bottom: 2px;
}
}
ul {
padding: 0.5em;
&:not(:last-of-type) {
border-bottom: 1px solid var(--primary-low);
}
@ -35,30 +37,35 @@
}
// Styles for select posts mini menu
.selected-posts {
border: 1px solid var(--tertiary-medium);
background-color: var(--tertiary-low);
.btn {
border: none;
color: var(--secondary);
font-weight: normal;
margin-bottom: 10px;
&:not(.btn-danger) {
background: var(--tertiary);
border-color: var(--tertiary);
&[href] {
color: var(--secondary);
}
&:hover {
color: var(--secondary);
background: var(--tertiary-high);
}
&:active {
@include linear-gradient(var(--tertiary-hover), var(--tertiary));
color: var(--secondary);
}
}
&[disabled] {
text-shadow: 0 1px 0 rgba(var(--primary-rgb), 0.2);
@include linear-gradient(var(--tertiary), var(--tertiary-hover));

5
app/assets/stylesheets/common/base/topic-footer.scss
View File

@ -4,7 +4,6 @@
html.anon & {
justify-content: end;
}
max-width: calc(
var(--topic-avatar-width) + var(--topic-body-width) +
var(--topic-body-width-padding) * 2
@ -52,7 +51,6 @@
display: none;
}
}
display: flex;
justify-content: flex-end;
overflow: hidden;
@ -72,7 +70,6 @@
position: relative;
background-color: var(--secondary);
color: var(--tertiary);
padding: 0.5rem 1em;
border: 1px solid var(--tertiary-low);
@ -89,12 +86,14 @@
font-size: var(--font-up-1);
font-weight: bold;
}
.d-icon {
position: absolute;
right: 8px;
bottom: 9px;
z-index: z("base");
}
.bg {
position: absolute;
top: 0;

41
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -21,7 +21,7 @@
position: relative;
overflow: hidden;
&:before {
&::before {
@media (prefers-reduced-motion: no-preference) {
animation: placeHolderShimmer 4s linear infinite forwards;
}
@ -81,7 +81,7 @@
.svg-icon-title {
margin-left: 3px;
margin-right: 0px;
margin-right: 0;
}
.new_user a,
@ -119,7 +119,7 @@
opacity: 1;
}
&:before {
&::before {
content: svg-uri(
'<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 512 512" fill="#{$primary-medium}"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>'
);
@ -228,7 +228,7 @@
top: 0;
}
img:not(.thumbnail):not(.ytp-thumbnail-image):not(.emoji) {
img:not(.thumbnail, .ytp-thumbnail-image, .emoji) {
max-width: 100%;
height: auto;
display: inline-block; // Ensure dimensions are maintained even after load error
@ -320,7 +320,6 @@ nav.post-controls {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--primary-low-mid);
@include user-select(none);
@ -368,6 +367,7 @@ nav.post-controls {
&.button-count {
// Like count button
height: 100%; // sometimes the font might be shorter than the icon
&:not(.my-likes) {
padding-right: 0;
}
@ -387,7 +387,6 @@ nav.post-controls {
.d-icon {
opacity: 1;
}
display: inline-flex;
}
@ -451,7 +450,6 @@ nav.post-controls {
}
.show-replies {
font-size: var(--font-up-1);
font-size: inherit;
padding: 10px;
color: var(--primary-medium);
@ -484,11 +482,11 @@ nav.post-controls {
.post-info a,
a {
color: currentColor;
color: currentcolor;
}
.d-icon {
color: currentColor;
color: currentcolor;
}
}
@ -506,11 +504,11 @@ nav.post-controls {
.widget-button {
&:hover {
color: currentColor;
color: currentcolor;
background: var(--danger-low);
.d-icon {
color: currentColor;
color: currentcolor;
}
}
@ -538,9 +536,11 @@ nav.post-controls {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
@ -571,9 +571,9 @@ aside.quote {
.title {
@include post-aside;
color: var(--primary-high-or-secondary-low);
padding: 0.8em 0.8em 0 0.8em;
// blockquote is underneath this and has top margin
.avatar {
margin-right: 0.5em;
@ -689,7 +689,7 @@ aside.quote {
.buttons {
display: flex;
flex-wrap: wrap;
@media screen and (max-width: 420px) {
@media screen and (width <= 420px) {
flex-direction: column;
align-items: flex-start;
@ -774,7 +774,7 @@ aside.quote {
// this pseudo element creates a transition buffer zone
// without it, the width change on hover can cause transition jitter
// the width is roughly wide enough to cover long translations of "share"
&:after {
&::after {
content: "";
position: absolute;
display: block;
@ -976,8 +976,6 @@ pre {
top: 0;
min-height: 0;
font-size: var(--font-down-2);
min-height: 0;
font-size: var(--font-down-2);
opacity: 0.7;
cursor: pointer;
@ -1277,7 +1275,6 @@ span.mention {
&:not(a) {
color: var(--primary-low-mid-or-secondary-high);
}
display: inline-flex;
flex-direction: column;
border: 1px solid var(--primary-low);
@ -1295,7 +1292,6 @@ span.mention {
}
/* below standard tablet portrait ----------- */
.reply-to-tab {
display: flex;
align-items: center;
@ -1309,7 +1305,6 @@ span.mention {
}
// Select posts
.topic-post {
&.selected {
article.boxed {
@ -1322,7 +1317,7 @@ span.mention {
}
.topic-body {
.contents:after {
.contents::after {
display: none;
}
}
@ -1349,12 +1344,13 @@ span.mention {
}
}
@media all and (max-width: 767px) {
@media all and (width <= 767px) {
.reply-to-tab {
span {
display: none;
}
}
.user-title {
float: left;
clear: left;
@ -1466,7 +1462,6 @@ iframe {
}
.posts-filtered-notice {
position: -webkit-sticky;
position: sticky;
background-color: var(--tertiary-low);
bottom: 0;
@ -1522,7 +1517,6 @@ iframe {
align-items: flex-end;
> .d-icon {
cursor: pointer;
padding: 0.5em;
margin: 0.5em;
background-color: rgba(var(--always-black-rgb), 0.25);
@ -1619,6 +1613,7 @@ html.discourse-no-touch .fullscreen-table-wrapper:hover {
.read-state {
position: absolute;
// We use absolute positioning here because we want it to display in the padding
align-self: center;
color: var(--tertiary-medium);

59
app/assets/stylesheets/common/base/topic.scss
View File

@ -2,17 +2,21 @@
0% {
margin-bottom: -60px;
}
50% {
margin-bottom: 10px;
}
65% {
margin-bottom: 0px;
margin-bottom: 0;
}
77% {
margin-bottom: 5px;
}
100% {
margin-bottom: 0px;
margin-bottom: 0;
}
}
@ -25,6 +29,7 @@
grid-template-areas: "posts timeline";
grid-template-columns: auto auto;
margin-bottom: var(--below-topic-margin);
> .row {
grid-area: posts;
max-width: calc(
@ -35,6 +40,7 @@
.timeline-container {
margin-left: unset !important;
/* This is a temporary override to ease the transition
to the sticky position timeline for themes with custom timeline positioning.
Without this those themes would render topics unreadable. */
@ -45,7 +51,7 @@
}
// timeline
@media screen and (min-width: 925px) {
@media screen and (width >= 925px) {
// at 925px viewport width and above the timeline is visible (see topic-navigation.js)
.topic-navigation {
grid-area: timeline;
@ -78,7 +84,7 @@
display: flex;
align-items: center;
position: absolute;
right: 0px;
right: 0;
top: 8px;
color: var(--primary);
opacity: 0.5;
@ -86,10 +92,12 @@
}
}
}
// progress bar
@media screen and (max-width: 924px) {
@media screen and (width <= 924px) {
grid-template-areas: "posts";
grid-template-columns: auto;
.topic-navigation {
display: flex;
justify-content: flex-end;
@ -102,6 +110,7 @@
.timeline-container:not(.timeline-fullscreen) {
display: none; // hiding this because sometimes the JS switch lags and causes layout issues
}
.timeline-container .timeline-scroller-content {
position: relative;
}
@ -113,11 +122,12 @@
animation-duration: 0.5s;
animation-name: button-jump-up;
text-align: center;
margin-bottom: 0px;
margin-bottom: 0;
margin-right: 0.5em;
position: absolute;
right: 0;
bottom: 100%; // above parent container + some extra space
.btn {
margin: 0;
}
@ -131,12 +141,15 @@
var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
var(--topic-avatar-width)
);
&:empty {
padding: 0;
}
span .d-icon {
font-size: var(--font-down-1);
}
.topic-timer-heading,
.slow-mode-heading {
display: flex;
@ -144,12 +157,14 @@
margin: 0;
padding: var(--below-topic-margin) 0;
}
.slow-mode-remove,
.topic-timer-modify {
display: flex;
margin-left: auto;
align-self: flex-start;
}
button {
font-size: var(--font-down-2);
background: transparent;
@ -159,12 +174,15 @@
.title-wrapper {
display: flex;
flex-wrap: wrap;
.topic-statuses {
line-height: 1.2;
.d-icon {
color: var(--primary-medium);
}
}
.header-title .private-message-glyph-wrapper {
float: left;
margin-right: 0.25em;
@ -175,10 +193,11 @@
.title-wrapper {
display: flex;
flex-wrap: wrap;
@media screen and (min-width: 925px) {
@media screen and (width >= 925px) {
width: 90%; // topic title isn't full-width on wide screens
}
}
h1 {
margin-bottom: 0;
width: 100%;
@ -187,6 +206,7 @@
a.edit-topic .d-icon {
font-size: 0.8em;
}
.edit-topic-title {
display: flex;
flex-wrap: wrap;
@ -197,6 +217,7 @@
var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
var(--topic-avatar-width)
);
.select-kit .category-row {
max-width: unset;
}
@ -204,6 +225,7 @@
.edit-title__wrapper {
flex: 1 1 100%;
#edit-title {
width: 100%;
margin: 0;
@ -215,6 +237,7 @@
@include breakpoint(tablet) {
min-width: 0; // allows category name to shrink to fit narrow screens
}
.select-kit.combo-box.category-chooser {
width: 100%;
}
@ -229,12 +252,14 @@
.mini-tag-chooser {
width: 100%;
}
.select-kit-header--filter {
flex-wrap: nowrap; // forces the whole input to wrap if needed, rather than individual tags
min-width: 0;
@include breakpoint(tablet) {
flex-wrap: wrap; // individual tags will need to wrap on narrow screens
}
button {
min-width: 0;
}
@ -260,22 +285,27 @@
.private_message {
background: var(--d-content-background);
#topic-title {
.edit-topic-title {
position: relative;
min-width: 0;
.private-message-glyph {
position: absolute;
z-index: 1;
left: 0.75em;
top: 1.2em;
.mobile-view & {
top: 1.1em;
}
}
#edit-title {
padding-left: 2.25em;
}
.mini-tag-chooser {
margin-left: 0;
@include breakpoint(mobile-large, min-width) {
@ -295,7 +325,6 @@
.has-pending-posts {
display: flex;
justify-content: space-between;
padding: 0.5em;
background-color: var(--highlight-bg);
margin-top: 1em;
@ -305,46 +334,58 @@
.post-links-container {
@include unselectable;
clear: both;
.post-links {
margin-top: 1em;
padding-top: 1em;
border-top: 1px solid var(--primary-low);
li:last-of-type {
margin-bottom: 1em;
}
}
.expand-links {
color: var(--primary-med-or-secondary-med);
}
.track-link {
display: flex;
align-items: center;
span:not(.badge) {
@include ellipsis;
}
}
ul {
margin: 0;
list-style: none;
li {
margin-bottom: 0.5em;
a[href] {
color: var(--primary-med-or-secondary-med);
}
.d-icon {
font-size: var(--font-down-2);
margin: 0 0.5em 0 0;
}
}
}
a.reply-new {
.d-icon {
background: var(--secondary);
border-radius: 20px;
transition: all linear 0.15s;
}
&:hover {
color: var(--tertiary);
.d-icon {
background: var(--tertiary-low);
}
@ -358,6 +399,7 @@ a.topic-featured-link {
text-transform: lowercase;
color: var(--primary-med-or-secondary-med);
font-size: 0.875rem;
.d-icon {
font-size: var(--font-down-1);
margin-right: 0.25em;
@ -370,6 +412,7 @@ a.topic-featured-link {
var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
var(--topic-avatar-width)
);
.reviewable-item {
.post-body {
max-height: unset;

23
app/assets/stylesheets/common/base/user-badges.scss
View File

@ -37,19 +37,22 @@
&.disabled {
color: var(--primary-medium);
background-color: var(--primary-very-low);
.fa {
opacity: 0.4;
}
}
}
@media all and (max-width: 750px) {
@media all and (width <= 750px) {
.show-badge .user-badge-with-posts .badge-user a.post-link {
width: auto;
}
.show-badge div.badge-user {
padding: 0;
}
.badges-listing {
display: block;
@ -64,6 +67,7 @@
.row {
display: block;
> div {
display: block;
margin-top: 10px;
@ -82,6 +86,7 @@
.show-badge .single-user {
margin-left: 2%;
padding-bottom: 20px;
.load-more {
padding-top: 30px;
display: block;
@ -91,18 +96,20 @@
.show-badge .single-user .badge-user {
padding-left: 0;
text-align: left;
display: block;
margin: 20px 0;
.badge-info {
display: none;
}
.date {
display: inline-block;
font-size: var(--font-up-1);
margin-left: 10px;
}
.post-link {
font-size: var(--font-up-2);
width: 500px;
@ -111,7 +118,7 @@
}
width: 800px;
&:after {
&::after {
content: "";
clear: both;
display: table;
@ -171,7 +178,7 @@
display: inline-block;
line-height: var(--line-height-medium);
&:after {
&::after {
content: "";
position: absolute;
left: 0;
@ -224,7 +231,7 @@
h3 {
margin-bottom: 0.25em;
font-size: var(--font-up-1);
@media screen and (min-width: 900px) {
@media screen and (width >= 900px) {
font-size: var(--font-up-2);
}
}
@ -235,7 +242,7 @@
width: 100%;
align-self: flex-start;
@media screen and (min-width: 767px) {
@media screen and (width >= 767px) {
max-width: calc(var(--d-max-width) / 2);
}
@ -260,6 +267,7 @@
.badge-groups {
margin: 20px 0;
color: var(--primary-med-or-secondary-med);
h3 {
margin-bottom: 1em;
}
@ -300,6 +308,7 @@
.grant-info-item {
margin-bottom: 1em;
color: var(--primary-med-or-secondary-med);
&:first-of-type {
margin-right: 10px;
}
@ -312,6 +321,7 @@
.badge-title {
height: 100%;
&__saved {
color: var(--success);
}
@ -334,6 +344,7 @@
align-items: baseline;
gap: 0.5em;
margin: 0;
button:last-of-type {
margin-right: auto;
}

72
app/assets/stylesheets/common/base/user.scss
View File

@ -1,6 +1,5 @@
// Common styles for "/user" section
// These styles are also used for "/groups" — test those pages if making significant changes
.user-content-wrapper {
// Grid layout
width: 100%;
@ -8,6 +7,7 @@
grid-template-columns: 1fr 5fr;
grid-template-rows: auto auto 1fr auto;
grid-gap: 20px;
.user-primary-navigation {
grid-column-start: 1;
grid-column-end: 3;
@ -18,12 +18,14 @@
flex-wrap: wrap;
}
}
.user-secondary-navigation {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.solo-preference,
.user-content,
.spinner {
@ -32,6 +34,7 @@
grid-column-start: 1;
grid-column-end: 3;
}
.user-content {
min-width: 100%;
}
@ -41,6 +44,7 @@
grid-column-start: 2;
grid-column-end: 3;
}
.user-additional-controls {
grid-row-start: 3;
align-self: start;
@ -99,6 +103,7 @@
background-position: center center;
background-repeat: no-repeat;
}
.staff-counters {
margin-bottom: 0;
}
@ -116,6 +121,7 @@
dl {
margin: 0;
padding: 0.25em 0;
div {
display: inline-flex;
align-items: baseline;
@ -139,10 +145,12 @@
span:not(:last-of-type) {
margin-right: 0.25em;
}
span:after {
span::after {
content: ",";
}
span:last-of-type:after {
span:last-of-type::after {
content: "";
}
}
@ -189,6 +197,7 @@
.user-profile-avatar {
position: relative;
align-self: flex-start;
.avatar-flair {
bottom: 8px;
right: 16px;
@ -244,6 +253,7 @@
.avatar-flair {
bottom: 8px;
right: 2px;
.d-icon {
font-size: var(--font-0);
}
@ -258,6 +268,7 @@
display: flex;
padding: 10px;
margin-bottom: 16px;
> div,
> div a {
display: flex;
@ -316,9 +327,11 @@
}
}
}
.user-content {
.admin-controls nav {
margin: 0;
.nav-pills {
overflow-x: auto;
}
@ -350,7 +363,7 @@
}
.user-field-value-list-item:not(:last-of-type) {
&:after {
&::after {
// create comma separated list
content: ",";
}
@ -363,34 +376,43 @@
grid-template-columns: 2em 1fr auto;
grid-template-rows: auto auto;
align-items: center;
&:not(:last-of-type) {
margin-bottom: 0.75em;
}
span {
word-break: break-word; // Prevents long emails from breaking the modal width
}
input[type="radio"] {
margin-top: 0;
}
button {
margin-left: auto;
}
label a {
margin: 0;
}
}
--label-max-width: 300px;
label.radio {
display: flex;
align-items: center;
max-width: var(--label-max-width);
margin: 0 0.5em 0 0;
padding: 0;
.avatar {
flex: 0 0 auto;
margin: 0 0.75em 0 0;
}
}
.error {
color: var(--danger);
margin: 0;
@ -401,7 +423,8 @@
}
.top-section {
@include clearfix();
@include clearfix;
ul {
list-style: none;
margin: 0;
@ -411,6 +434,7 @@
.top-section,
.top-sub-section {
margin-bottom: 20px;
&.badges-section {
display: flex;
flex-wrap: wrap;
@ -440,6 +464,7 @@
&.linked-stat {
// This makes the entire "box" (the li) clickable instead of a narrow area.
padding: 0;
a {
padding: 10px 14px 10px 0;
width: 100%;
@ -479,20 +504,23 @@
.user-info .user-detail {
width: 100%;
.name-line {
span {
width: auto;
}
.username {
overflow-wrap: anywhere;
}
> a {
flex-wrap: nowrap;
}
}
}
@media all and (max-width: 600px) {
@media all and (width <= 600px) {
float: none;
width: 100%;
}
@ -516,12 +544,15 @@
.top-categories-section {
table {
max-width: 95%;
tr {
border: none;
}
td,
th {
padding: 0.5em;
&.topic-count,
&.reply-count {
text-align: center;
@ -568,15 +599,18 @@
label {
align-items: center;
display: inline-block;
.d-icon {
margin-right: 3px;
}
}
.select-kit.multi-select {
@include breakpoint(mobile-extra-large) {
width: 100%;
}
}
.show-tracking {
float: right;
}
@ -630,10 +664,12 @@
padding: 8px;
}
}
.featured-topic-link {
padding: 5px 0;
font-weight: bold;
}
.save-theme-alert {
font-size: var(--font-down-1);
}
@ -661,6 +697,7 @@
.success-back {
display: flex;
align-items: center;
.d-icon {
margin-right: 0.25em;
}
@ -668,6 +705,7 @@
@mixin inactiveMode() {
color: var(--primary-medium);
.select-kit.combo-box .select-kit-header {
border-color: var(--primary-medium);
}
@ -803,6 +841,7 @@
.select-kit {
.select-kit-header {
background: transparent;
&:hover .d-icon {
color: var(--primary-high);
}
@ -833,7 +872,6 @@
textarea.backup-codes-area {
flex: 1 1 100%;
height: 100%;
resize: none;
margin: 0;
padding: 0.5em;
@ -843,6 +881,7 @@
cursor: auto;
outline: none;
font-family: var(--d-font-family--monospace);
&:focus {
box-shadow: none;
border-color: var(--primary-low);
@ -853,6 +892,7 @@
padding: 0.5em;
flex: 1 1 2em;
margin-left: auto;
.btn {
margin-bottom: 0.5em;
}
@ -881,10 +921,12 @@
font-weight: bold;
font-size: var(--font-up-5);
line-height: var(--line-height-medium);
.d-icon {
font-size: 0.8em;
vertical-align: baseline;
}
.user-status-message {
display: inline-flex;
vertical-align: baseline;
@ -900,6 +942,7 @@
font-size: var(--font-0);
margin-top: 0.5em;
@include ellipsis;
.d-icon {
font-size: var(--font-down-1);
color: var(--primary-high);
@ -910,6 +953,7 @@
.user-profile__location-and-website {
display: flex;
max-width: 100%;
.user-profile-location {
margin-right: 1em;
}
@ -920,27 +964,31 @@
margin-bottom: 1em;
text-align: justify;
overflow-y: auto;
.selectable-avatar {
margin: 5px;
display: inline-block;
position: relative;
.avatar {
cursor: pointer;
width: 60px;
height: 60px;
}
&:hover {
.selectable-avatar__remove {
visibility: visible;
}
}
&__remove {
visibility: hidden;
color: var(--primary-high);
position: absolute;
bottom: 0px;
bottom: 0;
width: 100%;
left: 0px;
left: 0;
text-align: center;
font-size: var(--font-up-2);
}
@ -996,10 +1044,12 @@
.notification-schedule-table {
.notification-schedule-tbody {
border-top-width: 1px;
.day {
.day-label {
padding: 1em 1em 1em 0;
}
.to {
padding: 0 0.5em;
}
@ -1014,15 +1064,19 @@
.controls {
display: flex;
flex-direction: column;
.control-label.alt-placeholder {
order: 1;
}
.ember-text-field {
order: 2;
}
.tip {
order: 3;
}
.instructions {
order: 4;
}

1
app/assets/stylesheets/common/components/add-pm-participants.scss
View File

@ -96,6 +96,7 @@
.invite-user-input-wrapper {
display: flex;
div.ac-wrap {
flex: 1;
}

13
app/assets/stylesheets/common/components/badges.scss
View File

@ -14,7 +14,6 @@
// Category badges
// --------------------------------------------------
.badge-category__wrapper {
color: var(--primary-high);
overflow: hidden;
@ -32,7 +31,7 @@
color: var(--primary-high);
min-width: 0;
&:before {
&::before {
content: "";
background: var(--category-badge-color);
flex: 0 0 auto;
@ -41,14 +40,14 @@
}
&__name {
color: currentColor;
color: currentcolor;
text-overflow: ellipsis;
overflow: hidden;
min-width: 0;
}
&.--has-parent {
&:before {
&::before {
background: linear-gradient(
90deg,
var(--parent-category-badge-color) 50%,
@ -71,7 +70,6 @@
// Notification badge
// --------------------------------------------------
.badge-notification {
@extend %badge;
position: relative;
@ -83,6 +81,7 @@
line-height: var(--line-height-small);
text-align: center;
background-color: var(--primary-low-mid-or-secondary-low);
&[href] {
color: var(--secondary);
}
@ -92,7 +91,6 @@
}
// Unread posts
&.unread-posts {
background-color: var(--tertiary-med-or-tertiary);
color: var(--secondary);
@ -116,11 +114,11 @@
// Posts badge
// --------------------------------------------------
.badge-posts {
font-weight: normal;
font-size: var(--font-0);
line-height: var(--line-height-small);
&[href] {
color: var(--primary-med-or-secondary-med);
}
@ -128,7 +126,6 @@
// Group badge
// --------------------------------------------------
.badge-group {
@extend %badge;
padding: 2px 5px;

7
app/assets/stylesheets/common/components/banner.scss
View File

@ -1,7 +1,6 @@
// --------------------------------------------------
// Banner
// --------------------------------------------------
#banner {
padding: 1em;
background: var(--tertiary-low);
@ -16,15 +15,17 @@
display: flex;
> .btn {
padding-top: 0em;
padding-bottom: 0em;
padding-top: 0;
padding-bottom: 0;
color: var(--primary-high);
.d-icon {
color: var(--primary-medium);
}
&:hover {
color: var(--primary);
.d-icon {
color: var(--primary-high);
}

6
app/assets/stylesheets/common/components/bookmark-list.scss
View File

@ -15,6 +15,7 @@ $mobile-breakpoint: 700px;
padding-right: 0.5em;
}
}
.main-link.topic-list-data {
.bookmark-status-with-link {
a.title {
@ -22,10 +23,12 @@ $mobile-breakpoint: 700px;
}
}
}
.d-icon.bookmark-pinned {
font-size: var(--font-down-2);
margin-right: 0.2em;
}
.bookmark-metadata {
font-size: var(--font-down-2);
margin-bottom: 0.25em;
@ -35,6 +38,7 @@ $mobile-breakpoint: 700px;
margin-right: 1em;
margin-bottom: 0.25em;
line-height: var(--line-height-medium);
span {
word-break: break-word;
}
@ -48,6 +52,7 @@ $mobile-breakpoint: 700px;
margin-right: 0.25em;
}
}
.bookmark-status-with-link {
display: flex;
flex-direction: row;
@ -56,6 +61,7 @@ $mobile-breakpoint: 700px;
.mobile-view & {
margin-bottom: 0.15em;
}
.topic-statuses {
float: none;
}

1
app/assets/stylesheets/common/components/bookmark-menu.scss
View File

@ -49,6 +49,7 @@
color: var(--primary) !important;
background: var(--tertiary-very-low);
}
.--remove & {
color: var(--danger);
}

2
app/assets/stylesheets/common/components/bookmark-modal.scss
View File

@ -12,6 +12,7 @@
margin-bottom: 0.5em;
}
}
&__footer {
.delete-bookmark {
margin-left: auto;
@ -47,7 +48,6 @@
.select-kit {
width: 100%;
}
margin-bottom: 18px;
label {

77
app/assets/stylesheets/common/components/buttons.scss
View File

@ -20,6 +20,7 @@
margin: 0;
font-weight: normal;
color: $text-color;
&:visited {
// covers cases where we add button classes to links
color: $text-color;
@ -33,19 +34,23 @@
border-radius: var(--d-button-border-radius);
transition: var(--d-button-transition);
cursor: pointer;
.d-icon {
color: $icon-color;
margin-right: 0.45em;
transition: var(--d-button-transition);
// For Windows High Contrast (see whcm.scss for more)
@media (forced-colors: active) {
color: ButtonText;
}
}
.d-button-label + .d-icon {
margin-left: 0.45em;
margin-right: 0;
}
&.no-text {
.d-icon {
margin-right: 0;
@ -54,18 +59,22 @@
@include hover {
background-color: $hover-bg-color;
color: $hover-text-color;
.d-icon {
color: $hover-icon-color;
// For Windows High Contrast (see whcm.scss for more)
@media (forced-colors: active) {
color: Highlight;
}
}
}
&:focus-visible {
outline: none;
background-color: $hover-bg-color;
color: $hover-text-color;
.d-icon {
color: $hover-icon-color;
@media (forced-colors: active) {
@ -74,34 +83,40 @@
}
}
.discourse-no-touch &:active:not(:hover):not(:focus),
.discourse-no-touch &.btn-active:not(:hover):not(:focus),
&:active:not(:hover):not(:focus),
&.btn-active:not(:hover):not(:focus) {
.discourse-no-touch &:active:not(:hover, :focus),
.discourse-no-touch &.btn-active:not(:hover, :focus),
&:active:not(:hover, :focus),
&.btn-active:not(:hover, :focus) {
@include darken-background($bg-color, 0.6);
color: $hover-text-color;
.d-icon {
color: $hover-icon-color;
}
}
.discourse-no-touch &:active,
.discourse-no-touch &.btn-active,
&:active,
&.btn-active {
@include darken-background($bg-color, 0.3);
color: $hover-text-color;
.d-icon {
color: $hover-icon-color;
}
}
&[disabled],
&.disabled {
&:not(.is-loading) {
opacity: 0.4;
}
&:hover {
color: $text-color;
background: $bg-color;
.d-icon {
color: $icon-color;
}
@ -136,14 +151,12 @@
// Default button
// --------------------------------------------------
.btn {
@include btn;
}
// Primary button
// --------------------------------------------------
.btn-primary {
@include btn(
$text-color: var(--secondary),
@ -156,7 +169,6 @@
// Danger button
// --------------------------------------------------
.btn-danger {
@include btn(
$text-color: var(--secondary),
@ -169,7 +181,6 @@
// ✘ and ✔ buttons
// --------------------------------------------------
.btn.cancel {
@include btn(
$text-color: var(--secondary),
@ -192,65 +203,77 @@
// Social buttons
// --------------------------------------------------
.btn-social {
color: #000;
background: #fff;
border-radius: var(--d-border-radius);
&:focus-visible {
outline: 1px solid #000;
}
&[href] {
color: var(--secondary);
}
&:before {
&::before {
margin-right: 9px;
font-size: var(--font-0);
}
.d-icon,
&.btn:hover .d-icon {
color: #000;
}
&.cas {
.d-icon {
color: var(--cas);
}
&:hover {
.d-icon {
color: var(--cas);
}
}
}
&.twitter {
.d-icon {
color: var(--twitter);
}
&:hover {
.d-icon {
color: var(--twitter);
}
}
}
&.github {
.d-icon {
color: var(--github);
}
&:hover {
.d-icon {
color: var(--github);
}
}
}
&.discord {
.d-icon {
color: var(--discord);
}
&:hover {
.d-icon {
color: var(--discord);
}
}
}
// https://developers.facebook.com/docs/facebook-login/userexperience/#buttondesign
// if you are unable to use Facebook blue, revert to black and white.
}
@ -259,69 +282,79 @@
// --------------------------------------------------
// Small
.btn-small {
font-size: var(--font-down-1);
min-height: 20px;
}
// Large
.btn-large {
font-size: var(--font-up-1);
}
// Bonus Buttons
// --------------------------------------------------
.btn-flat {
background: transparent;
border: 0;
line-height: var(--line-height-small);
transition: var(--d-button-transition);
.d-icon {
color: var(--primary-low-mid);
transition: var(--d-button-transition);
}
.discourse-no-touch & {
&:hover,
&:focus-visible {
color: var(--primary);
.d-icon {
color: var(--primary);
}
}
&:hover {
background: transparent;
}
&:focus-visible {
background: var(--primary-low);
}
}
&.close {
background: transparent;
font-size: var(--font-up-2);
.d-icon {
color: var(--primary-high);
}
.discourse-no-touch & {
&:hover,
&:focus-visible {
background: transparent;
.d-icon {
color: var(--primary);
}
}
}
&:focus-visible {
background: transparent;
.d-icon {
color: var(--primary);
}
}
}
&.btn-text {
color: var(--tertiary);
&[disabled] {
&,
&:hover,
@ -330,6 +363,7 @@
color: var(--primary);
}
}
&:not([disabled]) {
&:hover,
&.btn-hover,
@ -343,13 +377,16 @@
}
}
}
&:focus-visible {
outline: none;
background: var(--primary-low);
.d-icon {
color: var(--primary);
}
}
&.back-button {
margin-bottom: 1em;
}
@ -360,12 +397,14 @@
border: 0;
padding: 0;
color: var(--tertiary);
.discourse-no-touch & {
&:hover {
color: var(--tertiary);
background: transparent;
}
}
&:focus-visible {
color: var(--tertiary);
background: transparent;
@ -375,12 +414,15 @@
@mixin btn-colors($btn-color) {
color: var(--#{$btn-color});
.d-icon {
color: inherit;
}
&:focus-visible {
color: var(--#{$btn-color}-hover);
}
.discourse-no-touch & {
&:hover {
color: var(--#{$btn-color}-hover);
@ -394,32 +436,40 @@
background: transparent;
border: 0;
color: var(--primary);
.d-icon {
color: var(--primary-high);
}
&:focus-visible {
background: transparent;
color: var(--tertiary-hover);
.d-icon {
color: inherit;
}
}
.discourse-no-touch & {
&:hover {
background: transparent;
color: var(--tertiary-hover);
.d-icon {
color: inherit;
}
}
}
}
&.btn-primary {
@include btn-colors("tertiary");
}
&.btn-danger {
@include btn-colors("danger");
}
&.btn-success {
@include btn-colors("success");
}
@ -428,6 +478,7 @@
.btn-mini-toggle {
border-radius: var(--d-border-radius);
padding: 0.4em 0.467em;
.d-icon {
color: var(--primary-medium);
}

1
app/assets/stylesheets/common/components/calendar-date-time-input.scss
View File

@ -2,7 +2,6 @@
.fake-input {
display: none;
}
padding: 5px;
border: 1px solid var(--primary-low);
z-index: 1;

4
app/assets/stylesheets/common/components/color-input.scss
View File

@ -10,9 +10,11 @@
padding-left: 0.5em;
padding-right: 0.5em;
}
.hex-input {
margin: 0;
}
.picker {
padding: 0;
border-left: none;
@ -20,10 +22,12 @@
margin-bottom: 0;
height: unset;
}
// Reset webkit/blink default style
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
border-radius: 0; // Reset webkit specific style

1
app/assets/stylesheets/common/components/conditional-loading-section.scss
View File

@ -25,6 +25,7 @@
from {
opacity: 0;
}
to {
opacity: 1;
}

69
app/assets/stylesheets/common/components/d-lightbox.scss
View File

@ -1,5 +1,4 @@
/* Main document */
html.has-lightbox {
overflow: hidden;
@ -16,16 +15,15 @@ html.has-lightbox {
}
--carousel-item-size: clamp(6.5rem, 12vh, 15rem);
--d-lightbox-primary: #ffffff;
--d-lightbox-secondary: #000000;
--d-lightbox-primary: #fff;
--d-lightbox-secondary: #000;
--d-lightbox-secondary-translucent: rgba(0, 0, 0, 0.25);
--d-lightbox-tertiary: #222222;
--d-lightbox-tertiary: #222;
}
/* Lightbox element*/
/* Lightbox element */
// Grid
.d-lightbox {
overscroll-behavior: contain;
@ -46,7 +44,6 @@ html.has-lightbox {
&.is-vertical &__content {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto auto;
grid-template-areas:
"lightbox-header"
"lightbox-body"
@ -102,7 +99,6 @@ html.has-lightbox {
grid-area: lightbox-body;
display: grid;
place-items: center stretch;
grid-auto-flow: column;
grid-template-columns: auto 1fr auto;
grid-template-areas: "lightbox-previous-button lightbox-main-image lightbox-next-button";
@ -192,6 +188,7 @@ html.has-lightbox {
&__carousel-items {
grid-auto-flow: column;
}
&__carousel-item,
&__carousel-item.is-current {
height: var(--carousel-item-size);
@ -226,7 +223,6 @@ html.has-lightbox {
}
/* Base styles */
.d-lightbox {
&.is-visible {
position: fixed;
@ -256,7 +252,6 @@ html.has-lightbox {
var(--d-lightbox-secondary),
transparent
);
position: relative;
}
}
@ -330,12 +325,14 @@ html.has-lightbox {
gap: 0 0.25em;
word-break: break-word;
max-width: 100%;
// right/left padding to align with buttons
padding: 0 0.65em;
border: 1px solid transparent;
width: 100%;
min-width: 0;
overflow: hidden;
&:focus-visible {
outline: none;
border: 1px solid var(--tertiary);
@ -363,6 +360,7 @@ html.has-lightbox {
position: relative;
color: var(--d-lightbox-primary);
}
&__carousel-previous-button,
&__carousel-next-button {
z-index: 2;
@ -410,8 +408,9 @@ html.has-lightbox {
&.is-vertical &__carousel {
position: relative;
background-color: var(--d-lightbox-secondary-translucent);
&:before,
&:after {
&::before,
&::after {
content: "";
position: absolute;
display: block;
@ -421,15 +420,10 @@ html.has-lightbox {
width: 20%;
}
&:before {
&::before {
left: 0;
top: 0;
background: var(--d-lightbox-secondary);
-webkit-mask-image: linear-gradient(
90deg,
var(--d-lightbox-secondary),
transparent
);
mask-image: linear-gradient(
90deg,
var(--d-lightbox-secondary),
@ -437,15 +431,10 @@ html.has-lightbox {
);
}
&:after {
&::after {
right: 0;
bottom: 0;
background: var(--d-lightbox-secondary);
-webkit-mask-image: linear-gradient(
-90deg,
var(--d-lightbox-secondary),
transparent
);
mask-image: linear-gradient(
-90deg,
var(--d-lightbox-secondary),
@ -454,12 +443,12 @@ html.has-lightbox {
}
.rtl & {
&:before {
&::before {
left: auto;
right: 0;
}
&:after {
&::after {
left: 0;
right: auto;
}
@ -479,8 +468,9 @@ html.has-lightbox {
.d-lightbox {
&.is-horizontal &__carousel {
position: relative;
&:before,
&:after {
&::before,
&::after {
content: "";
position: absolute;
display: block;
@ -490,15 +480,10 @@ html.has-lightbox {
width: 100%;
}
&:before {
&::before {
left: 0;
top: 0;
background: var(--d-lightbox-secondary);
-webkit-mask-image: linear-gradient(
180deg,
var(--d-lightbox-secondary),
transparent
);
mask-image: linear-gradient(
180deg,
var(--d-lightbox-secondary) 20%,
@ -506,15 +491,10 @@ html.has-lightbox {
);
}
&:after {
&::after {
right: 0;
bottom: 0;
background: var(--d-lightbox-secondary);
-webkit-mask-image: linear-gradient(
0,
var(--d-lightbox-secondary),
transparent
);
mask-image: linear-gradient(
0,
var(--d-lightbox-secondary) 20%,
@ -555,6 +535,7 @@ html.has-lightbox {
&:focus-visible {
outline: 1px solid var(--tertiary);
border-radius: 1px;
.d-icon {
color: var(--tertiary);
}
@ -616,7 +597,6 @@ html.has-lightbox {
&.can-zoom {
.d-lightbox__body {
@extend %lightbox-scrollable;
overflow: auto;
height: 100%;
width: 100%;
@ -677,6 +657,7 @@ html.has-lightbox {
.d-lightbox__body {
gap: 0;
}
.d-lightbox__main-image,
.d-lightbox__zoomed-image-container {
transform: rotate(var(--d-lightbox-image-rotation));
@ -707,7 +688,6 @@ html.has-lightbox {
}
/* Animations */
.d-lightbox {
&.is-visible &__content {
@extend %lightbox-animation-base;
@ -755,9 +735,10 @@ html.has-lightbox {
// MOZ
scrollbar-width: none;
overflow: auto;
// Webkit
overflow: overlay;
&::-webkit-scrollbar {
display: none;
}
@ -767,6 +748,7 @@ html.has-lightbox {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
@ -776,6 +758,7 @@ html.has-lightbox {
0% {
opacity: 0;
}
100% {
opacity: 1;
}

4
app/assets/stylesheets/common/components/d-page-header.scss
View File

@ -45,11 +45,11 @@ $mobile-breakpoint: 700px;
.horizontal-overflow-nav {
background: transparent;
&:before {
&::before {
display: none;
}
&:after {
&::after {
display: none;
}
}

1
app/assets/stylesheets/common/components/d-select.scss
View File

@ -6,7 +6,6 @@
border-radius: var(--d-input-border-radius);
box-sizing: border-box;
margin: 0;
appearance: none;
padding: 0 2em 0 0.5em !important;
appearance: none;
background-image: svg-uri(

1
app/assets/stylesheets/common/components/d-toggle-switch.scss
View File

@ -19,7 +19,6 @@
background-color: var(--tertiary-hover);
}
}
display: flex;
align-items: center;
gap: 0.5rem;

Some files were not shown because too many files have changed in this diff Show More