File _service:tar_git:cgi-style.css of Package harbour-privoxy

##############################################################################
#
# File        :  templates/cgi-style.css
#
# Purpose     :  Style sheet for the web-based config interface.
#
# Copyright   :  Written by and Copyright (C) 2001 members of the
#                Privoxy team. https://www.privoxy.org/
#
#                Original Author: Copyright (C) 2001 Jonathan Foster
#                http://www.jon-foster.co.uk/
#
#                This program is free software; you can redistribute it
#                and/or modify it under the terms of the GNU General
#                Public License as published by the Free Software
#                Foundation; either version 2 of the License, or (at
#                your option) any later version.
#
#                This program is distributed in the hope that it will
#                be useful, but WITHOUT ANY WARRANTY; without even the
#                implied warranty of MERCHANTABILITY or FITNESS FOR A
#                PARTICULAR PURPOSE.  See the GNU General Public
#                License for more details.
#
#                The GNU General Public License should be included with
#                this file.  If not, you can view it at
#                http://www.gnu.org/copyleft/gpl.html
#                or write to the Free Software Foundation, Inc., 59
#                Temple Place - Suite 330, Boston, MA  02111-1307, USA.
#
##############################################################################

.footer {
  position: fixed;
  bottom: 0;
  color: white;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.089);
  font-size: 20px;
  font-weight: bolder;
  backdrop-filter: blur(5px);
  width: 775px;
  border-radius: 20px;
  padding-left: 0px;
  padding-right: 0px;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 50px
  }

body,
  td,
  th {
  border-radius: 20px;
  font-family: arial, helvetica, helv, sans-serif;
  }
  
  body {
    background-color: rgb(0, 0, 90); 
    background-image: url(http://config.privoxy.org/user-manual/gradient.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }

a:link {
    color: #ff0000;
    text-decoration: none;
    }
    
  a:visited {
    color: #ff0000;
    text-decoration: none;
    }
  
  h1 {
  font-size: 140%;
  margin: 0px;
  }
  
  h2 {
  font-size: 20px;
  margin: 0px;
  }
  
  h3 {
  font-size: 110%;
  margin: 0px;
  }
  
  p,
  pre {
  margin-left: 15px;
  }
  
  li {
  margin: 2px 15px;
  }
  
  dl {
  margin: 2px 15px;
  }
  
  .pointer {
  cursor: pointer;
  }

/* Buttons */
  .pushable {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
  }
  .shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }
  .edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(
      to left,
      hsl(340deg 100% 16%) 0%,
      hsl(340deg 100% 32%) 8%,
      hsl(340deg 100% 32%) 92%,
      hsl(340deg 100% 16%) 100%
    );
  }
  .front {
    display: block;
    position: relative;
    padding: 12px 42px;
    border-radius: 12px;
    font-size: 1.25rem;
    color: white;
    background: hsl(345deg 100% 47%);
    will-change: transform;
    transform: translateY(-4px);
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }
  .pushable:hover {
    filter: brightness(110%);
  }
  .pushable:hover .front {
    transform: translateY(-6px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  }
  .pushable:active .front {
    transform: translateY(-2px);
    transition: transform 34ms;
  }
  .pushable:hover .shadow {
    transform: translateY(4px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  }
  .pushable:active .shadow {
    transform: translateY(1px);
    transition: transform 34ms;
  }
  .pushable:focus:not(:focus-visible) {
    outline: none;
  }
  
  /*
  * Boxen as Table elements:
  */
  td.title {
  background-color: #dddddd;
  }
  
  td.box {
  background-color: #eeeeee;
  }
  
  td.info {
  background-color: #ccccff;
  }
  
  td.warning {
  background-color: #ffdddd;
  }
  
  /* Blur */
  /*
  * Special Table Boxen: for nesting, naked container and for
  * the Status field in CGI Output:
  */
  td.wrapbox {
  padding: 5px;
  }
  
  td.container {
  padding: 0px;
  }
  
  td.error {
  background-color: #ff0000;
  color: #ffffff;
  font-size: 70px;
  font-weight: bolder;
  text-align: center;
  margin: auto;
  }
  
  h2.error {
  background-color: #ff0000;
  color: #ffffff;
  font-size: 70px;
  font-weight: bolder;
  text-align: center;
  margin: auto;
  }
  
  td.warn {
  background-color: #ffae00;
  color: #ffffff;
  font-size: 70px;
  font-weight: bolder;
  text-align: center;
  margin: auto;
  }
  
  h2.warn {
  background-color: #ffae00;
  color: #ffffff;
  font-size: 70px;
  font-weight: bolder;
  text-align: center;
  margin: auto;
  }
  
  td.default {
  background-color: rgba(255, 255, 255, 0.089);
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-weight: bolder;
  margin: auto;
  text-align: center;
  backdrop-filter: blur(8px);
  }

ul.image-button {
    background-color: rgba(255, 255, 255, 0.089);
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: bolder;
    margin: auto;
    text-align: center;
    backdrop-filter: blur(8px);
    }

td.cat {
    font-weight: bolder;
    margin: auto;
    text-align: center;
    max-width: 400px;
    max-height: 550px;
  }
  
  h2.default {
    background-color: rgba(255, 255, 255, 0.089);
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: bolder;
    margin: auto;
    text-align: center;
    backdrop-filter: blur(8px);
  }
  
  /*
  * Same Boxen as <div>s:
  */
  div.title {
  background-color: #dddddd;
  margin: 20px;
  padding: 20px;
  }
  
  div.box {
  background-color: #eeeeee;
  margin: 20px;
  padding: 20px;
  }
  
  div.info {
  background-color: #ccccff;
  margin: 20px;
  padding: 20px;
  }
  
  div.warning {
  background-color: #ffdddd;
  margin: 20px;
  padding: 20px;
  }
  
  div.wrapbox {
  margin: 20px;
  padding: 5px;
  }

.center {
    text-align: center;
  }
  
  
  /* Image fade */

img.fadein {
      animation-name: FadeIn;
      animation-duration: 3s;
      transition-timing-function: linear;
      /* width:100%; */
      max-width: 150px;
      max-height: 150px;
    }
    
    @keyframes FadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    
    @-moz-keyframes FadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    
    @-webkit-keyframes FadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    
    @-o-keyframes FadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    
    @-ms-keyframes FadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  /*  */
  
  /*
  * Bold definitions in <dl>s, grey BG for table headings, transparent (no-bordered) table
  */
  dt {
  font-weight: bold;
  }
  
  th {
  background-color: #dddddd;
  }
  
  table.transparent {
  border-style: none
  }
  
  /*
  * 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 {
  background-color: #ffdddd;
  font-weight: bold;
  padding: 2px;
  }
  
  p.whiteframed {
  margin: 5px;
  padding: 5px;
  text-align: center;
  background-color: #eeeeee;
  }
  
  /*
  * Links as buttons:
  */
  
  td.buttons {
  padding: 2px;
  }
  
  a.cmd,
  td.indentbuttons a,
  td.buttons a {
  white-space: nowrap;
  width: auto;
  padding: 2px;
  background-color: #dddddd;
  color: #000000;
  text-decoration: none;
  }
  
  a.cmd:hover,
  td.indentbuttons a:hover,
  td.buttons a:hover {
  background-color: #eeeeee;
  }
  
  /*
  * Special red emphasis:
  */
  em.warning,
  strong.warning {
  color: #ff0000
  }
  
  /*
  * In show-status we use tables directly behind headlines
  * and for some reason or another the headlines are set to
  * "margin:0" and leave the tables no air to breath.
  *
  * A proper fix would be to replace or remove the "margin:0",
  * but as this affects every cgi page we do it another time
  * and use this workaround until then.
  */
  .box table {
  margin-top: 1em;
  }
  
  /*
  * Let the URL and pattern input fields scale with the browser
  * width and try to prevent vertical scroll bars if the width
  * is less than 80 characters.
  */
  input.url,
  input.pattern {
  width: 95%;
  }