/** * @copyright Copyright (c) 2016-2017, John Molakvoæ <skjnldsv@protonmail.com> * @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net> * @copyright Copyright (c) 2016, Morris Jobke <hey@morrisjobke.de> * @copyright Copyright (c) 2016, pgys <info@pexlab.space> * @copyright Copyright (c) 2016, Lukas Reschke <lukas@statuscode.ch> * @copyright Copyright (c) 2016, Stefan Weil <sw@weilnetz.de> * @copyright Copyright (c) 2016, Roeland Jago Douma <rullzer@owncloud.com> * @copyright Copyright (c) 2016, jowi <sjw@gmx.ch> * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de> * @copyright Copyright (c) 2015, Thomas Müller <thomas.mueller@tmit.eu> * @copyright Copyright (c) 2015, Vincent Petry <pvince81@owncloud.com> * @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt <hey@jancborchardt.net> * * @license GNU AGPL version 3 or any later version * */ /* BASE STYLING ---------------------------------------------------------- */ h2 { font-size: 20px; font-weight: 300; margin-bottom: 12px; line-height: 140%; } h3 { font-size: 15px; font-weight: 300; margin: 12px 0; } /* do not use italic typeface style, instead lighter color */ em { font-style: normal; opacity: .5; } dl { padding: 12px 0; } dt, dd { display: inline-block; padding: 12px; padding-left: 0; } dt { width: 130px; white-space: nowrap; text-align: right; } kbd { padding: 4px 10px; border: 1px solid #ccc; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); border-radius: $border-radius; display: inline-block; white-space: nowrap; } /* APP STYLING -------------------------------------------------------------- */ #app { height: 100%; width: 100%; * { box-sizing: border-box; } } /* APP-NAVIGATION ------------------------------------------------------------*/ /* Navigation: folder like structure */ #app-navigation { width: 250px; height: 100%; float: left; box-sizing: border-box; background-color: $color-main-background; padding-bottom: 44px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-right: 1px solid $color-border; display: flex; flex-direction: column; /* 'New' button */ .app-navigation-new { display: block; padding: 10px; button { display: inline-block; width: 100%; padding: 10px; padding-left: 34px; background-position: 10px center; text-align: left; margin: 0; } } li { position: relative; } > ul { position: relative; height: 100%; width: inherit; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; display: flex; flex-direction: column; > li { display: inline-flex; flex-wrap: wrap; order: 1; flex-shrink: 0; /* Pinned-to-bottom entries */ &.pinned { order: 2; &.first-pinned { margin-top: auto !important; } } > .app-navigation-entry-deleted { /* Ugly hack for overriding the main entry link */ padding-left: 44px !important; } > .app-navigation-entry-edit { /* Ugly hack for overriding the main entry link */ /* align the input correctly with the link text 44px-6px padding for the input */ padding-left: 38px !important; } &:focus, &:hover, &.active, a.selected { &, > a { opacity: 1; box-shadow: inset 4px 0 $color-primary; } } /* align loader */ &.icon-loading-small:after { left: 22px; top: 22px; } /* hide and animate deletion/collapse of subitems */ &.deleted, &.collapsible:not(.open) { > ul { opacity: 0; max-height: 0; /* bezier override the hide/slow effect due to the 2000 max-height */ transition: max-height 1000ms cubic-bezier(0, 1, 0, 1), opacity 250ms ease-in-out; } } /* Second level nesting for lists */ > ul { flex: 0 1 auto; width: 100%; transition: max-height 2000ms ease-in-out, opacity 250ms ease-in-out; max-height: 9999px; opacity: 1; position: relative; > li { display: inline-flex; flex-wrap: wrap; padding-left: 44px; &:focus, &:hover, &.active, a.selected { &, > a { opacity: 1; } } &.active { box-shadow: inset 4px 0 $color-primary; } /* align loader */ &.icon-loading-small:after { left: 22px; /* 44px / 2 */ } > .app-navigation-entry-deleted { /* margin to keep active indicator visible */ margin-left: 4px; padding-left: 84px; } > .app-navigation-entry-edit { /* margin to keep active indicator visible */ margin-left: 4px; /* align the input correctly with the link text 44px+44px-4px-6px padding for the input */ padding-left: 78px !important; } } } } /* Menu and submenu */ > li, > li > ul > li { position: relative; width: 100%; box-sizing: border-box; /* hide icons if loading */ &.icon-loading-small { > a, > .app-navigation-entry-bullet { /* hide icon or bullet if loading state*/ background: transparent !important; } } /* Main entry link */ > a { background-size: 16px 16px; background-position: 14px center; background-repeat: no-repeat; display: block; justify-content: space-between; line-height: 44px; min-height: 44px; padding: 0 12px 0 44px; overflow: hidden; box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis; color: $color-main-text; opacity: .57; flex: 1 1 0px; z-index: 100; /* above the bullet to allow click*/ /* TODO: forbid using img as icon in menu? */ &:first-child img { margin-right: 11px; width: 16px; height: 16px; margin-left: -30px; } /* counter can also be inside the link */ > .app-navigation-entry-utils { display: inline-block; float: right; .app-navigation-entry-utils-counter { padding-right: 0 !important; } } } /* Bullet icon */ > .app-navigation-entry-bullet { position: absolute; display: block; margin: 16px; width: 12px; height: 12px; border: none; border-radius: 50%; cursor: pointer; transition: background 100ms ease-in-out; + a { /* hide icon if bullet, can't have both */ background: transparent !important; } } /* popover fix the flex positionning of the li parent */ > .app-navigation-entry-menu { top: 44px; } /* show edit/undo field if editing/deleted */ &.editing .app-navigation-entry-edit { opacity: 1; z-index: 250; } &.deleted .app-navigation-entry-deleted { transform: translateX(0); z-index: 250; } } } &.hidden { display: none; } &.without-app-settings { padding-bottom: 0; } /** * Button styling for menu, edit and undo */ .app-navigation-entry-utils .app-navigation-entry-utils-menu-button > button, .app-navigation-entry-deleted .app-navigation-entry-deleted-button { border: 0; opacity: 0.5; background-color: transparent; background-repeat: no-repeat; background-position: center; &:hover, &:focus { background-color: transparent; opacity: 1; } } /** * Collapsible menus */ .collapsible { /* Fallback for old collapse button. TODO: to be removed. Leaved here for retro compatibility */ .collapse { opacity: 0; position: absolute; width: 44px; height: 44px; margin: 0; z-index: 110; } &:before { position: absolute; height: 44px; width: 44px; margin: 0; padding: 0; background: none; background-image: url('../img/actions/triangle-s.svg?v=1'); background-size: 16px; background-repeat: no-repeat; background-position: center; border: none; border-radius: 0; outline: none !important; box-shadow: none; content: ' '; opacity: 0; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); z-index: 50; } /* force padding on link no matter if 'a' has an icon class */ > a:first-child { padding-left: 44px; } &:before, > a { transition: background 100ms ease-in-out, transform 250ms ease-in-out, opacity 100ms ease-in-out; } &:hover > a, &:focus > a { background-position-x: -50px; } &:hover, &:focus { &:before { opacity: 1; } .app-navigation-entry-bullet { background: transparent !important; } } &.open { &:before { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } } } /** * App navigation utils, buttons and counters for drop down menu */ .app-navigation-entry-utils { flex: 0 1 auto; ul { display: flex !important; align-items: center; justify-content: flex-end; } li { width: 44px !important; height: 44px; } button { height: 100%; width: 100%; margin: 0; box-shadow: none; } .app-navigation-entry-utils-menu-button { /* Prevent bg img override if an icon class is set */ button:not([class^='icon-']):not([class*=' icon-']) { background-image: url('../img/actions/more.svg?v=1'); } &:hover button, &:focus button { background-color: transparent; opacity: 1; } } .app-navigation-entry-utils-counter { overflow: hidden; text-align: right; font-size: 9pt; line-height: 44px; padding: 0 12px; /* Same padding as all li > a in the app-navigation */ span.highlighted { padding: 2px 5px; border-radius: 10px; background-color: $color-primary; color: $color-primary-text; } } } /** * Editable entries */ .app-navigation-entry-edit { padding-left: 5px; padding-right: 5px; display: block; width: calc(100% - 1px); /* Avoid border overlapping */ transition: opacity 250ms ease-in-out; opacity: 0; position: absolute; background-color: $color-main-background; z-index: -1; form, div { display: inline-flex; width: 100%; } input { padding: 5px; margin-right: 0; height: 38px; &:hover { /* overlapp borders */ z-index: 1; } } input[type='text'] { width: 100%; min-width: 0; /* firefox hack: override auto */ border-bottom-right-radius: 0; border-top-right-radius: 0; } button, input:not([type='text']) { width: 36px; height: 38px; flex: 0 0 36px; &:not(:last-child) { border-radius: 0 !important; } &:not(:first-child) { margin-left: -1px; } &:last-child { border-bottom-left-radius: 0; border-top-left-radius: 0; } } } /** * Deleted entries with undo button */ .app-navigation-entry-deleted { display: inline-flex; padding-left: 44px; transform: translateX(250px); .app-navigation-entry-deleted-description { position: relative; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; flex: 1 1 0px; line-height: 44px; } .app-navigation-entry-deleted-button { margin: 0; height: 44px; width: 44px; line-height: 44px; &:hover, &:focus { opacity: 1; } } } /** * Common rules for animation of undo and edit entries */ .app-navigation-entry-edit, .app-navigation-entry-deleted { width: calc(100% - 1px); /* Avoid border overlapping */ transition: transform 250ms ease-in-out, opacity 250ms ease-in-out, z-index 250ms ease-in-out; position: absolute; left: 0; background-color: $color-main-background; box-sizing: border-box; } /** * drag and drop */ .drag-and-drop { -webkit-transition: padding-bottom 500ms ease 0s; transition: padding-bottom 500ms ease 0s; padding-bottom: 40px; } .error { color: $color-error; } .app-navigation-separator { border-bottom: 1px solid nc-lighten($color-main-text, 86%); } .app-navigation-entry-utils ul, .app-navigation-entry-menu ul { list-style-type: none; } } /* APP-CONTENT ---------------------------------------------------------------*/ /* Part where the content will be loaded into */ #app-content { position: relative; height: 100%; overflow-y: auto; /* no top border for first settings item */ > .section:first-child { border-top: none; } &.with-app-sidebar { margin-right: 27%; } } #app-content-wrapper { min-width: 100%; min-height: 100%; } /* APP-SIDEBAR ----------------------------------------------------------------*/ /* Sidebar: a sidebar to be used within #app-content have it as first element within app-content in order to shrink other sibling containers properly. Compare Files app for example. */ #app-sidebar { position: fixed; top: 50px; right: 0; left: auto; bottom: 0; width: 27%; min-width: 300px; display: block; background: $color-main-background; border-left: 1px solid $color-border; -webkit-transition: margin-right 300ms; transition: margin-right 300ms; overflow-x: hidden; overflow-y: auto; visibility: visible; z-index: 500; &.disappear { visibility: hidden; } } /* APP-SETTINGS ---------------------------------------------------------------*/ /* settings area */ #app-settings { position: fixed; width: 250px; /* change to 100% when layout positions are absolute */ bottom: 0; z-index: 140; &.open, &.opened { #app-settings-content { display: block; } } } #app-settings-content { display: none; padding: 10px; background-color: $color-main-background; /* restrict height of settings and make scrollable */ max-height: 300px; overflow-y: auto; border-right: 1px solid $color-border; width: 250px; box-sizing: border-box; /* display input fields at full width */ input[type='text'] { width: 93%; } .info-text { padding: 5px 0 7px 22px; color: rgba($color-main-text, .4); } input { &[type='checkbox'], &[type='radio'] { &.radio, &.checkbox { + label { display: inline-block; width: 100%; padding: 5px 0; } } } } } #app-settings-header { border-right: 1px solid $color-border; width: 250px; box-sizing: border-box; background-color: $color-main-background; } .settings-button { display: block; height: 44px; width: 100%; padding: 0; margin: 0; background-color: $color-main-background; background-image: url('../img/actions/settings-dark.svg?v=1'); background-position: 14px center; background-repeat: no-repeat; box-shadow: none; border: 0; border-radius: 0; text-align: left; padding-left: 42px; font-weight: 400; /* like app-navigation a */ color: $color-main-text; opacity: .57; &.opened, &:hover { background-color: $color-main-background; opacity: 1; box-shadow: inset 2px 0 $color-primary; } } /* GENERAL SECTION ---------------------------------------------------------- */ .section { display: block; padding: 30px; color: nc-lighten($color-main-text, 33%); margin-bottom: 24px; &.hidden { display: none !important; } /* slight position correction of checkboxes and radio buttons */ input { &[type='checkbox'], &[type='radio'] { vertical-align: -2px; margin-right: 4px; } } } .sub-section { position: relative; margin-top: 10px; margin-left: 27px; margin-bottom: 10px; } .appear { opacity: 1; -webkit-transition: opacity 500ms ease 0s; -moz-transition: opacity 500ms ease 0s; -ms-transition: opacity 500ms ease 0s; -o-transition: opacity 500ms ease 0s; transition: opacity 500ms ease 0s; &.transparent { opacity: 0; } } /* TABS --------------------------------------------------------------------- */ .tabHeaders { display: inline-block; margin: 15px; .tabHeader { float: left; padding: 5px; cursor: pointer; color: nc-lighten($color-main-text, 33%); margin-bottom: 1px; a { color: nc-lighten($color-main-text, 33%); margin-bottom: 1px; } &.selected { font-weight: 600; border-bottom: 1px solid nc-lighten($color-main-text, 20%); } &:hover { border-bottom: 1px solid nc-lighten($color-main-text, 20%); } &.selected, &:hover { margin-bottom: 0px; color: $color-main-text; a { margin-bottom: 0px; color: $color-main-text; } } } } .tabsContainer { clear: left; .tab { padding: 0 15px 15px; } } /* POPOVER MENU ------------------------------------------------------------- */ $popoveritem-height: 38px; $popovericon-size: 16px; .ie, .edge { .bubble, .bubble:after, .popovermenu, .popovermenu:after, #app-navigation .app-navigation-entry-menu, #app-navigation .app-navigation-entry-menu:after { border: 1px solid $color-border; } } .bubble, .app-navigation-entry-menu, .popovermenu { position: absolute; background-color: $color-main-background; color: $color-main-text; border-radius: $border-radius; z-index: 110; margin: 5px; margin-top: -5px; right: 0; filter: drop-shadow(0 1px 3px $color-box-shadow); display: none; &:after { bottom: 100%; /* Min-width of popover is 36px and arrow width is 20px wich leaves us 8px right and 8px left */ right: 8px; /* change this to adjust the arrow position */ border: solid transparent; content: ' '; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: $color-main-background; border-width: 10px; } /* Center the popover */ &.menu-center { transform: translateX(50%); right: 50%; margin-right: 0; &:after { right: 50%; transform: translateX(50%); } } /* Align the popover to the left */ &.menu-left { right: auto; left: 0; margin-right: 0; &:after { left: 6px; right: auto; } } &.open { display: block; } ul { /* Overwrite #app-navigation > ul ul */ display: flex !important; flex-direction: column; } li { display: flex; flex: 0 0 auto; > button, > a, > .menuitem { cursor: pointer; line-height: $popoveritem-height; border: 0; background-color: transparent; display: flex; align-items: flex-start; height: auto; margin: 0; font-weight: 300; box-shadow: none; width: 100%; color: $color-main-text; /* Override the app-navigation li opacity */ opacity: .7 !important; span[class^='icon-'], span[class*=' icon-'], &[class^='icon-'], &[class*=' icon-'] { min-width: 0; /* Overwrite icons*/ min-height: 0; background-position: #{($popoveritem-height - $popovericon-size) / 2} center; background-size: $popovericon-size; } span[class^='icon-'], span[class*=' icon-'] { /* Keep padding to define the width to assure correct position of a possible text */ padding: #{$popoveritem-height / 2} 0 #{$popoveritem-height / 2} $popoveritem-height; } // If no icons set, force left margin to align &:not([class^='icon-']):not([class*='icon-']) { > span, > input, > form { &:not([class^='icon-']):not([class*='icon-']):first-child { margin-left: $popoveritem-height; } } } &[class^='icon-'], &[class*=' icon-'] { padding: 0 #{($popoveritem-height - $popovericon-size) / 2} 0 $popoveritem-height !important; } &:hover, &:focus, &.active { opacity: 1 !important; } /* prevent .action class to break the design */ &.action { padding: inherit !important; } > span { cursor: pointer; white-space: nowrap; } > p { width: 150px; line-height: 1.6em; padding: 8px 0; } > select { margin: 0; margin-left: 6px; } /* Add padding if contains icon+text */ &:not(:empty) { padding-right: 10px !important; } /* DEPRECATED! old img in popover fallback * TODO: to remove */ > img { width: $popovericon-size; padding: #{($popoveritem-height - $popovericon-size) / 2}; } /* checkbox/radio fixes */ > input.radio + label, > input.checkbox + label { padding: 0 !important; width: 100%; } > input.checkbox + label::before { margin: -2px 13px 0; } > input.radio + label::before { margin: -2px 12px 0; } > input:not([type=radio]):not([type=checkbox]):not([type=image]) { width: 150px; } form { display: flex; flex: 1 1 auto; /* put a small space between text and form if there is an element before */ &:not(:first-child) { margin-left: 5px; } } /* no margin if hidden span before */ > span.hidden + form, > span[style*='display:none'] + form { margin-left: 0; } /* Inputs inside popover supports text, submit & reset */ input { min-width: #{$popoveritem-height - 4px}; /* twice the margin */ max-height: #{$popoveritem-height - 4px}; /* twice the margin */ margin: 2px 0; flex: 1 1 auto; &:not(:first-child) { margin-left: 5px; } } } /* css hack, only first not hidden*/ &:not(.hidden):not([style*='display:none']) { &:first-of-type { > button, > a, > .menuitem { > form, > input { margin-top: 10px; } } } &:last-of-type { > button, > a, > .menuitem { > form, > input { margin-bottom: 10px; } } } } > button { padding: 0; span { opacity: 1; } } } } /* CONTENT WRAPPER --------------------------------------------------------- */ #app-content-wrapper { display: flex; position: relative; align-items: start; height: 100%; width: 100%; .app-content-list, .app-content-detail { min-height: 100%; max-height: 100%; overflow-x: hidden; overflow-y: auto; } } /* CONTENT LIST ------------------------------------------------------------- */ .app-content-list { width: 300px; border-right: 1px solid nc-darken($color-main-background, 8%); display: flex; flex-direction: column; transition: transform 250ms ease-in-out; /* Default item */ .app-content-list-item { position: relative; height: 68px; border-top: 1px solid nc-darken($color-main-background, 8%); cursor: pointer; padding: 10px 7px; display: flex; flex-wrap: wrap; align-items: center; flex: 0 0 auto; /* Icon fixes */ &, > .app-content-list-item-menu { > [class^='icon-'], > [class*=' icon-'] { order: 4; width: 24px; height: 24px; margin: -10px; padding: 22px; opacity: .3; cursor: pointer; &:hover, &:focus { opacity: .7; } &[class^='icon-star'], &[class*=' icon-star'] { opacity: .7; &:hover, &:focus { opacity: 1 ; } } &.icon-starred { opacity: 1 ; } } } &:hover, &:focus, &.active { background-color: nc-darken($color-main-background, 6%); } .app-content-list-item-checkbox.checkbox + label, .app-content-list-item-star { position: absolute; height: 40px; width: 40px; display: flex; z-index: 50; + .app-content-list-item-icon { opacity: .7; } } .app-content-list-item-checkbox.checkbox + label { top: 14px; left: 7px; &::before { margin: 0; } /* Hide the star, priority to the checkbox */ ~ .app-content-list-item-star { display: none; } } .app-content-list-item-star { top: 10px; left: 32px; background-size: 16px; height: 20px; width: 20px; margin: 0; padding: 0; } .app-content-list-item-icon { position: absolute; display: inline-block; height: 40px; width: 40px; line-height: 40px; border-radius: 50%; vertical-align: middle; margin-right: 10px; color: #fff; text-align: center; font-size: 1.5em; text-transform: capitalize; object-fit: cover; user-select: none; cursor: pointer; top: 50%; margin-top: -20px; } .app-content-list-item-line-one, .app-content-list-item-line-two { display: block; padding-left: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; order: 1; flex: 1 1 0px; padding-right: 10px; cursor: pointer; } .app-content-list-item-line-two { opacity: .5; order: 3; flex: 1 0; flex-basis: calc(100% - 24px); } .app-content-list-item-details { order: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; opacity: .5; font-size: 80%; user-select: none; } .app-content-list-item-menu { order: 4; position: relative; .popovermenu { margin: 0; right: -5px; } } } } /* CONTENT ------------------------------------------------------------------ */ .app-content-detail { /* grow full width */ flex-grow: 1; #app-navigation-toggle-back { display: none; } } /* MOBILE ------------------------------------------------------------------- */ /* Mobile width < 768px */ @media only screen and (max-width: 768px) { /* full width for message list on mobile */ .app-content-list { width: 100%; background: $color-main-background; position: relative; z-index: 100; } /* overlay message detail on top of message list */ .app-content-detail { background: $color-main-background; width: 100%; left: 0; height: 100%; top: 0; box-shadow: 0 0 100px rgba(100, 100, 100, .9); position: absolute; } /* Show app details page */ #app-content.showdetails { #app-navigation-toggle { transform: translateX(-44px); } #app-navigation-toggle-back { position: fixed; display: inline-block !important; top: 45px; left: 0; width: 44px; height: 44px; z-index: 149; background-color: rgba(255, 255, 255, .7); cursor: pointer; opacity: .6; transform: rotate(90deg); } .app-content-list { transform: translateX(-100%); } } /* end of media query */ }