mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2026-01-15 09:24:34 +00:00
281 lines
9.6 KiB
CSS
281 lines
9.6 KiB
CSS
:root {
|
|
/* Color Brand */
|
|
--color-primary: rgb(23, 181, 63);
|
|
--color-primary-light: rgb(96, 214, 98);
|
|
--color-primary-dark: rgb(25, 122, 49);
|
|
--color-primary-active: rgb(25, 194, 67);
|
|
--color-primary-inverse: rgb(241, 253, 244);
|
|
--color-secondary: rgb(0, 142, 230);
|
|
--color-secondary-active: rgb(10, 161, 255);
|
|
--color-secondary-inverse: rgb(240, 249, 255);
|
|
--color-success: rgb(23, 181, 63);
|
|
--color-success-active: rgb(26, 203, 71);
|
|
--color-success-inverse: rgb(241, 253, 244);
|
|
--color-danger: rgb(219, 57, 36);
|
|
--color-danger-light: rgb(242, 97, 65);
|
|
--color-danger-dark: rgb(158, 43, 28);
|
|
--color-danger-active: rgb(224, 81, 62);
|
|
--color-danger-inverse: rgb(253, 243, 242);
|
|
--color-warning: rgb(230, 121, 25);
|
|
--color-warning-active: rgb(233, 137, 53);
|
|
--color-warning-inverse: rgb(253, 247, 241);
|
|
--color-yellow: rgb(245, 196, 0);
|
|
--color-yellow-active: rgb(255, 206, 10);
|
|
--color-yellow-inverse: rgb(255, 252, 240);
|
|
|
|
/* Color Neutral */
|
|
--color-neutral-0: rgb(25, 23, 28);
|
|
--color-neutral-10: rgb(40, 37, 45);
|
|
--color-neutral-20: rgb(75, 69, 84);
|
|
--color-neutral-30: rgb(100, 92, 112);
|
|
--color-neutral-40: rgb(112, 103, 126);
|
|
--color-neutral-50: rgb(151, 143, 163);
|
|
--color-neutral-60: rgb(177, 171, 186);
|
|
--color-neutral-70: rgb(203, 199, 209);
|
|
--color-neutral-80: rgb(229, 227, 232);
|
|
--color-neutral-85: rgb(239, 238, 241);
|
|
--color-neutral-90: rgb(245, 244, 246);
|
|
--color-neutral-95: rgb(250, 249, 250);
|
|
--color-neutral-100: rgb(255, 255, 255);
|
|
|
|
/* Color Text */
|
|
--text-color-base: rgb(75, 69, 84);
|
|
--text-color-soft: rgb(112, 103, 126);
|
|
--text-color-softer: rgb(177, 171, 186);
|
|
--text-color-disabled: rgb(177, 171, 186);
|
|
--text-color-inverse: rgb(250, 249, 250);
|
|
--text-color-link: rgb(23, 181, 63);
|
|
--text-color-link-active: rgb(25, 194, 67);
|
|
--text-color-primary: rgb(23, 181, 63);
|
|
--text-color-primary-inverse: rgb(241, 253, 244);
|
|
--text-color-secondary: rgb(0, 142, 230);
|
|
--text-color-secondary-inverse: rgb(240, 249, 255);
|
|
--text-color-success: rgb(23, 181, 63);
|
|
--text-color-success-inverse: rgb(241, 253, 244);
|
|
--text-color-warning: rgb(230, 121, 25);
|
|
--text-color-warning-inverse: rgb(253, 247, 241);
|
|
--text-color-danger: rgb(219, 57, 36);
|
|
--text-color-danger-inverse: rgb(253, 243, 242);
|
|
|
|
/* Color Background */
|
|
--background-color-base: rgb(255, 255, 255);
|
|
--background-color-soft: rgb(250, 249, 250);
|
|
--background-color-softer: rgb(245, 244, 246);
|
|
--background-color-softer-active: rgb(250, 249, 250);
|
|
--background-color-softest: rgb(239, 238, 241);
|
|
--background-color-softest-active: rgb(245, 244, 246);
|
|
--background-color-inverse: rgb(25, 23, 28);
|
|
--background-color-inverse-soft: rgb(40, 37, 45);
|
|
--background-color-inverse-softer: rgb(75, 69, 84);
|
|
--background-color-inverse-softer-active: rgb(100, 92, 112);
|
|
--background-color-disabled: rgb(245, 244, 246);
|
|
--background-color-primary: rgb(23, 181, 63);
|
|
--background-color-primary-active: rgb(25, 194, 67);
|
|
--background-color-primary-inverse: rgb(241, 253, 244);
|
|
--background-color-secondary: rgb(0, 142, 230);
|
|
--background-color-secondary-active: rgb(10, 161, 255);
|
|
--background-color-secondary-inverse: rgb(240, 249, 255);
|
|
--background-color-third: rgb(126, 82, 204);
|
|
--background-color-third-active: rgb(160, 103, 255);
|
|
--background-color-third-inverse: rgb(239, 230, 255);
|
|
--background-color-success: rgb(23, 181, 63);
|
|
--background-color-success-active: rgb(26, 203, 71);
|
|
--background-color-success-inverse: rgb(241, 253, 244);
|
|
--background-color-warning: rgb(230, 121, 25);
|
|
--background-color-warning-active: rgb(233, 137, 53);
|
|
--background-color-warning-inverse: rgb(253, 247, 241);
|
|
--background-color-danger: rgb(219, 57, 36);
|
|
--background-color-danger-active: rgb(224, 81, 62);
|
|
--background-color-danger-inverse: rgb(253, 243, 242);
|
|
|
|
/* Color Border */
|
|
--border-color-base: rgb(177, 171, 186);
|
|
--border-color-soft: rgb(203, 199, 209);
|
|
--border-color-softer: rgb(229, 227, 232);
|
|
--border-color-softest: rgb(245, 244, 246);
|
|
--border-color-active: rgb(23, 181, 63);
|
|
--border-color-primary: rgb(23, 181, 63);
|
|
--border-color-success: rgb(23, 181, 63);
|
|
--border-color-warning: rgb(230, 121, 25);
|
|
--border-color-danger: rgb(219, 57, 36);
|
|
|
|
/* Border Size */
|
|
--border-size-base: 1px;
|
|
--border-size-large: 3px;
|
|
--border-size-x-large: 6px;
|
|
|
|
/* Border Radius */
|
|
--border-radius-x-large: 5px;
|
|
--border-radius-large: 4px;
|
|
--border-radius-base: 4px;
|
|
--border-radius-small: 2px;
|
|
--border-radius-rounded: 2em;
|
|
--border-radius-circle: 50%;
|
|
|
|
/* Font Size */
|
|
--font-size-xxxx-large: 3rem;
|
|
--font-size-xxx-large: 2.5rem;
|
|
--font-size-xx-large: 2rem;
|
|
--font-size-x-large: 1.5rem;
|
|
--font-size-large: 1.25rem;
|
|
--font-size-base: 1rem;
|
|
--font-size-body: 15px;
|
|
--font-size-small: 0.8rem;
|
|
--font-size-x-small: 0.7rem;
|
|
--font-size-xx-small: 0.6rem;
|
|
|
|
/* Font Space */
|
|
--font-space-xxxx-large: 2em;
|
|
--font-space-xxx-large: 1.5em;
|
|
--font-space-xx-large: 1.2em;
|
|
--font-space-x-large: 1em;
|
|
--font-space-large: 0.6em;
|
|
--font-space-base: 0.5em;
|
|
--font-space-small: 0.4em;
|
|
--font-space-x-small: 0.3em;
|
|
--font-space-xx-small: 0.2em;
|
|
--font-space-xxx-small: 0.1em;
|
|
|
|
/* Font Family */
|
|
--font-family-heading: 'LatoWeb', sans-serif;
|
|
--font-family-text: 'LatoWeb', sans-serif;
|
|
--font-family-serif: 'Gentium Basic', serif;
|
|
--font-family-code: inconsolata, monospace;
|
|
|
|
/* Font Weight */
|
|
--font-weight-regular: normal;
|
|
--font-weight-bold: 600;
|
|
|
|
/* Line Height */
|
|
--line-height-large: 1.5rem;
|
|
--line-height-base: 1.3rem;
|
|
--line-height-small: 1.1rem;
|
|
--line-height-smaller: 1.0rem;
|
|
|
|
/* Letter Spacing */
|
|
--letter-spacing-x-large: 0.1em;
|
|
--letter-spacing-large: 0.05em;
|
|
--letter-spacing-base: 0;
|
|
--letter-spacing-small: -0.01em;
|
|
--letter-spacing-x-small: -0.015em;
|
|
|
|
/* Opacity */
|
|
--opacity-base: 1;
|
|
--opacity-soft: 0.7;
|
|
--opacity-disabled: 0.5;
|
|
|
|
/* Space */
|
|
--space-xxx-large: 128px;
|
|
--space-xx-large: 64px;
|
|
--space-x-large: 48px;
|
|
--space-large: 32px;
|
|
--space-base: 24px;
|
|
--space-small: 16px;
|
|
--space-x-small: 8px;
|
|
--space-xx-small: 4px;
|
|
--space-xxx-small: 2px;
|
|
--space-none: 0;
|
|
|
|
/* Size Height */
|
|
--size-height-base: 42px;
|
|
--size-height-large: 50px;
|
|
--size-height-xlarge: 60px;
|
|
--size-height-footer: 64px;
|
|
--size-height-connections: 315px;
|
|
--size-tappable-square: 44px;
|
|
--size-ribbon: 6px;
|
|
|
|
/* Size Width */
|
|
--size-width-filter-sidebar: 85px;
|
|
--size-width-paginate: 200px;
|
|
--size-max-width-filter-menu: 1026px;
|
|
|
|
/* Size Avatar */
|
|
--size-avatar-small: 34px;
|
|
--size-avatar-base: 44px;
|
|
--size-avatar-large: 114px;
|
|
|
|
/* Size Buttons */
|
|
--size-button-large: 50px;
|
|
--size-button-base: 36px;
|
|
--size-button-small: 26px;
|
|
|
|
/* Size Images */
|
|
--size-image-max-height: 2000px;
|
|
--size-image-cropper-max-height: 600px;
|
|
--size-image-cropper-min-height: 400px;
|
|
--size-image-uploader-min-height: 250px;
|
|
|
|
/* Size Icons */
|
|
--size-icon-base: 16px;
|
|
--size-icon-large: 60px;
|
|
|
|
/* Shadow */
|
|
--box-shadow-x-large: 0 15px 30px 0 rgba(0,0,0,.11),0 5px 15px 0 rgba(0,0,0,.08);
|
|
--box-shadow-large: 0 10px 20px 0 rgba(0,0,0,.11),0 3px 10px 0 rgba(0,0,0,.08);
|
|
--box-shadow-base: 0px 12px 26px -4px rgba(0, 0, 0, .1);
|
|
--box-shadow-small: 0px 8px 18px -2px rgba(0, 0, 0, .1);
|
|
--box-shadow-x-small: 0px 0px 3px 0px rgba(0, 0, 0, .1);
|
|
--box-shadow-active: 0 0 6px 1px rgba(20, 100, 160, 0.5);
|
|
--box-shadow-inset: inset 0 0 20px 1px rgba(0,0,0,.15);
|
|
--box-shadow-small-inset: inset 0 0 0 1px rgba(0,0,0,.05);
|
|
|
|
/* Effects */
|
|
--blur-radius: 22px;
|
|
|
|
/* Animation Duration */
|
|
--duration-short: 0.08s;
|
|
--duration-base: 0.5s;
|
|
--duration-long: 0.75s;
|
|
--duration-x-long: 1s;
|
|
--duration-xx-long: 2s;
|
|
|
|
/* Animation Ease */
|
|
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
--ease-out-sharp: cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
--ease-out-bounce: cubic-bezier(.87,-.41,.19,1.44);
|
|
--ease-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
|
|
--ease-in-sharp: cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
|
|
|
/* Z-Index */
|
|
--z-index-modal: 9999;
|
|
--z-index-overlay: 9000;
|
|
--z-index-dropdown: 8888;
|
|
--z-index-page-submenu: 2500;
|
|
--z-index-page-header: 2000;
|
|
--z-index-page-sidebar: 1500;
|
|
--z-index-sticky-float: 150;
|
|
--z-index-sticky: 100;
|
|
--z-index-post-teaser-link: 5;
|
|
--z-index-surface: 1;
|
|
|
|
/* Custom Tokens (Footer, Header, etc.) */
|
|
--color-header-background: var(--color-neutral-100);
|
|
--color-footer-background: var(--color-neutral-100);
|
|
--color-footer-link: var(--color-primary);
|
|
--color-locale-menu: var(--text-color-soft);
|
|
--color-donation-bar: var(--color-primary);
|
|
--color-donation-bar-light: var(--color-primary-light);
|
|
--color-toast-red: var(--color-danger);
|
|
--color-toast-orange: var(--color-warning);
|
|
--color-toast-yellow: var(--color-yellow);
|
|
--color-toast-blue: var(--color-secondary);
|
|
--color-toast-green: var(--color-success);
|
|
--color-ribbon-event: var(--background-color-third);
|
|
--color-ribbon-event-active: var(--background-color-third-active);
|
|
--color-ribbon-article: var(--background-color-secondary);
|
|
--color-ribbon-article-active: var(--background-color-secondary-active);
|
|
|
|
/* Chat Tokens */
|
|
--chat-message-bg-me: var(--color-primary-light);
|
|
--chat-message-color: var(--text-color-base);
|
|
--chat-message-bg-others: var(--color-neutral-80);
|
|
--chat-sidemenu-bg: var(--color-secondary-active);
|
|
--chat-new-message-color: var(--color-secondary-active);
|
|
--chat-message-timestamp: var(--text-color-soft);
|
|
--chat-message-checkmark-seen: var(--text-color-secondary);
|
|
--chat-message-checkmark: var(--text-color-soft);
|
|
--chat-room-color-counter-badge: var(--text-color-inverse);
|
|
--chat-room-background-counter-badge: var(--color-secondary);
|
|
}
|