mirror of
https://github.com/discourse/discourse.git
synced 2024-12-01 10:44:50 +08:00
94ed54a616
This moves the logic for horizontally placing the topic progress wrapper from the JS component to SCSS. Doing so means it is more easily overridable by themes and plugins. This also changes the left/right spacing from 1em to 2em for non-mobile screens (it fits better on iPad portrait especially).
229 lines
6.1 KiB
SCSS
229 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;
|
|
|
|
// 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";
|