.app-files .shareTabView { min-height: 100px; } .share-autocomplete-item { display: flex; &.merged { margin-left: 32px; } .autocomplete-item-text { margin-left: 10px; margin-right: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 32px; vertical-align: middle; flex-grow: 1; .ui-state-highlight { border: none; margin: 0; } } &.with-description { .autocomplete-item-text { line-height: 100%; } } .autocomplete-item-details { display: block; line-height: 130%; font-size: 90%; opacity: 0.7; } .icon { opacity: .7; margin-right: 7px; } } .shareTabView { .oneline { white-space: nowrap; position: relative; } .shareWithLoading { padding-left: 10px; right: 35px; top: 3px; } .shareWithConfirm { position: absolute; right: 2px; top: 6px; padding: 14px; opacity: 0.5; } .shareWithField:focus ~ .shareWithConfirm { opacity: 1; } .linkMore { position: absolute; right: -7px; top: -4px; padding: 14px; } .popovermenu { .linkPassMenu { .share-pass-submit { width: auto !important; } .icon-loading-small { background-color: var(--color-main-background); position: absolute; right: 8px; margin: 3px; padding: 10px; width: 32px; height: 32px; z-index: 10; } } .datepicker { margin-left: 35px; } .share-add { input.share-note-delete { border: none; background-color: transparent; width: 44px !important; padding: 0; flex: 0 0 44px; margin-left: auto; &.hidden { display: none; } } } // note .share-note-form { span.icon-note { position: relative; } textarea.share-note { margin: 0; width: 200px; min-height: 70px; resize: none; + input.share-note-submit { position: absolute; width: 44px !important; height: 44px; bottom: 0px; right: 10px; margin: 0; background-color: transparent; border: none; opacity: .7; &:hover, &:focus, &:active { opacity: 1; } } } // fix for popover link share &.share-note-link { margin-bottom: 10px; } } /* Border above last entry '+ Add another share' to separate it from current link settings */ .new-share { border-top: 1px solid var(--color-border); } } .linkPass .icon-loading-small { margin-right: 0px; } .icon { background-size: 16px 16px; } .shareWithList .icon-loading-small:not(.hidden) + span, .linkShareView .icon-loading-small:not(.hidden) + input + label:before { /* Hide if loader is visible */ display: none !important; } input { &[type='checkbox'] { margin: 0 3px 0 8px; vertical-align: middle; } &[type='text'] { &.shareWithField, &.emailField { width: 100%; box-sizing: border-box; padding-right: 32px; text-overflow: ellipsis; } } &[type='text'].linkText &[type='password'].linkPassText, &[type='password'].passwordField { width: 180px !important; } } form { font-size: 100%; margin-left: 0; margin-right: 0; } // share note on the sidebar .share-note { border-radius: var(--border-radius); margin-bottom: 10px; margin-left: 37px; } } // Sharing tab users list .shareWithList { list-style-type: none; display: flex; flex-direction: column; > li { height: 44px; white-space: normal; display: inline-flex; align-items: center; position: relative; .avatar { width: 32px; height: 32px; background-color: var(--color-primary); } } .unshare img { vertical-align: text-bottom; /* properly align icons */ } .sharingOptionsGroup { margin-left: auto; display: flex; align-items: center; white-space: nowrap; // icons > .icon:not(.hidden), .share-menu > .icon:not(.hidden) { padding: 14px; height: 44px; width: 44px; opacity: .5; display: block; cursor: pointer; &:hover, &:focus, &:active { opacity: .7;; } } // more menu > .share-menu { position: relative; display: block; } } .username { padding: 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } .ui-autocomplete { /* limit dropdown height to 6 1/2 entries */ max-height: calc(36px * 6.5); overflow-y: auto; overflow-x: hidden; z-index: 1550 !important; } .notCreatable { padding-left: 12px; padding-top: 12px; color: var(--color-text-lighter); } .contactsmenu-popover { left: -6px; right: auto; padding: 3px 6px; top: 100%; margin-top: 0; li.hidden { display: none !important; } &:after { left: 8px; right: auto; } } .reshare, #link label, #expiration label { display: inline-flex; align-items: center; .avatar { margin-right: 5px; } } .resharerInfoView.subView { position: relative; }