New style for shared links. Preparation for changes in some addons

[friendica.git] / view / theme / vier / style.css

diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index ebcab5a144be38b157d43247efa33d6b0c60dd6d..e1f9b3def923ee7365fd9dce6addfa5a6adac5dc 100644 (file)
--- a/view/theme/vier/style.css
+++ b/view/theme/vier/style.css
@@ -240,6 +240,11 @@ div.pager {
 
 .shared_header a {
   color: black;
+  -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;
 }
 
 .shared_header a:hover {
@@ -286,15 +291,12 @@ blockquote.shared_content {
 body {
   font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
-  /* background-color: #ffffff; */
-  /* background-color: #ddd; */
-  background-color: #F2F2F2;
+  background-color: #ffffff;
   color: #2d2d2d;
-  /* margin: 37px 0px 0px 0px; */
-  margin: 32px 0px 0px 0px;
+  margin: 0px 0px 0px 0px;
   display: table;
-  /* width: 100% */
 }
+
 h4 {
   font-size: 1.1em;
 }
@@ -477,6 +479,11 @@ div.jGrowl div.info {
   color: #ffffff;
   padding-left: 58px;
 }
+
+div.jGrowl div.jGrowl-notification {
+  margin-top: 40px;
+}
+
 /* header */
 header {
   position: fixed;
@@ -849,6 +856,7 @@ ul.menu-popup .empty {
 
 right_aside {
   width: 0px;
+  top: 32px;
   display: block;
 }
 
@@ -857,12 +865,22 @@ aside {
   /* display: table-cell; */
   vertical-align: top;
   width: 185px;
-  padding: 10px 10px 10px 20px;
+  /* padding: 32px 10px 10px 20px; */
+  padding: 10px 10px 0px 20px;
   /* border-right: 1px solid #D2D2D2; */
   /* background-color: #ECECF2; */
   background-color: #F2F2F2;
   font-size: 13px;
   /* background: #F1F1F1; */
+  /* top: 0px; */
+  top: 32px;
+  overflow-y: auto;
+  z-index: 2;
+
+  position: fixed;
+  /* overflow: auto; */
+  height: calc(100% - 42px);
+  /* overflow: scroll; */
 }
 aside .vcard .fn {
   font-size: 18px;
@@ -922,7 +940,8 @@ aside #dfrn-request-link:hover {
   /* background-color: #19aeff; */
 }
 aside #profiles-menu {
-  width: 20em;
+  width: 14em;
+  left: 10px;
 }
 
 aside #search-text, aside #side-follow-url, aside #side-peoplefind-url {
@@ -1062,6 +1081,7 @@ aside h4 {
 section {
   display: table-cell;
   vertical-align: top;
+  top: 32px;
   width: 766px;
   max-width: 766px;
   padding: 10px 10px 10px 10px;
@@ -1069,7 +1089,16 @@ section {
   border-bottom: 1px solid lightgray;
   border-right: 1px solid lightgray;
   border-left: 1px solid lightgray;
+
+  position: absolute;
+  left: 215px;
 }
+
+section.minimal {
+  top: 0px;
+  left: 0px;
+}
+
 /* wall item */
 .tread-wrapper {
 /*    border-bottom: 1px solid #BDCDD4; */
@@ -1099,7 +1128,7 @@ border-bottom: 1px solid #D2D2D2;
   font-size: 14px;
 }
 .wall-item-container .wall-item-bottom {
-  opacity: 0.5;
+  opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
@@ -1137,6 +1166,21 @@ border-bottom: 1px solid #D2D2D2;
   font-size: 12px;
 }
 
+.wall-item-container .wall-item-content .type-link img,
+.type-link img {
+  max-width: 160px;
+  max-height: 160px;
+  float: left;
+  margin-right: 10px;
+}
+.type-link blockquote {
+  margin-left: 160px;
+  max-height: 160px;
+  overflow: hidden;
+}
+.type-link .oembed {
+}
+
 .wall-item-container .wall-item-content {
   font-size: 14px;
   max-width: 660px;
@@ -1197,6 +1241,11 @@ border-bottom: 1px solid #D2D2D2;
 .wall-item-container .wall-item-name {
   color: black;
   font-weight: bold;
+  -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;
 }
 
 .toplevel_item:hover .wall-item-name,
@@ -1214,6 +1263,11 @@ border-bottom: 1px solid #D2D2D2;
 .toplevel_item .fakelink,
 .wall-item-container .fakelink {
   color: black;
+  -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;
   /* color: darkblue; */
   /* color: #3E3E8C; */
 }
@@ -1625,22 +1679,27 @@ border-bottom: 1px solid #D2D2D2;
 #profile-link-wrapper {
   float: left;
   margin-left: 15px;
+  cursor: pointer;
 }
 #profile-video-wrapper {
   float: left;
   margin-left: 15px;
+  cursor: pointer;
 }
 #profile-audio-wrapper {
   float: left;
   margin-left: 15px;
+  cursor: pointer;
 }
 #profile-location-wrapper {
   float: left;
   margin-left: 15px;
+  cursor: pointer;
 }
 #profile-nolocation-wrapper {
   float: left;
   margin-left: 15px;
+  cursor: pointer;
 }
 #jot-perms-icon {
   float: right;