mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 06:30:15 +08:00
a4356b99af
Allows site administrators to pick different fonts for headings in the wizard and in their site settings. Also correctly displays the header logos in wizard previews.
230 lines
6.1 KiB
SCSS
230 lines
6.1 KiB
SCSS
// --------------------------------------------------
|
|
// Variables used throughout the theme
|
|
// --------------------------------------------------
|
|
|
|
// Layout dimensions
|
|
// --------------------------------------------------
|
|
|
|
$small-width: 800px !default;
|
|
$medium-width: 995px !default;
|
|
$large-width: 1110px !default;
|
|
|
|
$input-padding: 4px 10px;
|
|
$topic-body-width: 690px;
|
|
$topic-body-width-padding: 11px;
|
|
$topic-avatar-width: 45px;
|
|
$reply-area-max-width: 1475px !default;
|
|
|
|
// Brand color variables
|
|
// --------------------------------------------------
|
|
|
|
$google: #ffffff !default;
|
|
$google-hover: darken($google, 5%) !default;
|
|
$instagram: #e1306c !default;
|
|
$instagram-hover: darken($instagram, 15%) !default;
|
|
$facebook: #4267b2 !default;
|
|
$facebook-hover: darken($facebook, 15%) !default;
|
|
$cas: #70ba61 !default;
|
|
$twitter: #1da1f2 !default;
|
|
$twitter-hover: darken($twitter, 10%) !default;
|
|
$github: #100e0f !default;
|
|
$github-hover: lighten($github, 20%) !default;
|
|
$discord: #7289da !default;
|
|
$discord-hover: darken($discord, 10%) !default;
|
|
|
|
// Badge color variables
|
|
// --------------------------------------------------
|
|
|
|
$gold: rgb(231, 195, 0) !default;
|
|
$silver: #c0c0c0 !default;
|
|
$bronze: #cd7f32 !default;
|
|
|
|
// Fonts
|
|
// --------------------------------------------------
|
|
|
|
$base-font-size-smallest: 0.815em !default; // eq. to 13px
|
|
$base-font-size-smaller: 0.875em !default; // eq. to 14px
|
|
$base-font-size: 0.938em !default; // eq. to 15px
|
|
$base-font-size-larger: 1.063em !default; // eq. to 17px
|
|
$base-font-size-largest: 1.118em !default; // eq. to 19px
|
|
$base-font-family: var(--font-family) !default;
|
|
$heading-font-family: var(--heading-font-family) !default;
|
|
|
|
// Font-size defintions, multiplier ^ (step / interval)
|
|
$font-up-6: 2.296em;
|
|
$font-up-5: 2em;
|
|
$font-up-4: 1.7511em;
|
|
$font-up-3: 1.5157em;
|
|
$font-up-2: 1.3195em;
|
|
$font-up-1: 1.1487em; // 2^(1/5)
|
|
$font-0: 1em;
|
|
$font-down-1: 0.8706em; // 2^(-1/5)
|
|
$font-down-2: 0.7579em; // Smallest size we use based on the 1em base
|
|
$font-down-3: 0.6599em;
|
|
$font-down-4: 0.5745em;
|
|
$font-down-5: 0.5em;
|
|
$font-down-6: 0.4355em;
|
|
|
|
// inputs/textareas in iOS need to be at least 16px to avoid triggering zoom on focus
|
|
// with base at 15px, the below gives 16.05px
|
|
$font-size-ios-input: 1.07em;
|
|
|
|
// Common line-heights
|
|
$line-height-small: 1;
|
|
$line-height-medium: 1.2; // Headings or large text
|
|
$line-height-large: 1.4; // Normal or small text
|
|
|
|
// These files don't actually exist. They're injected by Stylesheet::Compiler.
|
|
// --------------------------------------------------
|
|
|
|
@import "theme_colors";
|
|
@import "plugins_variables";
|
|
@import "common/foundation/math";
|
|
|
|
// Z-index
|
|
// --------------------------------------------------
|
|
|
|
$z-layers: (
|
|
"max": 9999,
|
|
"modal": (
|
|
"tooltip": 1600,
|
|
"popover": 1500,
|
|
"dropdown": 1400,
|
|
"content": 1300,
|
|
"overlay": 1200,
|
|
),
|
|
"fullscreen": 1150,
|
|
"mobile-composer": 1100,
|
|
"ipad-header-nav": 1020,
|
|
"header": 1000,
|
|
"footer-nav": 900,
|
|
"tooltip": 600,
|
|
"composer": (
|
|
"dropdown": 700,
|
|
"tooltip": 600,
|
|
"popover": 500,
|
|
"content": 400,
|
|
),
|
|
"dropdown": 300,
|
|
"usercard": 200,
|
|
"timeline": 100,
|
|
"base": 1,
|
|
);
|
|
|
|
@function map-has-nested-keys($map, $keys...) {
|
|
@each $key in $keys {
|
|
@if not map-has-key($map, $key) {
|
|
@return false;
|
|
}
|
|
$map: map-get($map, $key);
|
|
}
|
|
@return true;
|
|
}
|
|
|
|
@function map-deep-get($map, $keys...) {
|
|
@each $key in $keys {
|
|
$map: map-get($map, $key);
|
|
}
|
|
@return $map;
|
|
}
|
|
|
|
@function z($layers...) {
|
|
@if not map-has-nested-keys($z-layers, $layers...) {
|
|
@warn "No layer defined for `#{inspect($layers...)}` in $z-layers map. Check variables.scss, property omitted.";
|
|
}
|
|
@return map-deep-get($z-layers, $layers...);
|
|
}
|
|
|
|
// Box-shadow
|
|
// --------------------------------------------------
|
|
|
|
$box-shadow: (
|
|
"modal": 0 8px 60px rgba(0, 0, 0, 0.6),
|
|
"composer": 0 -1px 40px rgba(0, 0, 0, 0.12),
|
|
"menu-panel": 0 12px 12px rgba(0, 0, 0, 0.15),
|
|
"card": 0 4px 14px rgba(0, 0, 0, 0.15),
|
|
"dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.2),
|
|
"header": 0 2px 4px -1px rgba(0, 0, 0, 0.25),
|
|
"footer-nav": 0 0 2px 0 rgba(0, 0, 0, 0.25),
|
|
"kbd": (
|
|
0 2px 0 rgba(0, 0, 0, 0.2),
|
|
0 0 0 1px dark-light-choose(#fff, #000) inset,
|
|
),
|
|
"focus": 0 0 6px 0 $tertiary,
|
|
"focus-danger": 0 0 6px 0 $danger,
|
|
);
|
|
|
|
@function shadow($key) {
|
|
@return map-get($box-shadow, $key);
|
|
}
|
|
|
|
// Color utilities
|
|
// --------------------------------------------------
|
|
|
|
// w3c definition of color brightness https://www.w3.org/TR/AERT#color-contrast
|
|
@function dc-color-brightness($color) {
|
|
@return (
|
|
(red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114)
|
|
);
|
|
}
|
|
|
|
// Uses an approximation of sRGB blending, GAMMA=2 instead of GAMMA=2.2
|
|
@function srgb-scale($foreground, $background, $percent) {
|
|
$ratio: ($percent / 100%);
|
|
$iratio: 1 - $ratio;
|
|
$f_r2: red($foreground) * red($foreground);
|
|
$f_g2: green($foreground) * green($foreground);
|
|
$f_b2: blue($foreground) * blue($foreground);
|
|
$b_r2: red($background) * red($background);
|
|
$b_g2: green($background) * green($background);
|
|
$b_b2: blue($background) * blue($background);
|
|
$r_r2: $f_r2 * $ratio + $b_r2 * $iratio;
|
|
$r_g2: $f_g2 * $ratio + $b_g2 * $iratio;
|
|
$r_b2: $f_b2 * $ratio + $b_b2 * $iratio;
|
|
$r_r: sqrt($r_r2);
|
|
$r_g: sqrt($r_g2);
|
|
$r_b: sqrt($r_b2);
|
|
@return rgb($r_r, $r_g, $r_b);
|
|
}
|
|
|
|
// Replaces dark-light-diff($primary, $secondary, 50%, -50%)
|
|
@function blend-primary-secondary($percent) {
|
|
@return srgb-scale($primary, $secondary, $percent);
|
|
}
|
|
|
|
@function dark-light-diff(
|
|
$adjusted-color,
|
|
$comparison-color,
|
|
$lightness,
|
|
$darkness
|
|
) {
|
|
@if dc-color-brightness($adjusted-color) <
|
|
dc-color-brightness($comparison-color)
|
|
{
|
|
@return scale-color($adjusted-color, $lightness: $lightness);
|
|
} @else {
|
|
@return scale-color($adjusted-color, $lightness: $darkness);
|
|
}
|
|
}
|
|
@function dark-light-choose($light-theme-result, $dark-theme-result) {
|
|
@if is-light-color-scheme() {
|
|
@return $light-theme-result;
|
|
} @else {
|
|
@return $dark-theme-result;
|
|
}
|
|
}
|
|
|
|
@function is-light-color-scheme() {
|
|
@if dc-color-brightness($primary) < dc-color-brightness($secondary) {
|
|
@return true;
|
|
} @else {
|
|
@return false;
|
|
}
|
|
}
|
|
|
|
@function is-dark-color-scheme() {
|
|
@return not is-light-color-scheme();
|
|
}
|
|
|
|
@import "color_transformations";
|