Add screenshot, update Readme

README.md

@@ -3,9 +3,7 @@
 [![Install with Stylus](https://img.shields.io/badge/install%20with-stylus-2AFEFE)](https://raw.githubusercontent.com/macx/google-photos-dark-mode/main/google-photos-dark-mode.user.css)
 [![Version](https://img.shields.io/github/tag/macx/google-photos-dark-mode.svg?label=version)](https://github.com/macx/google-photos-dark-mode/tags)
 
-This is the Dark Mode for Google Photos on Desktop.
-
-Status Feb 2022: THIS IS WORK IN PROGRESS!
+Google Photos has a really nice Dark Mode in the Mobile App, but the Googlers have forgotten the Web App. This is my implementation of a Dark Mode for Desktops.
 
 ## Installation
 
@@ -14,11 +12,13 @@ Status Feb 2022: THIS IS WORK IN PROGRESS!
 
 ## How does this work?
 
-With a so-called user styles, you can override the styles from the origin page within your browser. You are a single click away, to apply the Focus Mode to your Facebook.
+With a so-called user styles, you can override the styles from the origin page within your browser. You are a single click away, to apply the Dark Mode to your Google Photos Web App.
+
+![Preview Google Photos Dark Mode](assets/images/gpdm-screen.webp 'Dark Theme of Google Photos')
 
 ## Features
 
-TBA
+Restyled everything, including search bards, settings, modals and cards.
 
 ## Contribute
 

google-photos-dark-mode.user.css

@@ -95,6 +95,10 @@
     color: var(--clr-text);
   }
 
+  .bFJFBf {
+    color: var(--clr-text--light);
+  }
+
   /* Active item */
   .wDSX5e .DOAbib:hover,
   .wDSX5e .DOAbib.ixImeb:hover {
@@ -128,14 +132,21 @@
   .ApP0z,
   .Yyy4Hc,
   .v8h7Rd,
+  .rvEjke,
+  .IGdgBf,
+  .eT2rxc,
   .LjDxcd:not(:disabled) {
     color: var(--clr-text);
   }
 
   .QmUPuf,
   .IY6Oqb,
   .cigQ5,
-  .UmNiJe {
+  .UmNiJe,
+  .fYwTV,
+  .rN6Qmb,
+  .P0eWkf,
+  .kKG0Qd {
     color: var(--clr-text--light);
   }
 
@@ -157,7 +168,9 @@
   .eReC4e.FbgB9,
   .KQR9vc,
   .DcsHOb,
-  .fq5X0 {
+  .fq5X0,
+  .X0f2Ie,
+  .Rj2Mlf:not(:disabled) {
     border-color: var(--clr-line);
   }
 
@@ -294,12 +307,43 @@
     color: var(--clr-text);
   }
 
-  /* Form elements */
+  /*
+  ┌──────────────────────────────────┐
+    FORMS
+  └──────────────────────────────────┘
+  */
+
   .qURWqc .ajQY2 {
     background-color: var(--clr-bg);
     border-color: var(--clr-line);
   }
 
+  .kDzhGf
+    .VfPpkd-gBXA9-bMcfAe:enabled:not(:checked)
+    + .VfPpkd-RsCWK
+    .VfPpkd-wVo5xe-LkdAo {
+    border-color: var(--clr-icon);
+  }
+
+  .kDzhGf:hover
+    .VfPpkd-gBXA9-bMcfAe:enabled:not(:checked)
+    + .VfPpkd-RsCWK
+    .VfPpkd-wVo5xe-LkdAo,
+  .kDzhGf.VfPpkd-ksKsZd-mWPk3d-OWXEXe-AHe6Kc-XpnDCe
+    .VfPpkd-gBXA9-bMcfAe:enabled:not(:checked)
+    + .VfPpkd-RsCWK
+    .VfPpkd-wVo5xe-LkdAo,
+  .kDzhGf:not(.VfPpkd-ksKsZd-mWPk3d):focus
+    .VfPpkd-gBXA9-bMcfAe:enabled:not(:checked)
+    + .VfPpkd-RsCWK
+    .VfPpkd-wVo5xe-LkdAo,
+  .kDzhGf:active
+    .VfPpkd-gBXA9-bMcfAe:enabled:not(:checked)
+    + .VfPpkd-RsCWK
+    .VfPpkd-wVo5xe-LkdAo {
+    border-color: var(--clr-text);
+  }
+
   /*
   ┌──────────────────────────────────┐
     MENUS