diff options
| -rw-r--r-- | lib/gallery.common.css | 203 | ||||
| -rw-r--r-- | themes/admin_wind/css/screen.css | 101 | ||||
| -rw-r--r-- | themes/wind/css/screen.css | 106 |
3 files changed, 155 insertions, 255 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 ~~~~~~~~~~~~~~~~~~~~ */ diff --git a/themes/admin_wind/css/screen.css b/themes/admin_wind/css/screen.css index 74323067..7c0149c8 100644 --- a/themes/admin_wind/css/screen.css +++ b/themes/admin_wind/css/screen.css @@ -114,107 +114,6 @@ th { white-space: nowrap; } -/* Forms ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - -fieldset { - border: 1px solid #ccc; - padding-bottom: .8em; -} - -#g-header fieldset, -#g-sidebar fieldset { - border: none; -} - -legend { - font-weight: bold; - margin-left: 1em; -} - -#g-header legend, -#g-sidebar legend, -#g-content #g-search-form legend, -input[type="hidden"] { - display: none; -} - -label { - cursor: help; -} - -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, -textarea:focus, -option:focus { - background-color: #ffc; - color: #000; -} - -/* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - -form li { - margin: 0 !important; - padding: .3em 1.5em .3em 1em; -} - -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; -} - -/* Form validation ~~~~~~~~~~~~~~~~~~~~~~~ */ - -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; -} - /** ******************************************************************* * 2) Reusable content blocks *********************************************************************/ diff --git a/themes/wind/css/screen.css b/themes/wind/css/screen.css index d7eb19e6..d4fdcade 100644 --- a/themes/wind/css/screen.css +++ b/themes/wind/css/screen.css @@ -118,112 +118,6 @@ td { vertical-align: top; } -/* 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; -} - -label { - cursor: help; -} - -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, -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; -} - -/* Form validation ~~~~~~~~~~~~~~~~~~~~~~~ */ - -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; -} - /** ******************************************************************* * 2) Reusable content blocks *********************************************************************/ |