quattro: fix item max-width, fix contact serarch autocomplete popup style

[friendica.git] / view / theme / quattro / green / style.css

diff --git a/view/theme/quattro/green/style.css b/view/theme/quattro/green/style.css
index 2e97027b4bc4c282fd692b54ef1c82a3712de217..1f1d85e80600edfb2dc63fb79e711ce11d00285e 100644 (file)
--- a/view/theme/quattro/green/style.css
+++ b/view/theme/quattro/green/style.css
@@ -387,6 +387,12 @@ a:hover {
   color: #009100;
   text-decoration: underline;
 }
+blockquote {
+  background: #ffffff;
+  padding: 1em;
+  margin-left: 1em;
+  border-left: 1em solid #e6e6e6;
+}
 code {
   font-family: Courier, monospace;
   white-space: pre;
@@ -642,26 +648,34 @@ ul.menu-popup .toolbar a:hover {
   background-color: #ffffff;
 }
 /* autocomplete popup */
+.autocomplete,
 .acpopup {
   max-height: 150px;
   background-color: #ffffff;
   color: #2d2d2d;
-  border: 1px solid #MenuBorder;
+  border: 1px solid #364e59;
   overflow: auto;
   z-index: 100000;
   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 }
+.autocomplete > div,
 .acpopupitem {
   color: #2d2d2d;
   padding: 4px;
   clear: left;
+  overflow: auto;
+  height: auto;
 }
+.autocomplete > div img,
 .acpopupitem img {
   float: left;
   margin-right: 4px;
+  width: 16px !important;
+  height: 16px !important;
 }
+.autocomplete > div.selected,
 .acpopupitem.selected {
   background-color: #ccff42;
 }
@@ -726,6 +740,22 @@ aside #profile-extra-links li {
   margin: 0px;
   list-style: none;
 }
+aside #wallmessage-link {
+  display: block;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+  color: #ffffff;
+  background: #009100 url('../../../images/connect-bg.png') no-repeat left center;
+  font-weight: bold;
+  text-transform: uppercase;
+  padding: 4px 2px 2px 35px;
+  margin-top: 3px;
+}
+aside #wallmessage-link:hover {
+  text-decoration: none;
+  background-color: #ccff42;
+}
 aside #dfrn-request-link {
   display: block;
   -moz-border-radius: 5px 5px 5px 5px;
