From b01e979d77199949ad5648f22561c20c5ea2ebef Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 3 Nov 2017 15:00:36 +0100
Subject: [PATCH] Improve timepicker design, align to datepicker

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 core/css/header.scss |  3 +-
 core/css/styles.scss | 66 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/core/css/header.scss b/core/css/header.scss
index 1e5e284672..42f64a42ed 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -206,7 +206,8 @@ nav {
 }
 
 #navigation,
-.ui-datepicker {
+.ui-datepicker,
+.ui-timepicker.ui-widget {
 	position: relative;
 	left: -100%;
 	width: 160px;
diff --git a/core/css/styles.scss b/core/css/styles.scss
index d74840fe44..262cf28389 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -1070,6 +1070,72 @@ code {
 	background: $color-main-background;
 }
 
+
+/* ---- jQuery UI timepicker ---- */
+.ui-widget.ui-timepicker {
+	margin-top: 10px !important;
+	width: auto !important;
+	border-radius: $border-radius;
+
+	.ui-widget-content {
+		border: none !important;
+	}
+
+	.ui-state-default,
+	.ui-widget-content .ui-state-default,
+	.ui-widget-header .ui-state-default {
+		border: 1px solid transparent;
+		background: inherit;
+	}
+	.ui-widget-header {
+		padding: 7px;
+		font-size: 13px;
+		border:	none;
+		background-color: $color-main-background;
+		color: $color-main-text;
+
+		.ui-timepicker-title {
+			line-height: 1;
+			font-weight: 300;
+		}
+	}
+	.ui-timepicker-table {
+		th {
+			font-weight: normal;
+			color: nc-lighten($color-main-text, 33%);
+			opacity: .8;
+		}
+		tr:hover {
+			background-color: inherit;
+		}
+		td {
+			> * {
+				border-radius: 50%;
+				text-align: center;
+				font-weight: normal;
+				color: $color-main-text;
+				padding: 8px 7px;
+				font-size: .9em;
+				line-height: 12px;
+			}
+
+			&.ui-timepicker-hour-cell a.ui-state-active,
+			&.ui-timepicker-minute-cell a.ui-state-active,
+			.ui-state-hover,
+			.ui-state-focus {
+				background-color: $color-primary;
+				color: $color-primary-text;
+				font-weight: bold;
+			}
+
+			&.ui-timepicker-minutes:not(.ui-state-hover) {
+				color: nc-lighten($color-main-text, 33%);
+				opacity: .8;
+			}
+		}
+	}
+}
+
 /* ---- DIALOGS ---- */
 
 #oc-dialog-filepicker-content {