Color-Foo
This commit is contained in:
parent
bdab8f4982
commit
56670755d4
2 changed files with 21 additions and 16 deletions
|
@ -2,10 +2,16 @@
|
|||
--highlight-dark: #03045eff;
|
||||
--background: #023e8aff;
|
||||
--foreground: #0077b6ff;
|
||||
--blue-green: #0096c7ff;
|
||||
--foreground02: #0096c7ff;
|
||||
--cerulean-crayola: #00b4d8ff;
|
||||
--highlight01: #48cae4ff;
|
||||
--lowlight-text: #90e0efff;
|
||||
--text: #ade8f4ff;
|
||||
--highlight-text: #caf0f8ff;
|
||||
|
||||
--border-radius: 2vh;
|
||||
--font-size: 4vh;
|
||||
|
||||
--bumper-small-size: 1vh;
|
||||
--bumper-large-size: 3vh;
|
||||
}
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
body, html {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 4vh;
|
||||
font-size: var(--font-size);
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
padding: var(--bumper-small-size);
|
||||
margin: 0;
|
||||
background-color: var(--background);
|
||||
color: var(--text);
|
||||
|
@ -17,27 +17,26 @@ div.parent {
|
|||
}
|
||||
|
||||
div.input {
|
||||
border-radius: 50px;
|
||||
border-radius: var(--border-radius);
|
||||
max-width: 100%;
|
||||
margin-bottom: 1vh;
|
||||
margin-bottom: var(--bumper-small-size);
|
||||
display: grid;
|
||||
grid-template-columns: auto 50px 1fr;
|
||||
grid-template-columns: auto var(--bumper-large-size) 1fr;
|
||||
background-color: var(--foreground);
|
||||
padding-left: 20px;
|
||||
padding-left: var(--border-radius);
|
||||
padding-right: var(--border-radius);
|
||||
}
|
||||
|
||||
div.input > label {
|
||||
border-bottom-left-radius: 50px;
|
||||
border-top-left-radius: 50px;
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-top-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
div.input > input {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
font-size: 4vh;
|
||||
border-bottom-right-radius: 50px;
|
||||
border-top-right-radius: 50px;
|
||||
background-color: var(--foreground);
|
||||
font-size: var(--font-size);
|
||||
background-color: var(--foreground02);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
|
@ -46,12 +45,12 @@ input::placeholder {
|
|||
}
|
||||
|
||||
div > .submit {
|
||||
border-radius: 50px;
|
||||
border-radius: var(--border-radius);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
font-size: 4vh;
|
||||
font-size: var(--font-size);
|
||||
height: 100%;
|
||||
border: solid 1px var(--highlight-dark);
|
||||
border: solid 0.25vh var(--highlight-dark);
|
||||
background-color: var(--foreground);
|
||||
color: var(--text);
|
||||
display: flex;
|
||||
|
|
Loading…
Reference in a new issue