-
Notifications
You must be signed in to change notification settings - Fork 4
Variables
Grom edited this page Jan 23, 2021
·
3 revisions
CSS variables can be used similarly to variables in maths, just they usually are longer. Instead of putting a value in the CSS, e.g. for a color or a background, you can put in a variable. That is especially practical if you want to set multiple things to the same value; you just set them all to the same variable. Changing this value, changes it in each iteration. Variables are given their values like any other property, usually variables are declared in the :root selector, so as well in the Common Theme.
Read more about how to use variables and how to make custom themes with the Common Theme in the Custom Themes Guide.
All Common Theme variables begin with --ct followed by one of the following prefixes to indicate the nature and dimension of the variable:
_bg_ = Background [color, gradient or URL, belongs to a background property]
_brd_ = Border [border property definition]
_cnt_ = Content [Text in "" - belongs to a content property]
_col_ = Color [any color]
_dim_ = Dimension [any dimension or calculation]
_fnt_ = Font family [font family definition]
_fns_ = Font size [any dimension or calculation suitable for font sizes]
_shd_ = Shadow [shadow definition, may be box-shadow as well as text-shadow]
_m_ = For mobile
_c_ = New variables of custom themes
References: Color values, dimension, calculation, linear gradient, radial gradient, background, border, content, font-family, box-shadow, text-shadow
By time, descriptions will be added to the variables. Note that variables for vectorgraphics always consist of a URL-form, a link to an SVG file as first fallback and a link to a PNG as second fallback, in case the browser really hates vectorgraphics.
--ct_bg_body: #fff;
--ct_col_body-txt: #333;
--ct_col_h1-txt: #901;
--ct_col_link: #b01;
--ct_col_link-visited: #824;
--ct_col_link-newpage: #d61;
--ct_col_hr: #aaa;--ct_bg_header-image: url('https://grombald.github.io/Common-Theme/img/body_bg.png');
--ct_bg_header-image: url('https://grombald.github.io/Common-Theme/svg/body_bg.svg');
--ct_bg_header-logo: url('https://grombald.github.io/Common-Theme/img/logo.png');
--ct_bg_header-logo: url('https://grombald.github.io/Common-Theme/svg/header-logo.svg');
--ct_fnt_header-txt: BauhausLTDemi, Arial, sans-serif;
--ct_col_header-txt: #eee;
--ct_col_slogan-txt: #f0f0c0;
--ct_shd_header-txt: 3px 3px 5px #000;
--ct_shd_slogan-txt: 1px 1px 1px rgba(0,0,0,.8);
--ct_fns_header-txt: 180%;
--ct_fns_slogan-txt: 100%;--ct_col_account-menu-txt: #aaa;
--ct_col_account-menu-link: #ddd;
--ct_col_account-submenu-bg: #fff;
--ct_col_account-submenu-link: #700;
--ct_col_account-submenu-link-hover: #000;
--ct_brd_account-submenu: 1px solid #888;--ct_col_searchbox-txt: #ccc;
--ct_brd_searchbox-border: solid 1px #999;
--ct_col_searchbox-highlight: #fff;
--ct_brd_searchbox-highlight: solid 1px var(--ct_col_searchbox-highlight);
--ct_col_searchbox-gradient-1: #300;
--ct_col_searchbox-gradient-2: #633;
--ct_col_searchbox-gradient-3: #966;
--ct_col_searchbox-gradient-4: #c99;
--ct_dim_searchbox-border-radius: 5px;--ct_col_topbar-txt: #fff;
--ct_col_topbar-link: #a01;
--ct_bg_topbar-item: #eee;
--ct_bg_topbar-item-highlight: #fff;
--ct_brd_topbar-menu: solid 1px #666;
--ct_brd_topbar-menu-hover: solid 1px #ddd;
--ct_brd_topbar-item: solid 1px rgba(64,64,64,.1);
--ct_brd_topbar-item-hover: solid 1px rgba(64,64,64,1);
--ct_bg_topbar-home: url('https://grombald.github.io/Common-Theme/img/home_fff.png');
--ct_bg_topbar-home: url('https://grombald.github.io/Common-Theme/svg/home_fff.svg');
--ct_bg_topbar-home-hover: url('https://grombald.github.io/Common-Theme/img/home.png');
--ct_bg_topbar-home-hover: url('https://grombald.github.io/Common-Theme/svg/home.svg');
--ct_bg_open-menu-button: url('https://grombald.github.io/Common-Theme/svg/open-menu-button.svg');--ct_shd_sidebar-block: 0 2px 6px rgba(102,0,0,.5);
--ct_col_sidebar-elements: #600;
--ct_brd_sidebar-elements: 1px solid var(--ct_col_sidebar-elements);
--ct_bg_sidebar-default: #fff;
--ct_bg_sidebar-blue: #e5e5ff;
--ct_bg_sidebar-red: #fff0f0;
--ct_bg_sidebar-green: #e5ffe5;
--ct_bg_sidebar-yellow: #ffffe5;
--ct_col_sidebar-subtext: #666;
--ct_dim_sidebar-border-radius: 10px;
--ct_bg_sidebar-expand: url('https://grombald.github.io/Common-Theme/img/expand.png');
--ct_bg_sidebar-collapse: url('https://grombald.github.io/Common-Theme/img/collapse.png');
--ct_dim_sidebar-link-images: 30px;
--ct_bg_sidebar-item-default: url('https://grombald.github.io/Common-Theme/svg/default.svg');
--ct_bg_sidebar-item-forum: url('https://grombald.github.io/Common-Theme/svg/forum.svg');
--ct_bg_sidebar-item-help: url('https://grombald.github.io/Common-Theme/svg/help.svg');
--ct_bg_sidebar-item-home: url('https://grombald.github.io/Common-Theme/svg/home.svg');
--ct_bg_sidebar-item-main: url('https://grombald.github.io/Common-Theme/svg/main.svg');
--ct_bg_sidebar-item-series: url('https://grombald.github.io/Common-Theme/svg/series.svg');
--ct_bg_sidebar-collapse: url("https://grombald.github.io/Common-Theme/svg/collapse.svg");
--ct_bg_sidebar-expand: url("https://grombald.github.io/Common-Theme/svg/expand.svg");--ct_bg_footer: #444;
--ct_col_footer-txt: #bbb;
--ct_col_footer-link: #fff;--ct_col_page-title: var(--ct_col_h1-txt);
--ct_col_page-title-border: #bbb;--ct_col_rate-primary: #633;
--ct_brd_rate-primary: solid 1px var(--ct_col_rate-primary);
--ct_col_rate-secondary: #fff6f0;
--ct_col_rate-cancel: #966;
--ct_col_rate-link-hover: #fffff0;
--ct_col_rate-border-heritage: #ccc066;
--ct_dim_rate-border-radius: 5px;
--ct_dim_rate-cancel-border-radius: -moz-calc(var(--ct_dim_rate-border-radius) - 2px);
--ct_dim_rate-cancel-border-radius: -webkit-calc(var(--ct_dim_rate-border-radius) - 2px);
--ct_dim_rate-cancel-border-radius: calc(var(--ct_dim_rate-border-radius) - 2px);
--ct_dim_rate-heritage-border-radius: -moz-calc(var(--ct_dim_rate-border-radius) + 3px);
--ct_dim_rate-heritage-border-radius: -webkit-calc(var(--ct_dim_rate-border-radius) + 3px);
--ct_dim_rate-heritage-border-radius: calc(var(--ct_dim_rate-border-radius) + 3px);--ct_brd_image-block: solid 1px #666;
--ct_col_image-block-contrast: #eee;--ct_col_tab-bg: #f5f5f5;
--ct_col_tab-menu-bg-selected-txt: #fff;
--ct_col_tab-menu-border: #444;
--ct_col_tab-menu-bg: #d8d8d8 url('https://grombald.github.io/Common-Theme/img/yuitabs.png') repeat-x;
--ct_col_tab-menu-bg-hover: #d88 url('https://grombald.github.io/Common-Theme/img/yuitabs.png') repeat-x left -1300px;
--ct_col_tab-menu-bg-selected: #700 url('https://grombald.github.io/Common-Theme/img/yuitabs.png') repeat-x left -1400px;
--ct_col_tab-menu-text: #000;
--ct_brd_tab_content: 1px solid #808080;
--ct_col_tab_content-border-top: #243356;--ct_col_toc-bg: #f7f7f7;
--ct_brd_toc: 1px dashed #808080;
--ct_col_blockquote-bg: #f4f4f4;
--ct_brd_blockquote: 1px dashed #999;
--ct_col_code-bg: #f7f7f7;
--ct_col_code-border: #ddd;
--ct_fnt_white-paper-titles: 'Andale Mono', 'Courier New', Courier, monospace;
--ct_bg_white-paper-sheet: #FFF;
--ct_brd_white-paper-sheet: solid 1px #888880;
--ct_brd_white-paper-titles: 1px solid #888;
--ct_col_white-paper-titles-txt: #000;
--ct_brd_white-paper-toc: solid 1px #ccc;
--ct_dim_text-indent: 2em;--ct_col_m_sidebar-bg: #b88686;
--ct_brd_m_sidebar: 1px solid #dedede;
--ct_brd_m_sidebar-right: 1px solid #936b6b;
--ct_col_m_sidebar-button-bg: #fff;
--ct_brd_m_sidebar-button: .2em solid #888;
--ct_shd_m_sidebar-button: 0 0 20px 3px rgba(153,153,153,1);--ct_bg_topbar-home-hover: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20transform%3D%22matrix(3.7795%200%200%203.7795%20-1.4376e-8%20-1114)%22%3E%0A%3Cpath%20d%3D%22m0.39178%20296.54%201.328-1.2608%201.328%201.2608h-0.40197v1.1204h-0.52917v-0.79375h-0.79375v0.79375h-0.52917v-1.1204z%22%20fill%3D%22%23b01%22%20fill-opacity%3D%22.8%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
--ct_bg_topbar-home: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22m1.4807%206.7654%205.0192-4.7652%205.0192%204.7652h-1.5192v4.2346h-2v-3h-3v3h-2v-4.2346z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.8%22%20stroke-width%3D%223.7795%22%2F%3E%0A%3C%2Fsvg%3E");
--ct_bg_sidebar-item-default: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23b01%22%20fill-opacity%3D%22.8%22%20stroke-width%3D%223.8%22%20style%3D%22paint-order%3Astroke%20markers%20fill%22%2F%3E%0A%3C%2Fsvg%3E%0A");
--ct_bg_sidebar-item-forum: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22m4%203c-1.108%200-2%200.892-2%202v1c0%201.108%200.892%202%202%202h2.0156l-0.015625%202.5%202.5-2.5h0.5c1.108%200%202-0.892%202-2v-1c0-1.108-0.892-2-2-2h-5z%22%20fill%3D%22%23b01%22%20fill-opacity%3D%22.8%22%20stroke-linecap%3D%22square%22%20stroke-opacity%3D%22.28%22%20stroke-width%3D%221.5%22%20style%3D%22paint-order%3Astroke%20markers%20fill%22%2F%3E%0A%3C%2Fsvg%3E");
--ct_bg_sidebar-item-help: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20transform%3D%22matrix(3.7795%200%200%203.7795%201.1728e-8%20-1114)%22%3E%0A%3Cpath%20transform%3D%22matrix(.26458%200%200%20.26458%200%20294.75)%22%20d%3D%22m6.5%202-4.5%204.5%204.5%204.5%204.5-4.5zm1.4766%202.4257c0.36739%200.3237%200.55078%200.70117%200.55078%201.1328%200%200.23887-0.068912%200.46444-0.20508%200.67773-0.1336%200.21317-0.42138%200.50362-0.86328%200.87109-0.22866%200.19024-0.37121%200.34348-0.42773%200.45898-0.053954%200.11565-0.077406%200.32309-0.072266%200.62109h-0.98242c-0.00257-0.14135-0.00391-0.22707-0.00391-0.25781%200-0.31859%200.052865-0.58158%200.1582-0.78711%200.10534-0.20561%200.31485-0.4365%200.63086-0.69336%200.31601-0.25691%200.50475-0.42621%200.56641-0.50586%200.09506-0.12598%200.14258-0.26453%200.14258-0.41602%200-0.21065-0.084339-0.39002-0.25391-0.53906-0.167-0.15168-0.39255-0.22656-0.67773-0.22656-0.2749%200-0.50447%200.07765-0.68945%200.23438-0.18498%200.15672-0.31345%200.39566-0.38281%200.7168l-0.99414-0.12305c0.028261-0.45987%200.22368-0.85072%200.58594-1.1719%200.36483-0.32116%200.84268-0.48242%201.449-0.4824s1.1016%200.16396%201.469%200.49026zm-2.0391%204.1348h1.082v1.084h-1.082z%22%20fill%3D%22%23b01%22%20fill-opacity%3D%22.8%22%20style%3D%22paint-order%3Astroke%20markers%20fill%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
--ct_bg_sidebar-item-home: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20transform%3D%22matrix(3.7795%200%200%203.7795%20-1.4376e-8%20-1114)%22%3E%0A%3Cpath%20d%3D%22m0.39178%20296.54%201.328-1.2608%201.328%201.2608h-0.40197v1.1204h-0.52917v-0.79375h-0.79375v0.79375h-0.52917v-1.1204z%22%20fill%3D%22%23b01%22%20fill-opacity%3D%22.8%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
--ct_bg_sidebar-item-main: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20transform%3D%22matrix(3.7795%200%200%203.7795%201.8677e-8%20-1114)%22%3E%0A%3Crect%20transform%3D%22matrix(.70712%20-.7071%20.70712%20.7071%200%200)%22%20x%3D%22-209.08%22%20y%3D%22210.2%22%20width%3D%221.3096%22%20height%3D%221.3096%22%20fill%3D%22%23b01%22%20fill-opacity%3D%22.8%22%20style%3D%22paint-order%3Astroke%20markers%20fill%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
--ct_bg_sidebar-item-series: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22m4.9999%203.9999v7h4.9999v-4.9999l-2-2zm2.0001%200.49999%202.4998%202.5001h-2.4998z%22%20fill%3D%22%23b01%22%20fill-opacity%3D%22.8%22%20stroke-width%3D%22.99998%22%20style%3D%22paint-order%3Astroke%20markers%20fill%22%2F%3E%0A%3Cpath%20d%3D%22m2.997%201.9931v7.0053h1.004v-6.0015h2.0005v-1.0039h-3.0044z%22%20color%3D%22%23000000%22%20color-rendering%3D%22auto%22%20dominant-baseline%3D%22auto%22%20fill%3D%22%23b01%22%20fill-opacity%3D%22.8%22%20image-rendering%3D%22auto%22%20shape-rendering%3D%22auto%22%20solid-color%3D%22%23000000%22%20stop-color%3D%22%23000000%22%20stroke-width%3D%223.7795%22%2F%3E%0A%3C%2Fsvg%3E%0A");
--ct_bg_sidebar-collapse: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22m3%205v3h7v-3zm1.0032%201h4.9938v1h-4.9938z%22%20color%3D%22%23000000%22%20color-rendering%3D%22auto%22%20dominant-baseline%3D%22auto%22%20fill%3D%22%23b01%22%20fill-opacity%3D%22.8%22%20image-rendering%3D%22auto%22%20shape-rendering%3D%22auto%22%20solid-color%3D%22%23000000%22%20stop-color%3D%22%23000000%22%20stroke-width%3D%223.8%22%2F%3E%0A%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%225%22%20height%3D%221%22%20ry%3D%220%22%20fill%3D%22%23a5000f%22%20fill-opacity%3D%22.30545%22%20style%3D%22paint-order%3Astroke%20markers%20fill%22%2F%3E%0A%3C%2Fsvg%3E%0A");
--ct_bg_sidebar-expand: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20transform%3D%22matrix(3.7795%200%200%203.7795%206.7592e-8%20-1114)%22%3E%0A%3Cpath%20transform%3D%22matrix(.26458%200%200%20.26458%200%20294.75)%22%20d%3D%22m5%202.9924v2h-2v3.0001h2v2h3v-2h2v-3.0001h-2v-2zm1%201h1v2h2v1h-2v2h-1v-2h-2v-1h2z%22%20color%3D%22%23000000%22%20color-rendering%3D%22auto%22%20dominant-baseline%3D%22auto%22%20fill%3D%22%23b01%22%20fill-opacity%3D%22.8%22%20image-rendering%3D%22auto%22%20shape-rendering%3D%22auto%22%20solid-color%3D%22%23000000%22%20stop-color%3D%22%23000000%22%2F%3E%0A%3C%2Fg%3E%0A%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20rx%3D%220%22%20ry%3D%220%22%20fill%3D%22%23a5000f%22%20fill-opacity%3D%22.36078%22%20style%3D%22paint-order%3Astroke%20markers%20fill%22%2F%3E%0A%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20rx%3D%220%22%20ry%3D%220%22%20fill%3D%22%23a5000f%22%20fill-opacity%3D%22.36078%22%20style%3D%22paint-order%3Astroke%20markers%20fill%22%2F%3E%0A%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20rx%3D%220%22%20ry%3D%220%22%20fill%3D%22%23a5000f%22%20fill-opacity%3D%22.36078%22%20style%3D%22paint-order%3Astroke%20markers%20fill%22%2F%3E%0A%3Crect%20x%3D%226%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20rx%3D%220%22%20ry%3D%220%22%20fill%3D%22%23a5000f%22%20fill-opacity%3D%22.36078%22%20style%3D%22paint-order%3Astroke%20markers%20fill%22%2F%3E%0A%3C%2Fsvg%3E");
--ct_bg_open-menu-button: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2030%2030%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23888%22%20stroke-linejoin%3D%22bevel%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%225%22%20y%3D%229%22%20width%3D%2220%22%20height%3D%222%22%20style%3D%22paint-order%3Astroke%20markers%20fill%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%2214%22%20width%3D%2220%22%20height%3D%222%22%20style%3D%22paint-order%3Astroke%20markers%20fill%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%2219%22%20width%3D%2220%22%20height%3D%222%22%20style%3D%22paint-order%3Astroke%20markers%20fill%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");