Versions Compared

Old Version 4

changes.mady.by.user user-232a4

Saved on

compared with

New Version 5

changes.mady.by.user Julia Shaptala

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Add samples of styles

...

Code Block
languagecss
themeEmacs
<style>
    .wsc-theme-custom .wsc-badge__label-button {
        background-color: blue !important;
    }
</style>

Examples of current styles for main UI elements

Below are examples of current CSS styles for UI elements that you might want to overwrite with your custom styles.

Spinner inside badge

Code Block
languagecss
themeEmacs
.wsc-badge--checking .wsc-badge__label-button {
    ...
    background-image: url(svg/spinner.svg) !important;
    ...
}

Underlines for spelling and grammar type suggestions

Code Block
languagecss
themeEmacs
.wsc-spelling-problem {
    ...
    border-bottom: 2px solid rgba(234,28,35,.65)!important;
    ...
}

.wsc-grammar-problem {
    ...
    border-bottom: 2px solid rgba(0,98,231,.65)!important;
    ...
}

Hovered state of spelling and grammar type suggestions

Code Block
languagecss
themeEmacs
.wsc-spelling-problem.wsc-problem-text--active {
    background-color: rgba(234,28,35,.15);
}

.wsc-grammar-problem.wsc-problem-text--active {
    background-color: rgba(0,98,231,.15);
}

Badge pulsation animation

Code Block
languagecss
themeEmacs
.wsc-theme-customerThemeName.wsc-badge--pulsing:not(.wsc-badge--small):after {
	-webkit-box-shadow: inset 0px 0px 8px 0 green;
	-moz-box-shadow: inset 0px 0px 8px 0 green;
	box-shadow: inset 0px 0px 8px 0 green;
}