diff options
| -rw-r--r-- | appinfo/info.xml | 2 | ||||
| -rw-r--r-- | css/src/nc12.scss | 262 | ||||
| -rw-r--r-- | img/arrow-left.svg | 1 | ||||
| -rw-r--r-- | img/arrow-right.svg | 1 |
4 files changed, 265 insertions, 1 deletions
diff --git a/appinfo/info.xml b/appinfo/info.xml index 634dde91..27214e2b 100644 --- a/appinfo/info.xml +++ b/appinfo/info.xml @@ -22,6 +22,6 @@ <repository type="git">https://github.com/nextcloud/tasks.git</repository> <dependencies> <owncloud min-version="0" max-version="0"/> - <nextcloud min-version="13" max-version="13"/> + <nextcloud min-version="12" max-version="13"/> </dependencies> </info> diff --git a/css/src/nc12.scss b/css/src/nc12.scss new file mode 100644 index 00000000..9dbb8809 --- /dev/null +++ b/css/src/nc12.scss @@ -0,0 +1,262 @@ +#app-navigation { + & > ul { + display: flex; + flex-direction: column; + + & > li { + display: inline-flex; + flex-wrap: wrap; + order: 1; + flex-shrink: 0; + + & > a, + & > ul > li > a { + flex: 1 1 0; + z-index: 100; + } + + & .app-navigation-entry-bullet, + & > ul > li > .app-navigation-entry-bullet { + position: absolute; + display: block; + margin: 16px; + width: 12px; + height: 12px; + border: none; + border-radius: 50%; + cursor: pointer; + } + + & .app-navigation-entry-menu, + & > ul > li > .app-navigation-entry-menu { + top: 44px; + } + + & > a, + & > .app-navigation-entry-deleted { + padding-left: 44px !important; + } + } + } + + & .app-navigation-entry-utils { + flex: 0 1 auto; + position: unset; + } + + & .active.with-menu > a, + & .with-counter > a { + padding-right: 12px; + } + + li .app-navigation-entry-menu > ul > li > a { + line-height: 36px; + height: 36px; + min-height: 36px; + display: flex; + } + + .app-navigation-entry-edit { + height: auto; + + form { + display: inline-flex; + width: 100%; + } + } +} + +.bubble, +.app-navigation-entry-menu, +.popovermenu { + box-shadow: unset; + filter: drop-shadow(0 1px 3px rgba(179, 179, 179, .75)); +} + +$border-radius: 3px; + +/* ---- jQuery UI datepicker ---- */ +.ui-widget.ui-datepicker { + margin-top: 10px; + padding: 4px 8px; + width: auto; + border-radius: $border-radius; + border: none; + background: unset; + background-color: $color-main-background; + filter: drop-shadow(0 1px 3px rgba(179, 179, 179, .75)); + + .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-datepicker-title { + line-height: 1; + font-weight: 300; + } + + .ui-icon { + opacity: .5; + + &.ui-icon-circle-triangle-e { + background: url('../img/arrow-right.svg') center center no-repeat; + } + + &.ui-icon-circle-triangle-w { + background: url('../img/arrow-left.svg') center center no-repeat; + } + } + + .ui-state-hover .ui-icon { + opacity: 1; + } + } + + .ui-datepicker-calendar { + 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: 6px; + line-height: 12px; + } + + &.ui-datepicker-today a:not(.ui-state-hover) { + background-color: nc-lighten($color-main-text, 86%); + } + + &.ui-datepicker-current-day a.ui-state-active, + .ui-state-hover, + .ui-state-focus { + background-color: $color-primary; + color: $color-primary-text; + font-weight: bold; + } + + &.ui-datepicker-week-end :not(.ui-state-hover), + .ui-priority-secondary:not(.ui-state-hover) { + color: nc-lighten($color-main-text, 33%); + opacity: .8; + } + } + } +} + +.ui-datepicker-prev, +.ui-datepicker-next { + border: nc-darken($color-main-background, 14%); + background: $color-main-background; +} + +/* ---- jQuery UI timepicker ---- */ +.ui-widget.ui-timepicker { + margin-top: 10px !important; + width: auto !important; + border-radius: $border-radius; + filter: drop-shadow(0 1px 3px rgba(179, 179, 179, .75)); + + .ui-widget-content { + border: none !important; + background: unset; + background-color: $color-main-background; + } + + .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; + } + } + } +} + +.ui-datepicker::after, +.ui-timepicker.ui-widget::after { + left: 47%; + bottom: 100%; + border: solid transparent; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: rgba(0, 0, 0, 0); + border-bottom-color: #fff; + border-width: 9px; + margin-left: -9px; +} diff --git a/img/arrow-left.svg b/img/arrow-left.svg new file mode 100644 index 00000000..34b2fda2 --- /dev/null +++ b/img/arrow-left.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewbox="0 0 16 16"><path d="m5.5 8 6 6v1l-7-7 7-7v1z"/></svg> diff --git a/img/arrow-right.svg b/img/arrow-right.svg new file mode 100644 index 00000000..102b9cf6 --- /dev/null +++ b/img/arrow-right.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewbox="0 0 16 16"><path d="m10.5 8-6-6v-1l7 7-7 7v-1z"/></svg> |
