monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-09-22 06:26:28 +08:00
Code Issues Projects Releases Packages Wiki Activity

styles done - ready for js

Browse source
This commit is contained in:
bhomie 2020-06-10 18:59:22 -07:00
parent 125b609b98
commit e5dacc5ef2
3 changed files with 57 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -66,6 +66,7 @@ node_modules/
#vs code
.vscode
*.code-workspace
#css
public/css/style.css

39
public/css/style.scss
View file

@ -9,6 +9,20 @@
}
input[type="color"] {
-webkit-appearance: none;
border: none;
width: 32px;
height: 32px;
border-radius: var(--roundness);
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}
input{
outline: none;
border: none;
@ -19,6 +33,17 @@ input{
font-size: 1rem;
line-height: 1rem;
font-family: "Roboto Mono";
&.colorPicker {
text-align: center;
cursor: pointer;
will-change: padding;
transition: .1s ease-in-out padding;
width: 2rem;
height: 2rem;
&:hover {
padding: .3rem;
}
}
}
body {
@ -1293,6 +1318,14 @@ key {
grid-template-columns: 2fr 1fr;
column-gap: 2rem;
align-items: center;
&.customTheme {
grid-template-columns: 1fr 1fr 1fr 1fr;
justify-items: stretch;
gap: .5rem;
& h1 {
grid-column: 1 / span 4;
}
}
h1{
font-size: 1rem;
line-height: 1rem;
@ -1411,7 +1444,10 @@ key {
grid-area: tabs;
display: flex;
grid-template-columns: 1fr 1fr 9fr;
grid-area: tabs;
.tab {
will-change: color;
transition: .2s ease-in-out color;
outline: 0;
cursor: pointer;
padding: 0;
@ -1423,7 +1459,7 @@ key {
&:first-child{
margin-right: .5rem;
}
&.active {
&.active, &:hover {
color: var(--main-color);
}
}
@ -1638,4 +1674,3 @@ key {
.hidden {
display: none !important;
}

25
public/index.html
View file

@ -421,20 +421,33 @@
</div>
</div>
<div class="section themes">
<h1>theme</h1>
<div class='tabs'>
<button class="tab">preset</button>
<button class="tab">custom</button>
<div class="activeIndicator"></div>
</div>
<h1>theme</h1>
<div class="buttons">
<div js-id="presetThemes" class="buttons">
</div>
<div class="customTheme">
<p>enter the values for your own custom theme here</p>
<input class="colorSelector" type="color">
<div js-id="customThemes" class="section customTheme">
<h1>enter the values for your own custom theme here</h1>
<label class="text">background</label>
<input class="input colorPicker" type="color" value="#ff0000">
<label class="text">main</label>
<input class="input colorPicker" type="color" value="#00ff00">
<label class="text">caret</label>
<input class="input colorPicker" type="color" value="#ff00ff">
<label class="text">sub</label>
<input class="input colorPicker" type="color" value="#0000ff">
<label class="text">text</label>
<input class="input colorPicker" type="color" value="#f0f000">
<label class="text">error</label>
<input class="input colorPicker" type="color" value="#f000f0">
<label class="text">extra error</label>
<input class="input colorPicker" type="color" value="#00f0f0">
</div>
</div>
<div class="sectionSpacer"></div>