mirror of https://github.com/wassname/talk.git synced 2026-06-27 19:17:09 +08:00

Files

T

Vinh 802f656caa Stream UI bugfixes (#3041 )

* fix: various ui fixes

* fix: tooltip button active color

* fix: teal color

* fix: RTE borders

* fix: snapshots

* fix: reduce padding of show more of this conversation button

* Fix font weight fallback values

* Replace RTE validation messages with v3 CallOuts

CORL-1213

* More styling classnames

* chore: remove not used style

* fix: reaction button primary color

* fix snapshots

* harmonize data-variant on buttons

* [CORL-1215] Install Style Tweaks (#3046)

* fix logic around repeat posts with or without media embeds: (#3042)

* fix: restore ReportCommentEvent (#3037)

Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>

* fix: fixed issue with graphiql (#3043)

* README.md Update (#3045)

* chore: update README.md

* fix: removed README from doctoc

* fix: replaced emoji codes with emjoi

* fix: removed emoji's due to browser rendering issues

* fix: fixed bugs with install styles

Co-authored-by: Tessa Thornton <tessathornton@gmail.com>
Co-authored-by: Vinh <vinh@vinh.tech>

* fix: remove lineheight css variables and make them relative

* fix: adjust line-heights

* fix: update snapshots

* More css bindings for client styling

Set bindable class on community guidelines
Set bindable classname on "Comment on" label

* fix: more tweaks

* fix: snapshots

* fix: lint and tests

Co-authored-by: nick-funk <nick.funk@outlook.com>
Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>
Co-authored-by: Tessa Thornton <tessathornton@gmail.com>

2020-07-31 00:19:59 +02:00

7.6 KiB

Raw Blame History

CSS Variables

Coral defines a set of CSS Variables that you can use to broadly customize the look and feel of your comment stream. For example you can easily redefine the colors or fonts that are being used.

To change the CSS Variables, use the following example in your custom CSS file:

:root {
  --font-family-primary: 'Verdana';
  --round-corners: 0px;
}

The following list contains the CSS Variables that can be customized.

Info: Before 6.3.0 Coral uses a different set of CSS Variables. If you are still using the old CSS Variables, please upgrade. Currently we have a compatibility layer to bridge the old CSS Variables to the new ones. This mechanism will be removed in the future.

Index

Variables

Variables

Use this to remove round corners or make them more round.

--round-corners: 3px;

palette

--palette-divider: rgba(0, 0, 0, 0.12);

palette-primary

Color palette that is used as the primary color.

--palette-primary-100: #EBF6FF; /* Before 6.3.0: --palette-primary-lightest */

--palette-primary-200: #B7DCFF; /* Before 6.3.0: --palette-primary-lighter */

--palette-primary-300: #61B3FF; /* Before 6.3.0: --palette-primary-light */

--palette-primary-400: #2897FF; /* Before 6.3.0: --palette-primary-main */

--palette-primary-500: #0070D9; /* Before 6.3.0: --palette-primary-main */

--palette-primary-600: #0062BE; /* Before 6.3.0: --palette-primary-main */

--palette-primary-700: #005AAE; /* Before 6.3.0: --palette-primary-main */

--palette-primary-800: #004688; /* Before 6.3.0: --palette-primary-dark */

--palette-primary-900: #00386D; /* Before 6.3.0: --palette-primary-darkest */

palette-background

Color palette that is used for background colors.

--palette-background-body: #FFFFFF;

--palette-background-popover: #FFFFFF;

--palette-background-tooltip: #65696B;

--palette-background-input: #FFFFFF;

--palette-background-input-disabled: #EFEFEF;

palette-text

Color palette that is used for text.

--palette-text-000: #FFFFFF; /* Before 6.3.0: --palette-text-light */

--palette-text-100: #65696B; /* Before 6.3.0: --palette-text-secondary */

--palette-text-500: #353F44; /* Before 6.3.0: --palette-text-primary */

--palette-text-900: #14171A; /* Before 6.3.0: --palette-text-dark */

--palette-text-placeholder: #9FA4A6; /* Before 6.3.0: --palette-grey-lighter */

--palette-text-input-disabled: #9FA4A6; /* Before 6.3.0: --palette-grey-lighter */

palette-grey

Color palette that is used for grey shades.

--palette-grey-100: #F4F7F7; /* Before 6.3.0: --palette-grey-lightest */

--palette-grey-200: #EAEFF0; /* Before 6.3.0: --palette-grey-lightest */

--palette-grey-300: #CBD1D2; /* Before 6.3.0: --palette-grey-lighter */

--palette-grey-400: #9FA4A6; /* Before 6.3.0: --palette-grey-lighter */

--palette-grey-500: #65696B; /* Before 6.3.0: --palette-grey-main */

--palette-grey-600: #49545C; /* Before 6.3.0: --palette-grey-dark */

--palette-grey-700: #32404D; /* Before 6.3.0: --palette-grey-darkest */

--palette-grey-800: #202E3E; /* Before 6.3.0: --palette-grey-darkest */

--palette-grey-900: #132033; /* Before 6.3.0: --palette-grey-darkest */

palette-error

Color palette that is used for indicating something negative and is usually red.

--palette-error-100: #FCE5D9; /* Before 6.3.0: --palette-error-lightest */

--palette-error-200: #FAC6B4; /* Before 6.3.0: --palette-error-lighter */

--palette-error-300: #F29D8B; /* Before 6.3.0: --palette-error-lighter */

--palette-error-400: #E5766C; /* Before 6.3.0: --palette-error-light */

--palette-error-500: #D53F3F; /* Before 6.3.0: --palette-error-main */

--palette-error-600: #B72E39; /* Before 6.3.0: --palette-error-main */

--palette-error-700: #991F34; /* Before 6.3.0: --palette-error-dark */

--palette-error-800: #7B142E; /* Before 6.3.0: --palette-error-darkest */

--palette-error-900: #660C2B; /* Before 6.3.0: --palette-error-darkest */

palette-success

Color palette that is used for indicating something positive and is usually green.

--palette-success-100: #D8F9D5; /* Before 6.3.0: --palette-success-lightest */

--palette-success-200: #ADF3AD; /* Before 6.3.0: --palette-success-lighter */

--palette-success-300: #7CDB85; /* Before 6.3.0: --palette-success-lighter */

--palette-success-400: #54B767; /* Before 6.3.0: --palette-success-light */

--palette-success-500: #268742; /* Before 6.3.0: --palette-success-main */

--palette-success-600: #1B743D; /* Before 6.3.0: --palette-success-main */

--palette-success-700: #136138; /* Before 6.3.0: --palette-success-dark */

--palette-success-800: #0C4E32; /* Before 6.3.0: --palette-success-darkest */

--palette-success-900: #07402E; /* Before 6.3.0: --palette-success-darkest */

palette-warning

Color palette that is used for indicating a warning and is usually yellow.

--palette-warning-100: #FFFACC; /* Before 6.3.0: --palette-warning-main */

--palette-warning-500: #FFE91F; /* Before 6.3.0: --palette-warning-main */

font-family

Different font families currently in use.

--font-family-primary: "Open Sans"; /* Before 6.3.0: --font-family-sans-serif */

--font-family-secondary: "Nunito"; /* Before 6.3.0: --font-family-serif */

font-weight

Different font weights with matching values for the fonts.

font-weight-primary

--font-weight-primary-bold: 700; /* Before 6.3.0: --font-weight-bold */

--font-weight-primary-semi-bold: 600; /* Before 6.3.0: --font-weight-medium */

--font-weight-primary-regular: 300; /* Before 6.3.0: --font-weight-light */

font-weight-secondary

--font-weight-secondary-bold: 700; /* Before 6.3.0: --font-weight-bold */

--font-weight-secondary-regular: 300; /* Before 6.3.0: --font-weight-light */

font-size

--font-size-1: 0.75rem;

--font-size-2: 0.875rem;

--font-size-3: 1rem;

--font-size-4: 1.125rem;

--font-size-5: 1.25rem;

--font-size-6: 1.5rem;

--font-size-7: 1.75rem;

--font-size-8: 2rem;

--font-size-9: 2.25rem;

--font-size-icon-xl: 2.25rem;

--font-size-icon-lg: 1.5rem;

--font-size-icon-md: 1.125rem;

--font-size-icon-sm: 0.875rem;

--font-size-icon-xs: 0.75rem;

shadow

Different shadows that are currently used in Coral.

--shadow-popover: 1px 0px 4px rgba(0, 0, 0, 0.25); /* Before 6.3.0: --elevation-main */

spacing

Different spacing units currenty used in Coral.

--spacing-1: 4px;

--spacing-2: 8px;

--spacing-3: 12px;

--spacing-4: 16px;

--spacing-5: 24px;

--spacing-6: 32px;

--spacing-7: 44px;

--spacing-8: 60px;

--spacing-9: 84px;

mini-unit

Grid units for smaller and larger screens.

--mini-unit-small: 4;

--mini-unit-large: 8;

7.6 KiB Raw Blame History