From b01e979d77199949ad5648f22561c20c5ea2ebef Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 3 Nov 2017 15:00:36 +0100 Subject: Improve timepicker design, align to datepicker Signed-off-by: Jan-Christoph Borchardt --- 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 1e5e2846723..42f64a42edc 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 d74840fe444..262cf283895 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 { -- cgit v1.2.3 From 153415c54b3cc966d32a1934409b87a079d051e7 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 3 Nov 2017 16:26:13 +0100 Subject: Add vertical separator between hours and minutes Signed-off-by: Jan-Christoph Borchardt --- core/css/styles.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/core/css/styles.scss b/core/css/styles.scss index 262cf283895..60a53af464b 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -1132,6 +1132,10 @@ code { color: nc-lighten($color-main-text, 33%); opacity: .8; } + + &.ui-timepicker-hours { + border-right: 1px solid $color-border; + } } } } -- cgit v1.2.3 From 4e6d828ae7d92a125c5e40d4f72e61163300a5dd Mon Sep 17 00:00:00 2001 From: "John Molakvoæ (skjnldsv)" Date: Mon, 6 Nov 2017 05:41:26 +0100 Subject: Bg variable for menu arrow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/css/header.scss b/core/css/header.scss index 42f64a42edc..1d4009a7ae6 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -224,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; } -- cgit v1.2.3 From 3e538443c526aa7768dbc230526aec3b4a9d2cc8 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Mon, 6 Nov 2017 12:44:17 +0100 Subject: Fix opacity of minutes in timepicker Signed-off-by: Jan-Christoph Borchardt --- core/css/styles.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/core/css/styles.scss b/core/css/styles.scss index 60a53af464b..8dde1c4b9c4 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -1130,7 +1130,6 @@ code { &.ui-timepicker-minutes:not(.ui-state-hover) { color: nc-lighten($color-main-text, 33%); - opacity: .8; } &.ui-timepicker-hours { -- cgit v1.2.3