vars.css 6.6 KB
Newer Older
hyeryung's avatar
hyeryung committed
1 2
:root {
  /* colors */
hyeryung's avatar
hyeryung committed
3
  --color-bwg-main: #0072ce;
minseok.park's avatar
minseok.park committed
4
  --color-bwg-20: #0072ce20;
hyeryung's avatar
hyeryung committed
5 6 7
  --color-white: #fff;
  --color-smoke-10: #fefefe;
  --color-smoke-30: #fafafa;
hyeryung's avatar
hyeryung committed
8
  --color-smoke-40: #f2f0f8;
hyeryung's avatar
hyeryung committed
9 10
  --color-smoke-50: #f5f5f5;
  --color-smoke-70: #f0f0f0;
hyeryung's avatar
hyeryung committed
11
  --color-smoke-80: #eceded;
hyeryung's avatar
hyeryung committed
12 13 14 15 16 17 18 19 20 21
  --color-smoke-90: #e1e1e1;
  --color-gray-10: #c1c1c1;
  --color-gray-30: #9c9c9c;
  --color-gray-40: #8e8e8e;
  --color-gray-50: #808080;
  --color-gray-70: #5d5d5d;
  --color-jet-20: #4a4a4a;
  --color-jet-30: #424242;
  --color-jet-50: #333;
  --color-jet-70: #222;
hyeryung's avatar
hyeryung committed
22
  --color-jet-80: #12071f;
hyeryung's avatar
hyeryung committed
23
  --color-jet-90: #28262e;
hyeryung's avatar
hyeryung committed
24
  --color-black: #000;
hyeryung's avatar
hyeryung committed
25 26
  --color-blue-10: #f8f9fd;
  --color-blue-30: #dee2e6;
hyeryung's avatar
hyeryung committed
27 28 29 30
  --color-blue-50: #f4f8fc;
  --color-blue-70: #d8def6;
  --color-blue-80: #e3e6f3;
  --color-blue-90: #c0d1fe;
hyeryung's avatar
hyeryung committed
31 32 33 34 35 36 37
  /* fonts */
  --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
  --body-font-size: 1.0625em; /* 17px */
  --body-font-size--desktop: 1.125em; /* 18px */
  --body-font-size--print: 0.9375em; /* 15px */
  --body-line-height: 1.15;
  --body-font-color: var(--color-jet-70);
minseok.park's avatar
minseok.park committed
38 39
  /* --body-font-family: "Roboto", sans-serif; */
  --body-font-family: "Noto Sans KR", sans-serif, arial;
hyeryung's avatar
hyeryung committed
40
  --body-font-weight-bold: 600;
minseok.park's avatar
minseok.park committed
41 42
  /* --monospace-font-family: "Roboto Mono", monospace; */
  --monospace-font-family: "Noto Sans KR", sans-serif, arial;
hyeryung's avatar
hyeryung committed
43
  --monospace-font-weight-bold: 600;
hyeryung's avatar
hyeryung committed
44
  --h-font-weight-bold: 800;
minseok.park's avatar
minseok.park committed
45 46 47 48
  /* border */
  --border-radius-fa: 0.5rem;
  /* shadow */
  --box-shadow-depth-fa: 0.385rem;
hyeryung's avatar
hyeryung committed
49 50 51 52 53
  /* base */
  --body-background: var(--color-white);
  --panel-background: var(--color-smoke-30);
  --panel-border-color: var(--color-smoke-90);
  --scrollbar-track-color: var(--color-smoke-30);
minseok.park's avatar
minseok.park committed
54
  --scrollbar-thumb-color: var(--color-gray-10);
hyeryung's avatar
hyeryung committed
55 56 57
  --scrollbar_hover-thumb-color: var(--color-gray-30);
  /* navbar */
  --navbar-background: var(--color-jet-80);
박민석's avatar
박민석 committed
58
  --navbar-font-color: var(--color-bwg-main);
hyeryung's avatar
hyeryung committed
59 60
  --navbar_hover-background: var(--color-black);
  --navbar-button-background: var(--color-white);
hyeryung's avatar
hyeryung committed
61
  --navbar-button-border-color: var(--color-blue-30);
hyeryung's avatar
hyeryung committed
62
  --navbar-button-font-color: var(--body-font-color);
hyeryung's avatar
hyeryung committed
63
  --navbar-menu-border-color: var(--color-blue-30);
hyeryung's avatar
hyeryung committed
64 65 66 67
  --navbar-menu-background: var(--color-white);
  --navbar-menu-font-color: var(--body-font-color);
  --navbar-menu_hover-background: var(--color-smoke-50);
  /* nav */
hyeryung's avatar
hyeryung committed
68
  --nav-background: var(--color-blue-10);
hyeryung's avatar
hyeryung committed
69 70 71 72 73 74
  --nav-border-color: var(--color-gray-10);
  --nav-line-height: 1.35;
  --nav-heading-font-color: var(--color-jet-30);
  --nav-muted-color: var(--color-gray-70);
  --nav-panel-divider-color: var(--color-smoke-90);
  --nav-secondary-background: var(--color-smoke-70);
박민석's avatar
박민석 committed
75 76
  --nav-logo-width: 30px;
  --nav-logo-height: 30px;
hyeryung's avatar
hyeryung committed
77
  /* toolbar */
hyeryung's avatar
hyeryung committed
78 79
  --toolbar-background: var(--color-blue-10);
  --toolbar-border-color: var(--color-blue-30);
hyeryung's avatar
hyeryung committed
80 81 82
  --toolbar-font-color: var(--color-gray-70);
  --toolbar-muted-color: var(--color-gray-40);
  --page-version-menu-background: var(--color-smoke-70);
minseok.park's avatar
minseok.park committed
83
  --page-version-missing-font-color: var(--color-gray-30);
hyeryung's avatar
hyeryung committed
84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
  /* admonitions */
  --caution-color: #a0439c;
  --caution-on-color: var(--color-white);
  --important-color: #d32f2f;
  --important-on-color: var(--color-white);
  --note-color: #217ee7;
  --note-on-color: var(--color-white);
  --tip-color: #41af46;
  --tip-on-color: var(--color-white);
  --warning-color: #e18114;
  --warning-on-color: var(--color-white);
  /* doc */
  --doc-font-color: var(--color-jet-50);
  --doc-font-size: inherit;
  --doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem);
  --doc-line-height: 1.6;
  --doc-margin: 0 auto;
  --doc-margin--desktop: 0 2rem;
  --heading-font-color: var(--color-jet-80);
  --alt-heading-font-weight: var(--body-font-weight-bold);
  --section-divider-color: var(--panel-border-color);
  --link-font-color: #1565c0;
  --link_hover-font-color: #104d92;
  --link_unresolved-font-color: var(--important-color);
  --abstract-background: var(--color-smoke-70);
  --abstract-font-color: var(--color-jet-20);
  --abstract-border-color: var(--panel-border-color);
  --admonition-background: var(--panel-background);
  --admonition-label-font-weight: var(--body-font-weight-bold);
  --caption-font-color: var(--color-gray-70);
  --caption-font-style: italic;
  --caption-font-weight: var(--body-font-weight-bold);
  --code-background: var(--panel-background);
  --code-font-color: var(--body-font-color);
  --example-background: var(--color-white);
  --example-border-color: var(--color-gray-70);
  --kbd-background: var(--panel-background);
  --kbd-border-color: var(--color-gray-10);
  --pre-background: var(--panel-background);
  --pre-border-color: var(--panel-border-color);
  --pre-annotation-font-color: var(--color-gray-50);
  --quote-background: var(--panel-background);
  --quote-border-color: var(--color-gray-70);
  --quote-font-color: var(--color-gray-70);
  --quote-attribution-font-color: var(--color-gray-40);
