summaryrefslogtreecommitdiff
path: root/themes
diff options
context:
space:
mode:
Diffstat (limited to 'themes')
-rw-r--r--themes/default/css/forms.css191
-rw-r--r--themes/default/css/screen.css477
-rw-r--r--themes/default/views/header.html.php11
3 files changed, 349 insertions, 330 deletions
diff --git a/themes/default/css/forms.css b/themes/default/css/forms.css
deleted file mode 100644
index 03f6527a..00000000
--- a/themes/default/css/forms.css
+++ /dev/null
@@ -1,191 +0,0 @@
-/** *************************************************************************
- * Base form styles
- */
-
-/* Zero out padding and margin, adjust where needed later */
-form, fieldset, label, input, .checkbox, textarea, select, option, form div {
- margin: 0;
- padding: 0;
-}
-fieldset {
- margin: 1em 0;
- padding: 1em;
- border: 1px solid #999;
-}
-legend {
- font-weight: bold;
- margin: 0 2% .5em 0;
- padding: .2em .5em;
-}
-input.text, textarea, select, input.password {
- border: 1px solid #666;
- border-right: 1px solid #ccc;
- border-bottom: 1px solid #ccc;
-}
-option {
- float: none;
- clear: both;
- margin-right: 2em;
-}
-input.radio, input.checkbox {
- margin-right: .5em;
-}
-/* Create a bit of padding for text inputs and selects */
-input.text, input.password, input.button, textarea, select {
- padding: .2em;
-}
-input.button {
- margin-right: 1em;
- padding: .2em .6em;
-}
-.readonly {
- color: #999;
- background: #e7e7e7;
-}
-/* standard widths */
-.w12 { width: 12% }
-.w25 { width: 25% }
-.w37 { width: 37% }
-.w50 { width: 50% }
-.w62 { width: 62% }
-.w75 { width: 75% }
-.w87 { width: 87% }
-.wauto { width: auto; }
-
-
-/** *************************************************************************
- * Provide proper vertical alignment for expanded and compact forms
- */
-
-.gExpandedForm .row div,
-.gCompactForm div div label {
- padding-top: .5em;
-}
-
-
-/** *************************************************************************
- * Expanded form layout styles
- */
-
-.gExpandedForm { overflow: hidden; }
-.gExpandedForm .row {
- padding: .3em 0;
- white-space: nowrap;
- overflow: hidden;
- clear: both;
-}
-.gExpandedForm label,
-.gExpandedForm .row p,
-.gExpandedForm .row div,
-.gExpandedForm input,
-.gExpandedForm select,
-.gExpandedForm textarea {
- float: left;
-}
-/* change column widths for labels and inputs */
-.gExpandedForm .text, textarea { width: 80%; }
-.gExpandedForm label, .gExpandedForm .row p {
- width: 15%;
- margin: .5em 1em .5em 0;
- text-align: right;
- white-space: normal;
- overflow: hidden;
-}
-.gExpandedForm .row div {
- white-space: nowrap;
- overflow: hidden;
- clear: none;
-}
-/* labels and form inputs inside of divs should not float */
-.gExpandedForm .row div * {
- float: none;
- clear: none;
-}
-.expanded input.checkbox,
-.expanded input.radio,
-.expanded select {
- margin-top: 1.5em;
-}
-.gExpandedForm div div input {
- margin-right: 0;
-}
-
-
-/** *************************************************************************
- * Compact form layout styles
- */
-
-.gCompactForm { overflow: hidden; }
-.gCompactForm div,
-.gCompactForm label,
-.gCompactForm input,
-.gCompactForm select,
-.gCompactForm textarea {
- float: left;
-}
-.gCompactForm input.text,
-.gCompactForm select,
-.gCompactForm textarea {
- /* set width: auto to allow form element content
- to set width otherwise 90% is a good setting */
- width: 90%; /* determines space between form elements */
-}
-/* Increase width of elements in twoper
- columns to provide better alignment */
-.gCompactForm .twoper input.text,
-.gCompactForm .twoper select,
-.gCompactForm .twoper textarea {
- width: 95%;
-}
-.gCompactForm div {
- width: 99%;
- margin-bottom: 1em; /* space between rows */
- clear: both;
-}
-/* Nested divs shouldn't clear floated elements */
-/* keeps nested divs from compounding margin value */
-.gCompactForm div div {
- margin-bottom: 0;
- clear: none;
-}
-/* Nested div label contents should determine their own width */
-.gCompactForm div div label {
- width: auto;
- white-space: normal;
- /* unccomment to stack form inputs inside a row */
- /* clear: left; */
- margin-right: 1em;
-}
-/* Fix paragraph white space in Safari */
-.gCompactForm div div p {
- margin: 0;
- padding: 0;
-}
-
-/* Compact layout - Set item width within rows */
-.oneper label, .oneper div { width: 99%; } /* can't be 100%, IE bug */
-.twoper label, .twoper div { width: 46%; }
-.threeper label, .threeper div { width: 32%; }
-.fourper label, .fourper div { width: 23%; }
-.fiveper label, .fiveper div { width: 19%; }
-.sixper label, .sixper div { width: 15%; }
-.sevenper label, .sevenper div { width: 13%; }
-.eightper label, .eightper div { width: 11%; }
-.nineper label, .nineper div { width: 10%; }
-.tenper label, .tenper div { width: 8.7%; }
-
-.oneper label, .oneper div,
-.twoper label, .twoper div,
-.threeper label, .threeper div,
-.fourper label, .fourper div,
-.fiveper label, .fiveper div,
-.sixper label, .sixper div,
-.sevenper label, .sevenper div,
-.eightper label, .eightper div,
-.nineper label, .nineper div,
-.tenper label, .tenper div {
- white-space: nowrap;
- overflow: hidden;
- border: none;
- border-collapse: collapse;
-}
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index a00ed05a..56616b5d 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -1,5 +1,5 @@
/**
- * Gx Styles
+ * Gallery 3 Default Theme Styles
*
* @requires YUI reset, font, grids, and base CSS
*
@@ -9,13 +9,13 @@
* 3) Generic content containers (item, block)
* 4) Specific content containers and blocks (albums, metadata, comments)
* 5) Navigation and menus (menus, breadcrumbs, pagination, tab cloud)
- * 6) Specific text styles (different headings, font sizes, etc.)
- * 7) Generic styles ()
+ * 6) Generic styles (.gInline, gOdd/gEven, etc.)
+ * 7) Forms (general and specific)
* 8) Browser hacks (clear fix)
+ *
+ * @todo Disabled, readonly form inputs
*/
- @import url('forms.css');
-
/**
** *******************************************************************
* 1) HTML elements (body, headings, links, lists, tables, forms)
@@ -23,11 +23,13 @@
*/
/* ~~~~~~~~~ general elements ~~~~~~~~~~ */
+
body, html {
background-color: #ccc;
}
/* ~~~~~~~~~ text ~~~~~~~~~~ */
+
h1 {
margin-top: 0;
}
@@ -41,41 +43,28 @@ a {
color: #6b8cb7;
text-decoration: none;
}
+
a:hover {
color: #f30;
text-decoration: underline;
}
/* ~~~~~~~~~ list ~~~~~~~~~~ */
+
li {
list-style-type: none;
}
/* ~~~~~~~~~ table ~~~~~~~~~~ */
+
caption {
text-align: left;
}
+
th {
text-align: left;
}
-/* ~~~~~~~~~ form ~~~~~~~~~~ */
-form {
-
-}
-legend {
-
-}
-label {
-
-}
-input {
-
-}
-textarea {
-
-}
-
/**
** *******************************************************************
* 2) Layout containers (view, header, content, sidebar, footer)
@@ -83,6 +72,7 @@ textarea {
*/
/* ~~~~~ View Container ~~~~~~ */
+
.gView {
background-color: #fff;
border: 1px solid #ccc;
@@ -120,6 +110,7 @@ textarea {
margin: 0 1em 2.5em 0;
padding: 0;
}
+
.gBlockHeader {
background-color: #e8e8e8;
cursor: move;
@@ -128,6 +119,7 @@ textarea {
padding: .3em .4em;
position: relative;
}
+
.gBlockHeader h2 {
background: url('../images/ico_dragable.png') no-repeat;
float: left;
@@ -135,6 +127,7 @@ textarea {
margin: 0;
padding-left: 12px;
}
+
.gBlockHeader .gMinimize {
background-image: url('../images/minimize.png');
height: 16px;
@@ -143,18 +136,23 @@ textarea {
top: .45em;
width: 16px;
}
+
.gBlockHeader .gMinimize:hover {
background-image: url('../images/minimize_active.png');
}
+
.gBlockContent {
margin: .5em .5em 0 .5em;
}
+
table.gBlockContent {
table-layout: fixed;
}
+
table.gBlockContent th {
padding: .3em .3em .3em 0;
}
+
table.gBlockContent td {
padding: .3em 0 .3em .3em;
}
@@ -172,9 +170,8 @@ table.gBlockContent td {
margin: 10px;
}
- .gThumbnail {
-
- }
+.gThumbnail {
+}
/* ~~~~~~~~~ Album ~~~~~~~~~~ */
@@ -182,9 +179,11 @@ table.gBlockContent td {
height: 40px;
position: relative;
}
+
#gAlbumHeader h1 {
display: inline;
}
+
#gAlbumHeader span {
padding-right: 10px;
}
@@ -192,6 +191,7 @@ table.gBlockContent td {
#gAlbumGrid {
margin: 0;
}
+
.gItem {
border: 1px solid #ccc;
float: left;
@@ -200,12 +200,15 @@ table.gBlockContent td {
padding: 5px 0 5px 0;
text-align: center;
}
+
.gItem h2 {
margin: 5px 0;
}
+
.gAlbum {
background-color: #d4daff;
}
+
.gAlbum h2 {
color: #006;
}
@@ -216,13 +219,16 @@ table.gBlockContent td {
#gItem {
margin: 0;
}
+
#gItem a.gButtonLink {
float: right;
}
+
#gItem img {
background-color: #e7e7e7;
border: 1px solid #c0c0c0;
}
+
#gItem h1 {
margin: 10px 0;
}
@@ -232,10 +238,12 @@ table.gBlockContent td {
table.gMetadata {
}
+
table.gMetadata td,
table.gMetadata th {
border: none;
}
+
table.gMetadata td.toggle {
text-align: right;
}
@@ -247,106 +255,50 @@ table.gMetadata td.toggle {
border: 1px solid #ccc;
padding: 10px;
}
+
#gComments h2 {
margin-top: 0;
}
+
#gComments ul {
margin: 0;
}
+
#gComments ul li {
list-style-type: none;
margin-bottom: 15px;
}
+
#gComments ul li p {
background-color: #e8e8e8;
margin-bottom: 2px;
padding: 4px;
}
+
#gComments ul li div {
padding: 8px;
}
/* ~~~~~~~~~ Status messages ~~~~~~~~~~ */
-#gStatusMessages {
+.gStatus {
}
+
.gError {
color: red;
}
-.gWarning {
-
-}
-.gSuccess {
-}
-.gInfo {
+.gWarning {
}
-/* ~~~~~~~~~ search form ~~~~~~~~~~ */
-
-#gSearchForm {
- float: right;
- margin-right: 10px;
-}
-#gSearchForm input.text {
- padding: 1px;
-}
-#gSearchForm input.submit {
- height: 20px;
-}
-
-/* ~~~~~~~~~ comment form ~~~~~~~~~~ */
+.gSuccess {
- #gCommentAdd {
- width: 500px;
}
-/* ----------- upload ----------------- */
+.gInfo {
-#gUploadForm .gBreadcrumbs li input,
-#gUploadForm .gBreadcrumbs li select {
- width: 140px;
- margin-left: 5px;
-}
-#gUploadForm-queue {
- width: 500px;
-}
-#gUploadForm-queue td,
-#gUploadForm-queue th {
- border-color: #e7e7e7;
- text-align: left;
-}
-#gUploadForm-queue caption {
- display: none;
-}
-#gUploadForm-queue thead th {
- border-bottom: 2px solid #000;
- text-align: center;
-}
-#gUploadForm-queue thead th,
-#gUploadForm-queue thead td {
- background-color: #e7e7e7;
-}
-#gUploadForm-queue tfoot td {
- border-top: 2px solid #000;
-}
-#gUploadForm-queue .filesize {
- width: 60px;
-}
-#gUploadForm-queue td.filesize {
- text-align: right;
-}
-#gUploadForm-queue tfoot td.filesize {
- color: #ccc;
-}
-#gUploadForm-queue .action {
- width: 40px;
-}
-#gUploadForm-button {
- margin-left: 370px;
- width: 130px;
}
/**
@@ -366,42 +318,6 @@ table.gMetadata td.toggle {
text-align: right;
}
-#gLoginMenu fieldset {
- border-width: 0;
- margin: 0;
- padding: 0;
-}
-
- #gLoginMenu fieldset legend{
- display: none;
-}
-
-#gLoginForm {
- margin-top: 5px;
-}
-#gLoginMenu label {
- font-size: .8em;
-}
-
-#gLoginMenu ul {
- margin: 0;
-}
-
-#gLoginMenu li {
- float: left;
- list-style-type: none;
-}
-
-#gLoginMenu li input#gUsername,
-#gLoginMenu li input#gPassword {
- padding: 0 0 .1em 0;
- width: 80px;
-}
-#gLoginMenu li input.submit {
- font-size: .9em;
- font-weight: bold;
-}
-
/* ~~~~~~~~ Site Menu ~~~~~~~~ */
#gSiteMenu {
@@ -412,11 +328,13 @@ table.gMetadata td.toggle {
margin: 8px 0;
padding: 0;
}
+
#gSiteMenu li {
float: left;
list-style-type: none;
width: 19%;
}
+
#gSiteMenu li a {
border: 1px solid #369;
border-width: 0 1px 1px 0;
@@ -430,10 +348,12 @@ table.gMetadata td.toggle {
text-align: center;
text-decoration: none;
}
+
#gSiteMenu li a:hover {
background: url('../images/bg_sitemenu_hover.png') repeat-x;
color: #f30;
}
+
#gSiteMenu li a.active {
background: #dce6ef;
border-color: #dce6ef;
@@ -454,19 +374,23 @@ table.gMetadata td.toggle {
margin: 4px 0;
padding: 0 0 0 12px;
}
+
#gBreadcrumbs li {
background: transparent url('../images/icon_breadcrumb_separator.gif') no-repeat scroll left center;
float: left;
list-style-type: none;
padding: 0 0 0 12px;
}
+
#gBreadcrumbs li.root {
background: transparent;
}
+
#gBreadcrumbs li a,
#gBreadcrumbs li span {
display: block;
}
+
#gBreadcrumbs li.active span {
font-weight: bold;
}
@@ -477,42 +401,51 @@ table.gMetadata td.toggle {
padding: 0;
text-align: justify;
}
+
#gTags ul li {
display: inline;
text-align: justify;
}
+
#gTags ul li a {
text-decoration: none;
}
+
#gTags ul li a.size0 {
color: #9cf;
font-size: 100%;
font-weight: 100;
}
+
#gTags ul li a.size1 {
color: #69f;
font-size: 110%;
font-weight: 300;
}
+
#gTags ul li a.size2 {
color: #69c;
font-size: 120%;
font-weight: 500;
}
+
#gTags ul li a.size3 {
color: #369;
font-size: 130%;
font-weight: 700;
}
+
#gTags ul li a.size4 {
color: #0e2b52;
font-size: 140%;
font-weight: 900;
}
+
#gTags ul li a:hover {
color: #FF3300;
text-decoration: underline;
}
+
#gTags form {
margin-top: 10px;
}
@@ -522,6 +455,7 @@ table.gMetadata td.toggle {
#gTags ul {
margin-left: .5em;
}
+
#gTags li {
list-style-image: url('../images/bullet_tag.png');
margin-bottom: .3em;
@@ -534,50 +468,60 @@ table.gMetadata td.toggle {
padding: 10px 0 0 0;
text-align: center;
}
+
#gPagination a,
#gPagination span {
background-repeat: no-repeat;
border: 1px solid #d3d3d3;
padding: 5px;
}
+
#gPagination a:hover {
background-color: #f3f3f3;
}
+
#gPagination .first {
background-image: url('../images/first.png');
background-position: left;
padding-left: 20px;
}
+
#gPagination .first_inactive {
background-image: url('../images/first_inactive.png');
background-position: left;
padding-left: 20px;
}
+
#gPagination .previous {
background-image: url('../images/previous.png');
background-position: left;
padding-left: 17px;
}
+
#gPagination .previous_inactive {
background-image: url('../images/previous_inactive.png');
background-position: left;
padding-left: 17px;
}
+
#gPagination .next {
background-image: url('../images/next.png');
background-position: right;
padding-right: 17px;
}
+
#gPagination .next_inactive {
background-image: url('../images/next_inactive.png');
background-position: right;
padding-right: 17px;
}
+
#gPagination .last {
background-image: url('../images/last.png');
background-position: right;
padding-right: 20px;
}
+
#gPagination .last_inactive {
background-image: url('../images/last_inactive.png');
background-position: right;
@@ -591,6 +535,7 @@ table.gMetadata td.toggle {
margin: 20px 0 20px 0;
padding: 5px;
}
+
#gAlbumTree #gTreeContainer {
border: 1px solid #d3d3d3;
padding: 0 0 0 5px;
@@ -598,23 +543,29 @@ table.gMetadata td.toggle {
/**
** *******************************************************************
- * 6) Specific text styles (different headings, font sizes, etc.)
+ * 6) Generic styles
** *******************************************************************
*/
-/**
- ** *******************************************************************
- * 7) Generic styles
- ** *******************************************************************
- */
+.gOdd {
+}
+
+.gEvent {
+}
+
+.gInline {
+ float: left;
+}
.gButtonLink {
border: 1px solid #d3d3d3;
padding: 5px;
}
+
.gButtonLink:hover {
background-color: #f3f3f3;
}
+
.gUnderState {
color: #c0c0c0;
}
@@ -625,7 +576,265 @@ table.gMetadata td.toggle {
/**
** *******************************************************************
- * 8) Browser hacks
+ * 8) Forms (general and specific)
+ ** *******************************************************************
+ */
+
+form {
+}
+
+fieldset {
+ border: 1px solid #ccc;
+ padding: 0;
+}
+
+legend {
+ margin-left: 1em;
+}
+
+label {
+ cursor: help;
+}
+
+input[type="text"],
+input[type="password"],
+textarea,
+select {
+ padding: .3em;
+}
+
+input[type="text"],
+input[type="password"],
+textarea,
+.gValidationRule {
+ width: 40%;
+}
+
+input {
+}
+
+input[type="button"] {
+}
+
+input[type="checkbox"] {
+}
+
+input[type="file"] {
+}
+
+input[type="password"] {
+}
+
+input[type="radio"] {
+}
+
+input[type="reset"] {
+}
+
+input[type="submit"] {
+}
+
+input[type="text"] {
+}
+
+option {
+}
+
+optgroup {
+}
+
+select {
+}
+
+textarea {
+ width: 99%;
+ height: 12em;
+}
+
+button {
+}
+
+/* ~~~~~~~~~ Form layout ~~~~~~~~~~ */
+
+form ul, form li {
+ list-style: none !important;
+}
+form ul {
+ margin: 0;
+ padding: 0;
+}
+
+form li {
+ margin-top: .5em;
+ padding: .3em 1.5em .3em 1em;
+}
+
+form ul ul {
+ clear: both;
+}
+
+form ul ul li {
+ float: left;
+}
+
+input,
+textarea {
+ display: block;
+ clear: both;
+}
+
+/* ~~~~~~~~~ Inline fieldsets ~~~~~~~~~~ */
+
+.gInline li {
+ float: left;
+ margin: 0;
+ padding: .3em .5em .4em;
+ text-align: left;
+}
+
+.gInline input {
+}
+
+.gInline input[type="Submit"] {
+ margin-top: 1em;
+}
+
+.gInline .gNoLabels input[type="Submit"] {
+ margin-top: 0;
+}
+
+.gInline input[type="text"],
+.gInline input[type="password"],
+.gInline textarea,
+.gInline .gValidationRule {
+ width: 10em;
+}
+
+input:focus,
+textarea:focus,
+option:focus {
+ background-color: #ffc;
+}
+
+/* ~~~~~~~~~ Validation ~~~~~~~~~~ */
+
+.gRequired {
+}
+
+ul.gError,
+li.gError {
+ background-color: #ffdcdc;
+}
+
+.gError label, .gValidationRule {
+ color: red;
+}
+
+.gValidationRule {
+ font-size: 80%;
+ margin-top: .5em;
+}
+
+.gError input,
+.gError textarea,
+.gError select {
+ border: 2px solid red;
+}
+
+/* ~~~~~~~~~ login form ~~~~~~~~~~ */
+
+#gLoginForm * {
+ font-size: .94em;
+}
+
+#gLoginForm fieldset {
+ border: none;
+}
+
+#gLoginForm fieldset legend {
+ display: none;
+}
+
+/* ~~~~~~~~~ search form ~~~~~~~~~~ */
+
+#gSearchForm {
+ float: right;
+ margin-right: 10px;
+}
+
+#gSearchForm input.text {
+ padding: 1px;
+}
+
+#gSearchForm input.submit {
+ height: 20px;
+}
+
+/* ~~~~~~~~~ comment form ~~~~~~~~~~ */
+
+ #gCommentAdd {
+ width: 500px;
+}
+
+/* ----------- upload ----------------- */
+
+#gUploadForm .gBreadcrumbs li input,
+#gUploadForm .gBreadcrumbs li select {
+ width: 140px;
+ margin-left: 5px;
+}
+#gUploadForm-queue {
+ width: 500px;
+}
+
+#gUploadForm-queue td,
+#gUploadForm-queue th {
+ border-color: #e7e7e7;
+ text-align: left;
+}
+
+#gUploadForm-queue caption {
+ display: none;
+}
+
+#gUploadForm-queue thead th {
+ border-bottom: 2px solid #000;
+ text-align: center;
+}
+
+#gUploadForm-queue thead th,
+#gUploadForm-queue thead td {
+ background-color: #e7e7e7;
+}
+
+#gUploadForm-queue tfoot td {
+ border-top: 2px solid #000;
+}
+
+#gUploadForm-queue .filesize {
+ width: 60px;
+}
+
+#gUploadForm-queue td.filesize {
+ text-align: right;
+}
+
+#gUploadForm-queue tfoot td.filesize {
+ color: #ccc;
+}
+
+#gUploadForm-queue .action {
+ width: 40px;
+}
+
+#gUploadForm-button {
+ margin-left: 370px;
+ width: 130px;
+}
+
+/**
+ ** *******************************************************************
+ * 9) Browser hacks
** *******************************************************************
*/
diff --git a/themes/default/views/header.html.php b/themes/default/views/header.html.php
index 52c3992b..e427838b 100644
--- a/themes/default/views/header.html.php
+++ b/themes/default/views/header.html.php
@@ -16,8 +16,7 @@
<?= _("Login") ?> | <a href="javascript:close_login()">X</a>
</span>
<? endif; ?>
- <span id="gLoginForm" class="gDisplayNone" formSrc="<?= url::site("login") ?>" >
- </span>
+ <span id="gLoginForm" class="gDisplayNone" formSrc="<?= url::site("login") ?>"></span>
</div>
<ul id="gSiteMenu">
<li><a href="<?= url::base() ?>"><?= _("HOME") ?></a></li>
@@ -27,9 +26,11 @@
<li><a href="#"><?= _("ADMIN") ?></a></li>
</ul>
-<form id="gSearchForm">
- <input type="text" class="text" value="<?= _("Search Gallery ...") ?>"/>
- <input type="submit" class="submit" value="search" />
+<form id="gSearchForm" class="gInline">
+ <ul class="gNoLabels">
+ <li><input type="text" value="<?= _("Search Gallery ...") ?>"/></li>
+ <li><input type="submit" value="search" /></li>
+ </ul>
</form>
<ul id="gBreadcrumbs">