]> git.ipfire.org Git - people/teissler/ipfire-2.x.git/commitdiff
ipfire-new: Cleanup CSS code.
authorMichael Tremer <michael.tremer@ipfire.org>
Sun, 5 Jan 2014 17:15:40 +0000 (18:15 +0100)
committerMichael Tremer <michael.tremer@ipfire.org>
Sun, 5 Jan 2014 17:15:40 +0000 (18:15 +0100)
Lots of code that was either redudant, unused or unnecessary
has been removed or has been cleaned up.

html/html/themes/ipfire-new/include/css/style.css
html/html/themes/ipfire-new/include/functions.pl

index 29f0213a12a4ba3613054c2b08d30b8bcac226e0..3bb126cc8e6d90ac2516f381faca040b04e67968 100644 (file)
@@ -1,7 +1,7 @@
 
 /* This controls the width of the fixed width layouts */
 
-div.fixed {
+.fixed {
        width: 910px !important;
 }
 
@@ -12,18 +12,53 @@ div.fixed {
        padding: 0;
 }
 
+html {
+       height: 100%;
+}
+
 body {
-       background: #ffffff;
-       background-image: -webkit-linear-gradient(#880400 0%, black 100%);
-       background-image: -moz-linear-gradient(#880400 0%, black 100%);
-       background-image: -o-linear-gradient(#880400 0%, black 100%);
-       background-image: linear-gradient(#880400 0%, black 100%);
+       /* 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-attachment: fixed;
+
        font-size: 9pt;
        font-family: "trebuchet ms", helvetica, sans-serif;
 }
 
-h1, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6 {
        font-size: 20px;
        font-weight: normal;
        letter-spacing: -1px;
@@ -31,24 +66,10 @@ h1, h3, h4, h5, h6 {
        text-align: left;
 }
 
-h3, h4, h5, h6 {
+h2, h3, h4, h5, h6 {
        color: #66000F;
 }
 
-h1 span {
-       position: absolute;
-       font-weight: bold;
-       padding-left: 1.7em;
-}
-
-h3 span {
-       font-weight: bold;
-}
-
-h4 span {
-       font-weight: bold;
-}
-
 br.clear {
        clear: both;
 }
@@ -57,34 +78,23 @@ img {
        padding: 3px;
 }
 
-img.floatTL {
-       float: left;
-       margin-right: 1.5em;
-       margin-bottom: 1.5em;
-       margin-top: 0.5em;
-}
-
 a {
        text-decoration: underline;
-       color: #D90000;
+       color: #d90000;
 }
 
 a:hover {
        text-decoration: none;
 }
 
-ul.links {
-       list-style: none;
-}
-
-ul.links li {
-       line-height: 2em;
-}
-
 p {
        line-height: 1.8em;
 }
 
+hr {
+       margin: 0.3em 0 0.3em 0;
+}
+
 iframe {
        border: 0;
 }
@@ -92,150 +102,83 @@ iframe {
 /* Header */
 
 #header {
-       width: 100%;
-       height: 80px;
-}
-
-#header_inner {
-       position: relative;
-       width: 910px;
-       height:80px;
+       height: 70px;
        margin: 0 auto;
 }
 
 /* Logo */
 
 #logo {
-       position: absolute;
-       width: 200px;
-       height:65px;
-       bottom: 0em;
+       height: 65px;
+       margin-top: 1em;
        background: url('/themes/ipfire-new/images/tux2.png') no-repeat;
-       background-position: left;
 }
 
 #logo h1 {
-       display: inline;
        color: #fff;
        font-size: 3.6em;
+       font-weight: bold;
+       padding-left: 1.7em;
 }
 
 /* Main */
 
-#main {
-       position: relative;
-       width: 910px;
+.bigbox {
        margin: 0 auto;
        margin-top: 1em;
-       padding-left: 20px;
-       padding-right: 20px;
+       padding: 1.5em 2em 0 2em;
        border-radius: 8px 8px 8px 8px;
        -webkit-border-radius: 8px 8px 8px 8px;
        background: #fff url('/themes/ipfire-new/images/n2.gif') 0px 0px repeat-x;
        border: 1px solid black;
 }
 
+#main_inner {
+       padding-bottom: 1.5em;
+}
+
 #main_inner p {
        text-align: justify;
-       margin-bottom: 2.0em;
+       margin-bottom: 2em;
 }
 
 #main_inner ul {
-       margin-bottom: 2.0em;
-}
-
-#main_inner {
-       position: relative;
-       width: 910px;
-       margin: 0 auto;
-       padding-top: 1.5em;
+       margin-bottom: 2em;
 }
 
 #main_inner h1 {
+       font-size: 1.8em;
        margin-bottom: 1em;
 }
 
