summaryrefslogtreecommitdiffstats
path: root/css/public/style.scss
diff options
context:
space:
mode:
Diffstat (limited to 'css/public/style.scss')
-rw-r--r--css/public/style.scss802
1 files changed, 802 insertions, 0 deletions
diff --git a/css/public/style.scss b/css/public/style.scss
new file mode 100644
index 00000000..fccaad29
--- /dev/null
+++ b/css/public/style.scss
@@ -0,0 +1,802 @@
+.contactdetails__header {
+ height: 100px;
+ padding-left: 20px;
+ display: flex;
+ color: #fff;
+ 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;
+ color: #fff !important; /* override focus,active&hover */
+ 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;
+ 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;
+ 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;
+ 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;
+ 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 */
+
+detailsitem {
+ display: inline-block;
+ position: relative;
+}
+
+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;
+}
+
+.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;
+ top: 2px;
+ 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 #c5173a;
+}
+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-top: 0;
+ 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 #ddd;
+ border-radius: 0 0 3px 3px;
+ max-height: 200px;
+ margin-top: -2px;
+ overflow-y: auto;
+ display: flex;
+ flex-wrap: wrap;
+ position: absolute;
+ background-color: #fff;
+ 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: #f0f0f0;
+}
+
+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: inline-flex;
+ margin-bottom: 0;
+ border-radius: 3px 3px 0 0;
+ justify-content: space-between;
+}
+#app-settings-content #upload.button::after {
+ left: 17px; /* half the padding */
+}
+
+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 #ddd;
+ box-shadow: 0 -1px 5px rgba(0, 0, 0, .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 #eee;
+}
+
+.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 #eee;
+ cursor: pointer;
+}
+.app-content-list-item:hover,
+.app-content-list-item:focus,
+.app-content-list-item.active {
+ background-color: #f8f8f8;
+}
+.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);
+}
+
+/* styling for contact count in contact list */
+.contacts-list-count {
+ text-align:center;
+ color: #333;
+ padding:25px;
+ position: relative;
+ height: 68px;
+ border-top: 1px solid #eee;
+}
+
+/* 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: center;
+ background: $color-main-background;
+ z-index: 500;
+}
+#importscreen-progress {
+ display: block; /* default: inline-block */
+ width: 300px;
+ margin: 2em auto;
+ padding: 4px;
+ border: 0 none;
+ background: rgba(0,0,0,0.1);
+ border-radius: 2px;
+ box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
+}
+#importscreen-progress::-webkit-progress-bar {
+ background: transparent;
+}
+#importscreen-progress::-moz-progress-bar {
+ border-radius: 2px;
+ background: $color-primary;
+ box-shadow: inset 0 -2px 4px rgba(0,0,0,0.1), 0 2px 5px 0px rgba(0,0,0,0.1);
+}
+/* webkit */
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ #importscreen-progress {
+ height: 25px;
+ }
+}
+#importscreen-progress::-webkit-progress-value {
+ border-radius: 2px;
+ background: $color-primary;
+ box-shadow: inset 0 -2px 4px rgba(0,0,0,0.1), 0 2px 5px 0px rgba(0,0,0,0.1);
+ transition: 500ms all ease-in-out;
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-10-18 09:19:06 +0000