mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2026-04-03 08:05:37 +00:00
124 lines
3.4 KiB
CSS
124 lines
3.4 KiB
CSS
/*
|
|
* Default ocelot.social branding
|
|
*
|
|
* Resolved values from webapp SCSS tokens + styleguide design system.
|
|
* Source of truth: webapp/assets/_new/styles/
|
|
*
|
|
* Branding repositories can override this file.
|
|
*/
|
|
|
|
/* Fonts — same as webapp/assets/_new/styles/resets.scss */
|
|
@font-face {
|
|
font-family: LatoWeb;
|
|
src:
|
|
url("/fonts/Lato-Regular.1f440a46.woff2") format("woff2"),
|
|
url("/fonts/Lato-Regular.ffb25090.woff") format("woff");
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
text-rendering: optimizelegibility;
|
|
}
|
|
@font-face {
|
|
font-family: LatoWeb;
|
|
src:
|
|
url("/fonts/Lato-Italic.a6774e2c.woff2") format("woff2"),
|
|
url("/fonts/Lato-Italic.ff8877c4.woff") format("woff");
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
text-rendering: optimizelegibility;
|
|
}
|
|
@font-face {
|
|
font-family: LatoWeb;
|
|
src:
|
|
url("/fonts/Lato-Bold.1e239003.woff2") format("woff2"),
|
|
url("/fonts/Lato-Bold.35be9fc3.woff") format("woff");
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-display: swap;
|
|
text-rendering: optimizelegibility;
|
|
}
|
|
@font-face {
|
|
font-family: LatoWeb;
|
|
src:
|
|
url("/fonts/Lato-BoldItalic.4ef02877.woff2") format("woff2"),
|
|
url("/fonts/Lato-BoldItalic.5171ee7d.woff") format("woff");
|
|
font-style: italic;
|
|
font-weight: 600;
|
|
font-display: swap;
|
|
text-rendering: optimizelegibility;
|
|
}
|
|
|
|
/* Base styles — same as webapp */
|
|
html {
|
|
font-size: 15px;
|
|
}
|
|
|
|
body {
|
|
font-family: LatoWeb, sans-serif;
|
|
font-size: 15px;
|
|
line-height: 1.3;
|
|
margin: 0;
|
|
background-color: rgb(245, 244, 246); /* $color-neutral-90 */
|
|
color: rgb(75, 69, 84); /* $text-color-base */
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-feature-settings: none;
|
|
font-variant-ligatures: none;
|
|
}
|
|
|
|
/* CSS Custom Properties for @ocelot-social/ui */
|
|
:root {
|
|
/* Default (grey) */
|
|
--color-default: rgb(245, 244, 246);
|
|
--color-default-hover: rgb(203, 199, 209);
|
|
--color-default-active: rgb(177, 171, 186);
|
|
--color-default-contrast: rgb(75, 69, 84);
|
|
--color-default-contrast-inverse: rgb(255, 255, 255);
|
|
|
|
/* Primary (green) */
|
|
--color-primary: rgb(23, 181, 63);
|
|
--color-primary-hover: rgb(96, 214, 98);
|
|
--color-primary-active: rgb(25, 122, 49);
|
|
--color-primary-contrast: rgb(241, 253, 244);
|
|
|
|
/* Secondary (blue) */
|
|
--color-secondary: rgb(0, 142, 230);
|
|
--color-secondary-hover: rgb(10, 161, 255);
|
|
--color-secondary-active: rgb(0, 91, 166);
|
|
--color-secondary-contrast: rgb(240, 249, 255);
|
|
|
|
/* Danger (red) */
|
|
--color-danger: rgb(219, 57, 36);
|
|
--color-danger-hover: rgb(242, 97, 65);
|
|
--color-danger-active: rgb(158, 43, 28);
|
|
--color-danger-contrast: rgb(253, 243, 242);
|
|
|
|
/* Warning (orange) */
|
|
--color-warning: rgb(230, 121, 25);
|
|
--color-warning-hover: rgb(233, 137, 53);
|
|
--color-warning-active: rgb(172, 81, 0);
|
|
--color-warning-contrast: rgb(241, 253, 244);
|
|
|
|
/* Success (green) */
|
|
--color-success: rgb(23, 181, 63);
|
|
--color-success-hover: rgb(26, 203, 71);
|
|
--color-success-active: rgb(6, 131, 35);
|
|
--color-success-contrast: rgb(241, 253, 244);
|
|
|
|
/* Info (blue) */
|
|
--color-info: rgb(0, 142, 230);
|
|
--color-info-hover: rgb(10, 161, 255);
|
|
--color-info-active: rgb(0, 91, 166);
|
|
--color-info-contrast: rgb(240, 249, 255);
|
|
|
|
/* Disabled */
|
|
--color-disabled: rgb(177, 171, 186);
|
|
--color-disabled-contrast: rgb(255, 255, 255);
|
|
|
|
/* Text */
|
|
--color-text-base: rgb(75, 69, 84);
|
|
--color-text-soft: rgb(112, 103, 126);
|
|
--color-background-soft: rgb(250, 249, 250);
|
|
}
|