mirror of https://github.com/nextcloud/contacts
split up our css code into multiple files
This commit is contained in:
Hendrik Leppelsack
parent
7f0d20733b
commit
6fd6da3e9d
|
|
@ -0,0 +1,127 @@
|
|||
/* app content list & detail view */
|
||||
/* TO BE MOVED TO CORE apps.css ONCE STANDARDIZED ACROSS APPS */
|
||||
/* DO NOT MAKE ANY CHANGES SPECIFIC TO CONTACTS HERE! */
|
||||
|
||||
.app-content-list {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid nc-darken($color-main-background, 8%);
|
||||
}
|
||||
|
||||
.app-content-detail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.app-content-list-button {
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.app-content-list-item {
|
||||
position: relative;
|
||||
height: 68px;
|
||||
border-top: 1px solid nc-darken($color-main-background, 8%);
|
||||
cursor: pointer;
|
||||
}
|
||||
.app-content-list-item:hover,
|
||||
.app-content-list-item:focus,
|
||||
.app-content-list-item.active {
|
||||
background-color: nc-darken($color-main-background, 6%);
|
||||
}
|
||||
.app-content-list-item-link {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app-content-list-item-icon {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
left: 6px;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
.app-content-list-item-star {
|
||||
position: absolute;
|
||||
display: none; /* change to inline-block when we implement it */
|
||||
left: 16px;
|
||||
top: 28px;
|
||||
padding: 20px;
|
||||
background-size: 16px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.app-content-list-item-line-one,
|
||||
.app-content-list-item-line-two {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
padding-left: 50px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.app-content-list-item-line-one.no-line-two {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
.app-content-list-item-line-two {
|
||||
top: 25px;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
#app-navigation-toggle-back {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
#app-navigation-toggle.showdetails {
|
||||
transform: translate(-50px, 0);
|
||||
}
|
||||
|
||||
#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);
|
||||
}
|
||||
|
||||
/* end of media query */
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
contactlist .tooltip {
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.app-content-list-item-failed {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
margin-top: -15px;
|
||||
opacity: 0.2;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.app-content-list-item-failed:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.app-content-list-item-failed ~ .app-content-list-item-line-one,
|
||||
.app-content-list-item-failed ~ .app-content-list-item-line-two {
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.contact__icon {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
text-transform: capitalize;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.icon-group {
|
||||
background-image: url('../img/group.svg');
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.contacts-list:not(.mobile-show) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,377 @@
|
|||
.contact-details-wrapper {
|
||||
position: relative;
|
||||
background: $color-main-background;
|
||||
}
|
||||
|
||||
.wrapper-show {
|
||||
z-index: 201;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.wrapper-show:not(.mobile-show) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.contactdetails__header {
|
||||
height: 100px;
|
||||
padding-left: 20px;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contactdetails__header #details-contact-infos {
|
||||
width: 80%;
|
||||
margin: 2px 6px 0px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.contactdetails__header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.contactdetails__header #details-org-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.contactdetails__header input[type=text]:active {
|
||||
background: transparent !important; /* remove :active effect */
|
||||
}
|
||||
|
||||
.contactdetails__header .contactdetails__name,
|
||||
.contactdetails__header .contactdetails__org,
|
||||
.contactdetails__header .contactdetails__title {
|
||||
font-size: inherit;
|
||||
/* Override focus, active & hover! */
|
||||
color: #fff !important; /* No vars used on purpose since we use custom BGs */
|
||||
background: transparent;
|
||||
border: none;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 4px 5px;
|
||||
}
|
||||
|
||||
.contactdetails__header .contactdetails__org,
|
||||
.contactdetails__header .contactdetails__title {
|
||||
max-width: 50%;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.contactdetails__header .contactdetails__name {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contactdetails__header #details-actions {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.contactdetails__header #contact-failed-save {
|
||||
animation: pulse 1.5s infinite;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* fix placeholder color */
|
||||
.contactdetails__header .contactdetails__name::-webkit-input-placeholder,
|
||||
.contactdetails__header .contactdetails__org::-webkit-input-placeholder,
|
||||
.contactdetails__header .contactdetails__title::-webkit-input-placeholder { /* WebKit, Blink, Edge */
|
||||
color: #fff; /* No vars used on purpose since we use custom BGs */
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.contactdetails__header .contactdetails__name::-moz-placeholder,
|
||||
.contactdetails__header .contactdetails__org::-moz-placeholder,
|
||||
.contactdetails__header .contactdetails__title::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
color: #fff; /* No vars used on purpose since we use custom BGs */
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.contactdetails__header .contactdetails__name:-ms-input-placeholder,
|
||||
.contactdetails__header .contactdetails__org:-ms-input-placeholder,
|
||||
.contactdetails__header .contactdetails__title:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: #fff; /* No vars used on purpose since we use custom BGs */
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.contactdetails__header .contactdetails__name:placeholder-shown,
|
||||
.contactdetails__header .contactdetails__org:placeholder-shown,
|
||||
.contactdetails__header .contactdetails__title:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
|
||||
color: #fff; /* No vars used on purpose since we use custom BGs */
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.contactdetails__header #details-actions a,
|
||||
.contactdetails__header #details-actions button {
|
||||
padding: 15px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
opacity: .5;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.contactdetails__header #details-actions a:hover,
|
||||
.contactdetails__header #details-actions button:hover,
|
||||
.contactdetails__header #details-actions a:focus,
|
||||
.contactdetails__header #details-actions button:focus {
|
||||
opacity: .7
|
||||
}
|
||||
|
||||
avatar {
|
||||
position: relative;
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.contactdetails__logo {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
object-fit: cover;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatar-options {
|
||||
top: 0;
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-options > [class^="icon-"] {
|
||||
display: none;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.avatar-options:hover > [class^="icon-"] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.avatar-options > [class^="icon-"]:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
avatar.avatar--missing .avatar-options {
|
||||
display: flex;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
avatar:not(.maximized).avatar--missing .avatar-options .icon-upload-white {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
avatar.maximized {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 0;
|
||||
padding: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 200;
|
||||
padding-top: 65px; /* Nextcloud header */
|
||||
}
|
||||
|
||||
avatar.maximized img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
max-height: calc(100% - 40px);
|
||||
max-width: 100%;
|
||||
align-self: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
avatar.maximized .avatar-options {
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: calc(100% - 40px);
|
||||
left: 0;
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
avatar.maximized .avatar-options > [class^="icon-"] {
|
||||
min-width: 25%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contactdetails__header + section {
|
||||
padding: 20px 20px 100px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1450px) {
|
||||
section {
|
||||
-webkit-column-count: 2; /* Chrome, Safari, Opera */
|
||||
-moz-column-count: 2; /* Firefox */
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* General details item styles */
|
||||
contactdetails {
|
||||
select, button, input, textarea {
|
||||
&:disabled {
|
||||
background-color: transparent !important;
|
||||
border-color: transparent !important;
|
||||
opacity: 1 !important;
|
||||
color: #545454 !important;
|
||||
}
|
||||
}
|
||||
detailsitem > select:disabled {
|
||||
background-image: none !important;
|
||||
&:first-child {
|
||||
opacity: 0.5 !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
detailsitem {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
width: 380px;
|
||||
|
||||
}
|
||||
|
||||
detailsitem input[type="tel"],
|
||||
detailsitem input[type="email"],
|
||||
detailsitem input[type="text"],
|
||||
detailsitem input[type="url"],
|
||||
detailsitem textarea,
|
||||
.select-addressbook select,
|
||||
.add-field {
|
||||
width: 245px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.add-field {
|
||||
margin-left: 106px;
|
||||
}
|
||||
|
||||
detailsitem select {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
detailsitem label,
|
||||
.select-addressbook label {
|
||||
margin: 3px 3px 3px 0;
|
||||
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
padding: 7px 0px;
|
||||
text-align: right;
|
||||
opacity: .5;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
detailsitem .icon-delete {
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
padding: 16px 10px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
detailsitem .item-action {
|
||||
position: absolute;
|
||||
padding: 8px 5px;
|
||||
opacity: .5;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
detailsitem .item-action ~ input {
|
||||
padding-right: 30px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
detailsitem .item-action i {
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
detailsitem.details-item-adr .icon-delete, detailsitem.details-item-n .icon-delete {
|
||||
vertical-align: middle;
|
||||
left: 251px;
|
||||
}
|
||||
|
||||
detailsitem.details-item-adr {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
detailsitem.details-item-n {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
detailsitem.details-item-note label {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Failed props */
|
||||
detailsitem.failed {
|
||||
box-shadow: inset 2px 0 $color-error;
|
||||
}
|
||||
|
||||
avatar .icon-error {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
avatar:not(.maximized) .icon-error + img {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Prevent delete for last adr/mail/tel item */
|
||||
.last-details > detailsitem.details-item-adr .icon-delete,
|
||||
.last-details > detailsitem.details-item-email .icon-delete,
|
||||
.last-details > detailsitem.details-item-tel .icon-delete {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* SELECT2 styling */
|
||||
detailsitem .select2-container {
|
||||
width: 245px;
|
||||
}
|
||||
/* Fix for #81 */
|
||||
.select2-container-multi .select2-choices .select2-search-choice {
|
||||
padding-right: 20px;
|
||||
}
|
||||
.select2-container.select2-container-multi .select2-choices span {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close {
|
||||
display: block !important;
|
||||
right: 4px;
|
||||
left: auto;
|
||||
top: 7px
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
#app-navigation {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#app-navigation .utils .action span {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
#app-navigation .utils .action {
|
||||
opacity: .5;
|
||||
}
|
||||
#app-navigation .utils .action:hover,
|
||||
#app-navigation .utils .action:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#app-navigation > ul {
|
||||
height: calc(100% - 68px);
|
||||
}
|
||||
|
||||
/* Contacts List */
|
||||
#new-contact-button {
|
||||
margin: 14px auto; /* to have the same height than a contact*/
|
||||
width: calc(100% - 20px) !important;
|
||||
text-align: left;
|
||||
padding-left: 34px;
|
||||
background-position: 10px center;
|
||||
}
|
||||
|
|
@ -0,0 +1,284 @@
|
|||
.settings-section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.addressBookList form {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul.addressBookList > li {
|
||||
padding: 6px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
ul.addressBookList > li {
|
||||
padding: 6px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
ul.addressBook-share-list {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
ul.addressBook-share-list li {
|
||||
padding: 0 5px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ul.addressBook-share-list li .icon {
|
||||
margin-right: 5px;
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
ul.addressBook-share-list li .utils {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* override core apps css */
|
||||
#app-navigation ul.addressBookList > li span.utils {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
ul.addressBookList li .utils .popovermenu {
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
#app-navigation ul.addressBookList li .utils .popovermenu li > button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul.addressBookList li .action > span {
|
||||
display: inline-block;
|
||||
opacity: 0.5;
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
ul.addressBookList li .action > a {
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
addressBookList input[type='submit'].inline-button,
|
||||
addressBookList input[type='button'].inline-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 6px 15px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
opacity: .5;
|
||||
margin-right: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul.addressBookList li[addressbook] > span.addressBookName {
|
||||
width: calc(100% - 52px); /* -actions width */
|
||||
overflow: hidden;
|
||||
white-space:nowrap;
|
||||
text-overflow: ellipsis;
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
ul.addressBookList li[addressbook] > .addressBookShares {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
li.addressBook-share-item span.shareeIdentifier,
|
||||
li.calendar-share-item span.shareeIdentifier {
|
||||
width: 100%;
|
||||
overflow:hidden;
|
||||
white-space:nowrap;
|
||||
text-overflow:ellipsis;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
div.addressBookShares ul.dropdown-menu {
|
||||
border: 1px solid nc-darken($color-main-background, 18%);
|
||||
border-radius: 0 0 3px 3px;
|
||||
max-height: 200px;
|
||||
margin-top: -2px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: absolute;
|
||||
background-color: $color-main-background;
|
||||
width: 100%;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
div.addressBookShares ul.dropdown-menu li > a {
|
||||
height: 30px !important;
|
||||
min-height: 30px !important;
|
||||
line-height: 30px !important;
|
||||
}
|
||||
|
||||
ul.dropdown-menu li.active {
|
||||
background: nc-darken($color-main-background, 6%);
|
||||
}
|
||||
|
||||
div.app-contacts span.utils {
|
||||
padding: 0 !important;
|
||||
float: right;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.addressBookUrlContainer {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input.renameAddressBookInput,
|
||||
input.newAddressBookInput,
|
||||
input.shareeInput,
|
||||
input.addressBookUrl {
|
||||
width: 100% !important;
|
||||
margin-right: 0;
|
||||
padding-right: 30px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.select2-drop .select2-search input {
|
||||
width: 100% !important;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Contact import */
|
||||
#app-settings-content #upload.button {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
padding-left: 34px;
|
||||
background-position: 10px center;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
#app-settings-content #upload.button::after {
|
||||
left: 17px; /* half the padding */
|
||||
}
|
||||
#app-settings-content #upload.button.no-select {
|
||||
border-radius: 3px;
|
||||
}
|
||||
contactimport {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
contactimport .select2-container {
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
contactimport .select2-container:after {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
contactimport .select2-container .select2-choice {
|
||||
height: 100%;
|
||||
line-height: 31px;
|
||||
border-radius: 0 0 3px 3px;
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
contactimport .select2-drop-active {
|
||||
border-top: 1px solid nc-darken($color-main-background, 18%);
|
||||
box-shadow: 0 -1px 5px rgba($color-main-background, .15);
|
||||
border-radius: 3px 3px 0 0;
|
||||
margin-top: initial;
|
||||
}
|
||||
|
||||
contactimport .ui-select-offscreen {
|
||||
display: none;
|
||||
}
|
||||
|
||||
contactimport .ui-select-search-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
contactimport input[type='search']::-webkit-search-cancel-button {
|
||||
-webkit-appearance:none
|
||||
}
|
||||
|
||||
/* Import screen */
|
||||
#import-sidebar {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
z-index: 500;
|
||||
background: rgba(255,255,255,0.6);
|
||||
}
|
||||
#importscreen-wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
padding-top: 30vh;
|
||||
background: $color-main-background;
|
||||
z-index: 500;
|
||||
}
|
||||
#importscreen-content {
|
||||
width: 300px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#importscreen-title {
|
||||
flex-basis: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
#importscreen-percent {
|
||||
opacity: 0.5;
|
||||
}
|
||||
#importscreen-user {
|
||||
font-style: italic;
|
||||
opacity: 0.5;
|
||||
padding-top: 5px;
|
||||
}
|
||||
/* Copy nextcloud quota bar */
|
||||
#importscreen-progress {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
border: 0 none;
|
||||
background-color: nc-darken($color-main-background, 10%);
|
||||
border-radius: 3px;
|
||||
flex-basis: 100%;
|
||||
height: 5px;
|
||||
}
|
||||
#importscreen-progress::-webkit-progress-bar {
|
||||
background: transparent;
|
||||
}
|
||||
#importscreen-progress::-moz-progress-bar {
|
||||
border-radius: 3px;
|
||||
background: $color-primary;
|
||||
transition: 500ms all ease-in-out;
|
||||
}
|
||||
#importscreen-progress::-webkit-progress-value {
|
||||
border-radius: 3px;
|
||||
background: $color-primary;
|
||||
transition: 500ms all ease-in-out;
|
||||
}
|
||||
#importscreen-sidebar-block {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $color-main-background;
|
||||
z-index: 500;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
@ -1,841 +0,0 @@
|
|||
#app-navigation {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contactdetails__header {
|
||||
height: 100px;
|
||||
padding-left: 20px;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contactdetails__header #details-contact-infos {
|
||||
width: 80%;
|
||||
margin: 2px 6px 0px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.contactdetails__header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
.contactdetails__header #details-org-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.contactdetails__header input[type=text]:active {
|
||||
background: transparent !important; /* remove :active effect */
|
||||
}
|
||||
.contactdetails__header .contactdetails__name,
|
||||
.contactdetails__header .contactdetails__org,
|
||||
.contactdetails__header .contactdetails__title {
|
||||
font-size: inherit;
|
||||
/* Override focus, active & hover! */
|
||||
color: #fff !important; /* No vars used on purpose since we use custom BGs */
|
||||
background: transparent;
|
||||
border: none;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 4px 5px;
|
||||
}
|
||||
.contactdetails__header .contactdetails__org,
|
||||
.contactdetails__header .contactdetails__title {
|
||||
max-width: 50%;
|
||||
min-width: 150px;
|
||||
}
|
||||
.contactdetails__header .contactdetails__name {
|
||||
width: 100%;
|
||||
}
|
||||
.contactdetails__header #details-actions {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.contactdetails__header #contact-failed-save {
|
||||
animation: pulse 1.5s infinite;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* fix placeholder color */
|
||||
.contactdetails__header .contactdetails__name::-webkit-input-placeholder,
|
||||
.contactdetails__header .contactdetails__org::-webkit-input-placeholder,
|
||||
.contactdetails__header .contactdetails__title::-webkit-input-placeholder { /* WebKit, Blink, Edge */
|
||||
color: #fff; /* No vars used on purpose since we use custom BGs */
|
||||
opacity: .8;
|
||||
}
|
||||
.contactdetails__header .contactdetails__name::-moz-placeholder,
|
||||
.contactdetails__header .contactdetails__org::-moz-placeholder,
|
||||
.contactdetails__header .contactdetails__title::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
color: #fff; /* No vars used on purpose since we use custom BGs */
|
||||
opacity: .8;
|
||||
}
|
||||
.contactdetails__header .contactdetails__name:-ms-input-placeholder,
|
||||
.contactdetails__header .contactdetails__org:-ms-input-placeholder,
|
||||
.contactdetails__header .contactdetails__title:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: #fff; /* No vars used on purpose since we use custom BGs */
|
||||
opacity: .8;
|
||||
}
|
||||
.contactdetails__header .contactdetails__name:placeholder-shown,
|
||||
.contactdetails__header .contactdetails__org:placeholder-shown,
|
||||
.contactdetails__header .contactdetails__title:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
|
||||
color: #fff; /* No vars used on purpose since we use custom BGs */
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.contactdetails__header #details-actions a,
|
||||
.contactdetails__header #details-actions button {
|
||||
padding: 15px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
opacity: .5;
|
||||
margin: 3px;
|
||||
}
|
||||
.contactdetails__header #details-actions a:hover,
|
||||
.contactdetails__header #details-actions button:hover,
|
||||
.contactdetails__header #details-actions a:focus,
|
||||
.contactdetails__header #details-actions button:focus {
|
||||
opacity: .7
|
||||
}
|
||||
|
||||
avatar {
|
||||
position: relative;
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.contactdetails__logo {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
object-fit: cover;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatar-options {
|
||||
top: 0;
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-options > [class^="icon-"] {
|
||||
display: none;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
}
|
||||
.avatar-options:hover > [class^="icon-"] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.avatar-options > [class^="icon-"]:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
avatar.avatar--missing .avatar-options {
|
||||
display: flex;
|
||||
border-radius: 50%;
|
||||
}
|
||||
avatar:not(.maximized).avatar--missing .avatar-options .icon-upload-white {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
avatar.maximized {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 0;
|
||||
padding: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 200;
|
||||
padding-top: 65px; /* Nextcloud header */
|
||||
}
|
||||
avatar.maximized img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
max-height: calc(100% - 40px);
|
||||
max-width: 100%;
|
||||
align-self: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
avatar.maximized .avatar-options {
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: calc(100% - 40px);
|
||||
left: 0;
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
avatar.maximized .avatar-options > [class^="icon-"] {
|
||||
min-width: 25%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#check-all + label:before {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 68px;
|
||||
}
|
||||
|
||||
.contact__icon {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
text-transform: capitalize;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.contactdetails__header + section {
|
||||
padding: 20px 20px 100px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1450px) {
|
||||
section {
|
||||
-webkit-column-count: 2; /* Chrome, Safari, Opera */
|
||||
-moz-column-count: 2; /* Firefox */
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* General details item styles */
|
||||
contactdetails {
|
||||
select, button, input, textarea {
|
||||
&:disabled {
|
||||
background-color: transparent !important;
|
||||
border-color: transparent !important;
|
||||
opacity: 1 !important;
|
||||
color: #545454 !important;
|
||||
}
|
||||
}
|
||||
detailsitem > select:disabled {
|
||||
background-image: none !important;
|
||||
&:first-child {
|
||||
opacity: 0.5 !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
detailsitem {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
width: 380px;
|
||||
|
||||
}
|
||||
|
||||
detailsitem input[type="tel"],
|
||||
detailsitem input[type="email"],
|
||||
detailsitem input[type="text"],
|
||||
detailsitem input[type="url"],
|
||||
detailsitem textarea,
|
||||
.select-addressbook select,
|
||||
.add-field {
|
||||
width: 245px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.add-field {
|
||||
margin-left: 106px;
|
||||
}
|
||||
|
||||
detailsitem select {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
detailsitem label,
|
||||
.select-addressbook label {
|
||||
margin: 3px 3px 3px 0;
|
||||
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
padding: 7px 0px;
|
||||
text-align: right;
|
||||
opacity: .5;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
detailsitem .icon-delete {
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
padding: 16px 10px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
detailsitem .item-action {
|
||||
position: absolute;
|
||||
padding: 8px 5px;
|
||||
opacity: .5;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
detailsitem .item-action ~ input {
|
||||
padding-right: 30px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
detailsitem .item-action i {
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
detailsitem.details-item-adr .icon-delete, detailsitem.details-item-n .icon-delete {
|
||||
vertical-align: middle;
|
||||
left: 251px;
|
||||
}
|
||||
|
||||
detailsitem.details-item-adr {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
detailsitem.details-item-n {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
detailsitem.details-item-note label {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Failed props */
|
||||
detailsitem.failed {
|
||||
box-shadow: inset 2px 0 $color-error;
|
||||
}
|
||||
avatar .icon-error {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
avatar:not(.maximized) .icon-error + img {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Prevent delete for last adr/mail/tel item */
|
||||
.last-details > detailsitem.details-item-adr .icon-delete,
|
||||
.last-details > detailsitem.details-item-email .icon-delete,
|
||||
.last-details > detailsitem.details-item-tel .icon-delete {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* addressbook settings */
|
||||
.settings-section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.addressBookList > li {
|
||||
padding: 6px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
ul.addressBook-share-list {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
ul.addressBook-share-list li {
|
||||
padding: 0 5px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ul.addressBook-share-list li .icon {
|
||||
margin-right: 5px;
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
ul.addressBook-share-list li .utils {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* override core apps css */
|
||||
#app-navigation ul.addressBookList > li span.utils {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
ul.addressBookList li .utils .popovermenu {
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
#app-navigation ul.addressBookList li .utils .popovermenu li > button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul.addressBookList li .action > span {
|
||||
display: inline-block;
|
||||
opacity: 0.5;
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
ul.addressBookList li .action > a {
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
div.addressBookShares ul.dropdown-menu {
|
||||
border: 1px solid nc-darken($color-main-background, 18%);
|
||||
border-radius: 0 0 3px 3px;
|
||||
max-height: 200px;
|
||||
margin-top: -2px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: absolute;
|
||||
background-color: $color-main-background;
|
||||
width: 100%;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
div.addressBookShares ul.dropdown-menu li > a {
|
||||
height: 30px !important;
|
||||
min-height: 30px !important;
|
||||
line-height: 30px !important;
|
||||
}
|
||||
|
||||
ul.dropdown-menu li.active {
|
||||
background: nc-darken($color-main-background, 6%);
|
||||
}
|
||||
|
||||
div.app-contacts span.utils {
|
||||
padding: 0 !important;
|
||||
float: right;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.addressBookUrlContainer {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input.renameAddressBookInput,
|
||||
input.newAddressBookInput,
|
||||
input.shareeInput,
|
||||
input.addressBookUrl {
|
||||
width: 100% !important;
|
||||
margin-right: 0;
|
||||
padding-right: 30px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.select2-drop .select2-search input {
|
||||
width: 100% !important;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.addressBookList form {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
addressBookList input[type='submit'].inline-button,
|
||||
addressBookList input[type='button'].inline-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 6px 15px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
opacity: .5;
|
||||
margin-right: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul.addressBookList li[addressbook] > span.addressBookName {
|
||||
width: calc(100% - 52px); /* -actions width */
|
||||
overflow: hidden;
|
||||
white-space:nowrap;
|
||||
text-overflow: ellipsis;
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
ul.addressBookList li[addressbook] > .addressBookShares {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
li.addressBook-share-item span.shareeIdentifier,
|
||||
li.calendar-share-item span.shareeIdentifier {
|
||||
width: 100%;
|
||||
overflow:hidden;
|
||||
white-space:nowrap;
|
||||
text-overflow:ellipsis;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Contact import */
|
||||
#app-settings-content #upload.button {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
padding-left: 34px;
|
||||
background-position: 10px center;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
#app-settings-content #upload.button::after {
|
||||
left: 17px; /* half the padding */
|
||||
}
|
||||
#app-settings-content #upload.button.no-select {
|
||||
border-radius: 3px;
|
||||
}
|
||||
contactimport {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
contactimport .select2-container {
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
contactimport .select2-container:after {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
contactimport .select2-container .select2-choice {
|
||||
height: 100%;
|
||||
line-height: 31px;
|
||||
border-radius: 0 0 3px 3px;
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
contactimport .select2-drop-active {
|
||||
border-top: 1px solid nc-darken($color-main-background, 18%);
|
||||
box-shadow: 0 -1px 5px rgba($color-main-background, .15);
|
||||
border-radius: 3px 3px 0 0;
|
||||
margin-top: initial;
|
||||
}
|
||||
|
||||
contactimport .ui-select-offscreen {
|
||||
display: none;
|
||||
}
|
||||
|
||||
contactimport .ui-select-search-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
contactimport input[type='search']::-webkit-search-cancel-button {
|
||||
-webkit-appearance:none
|
||||
}
|
||||
|
||||
/* Contacts List */
|
||||
#new-contact-button {
|
||||
margin: 14px auto; /* to have the same height than a contact*/
|
||||
width: calc(100% - 20px) !important;
|
||||
text-align: left;
|
||||
padding-left: 34px;
|
||||
background-position: 10px center;
|
||||
}
|
||||
|
||||
contactlist .tooltip {
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.app-content-list-item-failed {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
margin-top: -15px;
|
||||
opacity: 0.2;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
z-index: 50;
|
||||
}
|
||||
.app-content-list-item-failed:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.app-content-list-item-failed ~ .app-content-list-item-line-one,
|
||||
.app-content-list-item-failed ~ .app-content-list-item-line-two {
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* app content list & detail view */
|
||||
/* TO BE MOVED TO CORE apps.css ONCE STANDARDIZED ACROSS APPS */
|
||||
/* DO NOT MAKE ANY CHANGES SPECIFIC TO CONTACTS HERE! */
|
||||
|
||||
.app-content-list {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid nc-darken($color-main-background, 8%);
|
||||
}
|
||||
|
||||
.app-content-detail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.app-content-list-button {
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.app-content-list-item {
|
||||
position: relative;
|
||||
height: 68px;
|
||||
border-top: 1px solid nc-darken($color-main-background, 8%);
|
||||
cursor: pointer;
|
||||
}
|
||||
.app-content-list-item:hover,
|
||||
.app-content-list-item:focus,
|
||||
.app-content-list-item.active {
|
||||
background-color: nc-darken($color-main-background, 6%);
|
||||
}
|
||||
.app-content-list-item-link {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app-content-list-item-icon {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
left: 6px;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
.app-content-list-item-star {
|
||||
position: absolute;
|
||||
display: none; /* change to inline-block when we implement it */
|
||||
left: 16px;
|
||||
top: 28px;
|
||||
padding: 20px;
|
||||
background-size: 16px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.app-content-list-item-line-one,
|
||||
.app-content-list-item-line-two {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
padding-left: 50px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.app-content-list-item-line-one.no-line-two {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
.app-content-list-item-line-two {
|
||||
top: 25px;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
ul.addressBook-share-list {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#app-navigation .utils .action span {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
#app-navigation .utils .action {
|
||||
opacity: .5;
|
||||
}
|
||||
#app-navigation .utils .action:hover,
|
||||
#app-navigation .utils .action:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#app-navigation > ul {
|
||||
height: calc(100% - 68px);
|
||||
}
|
||||
|
||||
/* SELECT2 styling */
|
||||
detailsitem .select2-container {
|
||||
width: 245px;
|
||||
}
|
||||
/* Fix for #81 */
|
||||
.select2-container-multi .select2-choices .select2-search-choice {
|
||||
padding-right: 20px;
|
||||
}
|
||||
.select2-container.select2-container-multi .select2-choices span {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close {
|
||||
display: block !important;
|
||||
right: 4px;
|
||||
left: auto;
|
||||
top: 7px
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.wrapper-show:not(.mobile-show),
|
||||
.contacts-list:not(.mobile-show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
#app-navigation-toggle.showdetails {
|
||||
transform: translate(-50px, 0);
|
||||
}
|
||||
|
||||
#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);
|
||||
}
|
||||
|
||||
/* end of media query */
|
||||
}
|
||||
|
||||
.contact-details-wrapper {
|
||||
position: relative;
|
||||
background: $color-main-background;
|
||||
}
|
||||
.wrapper-show {
|
||||
z-index: 201;
|
||||
}
|
||||
#app-navigation-toggle-back {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon-group {
|
||||
background-image: url('../../img/group.svg');
|
||||
}
|
||||
|
||||
/* Import screen */
|
||||
#import-sidebar {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
z-index: 500;
|
||||
background: rgba(255,255,255,0.6);
|
||||
}
|
||||
#importscreen-wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
padding-top: 30vh;
|
||||
background: $color-main-background;
|
||||
z-index: 500;
|
||||
}
|
||||
#importscreen-content {
|
||||
width: 300px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#importscreen-title {
|
||||
flex-basis: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
#importscreen-percent {
|
||||
opacity: 0.5;
|
||||
}
|
||||
#importscreen-user {
|
||||
font-style: italic;
|
||||
opacity: 0.5;
|
||||
padding-top: 5px;
|
||||
}
|
||||
/* Copy nextcloud quota bar */
|
||||
#importscreen-progress {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
border: 0 none;
|
||||
background-color: nc-darken($color-main-background, 10%);
|
||||
border-radius: 3px;
|
||||
flex-basis: 100%;
|
||||
height: 5px;
|
||||
}
|
||||
#importscreen-progress::-webkit-progress-bar {
|
||||
background: transparent;
|
||||
}
|
||||
#importscreen-progress::-moz-progress-bar {
|
||||
border-radius: 3px;
|
||||
background: $color-primary;
|
||||
transition: 500ms all ease-in-out;
|
||||
}
|
||||
#importscreen-progress::-webkit-progress-value {
|
||||
border-radius: 3px;
|
||||
background: $color-primary;
|
||||
transition: 500ms all ease-in-out;
|
||||
}
|
||||
#importscreen-sidebar-block {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $color-main-background;
|
||||
z-index: 500;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@import "app-content-list";
|
||||
|
||||
@import "details";
|
||||
@import "contactlist";
|
||||
@import "navigation";
|
||||
@import "settings";
|
||||
|
|
@ -22,7 +22,7 @@ script('contacts', 'vendor/angular-bootstrap/ui-bootstrap-tpls.min');
|
|||
script('contacts', 'vendor/jquery-timepicker/jquery.ui.timepicker');
|
||||
|
||||
// all styles
|
||||
style('contacts', 'public/style');
|
||||
style('contacts', 'style');
|
||||
vendor_style('select2/select2');
|
||||
?>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue