mirror of
https://github.com/discourse/discourse.git
synced 2024-12-18 17:14:01 +08:00
fb41fccb20
* UX: remove border radius from PMs * UX: add default 2px border radius
210 lines
3.8 KiB
SCSS
210 lines
3.8 KiB
SCSS
// These CSS custom properties are added here instead of in variables.scss
|
|
// because variables.scss is injected into every theme CSS file
|
|
// which causes problems when overriding custom properties in themes
|
|
|
|
:root {
|
|
--topic-body-width: #{$topic-body-width};
|
|
--topic-body-width-padding: #{$topic-body-width-padding};
|
|
--topic-avatar-width: #{$topic-avatar-width};
|
|
--d-border-radius: 2px;
|
|
--d-border-radius-large: 2px;
|
|
--d-nav-pill-border-radius: var(--d-border-radius);
|
|
--d-button-border-radius: var(--d-border-radius);
|
|
--d-input-border-radius: var(--d-border-radius);
|
|
--d-content-background: initial;
|
|
--d-font-family--monospace: Consolas, Menlo, Monaco, "Lucida Console",
|
|
"Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
|
|
"Courier New", monospace;
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// Base styles for HTML elements
|
|
// --------------------------------------------------
|
|
|
|
html {
|
|
color: var(--primary);
|
|
font-family: var(--font-family);
|
|
font-size: var(--base-font-size);
|
|
line-height: var(--line-height-large);
|
|
background-color: var(--secondary);
|
|
overflow-y: scroll;
|
|
direction: ltr;
|
|
|
|
&.text-size-smallest {
|
|
font-size: var(--base-font-size-smallest);
|
|
}
|
|
|
|
&.text-size-smaller {
|
|
font-size: var(--base-font-size-smaller);
|
|
}
|
|
|
|
&.text-size-larger {
|
|
font-size: var(--base-font-size-larger);
|
|
}
|
|
|
|
&.text-size-largest {
|
|
font-size: var(--base-font-size-largest);
|
|
}
|
|
}
|
|
|
|
// Links
|
|
// --------------------------------------------------
|
|
|
|
a {
|
|
color: var(--tertiary);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
&:visited {
|
|
color: var(--tertiary);
|
|
}
|
|
&:hover {
|
|
color: var(--tertiary);
|
|
}
|
|
&:active {
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
|
|
// Typography
|
|
// --------------------------------------------------
|
|
|
|
hr {
|
|
display: block;
|
|
height: 1px;
|
|
margin: 1em 0;
|
|
border: 0;
|
|
border-top: 1px solid var(--primary-low);
|
|
padding: 0;
|
|
}
|
|
|
|
// Lists
|
|
// --------------------------------------------------
|
|
|
|
ul,
|
|
ol,
|
|
dd {
|
|
margin: 1em 0 1em 1.25em;
|
|
padding: 0;
|
|
}
|
|
|
|
.cooked ul,
|
|
.cooked ol,
|
|
.cooked dd {
|
|
clear: both;
|
|
}
|
|
|
|
.cooked,
|
|
.d-editor-preview {
|
|
ul,
|
|
ol {
|
|
padding-left: 1.25em;
|
|
}
|
|
}
|
|
|
|
li,
|
|
.cooked li,
|
|
.d-editor-preview li {
|
|
> ul,
|
|
> ol {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
// Embedded content
|
|
// --------------------------------------------------
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.svg-icon {
|
|
color: inherit;
|
|
}
|
|
|
|
// Forms
|
|
// --------------------------------------------------
|
|
|
|
fieldset {
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
pre code {
|
|
overflow: auto;
|
|
-moz-tab-size: 4;
|
|
tab-size: 4;
|
|
&.lang-markdown {
|
|
white-space: pre-wrap;
|
|
}
|
|
}
|
|
|
|
// Tables
|
|
// --------------------------------------------------
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
tbody {
|
|
border-top: 3px solid var(--primary-low);
|
|
}
|
|
|
|
.topic-list-item,
|
|
tr {
|
|
border-bottom: 1px solid var(--primary-low);
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
&.highlighted {
|
|
animation: background-fade-highlight 2.5s ease-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
// https://en.wikipedia.org/wiki/Ruby_character
|
|
ruby > rt {
|
|
font-size: 72%; // ~10px with 14px base
|
|
}
|
|
|
|
// Buttons (was in normalized)
|
|
// --------------------------------------------------
|
|
|
|
button,
|
|
html input[type="button"],
|
|
input[type="reset"],
|
|
input[type="submit"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
// Inline form
|
|
// --------------------------------------------------
|
|
|
|
.inline-form {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
&.full-width {
|
|
display: flex;
|
|
}
|
|
|
|
> input[type="text"],
|
|
> input[type="search"],
|
|
> input[type="password"] {
|
|
display: inline-flex;
|
|
flex: 1;
|
|
}
|
|
|
|
> .select-kit,
|
|
> input[type="text"],
|
|
> input[type="search"],
|
|
> input[type="password"],
|
|
> label,
|
|
> .btn,
|
|
> .d-date-input {
|
|
margin-bottom: 0.5em; // for when items wrap (mobile, narrow windows)
|
|
margin-right: 0.5em;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|