/** * Dark mode design tokens. * * Every color below is one of the 72 distinct hex values this app actually * used pre-dark-mode (see notes/ and the "Dark Mode Color Audit" / * "Dead Style Candidates" artifacts for how these were audited). Each got * its own token rather than being merged with visually-similar neighbors, * so switching to var() below is a lossless, zero-visual-change refactor in * light mode - nothing here should look any different than before. * * Naming: --gray-N (1=white..20=black) for neutrals; --{cluster}-{role}-N * for saturated colors, where role is "text" (foreground/color usage) or * "surface" (background/border usage) and N is arbitrary rank, not meaning. * * Theme resolution follows the standard three-state pattern for light/dark: an explicit * user choice stamps data-theme="light"/"dark" on (see the inline script in * react-app.jsp that avoids a flash of the wrong theme); with no explicit choice, * prefers-color-scheme decides. The toggle itself (a temporary, testing-only header button - * see DarkModeToggle.tsx) writes that attribute via the darkMode SettingsContext key. * * There's also a fourth mode, "dim" (data-theme="dim", see the block below the dark ones) - * a desaturated dark blue-gray theme in the style of X/Twitter's and Bluesky's "Dim", less * harsh than full dark mode. It has no prefers-color-scheme equivalent, so it can only ever * be reached via an explicit choice, never auto-detected. */ :root { /* Tells the browser which native UI (form-field defaults, `Canvas`/`light-dark()` system colors, scrollbars) to use - without this, those track the OS setting directly and ignore the data-theme attribute below entirely. */ color-scheme: light; /* neutral */ --gray-1: #ffffff; --gray-10: #cccccc; --gray-11: #bbbbbb; --gray-12: #aaaaaa; --gray-13: #999999; --gray-14: #888888; --gray-15: #777777; --gray-16: #666666; --gray-17: #555555; --gray-18: #444444; --gray-19: #222222; --gray-2: #fdfdfd; --gray-20: #000000; --gray-3: #f8f8f8; --gray-4: #f4f4f4; --gray-5: #f3f3f3; --gray-6: #eeeeee; --gray-7: #dddddd; --gray-8: #d6d8db; --gray-9: #d8d8d8; /* red */ --red-surface-1: #ffdddd; --red-surface-2: #ffcccc; --red-surface-3: #fbeaeb; --red-surface-4: #ffaaaa; --red-text-1: #990000; --red-text-2: #660000; --red-text-3: #cc0000; --red-text-4: #880000; --red-text-5: #440000; --red-text-6: #aa0000; --red-text-7: #b30002; /* orange */ --orange-surface-1: #ffddcc; --orange-surface-2: #ffeedd; --orange-surface-3: #ffddaa; /* yellow */ --yellow-surface-1: #cccc88; --yellow-surface-10: #ffff33; --yellow-surface-11: #eeeecc; --yellow-surface-12: #ffffdd; --yellow-surface-13: #ffffbb; --yellow-surface-14: #f2f2ee; --yellow-surface-2: #ffffee; --yellow-surface-3: #ffffcc; --yellow-surface-4: #ffff99; --yellow-surface-5: #ffffaa; --yellow-surface-6: #ffffd8; --yellow-surface-7: #dddd55; --yellow-surface-8: #fdfdef; --yellow-surface-9: #f4f499; --yellow-text-1: #dddd77; --yellow-text-2: #888800; --yellow-text-3: #e0c800; --yellow-text-4: #555500; --yellow-text-5: #666600; /* green */ --green-surface-1: #ddffdd; --green-surface-2: #eeffdd; --green-surface-3: #66ff66; --green-text-1: #008800; --green-text-2: #003300; --green-text-3: #00cc00; --green-text-4: #669066; --green-text-5: #005c00; --green-text-6: #00ce0d; /* blue */ --blue-surface-1: #eeeeff; --blue-surface-2: #6677cc; --blue-surface-3: #7788dd; --blue-surface-4: #e7e9f8; --blue-text-1: #305066; --blue-text-2: #507086; --blue-text-3: #000099; --blue-text-4: #004488; --blue-text-5: #0033ee; /* purple */ --purple-text-1: #440044; /* button text - deliberately NOT part of the neutral gray ramp: buttons keep a saturated colored background in both themes, so their text stays a fixed bright value instead of inverting along with the page's neutral surfaces. */ --button-text: #eeeeee; --button-text-hover: #ffffff; /* disabled-button colors - also NOT part of the neutral gray ramp: on light mode these keep the original gray-13/gray-7 look, but dark mode needs its own values (not gray-13/gray-7's dark-mode equivalents) so the disabled state stays close in luminosity to the button's own (dark) background instead of standing out as a bright highlight. */ --button-disabled-bg: #999999; --button-disabled-text: #dddddd; /* login-status dropdown colors - keeps its original yellowish look in light mode, but that same yellow reads as too garish/dark-yellow in dark mode, so dark mode gets its own values (matching the neutral gray-4/gray-7 look used for zebra striping) instead of a straightforward inversion of the light-mode yellow. */ --userinfo-bg: #ffffee; --userinfo-border: #dddd77; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; /* neutral */ --gray-1: #000000; --gray-10: #757575; --gray-11: #818181; --gray-12: #8e8e8e; --gray-13: #9c9c9c; --gray-14: #a9a9a9; --gray-15: #b6b6b6; --gray-16: #c3c3c3; --gray-17: #cfcfcf; --gray-18: #dcdcdc; --gray-19: #e9e9e9; --gray-2: #0d0d0d; --gray-20: #f7f7f7; --gray-3: #1a1a1a; --gray-4: #262626; --gray-5: #212121; --gray-6: #414141; --gray-7: #4e4e4e; --gray-8: #686868; --gray-9: #5b5b5b; /* red */ --red-surface-1: #6a1f1f; --red-surface-2: #681e1e; --red-surface-3: #5f2b2f; --red-surface-4: #631d1d; --red-text-1: #e96565; --red-text-2: #e85d5d; --red-text-3: #ea6d6d; --red-text-4: #e96262; --red-text-5: #e75757; --red-text-6: #e96767; --red-text-7: #ea696b; /* orange */ --orange-surface-1: #68371e; --orange-surface-2: #6a441f; --orange-surface-3: #63471d; /* yellow */ --yellow-surface-1: #46462a; --yellow-surface-10: #525218; --yellow-surface-11: #53532f; --yellow-surface-12: #6a6a1f; --yellow-surface-13: #65651d; --yellow-surface-14: #565633; --yellow-surface-2: #3d3d17; --yellow-surface-3: #68681e; --yellow-surface-4: #60601c; --yellow-surface-5: #63631d; --yellow-surface-6: #69691e; --yellow-surface-7: #494921; --yellow-surface-8: #636328; --yellow-surface-9: #595922; --yellow-text-1: #b8b878; --yellow-text-2: #c0c050; --yellow-text-3: #ebde70; --yellow-text-4: #e7e75a; --yellow-text-5: #e8e85d; /* green */ --green-surface-1: #1a4a1a; --green-surface-2: #2f4a1a; --green-surface-3: #1a591a; --green-text-1: #62e962; --green-text-2: #55e755; --green-text-3: #6dea6d; --green-text-4: #6bb36b; --green-text-5: #5be85b; --green-text-6: #6dea75; /* blue */ --blue-surface-1: #20206d; --blue-surface-2: #3d4a8a; --blue-surface-3: #4d5aa8; --blue-surface-4: #303559; --blue-text-1: #7eaece; --blue-text-2: #87b4d2; --blue-text-3: #6565e9; --blue-text-4: #62a5e9; --blue-text-5: #728ceb; /* purple */ --purple-text-1: #e757e7; --button-disabled-bg: #3d3d3d; --button-disabled-text: #8a8a8a; --userinfo-bg: #333333; --userinfo-border: #5a5a5a; } } :root[data-theme="dark"] { color-scheme: dark; /* neutral */ --gray-1: #000000; --gray-10: #757575; --gray-11: #818181; --gray-12: #8e8e8e; --gray-13: #9c9c9c; --gray-14: #a9a9a9; --gray-15: #b6b6b6; --gray-16: #c3c3c3; --gray-17: #cfcfcf; --gray-18: #dcdcdc; --gray-19: #e9e9e9; --gray-2: #0d0d0d; --gray-20: #f7f7f7; --gray-3: #1a1a1a; --gray-4: #262626; --gray-5: #212121; --gray-6: #414141; --gray-7: #4e4e4e; --gray-8: #686868; --gray-9: #5b5b5b; /* red */ --red-surface-1: #6a1f1f; --red-surface-2: #681e1e; --red-surface-3: #5f2b2f; --red-surface-4: #631d1d; --red-text-1: #e96565; --red-text-2: #e85d5d; --red-text-3: #ea6d6d; --red-text-4: #e96262; --red-text-5: #e75757; --red-text-6: #e96767; --red-text-7: #ea696b; /* orange */ --orange-surface-1: #68371e; --orange-surface-2: #6a441f; --orange-surface-3: #63471d; /* yellow */ --yellow-surface-1: #46462a; --yellow-surface-10: #525218; --yellow-surface-11: #53532f; --yellow-surface-12: #6a6a1f; --yellow-surface-13: #65651d; --yellow-surface-14: #565633; --yellow-surface-2: #3d3d17; --yellow-surface-3: #68681e; --yellow-surface-4: #60601c; --yellow-surface-5: #63631d; --yellow-surface-6: #69691e; --yellow-surface-7: #494921; --yellow-surface-8: #636328; --yellow-surface-9: #595922; --yellow-text-1: #b8b878; --yellow-text-2: #c0c050; --yellow-text-3: #ebde70; --yellow-text-4: #e7e75a; --yellow-text-5: #e8e85d; /* green */ --green-surface-1: #1a4a1a; --green-surface-2: #2f4a1a; --green-surface-3: #1a591a; --green-text-1: #62e962; --green-text-2: #55e755; --green-text-3: #6dea6d; --green-text-4: #6bb36b; --green-text-5: #5be85b; --green-text-6: #6dea75; /* blue */ --blue-surface-1: #20206d; --blue-surface-2: #3d4a8a; --blue-surface-3: #4d5aa8; --blue-surface-4: #303559; --blue-text-1: #7eaece; --blue-text-2: #87b4d2; --blue-text-3: #6565e9; --blue-text-4: #62a5e9; --blue-text-5: #728ceb; /* purple */ --purple-text-1: #e757e7; --button-disabled-bg: #3d3d3d; --button-disabled-text: #8a8a8a; --userinfo-bg: #333333; --userinfo-border: #5a5a5a; } /** * "Dim" mode: a third explicit theme choice alongside light/dark (see DarkModeToggle.tsx), * styled after X/Twitter's and Bluesky's "Dim" - a desaturated dark blue-gray (~hue 215, * ~31% saturation) instead of true black, which is easier on the eyes than full dark mode * and avoids the harsh glare/halation that pure black next to bright text causes on OLED * screens. There is no "prefers-color-scheme: dim" media feature (the browser only knows * light/dark), so unlike dark mode, dim mode can never be auto-detected from the OS - it is * only ever reached via an explicit user choice. color-scheme stays "dark" here too, for the * same reason: it is the closest native browser concept available. * * gray-1 (the page background) is pinned to rgb(21,29,40) / #151d28 - Bluesky's dim * background color. The rest of the neutral ramp and the four custom (non-token-cluster) * colors are dark mode's *original* (pre-true-black) values, shifted by the same amount * (+2.94 lightness points) it took to bring gray-1 from its old value up to that exact * target, then re-hued to hue=215/sat=31% (matching that background's own hue/saturation) * at the resulting lightness per rank. This keeps the same tonal steps/contrast * relationships as dark mode's original ramp, just softer and blue-gray tinted instead of * true black. The saturated color clusters (red/orange/yellow/green/blue/purple) are reused * unchanged from dark mode: accent colors don't need the same blue-gray treatment as the * neutral surfaces, and keeping them identical avoids double-tuning three near-duplicate * palettes. */ :root[data-theme="dim"] { color-scheme: dark; /* neutral */ --gray-1: #151d28; --gray-10: #5c7ca9; --gray-11: #6a88b1; --gray-12: #7993b8; --gray-13: #88a0c1; --gray-14: #97acc8; --gray-15: #a5b7d0; --gray-16: #b4c3d7; --gray-17: #c2cedf; --gray-18: #d0dae7; --gray-19: #dfe5ee; --gray-2: #1d2736; --gray-20: #eff2f6; --gray-3: #243245; --gray-4: #2c3c53; --gray-5: #28384d; --gray-6: #3c5271; --gray-7: #435d80; --gray-8: #52729d; --gray-9: #4b678e; /* red */ --red-surface-1: #6a1f1f; --red-surface-2: #681e1e; --red-surface-3: #5f2b2f; --red-surface-4: #631d1d; --red-text-1: #e96565; --red-text-2: #e85d5d; --red-text-3: #ea6d6d; --red-text-4: #e96262; --red-text-5: #e75757; --red-text-6: #e96767; --red-text-7: #ea696b; /* orange */ --orange-surface-1: #68371e; --orange-surface-2: #6a441f; --orange-surface-3: #63471d; /* yellow */ --yellow-surface-1: #46462a; --yellow-surface-10: #525218; --yellow-surface-11: #53532f; --yellow-surface-12: #6a6a1f; --yellow-surface-13: #65651d; --yellow-surface-14: #565633; --yellow-surface-2: #3d3d17; --yellow-surface-3: #68681e; --yellow-surface-4: #60601c; --yellow-surface-5: #63631d; --yellow-surface-6: #69691e; --yellow-surface-7: #494921; --yellow-surface-8: #636328; --yellow-surface-9: #595922; --yellow-text-1: #b8b878; --yellow-text-2: #c0c050; --yellow-text-3: #ebde70; --yellow-text-4: #e7e75a; --yellow-text-5: #e8e85d; /* green */ --green-surface-1: #1a4a1a; --green-surface-2: #2f4a1a; --green-surface-3: #1a591a; --green-text-1: #62e962; --green-text-2: #55e755; --green-text-3: #6dea6d; --green-text-4: #6bb36b; --green-text-5: #5be85b; --green-text-6: #6dea75; /* blue */ --blue-surface-1: #20206d; --blue-surface-2: #3d4a8a; --blue-surface-3: #4d5aa8; --blue-surface-4: #303559; --blue-text-1: #7eaece; --blue-text-2: #87b4d2; --blue-text-3: #6565e9; --blue-text-4: #62a5e9; --blue-text-5: #728ceb; /* purple */ --purple-text-1: #e757e7; --button-disabled-bg: #2f415a; --button-disabled-text: #6f8cb4; --userinfo-bg: #28384d; --userinfo-border: #435d80; } /** * CodeStepByStep main stylesheet. * * Merged from three files that accumulated across the app's history: * 1. style.css - Practice-It's original styles (the app this one was forked from) * 2. csbs.css - CodeStepByStep's additions, from the original JSP-only era * 3. react-app.css - styles added for the React frontend * Now that Practice-It and the non-React JSP frontend are both gone, there was no reason * to keep the split. Sections below are concatenated in that same order, unchanged, so the * cascade behaves exactly as it did before the merge (verified against mobile.css / * csbs-desktop.css / csbs-mobile.css, which is why this file's in react-app.jsp must * stay positioned before those three - see the comment there). */ /* ============================================================ */ /* == style.css (formerly) ===================================== */ /* ============================================================ */ /** * CodeStepByStep main style sheet */ html { text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; } @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.5.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } /* * most of the CSS rules in this file are sorted into ABC order, but these first few are * deemed important to every overall page / the site as a whole, so they come first */ body { font-family: sans-serif; margin: 0; padding: 0; } /* centered 'overall' default layout */ .overalllayoutaligntext { text-align: center; } header a.root-link { text-decoration: none; color: inherit; } .overalllayoutalignblock { margin-left: auto; margin-right: auto; } #mainbodyarea { padding: 0.75em; margin-top: 20px; } #mainbodyarea, .flashcontentarea { min-width: 15em; max-width: 90%; } #mainbodyarea{ background-color: var(--gray-1); } #topmessage { height: 50px; text-align: center; } #topmessage span { display: block; padding-top: 15px; } #topmessagesarea { background-color: var(--gray-1); min-width: 15em; } /* header { left: 0; margin: 0; top: 0; width: 100%; z-index: 9999; } */ header .sitelogoarea { font-size: 2em; font-weight: bold; margin: 0; height: 50px; line-height: 45px; } header .sitelogoarea .logoimage { height: 32px; margin-left: .25em; margin-right: .25em; vertical-align: middle; width: 32px; } /* end special citizens area */ #adblockoverlay { background-color: var(--blue-surface-1); color: var(--gray-16); height: 100%; left: 0; padding-left: 20%; padding-right: 20%; padding-top: 3em; position: fixed; text-align: center; top: 0; width: 60%; z-index: 99999; } #adminfeatures { border-bottom: 1px solid var(--gray-10); } #adminfeatures > div { text-align: left; vertical-align: top; } #adminfeatures fieldset { border: none; } #adminfeatures legend { border: none; font-weight: bold; text-align: left; } #adminfeatures fieldset p { margin-top: 0; margin-bottom: 0.25em; max-width: 18em; } .announcement { margin-bottom: 1em; margin-top: 1em; max-width: 60em; padding-left: 2em; padding-right: 2em; } .attemptcell { color: var(--red-text-2); white-space: nowrap; } .successcell { color: var(--green-text-2); white-space: nowrap; } .predescriptionrowcontainer #author, .predescriptionrowcontainer #keywords, .predescriptionrowcontainer .predescriptionrow { font-weight: normal; overflow: hidden; padding-left: 1em; text-align: left; } body > h2 { /*text-align: center;*/ } .breadcrumbs { font-size: 90%; margin-bottom: 1em; margin-top: 0em; } .buttonlink { font-size: 11pt; font-weight: normal; margin-right: 0.2em; padding: 0.25em 0.5em; text-decoration: none; white-space: nowrap; } .buttonlink, button, input[type="submit"], input[type="reset"], input[type="button"]{ font-size: 11pt; font-weight: normal; padding-left: 0.5em; padding-right: 0.5em; text-align: inherit; text-decoration: none; border: none; } .buttonlink:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { text-decoration: none; cursor: pointer; } .buttonlink img, .buttonlinksmall img, .buttonlink img.icon, .buttonlinksmall img.icon { vertical-align: middle; /* vertical-align: text-bottom; */ } .buttonlinksmall { font-size: 90%; padding: 2px 0.5em; margin-top: 1px; margin-bottom: 1px; } #categories { padding: 0.5em 1em; } #categories a { text-decoration: none; } #categories a:hover { text-decoration: underline; } #categories ul { border-left: thin dotted var(--gray-11); list-style-type: none; margin-left: 1em; margin-top: 0em; padding-left: 1em; padding-top: 0em; } #categories h3, #categories h4 { margin: 0em; margin-top: 0.25em; } #categories h3 { margin-top: 0.75em; } #categories h4 { margin-left: 0.5em; } #categories ul li { margin-bottom: 0.25em; } #categories > li { margin-bottom: 0.75em; } .categorycomment { font-size: smaller; font-style: italic; padding-top: 0.5em; margin-bottom: 1em !important; margin-left: 1em; margin-right: 2em; } .categorycomment em, .categorycomment i { font-style: normal; } .categoryli { clear: right; } .categoryli:hover, .categorytoplevel:hover { background-color: var(--gray-4); } .categoryorproblemid { color: var(--gray-15); font-size: smaller; font-weight: normal; } .categorytoplevel { font-size: 120%; margin-top: 0.5em !important; } .categorytoplevel a { color: var(--gray-19) !important; text-decoration: underline !important; } #centralarea *, .centralarea * { /*margin-left: auto; margin-right: auto;*/ } #centralarea > h2, #centralarea > h3, .centralarea > h2, .centralarea > h3 { /*text-align: center;*/ } .collapsedcode { background-image: url(../images/dotdotdot.gif); background-position: bottom right; background-repeat: no-repeat; height: 1em; } .collapsedcode, .uncollapsedcode{ line-height: 1em; padding-top: 2px; } .collapsedcode, .uncollapsedcode{ padding-right: 2em; } .collapsedcode{ max-width: 12em; overflow: hidden; width: 12em; } .collapsedcode:hover { /* background-color: white; background-image: none; overflow: visible; padding-right: 2em; position: absolute; max-width: inherit; width: inherit; height: inherit; */ } .collapsedcode:hover * { /* background-color: white; */ } #controlsarea { background-color: var(--gray-1); display: inline-block; margin-left: 0.5em; max-width: 30em; } #controlsarea .CDropdownMenuHeader, #controlsarea .CDropdownMenuHeader .buttonlink { font-size: 17pt; /* keep in sync with solutionsubmit button font */ } #controlsarea div { /* margin-bottom: 0.7em; */ } #controlsarea legend { background-color: var(--gray-1); border: 1px dotted var(--gray-11); } #controlsarea #soundarea { margin-bottom: 0.25em; } #copyright, #copyrightshort { color: var(--gray-14); font-size: 8pt; line-height: 1em; margin-left: 50%; max-width: 50%; text-align: right; } #copyrightshort { display: none; } .correct { background-color: var(--green-surface-1) !important; } td.correct, td.incorrect{ background-position: 100% 0%; background-repeat: no-repeat; } td.correct { background-image: url(../images/correct.gif) !important; } td.incorrect{ background-image: url(../images/incorrect.gif) !important; } #lastcolumnerror, .lastcolumnerror { color: var(--red-text-1); white-space: nowrap; } #lastcolumnwarning, .lastcolumnwarning { color: var(--yellow-text-2); white-space: nowrap; } .userproblem .fa { min-width: 1.25em; text-align: center; } li.standardproblem + li.userproblem { border-top: 1px solid var(--gray-7); margin-top: 0.3em; padding-top: 0.3em; } .centralform { max-width: 39em; margin-left: auto; margin-right: auto; } .currentpagecrumb { font-size: larger; } #debugbanner, #stagingbanner { position: fixed; top: 0; left: 0; text-align: center; color: white; font-weight: bold; text-transform: uppercase; font-family: monospace; z-index: 99; } #debugbanner { background-color: red; } #stagingbanner { background-color: darkgoldenrod; } #presolutionarea #description { clear: left; /* margin-top: 1.25em; */ padding: 0.5em; } /* The next two rules are because Scriptaculous's appear/disappear transition * animations don't work well when the thing being hidden/shown has a margin * or padding (or when its first/last children do). */ #presolutionarea #description > :first-child { margin-top: 0em; } #presolutionarea #description > :last-child { margin-bottom: 0em; } #presolutionarea #description > p > code, #presolutionarea #description > div > code { white-space: nowrap; } #presolutionarea #description img { max-width: 100%; } #presolutionarea #description figure { text-align: center; } #presolutionarea #description img.figure, #presolutionarea #description figure img, #presolutionarea #description .figure img{ max-width: 80%; } #presolutionarea #description figure figcaption, #presolutionarea #description .figure .caption{ display: block; margin-top: 0.1em; font-size: smaller; font-style: italic; } #presolutionarea #description .karelscreenshot { margin-bottom: 0.25em; margin-top: 0.25em; text-align: center; } #presolutionarea #description .karelscreenshot img { max-width: 40%; } #presolutionarea #description .figurearea { border: 1px dotted var(--gray-10); border-radius: 5px; display: inline-block; margin-left: 1em; margin-right: 1em; margin-bottom: 0.5em; padding: .5em; vertical-align: top; } #presolutionarea #description .blockdiagram { display: inline-block; font-size: smaller; margin-right: 0.5em; margin-top: 0.5em; margin-bottom: 0.5em; vertical-align: top; } .assertionpoint { font-weight: bold; color: var(--purple-text-1); } .extrainfo { font-style: italic; margin: 2em; } .htmlexpectedoutputcontainer { margin: 1em auto; padding: 0.25em 1em; } .htmlexpectedoutput { border-radius: 2px; box-shadow: 0px 0px 6px var(--gray-11); display: inline-block; padding-left: .5em; padding-right: .5em; position: relative; } .htmlexpectedoutput img { max-width: 99%; } .methodlist li { margin-bottom: 0.5em; } .beforeafter { text-align: center; width: 100%; } .beforeafter .before, .beforeafter .after { display: inline-block; max-width: 42%; vertical-align: middle; } .beforeafter .arrow { font-size: 200%; margin-left: .5em; margin-right: .5em; vertical-align: middle; } del.diff, ins.diff { font-weight: bold; text-decoration: none; white-space: pre; } del.diff { color: var(--red-text-4); } /* color visible spaces light gray in diff output */ del.diff .space, ins.diff .space { color: var(--gray-12); } .outofdate del.diff, .outofdate ins.diff { font-weight: normal; color: inherit; } .drawingpanelarea, #testresults .drawingpanelarea { border: 3px solid rgb(212, 208, 200); display: inline-block; margin-bottom: 0.25em; margin-top: 0.25em; } .drawingpanelarea .drawingpanellefticon, #testresults .drawingpanelarea .drawingpanellefticon { margin-left: 2px; margin-right: 2px; } .drawingpanelarea .drawingpanelrighticon, #testresults .drawingpanelarea .drawingpanelrighticon { float: right; margin-right: 2px; } .drawingpanelarea .drawingpanelmouseposition, #testresults .drawingpanelarea .drawingpanelmouseposition { /* This row's background is a fixed light gray regardless of theme (part of the DrawingPanel's simulated-OS-window chrome; see the tr rule above), so its text needs a fixed dark color too instead of inheriting the page's themed (light-in-dark-mode) text color, which was unreadable against it in dark/dim mode. */ color: #000000; font-size: 10pt; } .drawingpanelarea img, #testresults .drawingpanelarea img { vertical-align: bottom; } .drawingpanelarea td, .drawingpanelarea th, #testresults .drawingpanelarea td, #testresults .drawingpanelarea th { letter-spacing: 0.0px; line-height: 12pt; padding: 0em; white-space: normal; border: none !important; border-bottom: none; border-spacing: 0; } .drawingpanelarea th, #testresults .drawingpanelarea th { background-color: rgb(10, 36, 106); color: white; font-size: 9pt; overflow: hidden; padding-top: 2pt; padding-bottom: 2pt; text-align: left; } .drawingpanelarea tr, #testresults .drawingpanelarea tr, #testresults .drawingpanelarea tr:hover { background-color: rgb(212, 208, 200); } .drawingpanelarea .drawingpanelimagecell { background-color: white; } #dumparea { font-family: monospace; white-space: pre; } ul.compilererrors, pre.compilererrors { color: var(--red-text-5); font-weight: normal; } ul.compilererrors li { margin-bottom: 1em; } .errorlinenumber { color: var(--gray-20); font-weight: bold; } .compilererror .errorfriendlydescription { color: var(--red-text-4); font-weight: bold; margin-bottom: 0.5em; margin-left: 0.5em; } .compilererror .errordescription, .compilererror .errorcode { margin-left: 2em; white-space: pre-wrap; } div.errorsearch ul { list-style-type: none; margin-bottom: 1em; margin-top: 0.5em; } div.errorsearch ul li { margin-bottom: 0; margin-top: 0; } .facolor-black { color: var(--gray-18); } .facolor-blue { color: var(--blue-text-3); } .facolor-green { color: var(--green-text-1); } .facolor-gray { color: var(--gray-15); } .facolor-lightgray { color: var(--gray-12); } .facolor-lightgreen { color: var(--green-text-3); } .facolor-red { color: var(--red-text-1); } .facolor-semitransparent { opacity: 0.4; } .facolor-yellow { color: var(--yellow-text-2); } .facolor-mustard { color: var(--yellow-text-1) } .fail { background-color: var(--red-surface-1); } .flash { /*margin-left: auto !important; margin-right: auto !important;*/ /*min-width: 34em; width: 40%;*/ } .flash.flasherror { background-color: var(--orange-surface-1); color: var(--red-text-3); border: 2px dotted var(--red-text-3); border-radius: 5px; padding: 5px; background-position: 5px center; background-repeat: no-repeat; } .flash i { vertical-align: middle; } .flash span { padding-left: 1em; } h1.flash.flasherror { font-size: 2em; } .forminputtip { color: var(--gray-13); font-style: italic; margin-left: 0.25em; } .formsubmitrow, .submitrow, div.submitrow, div.formsubmitrow { margin-bottom: 0.5em; margin-top: 0.5em; } .announcement, .helptips { background-color: var(--yellow-surface-2); border: 1px solid var(--yellow-text-1); } .announcement, .helptips, .infobox { position: relative; padding: 0em 1em; margin: 1.5em auto; max-width: 30em; min-height: 2.5em; border-radius: 8px; } .helptips p, .infobox p { padding-left: 32px; padding-right: 22px; } .helptips ul, .infobox ul { margin-left: 1em; } .infobox li { margin-top: 0.5em; } /* font-awesome ? icon */ .announcement i.fa, .helptips > i.fa, .helptips > span > i.fa, .infobox > i.fa, .infobox > span > i.fa { color: var(--yellow-text-1); position: absolute; top: 8px; left: 8px; } .helptips .helptipsheader{ font-weight: bold; } #hintsarea { margin-bottom: 2em; } #hintsarea .hint { padding-top: 0.5em; } /* font-awesome X icon */ .errorhighlight { background-color: var(--red-surface-2); } .errorrow { background-color: var(--red-surface-3); color: var(--red-text-2); } .formcontrolarea .removelink { float: right; margin-left: 0.5em; margin-right: 0.5em; margin-top: 0.2em; } code.expressionquestiontext { white-space: pre; } /* .hidedescription { float: right; font-size: 90%; padding-left: 0.5em; padding-right: 0.5em; } #hidedescription img { vertical-align: baseline; } */ .incorrect { background-color: var(--red-surface-1) !important; } .inputfilename { text-decoration: underline; } ins.diff { color: var(--green-text-1); } /* indents right to match columnname width */ .inputbox { display: flex; flex-direction: row; margin-bottom: 0.6em; margin-top: 0.2em; text-align: left; } .inputbox .inputbox-label { flex: 3; font-weight: bold; padding-right: 1em; white-space: nowrap; width: 10em; } .formcontrolarea .inputbox-ipcertify, .inputbox .inputbox-ipcertify { display: inline-block; font-size: smaller; max-width: 90%; vertical-align: top; white-space: normal; } /* if you change columnname width, also change .dangler margin */ .columnname, .columnnamecode { clear: left; float: left; width: 9em; } .columnname { font-weight: bold; /* margin-top: 0.4em; */ } .columnname.columnnamewide, .columnnamenormal.columnnamewide, .columnnamecode.columnnamewide { width: 12em; } #controlsdropdownarea, .controlsdropdownarea { background-color: var(--gray-1); border: 1px solid var(--gray-7); border-radius: 0px 0px 3px 3px; display: flex; flex-direction: column; padding: 0.25em; position: absolute; z-index: 999; } /*.inputcontainer > div:hover { background-color: #fffff0 !important; }*/ /* #insertsolutionhere, #htmltestresultsarea, #htmldiffcontainerarea { border-bottom: 3px dashed gray; border-top: 3px dashed gray; } */ .invalid { background-color: var(--yellow-surface-5); } .isthereaproblem { margin-top: 2em; padding-right: 2em; } label { white-space: nowrap; } li > label { white-space: normal; } li > label code { white-space: nowrap; } .largesubmit, a.buttonlink.link.largesubmit, a.link.largesubmit, input[type="reset"].largesubmit, input[type="submit"].largesubmit{ font-size: larger; padding-left: 0.75em; padding-right: 0.75em; padding-top: 0.2em; padding-bottom: 0.2em; } .largesubmit[disabled], input[type="reset"].largesubmit[disabled], input[type="submit"].largesubmit[disabled], button[type="submit"].buttonlink[disabled] { background-color: var(--button-disabled-bg); color: var(--button-disabled-text); } .largesubmit[disabled]:hover, input[type="reset"].largesubmit[disabled]:hover, input[type="submit"].largesubmit[disabled]:hover, button[type="submit"].buttonlink[disabled]:hover { cursor: default; } .lastcolumn { background-color: var(--gray-1); /* kills zebra striping */ border-bottom: none !important; border-right: none !important; border-top: none !important; white-space: nowrap; } .lastcolumn + .lastcolumn { border-left: none !important; } #likelink{ font-size: 66%; font-weight: normal; text-decoration: none; margin-left: 1em; } #loading { background-color: var(--red-text-1); color: white; font-size: larger; margin: 0em; padding: 0.25em 0.75em; position: fixed; _position: absolute; /* for shitty IE6 */ right: 0em; top: 0em; z-index: 99999; } #loading img { vertical-align: middle; width: 1em; height: 1em; } #loadingarea { background-color: var(--gray-1); border: dotted solid var(--gray-3); margin-left: 0; position: absolute; text-align: center; width: 100%; opacity: 0.85; } .mcquestion { margin-bottom: 2em; } .mcquestion ol { list-style-type: lower-alpha; } .mechanicalsolutionimage { margin: 2px; vertical-align: top; } td.multiplechoice { } .multiplechoice ol { list-style-type: lower-alpha; margin-top: 0; margin-bottom: 0; padding-left: 1em; } .myschool { background-color: var(--yellow-surface-6); color: var(--blue-text-4); } .highlight .myschool { background-color: inherit; } .unverified { border: 1px dotted var(--yellow-surface-7); margin: 1em 0.5em; } .unverified, .flash { background-color: var(--yellow-surface-3); font-size: larger; padding: 0.2em; } .flashwrapper { background-color: var(--yellow-surface-3); text-align: center; } .nowrap, .nowrap * { white-space: nowrap; } optgroup { /*margin-bottom: 0.1em; margin-top: 0.8em;*/ } div.outofdate, table.outofdate, .outofdate i, .outofdate td, .outofdate tr, .outofdate div, .outofdate #passcountmessagespan { color: var(--gray-15) !important; } table.outofdate, .outofdate td, .outofdate tr, .outofdate .testcase { background-color: var(--gray-7) !important; } p.outofdate { color: var(--gray-15) !important; } .pass { background-color: var(--green-surface-1); } #passcountmessage { font-size: larger; margin-top: 0; margin-bottom: 0; /*margin-bottom: 0.5em;*/ /*text-align: center;*/ } .placeholder, .syntaxtemplate { font-family: "Verdana", sans-serif; font-weight: bold; } .emphasized { font-weight: bold; } .diffstart { font-weight: bold; text-decoration: underline; } pre { /* removed because this should not be necessary */ /* white-space: pre !important; */ } pre > code { white-space: inherit; } pre.input, pre.inputfile, pre.output, pre.outputfile, code.inputfile, code.outputfile { background-color: var(--gray-2); border-bottom: 1px dotted var(--gray-6); border-top: 1px dotted var(--gray-6); padding: 2pt 1pt; } pre.input:hover, pre.inputfile:hover, pre.output:hover, pre.outputfile:hover { background-color: var(--yellow-surface-8); } #problemarea { /*margin-left: 13em; auto; margin-right: 13em;*/ position: relative; } .predescriptionrow > div { max-width: 80%; } .problemcount { color: var(--gray-16); float: right; font-size: smaller; font-weight: normal; margin-left: 10pt; margin-right: 10pt; text-decoration: none; } .problemexpectedspan { margin-left: 0.5em; } .problemname, .problemexpected, .problemactual { white-space: pre; } .problemresult { /*text-align: center;*/ } .problemresultcompact { padding-left: 0.5em; padding-right: 0.5em; } .problemrightarrow { font-weight: bold; padding-left: 1em; padding-right: 1em; } #problemtypeclarification { font-size: 80%; margin: 0.5em; } #centralarea, .centralarea, #problemarea { margin: 0em; position: relative; } .problemsetcompletionstatus { padding: 0.2em 0.5em; } #sliderarea { right: 0em; position: absolute; text-align: right; width: 110px; } textarea#solution { border: 1px solid var(--gray-10); border-radius: 2px; font-size: 10pt; width: 97%; } textarea#solution, #linenumbers, .linenumbers{ font-size: 10pt; line-height: 1.05em; margin: 0 2em 0 2em; padding: 5px; } #solution, #linenumbers, .linenumbers, .solution, .problemname, .problemexpected, .problemactual, code, tt, samp, xmp, pre, input[type="text"], input[type="password"], input[type="number"], textarea, .code, .errorcode, .errordescription { font-family: monospace; } #linenumbers, .linenumbers { border-top: 2px solid var(--gray-1); color: var(--gray-11); max-width: 2em; } .problemname, .problemexpected, .problemactual, pre, xmp { /* old narrowing styles, not needed any more because I am using a narrow font letter-spacing: -0.7px; line-height: 0.9em; */ } #solutionarea { margin-top: 1em; padding-bottom: 1em; } #solutionform fieldset { /* position: relative; */ } #solutionform table.assertiontable td { padding-right: 30px; } .solution { display: inline; } .solution, .ignore { white-space: pre; } .ignore { display: none; } #solutionsubmit, .solutionsubmit, #submitbutton.solutionsubmit { font-size: 17pt; font-weight: bold; margin-left: 1em; padding-left: 1em; padding-right: 1em; } #solutionsubmit img, .solutionsubmit img { vertical-align: middle; } .spacedactions > a { margin-left: 0.25em; margin-right: 0.25em; } .testcase { border: 1px solid var(--gray-7); /* display: inline-block; */ margin: 2px; padding: 0.25em; vertical-align: top; } .testcase div { clear: both; } .testcase problemnumber, .testcase problemname { font-weight: bold; } .testcase problemname { border-bottom: 1px dotted var(--gray-10); } .testcase .problemnumberandname, .testcase .testresultrow { display: flex; flex-direction: row; line-height: 1em; margin-bottom: 0.25em; margin-top: 0.4em; } .testcase .problemoutput { display: inline-block; margin-bottom: .5em; margin-left: 0; /* sync to width of probleminfoheading */ white-space: pre; } .testcase .probleminfoheading { font-weight: bold; margin-left: 1em; margin-right: 1em; min-width: 9em; text-align: right; } .testcase .problemtestresult { display: inline-block; } .testcase .unexpectedconsoleoutput { margin: 0; } .testcase .unexpectedconsoleoutputrow { margin-top: 1em; padding-top: 0.5em; padding-bottom: 0.25em; } .testcase.fail .unexpectedconsoleoutputrow { background-color: var(--orange-surface-2); } .testcase.pass .unexpectedconsoleoutputrow { background-color: var(--green-surface-2); } #testresultsholder { max-width: 100%; overflow: auto; } #testresults { border-collapse: collapse; /* display: inline-block; position: absolute; right: 1em; top: 1em; margin-left: auto; margin-right: auto; font-size: smaller; */ margin-top: 0.5em; } #testresults tr:hover { background-color: var(--yellow-surface-3); } #testresults th { background-color: var(--gray-6); } #testresults td, #testresults th { padding: 2pt 1em; white-space: nowrap; } #testresults td pre{ margin-bottom: 0; margin-top: 0; } #testresultsarea { /* height: 500px; */ /* overflow: hidden; */ margin-top: 2em; } textarea, input[type="text"], input[type="password"], input[type="number"] { /* background-color: inherit; */ font-size: 10pt; } .userinput { color: var(--blue-text-5); font-weight: bold; } #topusersarea{ margin-bottom: 2em; /*margin-left: auto; margin-right: auto;*/ } #undersolutionarea { position: relative; } #whatsnew li { margin-bottom: 1em; } a img { border-width: 0; } .announcements > li { padding-bottom: 1em; } .announcements > li > ul > li { padding-bottom: 0.5em; } .announcements > li > ul > li > p { margin-top: 0em; } .aside { color: var(--gray-17); font-size: small; } pre span.aside { color: var(--gray-15); font-size: 100%; } .compilererrors { margin-bottom: 1em; margin-top: 1em; } dd { margin-bottom: 1em; } dd, dt { margin-left: 0; } dt { font-weight: bold; } .error, .warning { background-color: var(--yellow-surface-2); border: thin solid var(--gray-10); font-weight: bold; padding-top: 0.3em; padding-bottom: 0.3em; padding-right: 1em; } .error { color: var(--red-text-6); } p.error { padding-left: 0.5em; } .filename { text-decoration: none; } .first { margin-top: 0em !important; } h2 { margin-bottom: 0em; } h2.problemtitle { /*padding-left: 2em;*/ } .highlight { background-color: var(--yellow-surface-9) !important; border: thin dashed var(--yellow-surface-10); } /* img { vertical-align: bottom; } */ img.icon { height: 16px; width: 16px; vertical-align: baseline; } .instructornotes { border-bottom: 1px dotted var(--gray-10); border-top: 1px dotted var(--gray-10); margin-bottom: 1em; margin-top: 1em; padding-left: 1em; } li.folder { list-style-type: none; margin-top: 1em; } li.folder p { padding: 0px; margin: 0px; margin-bottom: 0.5em; /* margin-left: */ line-height: 1.2em; } #nextlink, #previouslink { line-height: 1em; margin: 0em; padding: 0.25em 0.5em; } #nextlink { float: right; } #previouslink { float: left; } .problemnavigation { position: relative; clear: both; } /* ol { padding-left: 1em; } ol li { margin-bottom: 1em; } ol li div { margin-top: 1em; margin-bottom: 1em; } */ .predescriptionrowcontainer { margin-top: 0.5em; } #problemoptionsarea { padding: 10px 20px; } #relatedfiles h3 { margin-bottom: 0em; } #relatedfiles ul { display: inline-block; list-style-type: none; margin-bottom: 0em; margin-top: 0em; padding: 0; } #relatedfiles .relatedlinkslist li { display: inline; margin-right: 0.25em; } #shuffle { margin-left: 3em; } .skippedtest { background-color: var(--gray-6); } .tidyfieldsetborder fieldset { border: 1px dotted var(--gray-11); border-radius: 2px; padding: 1px; } .tidyfieldsetborder legend { /* border: 2px solid #ccc; */ border-radius: 5px; font-weight: bold; margin-left: 0.5em; } .solvedproblem a.problemlink, h4.solvedproblem a, h4.solvedproblem .problemcount { color: var(--green-text-4); } .staff { } .success { color: var(--green-text-5); background-color: var(--green-surface-1); border: thin solid var(--gray-10); font-weight: bold; } table { border-collapse: collapse; border-width: 0px; color: var(--gray-20); /* font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; */ margin: 0px; padding: 0px; } table.calendar { border-collapse: collapse; font-size: smaller; } table.calendar td { border: thin solid var(--gray-10); padding-left: 10px; padding-right: 10px; vertical-align: top; } table.calendar th { /* width: 30%; */ } table.calendar th.week { width: 10%; } table.calltable { margin-bottom: 0.5em; } table.calltable th a img { vertical-align: middle; } table.calltable pre { /* margin: 0em; */ margin-top: 3px; margin-bottom: 3px; } table.calltable td, table.calltable th { border: 1px solid var(--gray-10); padding-left: 0.5em; padding-right: 0.5em; } table.calltable td code, table.calltable th code { white-space: nowrap; } table.highlightrowonhover tbody tr:hover, ol.highlightrowonhover li:hover, ul.highlightrowonhover li:hover { background-color: var(--yellow-surface-11) !important; } table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { color: transparent; content: " \25B4\25BE"; } .statuslabel { float: left; font-weight: bold; margin-right: 1em; width: 8em; } td, th { vertical-align: top; } td.calendar ul { /* white-space: nowrap; */ } td.extra, th.extra { border: none !important; opacity: 0.5; } td.spaced, th.spaced { padding-right: 20px; } #testresultsclosearea { float: right; } #testresultsclosearea a:hover { cursor: pointer; } #testresultscurrentstatus { margin-left: 0.5em; } #testresultsloadingarea { color: var(--gray-16); margin-left: 1em; } table.zebrastripe tr:nth-child(even), ol.zebrastripe li:nth-child(even), ul.zebrastripe li:nth-child(even) { background-color: var(--gray-4); } .unselectabletext { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .unpublishedwarning { background-color: var(--yellow-surface-12); border: 1px solid var(--yellow-surface-13); border-radius: 3px; padding: 8px; font-style: italic; } .urgent { color: var(--red-text-1); font-weight: bold; } #useractionsarea { padding-right: 1em; position: absolute; top: 50px; } #useractionsarea, #userinfoarea { background-color: var(--userinfo-bg); border-left: thin dotted var(--userinfo-border); font-size: inherit; max-width: 30em; overflow: hidden; padding: 0 0.5em; position: absolute; z-index: 9999; right: 0; } #useractionsarea { border-bottom: thin dotted var(--yellow-surface-1); border-bottom-left-radius: 5px; padding-bottom: 0.25em; } #useractionsarea .buttonlink { min-width: 8em; } #useractionsarea .buttonlink { display: block; margin-bottom: 0.2em; } #useractionsarea a { text-decoration: none; } #useractionsarea a:hover { text-decoration: underline; } #userinfoarea { /* #userinfoarea is a