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