|
| 1 | +body { height: 100%; background: white; background: -webkit-linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px; background: -moz-linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px; background: linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px; -webkit-background-size: 100% 30px; -moz-background-size: 100% 30px; -ms-background-size: 100% 30px; background-size: 100% 30px; font-family: Arial, Helvetica, sans-serif; padding: 0; margin: 0; } |
| 2 | +input[type=checkbox]::after { content: ''; display: inline-block; width: 12px; height: 12px; background: #fff; border-radius: 4px; color: #677278; border: 2px ridge #677278; margin-top: -2px; margin-left: -2px; line-height: 1.2em; } |
| 3 | +input[type=checkbox]:checked::after { content: '?'; text-align: center; } |
| 4 | +input[type=checkbox]:focus::after { border-color: #677278; } |
| 5 | +input[type=checkbox]:disabled::after { background: #E3E3E3; } |
| 6 | +#gridContainer { display: grid; grid-template-columns: 65px 1fr; height: 100vh; grid-template-rows: 111px; } |
| 7 | +#gridContainer div:nth-child(odd) { border-right: 1px solid #F8D3D3; } |
| 8 | +div.topMargin { background: #fff; } |
| 9 | +#listName { z-index: 10; background: #fff; height: 100px; margin: 0; } |
| 10 | +#listName h1 { margin-top: 40px; margin-left: 15px; } |
| 11 | +#listName p { font-size: 0.7em; font-style: italic; margin-left: 5px; } |
| 12 | +#content { margin-top: 7px; padding: 0; font: 16px 'AmericanTypewriter', Cambria, Georgia; color: #282625; } |
| 13 | +h2 { margin: 0; padding: 2px 0 1px; } |
| 14 | +ol { padding-left: 42px; margin: 0; } |
| 15 | +ol li { padding: 0px; font-size: 25px; margin-left: 6px; } |
| 16 | +ol li a { font-size: 0.5em; vertical-align: middle;} |
| 17 | +ol li p { font-size: 0.7em; font-weight: bold; margin: 15px 50px; vertical-align: middle;} |
| 18 | +div.codeBlock, textarea,code.codeBlock { width: 80%; display: block; font-size: 0.6em; margin: 10px 25px; padding: 5px; background: #000; color: #0f0; font-family:'Courier New', Courier, monospace; box-shadow: 2px 2px 10px #333; } |
| 19 | +div.PS, textarea.PS, code.PS { background: #012456; color: #eeedf0; } |
| 20 | +div.CMD, textarea.CMD, code.CMD { color: #eeedf0; } |
| 21 | +ol li span { transition: opacity .5s ease-in-out; } |
| 22 | +.strikethrough { display: inline-block; position: relative; opacity: 0.5; margin-left: 6px; } |
| 23 | +.strikethrough:after {content: ''; position: absolute; display: block; width: 100%; height: 2px; box-shadow: 0 1px rgba(255,255,255,0.6); margin-top: -0.6em; background: black; transform-origin: center left; animation: strikethrough 1s 0.0s cubic-bezier(.5, 0, .1, 1) 1; transition: transform 1s cubic-bezier(.5, 0, .1, 1); } |
| 24 | +@keyframes strikethrough { from { transform: scaleX(0); } to { transform: scaleX(1); } } |
| 25 | + |
| 26 | +input.copy-text { position: absolute; vertical-align: text-top; height: 14px; width: 14px; margin-left: -27px; padding: 3px 5px; } |
| 27 | +span.copy-animation { animation: textSelect 0.75s linear; } |
| 28 | +span.copy-animation-ps { animation: textSelectPS 0.75s linear; } |
| 29 | +span.copy-animation-cmd { animation: textSelectCMD 0.75s linear; } |
| 30 | + |
| 31 | +@keyframes textSelect { 0% { background-color:#000; color: #0f0; } 30% { background: #0f0; color: #000; box-shadow: inset 100px 0 0 0 #0f0; } 70% { background: #0f0; color: #000; } 100% {background-color:#000; color: #0f0; } } |
| 32 | +@keyframes textSelectPS { 0% { background-color:#012456; color: #eeedf0; } 30% { background: #eeedf0; color: #012456; box-shadow: inset 100px 0 0 0 #eeedf0; } 70% { background: #eeedf0; color: #012456; } 100% {background-color:#012456; color: #eeedf0; } } |
| 33 | +@keyframes textSelectCMD { 0% { background-color:#000; color: #eeedf0; } 30% { background: #eeedf0; color: #000; box-shadow: inset 100px 0 0 0 #eeedf0; } 70% { background: #eeedf0; color: #000; } 100% {background-color:#000; color: #eeedf0; } } |
0 commit comments