3 font-family: Arial, sans-serif;
4 background-color: #fff;
10 /* Inherit text color from body avoiding illegible text in the case where the
11 * user has inverted the browsers custom text and background colors. */
16 font-family: Menlo, monospace;
27 pre .highlight-comment,
28 pre .selection-highlight,
29 pre .selection-highlight-comment {
33 pre .selection-comment {
41 -webkit-user-select: none;
42 -moz-user-select: none;
43 -ms-user-select: none;
46 /* Ensure 8 characters in the document - which due to floating
47 * point rendering issues, might have a width of less than 1 each - are 8
48 * characters wide, so a tab in the 9th position indents properly. See
49 * https://github.com/webcompat/web-bugs/issues/17530#issuecomment-402675091
50 * for more information. */
51 display: inline-block;
68 .exampleHeading .text,
71 text-decoration: none;
74 .exampleHeading .text:hover,
76 text-decoration: underline;
79 text-decoration: underline;
82 text-decoration: none;
95 word-wrap: break-word;
106 border-radius: 0.3125rem;
114 margin: 1.25rem 0 1.25rem;
133 overflow-wrap: break-word;
142 overflow-wrap: break-word;
146 margin: 1.25rem 0.3125rem;
168 margin: 0 0 0 1.25rem;
185 border-collapse: collapse;
189 padding-right: 0.625rem;
203 text-decoration: none;
229 div#page > .container,
230 div#topbar > .container {
236 div#topbar > .container,
237 div#page > .container {
240 div#page.wide > .container,
241 div#topbar.wide > .container {
247 margin-top: 0.3125rem;
259 div#learn .buttons a,
265 text-decoration: none;
267 border-radius: 0.3125rem;
269 div#playground .buttons a,
273 border: 0.0625rem solid #375eab;
275 div#playground .buttons a,
281 #playgroundButton.active {
286 div#learn .buttons a,
290 border: 0.0625rem solid #375eab;
302 -moz-transition: max-height 0.25s linear;
303 transition: max-height 0.25s linear;
306 div#menu.menu-visible {
307 max-height: 31.25rem;
311 margin: 0.625rem 0.125rem;
314 ::-webkit-input-placeholder {
323 display: inline-flex;
329 box-sizing: border-box;
330 -webkit-appearance: none;
331 border-top-right-radius: 0;
332 border-bottom-right-radius: 0;
339 input#search:-webkit-search-decoration {
340 -webkit-appearance: none;
342 input#search:-moz-ui-invalid {
345 input#search + button {
348 background-color: #375eab;
350 border: 0.0625rem solid #375eab;
351 border-top-left-radius: 0;
352 border-top-right-radius: 0.3125rem;
353 border-bottom-left-radius: 0;
354 border-bottom-right-radius: 0.3125rem;
358 input#search + button span {
361 input#search + button svg {
370 margin-right: 0.3125rem;
373 display: inline-block;
376 transform: rotate(-180deg);
396 padding-top: 1.25rem;
404 margin: 0 auto 1.875rem;
407 background: url(/doc/gopher/frontpage.png) no-repeat;
408 background-position: center top;
410 max-height: 200px; /* Setting in px to prevent the gopher from blowing up in very high default font-sizes */
417 text-decoration: none;
418 border-radius: 0.3125rem;
429 margin-top: 0.3125rem;
437 background: url(/doc/share.png) no-repeat;
438 background-position: right center;
439 padding: 0.375rem 1.688rem;
445 font-family: Menlo, monospace;
450 margin-top: 0.625rem;
453 border-top-left-radius: 0.3125rem;
454 border-top-right-radius: 0.3125rem;
456 div#learn .input textarea {
464 border-top: none !important;
470 border-bottom-right-radius: 0.3125rem;
471 border-bottom-left-radius: 0.3125rem;
473 div#learn .output pre {
478 div#learn .input textarea,
480 div#learn .output pre {
485 border: 0.0625rem solid #375eab;
489 padding: 1.25rem 0 0.625rem 0;
492 div#learn .buttons a {
494 margin-left: 0.3125rem;
500 div#learn .toys select {
502 border: 0.0625rem solid #375eab;
505 div#learn .output .exit {
522 margin-bottom: 0.625rem;
538 [style*='--aspect-ratio-padding:'] {
541 padding-top: var(--aspect-ratio-padding);
544 [style*='--aspect-ratio-padding:'] > * {
556 .toggle > .collapsed {
559 .toggle > .expanded {
562 .toggleVisible > .collapsed {
565 .toggleVisible > .expanded {
575 padding-right: 0.625rem;
579 border-top: 0.0625rem solid black;
584 margin-left: 0.625rem;
585 margin-bottom: 0.625rem;
592 /* example and drop-down playground */
594 padding: 0 1.25rem 2.5rem 1.25rem;
601 font-family: Menlo, monospace;
606 margin-top: 0.625rem;
608 border-top-left-radius: 0.3125rem;
609 border-top-right-radius: 0.3125rem;
613 div.play .input textarea {
622 div#playground .input textarea {
627 border-top: none !important;
633 border-bottom-right-radius: 0.3125rem;
634 border-bottom-left-radius: 0.3125rem;
636 div.play .output pre {
641 div.play .input textarea,
643 div.play .output pre {
648 border: 0.0625rem solid #375eab;
652 padding: 1.25rem 0 0.625rem 0;
655 div.play .buttons a {
657 margin-left: 0.3125rem;
668 /* drop-down playground */
670 /* start hidden; revealed by javascript */
677 padding: 0 0.625rem 0.625rem 0.625rem;
682 border: 0.0625rem solid #b0bbc5;
685 border-bottom-left-radius: 0.3125rem;
686 border-bottom-right-radius: 0.3125rem;
688 div#playground .code {
692 div#playground .output {
696 /* Inline runnable snippets (play.js/initPlayground) */
698 #content .playground pre,
699 #content .output pre {
704 outline: 0 solid transparent;
707 #content .playground .number,
708 #content .code .number {
712 #content .playground,
717 border-radius: 0.3125rem;
720 #content .playground {
726 #content .output .stdout,
727 #content .output pre {
730 #content .output .stderr,
731 #content .output .error {
732 color: rgb(244, 74, 63);
734 #content .output .system,
735 #content .output .exit {
736 color: rgb(255, 209, 77);
744 #content .output .buttons {
749 #content .buttons .kill {
756 background-color: darkred;
757 border-bottom-left-radius: 0.25rem;
758 border-bottom-right-radius: 0.25rem;
759 border-top-left-radius: 0.25rem;
760 border-top-right-radius: 0.25rem;
761 padding: 0.125rem 0.25rem 0.125rem 0.25rem; /* TRBL */
772 border-radius: 0.3125rem;
775 @media (max-width: 58.125em) {
784 @media (max-width: 47.5em) {
797 @media (min-width: 43.75em) and (max-width: 62.5em) {
808 @media (max-width: 43.75em) {
810 font-size: 0.9375rem;
823 div#page > .container {
832 div#topbar > .container {
845 display: inline-block;
868 display: inline-block;
887 @media (max-width: 30em) {
899 border: 0.0625rem solid #bbb;
900 white-space: pre-wrap;