mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-03-26 18:31:52 +00:00
66cb9a93b8
* fix: address comments * fix unread notification mocks * fix row click for notification --------- Co-authored-by: Matt Hill <mattnine@protonmail.com>
181 lines
3.9 KiB
SCSS
181 lines
3.9 KiB
SCSS
@font-face {
|
|
font-family: 'Proxima Nova';
|
|
font-style: normal;
|
|
font-weight: 100; // thin
|
|
src: url('/assets/fonts/Proxima_Nova/Proxima-Nova-Thin.woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Proxima Nova';
|
|
font-style: normal;
|
|
font-weight: 300; // light
|
|
src: url('/assets/fonts/Proxima_Nova/Proxima-Nova-Light.woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Proxima Nova';
|
|
font-style: normal;
|
|
font-weight: 400; // normal
|
|
src: url('/assets/fonts/Proxima_Nova/Proxima-Nova-Regular.woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Proxima Nova';
|
|
font-style: normal;
|
|
font-weight: 600; // semibold
|
|
src: url('/assets/fonts/Proxima_Nova/Proxima-Nova-Semibold.woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Proxima Nova';
|
|
font-style: normal;
|
|
font-weight: 700; // bold
|
|
src: url('/assets/fonts/Proxima_Nova/Proxima-Nova-Bold.woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Proxima Nova';
|
|
font-style: normal;
|
|
font-weight: 800; // extrabold
|
|
src: url('/assets/fonts/Proxima_Nova/Proxima-Nova-Extrabold.woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Proxima Nova';
|
|
font-style: normal;
|
|
font-weight: 900; // black
|
|
src: url('/assets/fonts/Proxima_Nova/Proxima-Nova-Black.woff');
|
|
}
|
|
|
|
$wide-modal: 900px;
|
|
|
|
:root {
|
|
--alt-red: #ff4961;
|
|
--alt-orange: #f89248;
|
|
--alt-yellow: #e5d53e;
|
|
--alt-green: #3dcf6f;
|
|
--alt-blue: #00a8a8;
|
|
--alt-purple: #9747ff;
|
|
|
|
--portal-header-height: 56px;
|
|
|
|
// @TODO Alex rename when make style lib
|
|
--tw-color-black: 0 0 0;
|
|
--tw-color-white: 255 255 255;
|
|
--tw-color-slate-50: 248 250 252;
|
|
--tw-color-slate-100: 241 245 249;
|
|
--tw-color-slate-200: 226 232 240;
|
|
--tw-color-slate-300: 203 213 225;
|
|
--tw-color-slate-400: 148 163 184;
|
|
--tw-color-slate-500: 100 116 139;
|
|
--tw-color-slate-600: 71 85 105;
|
|
--tw-color-slate-700: 51 65 85;
|
|
--tw-color-slate-800: 30 41 59;
|
|
--tw-color-slate-900: 15 23 42;
|
|
--tw-color-slate-950: 2 6 23;
|
|
--tw-color-gray-50: 249 250 251;
|
|
--tw-color-gray-100: 243 244 246;
|
|
--tw-color-gray-200: 229 231 235;
|
|
--tw-color-gray-300: 209 213 219;
|
|
--tw-color-gray-400: 156 163 175;
|
|
--tw-color-gray-500: 107 114 128;
|
|
--tw-color-gray-600: 75 85 99;
|
|
--tw-color-gray-700: 55 65 81;
|
|
--tw-color-gray-800: 31 41 55;
|
|
--tw-color-gray-900: 17 24 39;
|
|
--tw-color-gray-950: 3 7 18;
|
|
--tw-color-zinc-50: 250 250 250;
|
|
--tw-color-zinc-100: 244 244 245;
|
|
--tw-color-zinc-200: 228 228 231;
|
|
--tw-color-zinc-300: 212 212 216;
|
|
--tw-color-zinc-400: 161 161 170;
|
|
--tw-color-zinc-500: 113 113 122;
|
|
--tw-color-zinc-600: 82 82 91;
|
|
--tw-color-zinc-700: 63 63 70;
|
|
--tw-color-zinc-800: 39 39 42;
|
|
--tw-color-zinc-900: 24 24 27;
|
|
--tw-color-zinc-950: 9 9 11;
|
|
|
|
--tui-font-text: 'Proxima Nova', system-ui;
|
|
--tui-font-heading: 'Proxima Nova', system-ui;
|
|
}
|
|
|
|
body {
|
|
user-select: text;
|
|
}
|
|
|
|
.loading-dots::after {
|
|
content: '...';
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
animation: ellipsis-dot 1s infinite 0.3s;
|
|
animation-fill-mode: forwards;
|
|
text-align: left;
|
|
width: 1em;
|
|
margin-left: -.3rem;
|
|
}
|
|
|
|
@keyframes ellipsis-dot {
|
|
25% {
|
|
content: '';
|
|
}
|
|
|
|
50% {
|
|
content: '.';
|
|
}
|
|
|
|
75% {
|
|
content: '..';
|
|
}
|
|
|
|
100% {
|
|
content: '...';
|
|
}
|
|
}
|
|
|
|
a {
|
|
cursor: pointer;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* marketplace */
|
|
.background-border {
|
|
border-radius: 0.75rem;
|
|
background-image: linear-gradient(
|
|
to top left,
|
|
rgb(161 161 170 / 0.75),
|
|
#52525b
|
|
);
|
|
padding: 1px;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.box-shadow-lg {
|
|
--tw-shadow:
|
|
0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
--tw-shadow-colored:
|
|
0 10px 15px -3px var(--tw-shadow-color),
|
|
0 4px 6px -4px var(--tw-shadow-color);
|
|
box-shadow:
|
|
0 0 #0000,
|
|
0 0 #0000,
|
|
var(--tw-shadow);
|
|
}
|
|
|
|
.shadow-color-light {
|
|
--tw-shadow-color: rgb(161 161 170 / 0.1);
|
|
--tw-shadow: var(--tw-shadow-colored);
|
|
}
|
|
|
|
.additional-detail-title {
|
|
font-size: 0.85rem;
|
|
line-height: 1.75rem;
|
|
font-weight: 300;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06rem;
|
|
margin: 0 0 1rem 0;
|
|
pointer-events: none;
|
|
}
|