src/librustdoc/html/static/css/themes/ayu.css

   1 /*
   2 Based off of the Ayu theme
   3 Original by Dempfi (https://github.com/dempfi/ayu)
   4 */
   5
   6 :root {
   7         --main-background-color: #0f1419;
   8         --main-color: #c5c5c5;
   9         --settings-input-color: #ffb454;
  10         --sidebar-background-color: #14191f;
  11         --sidebar-background-color-hover: rgba(70, 70, 70, 0.33);
  12         --code-block-background-color: #191f26;
  13         --scrollbar-track-background-color: transparent;
  14         --scrollbar-thumb-background-color: #5c6773;
  15         --scrollbar-color: #5c6773 #24292f;
  16         --headings-border-bottom-color: #5c6773;
  17         --border-color: #5c6773;
  18         --button-background-color: #141920;
  19         --right-side-color: grey;
  20         --code-attribute-color: #999;
  21         --toggles-color: #999;
  22         --search-input-focused-border-color: #5c6773; /* Same as `--border-color`. */
  23         --copy-path-button-color: #fff;
  24         --copy-path-img-filter: invert(70%);
  25         --copy-path-img-hover-filter: invert(100%);
  26         --codeblock-error-hover-color: rgb(255, 0, 0);
  27         --codeblock-error-color: rgba(255, 0, 0, .5);
  28         --codeblock-ignore-hover-color: rgb(255, 142, 0);
  29         --codeblock-ignore-color: rgba(255, 142, 0, .6);
  30         --type-link-color: #ffa0a5;
  31         --trait-link-color: #39afd7;
  32         --assoc-item-link-color: #39afd7;
  33         --function-link-color: #fdd687;
  34         --macro-link-color: #a37acc;
  35         --keyword-link-color: #39afd7;
  36         --mod-link-color: #39afd7;
  37         --link-color: #39afd7;
  38 }
  39
  40 .slider {
  41         background-color: #ccc;
  42 }
  43 .slider:before {
  44         background-color: white;
  45 }
  46 input:focus + .slider {
  47         box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
  48 }
  49
  50 h1, h2, h3, h4 {
  51         color: white;
  52 }
  53 h1.fqn  a {
  54         color: #fff;
  55 }
  56 h4 {
  57         border: none;
  58 }
  59
  60 .docblock code {
  61         color: #ffb454;
  62 }
  63 .code-header {
  64         color: #e6e1cf;
  65 }
  66 .docblock pre > code, pre > code {
  67         color: #e6e1cf;
  68 }
  69 .item-info code {
  70         color: #e6e1cf;
  71 }
  72 .docblock a > code {
  73         color: #39AFD7 !important;
  74 }
  75 pre, .rustdoc.source .example-wrap {
  76         color: #e6e1cf;
  77 }
  78
  79 .rust-logo {
  80         filter: drop-shadow(1px 0 0px #fff)
  81                 drop-shadow(0 1px 0 #fff)
  82                 drop-shadow(-1px 0 0 #fff)
  83                 drop-shadow(0 -1px 0 #fff);
  84 }
  85
  86 .sidebar .current,
  87 .sidebar a:hover {
  88         background-color: transparent;
  89         color: #ffb44c;
  90 }
  91
  92 .sidebar-elems .location {
  93         color: #ff7733;
  94 }
  95
  96 .line-numbers span { color: #5c6773; }
  97 .line-numbers .line-highlighted {
  98         color: #708090;
  99         background-color: rgba(255, 236, 164, 0.06);
 100         padding-right: 4px;
 101         border-right: 1px solid #ffb44c;
 102 }
 103
 104 .search-results a:hover {
 105         color: #fff !important;
 106         background-color: #3c3c3c;
 107 }
 108
 109 .search-results a:focus {
 110         color: #fff !important;
 111         background-color: #3c3c3c;
 112 }
 113 .search-results a {
 114         color: #0096cf;
 115 }
 116 .search-results a div.desc {
 117         color: #c5c5c5;
 118 }
 119
 120 .content .item-info::before { color: #ccc; }
 121
 122 .sidebar a { color: #53b1db; }
 123 .sidebar a.current.type { color: #53b1db; }
 124
 125 pre.rust .comment { color: #788797; }
 126 pre.rust .doccomment { color: #a1ac88; }
 127
 128 .sidebar h2 a,
 129 .sidebar h3 a {
 130         color: white;
 131 }
 132 body.source .example-wrap pre.rust a {
 133         background: #333;
 134 }
 135
 136 details.rustdoc-toggle > summary::before {
 137         filter: invert(100%);
 138 }
 139
 140 #crate-search-div::after {
 141         /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
 142         filter: invert(41%) sepia(12%) saturate(487%) hue-rotate(171deg) brightness(94%) contrast(94%);
 143 }
 144 #crate-search:hover, #crate-search:focus {
 145         border-color: #e0e0e0 !important;
 146 }
 147 #crate-search-div:hover::after, #crate-search-div:focus-within::after {
 148         filter: invert(98%) sepia(12%) saturate(81%) hue-rotate(343deg) brightness(113%) contrast(76%);
 149 }
 150
 151 .search-input {
 152         color: #fff;
 153 }
 154
 155 .module-item .stab,
 156 .import-item .stab {
 157         color: #000;
 158 }
 159
 160 .stab {
 161         color: #c5c5c5;
 162         background: #314559 !important;
 163 }
 164
 165 .stab.portability > code {
 166         color: #e6e1cf;
 167         background: none;
 168 }
 169
 170 .result-name .primitive > i, .result-name .keyword > i {
 171         color: #788797;
 172 }
 173
 174 .line-numbers :target { background-color: transparent; }
 175
 176 /* Code highlighting */
 177 pre.rust .number, pre.rust .string { color: #b8cc52; }
 178 pre.rust .kw, pre.rust .kw-2, pre.rust .prelude-ty,
 179 pre.rust .bool-val, pre.rust .prelude-val,
 180 pre.rust .lifetime { color: #ff7733; }
 181 pre.rust .macro, pre.rust .macro-nonterminal { color: #a37acc; }
 182 pre.rust .question-mark {
 183         color: #ff9011;
 184 }
 185 pre.rust .self {
 186         color: #36a3d9;
 187         font-style: italic;
 188 }
 189 pre.rust .attribute {
 190         color: #e6e1cf;
 191 }
 192
 193 .example-wrap > pre.line-number {
 194         color: #5c67736e;
 195         border: none;
 196 }
 197
 198 a.test-arrow {
 199         font-size: 100%;
 200         color: #788797;
 201         border-radius: 4px;
 202         background-color: rgba(57, 175, 215, 0.09);
 203 }
 204
 205 a.test-arrow:hover {
 206         background-color: rgba(57, 175, 215, 0.368);
 207         color: #c5c5c5;
 208 }
 209
 210 :target {
 211         background: rgba(255, 236, 164, 0.06);
 212         border-right: 3px solid rgba(255, 180, 76, 0.85);
 213 }
 214
 215 .search-failed a {
 216         color: #39AFD7;
 217 }
 218
 219 .tooltip::after {
 220         background-color: #314559;
 221         color: #c5c5c5;
 222 }
 223
 224 .tooltip::before {
 225         border-color: transparent #314559 transparent transparent;
 226 }
 227
 228 .notable-traits-tooltiptext {
 229         background-color: #314559;
 230 }
 231
 232 #titles > button.selected {
 233         background-color: #141920 !important;
 234         border-bottom: 1px solid #ffb44c !important;
 235         border-top: none;
 236 }
 237
 238 #titles > button:not(.selected) {
 239         background-color: transparent !important;
 240         border: none;
 241 }
 242
 243 #titles > button:hover {
 244         border-bottom: 1px solid rgba(242, 151, 24, 0.3);
 245 }
 246
 247 #titles > button > div.count {
 248         color: #888;
 249 }
 250
 251 /* rules that this theme does not need to set, here to satisfy the rule checker */
 252 /* note that a lot of these are partially set in some way (meaning they are set
 253 individually rather than as a group) */
 254 /* FIXME: these rules should be at the bottom of the file but currently must be
 255 above the `@media (max-width: 700px)` rules due to a bug in the css checker */
 256 /* see https://github.com/rust-lang/rust/pull/71237#issuecomment-618170143 */
 257 pre.rust .lifetime {}
 258 pre.rust .kw {}
 259 #titles > button:hover, #titles > button.selected {}
 260 pre.rust .self, pre.rust .bool-val, pre.rust .prelude-val, pre.rust .attribute {}
 261 pre.rust .kw-2, pre.rust .prelude-ty {}
 262
 263 .search-results a:focus span {}
 264 a.result-trait:focus {}
 265 a.result-traitalias:focus {}
 266 a.result-mod:focus,
 267 a.result-externcrate:focus {}
 268 a.result-mod:focus {}
 269 a.result-externcrate:focus {}
 270 a.result-enum:focus {}
 271 a.result-struct:focus {}
 272 a.result-union:focus {}
 273 a.result-fn:focus,
 274 a.result-method:focus,
 275 a.result-tymethod:focus {}
 276 a.result-type:focus {}
 277 a.result-associatedtype:focus {}
 278 a.result-foreigntype:focus {}
 279 a.result-attr:focus,
 280 a.result-derive:focus,
 281 a.result-macro:focus {}
 282 a.result-constant:focus,
 283 a.result-static:focus {}
 284 a.result-primitive:focus {}
 285 a.result-keyword:focus {}
 286
 287 .sidebar a.current.enum {}
 288 .sidebar a.current.struct {}
 289 .sidebar a.current.foreigntype {}
 290 .sidebar a.current.attr,
 291 .sidebar a.current.derive,
 292 .sidebar a.current.macro {}
 293 .sidebar a.current.union {}
 294 .sidebar a.current.constant
 295 .sidebar a.current.static {}
 296 .sidebar a.current.primitive {}
 297 .sidebar a.current.trait {}
 298 .sidebar a.current.traitalias {}
 299 .sidebar a.current.fn {}
 300 .sidebar a.current.keyword {}
 301
 302 kbd {
 303         color: #c5c5c5;
 304         background-color: #314559;
 305         box-shadow: inset 0 -1px 0 #5c6773;
 306 }
 307
 308 #settings-menu > a, #help-button > button {
 309         color: #fff;
 310 }
 311
 312 #settings-menu > a img {
 313         filter: invert(100);
 314 }
 315
 316 #settings-menu > a:hover, #settings-menu > a:focus,
 317 #help-button > button:hover, #help-button > button:focus {
 318         border-color: #e0e0e0;
 319 }
 320
 321 .search-results .result-name span.alias {
 322         color: #c5c5c5;
 323 }
 324 .search-results .result-name span.grey {
 325         color: #999;
 326 }
 327
 328 #source-sidebar > .title {
 329         color: #fff;
 330 }
 331 #source-sidebar div.files > a:hover, details.dir-entry summary:hover,
 332 #source-sidebar div.files > a:focus, details.dir-entry summary:focus {
 333         background-color: #14191f;
 334         color: #ffb44c;
 335 }
 336 #source-sidebar div.files > a.selected {
 337         background-color: #14191f;
 338         color: #ffb44c;
 339 }
 340
 341 .scraped-example-list .scrape-help {
 342         border-color: #aaa;
 343         color: #eee;
 344 }
 345 .scraped-example-list .scrape-help:hover {
 346         border-color: white;
 347         color: white;
 348 }
 349 .scraped-example .example-wrap .rust span.highlight {
 350         background: rgb(91, 59, 1);
 351 }
 352 .scraped-example .example-wrap .rust span.highlight.focus {
 353         background: rgb(124, 75, 15);
 354 }
 355 .scraped-example:not(.expanded) .code-wrapper:before {
 356         background: linear-gradient(to bottom, rgba(15, 20, 25, 1), rgba(15, 20, 25, 0));
 357 }
 358 .scraped-example:not(.expanded) .code-wrapper:after {
 359         background: linear-gradient(to top, rgba(15, 20, 25, 1), rgba(15, 20, 25, 0));
 360 }
 361 .toggle-line-inner {
 362         background: #999;
 363 }
 364 .toggle-line:hover .toggle-line-inner {
 365         background: #c5c5c5;
 366 }