Merge pull request #7054 from nextcloud/timepicker-design

Improve timepicker design, align to datepicker

core/css/header.scss

@@ -206,7 +206,8 @@ nav {
 }
 
 #navigation,
-.ui-datepicker {
+.ui-datepicker,
+.ui-timepicker.ui-widget {
 	position: relative;
 	left: -100%;
 	width: 160px;
@@ -223,7 +224,7 @@ nav {
 		position: absolute;
 		pointer-events: none;
 		border-color: rgba(0, 0, 0, 0);
-		border-bottom-color: rgba(255, 255, 255, .97);
+		border-bottom-color: $color-main-background;
 		border-width: 9px;
 		margin-left: -9px;
 	}

core/css/styles.scss

@@ -1070,6 +1070,75 @@ 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%);
+			}
+
+			&.ui-timepicker-hours {
+				border-right: 1px solid $color-border;
+			}
+		}
+	}
+}
+
 /* ---- DIALOGS ---- */
 
 #oc-dialog-filepicker-content {