diff --git a/client/css/style.css b/client/css/style.css
index d0836a5..38653ef 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -143,7 +143,6 @@ input:focus{
}
#departuresView,
-#settingsView,
#searchView,
#journeyView,
#journeysView {
@@ -151,6 +150,10 @@ input:focus{
flex-direction: column;
}
+#settingsView {
+ padding: 10px;
+}
+
#journeyView tbody td:nth-child(3) {
text-align: left;
}
@@ -312,11 +315,6 @@ input:focus{
margin-top: 15px;
}
-#settings {
- background-color: rgba(67, 160, 71, 0.6);
- background-color: white;
-}
-
.suggestionsbox p {
font-size: 1.2em;
background-color: white;
@@ -362,9 +360,10 @@ input:focus{
}
.btn {
+ color: #fff;
position: relative;
- margin: 30px auto;
+ margin-top: 30px;
padding: 0;
overflow: hidden;
@@ -372,15 +371,21 @@ input:focus{
border-width: 0;
outline: none;
border-radius: 2px;
-
- background-color: #2ecc71;
- color: #ecf0f1;
+
+ content: 'OK';
+ border-radius: 4px;
+ color: white;
+ width: fit-content;
+ margin-left: 5px;
+ margin-top: 10px;
+ transition: background-color 100ms;
+ cursor: pointer;
+ background-color: rgba(20, 30, 255, .7);
}
.btn:hover, .btn:focus {
- background-color: #27ae60;
-}
-
+ background-color: rgba(70, 100, 255, .8);
+ }
.btn > * {
position: relative;
}
@@ -391,19 +396,24 @@ input:focus{
}
.btn.orange {
- background-color: #e67e22;
+ background-color: #e36420;;
}
.btn.orange:hover, .btn.orange:focus {
- background-color: #d35400;
+ background-color: #e67e22;
+}
+
+.buttons {
+ justify-content: flex-end;
+ display: flex;
}
.btn.red {
- background-color: #e74c3c;
+ background-color: #d0493b;
}
.btn.red:hover, .btn.red:focus {
- background-color: #c0392b;
+ background-color: #e74c3c;
}
#spinner {
@@ -449,7 +459,6 @@ input:focus{
content: 'OK';
border-radius: 4px;
background-color: rgba(20, 30, 255, .7);
- box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
color: white;
width: fit-content;
width: -moz-fit-content;
@@ -548,7 +557,8 @@ input:focus{
}
.modal-header {
- background-color: #eee;
+ background-color: #43a047;
+ color: white;
border-radius: 6px 6px 0px 0px;
min-height: 16.4;
padding: 15px;
@@ -565,14 +575,14 @@ input:focus{
margin:-15px;
margin-left:0px;
height:53px;
- border-left: 1px solid #e5e5e5;
- background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3goLFTUY0uFzJAAAAOpJREFUeNrtmjEWgzAMQ3Ev7TPk1HRlJMQSTvv/xoIlvZDYwHEAAAAAAAAATJOZZ2aeu9aNVRHX6zFGuMxX1Y0qEa4Qqut+XAK73jtUgqpXgqpWdBXmqtFeoDrg6LxEHaur7XPq2l/Kj6wK4c7NVXJmrxhwmpcF8NSI27w0gFlDb5iXB3DX2FvmLQGstLCO4coSwJMQXJOlLYCZEFzm7QHcCcFpXjIO7waPAJsgxyCNEK0wwxDjMC9E2ph3h8BL0a7mXSHwYaS7eXWt2MG8smb5OKzs2tr1Ab/wg0SJmJ1/kQEAAAAAAIB/5AvwavdGuXFGpAAAAABJRU5ErkJggg==') center no-repeat;
+ border-left: 1px solid #00000040;
+
+ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAABO0lEQVR42u3bURKDIAwEUNiLoyfXC3Ss4mYTh81Xv4R90wqEad+2ra1caIuXAQxgAAMYwAAGMIABDGAAA0zVGOMYYxzqibPGxdtJ/PqsCM8aF4xJKBHY40IxwcrPngbY970rJ3r1zKu5hH4DVAhR4Sk/gWiEyPC0d0AUQnR46kuQjaAIT18FWAiq8CHL4FsEZfiws8Asgjp86GHoKUJG+PDT4F2ErPCttdYVd4OzS2F0eFk/YCaIIry0IfIkkCq8FOBuMGV4OUDFkgK83Qh9GoC1Ff4kAPsw9CmAf5scdWdJCnB3h5eJgOzw2QioED4TAVXCZyGgUvgMBFQLr0ZAxfBKBFQNr0JA5fAKBFQPH40gbYtXfDb1dljRzGCPS7sdVnZymON2/2Nk8TKAAQxgAAMYwAAGMIABDLBmnWRS+u5G6HkFAAAAAElFTkSuQmCC') center no-repeat;
background-size:30px;
cursor:pointer;
}
.modal-header .modal-close:hover {
- background-color: #e5e5e5;
border-radius: 0px 6px 0px 0px;
}
@@ -611,7 +621,6 @@ input:focus{
.modal-body {
position: relative;
- padding: 15px;
}
@media (min-width: 768px) {
diff --git a/client/index.html b/client/index.html
index b1657a1..4ec07ed 100644
--- a/client/index.html
+++ b/client/index.html
@@ -35,6 +35,8 @@
+
+