203 lines
4.9 KiB
SCSS
203 lines
4.9 KiB
SCSS
// //////////////////////////////////////////////
|
|
// /////////////////// Fonts ////////////////////
|
|
// //////////////////////////////////////////////
|
|
|
|
$session-font-default: 'Roboto';
|
|
$session-font-accent: 'Loor';
|
|
$session-font-mono: 'SpaceMono';
|
|
|
|
@font-face {
|
|
font-family: $session-font-mono;
|
|
src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: $session-font-mono;
|
|
src: url('../fonts/SpaceMono-Bold.ttf') format('truetype');
|
|
font-weight: bold;
|
|
}
|
|
@font-face {
|
|
font-family: $session-font-mono;
|
|
src: url('../fonts/SpaceMono-Italic.ttf') format('truetype');
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: $session-font-mono;
|
|
src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype');
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
// Roboto is an open replacement for $session-font-default
|
|
@font-face {
|
|
font-family: $session-font-default;
|
|
src: url('../fonts/Roboto-Regular.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: $session-font-default;
|
|
src: url('../fonts/Roboto-Italic.ttf') format('truetype');
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: $session-font-default;
|
|
src: url('../fonts/Roboto-Bold.ttf') format('truetype');
|
|
font-weight: 600;
|
|
}
|
|
@font-face {
|
|
font-family: $session-font-default;
|
|
src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
|
|
font-weight: 600;
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: $session-font-default;
|
|
src: url('../fonts/Roboto-Light.ttf') format('truetype');
|
|
font-weight: 200;
|
|
}
|
|
@font-face {
|
|
font-family: $session-font-default;
|
|
src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
|
|
font-weight: 200;
|
|
font-style: italic;
|
|
}
|
|
|
|
// Accented font
|
|
@font-face {
|
|
font-family: $session-font-accent;
|
|
src: url('../fonts/Loor.ttf') format('truetype');
|
|
line-height: 1.4rem;
|
|
}
|
|
|
|
// //////////////////////////////////////////////
|
|
// ////////////////// Colors ////////////////////
|
|
// //////////////////////////////////////////////
|
|
|
|
// Brand
|
|
$session-color-green: #00f782;
|
|
|
|
// Shades
|
|
$session-shade-1: #0c0c0c;
|
|
$session-shade-1-alt: #0f1011;
|
|
$session-shade-2: #161616;
|
|
$session-shade-3: #191818;
|
|
$session-shade-4: #1b1b1b;
|
|
$session-shade-5: #222325;
|
|
$session-shade-6: #232323;
|
|
$session-shade-6-alt: #2c2c2c;
|
|
$session-shade-7: #2e2e2e;
|
|
$session-shade-8: #2f2f2f;
|
|
$session-shade-9: #313131;
|
|
$session-shade-10: #3e3e3e;
|
|
$session-shade-11: #3f3f3f;
|
|
$session-shade-12: #3f4146;
|
|
$session-shade-13: #474646;
|
|
$session-shade-14: #535865;
|
|
$session-shade-15: #5b6c72;
|
|
$session-shade-16: #979797;
|
|
$session-shade-17: #a0a0a0;
|
|
$session-shade-18: #141414;
|
|
|
|
$session-opaque-dark-1: rgba(0, 0, 0, 0.25);
|
|
$session-opaque-dark-2: rgba(0, 0, 0, 0.37);
|
|
$session-opaque-dark-3: rgba(0, 0, 0, 0.5);
|
|
|
|
$session-color-white: #fff;
|
|
$session-color-light-grey: #a0a0a0;
|
|
$session-color-dark-grey: #353535;
|
|
$session-color-black: #000;
|
|
|
|
// Semantic Colors
|
|
$session-color-info: $session-shade-11;
|
|
$session-color-success: #35d388;
|
|
$session-color-error: #edd422;
|
|
$session-color-warning: $session-shade-17;
|
|
$session-color-warning-alt: #ff9d00;
|
|
$session-color-danger: #ff453a;
|
|
$session-color-danger-alt: #ff4538;
|
|
$session-color-primary: $session-shade-13;
|
|
$session-color-secondary: $session-shade-6;
|
|
|
|
// Opacity and Shadow
|
|
$session-shadow-opacity: 0.15;
|
|
$session-overlay-opacity: 0.3;
|
|
|
|
// //////////////////////////////////////////////
|
|
// /////////////////// Text /////////////////////
|
|
// //////////////////////////////////////////////
|
|
|
|
// Sizing
|
|
$session-font-xs: 11px;
|
|
$session-font-sm: 13px;
|
|
$session-font-md: 15px;
|
|
$session-font-lg: 18px;
|
|
$session-font-xl: 24px;
|
|
|
|
$session-font-h1: 30px;
|
|
$session-font-h2: 24px;
|
|
$session-font-h3: 20px;
|
|
$session-font-h4: 16px;
|
|
|
|
// Mixins
|
|
@mixin fontAccentBold {
|
|
font-weight: bold;
|
|
font-family: $session-font-accent;
|
|
}
|
|
|
|
@mixin text-highlight($color) {
|
|
background-color: $color;
|
|
padding: $session-margin-xs $session-margin-sm;
|
|
border-radius: 3px;
|
|
display: inline-block;
|
|
}
|
|
|
|
@mixin session-color-subtle($color) {
|
|
color: subtle($color);
|
|
}
|
|
|
|
$session-subtle-factor: 0.6;
|
|
|
|
@function subtle($color) {
|
|
@return rgba($color, $session-subtle-factor);
|
|
}
|
|
|
|
// //////////////////////////////////////////////
|
|
// ////////////////// Sizing ////////////////////
|
|
// //////////////////////////////////////////////
|
|
|
|
// Default Components
|
|
$session-search-input-height: 34px;
|
|
$main-view-header-height: 63px;
|
|
$session-conversation-header-height: 60px;
|
|
$session-left-pane-width: 300px;
|
|
|
|
// Various Components
|
|
$session-modal-size-sm: 220px;
|
|
$session-modal-size-md: 400px;
|
|
$session-modal-size-lg: 650px;
|
|
|
|
$session_message-container-border-radius: 5px;
|
|
|
|
// Spacing
|
|
$session-margin-xs: 5px;
|
|
$session-margin-sm: 10px;
|
|
$session-margin-md: 15px;
|
|
$session-margin-lg: 20px;
|
|
|
|
// Animations
|
|
$session-transition-duration: 0.25s;
|
|
$session-fadein-duration: 0.1s;
|
|
|
|
@keyframes fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// //////////////////////////////////////////////
|
|
// ///////////////// Various ////////////////////
|
|
// //////////////////////////////////////////////
|
|
|
|
$composition-container-height: 60px;
|