nettika/phpmyadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added SVG gradient generator instead of using one file for each gradient

Browse Source
This commit is contained in:
Piotr Przybylski
2011-04-22 21:24:34 +02:00
parent 21ac63902d
commit b089769241
7 changed files with 47 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
themes/original/css/theme_right.css.php
View File

@@ -1446,7 +1446,8 @@ table#serverconnection_trg_local {
-moz-border-radius: 11px; -moz-border-radius: 11px;
-webkit-border-radius: 11px; -webkit-border-radius: 11px;
border-radius: 11px; border-radius: 11px;
background-image: url(./themes/original/img/gradient.svg); background-image: url(./themes/svg_gradient.php?from=ffffff&to=cccccc);
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc)); background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
background: -moz-linear-gradient(top, #ffffff, #cccccc); background: -moz-linear-gradient(top, #ffffff, #cccccc);
background: -o-linear-gradient(top, #ffffff, #cccccc); background: -o-linear-gradient(top, #ffffff, #cccccc);

17
themes/original/img/gradient.svg
View File

@@ -1,17 +0,0 @@
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%" height="100%"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="myLinearGradient1"
x1="0%" y1="0%"
x2="0%" y2="100%"
spreadMethod="pad">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
<stop offset="100%" stop-color="#cccccc" stop-opacity="1"/>
</linearGradient>
</defs>
<rect width="100%" height="100%"
style="fill:url(#myLinearGradient1);" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 614 B

6
themes/pmahomme/css/theme_left.css.php
View File

@@ -206,7 +206,8 @@ div#left_tableList li {
#newtable a { #newtable a {
display: block; display: block;
padding: 1px; padding: 1px;
background-image: url(./themes/pmahomme/img/gradient.svg); background-image: url(./themes/svg_gradient.php?from=ffffff&to=cccccc);
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc)); background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
background: -moz-linear-gradient(top, #ffffff, #cccccc); background: -moz-linear-gradient(top, #ffffff, #cccccc);
background: -o-linear-gradient(top, #ffffff, #cccccc); background: -o-linear-gradient(top, #ffffff, #cccccc);
@@ -222,7 +223,8 @@ div#left_tableList li {
} }
#newtable a:hover { #newtable a:hover {
background-image: url(./themes/pmahomme/img/gradient-hover.svg); background-image: url(./themes/svg_gradient.php?from=cccccc&to=dddddd);
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#dddddd)) !important; background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#dddddd)) !important;
background: -moz-linear-gradient(top, #cccccc, #dddddd) !important; background: -moz-linear-gradient(top, #cccccc, #dddddd) !important;
background: -o-linear-gradient(top, #cccccc, #dddddd) !important; background: -o-linear-gradient(top, #cccccc, #dddddd) !important;

24
themes/pmahomme/css/theme_right.css.php
View File

@@ -105,7 +105,8 @@ a:hover {
-moz-border-radius:5px; -moz-border-radius:5px;
-webkit-border-radius:5px; -webkit-border-radius:5px;
border-radius:5px; border-radius:5px;
background-image: url(./themes/pmahomme/img/gradient.svg); background-image: url(./themes/svg_gradient.php?from=ffffff&to=cccccc);
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc)); background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
background: -moz-linear-gradient(top, #ffffff, #cccccc); background: -moz-linear-gradient(top, #ffffff, #cccccc);
background: -o-linear-gradient(top, #ffffff, #cccccc); background: -o-linear-gradient(top, #ffffff, #cccccc);
@@ -125,7 +126,8 @@ th {
font-weight: bold; font-weight: bold;
color: <?php echo $GLOBALS['cfg']['ThColor']; ?>; color: <?php echo $GLOBALS['cfg']['ThColor']; ?>;
background: #f3f3f3; background: #f3f3f3;
background-image: url(./themes/pmahomme/img/gradient.svg); background-image: url(./themes/svg_gradient.php?from=ffffff&to=cccccc);
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc)); background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
background: -moz-linear-gradient(top, #ffffff, #cccccc); background: -moz-linear-gradient(top, #ffffff, #cccccc);
background: -o-linear-gradient(top, #ffffff, #cccccc); background: -o-linear-gradient(top, #ffffff, #cccccc);
@@ -198,7 +200,8 @@ input[type=submit]{
text-shadow: 0px 1px 0px #fff; text-shadow: 0px 1px 0px #fff;
background-image: url(./themes/pmahomme/img/gradient.svg); background-image: url(./themes/svg_gradient.php?from=ffffff&to=cccccc);
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc)); background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
background: -moz-linear-gradient(top, #ffffff, #cccccc); background: -moz-linear-gradient(top, #ffffff, #cccccc);
background: -o-linear-gradient(top, #ffffff, #cccccc); background: -o-linear-gradient(top, #ffffff, #cccccc);
@@ -206,7 +209,8 @@ input[type=submit]{
} }
input[type=submit]:hover{ position: relative; input[type=submit]:hover{ position: relative;
background-image: url(./themes/pmahomme/img/gradient-hover.svg); background-image: url(./themes/svg_gradient.php?from=cccccc&to=dddddd);
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#dddddd)); background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#dddddd));
background: -moz-linear-gradient(top, #cccccc, #dddddd); background: -moz-linear-gradient(top, #cccccc, #dddddd);
background: -o-linear-gradient(top, #cccccc, #dddddd); background: -o-linear-gradient(top, #cccccc, #dddddd);
@@ -1330,14 +1334,16 @@ div#querywindowcontainer fieldset {
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
text-shadow: #fff 0px 1px 0px; text-shadow: #fff 0px 1px 0px;
*/ */
background-image: url(./themes/pmahomme/img/gradient.svg); background-image: url(./themes/svg_gradient.php?from=ffffff&to=cccccc);
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc)); background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
background: -moz-linear-gradient(top, #ffffff, #cccccc); background: -moz-linear-gradient(top, #ffffff, #cccccc);
background: -o-linear-gradient(top, #ffffff, #cccccc); background: -o-linear-gradient(top, #ffffff, #cccccc);
<?php echo PMA_ieFilter('#ffffff', '#cccccc'); ?> <?php echo PMA_ieFilter('#ffffff', '#cccccc'); ?>
} }
#sectionlinks a:hover, #statuslinks a:hover{ #sectionlinks a:hover, #statuslinks a:hover{
background-image: url(./themes/pmahomme/img/gradient-hover.svg); background-image: url(./themes/svg_gradient.php?from=cccccc&to=dddddd);
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#dddddd)); background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#dddddd));
background: -moz-linear-gradient(top, #cccccc, #dddddd); background: -moz-linear-gradient(top, #cccccc, #dddddd);
background: -o-linear-gradient(top, #cccccc, #dddddd); background: -o-linear-gradient(top, #cccccc, #dddddd);
@@ -1771,7 +1777,8 @@ table#serverconnection_trg_local {
text-shadow: 0px 1px 0px #fff; text-shadow: 0px 1px 0px #fff;
background-image: url(./themes/pmahomme/img/gradient.svg); background-image: url(./themes/svg_gradient.php?from=ffffff&to=cccccc);
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc)); background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
background: -moz-linear-gradient(top, #ffffff, #cccccc); background: -moz-linear-gradient(top, #ffffff, #cccccc);
background: -o-linear-gradient(top, #ffffff, #cccccc); background: -o-linear-gradient(top, #ffffff, #cccccc);
@@ -1779,7 +1786,8 @@ table#serverconnection_trg_local {
cursor: pointer; cursor: pointer;
} }
#buttonGo:hover{ #buttonGo:hover{
background-image: url(./themes/pmahomme/img/gradient-hover.svg); background-image: url(./themes/svg_gradient.php?from=cccccc&to=dddddd);
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#dddddd)); background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#dddddd));
background: -moz-linear-gradient(top, #cccccc, #dddddd); background: -moz-linear-gradient(top, #cccccc, #dddddd);
background: -o-linear-gradient(top, #cccccc, #dddddd); background: -o-linear-gradient(top, #cccccc, #dddddd);

17
themes/pmahomme/img/gradient-hover.svg
View File

@@ -1,17 +0,0 @@
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%" height="100%"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="myLinearGradient1"
x1="0%" y1="0%"
x2="0%" y2="100%"
spreadMethod="pad">
<stop offset="0%" stop-color="#cccccc" stop-opacity="1"/>
<stop offset="100%" stop-color="#dddddd" stop-opacity="1"/>
</linearGradient>
</defs>
<rect width="100%" height="100%"
style="fill:url(#myLinearGradient1);" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 614 B

17
themes/pmahomme/img/gradient.svg
View File

@@ -1,17 +0,0 @@
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%" height="100%"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="myLinearGradient1"
x1="0%" y1="0%"
x2="0%" y2="100%"
spreadMethod="pad">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
<stop offset="100%" stop-color="#cccccc" stop-opacity="1"/>
</linearGradient>
</defs>
<rect width="100%" height="100%"
style="fill:url(#myLinearGradient1);" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 614 B

25
themes/svg_gradient.php Normal file
View File

@@ -0,0 +1,25 @@
<?php
header('Content-Type: image/svg+xml');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');
function get_color($get_name, $default)
{
// get color from GET args, only alphanumeric chcracters
$opts = array('options' => array('regexp' => '/^[a-z0-9]+$/i'));
$color = filter_input(INPUT_GET, $get_name, FILTER_VALIDATE_REGEXP, $opts);
if (preg_match('/^[a-f0-9]{6}$/', $color)) {
return '#' . $color;
}
return $color ? $color : $default;
}
?>
<?php echo '<?xml version="1.0" ?>' ?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%" height="100%">
<defs>
<linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="<?php echo get_color('from', 'white') ?>" stop-opacity="1" />
<stop offset="100%" stop-color="<?php echo get_color('to', 'black') ?>" stop-opacity="1" />
</linearGradient>
</defs>
<rect width="100%" height="100%" style="fill:url(#linear-gradient);" />
</svg>