xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Dark themed inputs

Browse source
This commit is contained in:
Robert Long 2021-08-20 16:36:41 -07:00
parent 43c0ed193e
commit b45eacec28
5 changed files with 21 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/Home.jsx
View file

@ -69,7 +69,7 @@ export function Home({ manager }) {
onLogout={onLogout} onLogout={onLogout}
/> />
</Header> </Header>
<Content> <Content className={styles.content}>
<Sidebar> <Sidebar>
<h5>Rooms:</h5> <h5>Rooms:</h5>
<div className={styles.roomList}> <div className={styles.roomList}>

5
src/Home.module.css
View file

@ -1,3 +1,8 @@
.content {
flex: 1;
overflow: hidden;
}
.roomList { .roomList {
} }

19
src/Input.module.css
View file

@ -11,7 +11,7 @@
margin: 1em 0; margin: 1em 0;
border-radius: 4px; border-radius: 4px;
transition: border-color .25s; transition: border-color .25s;
border: 1px solid #e7e7e7; border: 1px solid #394049;
} }
.fieldRow.rightAlign { .fieldRow.rightAlign {
@ -36,8 +36,8 @@
border: none; border: none;
border-radius: 4px; border-radius: 4px;
padding: 8px 9px; padding: 8px 9px;
color: #2e2f32; color: white;
background-color: #fff; background-color: #21262c;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
@ -49,12 +49,12 @@
.field input:placeholder-shown:focus::placeholder { .field input:placeholder-shown:focus::placeholder {
transition: color .25s ease-in .1s; transition: color .25s ease-in .1s;
color: #888; color: #6f7882;
} }
.field label { .field label {
transition: font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s; transition: font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;
color: #2e2f32; color: white;
background-color: transparent; background-color: transparent;
font-size: 14px; font-size: 14px;
position: absolute; position: absolute;
@ -70,7 +70,7 @@
} }
.field:focus-within { .field:focus-within {
border-color: #238cf5; border-color: #0086e6;
} }
.field input:focus { .field input:focus {
@ -78,17 +78,16 @@
} }
.field input:focus + label, .field input:not(:placeholder-shown) + label { .field input:focus + label, .field input:not(:placeholder-shown) + label {
background-color: #fff; background-color: #21262c;
transition: font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s; transition: font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;
font-size: 10px; font-size: 10px;
top: -13px; top: -13px;
padding: 0 2px; padding: 0 2px;
background-color: #fff;
pointer-events: auto; pointer-events: auto;
} }
.field input:focus + label { .field input:focus + label {
color: #238cf5; color: #0086e6;
} }
.button { .button {
@ -120,6 +119,6 @@
.errorMessage { .errorMessage {
margin: 0; margin: 0;
font-size: 13px; font-size: 13px;
color: rgb(255, 75, 85); color: #ff5b55;
font-weight: 600; font-weight: 600;
} }

6
src/Layout.module.css
View file

@ -14,7 +14,7 @@
width: auto; width: auto;
max-width: none; max-width: none;
padding: 12px; padding: 12px;
background-color: rgba(33,38,44,.9); background-color: #21262c;
border-radius: 8px; border-radius: 8px;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -33,11 +33,11 @@
} }
.modal { .modal {
color: #232f32; color: white;
border-radius: 8px; border-radius: 8px;
padding: 25px 60px; padding: 25px 60px;
max-width: 400px; max-width: 400px;
background-color: white; background-color: #21262c;
flex: 1; flex: 1;
margin-bottom: 20px; margin-bottom: 20px;
} }

6
src/index.css
View file

@ -105,7 +105,7 @@ limitations under the License.
} }
body { body {
background-color: rgb(21, 25, 30); background-color: #15191e;
color: #fff; color: #fff;
margin: 0; margin: 0;
font-family: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@ -125,10 +125,10 @@ html, body, #root {
} }
a { a {
color: rgb(102, 180, 233); color: #0086e6;
font-weight: bold; font-weight: bold;
} }
a:hover, a:active { a:hover, a:active {
color: rgb(76, 134, 173); opacity: 0.8;
} }