Major updates to form CSS. Now using unordered lists for layouts. Added .gInline for forms like login, search, tags. Updated comment, login, search, and tagging forms. All form styles live in screen.css now. Still a lot to do, but this is a good foundation.

1 files changed, 343 insertions, 134 deletions

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
  ** *******************************************************************
  */