0ct0pu5/tutorials
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added CMD style and copy animation

Browse source
This commit is contained in:
i12bretro 2021-07-31 05:42:23 -04:00 • committed by GitHub
parent ac17d789f7
commit f85d79f751
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
css/steps.css
View file

@ -1,27 +1,33 @@
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; }
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; }
input[type=checkbox]:checked::after { content: '?'; text-align: center; }
input[type=checkbox]:focus::after { border-color: #677278; }
input[type=checkbox]:disabled::after { background: #E3E3E3; }
#gridContainer { display: grid; grid-template-columns: 65px 1fr; height: 100vh; grid-template-rows: 111px; }
#gridContainer div:nth-child(odd) { border-right: 1px solid #F8D3D3; }
div.topMargin { background: #fff; }
#listName { z-index: 10; background: #fff; height: 100px; margin: 0; }
#listName h1 { margin-top: 40px; margin-left: 15px; }
#listName p { font-size: 0.7em; font-style: italic; margin-left: 5px; }
#content { margin-top: 7px; padding: 0; font: 16px 'AmericanTypewriter', Cambria, Georgia; color: #282625; }
h2 { margin: 0; padding: 2px 0 1px; }
ol { padding-left: 42px; margin: 0; }
ol li { padding: 0px; font-size: 25px; margin-left: 6px; }
ol li a { font-size: 0.5em; vertical-align: middle;}
ol li p { font-size: 0.7em; font-weight: bold; margin: 15px 50px; vertical-align: middle;}
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; }
ol li span { transition: opacity .5s ease-in-out; }
.strikethrough { display: inline-block; position: relative; opacity: 0.5; margin-left: 6px; }
.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); }
@keyframes strikethrough { from { transform: scaleX(0); } to { transform: scaleX(1); } }
input.copy-text { position: absolute; vertical-align: text-top; height: 14px; width: 14px; margin-left: -27px; padding: 3px 5px; }
span.copy-animation { animation: textSelect 0.75s linear; }
@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; } }
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; }
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; }
input[type=checkbox]:checked::after { content: '?'; text-align: center; }
input[type=checkbox]:focus::after { border-color: #677278; }
input[type=checkbox]:disabled::after { background: #E3E3E3; }
#gridContainer { display: grid; grid-template-columns: 65px 1fr; height: 100vh; grid-template-rows: 111px; }
#gridContainer div:nth-child(odd) { border-right: 1px solid #F8D3D3; }
div.topMargin { background: #fff; }
#listName { z-index: 10; background: #fff; height: 100px; margin: 0; }
#listName h1 { margin-top: 40px; margin-left: 15px; }
#listName p { font-size: 0.7em; font-style: italic; margin-left: 5px; }
#content { margin-top: 7px; padding: 0; font: 16px 'AmericanTypewriter', Cambria, Georgia; color: #282625; }
h2 { margin: 0; padding: 2px 0 1px; }
ol { padding-left: 42px; margin: 0; }
ol li { padding: 0px; font-size: 25px; margin-left: 6px; }
ol li a { font-size: 0.5em; vertical-align: middle;}
ol li p { font-size: 0.7em; font-weight: bold; margin: 15px 50px; vertical-align: middle;}
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; }
div.PS, textarea.PS, code.PS { background: #012456; color: #eeedf0; }
div.CMD, textarea.CMD, code.CMD { color: #eeedf0; }
ol li span { transition: opacity .5s ease-in-out; }
.strikethrough { display: inline-block; position: relative; opacity: 0.5; margin-left: 6px; }
.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); }
@keyframes strikethrough { from { transform: scaleX(0); } to { transform: scaleX(1); } }
input.copy-text { position: absolute; vertical-align: text-top; height: 14px; width: 14px; margin-left: -27px; padding: 3px 5px; }
span.copy-animation { animation: textSelect 0.75s linear; }
span.copy-animation-ps { animation: textSelectPS 0.75s linear; }
span.copy-animation-cmd { animation: textSelectCMD 0.75s linear; }
@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; } }
@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; } }
@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; } }