Created
August 26, 2023 19:01
-
-
Save BomberFish/42731436fbf904dee86dbb8e82c58ed7 to your computer and use it in GitHub Desktop.
nintendo switch ui in css (sorta)
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
/* bomberfish */ | |
/* Basic Styling */ | |
@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap'); | |
html, | |
html.light { | |
--bg: #ebebeb; | |
--bg2: #fdfdfd; | |
--fg: #2e2e2e; | |
--mg: #c9c9c9; | |
--accent: #3050F1; | |
--highlight: #1CBCCB; | |
--highlight: #1ca8cb; | |
} | |
html.dark { | |
--bg: #2d2d2d; | |
--bg2: #212227; | |
--fg: #fff; | |
--mg: #4d4d4d; | |
--accent: #01FFCB; | |
--highlight: #6BD3E8; | |
--highlight2: #6be8d5; | |
} | |
html { | |
background-color: var(--bg); | |
} | |
body { | |
color: var(--fg); | |
font-family: "nintendo_udsg-r_std_003", sans-serif; | |
margin: 2%; | |
} | |
html[theme=dark]>body { | |
color: #fff; | |
} | |
/* Special UI elements */ | |
sw-head { | |
display: block; | |
font-size: 1.8em; | |
border-bottom: 1.5px solid var(--fg); | |
width: 100%; | |
margin-bottom: 0.65em; | |
padding-bottom: 0.5em; | |
} | |
sw-section { | |
display: block; | |
padding-bottom: 0.3em; | |
border-bottom: 1px solid var(--mg); | |
} | |
#log { | |
font-family: "PT Mono", monospace, "nintendo_udsg-r_std_003", sans-serif; | |
padding-block: 1em; | |
font-size: 0.86em; | |
} | |
/* UI Controls */ | |
button { | |
appearance: none; | |
background: transparent; | |
padding: 10px 20px; | |
margin-inline: 0.15em; | |
margin-block: 0.5em; | |
color: var(--fg); | |
font-size: medium; | |
font-family: "nintendo_udsg-r_std_003", sans-serif; | |
border-radius: 2px; | |
border-color: var(--fg); | |
border-style: solid; | |
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; | |
} | |
button:hover, | |
button:active, | |
button:focus { | |
animation: border 1s linear 0s infinite forwards; | |
background-color: var(--bg2); | |
border-color: var(--highlight); | |
} | |
button:active { | |
transition: color 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important; | |
color: var(--accent); | |
} | |
button.primary { | |
background-color: var(--accent); | |
color: var(--bg); | |
border-color: transparent; | |
} | |
button.primary:hover, | |
button.primary:active, | |
button.primary:focus { | |
background-color: var(--accent); | |
color: var(--bg); | |
border-color: var(--highlight); | |
animation: border 1s linear 0s infinite forwards; | |
} | |
#colorToggle { | |
background: none; | |
color: none; | |
border: none; | |
margin: initial; | |
padding: initial; | |
float: right; | |
} | |
#colorToggle > svg { | |
width: 2em; | |
height: 2em; | |
} | |
#colorToggle > svg > g, #colorToggle > svg > g > path { | |
fill: var(--fg); | |
stroke: var(--fg); | |
} | |
#colorToggle > svg > g > circle { | |
stroke: var(--fg); | |
fill: none; | |
} | |
input[type=radio] { | |
/* Add if not using autoprefixer */ | |
-webkit-appearance: none; | |
/* Remove most all native input styles */ | |
appearance: none; | |
/* For iOS < 15 */ | |
background-color: var(--bg2); | |
/* Not removed via appearance */ | |
margin: 0; | |
font: inherit; | |
color: var(--fg); | |
width: 1.15em; | |
height: 1.15em; | |
border: 0.15em solid var(--fg); | |
border-radius: 50%; | |
transform: translateY(-0.075em); | |
display: grid; | |
place-content: center; | |
} | |
input[type="radio"]::before { | |
content: ""; | |
width: 0.65em; | |
height: 0.65em; | |
border-radius: 50%; | |
transform: scale(0); | |
transition: 50ms transform ease-in-out; | |
box-shadow: inset 1em 1em var(--accent); | |
/* Windows High Contrast Mode (why the fuck is this here)*/ | |
background-color: CanvasText; | |
} | |
input[type="radio"]:checked::before { | |
transform: scale(1); | |
} | |
/* text colors */ | |
.text-red { | |
color: red; | |
} | |
.text-orange { | |
color: orange; | |
} | |
.text-yellow { | |
color: yellow | |
} | |
.text-green { | |
color: green; | |
} | |
.text-blue { | |
color: blue; | |
} | |
.text-purple { | |
color: rebeccapurple; /* AND YOU CAN'T SIT WITH US, REBECCA!!! */ | |
} | |
/* bg colors */ | |
.bg-red { | |
background-color: red; | |
} | |
.bg-orange { | |
background-color: orange; | |
} | |
.bg-yellow { | |
background-color: yellow | |
} | |
.bg-green { | |
background-color: green; | |
} | |
.bg-blue { | |
background-color: blue; | |
} | |
.bg-purple { | |
background-color: rebeccapurple; /* AND YOU CAN'T SIT WITH US, REBECCA!!! */ | |
} | |
@keyframes border { | |
0% { | |
border-color: var(--highlight) | |
} | |
45% { | |
border-color: var(--highlight2) | |
} | |
100% { | |
border-color: var(--highlight) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment