apps/meteor/app/theme/client/imports/general/variables.css
:root {
/*
* Color palette
*/
--color-dark-blue: #175cc4;
--color-blue: #1d74f5;
--color-light-blue: #4eb2f5;
--color-lighter-blue: #e8f2ff;
--color-purple: #861da8;
--color-red: #f5455c;
--color-dark-red: #e0364d;
--color-orange: #f38c39;
--color-yellow: #ffd21f;
--color-dark-yellow: #f6c502;
--color-green: #2de0a5;
/*
* General Colors
*/
--color-darkest: #1f2329;
--color-dark: #2f343d;
--color-dark-medium: #414852;
--color-dark-light: #6c727a;
--color-gray: #9ea2a8;
--color-gray-medium: #cbced1;
--color-gray-light: #e1e5e8;
--color-gray-lightest: #f2f3f5;
--color-black: #000000;
--color-white: #ffffff;
/* #region colors Colors */
--rc-color-error: var(--color-red);
--rc-color-error-light: #e1364c;
--rc-color-alert: var(--color-yellow);
--rc-color-alert-light: var(--color-dark-yellow);
--rc-color-success: var(--color-green);
--rc-color-success-light: #25d198;
--rc-color-button-primary: var(--color-blue);
--rc-color-button-primary-light: var(--color-dark-blue);
--rc-color-alert-message-primary: var(--color-blue);
--rc-color-alert-message-primary-background: #f1f6ff;
--rc-color-alert-message-secondary: #7ca52b;
--rc-color-alert-message-secondary-background: #fafff1;
--rc-color-alert-message-warning: #d52d24;
--rc-color-alert-message-warning-background: #fff3f3;
--rc-color-primary: var(--color-dark);
--rc-color-primary-background: var(--color-dark);
--rc-color-primary-darkest: var(--color-darkest);
--rc-color-primary-dark: var(--color-dark-medium);
--rc-color-primary-light: var(--color-gray);
--rc-color-primary-light-medium: var(--color-gray-medium);
--rc-color-primary-lightest: var(--color-gray-lightest);
--rc-color-content: var(--color-white);
--rc-color-link-active: var(--rc-color-button-primary);
--rc-color-announcement-text: #095ad2;
--rc-color-announcement-background: #d1ebfe;
--rc-color-announcement-text-hover: #01336b;
--rc-color-announcement-background-hover: #76b7fc;
/* #endregion */
/* #region colors Old Colors */
--content-background-color: #ffffff;
--primary-background-color: #04436a;
--primary-font-color: #444444;
--primary-action-color: #1d74f5;
--secondary-background-color: #f4f4f4;
--secondary-font-color: #a0a0a0;
--secondary-action-color: #dddddd;
--component-color: #f2f3f5;
--pending-color: #fcb316;
--error-color: #bc2031;
--success-color: #2de0a5;
--selection-color: #02acec;
--attention-color: #9c27b0;
--transparent-darker: rgba(0, 0, 0, 0.5);
/* #endregion */
/* #region less-colors Old Colors (minor) */
--tertiary-font-color: var(--transparent-lightest);
--link-font-color: var(--primary-action-color);
--info-font-color: var(--secondary-font-color);
--custom-scrollbar-color: var(--transparent-darker);
/* #endregion */
/* #region fonts Fonts */
--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Meiryo UI', Arial, sans-serif;
/* #endregion */
/*
* General
*/
--text-size: 0.875rem;
--header-min-height: 60px;
--toolbar-height: 55px;
--footer-min-height: 70px;
--rooms-box-width: 280px;
--flex-tab-width: 380px;
--flex-tab-webrtc-width: 400px;
--flex-tab-webrtc-2-width: 850px;
--border: 1px;
--border-radius: 4px;
--rc-status-online: var(--rc-color-success);
--rc-status-away: var(--rc-color-alert);
--rc-status-busy: var(--rc-color-error);
--rc-status-invisible: var(--color-gray-medium);
--rc-status-offline: var(--transparent-darker);
--rc-status-invisible-sidebar: var(--rc-color-primary-darkest);
--default-padding: 1.5rem;
--default-small-padding: 1rem;
--status-bullet-size: 10px;
--status-bullet-radius: 50%;
--account-username-weight: 700;
--status-name-weight: 400;
--default-font-weight-header: 500;
/*
* General Typography
*/
--text-default-size: 1rem;
--text-default-weight: 500;
--text-small-size: 0.875rem;
--text-small-weight: 500;
--text-heading-size: 1.375rem;
--text-heading-weight: 700;
--text-label-size: 075rem;
--text-label-weight: 600;
--text-tiny-size: 075rem;
--text-tiny-weight: 400;
--text-micro-size: 0.625rem;
--text-micro-weight: 700;
/*
* Forms
*/
--gap-between-elements: 2.5rem;
--label-margin-bottom: 1rem;
/*
* Forms - Button
*/
--button-square-size: 36px;
--button-padding: 0.782rem;
--button-padding-small: 0 0.5rem;
--button-height-small: 28px;
--button-text-size-small: 13px;
--button-text-size: var(--input-font-size);
--button-border-width: var(--border);
--button-border-radius: var(--border-radius);
--button-disabled-background: var(--color-gray-light);
--button-disabled-text-color: var(--color-white);
--button-primary-background: var(--rc-color-button-primary);
--button-primary-text-color: var(--color-white);
--button-cancel-color: var(--rc-color-error);
--button-secondary-background: var(--color-gray-medium);
--button-secondary-text-color: var(--color-dark-medium);
/*
* Forms - Input
*/
--input-font-size: 0.875rem;
--input-title-text-size: var(--input-font-size);
--input-title-color: var(--rcx-color-font-default, var(--rcx-color-neutral-800, #2f343d));
--input-text-color: var(--rcx-color-font-default, var(--rcx-color-neutral-800, #2f343d));
--input-placeholder-color: var(--rc-input-colors-placeholder-color, var(--rcx-color-font-annotation, var(--rcx-color-neutral-600, #9ea2a8)));
--input-icon-color: var(--rcx-color-font-default, var(--rcx-color-neutral-800, var(--color-dark)));
--input-border-color: var(--rcx-input-colors-border-color, var(--rcx-color-stroke-light, var(--rcx-color-neutral-500, var(--color-gray-light))));
--input-border-width: var(--border);
--input-border-radius: var(--border-radius);
--input-description-text-color: var(--rcx-color-font-annotation, var(--rcx-color-neutral-600, var(--color-gray)));
--input-description-text-size: var(--input-font-size);
--input-error-color: var(--rc-color-error);
/*
* Forms - popup list
*/
--popup-list-border-radius: var(--border-radius);
--popup-list-background: var(--color-white);
--popup-list-background-hover: var(--color-gray-lightest);
--popup-list-selected-background: var(--color-gray-lightest);
--popup-list-name-color: #2d343d;
--popup-list-name-size: 1rem;
/*
* Forms - tags
*/
--tags-border-width: var(--border);
--tags-border-radius: var(--border-radius);
--tags-border-color: var(--color-gray-light);
--tags-text-color: var(--rc-color-primary);
--tags-background: #f2f3f5;
--tags-avatar-size: 20px;
/*
* Forms - select avatar
*/
--select-avatar-size: 48px;
--select-avatar-preview-size: 150px;
--select-avatar-upload-background: var(--color-gray-light);
--select-avatar-upload-color: #2d343d;
/*
* Sidebar
*/
--sidebar-width: 17.5rem;
--sidebar-md-width: 20rem;
--sidebar-lg-width: 21rem;
--sidebar-small-width: 90%;
--sidebar-background-hover: var(--rc-color-primary-dark);
--sidebar-background-light: var(--rc-color-primary-lightest);
--sidebar-background-light-hover: var(--rc-color-primary-light);
--sidebar-background-light-active: var(--rc-color-primary-light-medium);
--sidebar-default-padding: 24px;
--sidebar-small-default-padding: 16px;
--sidebar-extra-small-default-padding: 12px;
--sidebar-footer-height: 48px;
--sidebar-small-header-padding: var(--sidebar-small-default-padding);
/*
* Sidebar flex
*/
--sidebar-flex-search-background: var(--color-white);
--sidebar-flex-search-placeholder-color: var(--color-gray);
/*
* Sidebar Account
*/
--sidebar-account-thumb-size: 23px;
--sidebar-small-account-thumb-size: 40px;
--sidebar-account-status-bullet-size: 10px;
--sidebar-small-account-status-bullet-size: 8px;
--sidebar-account-status-bullet-radius: 50%;
--sidebar-account-username-size: 1rem;
--sidebar-account-username-weight: 700;
--sidebar-small-account-username-weight: 400;
--sidebar-account-username-color: var(--color-white);
--sidebar-account-username-color-darker: var(--color-dark);
--sidebar-account-status-font-size: 0.875rem;
--sidebar-account-status-color: var(--color-gray);
/*
* Sidebar Item
*/
--sidebar-item-radius: 2px;
--sidebar-item-height: 24px;
--sidebar-item-height-medium: 34px;
--sidebar-item-height-extended: 52px;
--sidebar-item-thumb-size: 18px;
--sidebar-item-thumb-size-medium: 27px;
--sidebar-item-thumb-size-extended: 36px;
--sidebar-item-text-color: var(--rc-color-primary-light);
--sidebar-item-background: inherit;
--sidebar-item-hover-background: var(--rc-color-primary-darkest);
--sidebar-item-active-background: var(--rc-color-primary-dark);
--sidebar-item-active-color: var(--sidebar-item-text-color);
--sidebar-item-unread-color: var(--rc-color-content);
--sidebar-item-unread-font-weight: 600;
--sidebar-item-popup-background: var(--rc-color-primary-dark);
--sidebar-item-user-status-size: 6px;
--sidebar-item-user-status-radius: 50%;
--sidebar-item-text-size: 0.875rem;
/*
* Rooms list
*/
--rooms-list-title-color: var(--rc-color-primary-light);
--rooms-list-title-text-size: 0.75rem;
--rooms-list-empty-text-color: var(--color-gray);
--rooms-list-empty-text-size: 0.75rem;
--rooms-list-padding: var(--sidebar-default-padding);
--rooms-list-small-padding: var(--sidebar-small-default-padding);
/*
* Chip
*/
--chip-background: #dddddd;
/*
* Avatar
*/
--avatar-radius: var(--border-radius);
--avatar-initials-text-size: 22px;
--avatar-initials-text-weight: 700;
/*
* Badge
*/
--badge-text-color: var(--color-white);
--badge-radius: 12px;
--badge-text-size: 0.75rem;
--badge-background: var(--rc-color-primary-dark);
--badge-unread-background: var(--color-blue);
--badge-user-mentions-background: var(--color-red);
--badge-group-mentions-background: var(--color-orange);
/*
* Mention link
*/
--mention-link-radius: 4px;
--mention-link-background: #fff6d6;
--mention-link-text-color: #b68d00;
--mention-link-me-background: #ffe9ec;
--mention-link-me-text-color: var(--color-red);
--mention-link-group-background: #fde8d7;
--mention-link-group-text-color: var(--color-orange);
/*
* Message box
*/
--message-box-text-size: var(--input-font-size);
--message-box-placeholder-color: var(--rc-input-colors-placeholder-color, var(--rcx-color-font-annotation, var(--rcx-color-neutral-600, #9ea2a8)));
--message-box-markdown-color: var(--rcx-color-font-annotation, var(--rcx-color-neutral-600, var(--color-gray)));
--message-box-markdown-hover-color: var(--rcx-color-font-default, var(--rcx-color-neutral-800, var(--color-dark)));
--message-box-user-activity-color: var(--rcx-color-font-annotation, var(--rcx-color-neutral-600, var(--color-gray)));
--message-box-user-activity-text-size: 0.75rem;
--message-box-user-activity-user-color: var(--rcx-color-font-default, var(--rcx-color-neutral-800, var(--color-dark)));
--message-box-container-border-color: var(--rcx-input-colors-border-color, var(--rcx-color-stroke-light, var(--rcx-color-neutral-500, var(--color-gray-medium))));
--message-box-container-border-width: var(--border);
--message-box-container-border-radius: var(--border-radius);
--message-box-editing-color: var(--rcx-color-status-background-warning-2, #fff6d6);
--message-box-popover-title-text-color: var(--rcx-color-font-annotation, var(--rcx-color-neutral-600, var(--color-gray)));
--message-box-popover-title-text-size: 0.75rem;
--message-box-color: var(--rcx-color-font-default, var(--rcx-color-neutral-800, #2f343d));
/*
* Flex nav
*/
--flex-nav-background: var(--color-gray-lightest);
/*
* Popover
*/
--popover-padding: 1rem;
--popover-radius: var(--border-radius);
--popover-background: var(--color-white);
--popover-column-min-width: 130px;
--popover-column-padding: 1rem;
--popover-title-color: var(--color-dark);
--popover-title-text-size: 0.75rem;
--popover-item-color: var(--color-dark);
--popover-item-text-size: 0.875rem;
--popover-divider-height: 2px;
--popover-divider-color: var(--color-gray-light);
/*
* Tooltip
*/
--tooltip-background: var(--color-darkest);
--tooltip-text-color: var(--color-white);
--tooltip-text-size: 0.75rem;
--tooltip-radius: var(--border-radius);
/*
* Loading
*/
--page-loading-background-light: var(--rcx-color-surface-tint, #f7f8fa);
--page-loading-background-dark: var(--rcx-color-surface-tint, #1f2329);
--loading-bounce-color-light: var(--rcx-color-font-default, #2f343d);
--loading-bounce-color-dark: var(--rcx-color-font-default, #e4e7ea);
}
.rcx-sidebar--main {
--sidebar-background: var(--rcx-color-surface-tint, #262931);
--sidebar-item-text-color: var(--rcx-color-font-default, #9ea2a8);
--sidebar-border-color: var(--rcx-color-stroke-extra-light, #2f343d);
}
/* #endregion */