diff options
Diffstat (limited to 'lib')
| -rw-r--r-- | lib/gallery.common.css | 216 |
1 files changed, 166 insertions, 50 deletions
diff --git a/lib/gallery.common.css b/lib/gallery.common.css index 12d96d41..2a8eddb2 100644 --- a/lib/gallery.common.css +++ b/lib/gallery.common.css @@ -1,12 +1,14 @@ /** - * Gallery 3 commonly reused screen styles + * Gallery 3 commonly re-used screen styles * * Sheet organization: + * * 1) Text - * 2) Dimension and scale - * 3) States and interactions - * 4) Positioning and order - * 5) Containers/widgets + * 2) Forms + * 3) Dimension and scale + * 4) States and interactions + * 5) Positioning and order + * 6) Containers/widgets */ /** ******************************************************************* @@ -25,9 +27,133 @@ text-align: right; } +/** ******************************************************************* + * 2) Forms + **********************************************************************/ + +fieldset { + border: 1px solid #ccc; + padding: .8em 1em; +} + +#g-banner fieldset, +#g-sidebar fieldset { + border: none; + padding: 0; +} + +legend { + font-weight: bold; + margin-left: .8em; +} + +#g-banner legend, +#g-sidebar legend, +#g-content #g-search-form legend, +input[type="hidden"] { + display: none; +} + +input.textbox, +input[type="text"], +input[type="password"] { + width: 50%; +} + +textarea { + width: 100%; + height: 12em; +} + +input[type="text"], +input[type="password"], +textarea { + border: 1px solid #e8e8e8; + border-top-color: #ccc; + border-left-color: #ccc; + color: #333; +} + +input:focus, +input.textbox:focus, +input[type=text]:focus, +textarea:focus, +option:focus { + background-color: #ffc; + color: #000; +} + +/* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +form li { + margin: 0; + padding: .3em 0; +} + +form ul ul { + clear: both; +} + +form ul ul li { + float: left; +} + +input, +select, +textarea { + display: block; + clear: both; + padding: .2em; +} + +input[type="submit"], +input[type="reset"] { + display: inline; + clear: none; + float: left; +} + +/* Short forms ~~~~~~~~~~~~~~~~~~~~~~~ */ + +.g-short-form label { + display: none; +} + +.g-short-form fieldset { + border: none; + padding: 0; +} + +.g-short-form li { + float: left; + margin: 0 !important; + padding: .4em 0; +} + +.g-short-form .textbox, +.g-short-form input[type=text] { + color: #666; + padding: .3em .6em; +} + +.g-short-form .textbox.g-error { + border: 1px solid #f00; + color: #f00; + padding-left: 24px; +} + +.g-short-form .g-cancel { + display: block; + padding: .2em .8em; +} + +#g-sidebar .g-short-form li { + padding-left: 0; + padding-right: 0; +} /** ******************************************************************* - * 2) Dimension and scale + * 3) Dimension and scale **********************************************************************/ .g-narrow { @@ -39,7 +165,7 @@ } /** ******************************************************************* - * 3) States and interactions + * 4) States and interactions **********************************************************************/ .g-active, @@ -77,6 +203,22 @@ form li.g-warning { padding: .3em .8em .3em 1em; } +form.g-error input[type="text"], +li.g-error input[type="text"], +form.g-error input[type="password"], +li.g-error input[type="password"], +form.g-error input[type="checkbox"], +li.g-error input[type="checkbox"], +form.g-error input[type="radio"], +li.g-error input[type="radio"], +form.g-error textarea, +li.g-error textarea, +form.g-error select, +li.g-error select { + border: 2px solid #f00; + margin-bottom: .2em; +} + .g-error, .g-denied, tr.g-error td.g-error { @@ -148,7 +290,7 @@ form .g-error { } /** ******************************************************************* - * 4) Positioning and order + * 5) Positioning and order **********************************************************************/ .g-left { @@ -178,7 +320,7 @@ form .g-error { } /** ******************************************************************* - * 5) Containers/widgets + * 6) Containers/widgets **********************************************************************/ /* Generic block container ~~~~~~~~~~~~~~~ */ @@ -215,18 +357,24 @@ form .g-error { display: inline-block; } -/* Status messages ~~~~~~~~~~~~~~~~~~~~~~~ */ +/* Status and validation messages ~~~~ */ + +.g-message { + font-size: .8em; +} .g-message-block { border: 1px solid #ccc; + width: 100%; } #g-action-status { margin-bottom: 1em; - width: 100% !important; } -#g-action-status li { +#g-action-status li, +p#g-action-status, +div#g-action-status { padding-top: .4em; padding-bottom: .3em; } @@ -296,11 +444,6 @@ form .g-error { width: 40%; } -.g-inline * { - float: left; - margin-right: .4em; -} - /* Dialogs ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-dialog { @@ -308,14 +451,12 @@ form .g-error { } #g-dialog .g-narrow { - margin: 0 auto; - width: 270px; + width: 280px; } -#g-dialog fieldset { +#g-dialog form fieldset { border: none; - padding: 0 !important; - width: 99%; + padding: 0; } #g-dialog legend { @@ -339,36 +480,11 @@ form .g-error { margin: .4em 1em; } -/* Inline layout (forms, lists) ~~~~~~~~~~ */ - -.g-short-form label { - display: none; -} - -.g-short-form fieldset { - border: none; - padding: 0 !important; -} +/* Inline layout ~~~~~~~~~~ */ -.g-short-form li { +.g-inline * { float: left; - padding: .4em 0; -} - -.g-short-form input[type="text"] { - color: #666; - padding: .3em .6em; - width: auto; -} - -.g-short-form .g-cancel { - display: block; - padding: .2em .8em; -} - -#g-sidebar .g-short-form li { - padding-left: 0; - padding-right: 0; + margin-right: .4em; } /* Right to left styles ~~~~~~~~~~~~~~~~~~~~ */ |