Clean up and optimise CSS

Prefer readability over compactness. Repetition is fine, if it
helps with readability.

Took some tips from this validator: https://stylelint.io/demo/

Change-Id: I36108e2f063c848182503ea469d146bb00099a75
Reviewed-on: https://gerrit.libreoffice.org/c/help/+/180438
Tested-by: Olivier Hallot <olivier.hallot@libreoffice.org>
Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org>

1 files changed, 150 insertions, 204 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index 04a9305c11..184a7dfb3b 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -29,20 +29,20 @@ do not break anything related to layout by scaling.
 
 */
 :root {
-  --font_mono: Menlo, "Cascadia Mono", "Cascadia Code", Consolas, "DejaVu Sans Mono", monospace;
-  --font_body: Ubuntu, Cantarell, "Segoe UI Variable", "Segoe UI", "Noto Sans", "DejaVu Sans", "Lucida Grande", sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
+  --font-mono: Menlo, "Cascadia Mono", "Cascadia Code", Consolas, "DejaVu Sans Mono", monospace;
+  --font-body: Ubuntu, Cantarell, "Segoe UI Variable", "Segoe UI", "Noto Sans", "DejaVu Sans", "Lucida Grande", sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
   --background-color: #f7f8f7;
   --heading-color: #18A303;
-  --hover-color:green;
-  --link-color:#023a86;
-  --visited-color:purple;
+  --hover-color: green;
+  --link-color: #023a86;
+  --visited-color: purple;
 }
-/* Enable disable Javascript*/
+/* Enable disable Javascript */
 #WarnJS {
     margin: 20px;
-    display:block;
+    display: block;
 }
-#WarnJS h1{
+#WarnJS h1 {
     color: red;
     font-weight: bold;
     text-align: center;
@@ -59,27 +59,27 @@ h6,
 .listitem,
 .listitemintable,
 .tablecontent {
-    font-family: var(--font_body);
+    font-family: var(--font-body);
 }
 .input {
-    background-color: rgba(0,0,0,0.04);
+    background-color: rgb(0 0 0 / 4%);
     transition-property: background-color;
     transition-duration: 150ms;
-    border-bottom: 1px dashed rgba(0,0,0,0.1);
-    font-family: var(--font_mono);
+    border-bottom: 1px dashed rgb(0 0 0 / 10%);
+    font-family: var(--font-mono);
 }