129 130
  /* --sidebar-background: var(--color-smoke-90); */
  --sidebar-background: var(--color-white);
hyeryung's avatar
hyeryung committed
131 132
  --table-border-color: var(--panel-border-color);
  --table-stripe-background: var(--panel-background);
hyeryung's avatar
hyeryung committed
133
  --table-footer-background: linear-gradient(to bottom, var(--color-smoke-70) 0%, var(--color-white) 100%);
hyeryung's avatar
hyeryung committed
134 135
  --content-border-radius: 10px;
  --content-padding: 15px 20px;
hyeryung's avatar
hyeryung committed
136 137 138 139 140 141 142
  /* toc */
  --toc-font-color: var(--nav-muted-color);
  --toc-heading-font-color: var(--doc-font-color);
  --toc-border-color: var(--panel-border-color);
  --toc-line-height: 1.2;
  /* footer */
  --footer-line-height: var(--doc-line-height);
hyeryung's avatar
hyeryung committed
143 144
  --footer-background: var(--color-jet-50);
  --footer-font-color: var(--color-white);
hyeryung's avatar
hyeryung committed
145 146
  --footer-link-font-color: var(--color-jet-80);
  /* dimensions and positioning */
박민석's avatar
박민석 committed
147
  --navbar-height: calc(63 / var(--rem-base) * 1.25rem);
hyeryung's avatar
hyeryung committed
148 149 150 151 152 153 154 155 156
  --toolbar-height: calc(45 / var(--rem-base) * 1rem);
  --drawer-height: var(--toolbar-height);
  --body-top: var(--navbar-height);
  --body-min-height: calc(100vh - var(--body-top));
  --nav-height: calc(var(--body-min-height) - var(--toolbar-height));
  --nav-height--desktop: var(--body-min-height);
  --nav-panel-menu-height: calc(100% - var(--drawer-height));
  --nav-panel-explore-height: calc(50% + var(--drawer-height));
  --nav-width: calc(270 / var(--rem-base) * 1rem);
박민석's avatar
박민석 committed
157
  --toc-top: calc(var(--body-top) + (var(--toolbar-height) * 2));
hyeryung's avatar
hyeryung committed
158 159 160 161 162 163 164 165 166 167 168
  --toc-height: calc(100vh - var(--toc-top) - 2.5rem);
  --toc-width: calc(162 / var(--rem-base) * 1rem);
  --toc-width--widescreen: calc(216 / var(--rem-base) * 1rem);
  --doc-max-width: calc(720 / var(--rem-base) * 1rem);
  --doc-max-width--desktop: calc(828 / var(--rem-base) * 1rem);
  /* stacking */
  --z-index-nav: 1;
  --z-index-toolbar: 2;
  --z-index-page-version-menu: 3;
  --z-index-navbar: 4;
}