webadmin/bpfire
1
0
Fork 0
mirror of https://github.com/vincentmli/bpfire.git synced 2026-04-28 03:33:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

ipfire-new: Cleanup CSS code.

Browse Source 
Lots of code that was either redudant, unused or unnecessary
has been removed or has been cleaned up.
This commit is contained in:
Michael Tremer
2014-01-05 18:15:40 +01:00
parent f880f8a225
commit 697a4d5217
2 changed files with 119 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
html/html/themes/ipfire-new/include/css/style.css
View File

@@ -1,7 +1,7 @@
/* This controls the width of the fixed width layouts */ /* This controls the width of the fixed width layouts */
div.fixed { .fixed {
width: 910px !important; width: 910px !important;
} }
@@ -12,18 +12,53 @@ div.fixed {
padding: 0; padding: 0;
} }
html {
height: 100%;
}
body { body {
background: #ffffff; /* SVG as background image (IE9/Chrome/Safari/Opera) */
background-image: -webkit-linear-gradient(#880400 0%, black 100%); background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2ODQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTAwJSIgeTE9IjEwMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMDAwMDAwIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjODgwNDAwIiBvZmZzZXQ9IjU3JSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c2ODQpIiAvPgo8L3N2Zz4=);
background-image: -moz-linear-gradient(#880400 0%, black 100%);
background-image: -o-linear-gradient(#880400 0%, black 100%); background-image: linear-gradient(
background-image: linear-gradient(#880400 0%, black 100%); 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; background-attachment: fixed;
font-size: 9pt; font-size: 9pt;
font-family: "trebuchet ms", helvetica, sans-serif; font-family: "trebuchet ms", helvetica, sans-serif;
} }
h1, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-size: 20px; font-size: 20px;
font-weight: normal; font-weight: normal;
letter-spacing: -1px; letter-spacing: -1px;
@@ -31,24 +66,10 @@ h1, h3, h4, h5, h6 {
text-align: left; text-align: left;
} }
h3, h4, h5, h6 { h2, h3, h4, h5, h6 {
color: #66000F; 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 { br.clear {
clear: both; clear: both;
} }
@@ -57,34 +78,23 @@ img {
padding: 3px; padding: 3px;
} }
img.floatTL {
float: left;
margin-right: 1.5em;
margin-bottom: 1.5em;
margin-top: 0.5em;
}
a { a {
text-decoration: underline; text-decoration: underline;
color: #D90000; color: #d90000;
} }
a:hover { a:hover {
text-decoration: none; text-decoration: none;
} }
ul.links {
list-style: none;
}
ul.links li {
line-height: 2em;
}
p { p {
line-height: 1.8em; line-height: 1.8em;
} }
hr {
margin: 0.3em 0 0.3em 0;
}
iframe { iframe {
border: 0; border: 0;
} }
@@ -92,150 +102,83 @@ iframe {
/* Header */ /* Header */
#header { #header {
width: 100%; height: 70px;
height: 80px;
}
#header_inner {
position: relative;
width: 910px;
height:80px;
margin: 0 auto; margin: 0 auto;
} }
/* Logo */ /* Logo */
#logo { #logo {
position: absolute; height: 65px;
width: 200px; margin-top: 1em;
height:65px;
bottom: 0em;
background: url('/themes/ipfire-new/images/tux2.png') no-repeat; background: url('/themes/ipfire-new/images/tux2.png') no-repeat;
background-position: left;
} }
#logo h1 { #logo h1 {
display: inline;
color: #fff; color: #fff;
font-size: 3.6em; font-size: 3.6em;
font-weight: bold;
padding-left: 1.7em;
} }
/* Main */ /* Main */
#main { .bigbox {
position: relative;
width: 910px;
margin: 0 auto; margin: 0 auto;
margin-top: 1em; margin-top: 1em;
padding-left: 20px; padding: 1.5em 2em 0 2em;
padding-right: 20px;
border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px;
-webkit-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; background: #fff url('/themes/ipfire-new/images/n2.gif') 0px 0px repeat-x;
border: 1px solid black; border: 1px solid black;
} }
#main_inner {
padding-bottom: 1.5em;
}
#main_inner p { #main_inner p {
text-align: justify; text-align: justify;
margin-bottom: 2.0em; margin-bottom: 2em;
} }
#main_inner ul { #main_inner ul {
margin-bottom: 2.0em; margin-bottom: 2em;
}
#main_inner {
position: relative;
width: 910px;
margin: 0 auto;
padding-top: 1.5em;
} }
#main_inner h1 { #main_inner h1 {
font-size: 1.8em;
margin-bottom: 1em; 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 { #main_inner .post {
position: relative;
border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px; -webkit-border-radius: 8px 8px 8px 8px;
border: 1px solid silver; border: 1px solid silver;
padding-left: 2em; padding: 1em 2em 1em 2em;
padding-right: 2em; margin-bottom: 1em;
padding-bottom: 1em; clear: both;
padding-top: 1em;
} }
#main_inner .post h3 { #main_inner .post h2 {
border-bottom: dotted 1px #e1e1e1;
font-size: 1.7em; font-size: 1.7em;
padding-bottom: 1.2em; margin-bottom: 1em;
} }
#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;
}
/* Footer */
#footer { #footer {
width: 930px; height: 2.5em;
margin: 0 auto; margin-bottom: 1em;
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;
} }
/* Search */
input { input {
margin: 0.2em; margin: 0.2em;
} }
input.button { 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; color: #fff;
border: solid 1px #A94B4B; border: solid 1px #a94b4b;
font-weight: bold; font-weight: bold;
text-transform: lowercase; text-transform: lowercase;
font-size: 0.8em; font-size: 0.8em;
@@ -243,109 +186,21 @@ input.button {
} }
input.text { input.text {
border: solid 1px #F1F1F1; border: solid 1px #f1f1f1;
font-size: 1.0em; padding: 0.25em;
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;
} }
#traffic { #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; float: right;
} min-width: 20em;
line-height: 32px;
#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;
} }
/* Menu */ /* Menu */
#cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a {
border: 0;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu { #cssmenu {
position: relative;
width: 950px;
margin: 0 auto; margin: 0 auto;
background: #dddddd; /* Old browsers */ margin-top: 0;
padding-top: 0;
border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px; -webkit-border-radius: 8px 8px 8px 8px;
font-weight: 600; font-weight: 600;
@@ -353,23 +208,14 @@ input.text {
border: 1px solid black; border: 1px solid black;
} }
#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a { #cssmenu a {
border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px; -webkit-border-radius: 8px 8px 8px 8px;
color: #111111; color: #111111;
display: inline-block; display: inline-block;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 32px; line-height: 32px;
padding: 0 15px; padding: 0 1em;
text-decoration: none; text-decoration: none;
top: 100%;
} }
#cssmenu ul { #cssmenu ul {
@@ -378,7 +224,6 @@ input.text {
#cssmenu > ul > li { #cssmenu > ul > li {
display: inline-block; display: inline-block;
line-height: 20px;
} }
#cssmenu > ul > li.active a, #cssmenu > ul > li:hover > a { #cssmenu > ul > li.active a, #cssmenu > ul > li:hover > a {
@@ -386,10 +231,6 @@ input.text {
background: #aaaaaa; background: #aaaaaa;
} }
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul { #cssmenu .has-sub:hover > ul {
display: block; display: block;
} }
@@ -397,16 +238,13 @@ input.text {
#cssmenu .has-sub ul { #cssmenu .has-sub ul {
display: none; display: none;
position: absolute; position: absolute;
width: 160px;
top: 100%;
left: 0;
} }
#cssmenu .has-sub ul li a { #cssmenu .has-sub ul li a {
min-width: 12em;
border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px;
background: #ffffff; background: #ffffff;
color: grey; color: grey;
font-size: 12px;
display: block; display: block;
line-height: 40%; line-height: 40%;
padding: 12px 5px; padding: 12px 5px;
@@ -419,28 +257,6 @@ input.text {
-webkit-box-shadow: inset 0 5px 1px rgba(0, 0, 0, 0.15); -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 */ /* Table */
/* when using class='bordered' after tabletag */ /* when using class='bordered' after tabletag */
@@ -545,4 +361,3 @@ table {
.bordered td:last-child { .bordered td:last-child {
border-right: 1px solid grey; border-right: 1px solid grey;
} }

107
html/html/themes/ipfire-new/include/functions.pl
View File

@@ -52,7 +52,7 @@ sub showsubmenu() {
} else { } else {
print '<li>'; print '<li>';
} }
print '<a href="'.$link.'"><span>'.$submenus->{$item}->{'caption'}.'</span></a>'; print '<a href="'.$link.'">'.$submenus->{$item}->{'caption'}.'</a>';
&showsubmenu($subsubmenus) if ($subsubmenus); &showsubmenu($subsubmenus) if ($subsubmenus);
print '</li>'; print '</li>';
@@ -64,16 +64,7 @@ sub showsubmenu() {
# #
# print menu html elements # print menu html elements
sub showmenu() { sub showmenu() {
print '<div id="cssmenu"><ul>'; print '<div id="cssmenu" class="bigbox fixed">';
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>";
if ($settings{'SPEED'} ne 'off') { if ($settings{'SPEED'} ne 'off') {
print <<EOF; print <<EOF;
@@ -85,7 +76,17 @@ sub showmenu() {
EOF 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 $suppressMenu = shift;
my @tmp = split(/\./, basename($0)); my @tmp = split(/\./, basename($0));
my $scriptName = @tmp[0]; my $scriptName = @tmp[0];
my $h2 = $title;
@URI=split ('\?', $ENV{'REQUEST_URI'} ); @URI=split ('\?', $ENV{'REQUEST_URI'} );
&General::readhash("${swroot}/main/settings", \%settings); &General::readhash("${swroot}/main/settings", \%settings);
&genmenu(); &genmenu();
$title = "IPFire - $title"; my $headline = "IPFire";
if ($settings{'WINDOWWITHHOSTNAME'} eq 'on') { if ($settings{'WINDOWWITHHOSTNAME'} eq 'on') {
$title = "$settings{'HOSTNAME'}.$settings{'DOMAINNAME'} - $title"; $headline = "$settings{'HOSTNAME'}.$settings{'DOMAINNAME'}";
} }
print <<END print <<END
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <html>
<head> <head>
<title>$title</title> <title>$headline - $title</title>
$extrahead $extrahead
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
@@ -142,21 +142,16 @@ END
} }
print <<END print <<END
</head> </head>
<body> <body>
END <div id="header" class="fixed">
;
print <<END
<!-- IPFIRE HEADER -->
<div id="header_inner" class="fixed">
<div id="logo"> <div id="logo">
END END
; ;
if ($settings{'WINDOWWITHHOSTNAME'} eq 'on') { if ($settings{'WINDOWWITHHOSTNAME'} eq 'on') {
print "<h1><span>$settings{'HOSTNAME'}.$settings{'DOMAINNAME'}</span></h1><br />"; print "<h1>$settings{'HOSTNAME'}.$settings{'DOMAINNAME'}</h1>";
} else { } else {
print "<h1><span>IPFire</span></h1><br />"; print "<h1>IPFire</h1>";
} }
print <<END print <<END
@@ -168,11 +163,9 @@ END
&showmenu() if ($suppressMenu != 1); &showmenu() if ($suppressMenu != 1);
print <<END print <<END
<div id="main"> <div class="bigbox fixed">
<div id="main_inner" class="fixed"> <div id="main_inner" class="fixed">
<h1>$h2</h1> <h1>$title</h1>
<div id="columnA_2columns">
END END
; ;
} }
@@ -188,7 +181,6 @@ sub openpagewithoutmenu {
return; return;
} }
############################################################################### ###############################################################################
# #
# print page closing html layout # print page closing html layout
@@ -202,27 +194,16 @@ sub closepage () {
$uptime =~ s/day /$Lang::tr{'day'}/; $uptime =~ s/day /$Lang::tr{'day'}/;
$uptime =~ s/user(s|)/$Lang::tr{'user'}/; $uptime =~ s/user(s|)/$Lang::tr{'user'}/;
$uptime =~ s/load average/$Lang::tr{'uptime load average'}/; $uptime =~ s/load average/$Lang::tr{'uptime load average'}/;
print <<END
<!-- closepage begin -->
</div>
</div>
END
;
print "<div id='columnC_2columns'>"; print <<END;
print <<END
<table cellspacing="5" class="statusdisplay" border="0">
<tr><td align='center'>$status Uptime: $uptime</td></tr>
END
;
print <<END
</table>
</div> </div>
</div> </div>
<div id="footer" class='bigbox fixed'>
$status Uptime: $uptime
</div>
</body> </body>
</html> </html>
<!-- closepage end -->
END END
; ;
} }
@@ -230,15 +211,13 @@ END
############################################################################### ###############################################################################
# #
# print big box opening html layout # print big box opening html layout
sub openbigbox sub openbigbox {
{
} }
############################################################################### ###############################################################################
# #
# print big box closing html layout # print big box closing html layout
sub closebigbox sub closebigbox {
{
} }
############################################################################### ###############################################################################
@@ -247,31 +226,23 @@ sub closebigbox
# @param page width # @param page width
# @param page align # @param page align
# @param page caption # @param page caption
sub openbox sub openbox {
{
$width = $_[0]; $width = $_[0];
$align = $_[1]; $align = $_[1];
$caption = $_[2]; $caption = $_[2];
print <<END print "<div class='post' align='$align'>\n";
<!-- openbox -->
<div class="post" align="$align"> if ($caption) {
END print "<h2>$caption</h2>\n";
; }
if ($caption) { print "<h3>$caption</h3>\n"; } else { print "&nbsp;"; }
} }
############################################################################### ###############################################################################
# #
# print box closing html layout # print box closing html layout
sub closebox sub closebox {
{ print "</div>";
print <<END
</div>
<br class="clear" />
<!-- closebox -->
END
;
} }
1; 1;