Last active
October 9, 2023 12:30
-
-
Save Esther-Lita/99a4388d97dc7d6e6b7e71e954c89501 to your computer and use it in GitHub Desktop.
Spooky inspired theme for the Hanko Web Components
This file contains 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
@import url("https://fonts.googleapis.com/css2?family=Nosifer&display=swap"); | |
.hanko_container { | |
background-color: black; | |
padding: 4px 10px 8px; | |
max-width: 420px; | |
display: flex; | |
flex-direction: column; | |
flex-wrap: nowrap; | |
justify-content: center; | |
align-items: center; | |
align-content: flex-start; | |
box-sizing: border-box; | |
} | |
hanko-profile .hanko_container { | |
max-width: 600px; | |
} | |
.hanko_content { | |
box-sizing: border-box; | |
flex: 0 1 auto; | |
width: 100%; | |
height: 100%; | |
} | |
.hanko_footer { | |
padding: 8px 0; | |
box-sizing: border-box; | |
width: 100%; | |
} | |
.hanko_footer :nth-child(1) { | |
float: left; | |
} | |
.hanko_footer :nth-child(2) { | |
float: right; | |
} | |
.hanko_headline { | |
font-family: "Nosifer", cursive; | |
line-height: 1.5; | |
margin: 20px 8px; | |
} | |
.hanko_headline.hanko_grade1 { | |
color: #9d0208; | |
font-size: 24px; | |
} | |
.hanko_headline.hanko_grade2 { | |
font-size: 16px; | |
margin: 15px 6px; | |
color: #9d0208; | |
} | |
.hanko_form { | |
display: flex; | |
flex-grow: 1; | |
} | |
.hanko_form .hanko_ul { | |
flex-grow: 1; | |
margin: 10px 0; | |
list-style-type: none; | |
display: flex; | |
flex-wrap: wrap; | |
gap: 1em; | |
} | |
.hanko_form .hanko_li { | |
display: flex; | |
max-width: 100%; | |
flex-grow: 1; | |
} | |
.hanko_inputWrapper { | |
flex-grow: 1; | |
position: relative; | |
display: flex; | |
min-width: 220px; | |
max-width: 100%; | |
} | |
.hanko_input { | |
font-weight: 400px; | |
font-size: 16px; | |
border-radius: 10px; | |
border: solid 1px #8f9095; | |
height: 42px; | |
color: #8f9095; | |
background: #161a1d; | |
padding: 0 0.5rem; | |
outline: none; | |
width: 100%; | |
box-sizing: border-box; | |
transition: 0.1s ease-out; | |
} | |
.hanko_button { | |
font-weight: 400px; | |
border-radius: 10px; | |
border: solid 1px; | |
white-space: nowrap; | |
width: 100%; | |
height: 42px; | |
outline: none; | |
cursor: pointer; | |
transition: 0.1s ease-out; | |
flex-grow: 1; | |
flex-shrink: 1; | |
} | |
.hanko_button.hanko_primary { | |
color: white; | |
background: linear-gradient( | |
180deg, | |
rgba(157, 2, 0, 1) 0%, | |
rgba(106, 4, 15, 1) 61% | |
); | |
border-color: #6a040f; | |
font-size: 18px; | |
font-family: "Nosifer", cursive; | |
} | |
.hanko_button.hanko_secondary { | |
color: white; | |
background: #161a1d; | |
border-color: #8f9095; | |
} | |
.hanko_icon, | |
.hanko_loadingSpinnerWrapper .hanko_loadingSpinner, | |
.hanko_loadingSpinnerWrapperIcon .hanko_loadingSpinner, | |
.hanko_exclamationMark, | |
.hanko_checkmark { | |
display: inline-block; | |
fill: white; | |
width: 18px; | |
margin: 0 8px; | |
} | |
.hanko_icon.hanko_secondary, | |
.hanko_loadingSpinnerWrapper .hanko_secondary.hanko_loadingSpinner, | |
.hanko_loadingSpinnerWrapperIcon .hanko_secondary.hanko_loadingSpinner, | |
.hanko_secondary.hanko_exclamationMark, | |
.hanko_secondary.hanko_checkmark { | |
fill: white; | |
} | |
.hanko_paragraph { | |
font-size: 16px; | |
color: #8f9095; | |
margin: 10px 4px; | |
text-align: left; | |
word-break: break-word; | |
} | |
.hanko_accordion { | |
font-weight: 400px; | |
font-size: 16px; | |
width: 100%; | |
overflow: hidden; | |
} | |
.hanko_accordion .hanko_accordionItem { | |
margin: 0.25rem 0; | |
overflow: hidden; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_label { | |
border-radius: 10px; | |
border-style: none; | |
height: 42px; | |
background: white; | |
box-sizing: border-box; | |
display: flex; | |
align-items: center; | |
justify-content: space-between; | |
padding: 0 1rem; | |
margin: 0; | |
cursor: pointer; | |
transition: all 0.35s; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_label .hanko_labelText { | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
.hanko_accordion | |
.hanko_accordionItem | |
.hanko_label | |
.hanko_labelText | |
.hanko_description { | |
color: #8f9095; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_label.hanko_dropdown { | |
color: #f48c06; | |
justify-content: flex-start; | |
background: black; | |
width: fit-content; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_label:hover { | |
color: white; | |
background: linear-gradient( | |
180deg, | |
rgba(157, 2, 0, 1) 0%, | |
rgba(106, 4, 15, 1) 61% | |
); | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_label:hover .hanko_description { | |
color: white; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_label:hover.hanko_dropdown { | |
color: #f48c06; | |
background: none; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_label:not(.hanko_dropdown)::after { | |
content: "❯"; | |
width: 1rem; | |
text-align: center; | |
transition: all 0.35s; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_label.hanko_dropdown::before { | |
content: "+"; | |
width: 1em; | |
text-align: center; | |
transition: all 0.35s; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_accordionInput { | |
position: absolute; | |
opacity: 0; | |
z-index: -1; | |
} | |
.hanko_accordion | |
.hanko_accordionItem | |
.hanko_accordionInput:checked | |
+ .hanko_label { | |
color: white; | |
background: linear-gradient( | |
180deg, | |
rgba(157, 2, 0, 1) 0%, | |
rgba(106, 4, 15, 1) 61% | |
); | |
} | |
.hanko_accordion | |
.hanko_accordionItem | |
.hanko_accordionInput:checked | |
+ .hanko_label | |
.hanko_description { | |
color: white; | |
} | |
.hanko_accordion | |
.hanko_accordionItem | |
.hanko_accordionInput:checked | |
+ .hanko_label.hanko_dropdown { | |
color: white; | |
background: none; | |
} | |
.hanko_accordion | |
.hanko_accordionItem | |
.hanko_accordionInput:checked | |
+ .hanko_label:not(.hanko_dropdown)::after { | |
transform: rotate(90deg); | |
} | |
.hanko_accordion | |
.hanko_accordionItem | |
.hanko_accordionInput:checked | |
+ .hanko_label.hanko_dropdown::before { | |
content: "-"; | |
} | |
.hanko_accordion | |
.hanko_accordionItem | |
.hanko_accordionInput:checked | |
+ .hanko_label | |
~ .hanko_accordionContent { | |
margin: 0.25rem 1rem; | |
opacity: 1; | |
max-height: 100vh; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_accordionContent { | |
max-height: 0; | |
margin: 0 1rem; | |
opacity: 0; | |
overflow: hidden; | |
transition: all 0.35s; | |
} | |
.hanko_accordion | |
.hanko_accordionItem | |
.hanko_accordionContent.hanko_dropdownContent { | |
border-style: none; | |
} | |
.hanko_link { | |
font-weight: 400px; | |
font-size: 16px; | |
color: #f48c06; | |
text-decoration: none; | |
cursor: pointer; | |
background: none; | |
border: none; | |
padding: 0; | |
} | |
.hanko_link:hover { | |
text-decoration: underline; | |
} | |
.hanko_link.hanko_disabled { | |
color: #8f9095; | |
pointer-events: none; | |
cursor: default; | |
} | |
.hanko_link.hanko_danger { | |
color: #9d0200; | |
} | |
.hanko_linkWrapper { | |
display: inline-flex; | |
flex-direction: row; | |
justify-content: space-between; | |
align-items: center; | |
height: 20px; | |
} | |
.hanko_linkWrapper.hanko_reverse { | |
flex-direction: row-reverse; | |
} | |
.hanko_divider { | |
font-weight: 400px; | |
font-size: 16px; | |
display: flex; | |
visibility: visible; | |
color: #8f9095; | |
margin: 20px 8px; | |
} | |
.hanko_divider .hanko_line { | |
border-bottom: solid 1px; | |
color: inherit; | |
font: inherit; | |
width: 100%; | |
} | |
.hanko_divider .hanko_text { | |
font: inherit; | |
color: inherit; | |
background: black; | |
padding: 0 42px; | |
line-height: 0.1em; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment