diff options
Diffstat (limited to 'lib/gallery.common.css')
| -rw-r--r-- | lib/gallery.common.css | 203 |
1 files changed, 155 insertions, 48 deletions
diff --git a/lib/gallery.common.css b/lib/gallery.common.css index 939aa2f6..4f0517db 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,135 @@ text-align: right; } +/** ******************************************************************* + * 2) Forms + **********************************************************************/ + +#g-sidebar form { + padding-left: 0; + padding-right: 0; +} + +fieldset { + border: 1px solid #ccc; + padding: .8em 1em !important; +} + +#g-banner fieldset, +#g-sidebar fieldset { + border: none; +} + +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[type="text"], +input[type="password"] { + width: 50%; +} + +input[type="text"], +input[type="password"], +textarea { + border: 1px solid #e8e8e8; + border-top-color: #ccc; + border-left-color: #ccc; + color: #333; +} + +textarea { + width: 100%; + height: 12em; +} + +input:focus, +input.textbox:focus, +input[type=text]:focus, +textarea:focus, +option:focus { + background-color: #ffc; + color: #000; +} + +/* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +form li { + margin: 0 !important; + 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; + 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 +167,7 @@ } /** ******************************************************************* - * 3) States and interactions + * 4) States and interactions **********************************************************************/ .g-active, @@ -77,6 +205,21 @@ 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 red; +} + .g-error, .g-denied, tr.g-error td.g-error { @@ -148,7 +291,7 @@ form .g-error { } /** ******************************************************************* - * 4) Positioning and order + * 5) Positioning and order **********************************************************************/ .g-left { @@ -178,7 +321,7 @@ form .g-error { } /** ******************************************************************* - * 5) Containers/widgets + * 6) Containers/widgets **********************************************************************/ /* Generic block container ~~~~~~~~~~~~~~~ */ @@ -298,11 +441,6 @@ div#g-action-status { width: 40%; } -.g-inline * { - float: left; - margin-right: .4em; -} - /* Dialogs ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-dialog { @@ -341,42 +479,11 @@ div#g-action-status { margin: .4em 1em; } -/* Inline layout (forms, lists) ~~~~~~~~~~ */ - -.g-short-form label { - display: none; -} +/* Inline layout ~~~~~~~~~~ */ -.g-short-form fieldset { - border: none; - padding: 0 !important; -} - -.g-short-form li { +.g-inline * { float: left; - padding: .4em 0; -} - -.g-short-form .textbox { - color: #666; - padding: .3em .6em; - width: auto; -} - -.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; + margin-right: .4em; } /* Right to left styles ~~~~~~~~~~~~~~~~~~~~ */ |