-#main_inner h3, #main_inner h4 {
-       border-bottom: dotted 1px #E1E1E1;
-       position: relative;
-}
-
-#main_inner h3 {
-       font-size: 2.1em;
-       padding-bottom: 0.1em;
-       margin-bottom: 0.8em;
-}
-
-#main_inner h4 {
-       font-size: 1.2em;
-       padding-bottom: 0.175em;
-       margin-bottom: 1.4em;
-       margin-top: 0.95em;
-}
-
 #main_inner .post {
-       position: relative;
        border-radius: 8px 8px 8px 8px;
        -webkit-border-radius: 8px 8px 8px 8px;
        border: 1px solid silver;
-       padding-left: 2em;
-       padding-right: 2em;
-       padding-bottom: 1em;
-       padding-top: 1em;
+       padding: 1em 2em 1em 2em;
+       margin-bottom: 1em;
+       clear: both;
 }
 
-#main_inner .post h3 {
+#main_inner .post h2 {
+       border-bottom: dotted 1px #e1e1e1;
        font-size: 1.7em;
-       padding-bottom: 1.2em;
-}
-
-#main_inner .post ul.post_info {
-       list-style: none;
-       position: absolute;
-       top: 3em;
-       font-size: 0.8em;
-}
-
-#main_inner .post ul.post_info li {
-       background-position: 0em 0.2em;
-       background-repeat: no-repeat;
-       display: inline;
-       padding-left: 18px;
-}
-
-#main_inner .post ul.post_info li.date {
-       background-image: url('/themes/ipfire-new/images/n5.gif');
-}
-
-#main_inner .post ul.post_info li.comments {
-       background-image: url('/themes/ipfire-new/images/n6.gif');
-       margin-left: 1.1em;
+       margin-bottom: 1em;
 }
 
-/* Footer */
-
 #footer {
-       width: 930px;
-       margin: 0 auto;
-       text-align: center;
-       clear: both;
-       border-top: dotted 1px #E1E1E1;
-       margin-top: 1.0em;
-       margin-bottom: 1.0em;
-       padding-top: 1.0em;
-       text-transform: lowercase;
+       height: 2.5em;
+       margin-bottom: 1em;
 }
 
-/* Search */
-
 input {
        margin: 0.2em;
 }
 
 input.button {
-       background: #CA2F2F url('/themes/ipfire-new/images/n3.gif') repeat-x;
+       background: #ca2f2f url('/themes/ipfire-new/images/n3.gif') repeat-x;
        color: #fff;
-       border: solid 1px #A94B4B;
+       border: solid 1px #a94b4b;
        font-weight: bold;
        text-transform: lowercase;
        font-size: 0.8em;
@@ -243,109 +186,21 @@ input.button {
 }
 
 input.text {
-       border: solid 1px #F1F1F1;
-       font-size: 1.0em;
-       padding: 0.25em 0.25em 0.25em 0.25em;
-}
-
-#search {
-       width: 100%;
-       margin-bottom: 2.0em;
-}
-
-#search input.text {
-       position: absolute;
-       top: 0em;
-       left: 0em;
-       width: 9.5em;
-}
-
-#search input.button {
-       position: absolute;
-       top: 0em;
-       right: 0em;
-       min-width: 2.0em;
-       max-width: 2.5em;
+       border: solid 1px #f1f1f1;
+       padding: 0.25em;
 }
 
 #traffic {
-       margin-top: -2.2em;
-       margin-left: 60em;
-}
-
-/* LAYOUT - 3 COLUMNS */
-
-#primaryContent_3columns {
-       margin-right: 34em;
-}
-
-#columnA_3columns {
-       float: left;
-       width: 100%;
-       margin-right: -34em;
-       padding-right: 2em;
-}
-
-#secondaryContent_3columns {
        float: right;
-}
-
-#columnB_3columns {
-       width: 13.0em;
-       float: left;
-       padding: 0em 2em 0.5em 2em;
-       border-left: dotted 1px #E1E1E1;
-}
-
-#columnC_3columns {
-       width: 13.0em;
-       float: left;
-       padding: 0em 0em 0.5em 2em;
-       border-left: dotted 1px #E1E1E1;
-}
-
-#columnC_2columns {
-       float: left;
-       width: 100%;
-}
-
-#primaryContent_columnless {
-       position: relative;
-}
-
-#columnA_columnless {
-       position: relative;
-       margin-left: -5em;
-}
-
-/* status */
-.statusdisplay {
-       border-radius: 8px 8px 8px 8px;
-       -webkit-border-radius: 8px 8px 8px 8px;
-       padding-left: 20px;
-       padding-right: 20px;
-       margin: 0 auto;
-       width: 950px;
-       height:100px;
-       margin-left: -1.6em;
-       margin-top: 1em;
-       margin-bottom: 1em;
-       background: #fff url('/themes/ipfire-new/images/n2.gif') 0px 0px repeat-x;
+       min-width: 20em;
+       line-height: 32px;
 }
 
 /* Menu */
-#cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a {
-       border: 0;
-       margin: 0;
-       padding: 0;
-       position: relative;
-}
-
 #cssmenu {
-       position: relative;
-       width: 950px;
        margin: 0 auto;
-       background: #dddddd; /* Old browsers */
+       margin-top: 0;
+       padding-top: 0;
        border-radius: 8px 8px 8px 8px;
        -webkit-border-radius: 8px 8px 8px 8px;
        font-weight: 600;
@@ -353,23 +208,14 @@ input.text {
        border: 1px solid black;
 }
 
-#cssmenu:after, #cssmenu ul:after {
-       content: '';
-       display: block;
-       clear: both;
-}
-
 #cssmenu a {
        border-radius: 8px 8px 8px 8px;
        -webkit-border-radius: 8px 8px 8px 8px;
        color: #111111;
        display: inline-block;
-       font-family: Arial, Verdana, sans-serif;
-       font-size: 12px;
        line-height: 32px;
-       padding: 0 15px;
+       padding: 0 1em;
        text-decoration: none;
-       top: 100%;
 }
 
 #cssmenu ul {
@@ -378,7 +224,6 @@ input.text {
 
 #cssmenu > ul > li {
        display: inline-block;
-       line-height: 20px;
 }
 
 #cssmenu > ul > li.active a, #cssmenu > ul > li:hover > a {
@@ -386,10 +231,6 @@ input.text {
        background: #aaaaaa;
 }
 
-#cssmenu .has-sub {
-       z-index: 1;
-}
-
 #cssmenu .has-sub:hover > ul {
        display: block;
 }
@@ -397,16 +238,13 @@ input.text {
 #cssmenu .has-sub ul {
        display: none;
        position: absolute;
-       width: 160px;
-       top: 100%;
-       left: 0;
 }
 
 #cssmenu .has-sub ul li a {
+       min-width: 12em;
        border-radius: 7px 7px 7px 7px;
        background: #ffffff;
        color: grey;
-       font-size: 12px;
        display: block;
        line-height: 40%;
        padding: 12px 5px;
@@ -419,28 +257,6 @@ input.text {
        -webkit-box-shadow: inset 0  5px 1px rgba(0, 0, 0, 0.15);
 }
 
-#cssmenu .has-sub .has-sub:hover > ul {
-       display: block;
-}
-
-#cssmenu .has-sub .has-sub ul {
-       display: none;
-       position: absolute;
-}
-
-#cssmenu .has-sub .has-sub ul li a {
-       background: #606a76;
-       box-shadow: none;
-       -webkit-box-shadow: none;
-}
-
-#cssmenu .has-sub .has-sub ul li a:hover {
-       background: #4a5662;
-       box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
-       -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
-}
-
-
 /* Table */
 /* when using class='bordered' after tabletag */
 
@@ -545,4 +361,3 @@ table {
 .bordered td:last-child {
        border-right: 1px solid grey;
 }
-
index 346b1fd21e4f8bd1be360a8a20d62626b7dc5918..490b634572c1a6dc46be44d4a7e1692576083e2a 100644 (file)
@@ -52,7 +52,7 @@ sub showsubmenu() {
                } else {
                        print '<li>';
                }
-               print '<a href="'.$link.'"><span>'.$submenus->{$item}->{'caption'}.'</span></a>';
+               print '<a href="'.$link.'">'.$submenus->{$item}->{'caption'}.'</a>';
 
                &showsubmenu($subsubmenus) if ($subsubmenus);
                print '</li>';
@@ -64,16 +64,7 @@ sub showsubmenu() {
 #
 # print menu html elements
 sub showmenu() {
-       print '<div id="cssmenu"><ul>';
-       foreach my $k1 ( sort keys %$menu ) {
-               $link = getlink($menu->{$k1});
-               next if (!is_menu_visible($link) or $link eq '');
-               print '<li class="has-sub "><a><span>'.$menu->{$k1}->{'caption'}.'</span></a>';
-               my $submenus = $menu->{$k1}->{'subMenu'};
-               &showsubmenu($submenus) if ($submenus);
-               print "</li>";
-       }
-       print "</ul>";
+       print '<div id="cssmenu" class="bigbox fixed">';
 
        if ($settings{'SPEED'} ne 'off') {
                print <<EOF;
@@ -85,7 +76,17 @@ sub showmenu() {
 EOF
        }
 
-       print "</div>";
+       print "<ul>";
+       foreach my $k1 ( sort keys %$menu ) {
+               $link = getlink($menu->{$k1});
+               next if (!is_menu_visible($link) or $link eq '');
+               print '<li class="has-sub "><a><span>'.$menu->{$k1}->{'caption'}.'</span></a>';
+               my $submenus = $menu->{$k1}->{'subMenu'};
+               &showsubmenu($submenus) if ($submenus);
+               print "</li>";
+       }
+
+       print "</ul></div>";
 }
 
 ###############################################################################
@@ -103,22 +104,21 @@ sub openpage {
        my $suppressMenu = shift;
        my @tmp = split(/\./, basename($0));
        my $scriptName = @tmp[0];
-       my $h2 = $title;
 
        @URI=split ('\?',  $ENV{'REQUEST_URI'} );
        &General::readhash("${swroot}/main/settings", \%settings);
        &genmenu();
 
-       $title = "IPFire - $title";
+       my $headline = "IPFire";
        if ($settings{'WINDOWWITHHOSTNAME'} eq 'on') {
-               $title =  "$settings{'HOSTNAME'}.$settings{'DOMAINNAME'} - $title"; 
+               $headline =  "$settings{'HOSTNAME'}.$settings{'DOMAINNAME'}";
        }
 
 print <<END
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
        <head>
-       <title>$title</title>
+       <title>$headline - $title</title>
        $extrahead
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="shortcut icon" href="/favicon.ico" />
@@ -142,21 +142,16 @@ END
 }
 
 print <<END
-               </head>
-               <body>
-END
-;
-
-print <<END
-<!-- IPFIRE HEADER -->
-               <div id="header_inner" class="fixed">
+       </head>
+       <body>
+               <div id="header" class="fixed">
                        <div id="logo">
 END
 ;
        if ($settings{'WINDOWWITHHOSTNAME'} eq 'on') {
-               print "<h1><span>$settings{'HOSTNAME'}.$settings{'DOMAINNAME'}</span></h1><br />"; 
+               print "<h1>$settings{'HOSTNAME'}.$settings{'DOMAINNAME'}</h1>";
        } else {
-               print "<h1><span>IPFire</span></h1><br />";
+               print "<h1>IPFire</h1>";
        }
 
 print <<END
@@ -168,11 +163,9 @@ END
 &showmenu() if ($suppressMenu != 1);
 
 print <<END
-<div id="main">
-       <div id="main_inner" class="fixed">
-               <h1>$h2</h1>
-
-               <div id="columnA_2columns">
+       <div class="bigbox fixed">
+               <div id="main_inner" class="fixed">
+                       <h1>$title</h1>
 END
 ;
 }
@@ -188,7 +181,6 @@ sub openpagewithoutmenu {
        return;
 }
 
-
 ###############################################################################
 #
 # print page closing html layout
@@ -202,27 +194,16 @@ sub closepage () {
        $uptime =~ s/day /$Lang::tr{'day'}/;
        $uptime =~ s/user(s|)/$Lang::tr{'user'}/;
        $uptime =~ s/load average/$Lang::tr{'uptime load average'}/;  
-print <<END
-               <!-- closepage begin -->
-                       </div>
-       </div>
-END
-;
-
-print "<div id='columnC_2columns'>";
-print <<END
-                       <table cellspacing="5"  class="statusdisplay" border="0">
-                       <tr><td align='center'>$status   Uptime: $uptime</td></tr>
-END
-;
 
-print <<END
-               </table>
+print <<END;
                </div>
        </div>
+
+       <div id="footer" class='bigbox fixed'>
+               $status   Uptime: $uptime
+       </div>
 </body>
 </html>
-<!-- closepage end -->
 END
 ;
 }
@@ -230,15 +211,13 @@ END
 ###############################################################################
 #
 # print big box opening html layout
-sub openbigbox
-{
+sub openbigbox {
 }
 
 ###############################################################################
 #
 # print big box closing html layout
-sub closebigbox
-{
+sub closebigbox {
 }
 
 ###############################################################################
@@ -247,31 +226,23 @@ sub closebigbox
 # @param page width
 # @param page align
 # @param page caption
-sub openbox
-{
+sub openbox {
        $width = $_[0];
        $align = $_[1];
        $caption = $_[2];
 
-print <<END
-<!-- openbox -->
-               <div class="post" align="$align">
-END
-;
-if ($caption) { print "<h3>$caption</h3>\n"; } else { print "&nbsp;"; }
+       print "<div class='post' align='$align'>\n";
+
+       if ($caption) {
+               print "<h2>$caption</h2>\n";
+       }
 }
 
 ###############################################################################
 #
 # print box closing html layout
-sub closebox
-{
-       print <<END
-       </div>
-       <br class="clear" />
-       <!-- closebox -->
-END
-;
+sub closebox {
+       print "</div>";
 }
 
 1;