cinny/src/index.scss

476 lines
12 KiB
SCSS
Raw Normal View History

2021-07-28 16:15:52 +03:00
:root {
/* background color | --bg-[background type]: value */
--bg-surface: #FFFFFF;
2021-09-03 15:28:01 +03:00
--bg-surface-transparent: #FFFFFF00;
2021-07-28 16:15:52 +03:00
--bg-surface-low: #F6F6F6;
2021-09-03 15:28:01 +03:00
--bg-surface-low-transparent: #F6F6F600;
--bg-surface-extra-low: #F6F6F6;
--bg-surface-extra-low-transparent: #F6F6F600;
2021-07-28 16:15:52 +03:00
--bg-surface-hover: rgba(0, 0, 0, 3%);
--bg-surface-active: rgba(0, 0, 0, 5%);
--bg-surface-border: rgba(0, 0, 0, 6%);
--bg-primary: rgb(83, 110, 234);
--bg-primary-hover: rgba(83, 110, 234, 80%);
--bg-primary-active: rgba(83, 110, 234, 70%);
--bg-primary-border: rgba(83, 110, 234, 38%);
2021-08-08 18:22:09 +03:00
--bg-positive: rgb(69, 184, 59);
--bg-positive-hover: rgba(69, 184, 59, 8%);
--bg-positive-active: rgba(69, 184, 59, 15%);
--bg-positive-border: rgba(69, 184, 59, 40%);
2021-07-28 16:15:52 +03:00
--bg-caution: rgb(255, 179, 0);
--bg-caution-hover: rgba(255, 179, 0, 8%);
--bg-caution-active: rgba(255, 179, 0, 15%);
--bg-caution-border: rgba(255, 179, 0, 40%);
--bg-danger: rgb(240, 71, 71);
--bg-danger-hover: rgba(240, 71, 71, 5%);
--bg-danger-active: rgba(240, 71, 71, 10%);
--bg-danger-border: rgba(240, 71, 71, 20%);
--bg-tooltip: #353535;
2021-09-12 08:50:56 +03:00
--bg-badge: #989898;
--bg-ping: hsla(137deg, 100%, 68%, 40%);
--bg-ping-hover: hsla(137deg, 100%, 68%, 50%);
--bg-divider: hsla(0, 0%, 0%, .1);
2021-07-28 16:15:52 +03:00
/* text color | --tc-[background type]-[priority]: value */
--tc-surface-high: #000000;
--tc-surface-normal: rgba(0, 0, 0, 78%);
--tc-surface-normal-low: rgba(0, 0, 0, 60%);
--tc-surface-low: rgba(0, 0, 0, 48%);
2021-07-28 16:15:52 +03:00
--tc-primary-high: #ffffff;
--tc-primary-normal: rgba(255, 255, 255, 68%);
--tc-primary-low: rgba(255, 255, 255, 40%);
2021-08-08 18:22:09 +03:00
--tc-positive-high: var(--bg-positive);
--tc-positive-normal: rgb(69, 184, 59, 80%);
--tc-positive-low: rgb(69, 184, 59, 60%);
2021-07-28 16:15:52 +03:00
--tc-caution-high: var(--bg-caution);
--tc-caution-normal: rgb(255, 179, 0, 80%);
--tc-caution-low: rgb(255, 179, 0, 60%);
--tc-danger-high: var(--bg-danger);
--tc-danger-normal: rgba(240, 71, 71, 88%);
--tc-danger-low: rgba(240, 71, 71, 60%);
--tc-code: #e62498;
--tc-link: hsl(213deg 76% 56%);
2021-07-28 16:15:52 +03:00
--tc-tooltip: white;
2021-09-12 08:50:56 +03:00
--tc-badge: white;
2021-07-28 16:15:52 +03:00
/* system icons | --ic-[background type]-[priority]: value */
--ic-surface-high: #272727;
2021-07-28 16:15:52 +03:00
--ic-surface-normal: #626262;
--ic-surface-low: #7c7c7c;
2021-07-28 16:15:52 +03:00
--ic-primary-normal: #ffffff;
2021-08-08 18:22:09 +03:00
--ic-positive-normal: rgba(69, 184, 59, 80%);
2021-07-28 16:15:52 +03:00
--ic-caution-normal: rgba(255, 179, 0, 80%);
--ic-danger-normal: rgba(240, 71, 71, 0.7);
/* user mxid colors */
--mx-uc-1: hsl(208, 66%, 53%);
--mx-uc-2: hsl(302, 49%, 45%);
--mx-uc-3: hsl(163, 97%, 36%);
--mx-uc-4: hsl(343, 75%, 61%);
--mx-uc-5: hsl(24, 100%, 59%);
--mx-uc-6: hsl(181, 63%, 47%);
--mx-uc-7: hsl(242, 89%, 65%);
--mx-uc-8: hsl(94, 65%, 50%);
2021-07-28 16:15:52 +03:00
/* system icon size | -ic-[size]: value */
--ic-large: 38px;
--ic-normal: 24px;
--ic-small: 20px;
--ic-extra-small: 18px;
/* avatar size */
--av-large: 80px;
--av-normal: 42px;
--av-small: 36px;
--av-extra-small: 24px;
/* shadow and overlay */
--bg-overlay: rgba(0, 0, 0, 20%);
--bg-overlay-low: rgba(0, 0, 0, 85%);
2021-07-28 16:15:52 +03:00
--bs-popup: 0 0 16px rgba(0, 0, 0, 10%);
--bs-surface-border: inset 0 0 0 1px var(--bg-surface-border);
--bs-surface-outline: 0 0 0 2px var(--bg-surface-border);
--bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
--bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
2021-08-08 18:22:09 +03:00
--bs-positive-border: inset 0 0 0 1px var(--bg-positive-border);
--bs-positive-outline: 0 0 0 2px var(--bg-positive-border);
2021-07-28 16:15:52 +03:00
--bs-caution-border: inset 0 0 0 1px var(--bg-caution-border);
--bs-caution-outline: 0 0 0 2px var(--bg-caution-border);
--bs-danger-border: inset 0 0 0 1px var(--bg-danger-border);
--bs-danger-outline: 0 0 0 2px var(--bg-danger-border);
/* border */
--bo-radius: 8px;
/* font styles: font-size, letter-spacing, line-hight */
2021-07-28 16:15:52 +03:00
--fs-h1: 36px;
--ls-h1: -1.5px;
--lh-h1: 38px;
--fs-h2: 24px;
--ls-h2: -0.5px;
--lh-h2: 30px;
--fs-s1: 18px;
--ls-s1: -0.2px;
--lh-s1: 24px;
--fs-b1: 16px;
--ls-b1: 0.1px;
--lh-b1: 24px;
--fs-b2: 14px;
--ls-b2: 0.2px;
--lh-b2: 20px;
--fs-b3: 12px;
--ls-b3: 0px;
--lh-b3: 16px;
/* font-weight */
--fw-light: 300;
--fw-normal: 400;
--fw-medium: 500;
--fw-bold: 700;
2021-07-28 16:15:52 +03:00
/* spacing | --sp-[space]: value */
--sp-none: 0px;
--sp-ultra-tight: 4px;
--sp-extra-tight: 8px;
--sp-tight: 12px;
--sp-normal: 16px;
--sp-loose: 20px;
--sp-extra-loose: 32px;
/* other */
--border-width: 1px;
--header-height: 54px;
--navigation-sidebar-width: calc(64px + var(--border-width));
--navigation-drawer-width: calc(280px + var(--border-width));
--navigation-width: calc(var(--navigation-sidebar-width) + var(--navigation-drawer-width));
--people-drawer-width: calc(268px - var(--border-width));
--popup-window-drawer-width: 280px;
@media (max-width: 1124px) {
--navigation-drawer-width: calc(240px + var(--border-width));
--people-drawer-width: calc(256px - var(--border-width));
--popup-window-drawer-width: 240px;
}
2021-07-28 16:15:52 +03:00
/* transition curves */
--fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97);
--fluid-slide-down: cubic-bezier(0.02, 0.82, 0.4, 0.96);
--fluid-slide-up: cubic-bezier(0.13, 0.56, 0.25, 0.99);
--font-primary: 'Roboto', sans-serif;
--font-secondary: 'Roboto', sans-serif;
2021-07-28 16:15:52 +03:00
}
2021-07-28 16:15:52 +03:00
.silver-theme {
/* background color | --bg-[background type]: value */
--bg-surface: hsl(0, 0%, 95%);
2021-09-03 15:28:01 +03:00
--bg-surface-transparent: hsla(0, 0%, 95%, 0);
2021-07-28 16:15:52 +03:00
--bg-surface-low: hsl(0, 0%, 91%);
2021-09-03 15:28:01 +03:00
--bg-surface-low-transparent: hsla(0, 0%, 91%, 0);
--bg-surface-extra-low: hsl(0, 0%, 91%);
--bg-surface-extra-low-transparent: hsla(0, 0%, 91%, 0);
2021-07-28 16:15:52 +03:00
}
@mixin dark-mode() {
2021-07-28 16:15:52 +03:00
/* background color | --bg-[background type]: value */
--bg-surface: hsl(208, 8%, 20%);
--bg-surface-transparent: hsla(208, 8%, 20%, 0);
--bg-surface-low: hsl(208, 8%, 16%);
--bg-surface-low-transparent: hsla(208, 8%, 16%, 0);
--bg-surface-extra-low: hsl(208, 8%, 14%);
--bg-surface-extra-low-transparent: hsla(208, 8%, 14%, 0);
2021-07-28 16:15:52 +03:00
--bg-surface-hover: rgba(255, 255, 255, 3%);
--bg-surface-active: rgba(255, 255, 255, 5%);
--bg-surface-border: rgba(0, 0, 0, 20%);
--bg-primary: rgb(42, 98, 166);
--bg-primary-hover: rgba(42, 98, 166, 80%);
--bg-primary-active: rgba(42, 98, 166, 70%);
--bg-primary-border: rgba(42, 98, 166, 38%);
2021-07-28 16:15:52 +03:00
--bg-tooltip: #000;
2021-09-12 08:50:56 +03:00
--bg-badge: hsl(0, 0%, 75%);
--bg-ping: hsla(137deg, 100%, 38%, 40%);
--bg-ping-hover: hsla(137deg, 100%, 38%, 50%);
--bg-divider: hsla(0, 0%, 100%, .1);
2021-07-28 16:15:52 +03:00
/* text color | --tc-[background type]-[priority]: value */
--tc-surface-high: rgba(255, 255, 255, 98%);
--tc-surface-normal: rgba(255, 255, 255, 94%);
--tc-surface-normal-low: rgba(255, 255, 255, 60%);
--tc-surface-low: rgba(255, 255, 255, 58%);
2021-07-28 16:15:52 +03:00
--tc-primary-high: #ffffff;
--tc-primary-normal: rgba(255, 255, 255, 0.68);
--tc-primary-low: rgba(255, 255, 255, 0.4);
--tc-code: #e565b1;
--tc-link: hsl(213deg 94% 73%);
2021-09-12 08:50:56 +03:00
--tc-badge: black;
2021-07-28 16:15:52 +03:00
/* system icons | --ic-[background type]-[priority]: value */
--ic-surface-high: rgb(255, 255, 255);
--ic-surface-normal: rgba(255, 255, 255, 84%);
--ic-surface-low: rgba(255, 255, 255, 64%);
2021-07-28 16:15:52 +03:00
--ic-primary-normal: #ffffff;
& .text {
/* override user mxid colors for texts */
--mx-uc-1: hsl(208, 100%, 58%);
--mx-uc-2: hsl(301, 80%, 70%);
--mx-uc-3: hsl(163, 93%, 41%);
--mx-uc-4: hsl(343, 91%, 66%);
--mx-uc-5: hsl(24, 90%, 67%);
--mx-uc-6: hsl(181, 90%, 50%);
--mx-uc-7: hsl(243, 100%, 74%);
--mx-uc-8: hsl(94, 66%, 50%);
}
2021-07-28 16:15:52 +03:00
/* shadow and overlay */
--bg-overlay: rgba(0, 0, 0, 50%);
--bs-popup: 0 0 16px rgba(0, 0, 0, 25%);
--bs-surface-border: inset 0 0 0 1px var(--bg-surface-border);
--bs-surface-outline: 0 0 0 2px var(--bg-surface-border);
--bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
--bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
/* font styles: font-size, letter-spacing, line-hight */
--fs-h1: 35.6px;
--fs-h2: 23.6px;
--fs-s1: 17.6px;
--fs-b1: 14.6px;
--ls-b1: 0.14px;
--fs-b2: 13.2px;
--fs-b3: 11.2px;
/* override normal font weight for dark mode */
--fw-normal: 350;
2021-07-28 16:15:52 +03:00
--font-secondary: 'InterVariable', 'Roboto', sans-serif;
2021-07-28 16:15:52 +03:00
}
.dark-theme,
.butter-theme {
@include dark-mode();
}
@media (prefers-color-scheme: dark) {
.system-theme {
@include dark-mode();
}
}
2021-07-28 16:15:52 +03:00
.butter-theme {
/* background color | --bg-[background type]: value */
--bg-surface: hsl(64, 6%, 14%);
2021-09-03 15:28:01 +03:00
--bg-surface-transparent: hsla(64, 6%, 14%, 0);
2021-07-28 16:15:52 +03:00
--bg-surface-low: hsl(64, 6%, 10%);
--bg-surface-low-transparent: hsla(64, 6%, 10%, 0);
--bg-surface-extra-low: hsl(64, 6%, 8%);
--bg-surface-extra-low-transparent: hsla(64, 6%, 8%, 0);
2021-07-28 16:15:52 +03:00
--bg-badge: #c4c1ab;
2021-07-28 16:15:52 +03:00
/* text color | --tc-[background type]-[priority]: value */
--tc-surface-high: rgb(255, 251, 222, 94%);
--tc-surface-normal: rgba(255, 251, 222, 94%);
--tc-surface-normal-low: rgba(255, 251, 222, 60%);
--tc-surface-low: rgba(255, 251, 222, 58%);
2021-07-28 16:15:52 +03:00
/* system icons | --ic-[background type]-[priority]: value */
--ic-surface-high: rgb(255, 251, 222);
--ic-surface-normal: rgba(255, 251, 222, 84%);
--ic-surface-low: rgba(255, 251, 222, 64%);
}
.font-primary {
font-family: var(--font-primary);
/* override font styles for primary font */
--fs-h1: 36px;
--ls-h1: -1.5px;
--lh-h1: 38px;
--fs-h2: 24px;
--ls-h2: -0.5px;
--lh-h2: 30px;
--fs-s1: 18px;
--ls-s1: -0.2px;
--lh-s1: 24px;
--fs-b1: 16px;
--ls-b1: 0.1px;
--lh-b1: 24px;
--fs-b2: 14px;
--ls-b2: 0.2px;
--lh-b2: 20px;
--fs-b3: 12px;
--ls-b3: 0px;
--lh-b3: 16px;
--fw-light: 300;
--fw-normal: 400;
--fw-medium: 500;
--fw-bold: 600;
2021-07-28 16:15:52 +03:00
}
html {
height: 100%;
2021-08-11 10:59:01 +03:00
overflow: hidden;
2021-07-28 16:15:52 +03:00
}
body {
margin: 0;
padding: 0;
height: 100%;
font-family: var(--font-secondary);
2021-07-28 16:15:52 +03:00
font-size: 16px;
font-weight: var(--fw-normal);
2021-07-28 16:15:52 +03:00
background-color: var(--bg-surface-low);
/*Why font-variant-ligatures => https://github.com/rsms/inter/issues/222 */
font-variant-ligatures: no-contextual;
2021-07-28 16:15:52 +03:00
}
#root {
width: 100%;
height: 100%;
}
*, *::before, *::after {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
a {
color: var(--tc-link);
2021-07-28 16:15:52 +03:00
text-decoration: none;
&:hover {
text-decoration: underline;
}
2021-07-28 16:15:52 +03:00
}
b {
font-weight: var(--fw-medium);
2021-07-28 16:15:52 +03:00
}
label {
margin: 0;
padding: 0;
}
button,
textarea {
margin: 0;
padding: 0;
background-color: transparent;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
border: none;
}
button {
max-width: 100%;
text-transform: none;
text-align: inherit;
overflow: visible;
-webkit-appearance: button;
}
textarea,
input,
input[type],
input[type=text],
input[type=username],
input[type=password],
input[type=email],
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type=checkbox] {
margin: 0;
padding: 0;
width: 20px;
height: 20px;
border-radius: calc(var(--bo-radius) / 2);
box-shadow: var(--bs-primary-border);
background-color: var(--bg-surface);
cursor: pointer;
@extend .flex--center;
&:checked {
background-color: var(--bg-primary);
&::before {
content: "";
display: inline-block;
width: 12px;
height: 6px;
border: 6px solid white;
border-width: 0 0 3px 3px;
transform: rotateZ(-45deg) translate(1px, -1px);
}
}
}
2021-07-28 16:15:52 +03:00
textarea {
color: inherit;
word-spacing: inherit;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
.flex--center {
2021-07-28 16:15:52 +03:00
display: flex;
justify-content: center;
align-items: center;
}