Update style.css
Browse files
style.css
CHANGED
|
@@ -23,7 +23,7 @@ body {
|
|
| 23 |
left: 0;
|
| 24 |
width: 100%;
|
| 25 |
height: 100%;
|
| 26 |
-
background:
|
| 27 |
color: white;
|
| 28 |
display: flex;
|
| 29 |
flex-direction: column;
|
|
@@ -36,16 +36,23 @@ body {
|
|
| 36 |
margin-bottom: 10px;
|
| 37 |
}
|
| 38 |
|
| 39 |
-
.
|
| 40 |
-
|
|
|
|
|
|
|
|
|
|
| 41 |
}
|
| 42 |
|
| 43 |
-
.color-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 44 |
padding: 10px;
|
| 45 |
cursor: pointer;
|
| 46 |
}
|
| 47 |
|
| 48 |
-
.color-option:hover, .font-option:hover {
|
| 49 |
background: #444;
|
| 50 |
}
|
| 51 |
|
|
@@ -53,12 +60,16 @@ button {
|
|
| 53 |
padding: 10px 20px;
|
| 54 |
font-size: 18px;
|
| 55 |
cursor: pointer;
|
| 56 |
-
background: #
|
| 57 |
border: none;
|
| 58 |
color: white;
|
| 59 |
margin-top: 20px;
|
| 60 |
}
|
| 61 |
|
| 62 |
button:hover {
|
| 63 |
-
background: #
|
|
|
|
|
|
|
|
|
|
|
|
|
| 64 |
}
|
|
|
|
| 23 |
left: 0;
|
| 24 |
width: 100%;
|
| 25 |
height: 100%;
|
| 26 |
+
background: #333;
|
| 27 |
color: white;
|
| 28 |
display: flex;
|
| 29 |
flex-direction: column;
|
|
|
|
| 36 |
margin-bottom: 10px;
|
| 37 |
}
|
| 38 |
|
| 39 |
+
.settings {
|
| 40 |
+
display: flex;
|
| 41 |
+
flex-direction: row;
|
| 42 |
+
justify-content: space-around;
|
| 43 |
+
width: 80%;
|
| 44 |
}
|
| 45 |
|
| 46 |
+
.color-options, .font-options, .toggle-options {
|
| 47 |
+
margin: 0 20px;
|
| 48 |
+
}
|
| 49 |
+
|
| 50 |
+
.color-option, .font-option, .toggle-option {
|
| 51 |
padding: 10px;
|
| 52 |
cursor: pointer;
|
| 53 |
}
|
| 54 |
|
| 55 |
+
.color-option:hover, .font-option:hover, .toggle-option:hover {
|
| 56 |
background: #444;
|
| 57 |
}
|
| 58 |
|
|
|
|
| 60 |
padding: 10px 20px;
|
| 61 |
font-size: 18px;
|
| 62 |
cursor: pointer;
|
| 63 |
+
background: #555;
|
| 64 |
border: none;
|
| 65 |
color: white;
|
| 66 |
margin-top: 20px;
|
| 67 |
}
|
| 68 |
|
| 69 |
button:hover {
|
| 70 |
+
background: #777;
|
| 71 |
+
}
|
| 72 |
+
|
| 73 |
+
input[type="checkbox"] {
|
| 74 |
+
margin-right: 10px;
|
| 75 |
}
|