From 697a4d5217b10429a40a5224ac65b680485dc080 Mon Sep 17 00:00:00 2001 From: Michael Tremer Date: Sun, 5 Jan 2014 18:15:40 +0100 Subject: [PATCH] ipfire-new: Cleanup CSS code. Lots of code that was either redudant, unused or unnecessary has been removed or has been cleaned up. --- .../themes/ipfire-new/include/css/style.css | 345 ++++-------------- .../themes/ipfire-new/include/functions.pl | 107 ++---- 2 files changed, 119 insertions(+), 333 deletions(-) diff --git a/html/html/themes/ipfire-new/include/css/style.css b/html/html/themes/ipfire-new/include/css/style.css index 29f0213a12..3bb126cc8e 100644 --- a/html/html/themes/ipfire-new/include/css/style.css +++ b/html/html/themes/ipfire-new/include/css/style.css @@ -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; } - diff --git a/html/html/themes/ipfire-new/include/functions.pl b/html/html/themes/ipfire-new/include/functions.pl index 346b1fd21e..490b634572 100644 --- a/html/html/themes/ipfire-new/include/functions.pl +++ b/html/html/themes/ipfire-new/include/functions.pl @@ -52,7 +52,7 @@ sub showsubmenu() { } else { print '
  • '; } - print ''.$submenus->{$item}->{'caption'}.''; + print ''.$submenus->{$item}->{'caption'}.''; &showsubmenu($subsubmenus) if ($subsubmenus); print '
    • '; @@ -64,16 +64,7 @@ sub showsubmenu() { # # print menu html elements sub showmenu() { - print '
    "; + print '
    '; if ($settings{'SPEED'} ne 'off') { print <"; + print "
      "; + foreach my $k1 ( sort keys %$menu ) { + $link = getlink($menu->{$k1}); + next if (!is_menu_visible($link) or $link eq ''); + print '
    • '.$menu->{$k1}->{'caption'}.''; + my $submenus = $menu->{$k1}->{'subMenu'}; + &showsubmenu($submenus) if ($submenus); + print "
      • "; + } + + print "
    "; } ############################################################################### @@ -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 < - $title + $headline - $title $extrahead @@ -142,21 +142,16 @@ END } print < - -END -; - -print < -
    + + +