add some styles for gnome-photos

common/gtk-3.0/3.20/gtk-dark.css

@@ -3199,6 +3199,9 @@ dockoverlayedge {
   dockoverlayedge.right-edge tab:checked {
     border-width: 1px 0; }
 
+.documents-scrolledwin.frame {
+  border-width: 0; }
+
 button.documents-load-more {
   border-width: 1px 0 0;
   border-radius: 0; }
@@ -3208,7 +3211,7 @@ button.documents-load-more {
   color: #ffffff;
   border-radius: 2px; }
 
-.documents-collection-icon {
+.documents-collection-icon, .photos-collection-icon {
   background-color: rgba(211, 218, 227, 0.3);
   border-radius: 2px; }
 
@@ -3216,32 +3219,33 @@ button.documents-favorite:active,
 button.documents-favorite:active:hover {
   color: #a9caf1; }
 
-.documents-entry-tag {
+.documents-entry-tag, .photos-entry-tag {
   color: #ffffff;
   background: #5294E2;
   border-radius: 2px;
   border-width: 0;
   margin: 2px;
   padding: 4px; }
-  .documents-entry-tag:hover {
+  .documents-entry-tag:hover, .photos-entry-tag:hover {
     color: #ffffff;
     background: #639fe5; }
-  .documents-entry-tag:active {
+  .documents-entry-tag:active, .photos-entry-tag:active {
     color: #ffffff;
     background: #4189df; }
-  toolbar .linked .documents-entry-tag button, .inline-toolbar .linked .documents-entry-tag button {
-    background: none;
-    border: none;
-    box-shadow: none;
-    -gtk-icon-shadow: none; }
-    toolbar .linked .documents-entry-tag button:hover, .inline-toolbar .linked .documents-entry-tag button:hover {
-      color: rgba(255, 255, 255, 0.7); }
 
 .content-view.document-page {
   border-style: solid;
   border-width: 3px 3px 6px 4px;
   border-image: url("assets/thumbnail-frame.png") 3 3 6 4; }
 
+.photos-fade-in {
+  opacity: 1.0;
+  transition: opacity 0.2s ease-out; }
+
+.photos-fade-out {
+  opacity: 0.0;
+  transition: opacity 0.2s ease-out; }
+
 .tr-workarea undershoot,
 .tr-workarea overshoot {
   border-color: transparent; }

common/gtk-3.0/3.20/gtk-darker.css

@@ -3198,6 +3198,9 @@ dockoverlayedge {
   dockoverlayedge.right-edge tab:checked {
     border-width: 1px 0; }
 
+.documents-scrolledwin.frame {
+  border-width: 0; }
+
 button.documents-load-more {
   border-width: 1px 0 0;
   border-radius: 0; }
@@ -3207,7 +3210,7 @@ button.documents-load-more {
   color: #ffffff;
   border-radius: 2px; }
 
-.documents-collection-icon {
+.documents-collection-icon, .photos-collection-icon {
   background-color: rgba(92, 97, 108, 0.3);
   border-radius: 2px; }
 
@@ -3215,32 +3218,33 @@ button.documents-favorite:active,
 button.documents-favorite:active:hover {
   color: #a9caf1; }
 
-.documents-entry-tag {
+.documents-entry-tag, .photos-entry-tag {
   color: #ffffff;
   background: #5294E2;
   border-radius: 2px;
   border-width: 0;
   margin: 2px;
   padding: 4px; }
-  .documents-entry-tag:hover {
+  .documents-entry-tag:hover, .photos-entry-tag:hover {
     color: #ffffff;
     background: #639fe5; }
-  .documents-entry-tag:active {
+  .documents-entry-tag:active, .photos-entry-tag:active {
     color: #ffffff;
     background: #4189df; }
-  toolbar .linked .documents-entry-tag button, .inline-toolbar .linked .documents-entry-tag button {
-    background: none;
-    border: none;
-    box-shadow: none;
-    -gtk-icon-shadow: none; }
-    toolbar .linked .documents-entry-tag button:hover, .inline-toolbar .linked .documents-entry-tag button:hover {
-      color: rgba(255, 255, 255, 0.7); }
 
 .content-view.document-page {
   border-style: solid;
   border-width: 3px 3px 6px 4px;
   border-image: url("assets/thumbnail-frame.png") 3 3 6 4; }
 
+.photos-fade-in {
+  opacity: 1.0;
+  transition: opacity 0.2s ease-out; }
+
+.photos-fade-out {
+  opacity: 0.0;
+  transition: opacity 0.2s ease-out; }
+
 .tr-workarea undershoot,
 .tr-workarea overshoot {
   border-color: transparent; }

common/gtk-3.0/3.20/gtk-solid-dark.css

@@ -3199,6 +3199,9 @@ dockoverlayedge {
   dockoverlayedge.right-edge tab:checked {
     border-width: 1px 0; }
 
+.documents-scrolledwin.frame {
+  border-width: 0; }
+
 button.documents-load-more {
   border-width: 1px 0 0;
   border-radius: 0; }
@@ -3208,7 +3211,7 @@ button.documents-load-more {
   color: #ffffff;
   border-radius: 2px; }
 
-.documents-collection-icon {
+.documents-collection-icon, .photos-collection-icon {
   background-color: rgba(211, 218, 227, 0.3);
   border-radius: 2px; }
 
@@ -3216,32 +3219,33 @@ button.documents-favorite:active,
 button.documents-favorite:active:hover {
   color: #a9caf1; }
 
-.documents-entry-tag {
+.documents-entry-tag, .photos-entry-tag {
   color: #ffffff;
   background: #5294E2;
   border-radius: 2px;
   border-width: 0;
   margin: 2px;
   padding: 4px; }
-  .documents-entry-tag:hover {
+  .documents-entry-tag:hover, .photos-entry-tag:hover {
     color: #ffffff;
     background: #639fe5; }
-  .documents-entry-tag:active {
+  .documents-entry-tag:active, .photos-entry-tag:active {
     color: #ffffff;
     background: #4189df; }
-  toolbar .linked .documents-entry-tag button, .inline-toolbar .linked .documents-entry-tag button {
-    background: none;
-    border: none;
-    box-shadow: none;
-    -gtk-icon-shadow: none; }
-    toolbar .linked .documents-entry-tag button:hover, .inline-toolbar .linked .documents-entry-tag button:hover {
-      color: rgba(255, 255, 255, 0.7); }
 
 .content-view.document-page {
   border-style: solid;
   border-width: 3px 3px 6px 4px;
   border-image: url("assets/thumbnail-frame.png") 3 3 6 4; }
 
+.photos-fade-in {
+  opacity: 1.0;
+  transition: opacity 0.2s ease-out; }
+
+.photos-fade-out {
+  opacity: 0.0;
+  transition: opacity 0.2s ease-out; }
+
 .tr-workarea undershoot,
 .tr-workarea overshoot {
   border-color: transparent; }

common/gtk-3.0/3.20/gtk-solid-darker.css

@@ -3198,6 +3198,9 @@ dockoverlayedge {
   dockoverlayedge.right-edge tab:checked {
     border-width: 1px 0; }
 
+.documents-scrolledwin.frame {
+  border-width: 0; }
+
 button.documents-load-more {
   border-width: 1px 0 0;
   border-radius: 0; }
@@ -3207,7 +3210,7 @@ button.documents-load-more {
   color: #ffffff;
   border-radius: 2px; }
 
-.documents-collection-icon {
+.documents-collection-icon, .photos-collection-icon {
   background-color: rgba(92, 97, 108, 0.3);
   border-radius: 2px; }
 
@@ -3215,32 +3218,33 @@ button.documents-favorite:active,
 button.documents-favorite:active:hover {
   color: #a9caf1; }
 
-.documents-entry-tag {
+.documents-entry-tag, .photos-entry-tag {
   color: #ffffff;
   background: #5294E2;
   border-radius: 2px;
   border-width: 0;
   margin: 2px;
   padding: 4px; }
-  .documents-entry-tag:hover {
+  .documents-entry-tag:hover, .photos-entry-tag:hover {
     color: #ffffff;
     background: #639fe5; }
-  .documents-entry-tag:active {
+  .documents-entry-tag:active, .photos-entry-tag:active {
     color: #ffffff;
     background: #4189df; }
-  toolbar .linked .documents-entry-tag button, .inline-toolbar .linked .documents-entry-tag button {
-    background: none;
-    border: none;
-    box-shadow: none;
-    -gtk-icon-shadow: none; }
-    toolbar .linked .documents-entry-tag button:hover, .inline-toolbar .linked .documents-entry-tag button:hover {
-      color: rgba(255, 255, 255, 0.7); }
 
 .content-view.document-page {
   border-style: solid;
   border-width: 3px 3px 6px 4px;
   border-image: url("assets/thumbnail-frame.png") 3 3 6 4; }
 
+.photos-fade-in {
+  opacity: 1.0;
+  transition: opacity 0.2s ease-out; }
+
+.photos-fade-out {
+  opacity: 0.0;
+  transition: opacity 0.2s ease-out; }
+
 .tr-workarea undershoot,
 .tr-workarea overshoot {
   border-color: transparent; }

common/gtk-3.0/3.20/gtk-solid.css

@@ -3202,6 +3202,9 @@ dockoverlayedge {
   dockoverlayedge.right-edge tab:checked {
     border-width: 1px 0; }
 
+.documents-scrolledwin.frame {
+  border-width: 0; }
+
 button.documents-load-more {
   border-width: 1px 0 0;
   border-radius: 0; }
@@ -3211,7 +3214,7 @@ button.documents-load-more {
   color: #ffffff;
   border-radius: 2px; }
 
-.documents-collection-icon {
+.documents-collection-icon, .photos-collection-icon {
   background-color: rgba(92, 97, 108, 0.3);
   border-radius: 2px; }
 
@@ -3219,32 +3222,33 @@ button.documents-favorite:active,
 button.documents-favorite:active:hover {
   color: #a9caf1; }
 
-.documents-entry-tag {
+.documents-entry-tag, .photos-entry-tag {
   color: #ffffff;
   background: #5294E2;
   border-radius: 2px;
   border-width: 0;
   margin: 2px;
   padding: 4px; }
-  .documents-entry-tag:hover {
+  .documents-entry-tag:hover, .photos-entry-tag:hover {
     color: #ffffff;
     background: #639fe5; }
-  .documents-entry-tag:active {
+  .documents-entry-tag:active, .photos-entry-tag:active {
     color: #ffffff;
     background: #4189df; }
-  toolbar .linked .documents-entry-tag button, .inline-toolbar .linked .documents-entry-tag button {
-    background: none;
-    border: none;
-    box-shadow: none;
-    -gtk-icon-shadow: none; }
-    toolbar .linked .documents-entry-tag button:hover, .inline-toolbar .linked .documents-entry-tag button:hover {
-      color: rgba(255, 255, 255, 0.7); }
 
 .content-view.document-page {
   border-style: solid;
   border-width: 3px 3px 6px 4px;
   border-image: url("assets/thumbnail-frame.png") 3 3 6 4; }
 
+.photos-fade-in {
+  opacity: 1.0;
+  transition: opacity 0.2s ease-out; }
+
+.photos-fade-out {
+  opacity: 0.0;
+  transition: opacity 0.2s ease-out; }
+
 .tr-workarea undershoot,
 .tr-workarea overshoot {
   border-color: transparent; }

common/gtk-3.0/3.20/gtk.css

@@ -3202,6 +3202,9 @@ dockoverlayedge {
   dockoverlayedge.right-edge tab:checked {
     border-width: 1px 0; }
 
+.documents-scrolledwin.frame {
+  border-width: 0; }
+
 button.documents-load-more {
   border-width: 1px 0 0;
   border-radius: 0; }
@@ -3211,7 +3214,7 @@ button.documents-load-more {
   color: #ffffff;
   border-radius: 2px; }
 
-.documents-collection-icon {
+.documents-collection-icon, .photos-collection-icon {
   background-color: rgba(92, 97, 108, 0.3);
   border-radius: 2px; }
 
@@ -3219,32 +3222,33 @@ button.documents-favorite:active,
 button.documents-favorite:active:hover {
   color: #a9caf1; }
 
-.documents-entry-tag {
+.documents-entry-tag, .photos-entry-tag {
   color: #ffffff;
   background: #5294E2;
   border-radius: 2px;
   border-width: 0;
   margin: 2px;
   padding: 4px; }
-  .documents-entry-tag:hover {
+  .documents-entry-tag:hover, .photos-entry-tag:hover {
     color: #ffffff;
     background: #639fe5; }
-  .documents-entry-tag:active {
+  .documents-entry-tag:active, .photos-entry-tag:active {
     color: #ffffff;
     background: #4189df; }
-  toolbar .linked .documents-entry-tag button, .inline-toolbar .linked .documents-entry-tag button {
-    background: none;
-    border: none;
-    box-shadow: none;
-    -gtk-icon-shadow: none; }
-    toolbar .linked .documents-entry-tag button:hover, .inline-toolbar .linked .documents-entry-tag button:hover {
-      color: rgba(255, 255, 255, 0.7); }
 
 .content-view.document-page {
   border-style: solid;
   border-width: 3px 3px 6px 4px;
   border-image: url("assets/thumbnail-frame.png") 3 3 6 4; }
 
+.photos-fade-in {
+  opacity: 1.0;
+  transition: opacity 0.2s ease-out; }
+
+.photos-fade-out {
+  opacity: 0.0;
+  transition: opacity 0.2s ease-out; }
+
 .tr-workarea undershoot,
 .tr-workarea overshoot {
   border-color: transparent; }

common/gtk-3.0/3.20/sass/_applications.scss

@@ -362,6 +362,8 @@ dockoverlayedge {
 //
 // Gnome Documents
 //
+.documents-scrolledwin.frame { border-width: 0; }
+
 button.documents-load-more {
   border-width: 1px 0 0;
   border-radius: 0;
@@ -399,15 +401,6 @@ button.documents-favorite:active:hover {
     color: $selected_fg_color;
     background: darken($selected_bg_color, 4%);
   }
-
-  toolbar .linked & button {
-    background: none;
-    border: none;
-    box-shadow: none;
-    -gtk-icon-shadow: none;
-
-    &:hover { color: transparentize($selected_fg_color, 0.3) }
-  }
 }
 
 .content-view.document-page {
@@ -416,6 +409,23 @@ button.documents-favorite:active:hover {
   border-image: url("assets/thumbnail-frame.png") 3 3 6 4;
 }
 
+//
+// Gnome Photos
+//
+.photos-entry-tag { @extend .documents-entry-tag; }
+
+.photos-collection-icon { @extend .documents-collection-icon; }
+
+.photos-fade-in {
+    opacity: 1.0;
+    transition: opacity 0.2s ease-out;
+}
+
+.photos-fade-out {
+    opacity: 0.0;
+    transition: opacity 0.2s ease-out;
+}
+
 //
 // Transmission
 //