-[data-tooltip]{
-  position:relative;
+[data-tooltip] {
+  position: relative;
 }
 [data-tooltip]::before {
     content: "";
     position: absolute;
-    top:-6px;
-    left:50%;
+    top: -6px;
+    left: 50%;
     transform: translateX(-50%);
-    border-width: 4px 6px 0 6px;
+    border-width: 4px 6px 0;
     border-style: solid;
-    border-color: rgba(0,0,0,0.7) transparent transparent transparent;
+    border-color: rgb(0 0 0 / 70%) transparent transparent;
     z-index: 100;
     opacity: 0;
     pointer-events: none;
@@ -87,20 +87,20 @@ h6,
 [data-tooltip]::after {
     content: attr(data-tooltip);
     position: absolute;
-    left:50%;
-    top:-6px;
+    left: 50%;
+    top: -6px;
     transform: translateX(-50%)   translateY(-100%);
-    background: rgba(0,0,0,0.7);
+    background: rgb(0 0 0 / 70%);
     text-align: center;
     color: #fff;
-    padding:4px 2px;
+    padding: 4px 2px;
     font-size: 12px;
     min-width: 80px;
     border-radius: 5px;
     opacity: 0;
     pointer-events: none;
 }
-[data-tooltip]:hover:before, [data-tooltip]:hover:after {
+[data-tooltip]:hover::before, [data-tooltip]:hover::after {
     opacity: 1;
     pointer-events: auto;
 }
@@ -113,7 +113,7 @@ body {
     background: #FFEB9F;
 }
 a {
-    text-decoration-color: rgba(0,0,0,0.15);
+    text-decoration-color: rgb(0 0 0 / 15%);
     color: var(--link-color);
 }
 a:hover {
@@ -132,12 +132,12 @@ pre,
 .literalintable,
 .path,
 .pathintable {
-    background-color: rgba(0,0,0,0.04);
+    background-color: rgb(0 0 0 / 4%);
     border-radius: 2px;
     display: inline;
     padding: 1px 3px;
-    font-family: var(--font_mono);
-    word-wrap: anywhere;
+    font-family: var(--font-mono);
+    overflow-wrap: anywhere;
 }
 /* prevent SVGs without width from overflowing the container */
 img[src$=".svg"] {
@@ -149,24 +149,23 @@ img[src$=".svg"] {
 .smathcode {
     border-radius: 2px;
     padding: 1px 3px;
-    font-family: var(--font_mono);
+    font-family: var(--font-mono);
 }
-.acronym {
+.acronym,
+.emph,
+.menuitem {
     font-weight: bold;
 }
 .related {
     font-weight: bold;
     margin-top: 1.67rem;
     border-top: 2px solid var(--heading-color);
-}
-.emph,
-.menuitem {
-    font-weight: bold;
+    color: var(--heading-color);
 }
 .keycode {
-    font-family: var(--font_mono);
+    font-family: var(--font-mono);
 }
-.widget{
+.widget {
     padding: 1px 10px;
     background: #f0f0f0;
     background: linear-gradient(to bottom,#f0f0f0,#fcfcfc);
@@ -180,7 +179,7 @@ img[src$=".svg"] {
 .note,
 .tip,
 .warning {
-    display:flex;
+    display: flex;
     align-items: center;
     border-radius: 2px;
     box-shadow: 0 2px 5px -3px rgb(0 0 0 / 10%);
@@ -200,7 +199,7 @@ img[src$=".svg"] {
     background-color: #f6f1d2;
 }
 .noteicon, .notetext {
-    padding:0.3em;
+    padding: 0.3em;
 }
 .noteicon {
     flex-shrink: 0;
@@ -216,24 +215,24 @@ pre[class*="language-"] > code {
 
 /* Table related classes */
 
-/* Special case of table with one cell*/
-.onecell{
-    box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px;
+/* Special case of table with one cell */
+.onecell {
+    box-shadow: rgb(0 0 0 / 10%) 0 1px 3px 0;
     border-bottom: 1px solid #E8E8E8;
 }
-/* Special case of icon table*/
+/* Special case of icon table */
 .icontable {
-    display:flex;
-    align-items:center;
+    display: flex;
+    align-items: center;
 }
 .iconcell {
-    padding:0.3em;
+    padding: 0.3em;
     /* background: var(--heading-color); */
 }
 
 table {
     background: var(--background-color);
-    box-shadow: rgba(0,0,0,0.08) 0 1px 5px 0;
+    box-shadow: rgb(0 0 0 / 8%) 0 1px 5px 0;
     border-collapse: collapse;
 }
 table, th, td {
@@ -243,18 +242,18 @@ table, th, td {
     border-right: 0;
     padding: 0.3em;
 }
-html[dir=ltr] th {
+html[dir="ltr"] th {
     text-align: left;
 }
 .tablehead,
 .tableheadintable {
     font-weight: bold;
-    margin-top: 0px;
+    margin-top: 0;
 }
 .tableheadcell {
     background: green;
     color: white;
-    vertical-align:top;
+    vertical-align: top;
 }
 
 .table_font_small {
@@ -265,13 +264,21 @@ html[dir=ltr] th {
 .sf_table {
     min-width: 100%;
 }
-.sf_table thead {
-    display: none;
-}
-.sf_table tr, .sf_table td {
+.sf_table tr,
+.sf_table td {
     display: block;
 }
 
+.sf_table thead,
+[data-a11y-toggle]:not([aria-controls]),
+.index .hidden,
+#langs-nav[hidden],
+#modules-nav[hidden],
+#langs,
+#modules {
+    display: none;
+}
+
 h1,
 h2,
 h3,
@@ -286,7 +293,7 @@ p,
 ol,
 td {
     font-size: 1.15rem;
-    margin: 2px 0 10px 0;
+    margin: 2px 0 10px;
 }
 h1 {
     font-size: 1.83rem;
@@ -294,7 +301,8 @@ h1 {
     border-bottom: 2px solid;
     margin-bottom: 1.67rem;
 }
-h1 a {
+h1 a,
+.pagination a {
     text-decoration: none;
 }
 h2 {
@@ -311,12 +319,6 @@ h6 {
 .relatedtopics {
     font-weight: normal;
 }
-.related {
-    font-weight: bold;
-    margin-top: 1.67rem;
-    border-top: 2px solid var(--heading-color);
-    color: var(--heading-color);
-}
 .howtoget {
     background: #EBE7E9;
     border-left: 2px solid #4E4B55;
@@ -329,7 +331,7 @@ h6 {
 .howtogetheader {
     background: #FFF;
     border-radius: 2px;
-    box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 2px -2px rgb(0 0 0 / 20%);
     display: inline-block;
     font-weight: bold;
     padding: 0.1em 0.3em;
@@ -339,7 +341,8 @@ h6 {
 }
 /*.samplefilesection{}*/
 
-.wide {
+.wide,
+#search-bar {
     width: 100%;
 }
 .bug {
@@ -363,7 +366,7 @@ h6 {
 #DisplayArea {
     background-color: #FCFCFC;
     overflow: auto;
-    padding: 10px 10px 40px 10px;
+    padding: 10px 10px 40px;
     grid-area: main;
 }
 #omega-autofocus {
@@ -372,21 +375,18 @@ h6 {
 .mediabutton {
     background-color: cyan;
 }
-.mediadiv{
-    padding-bottom:5%;
-    height:0;
-    display:inline-block;
-    border:none;
+.mediadiv {
+    padding-bottom: 5%;
+    height: 0;
+    display: inline-block;
+    border: none;
 }
 .screenshot, .genericimage {
-    border: .5px solid rgba(0,0,0,.1);
+    border: .5px solid rgb(0 0 0 / 10%);
     border-radius: 3px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 2em;
-    margin-bottom: 2em;
-    display:block;
-    box-shadow: rgba(0,0,0,0.08) 0 1px 5px 0;
+    margin: 2em auto;
+    display: block;
+    box-shadow: rgb(0 0 0 / 8%) 0 1px 5px 0;
 }
 /* .iconimage{} */
 /* .switch, */
@@ -397,7 +397,7 @@ h6 {
     background: var(--heading-color);
     grid-area: header;
     position: sticky;
-    top: 0px;
+    top: 0;
     color: #fff;
     display: flex;
     flex-wrap: wrap;
@@ -406,8 +406,7 @@ h6 {
 }
 .dropdowns {
     /* allow for scrolling */
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: auto hidden;
     /* make it smooth on iOS */
     -webkit-overflow-scrolling: touch;
     grid-area: dropdowns;
@@ -431,20 +430,17 @@ h6 {
     padding: 8px 8px 8px 20px;
 }
 .symbol div {
-    background-image: url(media/navigation/libo-symbol-white.svg);
+    background-image: url("media/navigation/libo-symbol-white.svg");
     background-repeat: no-repeat;
     background-size: contain;
     width: 52px;
     height: 60px;
 }
 
-[data-a11y-toggle]:not([aria-controls]) {
-  display: none;
-}
-/* You Tube matters */
-.youtube_placeholder{
+/* YouTube matters */
+.youtube_placeholder {
     border: 1px dashed #eee;
-    max-width:700px;
+    max-width: 700px;
     padding: 10px;
     background-color: var(--background-color);
     text-align: center;
@@ -455,7 +451,7 @@ h6 {
   background-color: #27ae60;
   border-radius: 8px;
   border-style: none;
-  box-shadow: rgba(39, 174, 96, .15) 0 4px 9px;
+  box-shadow: rgb(39 174 96 / 15%) 0 4px 9px;
   box-sizing: border-box;
   color: #fff;
   cursor: pointer;
@@ -483,7 +479,7 @@ h6 {
   opacity: 1;
   transform: translateY(0);
   transition-duration: .35s;
-  box-shadow: rgba(39, 174, 96, .2) 0 6px 12px;
+  box-shadow: rgb(39 174 96 / 20%) 0 6px 12px;
 }
 .youtube_button:active {
   transform: translateY(2px);
@@ -496,8 +492,7 @@ h6 {
     display: flex;
     flex-direction: row;
     /* allow for scrolling */
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: auto hidden;
     /* make it smooth on iOS */
     -webkit-overflow-scrolling: touch;
 }
@@ -519,7 +514,7 @@ footer {
 footer p {
     font-size: 0.98rem;
 }
-.contents-treeview input[type=checkbox], aside input[type=checkbox] {
+.contents-treeview input[type="checkbox"], aside input[type="checkbox"] {
     /* from .visuallyhidden class of html5-boilerplate */
     border: 0;
     clip: rect(0 0 0 0);
@@ -531,44 +526,39 @@ footer p {
     width: 1px;
     white-space: nowrap;
 }
-label[for=accordion-1] {
+label[for="accordion-1"] {
     color: #233336;
     display: block;
     margin: 0 0 10px 10px;
     font-size: 22px;
 }
-label[for=accordion-1]:after {
+label[for="accordion-1"]::after {
     font-size: 44px;
-    content:"⌄";
+    content: "⌄";
 }
-aside input[type=checkbox] ~ .contents-treeview {
+aside input[type="checkbox"] ~ .contents-treeview {
     display: none;
 }
-aside input[type=checkbox]:checked ~ .contents-treeview {
+aside input[type="checkbox"]:checked ~ .contents-treeview {
     color: #333;
     z-index: 6;
     display: block;
-    margin: 0 20px 20px 20px;
+    margin: 0 20px 20px;
 }
 .index-label {
     font-size: 22px;
     color: #233336;
     padding-left: 20px;
-    margin: 20px 0 0 0;
+    margin: 20px 0 0;
 }
 .index {
     margin-top: 10px;
-}
-.index {
     padding-left: 15px;
 }
 .index a {
     font-size: 15px;
     display: block;
 }
-.index .hidden, #langs-nav[hidden], #modules-nav[hidden] {
-    display: none;
-}
 #Bookmarks {
     width: 300px;
     margin-left: 10px;
@@ -649,9 +639,6 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
     display: inline-block;
     padding: 0 5px;
 }
-.pagination a {
-    text-decoration: none;
-}
 li.active {
     background-color: #023a86;
 }
@@ -664,7 +651,7 @@ li.disabled a {
 }
 #search-bar, input {
     border: 1px solid #CCC;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 10%);
     box-sizing: border-box;
     line-height: 1.5em;
     outline: none;
@@ -674,9 +661,6 @@ li.disabled a {
 #search-bar:focus, input:focus {
     border: 1px solid #0EA5FB;
 }
-#search-bar {
-    width: 100%;
-}
 #search-bar::placeholder {
     font-style: italic;
 }
@@ -695,20 +679,20 @@ li.disabled a {
 .xapian-donation {
     border-top: 2px solid #148603;
     background-color: #FCFCFC;
-    box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
+    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 5%);
 }
 #DonationFrame {
     background: var(--background-color);
     position: sticky;
-    top: 0px;
+    top: 0;
 }
-.donation{
+.donation {
     border: 1px solid #f1c62a;
     border-radius: 2px;
-    padding: 10px 10px;
+    padding: 10px;
     margin: 5px 10px;
     max-width: 200px;
-    color: #ffffff;
+    color: white;
 }
 .donation:hover {
     background: linear-gradient(90deg, #1c71d8 0%, #30c877 100%);
@@ -718,11 +702,11 @@ li.disabled a {
     text-decoration: none;
 }
 .donation p {
-    font-size:1rem;
+    font-size: 1rem;
     text-align: center;
 }
 #SearchFrame {
-    top: 0px;
+    top: 0;
     position: sticky;
     z-index: 1;
 }
@@ -733,17 +717,14 @@ li.disabled a {
     border-bottom: 2px solid #f3f3f3;
     background-color: #233336;
 }
-#modules:after, #langs:after {
+#modules::after, #langs::after {
     font-size: 30px;
     color: #fff;
-    content:"⌄";
+    content: "⌄";
 }
 .lang {
     background-color: #233336;
 }
-#langs, #modules {
-    display: none;
-}
 #modules-nav div {
     background-repeat: no-repeat;
     background-size: contain;
@@ -766,31 +747,31 @@ li.disabled a {
     margin-right: 5px;
 }
 .office-icon {
-    background-image: url(media/navigation/libo-symbol-black.svg);
+    background-image: url("media/navigation/libo-symbol-black.svg");
 }
 .calc-icon {
-    background-image: url(media/navigation/libo-calc.svg);
+    background-image: url("media/navigation/libo-calc.svg");
 }
 .writer-icon {
-    background-image: url(media/navigation/libo-writer.svg);
+    background-image: url("media/navigation/libo-writer.svg");
 }
 .impress-icon {
-    background-image: url(media/navigation/libo-impress.svg);
+    background-image: url("media/navigation/libo-impress.svg");
 }
 .draw-icon {
-    background-image: url(media/navigation/libo-draw.svg);
+    background-image: url("media/navigation/libo-draw.svg");
 }
 .math-icon {
-    background-image: url(media/navigation/libo-math.svg);
+    background-image: url("media/navigation/libo-math.svg");
 }
 .base-icon {
-    background-image: url(media/navigation/libo-base.svg);
+    background-image: url("media/navigation/libo-base.svg");
 }
 .chart-icon {
-    background-image: url(media/navigation/libo-chart.svg);
+    background-image: url("media/navigation/libo-chart.svg");
 }
 .basic-icon {
-    background-image: url(media/navigation/libo-basic.svg);
+    background-image: url("media/navigation/libo-basic.svg");
 }
 /* tree view */
 
@@ -802,7 +783,6 @@ li.disabled a {
     font-size: 15px;
 }
 .contents-treeview {
-    -moz-user-select: none;
     -webkit-user-select: none;
     user-select: none;
 }
@@ -811,7 +791,7 @@ li.disabled a {
     line-height: 1.4;
 }
 .contents-treeview a:hover, .index a:hover {
-    border-left: 2px solid rgba(0,0,0,0.05);
+    border-left: 2px solid rgb(0 0 0 / 5%);
     margin-left: -12px;
     padding-left: 10px;
 }
@@ -822,7 +802,7 @@ li.disabled a {
     display: none;
 }
 .contents-treeview label,
-.contents-treeview label:before {
+.contents-treeview label::before {
     cursor: pointer;
     color: #111;
 }
@@ -839,7 +819,7 @@ li.disabled a {
     display: block;
     vertical-align: middle;
 }
-.contents-treeview label:before {
+.contents-treeview label::before {
     content: "⊞";
     color: #0461e0;
     width: 16px;
@@ -850,7 +830,7 @@ li.disabled a {
     content: "⊟";
 }
 .contents-current {
-    background: rgba(0,0,0,0.1);
+    background: rgb(0 0 0 / 10%);
     border-left: 2px solid #6E7487;
     margin-left: -12px;
     padding-left: 10px;
@@ -870,7 +850,7 @@ li.disabled a {
         }
     }
 }
-@media screen and (min-width: 960px) {
+@media screen and (width >= 960px) {
     html {
         scroll-padding-top: 64px;
     }
@@ -896,6 +876,7 @@ li.disabled a {
         display: flex;
         justify-content: space-between;
         align-items: center;
+        background: var(--heading-color);
     }
     .index-label {
         color: #fff;
@@ -905,17 +886,18 @@ li.disabled a {
         display: flex;
         justify-content: space-between;
         align-items: center;
+        background-color: var(--heading-color);
     }
     #Contents {
         color: #333;
         z-index: 6;
         display: block;
-        margin: 0 20px 0 20px;
+        margin: 0 20px;
     }
-    label[for=accordion-1] {
+    label[for="accordion-1"] {
         margin: 0;
     }
-    label[for=accordion-1]:after {
+    label[for="accordion-1"]::after {
         content: "";
         font-size: unset;
     }
@@ -924,11 +906,7 @@ li.disabled a {
     }
     .dropdowns {
         flex-direction: row;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
-    #langs-nav, #modules-nav {
-        display: none;
+        overflow: hidden auto;
     }
     #langs-nav a {
         font-size: 19px;
@@ -971,15 +949,7 @@ li.disabled a {
     }
     .leftside {
         grid-area: leftside;
-        padding: 40px 10px 0 10px;
-    }
-    #DonationFrame {
-        grid-area: donation;
-        background-color: var(--heading-color);
-    }
-    #SearchFrame {
-        background: var(--heading-color);
-        grid-area: search;
+        padding: 40px 10px 0;
     }
     footer {
         grid-area: footer;
@@ -992,7 +962,7 @@ li.disabled a {
         background-color: transparent;
     }
     #DisplayArea {
-        box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
+        box-shadow: 0 2px 8px 0 rgb(0 0 0 / 5%);
         padding: 40px 50px;
     }
     .xapian-omega-search {
@@ -1016,7 +986,7 @@ li.disabled a {
         display: table-cell;
     }
 }
-@media screen and (min-width: 1440px) {
+@media screen and (width >= 1440px) {
     body {
         display: grid;
         grid-template-columns: 1fr 360px 100px 400px 400px 1fr;
@@ -1026,10 +996,7 @@ li.disabled a {
                              ". footer footer footer footer .";
     }
     #TopLeftHeader {
-        display: grid;
-        align-items: end;
         grid-template-columns: 1fr auto auto;
-        grid-template-rows: auto auto;
         grid-template-areas: ". symbol logo"
                              ". symbol dropdowns";
     }
@@ -1043,12 +1010,12 @@ li.disabled a {
     .donation {
         max-width: 300px;
     }
-    label[for=accordion-1] {
+    label[for="accordion-1"] {
         background-color: transparent;
         text-decoration: none;
-        color:var(--heading-color);
+        color: var(--heading-color);
     }
-    label[for=accordion-1]:hover {
+    label[for="accordion-1"]:hover {
         background-color: transparent;
     }
 }
@@ -1056,9 +1023,9 @@ li.disabled a {
     :root {
         --background-color: #002a1a;
         --heading-color: #ddffee;
-        --hover-color:#60ec93;
-        --link-color:#BB86FC;
-        --visited-color:#CF6679;
+        --hover-color: #60ec93;
+        --link-color: #BB86FC;
+        --visited-color: #CF6679;
     }
 
     body {
@@ -1103,8 +1070,8 @@ li.disabled a {
 
     .widget {
         background: #808080;
-        border-color: #eeeeee;;
-        color:#eeeeee;
+        border-color: #eee;
+        color: #eee;
         font-weight: bold;
     }
     .iconimage {
@@ -1119,7 +1086,7 @@ li.disabled a {
     }
 
     .howtogetheader {
-        background: #333333;
+        background: #333;
     }
 
     .youtube_placeholder {
@@ -1143,10 +1110,16 @@ li.disabled a {
     }
 
     .pagination li.disabled a {
-        color: #666666;
+        color: #666;
     }
 
-    footer {
+    footer,
+    #TopLeftHeader,
+    #DonationFrame,
+    .dropdowns,
+    #langs-nav a, #modules-nav a,
+    #SearchFrame,
+    .donation {
         background-color: var(--background-color);
     }
 
@@ -1155,55 +1128,28 @@ li.disabled a {
     }
 
     .contents-current {
-        background: #333333;
+        background: #333;
         border-left-color: #BB86FC;
     }
     .contents-treeview label,
-    .contents-treeview label:before {
+    .contents-treeview label::before {
         cursor: pointer;
         color: var(--heading-color);
     }
-    #TopLeftHeader {
-        background-color: var(--background-color);
-    }
-    #DonationFrame {
-        background-color: var(--background-color);
-    }
     #DisplayArea
     {
         background-color: var(--background-color);
-        color:#efefef
+        color: #efefef
     }
-    .dropdowns {
-        background-color: var(--background-color);
-    }
-
-    #langs-nav a, #modules-nav a {
-        background-color: var(--background-color);
-    }
-
-    #SearchFrame {
-        background-color: var(--background-color);
-    }
-
-    .xapian-donation {
-        background-color: #1E1E1E;
-    }
-
-    .donation {
-        background-color: var(--background-color);
+    .xapian-donation,
+    .sf_table {
+        background-color: #1e1e1e;
     }
-
     .donation:hover {
         background: linear-gradient(90deg, #3700B3 0%, #03DAC6 100%);
     }
-
-    .sf_table {
-        background-color: #1E1E1E;
-    }
-
     .sf_table td {
-        border-color: #333333;
+        border-color: #333;
     }
     .screenshot, .genericimage {
         background-color: whitesmoke;
@@ -1211,7 +1157,7 @@ li.disabled a {
     .tableheadcell {
         background: var(--background-color);
         color: var(--heading-color);
-        vertical-align:top;
+        vertical-align: top;
     }
 }