File _service:tar_git:Sailfish-CSS.patch of Package harbour-privoxy

diff --git a/templates/cgi-style.css b/templates/cgi-style.css
index 135786185..28afb96f2 100644
--- a/templates/cgi-style.css
+++ b/templates/cgi-style.css
@@ -37,8 +37,53 @@
 /*
  * General rules: Font, Color, Headings, Margins, Links
  */
-body,td,th { font-family: arial, helvetica, helv, sans-serif; }
-body { background-color: #ffffff; color: #000000; }
+
+
+/* Sailfish: make everything bigger: */
+
+/* body,td,th { font-family: sans-serif, arial, helvetica, helv; } */
+/* body { background-color: #ffffff; color: #000000; } */
+/* stolen from https://sailfishos.org/wiki/ */
+/* body{font-family:"sail sans pro","DejaVu Sans", "Helvetica Neue",Helvetica,Arial,sans-serif;font-size:32px;line-height:1.42857143;color:#333;background-color:#fff} */
+body{
+    font-family: system-ui, ui-sans-serif, ui-rounded, "DejaVu Sans Condensed", "sail sans pro light", "DejaVu Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size:32px;
+    line-height:1.42857143;
+    color:#333;
+    background-color:#eee;
+}
+
+html {
+  margin:     0 auto;
+}
+
+/* Xperia 10/X/XA2 portrait */
+@media screen and (max-width: 1080px) {
+  html {
+    max-width:  1000px;
+  }
+}
+
+/* Xperia X/XA2 landscape */
+@media screen and (max-width: 1920px) {
+  html {
+    max-width:  1860px;
+  }
+}
+
+/* Xperia 10 landscape */
+@media screen and (max-width: 2520px) {
+  html {
+    max-width:  2480px;
+  }
+}
+
+/* Tablet ??? */
+@media screen and (max-width: 2048px) {
+  html {
+    max-width:  2000px;
+  }
+}
 
 h1 { font-size: 140%; margin: 0px; }
 h2 { font-size: 120%; margin: 0px; }
@@ -48,17 +93,17 @@ p,pre  { margin-left: 15px; }
 li { margin: 2px 15px; }
 dl { margin: 2px 15px; }
 
-a:link    { color: #0000dd; text-decoration: none; }
-a:visited { color: #330099; text-decoration: none; }
-a:active  { color: #3333ff; text-decoration: none; }
-
+a:link    { color: #007070; text-decoration: none;  font-weight: bold;}
+a:visited { color: #7ebec5; text-decoration: none;  font-weight: bold;}
+a:active  { color: #3333ff; text-decoration: none;  font-weight: bold;}
+a:hover   { color: #23527c; text-decoration: underline;  font-weight: bold;}
 /*
  * Boxen as Table elements:
  */
-td.title   { border: solid black 1px; background-color: #dddddd; }
-td.box     { border: solid black 1px; background-color: #eeeeee; }
-td.info    { border: solid black 1px; background-color: #ccccff; }
-td.warning { border: solid black 1px; background-color: #ffdddd; }
+td.title   { border: solid black 1px; background-color: #eeeeee; }
+td.box     { border: solid black 1px; background-color: #ffffff; }
+td.info    { border: solid black 1px; background-color: #d9edf7; }
+td.warning { border: solid black 1px; background-color: #fcf8e3; }
 
 /*
  * Special Table Boxen: for nesting, naked container and for
@@ -71,27 +116,30 @@ td.status  { border: solid black 1px; background-color: #ff0000; color: #ffffff;
 /*
  * Same Boxen as <div>s:
  */
-div.title    { border: solid black 1px; background-color: #dddddd; margin: 20px; padding: 20px; }
-div.box      { border: solid black 1px; background-color: #eeeeee; margin: 20px; padding: 20px; }
+div.title    { border: solid black 1px; background-color: #eeeeee; margin: 20px; padding: 20px; }
+div.box      { border: solid black 1px; background-color: #ffffff; margin: 20px; padding: 20px; }
 div.info     { border: solid black 1px; background-color: #ccccff; margin: 20px; padding: 20px; }
-div.warning  { border: solid black 1px; background-color: #ffdddd; margin: 20px; padding: 20px; }
+div.warning  { border: solid black 1px; background-color: #ffffdd; margin: 20px; padding: 20px; }
 div.wrapbox  { border: solid black 1px;                            margin: 20px; padding:  5px; }
 
 
 /*
  * Bold definitions in <dl>s, grey BG for table headings, transparent (no-bordered) table
  */
-dt { font-weight: bold; }
-th { background-color: #dddddd; }
+dt { font-family: ui-monospace,"DejaVu Sans Mono",Menlo,Monaco,Consolas,"Courier New",monospace,Courier ; }
+th {
+     background-color: #eee;
+}
 table.transparent { border-style: none}
+pre { font-family: ui-monospace,"DejaVu Sans Mono",Menlo,Monaco,Consolas,"Courier New",monospace,Courier ; }
 
 /*
  * Special purpose paragraphs: Small for page footers,
  * Important for quoting wrong or dangerous examples,
  * Whiteframed for the toggle?mini=y CGI
  */
-p.small { font-size: 10px; margin: 0px; }
-p.important { border: solid black 1px; background-color: #ffdddd; font-weight: bold; padding: 2px; }
+p.small { font-size: 14px; margin: 2px; }
+p.important { border: solid black 1px; background-color: #ffdddd; font-weight: bold; padding: 4px; }
 p.whiteframed { margin: 5px; padding: 5px; border: solid black 1px; text-align: center; background-color: #eeeeee; }
 
 /*
@@ -99,36 +147,47 @@ p.whiteframed { margin: 5px; padding: 5px; border: solid black 1px; text-align:
  */
 
 td.buttons {
-  padding: 2px;
+  padding: 8px;
+  margin: 4px;
+  min-width: 16em;
 }
 
 a.cmd, td.indentbuttons a, td.buttons a {
   white-space: nowrap;
   width: auto;
-  padding: 2px;
-  background-color: #dddddd;
+  padding: 4px 32px 4px 32px;
+  margin: 4px;
+  background-color: #ffffff;
   color:            #000000;
   text-decoration: none;
-  border-top:    1px solid #ffffff;
-  border-left:   1px solid #ffffff;
-  border-bottom: 1px solid #000000;
-  border-right:  1px solid #000000;
+  border-radius: 4px;
+  border-top:    2px solid #eeeeee;
+  border-left:   2px solid #eeeeee;
+  /*
+  border-bottom: 2px solid #23527c;
+  border-right:  2px solid #23527c;
+  */
+  border-bottom: 2px solid #007070;
+  border-right:  2px solid #007070;
 }
 a.cmd:hover, td.indentbuttons a:hover, td.buttons a:hover {
-  background-color: #eeeeee;
+  background-color: #ffffff;
 }
 a.cmd:active, td.indentbuttons a:active, td.buttons a:active {
-  border-top:    1px solid #000000;
-  border-left:   1px solid #000000;
-  border-bottom: 1px solid #ffffff;
-  border-right:  1px solid #ffffff;
+  /*background-color: #23527c;*/
+  background-color: #007070;
+  color: #ffffff;
+  border-top:    2px solid #eeeeee;
+  border-left:   2px solid #eeeeee;
+  border-bottom: 2px solid #eeeeee;
+  border-right:  2px solid #eeeeee;
 }
 
 
 /*
  * Special red emphasis:
  */
-em.warning, strong.warning { color: #ff0000 }
+em.warning, strong.warning { color: #ee0000 }
 
 /*
  * In show-status we use tables directly behind headlines
@@ -146,4 +205,27 @@ em.warning, strong.warning { color: #ff0000 }
  * width and try to prevent vertical scroll bars if the width
  * is less than 80 characters.
  */
-input.url, input.pattern { width: 95%; }
+input[type=text] { font-size: 24px; }
+input.url, input.pattern { width: 85%; height: 48px; font-size: 32px; }
+
+/*
+ * make Buttons bigger:
+ */
+input[type=radio] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  transform: scale(2.5); /* doesnt make it more clickable, but at least more visible... */
+  -webkit-transform: scale(2.5); /* Chrome, Safari, Opera */
+  border: 0px;
+  padding: 24px;
+}
+input[type=submit] {
+  font-size: 32px;
+  border: solid black 1px;
+  background-color: #eeeeee;
+  border-radius: 12px;
+  padding-left: 24px;
+  padding-right: 24px;
+  height: 48px;
+}