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