@@ -961,7 +991,7 @@ section {
   word-wrap: break-word;
 }
 .wall-item-container .wall-item-content img {
-  max-width: 710px;
+  max-width: 700px;
 }
 .wall-item-container .wall-item-links,
 .wall-item-container .wall-item-actions {
@@ -1028,6 +1058,34 @@ section {
 .wall-item-container.comment .wall-item-links {
   padding-left: 12px;
 }
+.wall-item-container.comment .commentbox {
+  height: 0px;
+  overflow: hidden;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.wall-item-container.comment .commentbox .wall-item-comment-wrapper {
+  border-top: 1px solid #999999;
+  height: 0px;
+  overflow: hidden;
+}
+.wall-item-container.comment:hover .commentbox {
+  height: auto;
+  overflow: visible;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.wall-item-container.comment:hover .commentbox .wall-item-comment-wrapper {
+  border-top: 0px;
+  height: auto;
+  overflow: visible;
+}
 /* 'tag' item type */
 .wall-item-container.item-tag .wall-item-content {
   opacity: 0.5;
@@ -1063,7 +1121,6 @@ section {
   padding: 0.3em;
 }
 .wall-item-comment-wrapper .comment-edit-text-full {
-  font-size: 14px;
   height: 4em;
   color: #2d2d2d;
   border: 1px solid #2d2d2d;
@@ -1075,6 +1132,7 @@ section {
   width: 710px;
   border: 1px solid #2d2d2d;
   margin-top: 10px;
+  background-color: #ddffdd;
 }
 .comment-edit-preview .contact-photo {
   width: 32px;
@@ -1091,12 +1149,17 @@ section {
   padding-left: 12px;
 }
 .comment-edit-preview .wall-item-container {
-  width: 700px;
+  width: 90%;
 }
 .comment-edit-preview .tread-wrapper {
-  width: 700px;
+  width: 90%;
   padding: 0;
   margin: 10px 0;
+  background-color: #ddffdd;
+  border-bottom: 0px;
+}
+.comment-edit-preview .wall-item-conv {
+  display: none;
 }
 .shiny {
   border-right: 10px solid #ddffdd;
@@ -1111,19 +1174,45 @@ section {
   padding-top: 5px;
 }
 .tag {
-  background: url("../../../images/tag_b.png") no-repeat center left;
+  background: url("icons/tag.png") no-repeat center right;
   color: #ffffff;
+  padding-right: 8px;
   padding-left: 3px;
 }
 .tag a {
-  padding-right: 8px;
-  background: url("../../../images/tag.png") no-repeat center right;
   color: #ffffff;
 }
-.filesavetags {
-  padding: 3px 0px 3px 0px;
-  opacity: 0.5;
+.mention {
+  background: url("icons/men.png") no-repeat 1px center;
+  color: #666666;
+  padding-right: 3px;
+  padding-left: 18px;
+}
+.mention a {
+  color: #666666;
+}
+.folder {
+  background: url("icons/folder.png") no-repeat 1px center;
+  color: #666666;
+  padding-right: 3px;
+  padding-left: 15px;
 }
+.folder a {
+  color: #666666;
+}
+.category {
+  background: url("icons/category.png") no-repeat 1px center;
+  color: #666666;
+  padding-right: 3px;
+  padding-left: 15px;
+}
+.category a {
+  color: #666666;
+}
+/*.filesavetags {
+    padding: 3px 0px 3px 0px;
+    opacity: 0.5;
+}*/
 .wwto {
   background: #FFFFFF;
   border: 2px solid #364e59;
@@ -1143,33 +1232,67 @@ section {
   height: 25px;
 }
 /* threaded comments */
-.children > .children {
+.children {
+  margin-top: 1em;
+}
+.children .hide-comments-outer {
+  margin-left: 60px;
+}
+.children .wwto {
+  display: none;
+}
+.children .comment-edit-preview {
+  width: 660px;
+}
+.children .comment-edit-preview .wall-item-container {
+  width: 610px;
+}
+.children .children {
   margin-left: 40px;
 }
-.children > .children .wall-item-container {
+.children .children .wall-item-container {
   width: 710px;
 }
-.children > .children > .children {
-  margin-left: 40px;
+.children .children .comment-edit-preview {
+  width: 620px;
+}
+.children .children .comment-edit-preview .wall-item-container {
+  width: 620px;
 }
-.children > .children > .children .wall-item-container {
+.children .children .children .wall-item-container {
   width: 670px;
 }
-.children > .children > .children > .children {
-  margin-left: 40px;
+.children .children .children .comment-edit-preview {
+  width: 580px;
+}
+.children .children .children .comment-edit-preview .wall-item-container {
+  width: 580px;
 }
-.children > .children > .children > .children .wall-item-container {
+.children .children .children .children .wall-item-container {
   width: 630px;
 }
-.children > .children > .children > .children > .children {
-  margin-left: 40px;
+.children .children .children .children .comment-edit-preview {
+  width: 540px;
 }
-.children > .children > .children > .children > .children .wall-item-container {
+.children .children .children .children .comment-edit-preview .wall-item-container {
+  width: 540px;
+}
+.children .children .children .children .children .wall-item-container {
   width: 590px;
 }
-.children > .children > .children > .children > .children .children {
+.children .children .children .children .children .comment-edit-preview {
+  width: 500px;
+}
+.children .children .children .children .children .comment-edit-preview .wall-item-container {
+  width: 500px;
+}
+.children .children .children .children .children .children {
   margin-left: 0px;
 }
+.children .children .children .children .children .children .hide-comments-outer {
+  margin-left: 0px;
+}
+/*.threaded .hide-comments-outer { margin-left: 20px; }*/
 span[id^="showmore-teaser"] {
   background: url("showmore-bg.jpg") no-repeat center bottom;
 }
@@ -2006,25 +2129,23 @@ footer {
   opacity: 0.3;
   filter: alpha(opacity=30);
 }
-[class^="comment-edit-bb"] {
+.comment-edit-bb {
   list-style: none;
   display: none;
-  margin: 0px 0 0px 60px;
+  margin: 0px;
+  padding: 0px;
   width: 75%;
 }
-[class^="comment-edit-bb"] > li {
+.comment-edit-bb > li {
   display: inline-block;
   margin: 10px 10px 0 0;
   visibility: none;
 }
-[class^="comment-edit-bb-end"] {
-  clear: both;
-}
 .editicon {
   display: inline-block;
   width: 16px;
   height: 16px;
-  background-image: url(bbedit.png);
+  background-image: url(icons/bbedit.png);
   text-decoration: none;
 }
 .editicon :hover {
@@ -2078,28 +2199,47 @@ footer {
 .videobb:hover {
   background-position: -112px -16px;
 }
-.attachtype {
-  display: block;
-  width: 20px;
-  height: 23px;
+/** range input css **/
+/* slider root element */
+.slider {
+  height: 2px;
+  position: relative;
+  cursor: pointer;
+  border: 1px solid #333;
+  width: 200px;
+  margin: 10px 0px 10px 0px;
   float: left;
-  background-image: url('../../../images/content-types.png');
-}
-.body-attach {
-  margin-top: 10px;
-}
-.type-video {
-  background-position: 0px 0px;
-}
-.type-image {
-  background-position: -20px 0px;
 }
-.type-audio {
-  background-position: -40px 0px;
+/* progress bar (enabled with progress: true) */
+.progress {
+  height: 9px;
+  background-color: #C5FF00;
+  display: none;
+  opacity: 0.6;
 }
-.type-text {
-  background-position: -60px 0px;
+/* drag handle */
+.handle {
+  background-color: #ccc;
+  height: 16px;
+  width: 8px;
+  top: -8px;
+  position: absolute;
+  display: block;
+  margin-top: 1px;
+  border: 1px solid #000;
+  cursor: move;
+  -moz-border-radius: 0 0 5px 5px;
+  -webkit-border-radius: 0 0 5px 5px;
+  border-radius: 0 0 5px 5px;
+  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+  -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 }
-.type-unkn {
-  background-position: -80px 0px;
+/* the input field */
+.range {
+  width: 20px!important;
+  font-size: 8pt;
+  margin-left: 10px;
+  border: 0px;
+  color: #999999;
 }