turn the synopsis.png into css

ghc.mk

@@ -44,9 +44,7 @@ utils/haddock_dist_DATA_FILES += html/Ocean.theme/hslogo-16.png
 utils/haddock_dist_DATA_FILES += html/Ocean.theme/minus.gif
 utils/haddock_dist_DATA_FILES += html/Ocean.theme/ocean.css
 utils/haddock_dist_DATA_FILES += html/Ocean.theme/plus.gif
-utils/haddock_dist_DATA_FILES += html/Ocean.theme/synopsis.png
 utils/haddock_dist_DATA_FILES += html/Linuwial.std-theme/linuwial.css
-utils/haddock_dist_DATA_FILES += html/Linuwial.std-theme/synopsis.png
 utils/haddock_dist_DATA_FILES += html/solarized.css
 utils/haddock_dist_DATA_FILES += html/highlight.js
 utils/haddock_dist_DATA_FILES += latex/haddock.sty

haddock-api/haddock-api.cabal

@@ -34,9 +34,7 @@ data-files:
   html/Ocean.theme/minus.gif
   html/Ocean.theme/ocean.css
   html/Ocean.theme/plus.gif
-  html/Ocean.theme/synopsis.png
   html/Linuwial.std-theme/linuwial.css
-  html/Linuwial.std-theme/synopsis.png
   latex/haddock.sty
 
 library

haddock-api/resources/html/Linuwial.std-theme/linuwial.css

@@ -531,17 +531,21 @@ table.info {
 #synopsis summary {
   display: block;
   float: right;
-  width: 29px;
-  color: rgba(255,255,255,0);
-  height: 110px;
+  color: #536371;
   margin: 0;
-  font-size: 1px;
-  padding: 0;
-  background: url(synopsis.png) no-repeat 0px -8px;
+  padding: 5px;
+  writing-mode: vertical-rl;
+  background: rgb(250,247,224);
+  rotate: 180deg;
+}
+#synopsis summary::after {
+  content: "\2A20";
+  rotate: -90deg;
+  color: #b0b0af;
+  display: inline-block;
 }
-
-#synopsis details[open] > summary {
-  background: url(synopsis.png) no-repeat -75px -8px;
+#synopsis details[open] > summary::after {
+  rotate: 90deg;
 }
 
 #synopsis details:not([open]) > ul {

haddock-api/resources/html/Ocean.theme/ocean.css

@@ -358,18 +358,22 @@ div#style-menu-holder {
 
 #synopsis summary {
   display: block;
-  float: left;
-  width: 29px;
-  color: rgba(255,255,255,0);
-  height: 110px;
+  float: right;
+  color: #536371;
   margin: 0;
-  font-size: 1px;
-  padding: 0;
-  background: url(synopsis.png) no-repeat 0px -8px;
-}
-
-#synopsis details[open] > summary {
-  background: url(synopsis.png) no-repeat -64px -8px;
+  padding: 5px;
+  writing-mode: vertical-rl;
+  background: rgb(250,247,224);
+  rotate: 180deg;
+}
+#synopsis summary::after {
+  content: "\2A20";
+  rotate: -90deg;
+  color: #b0b0af;
+  display: inline-block;
+}
+#synopsis details[open] > summary::after {
+  rotate: 90deg;
 }
 
 #synopsis ul {