Grey background for white icon classes

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

_shared_assets/themes/nextcloud_com/static/styles.css

@@ -3,8 +3,8 @@
 
 /* enable to reveal boxes everywhere  */
 /** {
-	border-style: solid;
-	border-color: red;
+    border-style: solid;
+    border-color: red;
  }*/
 
 @font-face {
@@ -78,13 +78,13 @@ img {
 }
 
 .btn-default {
-    /* 	background: rgba(240,240,240,.9); */
-    /* 	border: 1px solid rgba(210,210,210,.9); */
+    /*     background: rgba(240,240,240,.9); */
+    /*     border: 1px solid rgba(210,210,210,.9); */
 }
 
 .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
-    /* 	background: white; */
-    /* 	border: 1px solid rgba(240,240,240,.9); */
+    /*     background: white; */
+    /*     border: 1px solid rgba(240,240,240,.9); */
 }
 
 .btn-primary {
@@ -94,9 +94,9 @@ img {
 }
 
 .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
-    /* 	background: #428BCA; */
-    /* 	border: 1px solid #1D2D44; */
-    /* 	color: white; */
+    /*     background: #428BCA; */
+    /*     border: 1px solid #1D2D44; */
+    /*     color: white; */
 }
 
 /* button a {color: #1d2d44} */
@@ -975,7 +975,7 @@ img.desaturate {
     background-size: cover;
     -o-background-size: cover;
     /*    border: 0px; */
-    /* 	min-height: 450px; background-position: 35% 40%; */
+    /*     min-height: 450px; background-position: 35% 40%; */
     position: relative;
     margin-left: 0px !important;
     margin-right: 0px !important;
@@ -983,7 +983,7 @@ img.desaturate {
 }
 
 /*.ft-img-center {
-	margin: 0 auto;
+    margin: 0 auto;
 }*/
 
 .ft-sharing {
@@ -1020,7 +1020,7 @@ img.desaturate {
 
 @media (max-width: 767px) {
     .ft-everywhere-img {
-        /* 	height: auto; */
+        /*     height: auto; */
         width: 20%;
         right: 5%;
     }
@@ -1046,12 +1046,12 @@ img.desaturate {
 }
 
 /*.ft-img-overlay a {
-	display: table;
+    display: table;
 }*/
 
 /*.ft-img-overlay img {
-	width: 100%;
-	height: 100%;
+    width: 100%;
+    height: 100%;
 }*/
 
 .ft-play-overlay {
@@ -1060,9 +1060,9 @@ img.desaturate {
     top: 30%;
     left: 45%;
     margin-top: 10px;
-    /* 	width: 0px; */
-    /* 	height: 0px; */
-    /* 	padding: 50%; */
+    /*     width: 0px; */
+    /*     height: 0px; */
+    /*     padding: 50%; */
 }
 
 .youtube i {
@@ -1146,27 +1146,27 @@ li.next {
 
 /* Floating image on code */
 .figure.figure-with-code img {
-	margin: 0;
+    margin: 0;
 }
 .figure.figure-with-code {
-	float: right;
+    float: right;
     max-width: 40%;
     min-width: 200px;
 }
 .figure.figure-with-code + .code.html,
 .figure.figure-with-code + .highlight-html {
-	max-width: 59%;
+    max-width: 59%;
 }
 .figure.figure-with-code + .code.html::after,
 .figure.figure-with-code + .highlight-html::after {
-	content: ' ';
-	clear: both;
-	display: block;
+    content: ' ';
+    clear: both;
+    display: block;
 }
 
 /* Fix nested lists bold */
 li > dl > dt {
-	font-weight: inherit;
+    font-weight: inherit;
 }
 
 /* Icons grid */
@@ -1180,13 +1180,19 @@ li > dl > dt {
     text-align: center;
     flex: 10%;
 }
-#icons > blockquote > div > div:hover img {
-    filter: drop-shadow(0 0 10px black);
-}
 #icons > blockquote > div img {
-    margin: 10px;
-    transition: filter 100ms ease-in-out;
+    margin: 5px;
 }
 #icons > blockquote > div p {
-	font-size: inherit;
+    font-size: inherit;
+}
+#icons > blockquote > div a {
+    display: flex;
+    width: 42px;
+    height: 42px;
+    margin: auto;
+}
+#icons > blockquote > div > div a[href*='white'] {
+    background: #ddd;
+    border-radius: 50%;
 }

developer_manual/design/icons.rst

@@ -6,5 +6,7 @@
 Icons
 ========
 
+White icons only have a grey background on this documentation page for readability purposes.
+
  .. include:: icons.txt
     :class: icons-flex