Last active
November 18, 2022 01:38
-
-
Save mhekel/8dbd4f17044ee35d7552113c11202538 to your computer and use it in GitHub Desktop.
neubootmorph
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* neubootmorph */ | |
| @import url('https://fonts.googleapis.com/css2?family=Lily+Script+One&family=Montserrat+Alternates:wght@100;300;400;600;900&family=Sonsie+One&family=Syncopate:wght@400;700&display=swap'); | |
| @import url ('https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/sandstone/bootstrap.min.css'); | |
| @import url('https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">'); | |
| :root { | |
| --bg-color: #f2f3f7; | |
| --fg-color: #414246; | |
| --red: #e43030; | |
| --green: #4f6b58; | |
| --blue: #367bf0; | |
| --dark-blue: #06142e; | |
| --maroon: #b8174c; | |
| --purple: #280337; | |
| } | |
| /* Extra small devices (phones, 600px and down) */ | |
| @media only screen and (max-width: 600px) {...} | |
| /* Small devices (portrait tablets and large phones, 600px and up) */ | |
| @media only screen and (min-width: 600px) {...} | |
| /* Medium devices (landscape tablets, 768px and up) */ | |
| @media only screen and (min-width: 768px) {...} | |
| /* Large devices (laptops/desktops, 992px and up) */ | |
| @media only screen and (min-width: 992px) {...} | |
| /* Extra large devices (large laptops and desktops, 1200px and up) */ | |
| @media only screen and (min-width: 1200px) {...} | |
| .flex-container { | |
| display: flex; | |
| box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white; | |
| border-radius: 10px; | |
| background: #f2f3f7; | |
| width:75%; | |
| margin: auto; | |
| } | |
| .flex-container > div { | |
| padding: 10px 20px 20px; | |
| margin-top: 20px; | |
| min-height: 100px; | |
| font-size: 1.2em; | |
| background: #f2f3f7;} | |
| .flex-container > .header{position: sticky; width: 100%; margin: 10px; border-radius: 10px; ;} | |
| ::-moz-focus-inner, | |
| :-moz-focusring { | |
| border: 0; | |
| color: transparent; | |
| text-shadow: 0 0 0 #414246; | |
| } | |
| ::selection, | |
| ::-moz-selection { | |
| color: white; | |
| background: black; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| outline: none; | |
| -webkit-touch-callout: none; | |
| -webkit-appearance: none; | |
| -webkit-tap-highlight-color: transparent !important; | |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; | |
| -webkit-touch-callout: none; | |
| font-family: "Montserrat Alternates", sans-serif; | |
| letter-spacing: 0; | |
| } | |
| .container {width:75%; height: 75%; margin: auto;} | |
| .card {width:20%; max-height: 50%; margin:auto; border-radius: 12px; float: left;} | |
| .header {padding: 5px; position:relative; border-bottom: 1px solid #ccc; font-size:25px; font-family: 'Sonsie One';} | |
| .content {line-height:1.5em; oveflow:auto; margin-top:10px;} | |
| .selectable { | |
| cursor: auto; | |
| user-select: text; | |
| -webkit-touch-callout: text; | |
| -webkit-user-select: text; | |
| -khtml-user-select: text; | |
| -moz-user-select: text; | |
| -ms-user-select: text; | |
| } | |
| .shadow-sm {box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2), -5px 8px 11px rgba(0, 0, 0, 0.19);} | |
| /* effects */ | |
| /* shadow 1 */ | |
| .effect-1 { | |
| position: relative; | |
| } | |
| .effect-1::before, .effect-1::after, .effect-2:hover::before, .effect-2:hover::after { | |
| z-index: -1; | |
| position: absolute; | |
| content: ""; | |
| bottom: 15px; | |
| left: 10px; | |
| width: 50%; | |
| top: 80%; | |
| max-width: 300px; | |
| background: #aaa; | |
| box-shadow: 0 15px 10px #aaa; | |
| transform: rotate(-3deg); | |
| } | |
| .effect-1::after, .effect-2:hover::after { | |
| transform: rotate(3deg); | |
| right: 10px; | |
| left: auto;} | |
| .effect-2::before, .effect-1:hover::before, .effect-1:hover::after{ | |
| position: absolute; | |
| content: ""; | |
| z-index: -1; | |
| bottom: 5px; | |
| left: 30px; | |
| right: 30px; | |
| top: 80%; | |
| background: #aaa; | |
| box-shadow: 0 0 25px 17px #aaa; | |
| border-radius: 100px/10px; | |
| } | |
| html, | |
| body { | |
| background-color: #f2f3f7; | |
| color: #414246; | |
| margin: 0; | |
| padding: 0; | |
| font-size: 10pt; | |
| height: 100%; | |
| cursor: default; | |
| user-select: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| } | |
| .with-shadow, .outset, button, .checktext input + span, .blue-button, .checktext input:checked + span, button.blue-button, .red-button.blue-button, .green-button.blue-button, .green-button, button.green-button, .red-button.green-button, .red-button, button.red-button, | |
| input[type=button], | |
| input[type=submit], | |
| input[type=reset], select, input[type=text]:not(select):focus, | |
| input[type=search]:not(select):focus, | |
| input[type=tel]:not(select):focus, | |
| input[type=url]:not(select):focus, | |
| input[type=email]:not(select):focus, | |
| input[type=password]:not(select):focus, | |
| input[type=date]:not(select):focus, | |
| input[type=month]:not(select):focus, | |
| input[type=week]:not(select):focus, | |
| input[type=time]:not(select):focus, | |
| input[type=number]:not(select):focus, | |
| input[type=color]:not(select):focus, | |
| select:not(select):focus, | |
| textarea:not(select):focus, .paper { | |
| box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white; | |
| } | |
| .outset, button, .checktext input + span, .blue-button, .checktext input:checked + span, button.blue-button, .red-button.blue-button, .green-button.blue-button, .green-button, button.green-button, .red-button.green-button, .red-button, button.red-button, | |
| input[type=button], | |
| input[type=submit], | |
| input[type=reset], select, input[type=text]:not(select):focus, | |
| input[type=search]:not(select):focus, | |
| input[type=tel]:not(select):focus, | |
| input[type=url]:not(select):focus, | |
| input[type=email]:not(select):focus, | |
| input[type=password]:not(select):focus, | |
| input[type=date]:not(select):focus, | |
| input[type=month]:not(select):focus, | |
| input[type=week]:not(select):focus, | |
| input[type=time]:not(select):focus, | |
| input[type=number]:not(select):focus, | |
| input[type=color]:not(select):focus, | |
| select:not(select):focus, | |
| textarea:not(select):focus, .paper { | |
| border-radius: 10px; | |
| background: #f2f3f7; | |
| } | |
| .inset, hr, button.active, .checktext input + span.active, .active.blue-button, .active.green-button, .active.red-button, button:active, .checktext input + span:active, .blue-button:active, .green-button:active, .red-button:active, | |
| input[type=button].active, | |
| input[type=button]:active, | |
| input[type=submit].active, | |
| input[type=submit]:active, | |
| input[type=reset].active, | |
| input[type=reset]:active, input[type=text]:not(select), | |
| input[type=search]:not(select), | |
| input[type=tel]:not(select), | |
| input[type=url]:not(select), | |
| input[type=email]:not(select), | |
| input[type=password]:not(select), | |
| input[type=date]:not(select), | |
| input[type=month]:not(select), | |
| input[type=week]:not(select), | |
| input[type=time]:not(select), | |
| input[type=number]:not(select), | |
| input[type=color]:not(select), | |
| select:not(select), | |
| textarea:not(select) { | |
| border-radius: 10px; | |
| box-shadow: 0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white; | |
| background: #f8f9fb; | |
| } | |
| .paper { | |
| padding: 10px 20px 20px; | |
| margin-top: 20px; | |
| min-height: 100px; | |
| font-size: 1.2em; | |
| background: #f2f3f7; | |
| } | |
| section, | |
| article, | |
| .section, | |
| .article, | |
| .paper { | |
| line-height: 2em; | |
| word-wrap: break-word; | |
| word-break: normal; | |
| line-height: 2em; | |
| } | |
| input[type=text], | |
| input[type=search], | |
| input[type=tel], | |
| input[type=url], | |
| input[type=email], | |
| input[type=password], | |
| input[type=date], | |
| input[type=month], | |
| input[type=week], | |
| input[type=time], | |
| input[type=number], | |
| input[type=color], | |
| select, | |
| textarea { | |
| border: 0; | |
| background: #f2f3f7; | |
| color: #414246; | |
| font-weight: normal; | |
| padding: 0 1.25em; | |
| line-height: 1.25em; | |
| height: 3.5em; | |
| margin: 10px 0; | |
| font-size: 1.1rem; | |
| cursor: text; | |
| user-select: text; | |
| -webkit-touch-callout: text; | |
| -webkit-user-select: text; | |
| -khtml-user-select: text; | |
| -moz-user-select: text; | |
| -ms-user-select: text; | |
| transition: box-shadow 0.2s; | |
| } | |
| textarea { | |
| height: 350px; | |
| padding: 1.25em; | |
| } | |
| select { | |
| cursor: pointer; | |
| background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxOSAxOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCguMDM0IDAgMCAuMDM0IC02LjggMS43ZS01KSIgc3R5bGU9ImZpbGw6IzdiN2U4YyI+PHBhdGggZD0ibTQ4MCAzNDQtMjExLTIxMmMtMTYtMTYtNDEtMTYtNTcgMC0xNiAxNi0xNiA0MiAwIDU3bDIzOCAyMzljOC40IDguNSAyMCAxMiAzMSAxMiAxMSAwLjU2IDIyLTMuMiAzMS0xMmwyMzgtMjM5YzE2LTE2IDE2LTQyIDAtNTdzLTQxLTE2LTU3IDB6IiBzdHlsZT0iZmlsbDojN2I3ZThjIi8+PC9nPjwvc3ZnPgo=) no-repeat right 1em center; | |
| background-size: 1.2em; | |
| padding-right: 3em; | |
| } | |
| input::placeholder, | |
| textarea::placeholder { | |
| opacity: 1; | |
| transition: opacity 0.2s; | |
| color: inherit; | |
| } | |
| input:focus::placeholder, | |
| textarea:focus::placeholder { | |
| opacity: 0.2; | |
| } | |
| input:-ms-input-placeholder, | |
| textarea:-ms-input-placeholder { | |
| opacity: 1; | |
| transition: opacity 0.2s; | |
| color: inherit; | |
| } | |
| input:focus:-ms-input-placeholder, | |
| textarea:focus:-ms-input-placeholder { | |
| opacity: 0.2; | |
| } | |
| input[type=search]::-webkit-search-decoration, | |
| input[type=search]::-webkit-search-cancel-button, | |
| input[type=search]::-webkit-search-results-button, | |
| input[type=search]::-webkit-search-results-decoration { | |
| display: none; | |
| } | |
| button, .checktext input + span, .blue-button, .checktext input:checked + span, button.blue-button, .red-button.blue-button, .green-button.blue-button, .green-button, button.green-button, .red-button.green-button, .red-button, button.red-button, | |
| input[type=button], | |
| input[type=submit], | |
| input[type=reset] { | |
| border: 0; | |
| text-transform: capitalize; | |
| padding: 10px 0; | |
| width: 8em; | |
| text-align: center; | |
| cursor: pointer; | |
| color: inherit; | |
| font-size: 1.1rem; | |
| transition-property: background-color, box-shadow; | |
| transition-delay: 0.2s; | |
| transition-duration: 0.2s; | |
| } | |
| button.active, .checktext input + span.active, .active.blue-button, .active.green-button, .active.red-button, button:active, .checktext input + span:active, .blue-button:active, .green-button:active, .red-button:active, | |
| input[type=button].active, | |
| input[type=button]:active, | |
| input[type=submit].active, | |
| input[type=submit]:active, | |
| input[type=reset].active, | |
| input[type=reset]:active { | |
| transition-delay: 0s; | |
| transition-duration: 0.1s; | |
| } | |
| .red-button, button.red-button, .checktext input + span.red-button, .red-button.blue-button, .red-button.green-button, | |
| input[type=button].red-button, | |
| input[type=submit].red-button, | |
| input[type=reset].red-button { | |
| color: white; | |
| font-weight: bold; | |
| background: #e43030; | |
| box-shadow: 0 0 0.5em rgba(228, 48, 48, 0.7), 0 0 transparent, inset 0 -5px 0 rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(255, 255, 255, 0.2); | |
| border-radius: 6px 6px 8px 8px; | |
| transition-property: box-shadow, border-radius; | |
| } | |
| .red-button.active, .red-button:active, button.red-button.active, button.red-button:active, | |
| input[type=button].red-button.active, | |
| input[type=button].red-button:active, | |
| input[type=submit].red-button.active, | |
| input[type=submit].red-button:active, | |
| input[type=reset].red-button.active, | |
| input[type=reset].red-button:active { | |
| background: #e43030; | |
| border-radius: 6px; | |
| box-shadow: 0 0 transparent, 0 0 transparent, inset 0 2px 5px 2px rgba(0, 0, 0, 0.2); | |
| } | |
| .green-button, button.green-button, .checktext input + span.green-button, .green-button.blue-button, .green-button.red-button, | |
| input[type=button].green-button, | |
| input[type=submit].green-button, | |
| input[type=reset].green-button { | |
| color: white; | |
| font-weight: bold; | |
| background: #4f6b58; | |
| box-shadow: 0 0 0.5em rgba(79, 107, 88, 0.7), 0 0 transparent, inset 0 -5px 0 rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(255, 255, 255, 0.2); | |
| border-radius: 6px 6px 8px 8px; | |
| transition-property: box-shadow, border-radius; | |
| } | |
| .green-button.active, .green-button:active, button.green-button.active, button.green-button:active, | |
| input[type=button].green-button.active, | |
| input[type=button].green-button:active, | |
| input[type=submit].green-button.active, | |
| input[type=submit].green-button:active, | |
| input[type=reset].green-button.active, | |
| input[type=reset].green-button:active { | |
| background: #4f6b58; | |
| border-radius: 6px; | |
| box-shadow: 0 0 transparent, 0 0 transparent, inset 0 2px 5px 2px rgba(0, 0, 0, 0.2); | |
| } | |
| .blue-button, .checktext input:checked + span, button.blue-button, .checktext input + span.blue-button, .blue-button.red-button, .blue-button.green-button, | |
| input[type=button].blue-button, | |
| input[type=submit].blue-button, | |
| input[type=reset].blue-button { | |
| color: white; | |
| font-weight: bold; | |
| background: #367bf0; | |
| box-shadow: 0 0 0.5em rgba(54, 123, 240, 0.7), 0 0 transparent, inset 0 -5px 0 rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(255, 255, 255, 0.2); | |
| border-radius: 6px 6px 8px 8px; | |
| transition-property: box-shadow, border-radius; | |
| } | |
| .blue-button.active, .checktext input:checked + span.active, .blue-button:active, .checktext input:checked + span:active, button.blue-button.active, button.blue-button:active, | |
| input[type=button].blue-button.active, | |
| input[type=button].blue-button:active, | |
| input[type=submit].blue-button.active, | |
| input[type=submit].blue-button:active, | |
| input[type=reset].blue-button.active, | |
| input[type=reset].blue-button:active { | |
| background: #367bf0; | |
| border-radius: 6px; | |
| box-shadow: 0 0 transparent, 0 0 transparent, inset 0 2px 5px 2px rgba(0, 0, 0, 0.2); | |
| } | |
| label { | |
| cursor: pointer; | |
| display: inline-block; | |
| padding: 0.56em 0; | |
| } | |
| a, a:link, a:visited, a:hover a:active { | |
| cursor: pointer; | |
| font-weight: bold; | |
| color: #367bf0; | |
| font-weight: bold; | |
| text-decoration: none; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| line-height: 1.5em; | |
| font-family: "Syncopate"; | |
| } | |
| h1 { | |
| font-size: 4em; | |
| font-weight: 700; | |
| margin: 0.7em 0; | |
| } | |
| h2 { | |
| font-size: 3em; | |
| font-weight: lighter; | |
| margin: 0.8em 0; | |
| } | |
| h3 { | |
| font-size: 2.5em; | |
| font-weight: lighter; | |
| margin: 0.9em 0; | |
| } | |
| h4 { | |
| font-size: 2em; | |
| font-weight: lighter; | |
| margin: 1em 0; | |
| } | |
| h5 { | |
| margin: 0.5em 0; | |
| font-size: 1.2em; | |
| font-weight: normal; | |
| } | |
| h6 { | |
| margin: 1em 0 1em 1.4em; | |
| font-size: 1em; | |
| font-weight: bold; | |
| } | |
| input[type=checkbox], | |
| input[type=radio] { | |
| font-size: 1em; | |
| cursor: pointer; | |
| height: 1.2em; | |
| width: 1.2em; | |
| margin: 0 0.3em; | |
| box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), -2px -2px 3px white, inset 1px 1px 2px rgba(0, 0, 0, 0.2), inset -1px -1px 2px white; | |
| border: 0.15em solid #f2f3f7; | |
| vertical-align: text-bottom; | |
| transition-property: background, box-shadow; | |
| transition-duration: 0.2s; | |
| } | |
| input[type=checkbox]:active, | |
| input[type=radio]:active { | |
| box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), -2px -2px 3px white, inset 1px 1px 2px rgba(0, 0, 0, 0.2), inset -1px -1px 2px white, inset 0 0.1em 0.25em rgba(0, 0, 0, 0.2); | |
| } | |
| input[type=checkbox]:checked, | |
| input[type=radio]:checked { | |
| border-width: 0.1em; | |
| border-color: #115fe2; | |
| background-color: #367bf0; | |
| } | |
| input[type=checkbox] { | |
| border-radius: 25%; | |
| } | |
| input[type=checkbox]:checked { | |
| box-shadow: 2px 2px 0.5em rgba(0, 0, 0, 0.7), inset 0 -0.1em 0 rgba(0, 0, 0, 0.2), inset 0 0.1em 0.1em rgba(255, 255, 255, 0.2); | |
| } | |
| input[type=radio] { | |
| border-radius: 100%; | |
| } | |
| input[type=radio]:checked { | |
| box-shadow: 2px 2px 0.5em rgba(0, 0, 0, 0.7); | |
| box-shadow: 2px 2px 0.5em rgba(0, 0, 0, 0.7), inset 0 0.12em 0.1em rgba(255, 255, 255, 0.25); | |
| border-bottom-width: 0.15em; | |
| } | |
| .checktext { | |
| width: auto; | |
| margin: 0.5em; | |
| } | |
| .checktext input { | |
| display: none; | |
| } | |
| .checktext input + span { | |
| font-weight: bold; | |
| padding: 1em; | |
| transition-delay: 0s; | |
| } | |
| .checktext input:checked + span { | |
| padding: 1em; | |
| } | |
| .switch { | |
| height: 2.5rem; | |
| width: 5rem; | |
| padding: 0; | |
| position: relative; | |
| } | |
| .switch input { | |
| display: none; | |
| } | |
| .switch input + div { | |
| height: 100%; | |
| width: 100%; | |
| border-radius: 999px; | |
| background: transparent; | |
| transition-property: box-shadow, background-color; | |
| transition-duration: 0.2s; | |
| transition-delay: 0.2s; | |
| box-shadow: 3px 3px 2px -2px rgba(0, 0, 0, 0.1), inset 2px 2px 2px 1px rgba(0, 0, 0, 0.1), inset -2px -2px 1px white; | |
| } | |
| .switch input + div::before { | |
| content: ""; | |
| display: block; | |
| height: calc(2.5rem + 2px); | |
| width: calc(2.5rem + 2px); | |
| border-radius: 100%; | |
| background: white; | |
| box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -1px 3px rgba(0, 0, 0, 0.1); | |
| transform: translate(0, -1px); | |
| transition: transform 0.2s; | |
| } | |
| .switch input:checked + div { | |
| background: #367bf0; | |
| box-shadow: 2px 2px 0.5em rgba(0, 0, 0, 0.7), inset 0 2px 2px 2px rgba(0, 0, 0, 0.3), inset 0 0 transparent; | |
| } | |
| .switch input:checked + div::before { | |
| transform: translate(2.5rem, -1px); | |
| } | |
| hr { | |
| width: 50%; | |
| height: 7px; | |
| border: 0; | |
| } | |
| code, | |
| pre { | |
| padding: 0.5em 1em; | |
| border-radius: 4px; | |
| overflow: auto; | |
| box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.05); | |
| } | |
| code { | |
| background: #e6e6e6; | |
| } | |
| pre { | |
| background: white; | |
| margin: 4em 0; | |
| } | |
| code, | |
| pre { | |
| font-size: 0.9rem; | |
| font-family: monospace; | |
| line-height: 2em; | |
| cursor: auto; | |
| user-select: text; | |
| -webkit-touch-callout: text; | |
| -webkit-user-select: text; | |
| -khtml-user-select: text; | |
| -moz-user-select: text; | |
| -ms-user-select: text; | |
| } | |
| blockquote { | |
| background-color: white; | |
| padding: 0.5em 1em; | |
| border-radius: 4px; | |
| box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.05); | |
| border-left: 6px solid #367bf0; | |
| } | |
| :root { | |
| --bg-color: #f2f3f7; | |
| --fg-color: #414246; | |
| --red: #e43030; | |
| --green: #4f6b58; | |
| --blue: #367bf0; | |
| --dark-blue: #06142e; | |
| --maroon: #b8174c; | |
| --purple: #280337; | |
| } | |
| ::-moz-focus-inner, | |
| :-moz-focusring { | |
| border: 0; | |
| color: transparent; | |
| text-shadow: 0 0 0 #414246; | |
| } | |
| ::selection, | |
| ::-moz-selection { | |
| color: white; | |
| background: black; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| outline: none; | |
| -webkit-touch-callout: none; | |
| -webkit-appearance: none; | |
| -webkit-tap-highlight-color: transparent !important; | |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; | |
| -webkit-touch-callout: none; | |
| font-family: "Montserrat Alternate", sans-serif; | |
| letter-spacing: 0; | |
| } | |
| .selectable { | |
| cursor: auto; | |
| user-select: text; | |
| -webkit-touch-callout: text; | |
| -webkit-user-select: text; | |
| -khtml-user-select: text; | |
| -moz-user-select: text; | |
| -ms-user-select: text; | |
| } | |
| html, | |
| body { | |
| background-color: #f2f3f7; | |
| color: #414246; | |
| margin: 0; | |
| padding: 0; | |
| font-size: 10pt; | |
| height: 100%; | |
| cursor: default; | |
| user-select: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| } | |
| .with-shadow, .outset, .paper, input[type=text]:not(select):focus, | |
| input[type=search]:not(select):focus, | |
| input[type=tel]:not(select):focus, | |
| input[type=url]:not(select):focus, | |
| input[type=email]:not(select):focus, | |
| input[type=password]:not(select):focus, | |
| input[type=date]:not(select):focus, | |
| input[type=month]:not(select):focus, | |
| input[type=week]:not(select):focus, | |
| input[type=time]:not(select):focus, | |
| input[type=number]:not(select):focus, | |
| input[type=color]:not(select):focus, | |
| select:not(select):focus, | |
| textarea:not(select):focus, select, button, | |
| input[type=button], | |
| input[type=submit], | |
| input[type=reset], .red-button, button.red-button, .green-button, button.green-button, .red-button.green-button, .blue-button, button.blue-button, .red-button.blue-button, .green-button.blue-button, .checktext input + span, .checktext input:checked + span { | |
| box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white; | |
| } | |
| .outset, .paper, input[type=text]:not(select):focus, | |
| input[type=search]:not(select):focus, | |
| input[type=tel]:not(select):focus, | |
| input[type=url]:not(select):focus, | |
| input[type=email]:not(select):focus, | |
| input[type=password]:not(select):focus, | |
| input[type=date]:not(select):focus, | |
| input[type=month]:not(select):focus, | |
| input[type=week]:not(select):focus, | |
| input[type=time]:not(select):focus, | |
| input[type=number]:not(select):focus, | |
| input[type=color]:not(select):focus, | |
| select:not(select):focus, | |
| textarea:not(select):focus, select, button, | |
| input[type=button], | |
| input[type=submit], | |
| input[type=reset], .red-button, button.red-button, .green-button, button.green-button, .red-button.green-button, .blue-button, button.blue-button, .red-button.blue-button, .green-button.blue-button, .checktext input + span, .checktext input:checked + span { | |
| border-radius: 10px; | |
| background: #f2f3f7; | |
| } | |
| .inset, input[type=text]:not(select), | |
| input[type=search]:not(select), | |
| input[type=tel]:not(select), | |
| input[type=url]:not(select), | |
| input[type=email]:not(select), | |
| input[type=password]:not(select), | |
| input[type=date]:not(select), | |
| input[type=month]:not(select), | |
| input[type=week]:not(select), | |
| input[type=time]:not(select), | |
| input[type=number]:not(select), | |
| input[type=color]:not(select), | |
| select:not(select), | |
| textarea:not(select), button.active, button:active, | |
| input[type=button].active, | |
| input[type=button]:active, | |
| input[type=submit].active, | |
| input[type=submit]:active, | |
| input[type=reset].active, | |
| input[type=reset]:active, .active.red-button, .red-button:active, .active.green-button, .green-button:active, .active.blue-button, .blue-button:active, .checktext input + span.active, .checktext input + span:active, hr { | |
| border-radius: 10px; | |
| box-shadow: 0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white; | |
| background: #f8f9fb; | |
| } | |
| .paper { | |
| padding: 10px 20px 20px; | |
| margin-top: 20px; | |
| min-height: 100px; | |
| font-size: 1.2em; | |
| background: #f2f3f7; | |
| } | |
| section, | |
| article, | |
| .section, | |
| .article, | |
| .paper { | |
| line-height: 2em; | |
| word-wrap: break-word; | |
| word-break: normal; | |
| line-height: 2em; | |
| } | |
| input[type=text], | |
| input[type=search], | |
| input[type=tel], | |
| input[type=url], | |
| input[type=email], | |
| input[type=password], | |
| input[type=date], | |
| input[type=month], | |
| input[type=week], | |
| input[type=time], | |
| input[type=number], | |
| input[type=color], | |
| select, | |
| textarea { | |
| border: 0; | |
| background: #f2f3f7; | |
| color: #414246; | |
| font-weight: normal; | |
| padding: 0 1.25em; | |
| line-height: 1.25em; | |
| height: 3.5em; | |
| margin: 10px 0; | |
| font-size: 1.1rem; | |
| cursor: text; | |
| user-select: text; | |
| -webkit-touch-callout: text; | |
| -webkit-user-select: text; | |
| -khtml-user-select: text; | |
| -moz-user-select: text; | |
| -ms-user-select: text; | |
| transition: box-shadow 0.2s; | |
| } | |
| textarea { | |
| height: 350px; | |
| padding: 1.25em; | |
| } | |
| select { | |
| cursor: pointer; | |
| background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxOSAxOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCguMDM0IDAgMCAuMDM0IC02LjggMS43ZS01KSIgc3R5bGU9ImZpbGw6IzdiN2U4YyI+PHBhdGggZD0ibTQ4MCAzNDQtMjExLTIxMmMtMTYtMTYtNDEtMTYtNTcgMC0xNiAxNi0xNiA0MiAwIDU3bDIzOCAyMzljOC40IDguNSAyMCAxMiAzMSAxMiAxMSAwLjU2IDIyLTMuMiAzMS0xMmwyMzgtMjM5YzE2LTE2IDE2LTQyIDAtNTdzLTQxLTE2LTU3IDB6IiBzdHlsZT0iZmlsbDojN2I3ZThjIi8+PC9nPjwvc3ZnPgo=) no-repeat right 1em center; | |
| background-size: 1.2em; | |
| padding-right: 3em; | |
| } | |
| input::placeholder, | |
| textarea::placeholder { | |
| opacity: 1; | |
| transition: opacity 0.2s; | |
| color: inherit; | |
| } | |
| input:focus::placeholder, | |
| textarea:focus::placeholder { | |
| opacity: 0.2; | |
| } | |
| input:-ms-input-placeholder, | |
| textarea:-ms-input-placeholder { | |
| opacity: 1; | |
| transition: opacity 0.2s; | |
| color: inherit; | |
| } | |
| input:focus:-ms-input-placeholder, | |
| textarea:focus:-ms-input-placeholder { | |
| opacity: 0.2; | |
| } | |
| input[type=search]::-webkit-search-decoration, | |
| input[type=search]::-webkit-search-cancel-button, | |
| input[type=search]::-webkit-search-results-button, | |
| input[type=search]::-webkit-search-results-decoration { | |
| display: none; | |
| } | |
| button, .red-button, button.red-button, .green-button, button.green-button, .red-button.green-button, .blue-button, button.blue-button, .red-button.blue-button, .green-button.blue-button, .checktext input + span, .checktext input:checked + span, | |
| input[type=button], | |
| input[type=submit], | |
| input[type=reset] { | |
| border: 0; | |
| text-transform: capitalize; | |
| padding: 10px 0; | |
| width: 8em; | |
| text-align: center; | |
| cursor: pointer; | |
| color: inherit; | |
| font-size: 1.1rem; | |
| transition-property: background-color, box-shadow; | |
| transition-delay: 0.2s; | |
| transition-duration: 0.2s; | |
| } | |
| button.active, .active.red-button, .active.green-button, .active.blue-button, .checktext input + span.active, button:active, .red-button:active, .green-button:active, .blue-button:active, .checktext input + span:active, | |
| input[type=button].active, | |
| input[type=button]:active, | |
| input[type=submit].active, | |
| input[type=submit]:active, | |
| input[type=reset].active, | |
| input[type=reset]:active { | |
| transition-delay: 0s; | |
| transition-duration: 0.1s; | |
| } | |
| .red-button, button.red-button, .checktext input + span.red-button, | |
| input[type=button].red-button, | |
| input[type=submit].red-button, | |
| input[type=reset].red-button { | |
| color: white; | |
| font-weight: bold; | |
| background: #e43030; | |
| box-shadow: 0 0 0.5em rgba(228, 48, 48, 0.7), 0 0 transparent, inset 0 -5px 0 rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(255, 255, 255, 0.2); | |
| border-radius: 6px 6px 8px 8px; | |
| transition-property: box-shadow, border-radius; | |
| } | |
| .red-button.active, .red-button:active, button.red-button.active, button.red-button:active, | |
| input[type=button].red-button.active, | |
| input[type=button].red-button:active, | |
| input[type=submit].red-button.active, | |
| input[type=submit].red-button:active, | |
| input[type=reset].red-button.active, | |
| input[type=reset].red-button:active { | |
| background: #e43030; | |
| border-radius: 6px; | |
| box-shadow: 0 0 transparent, 0 0 transparent, inset 0 2px 5px 2px rgba(0, 0, 0, 0.2); | |
| } | |
| .green-button, button.green-button, .checktext input + span.green-button, | |
| input[type=button].green-button, | |
| input[type=submit].green-button, | |
| input[type=reset].green-button { | |
| color: white; | |
| font-weight: bold; | |
| background: #4f6b58; | |
| box-shadow: 0 0 0.5em rgba(79, 107, 88, 0.7), 0 0 transparent, inset 0 -5px 0 rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(255, 255, 255, 0.2); | |
| border-radius: 6px 6px 8px 8px; | |
| transition-property: box-shadow, border-radius; | |
| } | |
| .green-button.active, .green-button:active, button.green-button.active, button.green-button:active, | |
| input[type=button].green-button.active, | |
| input[type=button].green-button:active, | |
| input[type=submit].green-button.active, | |
| input[type=submit].green-button:active, | |
| input[type=reset].green-button.active, | |
| input[type=reset].green-button:active { | |
| background: #4f6b58; | |
| border-radius: 6px; | |
| box-shadow: 0 0 transparent, 0 0 transparent, inset 0 2px 5px 2px rgba(0, 0, 0, 0.2); | |
| } | |
| .blue-button, .checktext input:checked + span, button.blue-button, .checktext input + span.blue-button, | |
| input[type=button].blue-button, | |
| input[type=submit].blue-button, | |
| input[type=reset].blue-button { | |
| color: white; | |
| font-weight: bold; | |
| background: #367bf0; | |
| box-shadow: 0 0 0.5em rgba(54, 123, 240, 0.7), 0 0 transparent, inset 0 -5px 0 rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(255, 255, 255, 0.2); | |
| border-radius: 6px 6px 8px 8px; | |
| transition-property: box-shadow, border-radius; | |
| } | |
| .blue-button.active, .checktext input:checked + span.active, .blue-button:active, .checktext input:checked + span:active, button.blue-button.active, button.blue-button:active, | |
| input[type=button].blue-button.active, | |
| input[type=button].blue-button:active, | |
| input[type=submit].blue-button.active, | |
| input[type=submit].blue-button:active, | |
| input[type=reset].blue-button.active, | |
| input[type=reset].blue-button:active { | |
| background: #367bf0; | |
| border-radius: 6px; | |
| box-shadow: 0 0 transparent, 0 0 transparent, inset 0 2px 5px 2px rgba(0, 0, 0, 0.2); | |
| } | |
| label { | |
| cursor: pointer; | |
| display: inline-block; | |
| padding: 0.56em 0; | |
| } | |
| a, a:link, a:visited, a:hover a:active { | |
| cursor: pointer; | |
| font-weight: bold; | |
| color: #367bf0; | |
| font-weight: bold; | |
| text-decoration: none; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| line-height: 1.5em; | |
| font-family: "Syncopate"; | |
| } | |
| h1 { | |
| font-size: 4em; | |
| font-weight: 700; | |
| margin: 0.7em 0; | |
| } | |
| h2 { | |
| font-size: 3em; | |
| font-weight: lighter; | |
| margin: 0.8em 0; | |
| } | |
| h3 { | |
| font-size: 2.5em; | |
| font-weight: lighter; | |
| margin: 0.9em 0; | |
| } | |
| h4 { | |
| font-size: 2em; | |
| font-weight: lighter; | |
| margin: 1em 0; | |
| } | |
| h5 { | |
| margin: 0.5em 0; | |
| font-size: 1.2em; | |
| font-weight: normal; | |
| } | |
| h6 { | |
| margin: 1em 0 1em 1.4em; | |
| font-size: 1em; | |
| font-weight: bold; | |
| } | |
| input[type=checkbox], | |
| input[type=radio] { | |
| font-size: 1em; | |
| cursor: pointer; | |
| height: 1.2em; | |
| width: 1.2em; | |
| margin: 0 0.3em; | |
| box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), -2px -2px 3px white, inset 1px 1px 2px rgba(0, 0, 0, 0.2), inset -1px -1px 2px white; | |
| border: 0.15em solid #f2f3f7; | |
| vertical-align: text-bottom; | |
| transition-property: background, box-shadow; | |
| transition-duration: 0.2s; | |
| } | |
| input[type=checkbox]:active, | |
| input[type=radio]:active { | |
| box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), -2px -2px 3px white, inset 1px 1px 2px rgba(0, 0, 0, 0.2), inset -1px -1px 2px white, inset 0 0.1em 0.25em rgba(0, 0, 0, 0.2); | |
| } | |
| input[type=checkbox]:checked, | |
| input[type=radio]:checked { | |
| border-width: 0.1em; | |
| border-color: #115fe2; | |
| background-color: #367bf0; | |
| } | |
| input[type=checkbox] { | |
| border-radius: 25%; | |
| } | |
| input[type=checkbox]:checked { | |
| box-shadow: 2px 2px 0.5em rgba(0, 0, 0, 0.7), inset 0 -0.1em 0 rgba(0, 0, 0, 0.2), inset 0 0.1em 0.1em rgba(255, 255, 255, 0.2); | |
| } | |
| input[type=radio] { | |
| border-radius: 100%; | |
| } | |
| input[type=radio]:checked { | |
| box-shadow: 2px 2px 0.5em rgba(0, 0, 0, 0.7); | |
| box-shadow: 2px 2px 0.5em rgba(0, 0, 0, 0.7), inset 0 0.12em 0.1em rgba(255, 255, 255, 0.25); | |
| border-bottom-width: 0.15em; | |
| } | |
| .checktext { | |
| width: auto; | |
| margin: 0.5em; | |
| } | |
| .checktext input { | |
| display: none; | |
| } | |
| .checktext input + span { | |
| font-weight: bold; | |
| padding: 1em; | |
| transition-delay: 0s; | |
| } | |
| .checktext input:checked + span { | |
| padding: 1em; | |
| } | |
| .switch { | |
| height: 2.5rem; | |
| width: 5rem; | |
| padding: 0; | |
| position: relative; | |
| } | |
| .switch input { | |
| display: none; | |
| } | |
| .switch input + div { | |
| height: 100%; | |
| width: 100%; | |
| border-radius: 999px; | |
| background: transparent; | |
| transition-property: box-shadow, background-color; | |
| transition-duration: 0.2s; | |
| transition-delay: 0.2s; | |
| box-shadow: 3px 3px 2px -2px rgba(0, 0, 0, 0.1), inset 2px 2px 2px 1px rgba(0, 0, 0, 0.1), inset -2px -2px 1px white; | |
| } | |
| .switch input + div::before { | |
| content: ""; | |
| display: block; | |
| height: calc(2.5rem + 2px); | |
| width: calc(2.5rem + 2px); | |
| border-radius: 100%; | |
| background: white; | |
| box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -1px 3px rgba(0, 0, 0, 0.1); | |
| transform: translate(0, -1px); | |
| transition: transform 0.2s; | |
| } | |
| .switch input:checked + div { | |
| background: #367bf0; | |
| box-shadow: 2px 2px 0.5em rgba(0, 0, 0, 0.7), inset 0 2px 2px 2px rgba(0, 0, 0, 0.3), inset 0 0 transparent; | |
| } | |
| .switch input:checked + div::before { | |
| transform: translate(2.5rem, -1px); | |
| } | |
| hr { | |
| width: 50%; | |
| height: 7px; | |
| border: 0; | |
| } | |
| code, | |
| pre { | |
| padding: 0.5em 1em; | |
| border-radius: 4px; | |
| overflow: auto; | |
| box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.05); | |
| } | |
| code { | |
| background: #e6e6e6; | |
| } | |
| pre { | |
| background: white; | |
| margin: 4em 0; | |
| } | |
| code, | |
| pre { | |
| font-size: 0.9rem; | |
| font-family: monospace; | |
| line-height: 2em; | |
| cursor: auto; | |
| user-select: text; | |
| -webkit-touch-callout: text; | |
| -webkit-user-select: text; | |
| -khtml-user-select: text; | |
| -moz-user-select: text; | |
| -ms-user-select: text; | |
| } | |
| blockquote { | |
| background-color: white; | |
| padding: 0.5em 1em; | |
| border-radius: 4px; | |
| box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.05); | |
| border-left: 6px solid #367bf0; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section class="flex-container"> | |
| <div class="header shadow-sm"></div></section> | |
| <div class="flex-container"> | |
| <div class="paper card"> | |
| <div class="header">test</div> | |
| <div class="content"><p>hhh</div> | |
| </div> | |
| <div class="paper card"><div class="header">2nd card</div> | |
| <div class="content"><p> here we have some content. | |
| </section> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // alert('Hello world!'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"separate","fontsize":"100","seethrough":"1","prefixfree":"","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment