Source code
Revision control
Copy as Markdown
Other Tools
:root {
/* colors */
--color-utils-red: #c00;
--color-utils-blue: #00aecd;
--color-utils-black: #0c0c0c;
--color-utils-white: #fff;
--color-utils-gray-dark: #2c2c2c;
--color-utils-gray: #404040;
--color-utils-gray-light: #6e6e6e;
--color-utils-gray-lighter: #b1b1b1;
--color-utils-offwhite: #e6e6e6;
--color-utils-red-light: #f50000;
--color-opacity-black-50: rgb(0 0 0 / 50%);
--color-opacity-black-75: rgb(0 0 0 / 75%);
--color-opacity-black-100: rgb(0 0 0 / 100%);
/* layout */
--border-radius-xsmall: 2px;
--border-radius-small: 4px;
--border-radius-medium: 8px;
--border-radius-large: 16px;
--border-width-none: 0;
--border-width-xsmall: 2px;
--border-radius-50: 50%;
--border-width-small: 1px;
--border-width-medium: 2px;
--border-width-large: 4px;
--content-spacing-xsmall: 4px;
--content-spacing-small: 8px;
--content-spacing-medium: 12px;
--content-spacing-large: 16px;
--content-spacing-xlarge: 24px;
--content-spacing-xxlarge: 32px;
--content-spacing-xxxlarge: 40px;
/* dimensions */
--header-advertising-width: 970px;
--header-advertising-height: 250px;
--article-advertising-width: 300px;
--article-advertising-height: 250px;
--nav-height: 40px;
--nav-button-height: 32px;
--nav-button-height-mobile: 40px;
--footer-height: 32px;
--icon-size: 32px;
--icon-size-medium: 28px;
--icon-size-small: 24px;
--icon-size-tiny: 16px;
/* fonts */
--font-size-small: 12px;
--font-size-medium: 16px;
--font-size-large: 20px;
--font-size-xlarge: 24px;
--font-size-xxlarge: 32px;
--font-size-xxxlarge: 40px;
--font-weight-less-bold: 400;
--font-weight-bold: 500;
--font-weight-more-bold: 600;
--font-family-default: sans-serif;
/* transitions */
--transition-default: all 0.3s ease;
/* z-index */
--index-important: 1000;
--index-advertisement: 400;
--index-somewhatimportant: 600;
--index-content: 80;
--indxe-content-title: 90;
--index-nav: 100;
--index-nav-input: 101;
--index-nav-label: 102;
--index-nav-mobile: 500;
--index-header: 100;
--index-header-button: 101;
--index-dropdown: 200;
--index-dropdown-input: 201;
--index-dropdown-label: 202;
/* theme */
--theme-rtl-toggle-switch-position: 0;
--theme-border-width-small: 1px;
--theme-border-width-medium: 2px;
--theme-small-border: var(--theme-border-width-small) solid transparent;
--theme-medium-border: var(--theme-border-width-medium) solid transparent;
--theme-text-decoration: none;
--theme-advertisement-copy: var(--color-utils-gray-lighter);
--theme-advertisement-icon-fill: var(--color-utils-blue);
--theme-advertisement-icon-background: var(--color-utils-white);
--theme-ui-background: var(--color-utils-white);
--theme-ui-foreground: var(--color-utils-black);
--theme-dialog-background: var(--color-utils-white);
--theme-toast-background: var(--color-opacity-black-75);
--theme-message-background: var(--color-utils-red);
--theme-modal-background: var(--color-opacity-black-50);
--theme-toggle-switch: var(--color-utils-red);
--theme-toggle-background: var(--color-utils-gray-lighter);
--theme-toggle-foreground: var(--color-utils-gray);
--theme-link-highlight: var(--color-utils-red);
--theme-link-color: var(--color-utils-black);
--theme-link-hover: var(--color-utils-gray-light);
--theme-link-background: var(--color-utils-offwhite);
--theme-text-highlight: var(--color-utils-red-light);
--theme-text-lighter: var(--color-utils-white);
--theme-text-light: var(--color-utils-offwhite);
--theme-text-medium: var(--color-utils-gray-light);
--theme-text-dark: var(--color-utils-black);
--theme-image-placeholder: var(--color-utils-offwhite);
--theme-tag-background-red: var(--color-utils-red);
--theme-tag-background-gray: var(--color-utils-gray);
--theme-icon-fill-lighter: var(--color-utils-white);
--theme-icon-fill-light: var(--color-utils-offwhite);
--theme-icon-fill-medium: var(--color-utils-gray-light);
--theme-icon-fill-dark: var(--color-utils-black);
--theme-button-light-text: var(--color-utils-black);
--theme-button-light-text-hover: var(--color-utils-gray-light);
--theme-button-light-background: var(--color-utils-offwhite);
--theme-button-light-background-hover: var(--color-utils-white);
--theme-button-dark-text: var(--color-utils-offwhite);
--theme-button-dark-text-hover: var(--color-utils-white);
--theme-button-dark-background: var(--color-utils-black);
--theme-button-dark-background-hover: var(--color-utils-gray-light);
--theme-navigation-text: var(--color-utils-offwhite);
--theme-navigation-text-hover: var(--color-utils-white);
--theme-navigation-background: transparent;
--theme-navigation-background-hover: var(--color-utils-gray);
--theme-navigation-background-active: var(--color-utils-gray-light);
}