1:root { 2 --mdc-theme-background: #202124; 3 --mdc-theme-error: #f28b82; 4 --mdc-theme-on-error: black; 5 --mdc-theme-on-primary: #202124; 6 --mdc-theme-on-secondary: #d2e3fc; 7 --mdc-theme-on-surface: #e8eaed; 8 --mdc-theme-primary: #8ab4f8; 9 --mdc-theme-secondary: #8ab4f83d; 10 --mdc-theme-surface: #202124; 11} 12 13.hide { 14 display: none; 15} 16 17.input-container { 18 display: flex; 19 flex-direction: row; 20 height: 600px; 21} 22 23.script-container { 24 display: flex; 25 flex-direction: column; 26 height: 100%; 27 margin: 0 7px 0 0; 28 width: 50%; 29} 30 31.data-container { 32 display: flex; 33 flex-direction: column; 34 height: 100%; 35 margin: 0 0 0 7px; 36 width: 50%; 37} 38 39.function-name { 40 background-color: transparent; 41 border: 1px solid var(--mdc-theme-on-surface); 42 color: var(--mdc-theme-on-surface); 43 height: auto; 44 margin: 10px 0 0; 45 padding: 10px; 46 resize: none; 47 width: auto; 48} 49 50.published-data-container { 51 display: flex; 52 flex-direction: column; 53 height: 55%; 54 margin: 0 0 5px; 55 width: auto; 56} 57 58.published-data-button-group { 59 height: auto; 60 overflow-x: auto; 61 overflow-y: hidden; 62 padding-bottom: 10px; 63 white-space: nowrap; 64 width: 100%; 65} 66 67/** 68 * The CodeMirrors are configured to fill up whatever container they are in so these 69 * specify the actual size of them. 70 */ 71.script-input-container { 72 height: 90%; 73 width: auto; 74 overflow: auto; 75} 76 77.published-data-input-container { 78 height: 100%; 79 margin: 5px 0 0; 80 overflow: auto; 81} 82 83.saved-state-input-container { 84 height: 45%; 85 width: auto; 86} 87 88.submit { 89 margin: 10px 0 10px; 90} 91 92.script-output { 93 box-sizing: border-box; 94 font-family: monospace; 95 height: 300px; 96 overflow: auto; 97} 98 99/** webkit-scrollbar modifies the appearence of the scrollbar. */ 100::-webkit-scrollbar { 101 width: 10px; 102} 103 104/* Modifies scrollbar track */ 105::-webkit-scrollbar-track { 106 background: transparent 107} 108 109/* Modifies scrollbar handle */ 110::-webkit-scrollbar-thumb { 111 background: #434c5e; 112} 113 114/** Modifies the scrollbar for the published data header div ONLY. */ 115.published-data-header::-webkit-scrollbar { 116 height: 10px; 117}