slp
/
po
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[themes] use CSS to style the menus.

This commit is contained in:
Solomon Peachy 2012-12-26 14:23:37 -05:00
parent a1f786bb4a
commit e4fc469445
24 changed files with 122 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGES
View File

@ -11,6 +11,7 @@ v2.38 (Unreleased)
[misc] Get rid of "IE7" compatibility library.
[themes] Use CSS3 to style radio buttons and checkboxes
[themes] Use CSS3 drop-shadows for images.
[themes] Use CSS styling for menus instead of the graphics hack.
v2.37.1 (December 3, 2012)

BIN
src/themes/aqua/navi_left.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 536 B

BIN
src/themes/aqua/navi_left_a.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 681 B

BIN
src/themes/aqua/navi_right.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 979 B

BIN
src/themes/aqua/navi_right_a.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

124
src/themes/aqua/screen.css
View File

@ -32,32 +32,24 @@ img {
display: inline;
}
div.gfx_button {
font-family: tahoma, arial, helvetica, sans-serif;
background: url("button.middle.png") repeat-x;
vertical-align: middle;
position: relative;
padding: 0px;
white-space: nowrap;
display: inline-block;
}
div.gfx_button img {
vertical-align: middle;
padding: 0px;
display: inline;
}
button.gfx {
vertical-align: middle;
padding: 0px;
display: inline;
background-color: transparent;
button {
font-family: tahoma, helvetica, sans-serif;
cursor: pointer;
padding: 0px;
background-color: #111;
border-radius: 5px;
margin-left: 0.1em;
margin-right: 0.1em;
border: 1px solid #666;
padding: 0.1em 0.5em 0.1em 0.5em;
}
button:active {
box-shadow: 0 0 3px 0 black;
}
body {
font-family : "Frutiger", "Helvetica Neue", "Univers", verdana, tahoma, arial, helvetica, sans-serif;
font-family : "Frutiger", "Helvetica Neue", "Univers", verdana, tahoma, helvetica, sans-serif;
font-size: small;
margin: 0.5em;
padding: 0px;
@ -308,6 +300,7 @@ table.listing {
background-color: #bcbcbc;
border-collapse: separate;
text-align: left;
border: 1px solid #444;
width: 100%;
}
@ -451,9 +444,9 @@ select {
color: #404040; /* Gray 25 */
background-color: #f0f0f0; /* Gray95 */
border-color: #c1cdc1; /* Honeydew */
margin: 0px;
margin: 0.1em;
font-size: 1em;
border-style: inset;
border-style: inset;
border-width: 2px;
}
@ -532,7 +525,7 @@ div.status table {
div.status td {
text-align: left;
padding: 0.1em;
padding: 0.25em;
background-color: #eeeeee;
}
@ -566,10 +559,6 @@ div.photo_slide_out:hover {
background-color: #ccddcc;
}
input.slide_cb {
display: none;
}
img.slide {
background-color: #eeeeee;
padding: 5px;
@ -624,110 +613,109 @@ td.navibar_a a {
}
div.navigator2 {
font-family: tahoma, arial, helvetica, sans-serif;
font-family: tahoma, helvetica, sans-serif;
float:left;
width:70%;
font-size: 1.15em;
font-size: 1.25em;
}
div.navigator2 ul {
text-indent: 0.5em;
clear: none;
list-style:none;
}
div.navigator2 li {
text-indent: 0em;
float:left;
background:url("navi_right.png") no-repeat right top;
}
div.navigator2 li.menu_here {
background:url("navi_right_a.png") no-repeat right top;
}
div.navigator2 a {
display:block;
background:url("navi_left.png") no-repeat left top;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.25em;
padding-top: 0.25em;
border-radius: 10px 10px 0px 0px;
border: 0px;
color: black;
border-width: 0px;
border-style: none;
background-color: transparent;
background-color: #eee;
box-shadow: 2px 0px 2px 0 #fff inset;
}
div.navigator2 a.menu_here {
background:url("navi_left_a.png") no-repeat left top;
background-color: #7790eb;
color: #222;
box-shadow: 2px 0px 2px 0 #eee;
}
div.navigator3 {
font-family: tahoma, arial, helvetica, sans-serif;
font-family: tahoma, helvetica, sans-serif;
float: right;
clear: none;
width: 30%;
font-size: 1.15em;
font-size: 1.25em;
}
div.navigator3 ul {
text-indent: 0.5em;
list-style: none;
}
div.navigator3 li {
text-indent: 0em;
float:right;
background:url("navi_right.png") no-repeat right top;
}
div.navigator3 li.menu_here {
background:url("navi_right_a.png") no-repeat right top;
}
div.navigator3 a {
display: block;
background:url("navi_left.png") no-repeat left top;
display:block;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.25em;
padding-top: 0.25em;
border-radius: 10px 10px 0px 0px;
border: 0px;
color: black;
border-width: 0px;
border-style: none;
background-color: transparent;
background-color: #111;
box-shadow: 2px 0px 2px 0 black inset;
}
div.navigator3 a.menu_here {
background:url("navi_left_a.png") no-repeat left top;
background-color: #7790eb;
color: #ddd;
box-shadow: 2px 0px 2px 0 #aaa;
}
div.navigatorf {
font-family: tahoma, arial, helvetica, sans-serif;
font-family: tahoma, helvetica, sans-serif;
float: left;
font-size: 1em;
}
div.navigatorf ul {
text-indent: 0.5em;
clear: none;
list-style: none;
}
div.navigatorf li {
float:left;
background:url("navi_right.png") no-repeat right top;
}
div.navigatorf li.menu_here {
background:url("navi_right_a.png") no-repeat right top;
}
div.navigatorf a {
display:block;
background:url("navi_left.png") no-repeat left top;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.25em;
padding-top: 0.25em;
border-radius: 7px 7px 0px 0px;
border: 0px;
color: black;
border-width: 0px;
border-style: none;
background-color: transparent;
background-color: #black;
box-shadow: 2px 0px 2px 0 white inset;
}
div.navigatorf a.menu_here {
background:url("navi_left_a.png") no-repeat left top;
background-color: #7790eb;
color: #ccc;
box-shadow: 2px 0px 2px 0 #333;
}
#code {

BIN
src/themes/aqua/shadow.bottom.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1005 B

BIN
src/themes/aqua/shadow.bottom.left.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 208 B

BIN
src/themes/aqua/shadow.bottom.right.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 371 B

BIN
src/themes/aqua/shadow.left.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 750 B

BIN
src/themes/aqua/shadow.right.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 724 B

BIN
src/themes/aqua/shadow.top.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 495 B

BIN
src/themes/aqua/shadow.top.left.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 128 B

BIN
src/themes/aqua/shadow.top.right.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 204 B

9
src/themes/aqua/theme.php
View File

@ -46,7 +46,7 @@ function theme_display_selectButton() {
$extra = " onclick=\"javascript: toggleChecksList();\" ";
}
print "<button name=\"$name\" class=\"gfx\" type=\"$type\" title=\"$title\" $extra ><div class=\"gfx_button\"><img src=\"$theme/button.left.png\" alt=\"\"/><span id=\"selectButton\">$text</span><img src=\"$theme/button.right.png\" alt=\"\"/></div></button>";
print(make_button($name, $type, $title, FALSE, $text, $extra));
}
function theme_display_navigator_box_top($index, $data, $width) {
@ -105,7 +105,7 @@ function theme_display_slide($cell_counter, $checks, $content, $value) {
print $content;
if ($checks) {
print "<input class=\"slide_cb\" type=\"checkbox\" name=\"selection[]\" id=\"cb$cell_counter\" value=\"$value\"/>";
print "<input type=\"checkbox\" name=\"selection[]\" id=\"cb$cell_counter\" value=\"$value\"/>";
}
print "</div></div>";
}
@ -238,15 +238,16 @@ function make_button($name, $type, $title, $key = FALSE, $text = FALSE, $extra =
$text = $title;
}
$button = "<button name=\"$name\" class=\"gfx\" type=\"$type\" title=\"$title\" $extra ";
$button = "<button name=\"$name\" type=\"$type\" title=\"$title\" $extra ";
if ($key != FALSE)
$button .= " accesskey=\"$key\" ";
$button .= "><div class=\"gfx_button\"><img src=\"$theme/button.left.png\" alt=\"\"/>$text<img src=\"$theme/button.right.png\" alt=\"\"/></div></button>";
$button .= ">$text</button>";
return $button;
}
function theme_generate_buttons() {
global $strings;
global $thm_elem;

BIN
src/themes/blackwater/button.left.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 470 B

BIN
src/themes/blackwater/button.middle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 258 B

BIN
src/themes/blackwater/button.right.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 540 B

BIN
src/themes/blackwater/navi_left.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 462 B

BIN
src/themes/blackwater/navi_left_a.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 522 B

BIN
src/themes/blackwater/navi_right.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 886 B

BIN
src/themes/blackwater/navi_right_a.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 988 B

122
src/themes/blackwater/screen.css
View File

@ -33,34 +33,25 @@ img {
opacity: 1;
}
div.gfx_button {
font-family: tahoma, arial, helvetica, sans-serif;
background: url("button.middle.png") repeat-x;
vertical-align: middle;
position: relative;
button {
font-family: tahoma, helvetica, sans-serif;
cursor: pointer;
padding: 0px;
color: #d0d0d0;
white-space: nowrap;
display: inline-block;
background-color: #111;
border-radius: 5px;
margin-left: 0.1em;
margin-right: 0.1em;
border: 1px solid #666;
padding: 0.1em 0.5em 0.1em 0.5em;
}
div.gfx_button img {
vertical-align: middle;
padding: 0px;
display: inline;
opacity: 1;
}
button.gfx {
vertical-align: middle;
padding: 0px;
display: inline;
background-color: transparent;
cursor: pointer;
button:active {
box-shadow: 0 0 3px 0 white;
}
body {
font-family : "Frutiger", "Helvetica Neue", "Univers", verdana, tahoma, arial, helvetica, sans-serif;
font-family : "Frutiger", "Helvetica Neue", "Univers", verdana, tahoma, helvetica, sans-serif;
font-size: small;
margin: 0.5em;
padding: 0px;
@ -313,6 +304,7 @@ table#metadata TH {
table.listing {
background-color: #2c2c2c;
border-collapse: separate;
border: 1px solid #888;
text-align: left;
width: 100%;
opacity: .75;
@ -459,9 +451,9 @@ select {
color: #f0f0f0; /* Gray95 */
background-color: #404040; /* Gray 25 */
border-color: #c1cdc1; /* Honeydew */
margin: 0px;
margin: 0.1em;
font-size: 1em;
border-style: inset;
border-style: inset;
border-width: 2px;
}
@ -542,7 +534,7 @@ div.status table {
div.status td {
text-align: left;
padding: 0.1em;
padding: 0.25em;
background-color: #222;
}
@ -577,10 +569,6 @@ div.photo_slide_out:hover {
border: 1px #444444 outset;
}
input.slide_cb {
display: none;
}
img.slide {
background-color: #222;
padding: 5px;
@ -640,110 +628,110 @@ td.navibar_a a {
}
div.navigator2 {
font-family: tahoma, arial, helvetica, sans-serif;
font-family: tahoma, helvetica, sans-serif;
float:left;
width:70%;
font-size: 1.15em;
font-size: 1.25em;
}
div.navigator2 ul {
text-indent: 0.5em;
clear: none;
list-style:none;
}
div.navigator2 li {
text-indent: 0em;
float:left;
background:url("navi_right.png") no-repeat right top;
}
div.navigator2 li.menu_here {
background:url("navi_right_a.png") no-repeat right top;
}
div.navigator2 a {
display:block;
background:url("navi_left.png") no-repeat left top;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.25em;
padding-top: 0.25em;
border-radius: 10px 10px 0px 0px;
border: 0px;
color: #d0d0d0;
border-width: 0px;
border-style: none;
background-color: transparent;
background-color: #111;
box-shadow: 2px 0px 2px 0 #fff inset;
}
div.navigator2 a.menu_here {
background:url("navi_left_a.png") no-repeat left top;
background-color: #7790eb;
color: #222;
box-shadow: 2px 0px 2px 0 #444;
}
div.navigator3 {
font-family: tahoma, arial, helvetica, sans-serif;
font-family: tahoma, helvetica, sans-serif;
float: right;
clear: none;
width: 30%;
font-size: 1.15em;
font-size: 1.25em;
}
div.navigator3 ul {
text-indent: 0.5em;
list-style: none;
}
div.navigator3 li {
text-indent: 0em;
float:right;
background:url("navi_right.png") no-repeat right top;
}
div.navigator3 li.menu_here {
background:url("navi_right_a.png") no-repeat right top;
}
div.navigator3 a {
display: block;
background:url("navi_left.png") no-repeat left top;
display:block;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.25em;
padding-top: 0.25em;
border-radius: 10px 10px 0px 0px;
border: 0px;
color: #d0d0d0;
border-width: 0px;
border-style: none;
background-color: transparent;
background-color: #111;
box-shadow: 2px 0px 2px 0 #fff inset;
}
div.navigator3 a.menu_here {
background:url("navi_left_a.png") no-repeat left top;
background-color: #7790eb;
color: #222;
box-shadow: 2px 0px 2px 0 #444;
}
div.navigatorf {
font-family: tahoma, arial, helvetica, sans-serif;
font-family: tahoma, helvetica, sans-serif;
float: left;
font-size: 1em;
}
div.navigatorf ul {
text-indent: 0.5em;
clear: none;
list-style: none;
}
div.navigatorf li {
float:left;
background:url("navi_right.png") no-repeat right top;
}
div.navigatorf li.menu_here {
background:url("navi_right_a.png") no-repeat right top;
text-indent: 0em;
}
div.navigatorf a {
display:block;
background:url("navi_left.png") no-repeat left top;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.25em;
padding-top: 0.25em;
border-radius: 7px 7px 0px 0px;
border: 0px;
color: #d0d0d0;
border-width: 0px;
border-style: none;
background-color: transparent;
background-color: #111;
box-shadow: 2px 0px 2px 0 #fff inset;
}
div.navigatorf a.menu_here {
background:url("navi_left_a.png") no-repeat left top;
background-color: #7790eb;
color: #222;
box-shadow: 2px 0px 2px 0 #444;
}
#code {

9
src/themes/blackwater/theme.php
View File

@ -46,7 +46,7 @@ function theme_display_selectButton() {
$extra = " onclick=\"javascript: toggleChecksList();\" ";
}
print "<button name=\"$name\" class=\"gfx\" type=\"$type\" title=\"$title\" $extra ><div class=\"gfx_button\"><img src=\"$theme/button.left.png\" alt=\"\"/><span id=\"selectButton\">$text</span><img src=\"$theme/button.right.png\" alt=\"\"/></div></button>";
print(make_button($name, $type, $title, FALSE, $text, $extra));
}
function theme_display_navigator_box_top($index, $data, $width) {
@ -105,7 +105,7 @@ function theme_display_slide($cell_counter, $checks, $content, $value) {
print $content;
if ($checks) {
print "<input class=\"slide_cb\" type=\"checkbox\" name=\"selection[]\" id=\"cb$cell_counter\" value=\"$value\"/>";
print "<input type=\"checkbox\" name=\"selection[]\" id=\"cb$cell_counter\" value=\"$value\"/>";
}
print "</div></div>";
}
@ -238,15 +238,16 @@ function make_button($name, $type, $title, $key = FALSE, $text = FALSE, $extra =
$text = $title;
}
$button = "<button name=\"$name\" class=\"gfx\" type=\"$type\" title=\"$title\" $extra ";
$button = "<button name=\"$name\" type=\"$type\" title=\"$title\" $extra ";
if ($key != FALSE)
$button .= " accesskey=\"$key\" ";
$button .= "><div class=\"gfx_button\"><img src=\"$theme/button.left.png\" alt=\"\"/>$text<img src=\"$theme/button.right.png\" alt=\"\"/></div></button>";
$button .= ">$text</button>";
return $button;
}
function theme_generate_buttons() {
global $strings;
global $thm_elem;