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 }
  20
  21 .slider {
  22         background-color: #ccc;
  23 }
  24 .slider:before {
  25         background-color: white;
  26 }
  27 input:focus + .slider {
  28         box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
  29 }
  30
  31 h1, h2, h3, h4 {
  32         color: white;
  33 }
  34 h1.fqn  a {
  35         color: #fff;
  36 }
  37 h4 {
  38         border: none;
  39 }
  40
  41 .docblock code {
  42         color: #ffb454;
  43 }
  44 .code-header {
  45         color: #e6e1cf;
  46 }
  47 .docblock pre > code, pre > code {
  48         color: #e6e1cf;
  49 }
  50 .item-info code {
  51         color: #e6e1cf;
  52 }
  53 .docblock a > code {
  54         color: #39AFD7 !important;
  55 }
  56 pre, .rustdoc.source .example-wrap {
  57         color: #e6e1cf;
  58 }
  59
  60 .rust-logo {
  61         filter: drop-shadow(1px 0 0px #fff)
  62                 drop-shadow(0 1px 0 #fff)
  63                 drop-shadow(-1px 0 0 #fff)
  64                 drop-shadow(0 -1px 0 #fff);
  65 }
  66
  67 .sidebar .current,
  68 .sidebar a:hover {
  69         background-color: transparent;
  70         color: #ffb44c;
  71 }
  72
  73 .sidebar-elems .location {
  74         color: #ff7733;
  75 }
  76
  77 .line-numbers span { color: #5c6773; }
  78 .line-numbers .line-highlighted {
  79         color: #708090;
  80         background-color: rgba(255, 236, 164, 0.06);
  81         padding-right: 4px;
  82         border-right: 1px solid #ffb44c;
  83 }
  84
  85 .search-results a:hover {
  86         color: #fff !important;
  87         background-color: #3c3c3c;
  88 }
  89
  90 .search-results a:focus {
  91         color: #fff !important;
  92         background-color: #3c3c3c;
  93 }
  94 .search-results a {
  95         color: #0096cf;
  96 }
  97 .search-results a div.desc {
  98         color: #c5c5c5;
  99 }
 100
 101 .content .item-info::before { color: #ccc; }
 102
 103 .content span.foreigntype, .content a.foreigntype { color: #ffa0a5; }
 104 .content span.union, .content a.union { color: #ffa0a5; }
 105 .content span.constant, .content a.constant,
 106 .content span.static, .content a.static { color: #39AFD7; }
 107 .content span.primitive, .content a.primitive { color: #ffa0a5; }
 108 .content span.traitalias, .content a.traitalias { color: #39AFD7; }
 109 .content span.keyword, .content a.keyword { color: #39AFD7; }
 110
 111 .content span.externcrate, .content span.mod, .content a.mod {
 112         color: #39AFD7;
 113 }
 114 .content span.struct, .content a.struct {
 115         color: #ffa0a5;
 116 }
 117 .content span.enum, .content a.enum {
 118         color: #ffa0a5;
 119 }
 120 .content span.trait, .content a.trait {
 121         color: #39AFD7;
 122 }
 123 .content span.type, .content a.type {
 124         color: #39AFD7;
 125 }
 126 .content span.type,
 127 .content a.type,
 128 .block a.current.type { color: #39AFD7; }
 129 .content span.associatedtype,
 130 .content a.associatedtype,
 131 .block a.current.associatedtype { color: #39AFD7; }
 132 .content span.fn, .content a.fn, .content span.method,
 133 .content a.method, .content span.tymethod,
 134 .content a.tymethod, .content .fnname {
 135         color: #fdd687;
 136 }
 137 .content span.attr, .content a.attr, .content span.derive,
 138 .content a.derive, .content span.macro, .content a.macro {
 139         color: #a37acc;
 140 }
 141
 142 .sidebar a { color: #53b1db; }
 143 .sidebar a.current.type { color: #53b1db; }
 144 .sidebar a.current.associatedtype { color: #53b1db; }
 145
 146 pre.rust .comment { color: #788797; }
 147 pre.rust .doccomment { color: #a1ac88; }
 148
 149 a {
 150         color: #39AFD7;
 151 }
 152
 153 .sidebar h2 a,
 154 .sidebar h3 a {
 155         color: white;
 156 }
 157 body.source .example-wrap pre.rust a {
 158         background: #333;
 159 }
 160
 161 details.rustdoc-toggle > summary.hideme > span,
 162 details.rustdoc-toggle > summary::before {
 163         color: #999;
 164 }
 165
 166 details.rustdoc-toggle > summary::before {
 167         filter: invert(100%);
 168 }
 169
 170 #crate-search-div::after {
 171         /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
 172         filter: invert(41%) sepia(12%) saturate(487%) hue-rotate(171deg) brightness(94%) contrast(94%);
 173 }
 174 #crate-search:hover, #crate-search:focus {
 175         border-color: #e0e0e0 !important;
 176 }
 177 #crate-search-div:hover::after, #crate-search-div:focus-within::after {
 178         filter: invert(98%) sepia(12%) saturate(81%) hue-rotate(343deg) brightness(113%) contrast(76%);
 179 }
 180
 181 .search-input {
 182         color: #fff;
 183 }
 184
 185 .module-item .stab,
 186 .import-item .stab {
 187         color: #000;
 188 }
 189
 190 .stab {
 191         color: #c5c5c5;
 192         background: #314559 !important;
 193 }
 194
 195 .stab.portability > code {
 196         color: #e6e1cf;
 197         background: none;
 198 }
 199
 200 .rightside:not(a),
 201 .out-of-band {
 202         color: grey;
 203 }
 204
 205 .result-name .primitive > i, .result-name .keyword > i {
 206         color: #788797;
 207 }
 208
 209 .line-numbers :target { background-color: transparent; }
 210
 211 /* Code highlighting */
 212 pre.rust .number, pre.rust .string { color: #b8cc52; }
 213 pre.rust .kw, pre.rust .kw-2, pre.rust .prelude-ty,
 214 pre.rust .bool-val, pre.rust .prelude-val,
 215 pre.rust .lifetime { color: #ff7733; }
 216 pre.rust .macro, pre.rust .macro-nonterminal { color: #a37acc; }
 217 pre.rust .question-mark {
 218         color: #ff9011;
 219 }
 220 pre.rust .self {
 221         color: #36a3d9;
 222         font-style: italic;
 223 }
 224 pre.rust .attribute {
 225         color: #e6e1cf;
 226 }
 227
 228 .example-wrap > pre.line-number {
 229         color: #5c67736e;
 230         border: none;
 231 }
 232
 233 a.test-arrow {
 234         font-size: 100%;
 235         color: #788797;
 236         border-radius: 4px;
 237         background-color: rgba(57, 175, 215, 0.09);
 238 }
 239
 240 a.test-arrow:hover {
 241         background-color: rgba(57, 175, 215, 0.368);
 242         color: #c5c5c5;
 243 }
 244
 245 .code-attribute {
 246         color: #999;
 247 }
 248
 249 :target {
 250         background: rgba(255, 236, 164, 0.06);
 251         border-right: 3px solid rgba(255, 180, 76, 0.85);
 252 }
 253
 254 pre.compile_fail {
 255         border-left: 2px solid rgba(255,0,0,.4);
 256 }
 257
 258 pre.compile_fail:hover, .information:hover + pre.compile_fail {
 259         border-left: 2px solid #f00;
 260 }
 261
 262 pre.should_panic {
 263         border-left: 2px solid rgba(255,0,0,.4);
 264 }
 265
 266 pre.should_panic:hover, .information:hover + pre.should_panic {
 267         border-left: 2px solid #f00;
 268 }
 269
 270 pre.ignore {
 271         border-left: 2px solid rgba(255,142,0,.6);
 272 }
 273
 274 pre.ignore:hover, .information:hover + pre.ignore {
 275         border-left: 2px solid #ff9200;
 276 }
 277
 278 .tooltip.compile_fail {
 279         color: rgba(255,0,0,.5);
 280 }
 281
 282 .information > .compile_fail:hover {
 283         color: #f00;
 284 }
 285
 286 .tooltip.should_panic {
 287         color: rgba(255,0,0,.5);
 288 }
 289
 290 .information > .should_panic:hover {
 291         color: #f00;
 292 }
 293
 294 .tooltip.ignore {
 295         color: rgba(255,142,0,.6);
 296 }
 297
 298 .information > .ignore:hover {
 299         color: #ff9200;
 300 }
 301
 302 .search-failed a {
 303         color: #39AFD7;
 304 }
 305
 306 .tooltip::after {
 307         background-color: #314559;
 308         color: #c5c5c5;
 309 }
 310
 311 .tooltip::before {
 312         border-color: transparent #314559 transparent transparent;
 313 }
 314
 315 .notable-traits-tooltiptext {
 316         background-color: #314559;
 317 }
 318
 319 #titles > button.selected {
 320         background-color: #141920 !important;
 321         border-bottom: 1px solid #ffb44c !important;
 322         border-top: none;
 323 }
 324
 325 #titles > button:not(.selected) {
 326         background-color: transparent !important;
 327         border: none;
 328 }
 329
 330 #titles > button:hover {
 331         border-bottom: 1px solid rgba(242, 151, 24, 0.3);
 332 }
 333
 334 #titles > button > div.count {
 335         color: #888;
 336 }
 337
 338 /* rules that this theme does not need to set, here to satisfy the rule checker */
 339 /* note that a lot of these are partially set in some way (meaning they are set
 340 individually rather than as a group) */
 341 /* FIXME: these rules should be at the bottom of the file but currently must be
 342 above the `@media (max-width: 700px)` rules due to a bug in the css checker */
 343 /* see https://github.com/rust-lang/rust/pull/71237#issuecomment-618170143 */
 344 .search-input:focus {}
 345 .content span.attr,.content a.attr,.block a.current.attr,.content span.derive,.content a.derive,
 346 .block a.current.derive,.content span.macro,.content a.macro,.block a.current.macro {}
 347 .content span.struct,.content a.struct,.block a.current.struct {}
 348 #titles>button:hover,#titles>button.selected {}
 349 .content span.typedef,.content a.typedef,.block a.current.typedef {}
 350 .content span.union,.content a.union,.block a.current.union {}
 351 pre.rust .lifetime {}
 352 .stab.unstable {}
 353 h2,
 354 h3:not(.impl):not(.method):not(.type):not(.tymethod), h4:not(.method):not(.type):not(.tymethod) {}
 355 .content span.enum,.content a.enum,.block a.current.enum {}
 356 .content span.constant,.content a.constant,.block a.current.constant,.content span.static,
 357 .content a.static, .block a.current.static {}
 358 .content span.keyword,.content a.keyword,.block a.current.keyword {}
 359 .content span.traitalias,.content a.traitalias,.block a.current.traitalias {}
 360 .content span.fn,.content a.fn,.block a.current.fn,.content span.method,.content a.method,
 361 .block a.current.method,.content span.tymethod,.content a.tymethod,.block a.current.tymethod,
 362 .content .fnname {}
 363 pre.rust .kw {}
 364 pre.rust .self,pre.rust .bool-val,pre.rust .prelude-val,pre.rust .attribute {}
 365 .content span.foreigntype,.content a.foreigntype,.block a.current.foreigntype {}
 366 .stab.deprecated {}
 367 .content a.attr,.content a.derive,.content a.macro {}
 368 .stab.portability {}
 369 .content span.primitive,.content a.primitive,.block a.current.primitive {}
 370 .content span.externcrate,.content span.mod,.content a.mod,.block a.current.mod {}
 371 pre.rust .kw-2,pre.rust .prelude-ty {}
 372 .content span.trait,.content a.trait,.block a.current.trait {}
 373
 374 .search-results a:focus span {}
 375 a.result-trait:focus {}
 376 a.result-traitalias:focus {}
 377 a.result-mod:focus,
 378 a.result-externcrate:focus {}
 379 a.result-mod:focus {}
 380 a.result-externcrate:focus {}
 381 a.result-enum:focus {}
 382 a.result-struct:focus {}
 383 a.result-union:focus {}
 384 a.result-fn:focus,
 385 a.result-method:focus,
 386 a.result-tymethod:focus {}
 387 a.result-type:focus {}
 388 a.result-associatedtype:focus {}
 389 a.result-foreigntype:focus {}
 390 a.result-attr:focus,
 391 a.result-derive:focus,
 392 a.result-macro:focus {}
 393 a.result-constant:focus,
 394 a.result-static:focus {}
 395 a.result-primitive:focus {}
 396 a.result-keyword:focus {}
 397
 398 .sidebar a.current.enum {}
 399 .sidebar a.current.struct {}
 400 .sidebar a.current.foreigntype {}
 401 .sidebar a.current.attr,
 402 .sidebar a.current.derive,
 403 .sidebar a.current.macro {}
 404 .sidebar a.current.union {}
 405 .sidebar a.current.constant
 406 .sidebar a.current.static {}
 407 .sidebar a.current.primitive {}
 408 .sidebar a.current.externcrate
 409 .sidebar a.current.mod {}
 410 .sidebar a.current.trait {}
 411 .sidebar a.current.traitalias {}
 412 .sidebar a.current.fn,
 413 .sidebar a.current.method,
 414 .sidebar a.current.tymethod {}
 415 .sidebar a.current.keyword {}
 416
 417 kbd {
 418         color: #c5c5c5;
 419         background-color: #314559;
 420         box-shadow: inset 0 -1px 0 #5c6773;
 421 }
 422
 423 #settings-menu > a, #help-button > button {
 424         color: #fff;
 425 }
 426
 427 #settings-menu > a img {
 428         filter: invert(100);
 429 }
 430
 431 #copy-path {
 432         color: #fff;
 433 }
 434 #copy-path > img {
 435         filter: invert(70%);
 436 }
 437 #copy-path:hover > img {
 438         filter: invert(100%);
 439 }
 440
 441 #settings-menu > a:hover, #settings-menu > a:focus,
 442 #help-button > button:hover, #help-button > button:focus {
 443         border-color: #e0e0e0;
 444 }
 445
 446 .search-results .result-name span.alias {
 447         color: #c5c5c5;
 448 }
 449 .search-results .result-name span.grey {
 450         color: #999;
 451 }
 452
 453 #source-sidebar > .title {
 454         color: #fff;
 455 }
 456 #source-sidebar div.files > a:hover, details.dir-entry summary:hover,
 457 #source-sidebar div.files > a:focus, details.dir-entry summary:focus {
 458         background-color: #14191f;
 459         color: #ffb44c;
 460 }
 461 #source-sidebar div.files > a.selected {
 462         background-color: #14191f;
 463         color: #ffb44c;
 464 }
 465
 466 .scraped-example-list .scrape-help {
 467         border-color: #aaa;
 468         color: #eee;
 469 }
 470 .scraped-example-list .scrape-help:hover {
 471         border-color: white;
 472         color: white;
 473 }
 474 .more-examples-toggle summary, .more-examples-toggle .hide-more {
 475         color: #999;
 476 }
 477 .scraped-example .example-wrap .rust span.highlight {
 478         background: rgb(91, 59, 1);
 479 }
 480 .scraped-example .example-wrap .rust span.highlight.focus {
 481         background: rgb(124, 75, 15);
 482 }
 483 .scraped-example:not(.expanded) .code-wrapper:before {
 484         background: linear-gradient(to bottom, rgba(15, 20, 25, 1), rgba(15, 20, 25, 0));
 485 }
 486 .scraped-example:not(.expanded) .code-wrapper:after {
 487         background: linear-gradient(to top, rgba(15, 20, 25, 1), rgba(15, 20, 25, 0));
 488 }
 489 .toggle-line-inner {
 490         background: #999;
 491 }
 492 .toggle-line:hover .toggle-line-inner {
 493         background: #c5c5c5;
 494 }