web-user-interface: Update interface design

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/config/cfgroot/header.pl b/config/cfgroot/header.pl
index 3f80ce9b4acd2a59eeaa8103941fc41cdfea7321..5164e9731b4057bceb30cc8f9ba93409cae33e34 100644 (file)
--- a/config/cfgroot/header.pl
+++ b/config/cfgroot/header.pl
@@ -26,13 +26,9 @@ $Header::revision = 'final';
 $Header::swroot = '/var/ipfire';
 $Header::graphdir='/srv/web/ipfire/html/graphs';
 $Header::pagecolour = '#ffffff';
-#$Header::tablecolour = '#a0a0a0';
-$Header::tablecolour = '#FFFFFF';
-$Header::bigboxcolour = '#F6F4F4';
-$Header::boxcolour = '#EAE9EE';
-$Header::bordercolour = '#000000';
-$Header::table1colour = '#E0E0E0';
-$Header::table2colour = '#F0F0F0';
+$Header::bordercolour = '#363636';
+$Header::table1colour = '#f5f5f5';
+$Header::table2colour = '#fafafa';
 $Header::colourred = '#993333';
 $Header::colourorange = '#FF9933';
 $Header::colouryellow = '#FFFF00';

diff --git a/config/rootfiles/common/web-user-interface b/config/rootfiles/common/web-user-interface
index 6c2a40cc26a53b822bb02ffaa5bc1441face66e5..18a8060e06261e4c1a8811707f0b0d07b56f38ca 100644 (file)
--- a/config/rootfiles/common/web-user-interface
+++ b/config/rootfiles/common/web-user-interface
@@ -344,16 +344,14 @@ srv/web/ipfire/html/redirect-templates/legacy/template.html
 srv/web/ipfire/html/redirect.cgi
 srv/web/ipfire/html/themes
 srv/web/ipfire/html/themes/ipfire
-srv/web/ipfire/html/themes/ipfire/images
-srv/web/ipfire/html/themes/ipfire/images/n2.gif
-srv/web/ipfire/html/themes/ipfire/images/n3.gif
-srv/web/ipfire/html/themes/ipfire/images/n5.gif
-srv/web/ipfire/html/themes/ipfire/images/n6.gif
 srv/web/ipfire/html/themes/ipfire/images/tux2.png
 srv/web/ipfire/html/themes/ipfire/include
 srv/web/ipfire/html/themes/ipfire/include/colors.txt
 srv/web/ipfire/html/themes/ipfire/include/css
 srv/web/ipfire/html/themes/ipfire/include/css/style.css
+srv/web/ipfire/html/themes/ipfire/include/fonts/Prompt-Bold.ttf
+srv/web/ipfire/html/themes/ipfire/include/fonts/Prompt-Medium.ttf
+srv/web/ipfire/html/themes/ipfire/include/fonts/Prompt-Regular.ttf
 srv/web/ipfire/html/themes/ipfire/include/functions.pl
 srv/web/ipfire/html/themes/ipfire/include/js
 srv/web/ipfire/html/themes/ipfire/include/js/refreshInetInfo.js

diff --git a/html/html/themes/ipfire/images/n2.gif b/html/html/themes/ipfire/images/n2.gif
deleted file mode 100644 (file)
index b92a19d..0000000
Binary files a/html/html/themes/ipfire/images/n2.gif and /dev/null differ

diff --git a/html/html/themes/ipfire/images/n3.gif b/html/html/themes/ipfire/images/n3.gif
deleted file mode 100644 (file)
index 6627c91..0000000
Binary files a/html/html/themes/ipfire/images/n3.gif and /dev/null differ

diff --git a/html/html/themes/ipfire/images/n5.gif b/html/html/themes/ipfire/images/n5.gif
deleted file mode 100644 (file)
index a032242..0000000
Binary files a/html/html/themes/ipfire/images/n5.gif and /dev/null differ

diff --git a/html/html/themes/ipfire/images/n6.gif b/html/html/themes/ipfire/images/n6.gif
deleted file mode 100644 (file)
index ed1781c..0000000
Binary files a/html/html/themes/ipfire/images/n6.gif and /dev/null differ

diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
index 96d0519f5999eec8f7c0065b4f9eec52a536913b..6f9345dc4287dfdc2b272fa542f7c74bbd42e788 100644 (file)
--- a/html/html/themes/ipfire/include/css/style.css
+++ b/html/html/themes/ipfire/include/css/style.css
@@ -5,59 +5,78 @@
        width: 960px !important;
 }
 
+/* Fonts */
+
+@font-face {
+       font-family: "Prompt";
+       font-style: normal;
+       font-weight: 400;
+       src: local("Prompt Regular"), local("Prompt-Regular"), url(../fonts/Prompt-Regular.ttf) format("truetype");
+       unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+       font-family: "Prompt";
+       font-style: normal;
+       font-weight: 400;
+       src: local("Prompt Regular"), local("Prompt-Regular"), url(../fonts/Prompt-Regular.ttf) format("truetype");
+       unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+       font-family: 'Prompt';
+       font-style: normal;
+       font-weight: 500;
+       src: local("Prompt Medium"), local("Prompt-Medium"), url(../fonts/Prompt-Medium.ttf) format("truetype");
+       unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+       font-family: 'Prompt';
+       font-style: normal;
+       font-weight: 500;
+       src: local("Prompt Medium"), local("Prompt-Medium"), url(../fonts/Prompt-Medium.ttf) format("truetype");
+       unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+       font-family: "Prompt";
+       font-style: normal;
+       font-weight: 700;
+       src: local("Prompt Bold"), local("Prompt-Bold"), url(../fonts/Prompt-Bold.ttf) format("truetype");
+       unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+       font-family: "Prompt";
+       font-style: normal;
+       font-weight: 700;
+       src: local("Prompt Bold"), local("Prompt-Bold"), url(../fonts/Prompt-Bold.ttf) format("truetype");
+       unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 /* Basic Stuff */
 
 * {
        margin: 0;
-       padding: 0;
 }
 
 html {
-       height: 100%;
+       height: 100vh;
 }
 
 body {
-       /* SVG as background image (IE9/Chrome/Safari/Opera) */
-       background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2ODQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTAwJSIgeTE9IjEwMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMDAwMDAwIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjODgwNDAwIiBvZmZzZXQ9IjU3JSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c2ODQpIiAvPgo8L3N2Zz4=);
-
-       background-image: linear-gradient(
-               bottom,
-               #000000 0%,
-               #880400 57%
-       );
-       background-image: -o-linear-gradient(
-               bottom,
-               #000000 0%,
-               #880400 57%
-       );
-       background-image: -moz-linear-gradient(
-               bottom,
-               #000000 0%,
-               #880400 57%
-       );
-       background-image: -webkit-linear-gradient(
-               bottom,
-               #000000 0%,
-               #880400 57
-       );
-       background-image: -ms-linear-gradient(
-               bottom,
-               #000000 0%,
-               #880400 57%
-       );
-       background-image: -webkit-gradient(
-               linear,
-               left bottom,
-               left top,
-               color-stop(0, #000000),
-               color-stop(0.57, #880400)
+       background: linear-gradient(
+               #ff2e52,
+               #000000
        );
        background-attachment: fixed;
 
+       font-family: "Prompt", sans-serif;
        font-size: 9pt;
-       font-family: "DejaVu Sans", Helvetica, sans-serif;
-}
 
+       color: #363636;
+}
 
 h1, h2, h3, h4, h5, h6 {
        font-size: 20px;
@@ -66,10 +85,6 @@ h1, h2, h3, h4, h5, h6 {
        text-align: left;
 }
 
-h1 {
-       color: #66000F;
-}
-
 br.clear {
        clear: both;
 }
@@ -80,7 +95,7 @@ img {
 
 a {
        text-decoration: underline;
-       color: #d90000;
+       color: #ff2e52;
 }
 
 a:hover {
@@ -131,11 +146,10 @@ iframe {
        margin: 0 auto;
        margin-top: 0.5em;
        padding: 1.5em 2em 0 2em;
-       background: #fff url('../../images/n2.gif') 0px 0px repeat-x;
-       border: 1px solid black;
+       background: #ffffff;
 
+       border: 2px solid black;
        border-radius: 3px 3px 3px 3px;
-       -webkit-border-radius: 3px 3px 3px 3px;
 }
 
 #main_inner {
@@ -184,7 +198,8 @@ iframe {
 
 #footer {
        height: 2.5em;
-       margin-bottom: 1em;
+       margin-bottom: 1.5em;
+       padding-bottom: 0.5em;
 }
 
 #footer a {
@@ -196,24 +211,6 @@ iframe {
        text-decoration: underline;
 }
 
-input {
-       margin: 0.2em;
-}
-
-input.button {
-       background: #ca2f2f url('../../images/n3.gif') repeat-x;
-       color: #fff;
-       border: solid 1px #a94b4b;
-       font-weight: bold;
-       font-size: 0.8em;
-       height: 2.0em;
-}
-
-input.text {
-       border: solid 1px #f1f1f1;
-       padding: 0.25em;
-}
-
 #traffic {
        float: right;
        min-width: 20em;
@@ -222,16 +219,13 @@ input.text {
 
 /* Menu */
 #cssmenu {
-       margin: 0 auto;
-       margin-top: 0;
        padding-top: 0;
-       font-weight: 600;
+       font-weight: 500;
        height: 32px;
-       border: 1px solid black;
 }
 
 #cssmenu a {
-       color: #111111;
+       color: #363636;
        display: inline-block;
        line-height: 32px;
        padding: 0 1em;
@@ -240,6 +234,7 @@ input.text {
 
 #cssmenu ul {
        list-style: none;
+       padding: 0;
 }
 
 #cssmenu > ul > li {
@@ -247,8 +242,8 @@ input.text {
 }
 
 #cssmenu > ul > li.active a, #cssmenu > ul > li:hover > a {
-       color: white;
-       background: #aaaaaa;
+       color: #ffffff;
+       background: #363636;
 }
 
 #cssmenu .has-sub:hover > ul {
@@ -264,7 +259,7 @@ input.text {
 #cssmenu .has-sub ul li a {
        min-width: 12em;
        background: #ffffff;
-       color: grey;
+       color: #363636;
        display: block;
        line-height: 40%;
        padding: 12px 5px;
@@ -272,7 +267,8 @@ input.text {
 }
 
 #cssmenu .has-sub ul li:hover a {
-       background: #dddddd;
+       color: #ffffff;
+       background: #363636;
 }
 
 /* This decorates all tables with class="tbl" */
@@ -283,59 +279,60 @@ table {
 }
 
 .tbl th {
-       color: #000000;
-       border-top: 1px solid lightgrey;
-       border-bottom: 1px solid lightgrey;
-       background: #cccccc;
+       color: #ffffff;
+       border-top: 1px solid #363636;
+       border-bottom: 1px solid #363636;
+       background: #363636;
        padding-left: 0.5em;
        padding-right: 0.5em;
 }
 
 .tbl th:first-child {
-       border-left: 1px solid lightgrey;
-       border-top: 1px solid lightgrey;
-       border-bottom: 1px solid lightgrey;
+       border-left: 1px solid #363636;
+       border-top: 1px solid #363636;
+       border-bottom: 1px solid #363636;
 }
 
 .tbl th:last-child {
-       border-right: 1px solid lightgrey;
-       border-top: 1px solid lightgrey;
-       border-bottom: 1px solid lightgrey;
+       border-right: 1px solid #363636;
+       border-top: 1px solid #363636;
+       border-bottom: 1px solid #363636;
 }
 
 .tbl th:only-child {
-       border: 1px solid lightgrey;
+       border: 1px solid #363636;
 }
-.tbl td{
-       padding-left: 0.5em;
-       padding-right: 0.5em;
+
+.tbl td {
+       padding: 0.25em 0.5em;
 }
+
 .tbl tr td:first-child {
-       border-left: 1px solid lightgrey;
+       border-left: 1px solid #363636;
 }
 
 .tbl tr td:last-child {
-       border-right: 1px solid lightgrey;
+       border-right: 1px solid #363636;
 }
 
 .tbl tr:first-child td {
-       border-top: 1px solid lightgrey;
+       border-top: 1px solid #363636;
 }
 
 .tbl tr:last-child td:only-child {
-       border-bottom: 1px solid lightgrey;
+       border-bottom: 1px solid #363636;
 }
 
 .tbl tr:last-child td:first-child {
-       border-bottom: 1px solid lightgrey;
+       border-bottom: 1px solid #363636;
 }
 
 .tbl tr:last-child td:last-child {
-       border-bottom: 1px solid lightgrey;
+       border-bottom: 1px solid #363636;
 }
 
 .tbl tr:last-child td {
-       border-bottom: 1px solid lightgrey;
+       border-bottom: 1px solid #363636;
 }
 
 table.fw-nat tbody tr td {
@@ -350,6 +347,7 @@ div.rrdimage > ul {
        display: flex;
        justify-content: center;
 }
+
 .rrdimage li:not(:first-child)::before {
        content: "-";
        padding: 0 0.3em;
@@ -358,16 +356,18 @@ div.rrdimage > ul {
 .rrdimage button {
        padding: 0.3em;
        font-weight: 700;
-       color: #d90000; /* link color */
+       color: #ff2e52;
        border: none;
        background: none;
        cursor: pointer;
        text-decoration: none;
 }
+
 .rrdimage button:focus {
        outline: none;
        box-shadow: none;
 }
+
 .rrdimage button.selected {
        text-decoration: underline;
 }

diff --git a/html/html/themes/ipfire/include/fonts/Prompt-Bold.ttf b/html/html/themes/ipfire/include/fonts/Prompt-Bold.ttf
new file mode 100644 (file)
index 0000000..6cdd89b
Binary files /dev/null and b/html/html/themes/ipfire/include/fonts/Prompt-Bold.ttf differ

diff --git a/html/html/themes/ipfire/include/fonts/Prompt-Medium.ttf b/html/html/themes/ipfire/include/fonts/Prompt-Medium.ttf
new file mode 100644 (file)
index 0000000..adf72c9
Binary files /dev/null and b/html/html/themes/ipfire/include/fonts/Prompt-Medium.ttf differ

diff --git a/html/html/themes/ipfire/include/fonts/Prompt-Regular.ttf b/html/html/themes/ipfire/include/fonts/Prompt-Regular.ttf
new file mode 100644 (file)
index 0000000..2a736db
Binary files /dev/null and b/html/html/themes/ipfire/include/fonts/Prompt-Regular.ttf differ