@inkdropapp/base-ui-theme
Version:
Base UI Theme for Inkdrop
1,712 lines (1,696 loc) • 847 kB
CSS
/*
███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗
██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║
███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║
╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║
███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║
╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝
Import this file into your LESS project to use Semantic UI without build tools
*/
@layer theme.ui.base {
/* Global */
/*!
* # Semantic UI - Site
* http://github.com/semantic-org/semantic-ui/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
/*******************************
Theme
*******************************/
/*
████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗
╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝
██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗
██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║
██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║
╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝
*/
/*******************************
Theme Selection
*******************************/
/* To override a theme for an individual element
specify theme name below
*/
/* Global */
/* Elements */
/* Collections */
/* Modules */
/* Views */
/*******************************
Folders
*******************************/
/* Path to theme packages */
/* Path to site override folder */
/*******************************
Import Theme
*******************************/
/*******************************
Import Directives
*******************************/
/*------------------
Theme
-------------------*/
/*--------------------
Site Variables
---------------------*/
/* Default site.variables */
/*******************************
Site Settings
*******************************/
/*-------------------
Fonts
--------------------*/
/*-------------------
Base Sizes
--------------------*/
/* This is the single variable that controls them all */
/* The size of page text */
/*-------------------
Border Radius
--------------------*/
/* See Power-user section below
for explanation of @px variables
*/
/*-------------------
Brand Colors
--------------------*/
/*--------------
Page Heading
---------------*/
/*--------------
Form Input
---------------*/
/* This adjusts the default form input across all elements */
/* Input Text Color */
/* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */
/*-------------------
Focused Input
--------------------*/
/* Used on inputs, textarea etc */
/* Used on dropdowns, other larger blocks */
/*-------------------
Sizes
--------------------*/
/*
Sizes are all expressed in terms of 14px/em (default em)
This ensures these "ratios" remain constant despite changes in EM
*/
/*-------------------
Page
--------------------*/
/*-------------------
Paragraph
--------------------*/
/*-------------------
Links
--------------------*/
/*-------------------
Scroll Bars
--------------------*/
/* Inverted */
/*-------------------
Highlighted Text
--------------------*/
/*-------------------
Loader
--------------------*/
/*-------------------
Grid
--------------------*/
/*-------------------
Transitions
--------------------*/
/*-------------------
Breakpoints
--------------------*/
/*-------------------
Site Colors
--------------------*/
/*--- Colors ---*/
/*--- Light Colors ---*/
/*--- Neutrals ---*/
/*--- Colored Backgrounds ---*/
/*--- Colored Headers ---*/
/*--- Colored Text ---*/
/*--- Colored Border ---*/
/*-------------------
Alpha Colors
--------------------*/
/*-------------------
Accents
--------------------*/
/* Differentiating Neutrals */
/* Differentiating Layers */
/*******************************
Power-User
*******************************/
/*-------------------
Emotive Colors
--------------------*/
/* Positive */
/* Negative */
/* Info */
/* Warning */
/*-------------------
Em Sizes
--------------------*/
/*
This rounds @size values to the closest pixel then expresses that value in (r)em.
This ensures all size values round to exact pixels
*/
/* em */
/* rem */
/*-------------------
Icons
--------------------*/
/* Maximum Glyph Width of Icon */
/*-------------------
Neutral Text
--------------------*/
/*-------------------
Brand Colors
--------------------*/
/*-------------------
Borders
--------------------*/
/*-------------------
Derived Values
--------------------*/
/* Loaders Position Offset */
/* Rendered Scrollbar Width */
/* Maximum Single Character Glyph Width, aka Capital "W" */
/* Used to match floats with text */
/* Header Spacing */
/* Minimum Mobile Width */
/* Positive / Negative Dupes */
/* Responsive */
/*-------------------
Exact Pixel Values
--------------------*/
/*
These are used to specify exact pixel values in em
for things like borders that remain constantly
sized as emSize adjusts
Since there are many more sizes than names for sizes,
these are named by their original pixel values.
*/
/* Columns */
/*******************************
States
*******************************/
/*-------------------
Disabled
--------------------*/
/*-------------------
Hover
--------------------*/
/*--- Shadows ---*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/*-------------------
Focus
--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/*-------------------
Down (:active)
--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/*-------------------
Active
--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/* Packaged site.variables */
/*******************************
Site Settings
*******************************/
/*-------------------
Fonts
--------------------*/
/*-------------------
Base Sizes
--------------------*/
/* This is the single variable that controls them all */
/* The size of page text */
/*-------------------
Border Radius
--------------------*/
/* See Power-user section below
for explanation of @px variables
*/
/*-------------------
Brand Colors
--------------------*/
/*--------------
Page Heading
---------------*/
/*--------------
Form Input
---------------*/
/* This adjusts the default form input across all elements */
/* Input Text Color */
/* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */
/*-------------------
Focused Input
--------------------*/
/* Used on inputs, textarea etc */
/* Used on dropdowns, other larger blocks */
/*-------------------
Sizes
--------------------*/
/*
Sizes are all expressed in terms of 14px/em (default em)
This ensures these "ratios" remain constant despite changes in EM
*/
/*-------------------
Page
--------------------*/
/*-------------------
Paragraph
--------------------*/
/*-------------------
Links
--------------------*/
/*-------------------
Scroll Bars
--------------------*/
/* Inverted */
/*-------------------
Highlighted Text
--------------------*/
/*-------------------
Loader
--------------------*/
/*-------------------
Grid
--------------------*/
/*-------------------
Transitions
--------------------*/
/*-------------------
Breakpoints
--------------------*/
/*-------------------
Site Colors
--------------------*/
/*--- Colors ---*/
/*--- Light Colors ---*/
/*--- Neutrals ---*/
/*--- Colored Backgrounds ---*/
/*--- Colored Headers ---*/
/*--- Colored Text ---*/
/*--- Colored Border ---*/
/*-------------------
Alpha Colors
--------------------*/
/*-------------------
Accents
--------------------*/
/* Differentiating Neutrals */
/* Differentiating Layers */
/*******************************
Power-User
*******************************/
/*-------------------
Emotive Colors
--------------------*/
/* Positive */
/* Negative */
/* Info */
/* Warning */
/*-------------------
Em Sizes
--------------------*/
/*
This rounds @size values to the closest pixel then expresses that value in (r)em.
This ensures all size values round to exact pixels
*/
/* em */
/* rem */
/*-------------------
Icons
--------------------*/
/* Maximum Glyph Width of Icon */
/*-------------------
Neutral Text
--------------------*/
/*-------------------
Brand Colors
--------------------*/
/*-------------------
Borders
--------------------*/
/*-------------------
Derived Values
--------------------*/
/* Loaders Position Offset */
/* Rendered Scrollbar Width */
/* Maximum Single Character Glyph Width, aka Capital "W" */
/* Used to match floats with text */
/* Header Spacing */
/* Minimum Mobile Width */
/* Positive / Negative Dupes */
/* Responsive */
/*-------------------
Exact Pixel Values
--------------------*/
/*
These are used to specify exact pixel values in em
for things like borders that remain constantly
sized as emSize adjusts
Since there are many more sizes than names for sizes,
these are named by their original pixel values.
*/
/* Columns */
/*******************************
States
*******************************/
/*-------------------
Disabled
--------------------*/
/*-------------------
Hover
--------------------*/
/*--- Shadows ---*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/*-------------------
Focus
--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/*-------------------
Down (:active)
--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/*-------------------
Active
--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/* Component's site.variables */
/*******************************
Site Settings
*******************************/
/*-------------------
Fonts
--------------------*/
/*-------------------
Base Sizes
--------------------*/
/* This is the single variable that controls them all */
/* The size of page text */
/*-------------------
Border Radius
--------------------*/
/* See Power-user section below
for explanation of @px variables
*/
/*-------------------
Brand Colors
--------------------*/
/*--------------
Page Heading
---------------*/
/*--------------
Form Input
---------------*/
/* This adjusts the default form input across all elements */
/* Input Text Color */
/* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */
/*-------------------
Focused Input
--------------------*/
/* Used on inputs, textarea etc */
/* Used on dropdowns, other larger blocks */
/*-------------------
Sizes
--------------------*/
/*
Sizes are all expressed in terms of 14px/em (default em)
This ensures these "ratios" remain constant despite changes in EM
*/
/*-------------------
Page
--------------------*/
/*-------------------
Paragraph
--------------------*/
/*-------------------
Links
--------------------*/
/*-------------------
Scroll Bars
--------------------*/
/* Inverted */
/*-------------------
Highlighted Text
--------------------*/
/*-------------------
Loader
--------------------*/
/*-------------------
Grid
--------------------*/
/*-------------------
Transitions
--------------------*/
/*-------------------
Breakpoints
--------------------*/
/*-------------------
Site Colors
--------------------*/
/*--- Colors ---*/
/*--- Light Colors ---*/
/*--- Neutrals ---*/
/*--- Colored Backgrounds ---*/
/*--- Colored Headers ---*/
/*--- Colored Text ---*/
/*--- Colored Border ---*/
/*-------------------
Alpha Colors
--------------------*/
/*-------------------
Accents
--------------------*/
/* Differentiating Neutrals */
/* Differentiating Layers */
/*******************************
Power-User
*******************************/
/*-------------------
Emotive Colors
--------------------*/
/* Positive */
/* Negative */
/* Info */
/* Warning */
/*-------------------
Em Sizes
--------------------*/
/*
This rounds @size values to the closest pixel then expresses that value in (r)em.
This ensures all size values round to exact pixels
*/
/* em */
/* rem */
/*-------------------
Icons
--------------------*/
/* Maximum Glyph Width of Icon */
/*-------------------
Neutral Text
--------------------*/
/*-------------------
Brand Colors
--------------------*/
/*-------------------
Borders
--------------------*/
/*-------------------
Derived Values
--------------------*/
/* Loaders Position Offset */
/* Rendered Scrollbar Width */
/* Maximum Single Character Glyph Width, aka Capital "W" */
/* Used to match floats with text */
/* Header Spacing */
/* Minimum Mobile Width */
/* Positive / Negative Dupes */
/* Responsive */
/*-------------------
Exact Pixel Values
--------------------*/
/*
These are used to specify exact pixel values in em
for things like borders that remain constantly
sized as emSize adjusts
Since there are many more sizes than names for sizes,
these are named by their original pixel values.
*/
/* Columns */
/*******************************
States
*******************************/
/*-------------------
Disabled
--------------------*/
/*-------------------
Hover
--------------------*/
/*--- Shadows ---*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/*-------------------
Focus
--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/*-------------------
Down (:active)
--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/*-------------------
Active
--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/* Site theme site.variables */
/*******************************
User Global Variables
*******************************/
/*-------------------
Component Variables
---------------------*/
/* Default */
/*******************************
Site Settings
*******************************/
/*-------------------
Fonts
--------------------*/
/*-------------------
Base Sizes
--------------------*/
/* This is the single variable that controls them all */
/* The size of page text */
/*-------------------
Border Radius
--------------------*/
/* See Power-user section below
for explanation of @px variables
*/
/*-------------------
Brand Colors
--------------------*/
/*--------------
Page Heading
---------------*/
/*--------------
Form Input
---------------*/
/* This adjusts the default form input across all elements */
/* Input Text Color */
/* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */
/*-------------------
Focused Input
--------------------*/
/* Used on inputs, textarea etc */
/* Used on dropdowns, other larger blocks */
/*-------------------
Sizes
--------------------*/
/*
Sizes are all expressed in terms of 14px/em (default em)
This ensures these "ratios" remain constant despite changes in EM
*/
/*-------------------
Page
--------------------*/
/*-------------------
Paragraph
--------------------*/
/*-------------------
Links
--------------------*/
/*-------------------
Scroll Bars
--------------------*/
/* Inverted */
/*-------------------
Highlighted Text
--------------------*/
/*-------------------
Loader
--------------------*/
/*-------------------
Grid
--------------------*/
/*-------------------
Transitions
--------------------*/
/*-------------------
Breakpoints
--------------------*/
/*-------------------
Site Colors
--------------------*/
/*--- Colors ---*/
/*--- Light Colors ---*/
/*--- Neutrals ---*/
/*--- Colored Backgrounds ---*/
/*--- Colored Headers ---*/
/*--- Colored Text ---*/
/*--- Colored Border ---*/
/*-------------------
Alpha Colors
--------------------*/
/*-------------------
Accents
--------------------*/
/* Differentiating Neutrals */
/* Differentiating Layers */
/*******************************
Power-User
*******************************/
/*-------------------
Emotive Colors
--------------------*/
/* Positive */
/* Negative */
/* Info */
/* Warning */
/*-------------------
Em Sizes
--------------------*/
/*
This rounds @size values to the closest pixel then expresses that value in (r)em.
This ensures all size values round to exact pixels
*/
/* em */
/* rem */
/*-------------------
Icons
--------------------*/
/* Maximum Glyph Width of Icon */
/*-------------------
Neutral Text
--------------------*/
/*-------------------
Brand Colors
--------------------*/
/*-------------------
Borders
--------------------*/
/*-------------------
Derived Values
--------------------*/
/* Loaders Position Offset */
/* Rendered Scrollbar Width */
/* Maximum Single Character Glyph Width, aka Capital "W" */
/* Used to match floats with text */
/* Header Spacing */
/* Minimum Mobile Width */
/* Positive / Negative Dupes */
/* Responsive */
/*-------------------
Exact Pixel Values
--------------------*/
/*
These are used to specify exact pixel values in em
for things like borders that remain constantly
sized as emSize adjusts
Since there are many more sizes than names for sizes,
these are named by their original pixel values.
*/
/* Columns */
/*******************************
States
*******************************/
/*-------------------
Disabled
--------------------*/
/*-------------------
Hover
--------------------*/
/*--- Shadows ---*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/*-------------------
Focus
--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/*-------------------
Down (:active)
--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/*-------------------
Active
--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/* Packaged Theme */
/*******************************
Site Settings
*******************************/
/*-------------------
Fonts
--------------------*/
/*-------------------
Base Sizes
--------------------*/
/* This is the single variable that controls them all */
/* The size of page text */
/*-------------------
Border Radius
--------------------*/
/* See Power-user section below
for explanation of @px variables
*/
/*-------------------
Brand Colors
--------------------*/
/*--------------
Page Heading
---------------*/
/*--------------
Form Input
---------------*/
/* This adjusts the default form input across all elements */
/* Input Text Color */
/* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */
/*-------------------
Focused Input
--------------------*/
/* Used on inputs, textarea etc */
/* Used on dropdowns, other larger blocks */
/*-------------------
Sizes
--------------------*/
/*
Sizes are all expressed in terms of 14px/em (default em)
This ensures these "ratios" remain constant despite changes in EM
*/
/*-------------------
Page
--------------------*/
/*-------------------
Paragraph
--------------------*/
/*-------------------
Links
--------------------*/
/*-------------------
Scroll Bars
--------------------*/
/* Inverted */
/*-------------------
Highlighted Text
--------------------*/
/*-------------------
Loader
--------------------*/
/*-------------------
Grid
--------------------*/
/*-------------------
Transitions
--------------------*/
/*-------------------
Breakpoints
--------------------*/
/*-------------------
Site Colors
--------------------*/
/*--- Colors ---*/
/*--- Light Colors ---*/
/*--- Neutrals ---*/
/*--- Colored Backgrounds ---*/
/*--- Colored Headers ---*/
/*--- Colored Text ---*/
/*--- Colored Border ---*/
/*-------------------
Alpha Colors
--------------------*/
/*-------------------
Accents
--------------------*/
/* Differentiating Neutrals */
/* Differentiating Layers */
/*******************************
Power-User
*******************************/
/*-------------------
Emotive Colors
--------------------*/
/* Positive */
/* Negative */
/* Info */
/* Warning */
/*-------------------
Em Sizes
--------------------*/
/*
This rounds @size values to the closest pixel then expresses that value in (r)em.
This ensures all size values round to exact pixels
*/
/* em */
/* rem */
/*-------------------
Icons
--------------------*/
/* Maximum Glyph Width of Icon */
/*-------------------
Neutral Text
--------------------*/
/*-------------------
Brand Colors
--------------------*/
/*-------------------
Borders
--------------------*/
/*-------------------
Derived Values
--------------------*/
/* Loaders Position Offset */
/* Rendered Scrollbar Width */
/* Maximum Single Character Glyph Width, aka Capital "W" */
/* Used to match floats with text */
/* Header Spacing */
/* Minimum Mobile Width */
/* Positive / Negative Dupes */
/* Responsive */
/*-------------------
Exact Pixel Values
--------------------*/
/*
These are used to specify exact pixel values in em
for things like borders that remain constantly
sized as emSize adjusts
Since there are many more sizes than names for sizes,
these are named by their original pixel values.
*/
/* Columns */
/*******************************
States
*******************************/
/*-------------------
Disabled
--------------------*/
/*-------------------
Hover
--------------------*/
/*--- Shadows ---*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/*-------------------
Focus
--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/*-------------------
Down (:active)
--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/*-------------------
Active
--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Brand ---*/
/*--- Dark Tones ---*/
/*--- Light Tones ---*/
/* Site Theme */
/*******************************
User Global Variables
*******************************/
/*******************************
Mix-ins
*******************************/
/*------------------
Fonts
-------------------*/
/*------------------
Overrides
-------------------*/
/* End Config */
/*******************************
Page
*******************************/
html,
body {
height: 100%;
}
html {
font-size: var(--em-size, 14px);
}
body {
margin: 0px;
padding: 0px;
overflow-x: var(--page-overflow-x, hidden);
min-width: var(--page-min-width, 320px);
background: transparent;
font-family: var(--page-font, -apple-system, BlinkMacSystemFont, Segoe UI, 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol);
font-size: var(--font-size, 14px);
line-height: var(--line-height, 1.4285em);
color: var(--text-color, rgba(0, 0, 0, 0.87));
font-smoothing: var(--font-smoothing, antialiased);
}
/*******************************
Headers
*******************************/
h1,
h2,
h3,
h4,
h5 {
font-family: var(--header-font, -apple-system, BlinkMacSystemFont, Segoe UI, 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol);
line-height: var(--header-line-height, 1.28571429em);
margin: var(--header-margin, calc(2rem - 0.1428571428571429em) 0em 1rem);
font-weight: var(--header-font-weight, 600);
padding: 0em;
}
h1 {
min-height: 1rem;
font-size: var(--h1, 2rem);
}
h2 {
font-size: var(--h2, 1.71428571rem);
}
h3 {
font-size: var(--h3, 1.28571429rem);
}
h4 {
font-size: var(--h4, 1.07142857rem);
}
h5 {
font-size: var(--h5, 1rem);
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child {
margin-top: 0em;
}
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child {
margin-bottom: 0em;
}
/*******************************
Text
*******************************/
p {
margin: var(--paragraph-margin, 0em 0em 1em);
line-height: var(--paragraph-line-height, 1.4285em);
}
p:first-child {
margin-top: 0em;
}
p:last-child {
margin-bottom: 0em;
}
/*-------------------
Links
--------------------*/
a {
color: var(--link-color, #4183C4);
text-decoration: var(--link-underline, none);
}
a:hover {
color: var(--link-hover-color, #1e70bf);
text-decoration: var(--link-hover-underline, none);
}
/*******************************
Scrollbars
*******************************/
/*******************************
Highlighting
*******************************/
/* Site */
::-webkit-selection {
background-color: var(--highlight-background, #CCE2FF);
color: var(--highlight-color, rgba(0, 0, 0, 0.87));
}
::-moz-selection {
background-color: var(--highlight-background, #CCE2FF);
color: var(--highlight-color, rgba(0, 0, 0, 0.87));
}
::selection {
background-color: var(--highlight-background, #CCE2FF);
color: var(--highlight-color, rgba(0, 0, 0, 0.87));
}
/* Form */
textarea::-webkit-selection,
input::-webkit-selection {
background-color: var(--input-highlight-background, rgba(100, 100, 100, 0.4));
color: var(--input-highlight-color, rgba(0, 0, 0, 0.87));
}
textarea::-moz-selection,
input::-moz-selection {
background-color: var(--input-highlight-background, rgba(100, 100, 100, 0.4));
color: var(--input-highlight-color, rgba(0, 0, 0, 0.87));
}
textarea::selection,
input::selection {
background-color: var(--input-highlight-background, rgba(100, 100, 100, 0.4));
color: var(--input-highlight-color, rgba(0, 0, 0, 0.87));
}
/*******************************
Global Overrides
*******************************/
.sidebar-layout-content {
color-scheme: var(--sidebar-color-scheme);
}
/*******************************
Site Overrides
*******************************/
:root {
/*******************************
Site Settings
*******************************/
/*-------------------
Fonts
--------------------*/
--font-name: -apple-system, BlinkMacSystemFont, Segoe UI, 'Lato';
--font-smoothing: antialiased;
--header-font: -apple-system, BlinkMacSystemFont, Segoe UI, 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
--page-font: -apple-system, BlinkMacSystemFont, Segoe UI, 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
/*-------------------
Base Sizes
--------------------*/
/* This is the single variable that controls them all */
--em-size: 14px;
/* The size of page text */
--font-size: 14px;
/*-------------------
Border Radius
--------------------*/
/* See Power-user section below
for explanation of @px variables
*/
--relative-border-radius: 0.35714286em;
--absolute-border-radius: 0.35714286rem;
--default-border-radius: 0.35714286rem;
/*-------------------
Brand Colors
--------------------*/
--primary-color: var(--color-blue-500);
--secondary-color: var(--color-zinc-900);
--light-primary-color: var(--color-blue-400);
--light-secondary-color: var(--color-neutral-700);
/*--------------
Page Heading
---------------*/
--header-font-weight: 600;
--header-line-height: 1.28571429em;
--h1: 2rem;
--h2: 1.71428571rem;
--h3: 1.28571429rem;
--h4: 1.07142857rem;
--h5: 1rem;
/*--------------
Form Input
---------------*/
/* This adjusts the default form input across all elements */
--input-background: #FFFFFF;
--input-vertical-padding: 0.78571429em;
--input-horizontal-padding: 1em;
--input-padding: 0.78571429em 1em;
/* Input Text Color */
--input-color: rgba(0, 0, 0, 0.87);
--input-placeholder-color: rgba(191, 191, 191, 0.87);
--input-placeholder-focus-color: rgba(115, 115, 115, 0.87);
--input-error-placeholder-color: #e7bdbc;
--input-error-placeholder-focus-color: #da9796;
/* Line Height Default For Inputs in Browser */
--input-line-height: 1.21428571em;
/*-------------------
Focused Input
--------------------*/
/* Used on inputs, textarea etc */
--focused-form-border-color: #85B7D9;
/* Used on dropdowns, other larger blocks */
--focused-form-muted-border-color: #96C8DA;
--unfocused-outline-color: transparent;
--unfocused-outline-offset: 0.4rem;
--focused-outline-style: solid;
--focused-outline-width: 0.14285714rem;
--focused-outline-color: color-mix(in srgb, #96C8DA, transparent 30%);
--focused-outline-offset: 0rem;
/*-------------------
Sizes
--------------------*/
/*
Sizes are all expressed in terms of 14px/em (default em)
This ensures these "ratios" remain constant despite changes in EM
*/
--mini-size: 0.78571429;
--tiny-size: 0.85714286;
--small-size: 0.92857143;
--medium-size: 1;
--large-size: 1.14285714;
--big-size: 1.28571429;
--huge-size: 1.42857143;
--massive-size: 1.71428571;
/*-------------------
Page
--------------------*/
--page-background: #FFFFFF;
--page-overflow-x: hidden;
--line-height: 1.4285em;
--text-color: hsl(var(--hsl-black) / 87%);
/*-------------------
Paragraph
--------------------*/
--paragraph-margin: 0em 0em 1em;
--paragraph-line-height: 1.4285em;
/*-------------------
Links
--------------------*/
--link-color: var(--color-blue-500);
--link-underline: none;
--link-hover-color: var(--color-blue-600);
--link-hover-underline: none;
/*-------------------
Highlighted Text
--------------------*/
--highlight-background: var(--color-blue-200);
--highlight-color: var(--text-color);
--input-highlight-background: hsl(var(--hsl-neutral-600) / 40%);
--input-highlight-color: var(--text-color);
/*-------------------
Loader
--------------------*/
--loader-size: 1.28571429em;
--loader-speed: 0.6s;
--loader-line-width: 0.2em;
--loader-fill-color: rgba(0, 0, 0, 0.1);
--loader-line-color: #767676;
--inverted-loader-fill-color: rgba(255, 255, 255, 0.15);
--inverted-loader-line-color: #FFFFFF;
/*-------------------
Grid
--------------------*/
--column-count: 16;
/*-------------------
Transitions
--------------------*/
--default-duration: 0.1s;
--default-easing: ease;
/*-------------------
Breakpoints
--------------------*/
--mobile-breakpoint: 320px;
--tablet-breakpoint: 768px;
--computer-breakpoint: 992px;
--large-monitor-breakpoint: 1200px;
--widescreen-monitor-breakpoint: 1920px;
/*-------------------
Site Colors
--------------------*/
/*--- Colors ---*/
--red: var(--color-red-500);
--orange: var(--color-orange-500);
--yellow: var(--color-yellow-500);
--olive: var(--color-lime-500);
--green: var(--color-green-500);
--teal: var(--color-teal-500);
--blue: var(--color-blue-500);
--violet: var(--color-violet-500);
--purple: var(--color-purple-500);
--pink: var(--color-pink-500);
--brown: var(--color-yellow-800);
--grey: var(--color-neutral-500);
--black: var(--color-neutral-900);
/*--- Light Colors ---*/
--light-red: var(--color-red-400);
--light-orange: var(--color-orange-400);
--light-yellow: var(--color-yellow-400);
--light-olive: var(--color-lime-400);
--light-green: var(--color-green-400);
--light-teal: var(--color-teal-400);
--light-blue: var(--color-blue-400);
--light-violet: var(--color-violet-400);
--light-purple: var(--color-purple-400);
--light-pink: var(--color-pink-400);
--light-brown: var(--color-yellow-700);
--light-grey: var(--color-neutral-300);
--light-black: var(--color-neutral-700);
/*--- Neutrals ---*/
--full-black: var(--color-black);
--off-white: var(--color-gray-50);
--dark-white: var(--color-gray-100);
--mid-white: var(--color-gray-200);
--white: var(--color-white);
/*--- Colored Backgrounds ---*/
--red-background: var(--color-red-100);
--orange-background: var(--color-orange-100);
--yellow-background: var(--color-yellow-100);
--olive-background: var(--color-lime-100);
--green-background: var(--color-green-100);
--teal-background: var(--color-teal-100);
--blue-background: var(--color-blue-100);
--violet-background: var(--color-violet-100);
--purple-background: var(--color-purple-100);
--pink-background: var(--color-pink-100);
--brown-background: var(--color-orange-100);
/*--- Colored Headers ---*/
--red-header-color: var(--color-red-600);
--orange-header-color: var(--color-orange-600);
--yellow-header-color: var(--color-yellow-800);
--olive-header-color: var(--color-lime-700);
--green-header-color: var(--color-green-700);
--teal-header-color: var(--color-teal-700);
--blue-header-color: var(--color-blue-600);
--violet-header-color: var(--color-violet-600);
--purple-header-color: var(--color-purple-600);
--pink-header-color: var(--color-pink-600);
--brown-header-color: var(--color-yellow-900);
/*--- Colored Text ---*/
--red-text-color: var(--color-red-500);
--orange-text-color: var(--color-orange-500);
--yellow-text-color: var(--color-yellow-700);
--olive-text-color: var(--color-lime-600);
--green-text-color: var(--color-green-600);
--teal-text-color: var(--color-teal-600);
--blue-text-color: var(--color-blue-500);
--violet-text-color: var(--color-violet-500);
--purple-text-color: var(--color-purple-500);
--pink-text-color: var(--color-pink-500);
--brown-text-color: var(--color-yellow-800);
/*--- Colored Border ---*/
--red-border-color: var(--red-text-color);
--orange-border-color: var(--orange-text-color);
--yellow-border-color: var(--yellow-text-color);
--olive-border-color: var(--olive-text-color);
--green-border-color: var(--green-text-color);
--teal-border-color: var(--teal-text-color);
--blue-border-color: var(--blue-text-color);
--violet-border-color: var(--violet-text-color);
--purple-border-color: var(--purple-text-color);
--pink-border-color: var(--pink-text-color);
--brown-border-color: var(--brown-text-color);
/*-------------------
Alpha Colors
--------------------*/
--subtle-transparent-black: rgba(0, 0, 0, 0.03);
--transparent-black: rgba(0, 0, 0, 0.05);
--strong-transparent-black: rgba(0, 0, 0, 0.1);
--very-strong-transparent-black: rgba(0, 0, 0, 0.15);
--subtle-transparent-white: rgba(255, 255, 255, 0.02);
--transparent-white: rgba(255, 255, 255, 0.08);
--strong-transparent-white: rgba(255, 255, 255, 0.15);
/*-------------------
Accents
--------------------*/
/* Differentiating Neutrals */
--subtle-gradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
/* Differentiating Layers */
--subtle-shadow: 0px 1px 2px 0 var(--border-color);
--floating-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12),
0px 2px 10px 0px rgba(34, 36, 38, 0.15);
--raised-shadow: 0px 2px 3px 0px var(--border-color);
/*******************************
Power-User
*******************************/
/*-------------------
Emotive Colors
--------------------*/
/* Positive */
--positive-color: hsl(var(--hsl-green-500));
--positive-background-color: hsl(var(--hsl-green-500) / 10%);
--positive-border-color: hsl(var(--hsl-green-600) / 50%);
--positive-header-color: hsl(var(--hsl-green-800) / 90%);
--positive-text-color: hsl(var(--hsl-green-900) / 90%);
/* Negative */
--negative-color: hsl(var(--hsl-red-500));
--negative-background-color: hsl(var(--hsl-red-500) / 10%);
--negative-border-color: hsl(var(--hsl-red-500) / 50%);
--negative-header-color: hsl(var(--hsl-red-800) / 90%);
--negative-text-color: hsl(var(--hsl-red-800) / 90%);
/* Info */
--info-color: hsl(var(--hsl-sky-500));
--info-background-color: hsl(var(--hsl-sky-500) / 10%);
--info-border-color: hsl(var(--hsl-sky-500) / 70%);
--info-header-color: hsl(var(--hsl-sky-800) / 90%);
--info-text-color: hsl(var(--hsl-sky-800) / 90%);
/* Warning */
--warning-color: hsl(var(--hsl-amber-400));
--warning-background-color: hsl(var(--hsl-yellow-500) / 10%);
--warning-border-color: hsl(var(--hsl-amber-600) / 70%);
--warning-header-color: hsl(var(--hsl-yellow-800) / 90%);
--warning-text-color: hsl(var(--hsl-amber-900) / 90%);
/*-------------------
Em Sizes
--------------------*/
/*
This rounds @size values to the closest pixel then expresses that value in (r)em.
This ensures all size values round to exact pixels
*/
--mini: 0.78571429rem;
--tiny: 0.85714286rem;
--small: 0.92857143rem;
--medium: 1rem;
--large: 1.14285714rem;
--big: 1.28571429rem;
--huge: 1.42857143rem;
--massive: 1.71428571rem;
/* em */
--relative-mini: 0.78571429em;
--relative-tiny: 0.85714286em;
--relative-small: 0.92857143em;
--relative-medium: 1em;
--relative-large: 1.14285714em;
--relative-big: 1.28571429em;
--relative-huge: 1.42857143em;
--relative-massive: 1.71428571em;
/* rem */
--absolute-mini: 0.78571429rem;
--absolute-tiny: 0.85714286rem;
--absolute-small: 0.92857143rem;
--absolute-medium: 1rem;
--absolute-large: 1.14285714rem;
--absolute-big: 1.28571429rem;
--absolute-huge: 1.42857143rem;
--absolute-massive: 1.71428571rem;
/*-------------------
Icons
--------------------*/
/* Maximum Glyph Width of Icon */
--icon-width: 1.18em;
/*-------------------
Neutral Text
--------------------*/
--dark-text-color: hsl(var(--hsl-black) / 85%);
--muted-text-color: hsl(var(--hsl-black) / 60%);
--light-text-color: hsl(var(--hsl-black) / 40%);
--unselected-text-color: hsl(var(--hsl-black) / 40%);
--hovered-text-color: hsl(var(--hsl-black) / 80%);
--pressed-text-color: hsl(var(--hsl-black) / 90%);
--selected-text-color: hsl(var(--hsl-black) / 95%);
--disabled-text-color: hsl(var(--hsl-black) / 20%);
--inverted-text-color: hsl(var(--hsl-white) / 90%);
--inverted-muted-text-color: hsl(var(--hsl-white) / 80%);
--inverted-light-text-color: hsl(var(--hsl-white) / 70%);
--inverted-unselected-text-color: hsl(var(--hsl-white) / 50%);
--inverted-hovered-text-color: hsl(var(--hsl-white) / 100%);
--inverted-pressed-text-color: hsl(var(--hsl-white) / 100%);
--inverted-selected-text-color: hsl(var(--hsl-white) / 100%);
--inverted-disabled-text-color: hsl(var(--hsl-white) / 20%);
/*-------------------
Borders
--------------------*/
--circular-radius: 500rem;
--border-color: hsl(var(--hsl-neutral-900) / 15%);
--strong-border-color: hsl(var(--hsl-neutral-900) / 22%);
--internal-border-color: hsl(var(--hsl-neutral-900) / 10%);
--selected-border-color: hsl(var(--hsl-neutral-900) / 35%);
--strong-selected-border-color: hsl(var(--hsl-neutral-900) / 50%);
--disabled-border-color: hsl(var(--hsl-neutral-900) / 50%);
--solid-internal-border-color: var(--color-neutral-50);
--solid-border-color: var(--color-zinc-300);
--solid-selected-border-color: var(--color-neutral-400);
--white-border-color: hsl(var(--hsl-white) / 10%);
--selected-white-border-color: hsl(var(--hsl-white) / 80%);
--solid-white-border-color: var(--color-neutral-400);
--selected-solid-white-border-color: var(--color-neutral-300);
/*-------------------
Derived Values
--------------------*/
/* Loaders Position Offset */
--loader-offset: -0.64285714em;
--loader-margin: -0.64285714em 0em 0em -0.64285714em;
/* Maximum Single Character Glyph Width, aka Capital "W" */
--glyph-width: 1.1em;
/* Used to match floats with text */
--line-height-offset: 0.21425em;
--header-line-height-offset: 0.14285714em;
/* Header Spacing */
--header-top-margin: calc(2rem - 0.1428571428571429em);
--header-bottom-margin: 1rem;
--header-margin: calc(2rem - 0.1428571428571429em) 0em 1rem;
/* Minimum Mobile Width */
--page-min-width: 320px;
/* Positive / Negative Dupes */
--success-background-color: var(--positive-background-color);
--success-color: var(--positive-color);
--success-border-color: var(--positive-border-color);
--success-header-color: var(--positive-header-color);
--success-text-color: var(--positive-text-color);
--error-background-color: var(--negative-background-color);
--error-color: var(--negative-color);
--error-border-color: var(--negative-border-color);
--error-header-color: var(--negative-header-color);
--error-text-color: var(--negative-text-color);
/* Responsive */
--largest-mobile-screen: 767px;
--largest-tablet-screen: 991px;
--largest-small-monitor: 1199px;
--largest-large-monitor: 1919px;
/*-------------------
Exact Pixel Values
--------------------*/
/*
These are used to specify exact pixel values in em
for things like borders that remain constantly
sized as emSize adjusts
Since there are many more sizes than names for sizes,
these are named by their original pixel values.
*/
--1px: 0.07142857rem;
--2px: 0.14285714rem;
--3px: 0.21428571rem;
--4px: 0.28571429rem;
--5px: 0.35714286rem;
--6px: 0.42857143rem;
--7px: 0.5rem;
--8px: 0.57142857rem;
--9px: 0.64285714rem;
--10px: 0.71428571rem;
--11px: 0.78571429rem;
--12px: 0.85714286rem;
--13px: 0.92857143rem;
--14px: 1rem;
--15px: 1.07142857rem;
--16px: 1.14285714rem;
--17px: 1.21428571rem;
--18px: 1.28571429rem;
--19px: 1.35714286rem;
--20px: 1.42857143rem;
--21px: 1.5rem;
--22px: 1.57142857rem;
--23px: 1.64285714rem;
--24px: 1.71428571rem;
--25px: 1.78571429rem;
--26px: 1.85714286rem;
--27px: 1.92857143rem;
--28px: 2rem;
--29px: 2.07142857rem;
--30px: 2.14285714rem;
--31px: 2.21428571rem;
--32px: 2.28571429rem;
--33px: 2.35714286rem;
--34px: 2.42857143rem;
--35px: 2.5rem;
--36px: 2.57142857rem;
--37px: 2.64285714rem;
--38px: 2.71428571rem;
--39px: 2.78571429rem;
--40px: 2.85714286rem;
--41px: 2.92857143rem;
--42px: 3rem;
--43px: 3.07142857rem;
--44px: 3.14285714rem;
--45px: 3.21428571rem;
--46px: 3.28571429rem;
--47px: 3.35714286rem;
--48px: 3.42857143rem;
--49px: 3.5rem;
--50px: 3.57142857rem;
--51px: 3.64285714rem;
--52px: 3.71428571rem;
--53px: 3.78571429rem;
--54px: 3.85714286rem;
--55px: 3.92857143rem;
--56px: 4rem;
--57px: 4.07142857rem;
--58px: 4.14285714rem;
--59px: 4.21428571rem;
--60px: 4.28571429rem;
--61px: 4.35714286rem;
--62px: 4.42857143rem;
--63px: 4.5rem;
--64px: 4.57142857rem;
--relative1px: 0.07142857em;
--relative2px: 0.14285714em;
--relative3px: 0.21428571em;
--relative4px: 0.28571429em;
--relative5px: 0.35714286em;
--relative6px: 0.42857143em;
--relative7px: 0.5em;
--relative8px: 0.57142857em;
--relative9px: 0.64285714em;
--relative10px: 0.71428571em;
--relative11px: 0.78571429em;
--relative12px: 0.85714286em;
--relative13px: 0.92857143em;
--relative14px: 1em;
--relative15px: 1.07142857em;
--relative16px: 1.14285714em;
--relative17px: 1.21428571em;
--relative18px: 1.28571429em;
--relative19px: 1.35714286em;
--relative20px: 1.42857143em;
--relative21px: 1.5em;
--relative22px: 1.57142857em;
--relative23px: 1.64285714em;
--relative24px: 1.71428571em;
--relative25px: 1.78571429em;
--relative26px: 1.85714286em;
--relative27px: 1.92857143em;
--relative28px: 2em;
--relative29px: 2.07142857em;
--relative30px: 2.14285714em;
--relative31px: 2.21428571em;
--relative32px: 2.28571429em;
--relative33px: 2.35714286em;
--relative34px: 2.42857143em;
--relative35px: 2.5em;
--relative36px: 2.57142857em;
--relative37px: 2.64285714em;
--relative38px: 2.71428571em;
--relative39px: 2.78571429em;
--relative40px: 2.85714286em;
--relative41px: 2.92857143em;
--relative42px: 3em;
--relative43px: 3.07142857em;
--relative44px: 3.14285714em;
--relative45px: 3.21428571em;
--relative46px: 3.28571429em;
--relative47px: 3.35714286em;
--relative48px: 3.42857143em;
--relative49px: 3.5em;
--relative50px: 3.57142857em;
--relative51px: 3.64285714em;
--relative52px: 3.71428571em;
--relative53px: 3.78571429em;
--relative54px: 3.85714286em;
--relative55px: 3.92857143em;
--relative56px: 4em;
--relative57px: 4.07142857em;
--relative58px: 4.14285714em;
--relative59px: 4.21428571em;
--relative60px: 4.28571429em;
--relative61px: 4.35714286em;
--relative62px: 4.42857143em;
--relative63px: 4.5em;
--relative64px: 4.57142857em;
/* Columns */
--one-wide: 6.25%;
--two-wide: 12.5%;
--three-wide: 18.75%;
--four-wide: 25%;
--five-wide: 31.25%;
--six-wide: 37.5%;
--seven-wide: 43.75%;
--eight-wide: 50%;
--nine-wide: 56.25%;
--ten-wide: 62.5%;
--eleven-wide: 68.75%;
--twelve-wide: 75%;
--thirteen-wide: 81.25%;
--fourteen-wide: 87.5%;
--fifteen-wide: 93.75%;
--sixteen-wide: 100%;
--one-column: 100%;
--two-column: 50%;
--three-column: 33.33333333%;
--four-column: 25%;
--five-column: 20%;
--six-column: 16.66666667%;
--seven-column: 14.28571429%;
--eight-column: 12.5%;
--nine-column: 11.11111111%;
--ten-column: 10%;
--eleven-column: 9.09090909%;
--twelve-column: 8.33333333%;
--thirteen-column: 7.69230769%;
--fourteen-column: 7.14285714%;
--fifteen-column: 6.66666667%;
--sixteen-column: 6.25%;
/*******************************
States
*******************************/
/*-------------------
Disabled
--------------------*/
--disabled-opacity: 0.45;
--disabled-text-color: hsl(var(--hsl-neutral-800) / 30%);
--inverted-disabled-text-color: hsl(var(--hsl-white) / 30%);
/*-------------------
Hover
--------------------*/
/*--- Shadows ---*/
--floating-shadow-hover: 0px 2px 4px 0px rgba(34, 36, 38, 0.15),
0px 2px 10px 0px rgba(34, 36, 38, 0.25);
/*--- Colors ---*/
--primary-color-hover: var(--color-blue-600);
--secondary-color-hover: var(--color-zinc-800);
--red-hover: var(--color-red-600);
--orange-hover: var(--color-orange-600);
--yellow-hover: var(--color-yellow-600);
--olive-hover: var(--color-lime-600);
--green-hover