From 42517041753d460c337a2086c0346018ad582e8d Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Wed, 15 Sep 2010 18:17:35 -0700 Subject: [PATCH 1/3] Move the contents of lib/gallery.common.css into themes/wind/css/screen.php and themes/admin_wind/css/screen.php. Most themers seem to copy the contents into their theme's screen.css anyway. --- lib/gallery.common.css | 897 ------------------------- themes/admin_wind/css/screen.css | 850 ++++++++++++++++++++++- themes/admin_wind/views/admin.html.php | 1 - themes/wind/css/screen.css | 891 +++++++++++++++++++++++- themes/wind/views/page.html.php | 1 - 5 files changed, 1716 insertions(+), 924 deletions(-) delete mode 100644 lib/gallery.common.css diff --git a/lib/gallery.common.css b/lib/gallery.common.css deleted file mode 100644 index 2bb5b6e2a6..0000000000 --- a/lib/gallery.common.css +++ /dev/null @@ -1,897 +0,0 @@ -/** - * Gallery 3 commonly re-used screen styles - * - * Sheet organization: - * - * 1) Text - * 2) Forms - * 3) Dimension and scale - * 4) States and interactions - * 5) Positioning and order - * 6) Containers/widgets - * 7) Right to left language styles - * - * @todo Update .g-message-block, don't force it to 100%, bad things happen is themes when you do. - */ - -/** ******************************************************************* - * 1) Text - **********************************************************************/ - -.g-text-small { - font-size: .8em; -} - -.g-text-big { - font-size: 1.2em; -} - -.g-text-right { - text-align: right; -} - -/** ******************************************************************* - * 2) Forms - **********************************************************************/ - -form { - margin: 0; -} - -fieldset { - border: 1px solid #ccc; - padding: 0 1em .8em 1em; -} - -#g-banner fieldset, -#g-sidebar fieldset { - border: none; - padding: 0; -} - -legend { - font-weight: bold; - margin: 0; - padding: 0 .2em; -} - -#g-banner legend, -#g-sidebar legend, -input[type="hidden"] { - display: none; -} - -input.textbox, -input[type="text"], -input[type="password"], -textarea { - border: 1px solid #e8e8e8; - border-top-color: #ccc; - border-left-color: #ccc; - clear: both; - color: #333; - width: 50%; -} - -textarea { - height: 12em; - width: 97%; -} - -input:focus, -input.textbox:focus, -input[type=text]:focus, -textarea:focus, -option:focus { - background-color: #ffc; - color: #000; -} - -input.checkbox, -input[type=checkbox], -input.radio, -input[type=radio] { - float: left; - margin-right: .4em; -} - -/* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - -form li { - margin: 0; - padding: 0 0 .2em 0; -} - -form ul { - margin-top: 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; -} - -/* Forms in dialogs and panels ~~~~~~~~~ */ - -#g-dialog ul li { - padding-bottom: .8em; -} - -#g-dialog fieldset, -#g-panel fieldset { - border: none; - padding: 0; -} - -#g-panel legend { - display: none; -} - -input[readonly] { - background-color: #F4F4FC; -} - -#g-dialog input.textbox, -#g-dialog input[type=text], -#g-dialog input[type=password], -#g-dialog textarea { - width: 97%; -} - -/* Short forms ~~~~~~~~~~~~~~~~~~~~~~~ */ - -.g-short-form legend, -.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; - width: 100%; -} - -.g-short-form .textbox.g-error { - border: 1px solid #f00; - color: #f00; - padding-left: 24px; -} - -.g-short-form .g-cancel { - display: block; - margin: .3em .8em; -} - -#g-sidebar .g-short-form li { - padding-left: 0; - padding-right: 0; -} - -/** ******************************************************************* - * 3) Dimension and scale - **********************************************************************/ - -.g-one-quarter { - width: 25%; -} - -.g-one-third { - width: 33%; -} - -.g-one-half { - width: 50%; -} - -.g-two-thirds { - width: 66%; -} - -.g-three-quarters { - width: 75%; -} - -.g-whole { - width: 100%; -} - -/** ******************************************************************* - * 4) States and interactions - **********************************************************************/ - -.g-active, -.g-enabled, -.g-available, -.g-selected, -.g-highlight { - font-weight: bold; -} - -.g-inactive, -.g-disabled, -.g-unavailable, -.g-uneditable, -.g-locked, -.g-deselected, -.g-understate { - color: #ccc; - font-weight: normal; -} - -.g-editable { - padding: .2em .3em; -} - -.g-editable:hover { - background-color: #ffc; - cursor: text; -} - -.g-error, -.g-info, -.g-success, -.g-warning { - padding-left: 30px; -} - -form li.g-error, -form li.g-info, -form li.g-success, -form li.g-warning { - background-image: none; - padding: .3em .8em .3em 0; -} - -.g-short-form li.g-error { - padding: .3em 0; -} - -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, -#g-add-photos-status .g-error { - background: #f6cbca url('images/ico-error.png') no-repeat .4em 50%; - color: #f00; -} - -.g-info { - background: #e8e8e8 url('images/ico-info.png') no-repeat .4em 50%; -} - -.g-success, -.g-allowed, -#g-add-photos-status .g-success { - background: #d9efc2 url('images/ico-success.png') no-repeat .4em 50%; -} - -tr.g-success { - background-image: none; -} - -tr.g-success td.g-success { - background-image: url('images/ico-success.png'); -} - -.g-warning, -tr.g-warning td.g-warning { - background: #fcf9ce url('images/ico-warning.png') no-repeat .4em 50%; -} - -form .g-error { - background-color: #fff; - padding-left: 20px; -} - -.g-open { -} - -.g-closed { -} - -.g-installed { - background-color: #eeeeee; -} - -.g-default { - background-color: #c5dbec; - font-weight: bold; -} - -.g-draggable { - cursor: move; -} - -.g-draggable:hover { - border: 1px dashed #000; -} - -.ui-sortable .g-target, -.ui-state-highlight { - background-color: #fcf9ce; - border: 2px dotted #999; - height: 2em; - margin: 1em 0; -} - -/* Ajax loading indicator ~~~~~~~~~~~~~~~~ */ - -.g-loading-large, -.g-dialog-loading-large { - background: #e8e8e8 url('images/loading-large.gif') no-repeat center center !important; -} - -.g-loading-small { - background: #e8e8e8 url('images/loading-small.gif') no-repeat center center !important; -} - -/** ******************************************************************* - * 5) Positioning and order - **********************************************************************/ - -.g-left { - clear: none; - float: left; -} - -.g-right { - clear: none; - float: right; -} - -.g-first { -} - -.g-last { -} - -.g-even { - background-color: #fff; -} - -.g-odd { - background-color: #eee; -} - -/** ******************************************************************* - * 6) Containers/widgets - **********************************************************************/ - -/* Generic block container ~~~~~~~~~~~~~~~ */ - -.g-block { - clear: both; - margin-bottom: 2.5em; -} - -.g-block-content { -} - -/* Superfish menu overrides ~~~~~~~~~~~~~~ */ - -.sf-menu ul { - width: 12em; -} - -ul.sf-menu li li:hover ul, -ul.sf-menu li li.sfHover ul { - left: 12em; -} - -ul.sf-menu li li li:hover ul, -ul.sf-menu li li li.sfHover ul { - left: 12em; -} - -/* jQuery UI Dialog ~~~~~~~~~~~~~~~~~~~~~~ */ - -.ui-widget-overlay { - background: #000; - opacity: .7; -} - -/* Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - -.g-button { - display: inline-block; - margin: 0 4px 0 0; - padding: .2em .4em; -} - -.g-button, -.g-button:hover, -.g-button:active { - cursor: pointer !important; - outline: 0; - text-decoration: none; - -moz-outline-style: none; -} - -button { - padding: 2px 4px 2px 4px; -} - -/* jQuery UI ThemeRoller buttons ~~~~~~~~~ */ - -.g-buttonset { - padding-left: 1px; -} - -.g-buttonset li { - float: left; -} - -.g-buttonset .g-button { - margin: 0; -} - -.ui-icon-left .ui-icon { - float: left; - margin-right: .2em; -} - -.ui-icon-right .ui-icon { - float: right; - margin-left: .2em; -} - -/* Rotate icon, ThemeRoller only provides one of these */ - -.ui-icon-rotate-ccw { - background-position: -192px -64px; -} - -.ui-icon-rotate-cw { - background-position: -208px -64px; -} - -.g-progress-bar { - height: 1em; - width: 100%; - margin-top: .5em; - display: inline-block; -} - -/* Status and validation messages ~~~~ */ - -.g-message-block { - background-position: .4em .3em; - border: 1px solid #ccc; - padding: 0; -} - -#g-action-status { - margin-bottom: 1em; -} - -#g-action-status li, -p#g-action-status, -div#g-action-status { - padding: .3em .3em .3em 30px; -} - -#g-site-status li { - border-bottom: 1px solid #ccc; - padding: .3em .3em .3em 30px; -} - -.g-module-status { - clear: both; - margin-bottom: 1em; -} - -.g-message { - background-position: 0 50%; -} - -/* Breadcrumbs ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - -.g-breadcrumbs { - clear: both; - padding: 0 20px; -} - -.g-breadcrumbs li { - background: transparent url('images/ico-separator.gif') no-repeat scroll left center; - float: left; - padding: 1em 8px 1em 18px; -} - -.g-breadcrumbs .g-first { - background: none; - padding-left: 0; -} - -.g-breadcrumbs li a, -.g-breadcrumbs li span { - display: block; -} - -#g-dialog ul.g-breadcrumbs { - margin-left: 0; - padding-left: 0; -} - -/* Pagination ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - -.g-paginator { - padding: .2em 0; - width: 100%; -} - -.g-paginator li { - float: left; - width: 30%; -} - -.g-paginator .g-info { - background: none; - padding: .2em 0; - text-align: center; - width: 40%; -} - -/* Dialogs and panels ~~~~~~~~~~~~~~~~~~ */ - -#g-dialog { - text-align: left; -} - -#g-dialog legend { - display: none; -} - -#g-dialog .g-cancel { - margin: .4em 1em; -} - -#g-panel { - display: none; - padding: 1em; -} - -/* Inline layout ~~~~~~~~~~ */ - -.g-inline li { - float: left; - margin-left: 1.8em; - padding-left: 0 !important; -} - -.g-inline li.g-first { - margin-left: 0; -} - -/** ******************************************************************* - * 7) Right to left language styles - **********************************************************************/ - -.rtl { - direction: rtl; -} - -.rtl #g-header, -.rtl #g-content, -.rtl #g-sidebar, -.rtl #g-footer, -.rtl caption, -.rtl th, -.rtl #g-dialog, -.rtl .g-context-menu li a, -.rtl .g-message-box li, -.rtl #g-site-status li { - text-align: right; -} - -.rtl .g-text-right { - text-align: left; -} - -.rtl .g-error, -.rtl .g-info, -.rtl .g-success, -.rtl .g-warning, -.rtl #g-add-photos-status .g-success, -.rtl #g-add-photos-status .g-error { - background-position: center right; - padding-right: 30px !important; -} - -.rtl form li.g-error, -.rtl form li.g-info, -.rtl form li.g-success, -.rtl form li.g-warning { - padding-right: 0 !important; -} - -.rtl .g-left, -.rtl .g-inline li, -.rtl #g-content #g-album-grid .g-item, -.rtl .sf-menu li, -.rtl .g-breadcrumbs li, -.rtl .g-paginator li, -.rtl .g-buttonset li, -.rtl .ui-icon-left .ui-icon, -.rtl .g-short-form li, -.rtl form ul ul li, -.rtl input[type="submit"], -.rtl input[type="reset"], -.rtl input.checkbox, -.rtl input[type=checkbox], -.rtl input.radio, -.rtl input[type=radio] { - float: right; -} - -.rtl .g-right, -.rtl .ui-icon-right .ui-icon { - float: left; -} - -.rtl .g-inline li { - margin-right: 1em; -} - -.rtl .g-inline li.g-first { - margin-right: 0; -} - -.rtl .g-breadcrumbs li { - background: transparent url('images/ico-separator-rtl.gif') no-repeat scroll right center; - padding: 1em 18px 1em 8px; -} - -.rtl .g-breadcrumbs .g-first { - background: none; - padding-right: 0; -} - -.rtl input.checkbox { - margin-left: .4em; -} - -.rtl #g-add-comment { - right: inherit; - left: 0; -} - -.rtl .ui-icon-left .ui-icon { - margin-left: .2em; -} - -.rtl .ui-icon-right .ui-icon { - margin-right: .2em; -} - -/* RTL Corner radius ~~~~~~~~~~~~~~~~~~~~~~ */ -.rtl .g-buttonset .ui-corner-tl { - -moz-border-radius-topleft: 0; - -webkit-border-top-left-radius: 0; - border-top-left-radius: 0; - -moz-border-radius-topright: 5px !important; - -webkit-border-top-right-radius: 5px !important; - border-top-right-radius: 5px !important; -} - -.rtl .g-buttonset .ui-corner-tr { - -moz-border-radius-topright: 0; - -webkit-border-top-right-radius: 0; - border-top-right-radius: 0; - -moz-border-radius-topleft: 5px !important; - -webkit-border-top-left-radius: 5px !important; - border-top-left-radius: 5px !important; -} - -.rtl .g-buttonset .ui-corner-bl { - -moz-border-radius-bottomleft: 0; - -webkit-border-bottom-left-radius: 0; - border-bottom-left-radius: 0; - -moz-border-radius-bottomright: 5px !important; - -webkit-border-bottom-right-radius: 5px !important; - border-bottom-right-radius: 5px !important; -} - -.rtl .g-buttonset .ui-corner-br { - -moz-border-radius-bottomright: 0; - -webkit-border-bottom-right-radius: 0; - border-bottom-right-radius: 0; - -moz-border-radius-bottomleft: 5px !important; - -webkit-border-bottom-left-radius: 5px !important; - border-bottom-left-radius: 5px !important; -} - -.rtl .g-buttonset .ui-corner-right, -.rtl .ui-progressbar .ui-corner-right { - -moz-border-radius-topright: 0; - -webkit-border-top-right-radius: 0; - border-top-right-radius: 0; - -moz-border-radius-topleft: 5px !important; - -webkit-border-top-left-radius: 5px !important; - border-top-left-radius: 5px !important; - -moz-border-radius-bottomright: 0; - -webkit-border-bottom-right-radius: 0; - border-bottom-right-radius: 0; - -moz-border-radius-bottomleft: 5px !important; - -webkit-border-bottom-left-radius: 5px !important; - border-bottom-left-radius: 5px !important; -} - -.rtl .g-buttonset .ui-corner-left, -.rtl .ui-progressbar .ui-corner-left { - -moz-border-radius-topleft: 0; - -webkit-border-top-left-radius: 0; - border-top-left-radius: 0; - -moz-border-radius-topright: 5px !important; - -webkit-border-top-right-radius: 5px !important; - border-top-right-radius: 5px !important; - -moz-border-radius-bottomleft: 0; - -webkit-border-bottom-left-radius: 0; - border-bottom-left-radius: 0; - -moz-border-radius-bottomright: 5px !important; - -webkit-border-bottom-right-radius: 5px !important; - border-bottom-right-radius: 5px !important; -} - -/* RTL Superfish ~~~~~~~~~~~~~~~~~~~~~~~~~ */ - -.rtl .sf-menu a { - border-left: none; - border-right:1px solid #fff; -} - -.rtl .sf-menu a.sf-with-ul { - padding-left: 2.25em; - padding-right: 1em; -} - -.rtl .sf-sub-indicator { - left: .75em !important; - right: auto; - background: url('superfish/images/arrows-ffffff-rtl.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ -} -.rtl a > .sf-sub-indicator { /* give all except IE6 the correct values */ - top: .8em; - background-position: -10px -100px; /* use translucent arrow for modern browsers*/ -} -/* apply hovers to modern browsers */ -.rtl a:focus > .sf-sub-indicator, -.rtl a:hover > .sf-sub-indicator, -.rtl a:active > .sf-sub-indicator, -.rtl li:hover > a > .sf-sub-indicator, -.rtl li.sfHover > a > .sf-sub-indicator { - background-position: 0 -100px; /* arrow hovers for modern browsers*/ -} - -/* point right for anchors in subs */ -.rtl .sf-menu ul .sf-sub-indicator { background-position: 0 0; } -.rtl .sf-menu ul a > .sf-sub-indicator { background-position: -10px 0; } -/* apply hovers to modern browsers */ -.rtl .sf-menu ul a:focus > .sf-sub-indicator, -.rtl .sf-menu ul a:hover > .sf-sub-indicator, -.rtl .sf-menu ul a:active > .sf-sub-indicator, -.rtl .sf-menu ul li:hover > a > .sf-sub-indicator, -.rtl .sf-menu ul li.sfHover > a > .sf-sub-indicator { - background-position: 0 0; /* arrow hovers for modern browsers*/ -} - -.rtl .sf-menu li:hover ul, -.rtl .sf-menu li.sfHover ul { - right: 0; - left: auto; -} - -.rtl ul.sf-menu li li:hover ul, -.rtl ul.sf-menu li li.sfHover ul { - right: 12em; /* match ul width */ - left: auto; -} -.rtl ul.sf-menu li li li:hover ul, -.rtl ul.sf-menu li li li.sfHover ul { - right: 12em; /* match ul width */ - left: auto; -} - -/*** shadows for all but IE6 ***/ -.rtl .sf-shadow ul { - background: url('superfish/images/shadow.png') no-repeat bottom left; - padding: 0 0 9px 8px; - border-top-right-radius: 0; - border-bottom-left-radius: 0; - -moz-border-radius-topright: 0; - -moz-border-radius-bottomleft: 0; - -webkit-border-top-right-radius: 0; - -webkit-border-bottom-left-radius: 0; - -moz-border-radius-topleft: 17px; - -moz-border-radius-bottomright: 17px; - -webkit-border-top-left-radius: 17px; - -webkit-border-bottom-right-radius: 17px; - border-top-left-radius: 17px; - border-bottom-right-radius: 17px; -} - -/* RTL ThemeRoller ~~~~~~~~~~~~~~~~~~~~~~~~ */ - -.rtl .ui-dialog .ui-dialog-titlebar { - padding: 0.5em 1em 0.3em 0.3em; -} - -.rtl .ui-dialog .ui-dialog-title { - float: right; -} - -.rtl .ui-dialog .ui-dialog-titlebar-close { - left: 0.3em; - right: auto; -} - - -/* RTL paginator ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - -.rtl .g-paginator .g-info { - width: 35%; -} - -.rtl .g-paginator .g-text-right { - margin-left: 0; -} - -.rtl .g-paginator .ui-icon-seek-end { - background-position: -80px -160px; -} - -.rtl .g-paginator .ui-icon-seek-next { - background-position: -48px -160px; -} - -.rtl .g-paginator .ui-icon-seek-prev { - background-position: -32px -160px; -} - -.rtl .g-paginator .ui-icon-seek-first { - background-position: -64px -160px; -} diff --git a/themes/admin_wind/css/screen.css b/themes/admin_wind/css/screen.css index 0d89114920..3e155764e8 100644 --- a/themes/admin_wind/css/screen.css +++ b/themes/admin_wind/css/screen.css @@ -4,13 +4,15 @@ * @requires YUI reset, font, grids CSS * * Sheet organization: - * 1) Basic HTML elements - * 2) Reusable content blocks - * 3) Page layout containers - * 4) Content blocks in specific layout containers - * 5) Navigation and menus - * 6) jQuery and jQuery UI - * 7) Right-to-left language styles + * 1) Basic HTML elements + * 2) Reusable content blocks + * 3) Page layout containers + * 4) Content blocks in specific layout containers + * 5) States and interactions + * 6) Positioning and order + * 7) Navigation and menus + * 8) jQuery and jQuery UI + * 9) Right-to-left language styles * * @todo Review g-buttonset-vertical */ @@ -86,6 +88,168 @@ a:hover, } /* Forms ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ +form { + margin: 0; +} + +fieldset { + border: 1px solid #ccc; + padding: 0 1em .8em 1em; +} + +#g-banner fieldset, +#g-sidebar fieldset { + border: none; + padding: 0; +} + +legend { + font-weight: bold; + margin: 0; + padding: 0 .2em; +} + +#g-banner legend, +#g-sidebar legend, +input[type="hidden"] { + display: none; +} + +input.textbox, +input[type="text"], +input[type="password"], +textarea { + border: 1px solid #e8e8e8; + border-top-color: #ccc; + border-left-color: #ccc; + clear: both; + color: #333; + width: 50%; +} + +textarea { + height: 12em; + width: 97%; +} + +input:focus, +input.textbox:focus, +input[type=text]:focus, +textarea:focus, +option:focus { + background-color: #ffc; + color: #000; +} + +input.checkbox, +input[type=checkbox], +input.radio, +input[type=radio] { + float: left; + margin-right: .4em; +} + +/* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +form li { + margin: 0; + padding: 0 0 .2em 0; +} + +form ul { + margin-top: 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; +} + +/* Forms in dialogs and panels ~~~~~~~~~ */ + +#g-dialog ul li { + padding-bottom: .8em; +} + +#g-dialog fieldset, +#g-panel fieldset { + border: none; + padding: 0; +} + +#g-panel legend { + display: none; +} + +input[readonly] { + background-color: #F4F4FC; +} + +#g-dialog input.textbox, +#g-dialog input[type=text], +#g-dialog input[type=password], +#g-dialog textarea { + width: 97%; +} + +/* Short forms ~~~~~~~~~~~~~~~~~~~~~~~ */ + +.g-short-form legend, +.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; + width: 100%; +} + +.g-short-form .textbox.g-error { + border: 1px solid #f00; + color: #f00; + padding-left: 24px; +} + +.g-short-form .g-cancel { + display: block; + margin: .3em .8em; +} + +#g-sidebar .g-short-form li { + padding-left: 0; + padding-right: 0; +} fieldset { margin-bottom: 1em; @@ -131,6 +295,19 @@ th { white-space: nowrap; } +/* Text ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ +.g-text-small { + font-size: .8em; +} + +.g-text-big { + font-size: 1.2em; +} + +.g-text-right { + text-align: right; +} + /** ******************************************************************* * 2) Reusable content blocks *********************************************************************/ @@ -230,6 +407,30 @@ ul.enumeration li { /*** ****************************************************************** * 3) Page layout containers *********************************************************************/ +/* Dimension and scale ~~~~~~~~~~~~~~~~~~~ */ +.g-one-quarter { + width: 25%; +} + +.g-one-third { + width: 33%; +} + +.g-one-half { + width: 50%; +} + +.g-two-thirds { + width: 66%; +} + +.g-three-quarters { + width: 75%; +} + +.g-whole { + width: 100%; +} /* Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ @@ -417,7 +618,180 @@ ul.enumeration li { } /** ******************************************************************* - * 5) Navigation and menus + * 5) States and interactions + **********************************************************************/ + +.g-active, +.g-enabled, +.g-available, +.g-selected, +.g-highlight { + font-weight: bold; +} + +.g-inactive, +.g-disabled, +.g-unavailable, +.g-uneditable, +.g-locked, +.g-deselected, +.g-understate { + color: #ccc; + font-weight: normal; +} + +.g-editable { + padding: .2em .3em; +} + +.g-editable:hover { + background-color: #ffc; + cursor: text; +} + +.g-error, +.g-info, +.g-success, +.g-warning { + padding-left: 30px; +} + +form li.g-error, +form li.g-info, +form li.g-success, +form li.g-warning { + background-image: none; + padding: .3em .8em .3em 0; +} + +.g-short-form li.g-error { + padding: .3em 0; +} + +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, +#g-add-photos-status .g-error { + background: #f6cbca url('images/ico-error.png') no-repeat .4em 50%; + color: #f00; +} + +.g-info { + background: #e8e8e8 url('images/ico-info.png') no-repeat .4em 50%; +} + +.g-success, +.g-allowed, +#g-add-photos-status .g-success { + background: #d9efc2 url('images/ico-success.png') no-repeat .4em 50%; +} + +tr.g-success { + background-image: none; +} + +tr.g-success td.g-success { + background-image: url('images/ico-success.png'); +} + +.g-warning, +tr.g-warning td.g-warning { + background: #fcf9ce url('images/ico-warning.png') no-repeat .4em 50%; +} + +form .g-error { + background-color: #fff; + padding-left: 20px; +} + +.g-open { +} + +.g-closed { +} + +.g-installed { + background-color: #eeeeee; +} + +.g-default { + background-color: #c5dbec; + font-weight: bold; +} + +.g-draggable { + cursor: move; +} + +.g-draggable:hover { + border: 1px dashed #000; +} + +.ui-sortable .g-target, +.ui-state-highlight { + background-color: #fcf9ce; + border: 2px dotted #999; + height: 2em; + margin: 1em 0; +} + +/* Ajax loading indicator ~~~~~~~~~~~~~~~~ */ + +.g-loading-large, +.g-dialog-loading-large { + background: #e8e8e8 url('images/loading-large.gif') no-repeat center center !important; +} + +.g-loading-small { + background: #e8e8e8 url('images/loading-small.gif') no-repeat center center !important; +} + +/** ******************************************************************* + * 6) Positioning and order + **********************************************************************/ + +.g-left { + clear: none; + float: left; +} + +.g-right { + clear: none; + float: right; +} + +.g-first { +} + +.g-last { +} + +.g-even { + background-color: #fff; +} + +.g-odd { + background-color: #eee; +} + +/** ******************************************************************* + * 7) Navigation and menus *********************************************************************/ /* Site Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ @@ -434,10 +808,205 @@ ul.enumeration li { } /** ******************************************************************* - * 6) jQuery and jQuery UI + * 8) jQuery and jQuery UI *********************************************************************/ +/* Generic block container ~~~~~~~~~~~~~~~ */ + +.g-block { + clear: both; + margin-bottom: 2.5em; +} + +.g-block-content { +} + +/* Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +.g-button { + display: inline-block; + margin: 0 4px 0 0; + padding: .2em .4em; +} + +.g-button, +.g-button:hover, +.g-button:active { + cursor: pointer !important; + outline: 0; + text-decoration: none; + -moz-outline-style: none; +} + +button { + padding: 2px 4px 2px 4px; +} + +/* jQuery UI ThemeRoller buttons ~~~~~~~~~ */ + +.g-buttonset { + padding-left: 1px; +} + +.g-buttonset li { + float: left; +} + +.g-buttonset .g-button { + margin: 0; +} + +.ui-icon-left .ui-icon { + float: left; + margin-right: .2em; +} + +.ui-icon-right .ui-icon { + float: right; + margin-left: .2em; +} + +/* Rotate icon, ThemeRoller only provides one of these */ + +.ui-icon-rotate-ccw { + background-position: -192px -64px; +} + +.ui-icon-rotate-cw { + background-position: -208px -64px; +} + +.g-progress-bar { + height: 1em; + width: 100%; + margin-top: .5em; + display: inline-block; +} + +/* Status and validation messages ~~~~ */ + +.g-message-block { + background-position: .4em .3em; + border: 1px solid #ccc; + padding: 0; +} + +#g-action-status { + margin-bottom: 1em; +} + +#g-action-status li, +p#g-action-status, +div#g-action-status { + padding: .3em .3em .3em 30px; +} + +#g-site-status li { + border-bottom: 1px solid #ccc; + padding: .3em .3em .3em 30px; +} + +.g-module-status { + clear: both; + margin-bottom: 1em; +} + +.g-message { + background-position: 0 50%; +} + +/* Breadcrumbs ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +.g-breadcrumbs { + clear: both; + padding: 0 20px; +} + +.g-breadcrumbs li { + background: transparent url('images/ico-separator.gif') no-repeat scroll left center; + float: left; + padding: 1em 8px 1em 18px; +} + +.g-breadcrumbs .g-first { + background: none; + padding-left: 0; +} + +.g-breadcrumbs li a, +.g-breadcrumbs li span { + display: block; +} + +#g-dialog ul.g-breadcrumbs { + margin-left: 0; + padding-left: 0; +} + +/* Pagination ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +.g-paginator { + padding: .2em 0; + width: 100%; +} + +.g-paginator li { + float: left; + width: 30%; +} + +.g-paginator .g-info { + background: none; + padding: .2em 0; + text-align: center; + width: 40%; +} + +/* Dialogs and panels ~~~~~~~~~~~~~~~~~~ */ + +#g-dialog { + text-align: left; +} + +#g-dialog legend { + display: none; +} + +#g-dialog .g-cancel { + margin: .4em 1em; +} + +#g-panel { + display: none; + padding: 1em; +} + +/* Inline layout ~~~~~~~~~~ */ + +.g-inline li { + float: left; + margin-left: 1.8em; + padding-left: 0 !important; +} + +.g-inline li.g-first { + margin-left: 0; +} /* Superfish menu overrides ~~~~~~~~~~~~~~ */ +.sf-menu ul { + width: 12em; +} + +ul.sf-menu li li:hover ul, +ul.sf-menu li li.sfHover ul { + left: 12em; +} + +ul.sf-menu li li li:hover ul, +ul.sf-menu li li li.sfHover ul { + left: 12em; +} + .sf-menu li li, .sf-menu li li ul li { @@ -449,6 +1018,10 @@ ul.enumeration li { } /* jQuery UI Dialog ~~~~~~~~~~~~~~~~~~~~~~ */ +.ui-widget-overlay { + background: #000; + opacity: .7; +} #g-admin-dashboard .ui-state-highlight, #g-sidebar .ui-state-highlight { @@ -466,8 +1039,265 @@ ul.enumeration li { } /** ******************************************************************* - * 7) Right to left styles + * 9) Right to left styles *********************************************************************/ +.rtl { + direction: rtl; +} + +.rtl #g-header, +.rtl #g-content, +.rtl #g-sidebar, +.rtl #g-footer, +.rtl caption, +.rtl th, +.rtl #g-dialog, +.rtl .g-context-menu li a, +.rtl .g-message-box li, +.rtl #g-site-status li { + text-align: right; +} + +.rtl .g-text-right { + text-align: left; +} + +.rtl .g-error, +.rtl .g-info, +.rtl .g-success, +.rtl .g-warning, +.rtl #g-add-photos-status .g-success, +.rtl #g-add-photos-status .g-error { + background-position: center right; + padding-right: 30px !important; +} + +.rtl form li.g-error, +.rtl form li.g-info, +.rtl form li.g-success, +.rtl form li.g-warning { + padding-right: 0 !important; +} + +.rtl .g-left, +.rtl .g-inline li, +.rtl #g-content #g-album-grid .g-item, +.rtl .sf-menu li, +.rtl .g-breadcrumbs li, +.rtl .g-paginator li, +.rtl .g-buttonset li, +.rtl .ui-icon-left .ui-icon, +.rtl .g-short-form li, +.rtl form ul ul li, +.rtl input[type="submit"], +.rtl input[type="reset"], +.rtl input.checkbox, +.rtl input[type=checkbox], +.rtl input.radio, +.rtl input[type=radio] { + float: right; +} + +.rtl .g-right, +.rtl .ui-icon-right .ui-icon { + float: left; +} + +.rtl .g-inline li { + margin-right: 1em; +} + +.rtl .g-inline li.g-first { + margin-right: 0; +} + +.rtl .g-breadcrumbs li { + background: transparent url('images/ico-separator-rtl.gif') no-repeat scroll right center; + padding: 1em 18px 1em 8px; +} + +.rtl .g-breadcrumbs .g-first { + background: none; + padding-right: 0; +} + +.rtl input.checkbox { + margin-left: .4em; +} + +.rtl #g-add-comment { + right: inherit; + left: 0; +} + +.rtl .ui-icon-left .ui-icon { + margin-left: .2em; +} + +.rtl .ui-icon-right .ui-icon { + margin-right: .2em; +} + +/* RTL Corner radius ~~~~~~~~~~~~~~~~~~~~~~ */ +.rtl .g-buttonset .ui-corner-tl { + -moz-border-radius-topleft: 0; + -webkit-border-top-left-radius: 0; + border-top-left-radius: 0; + -moz-border-radius-topright: 5px !important; + -webkit-border-top-right-radius: 5px !important; + border-top-right-radius: 5px !important; +} + +.rtl .g-buttonset .ui-corner-tr { + -moz-border-radius-topright: 0; + -webkit-border-top-right-radius: 0; + border-top-right-radius: 0; + -moz-border-radius-topleft: 5px !important; + -webkit-border-top-left-radius: 5px !important; + border-top-left-radius: 5px !important; +} + +.rtl .g-buttonset .ui-corner-bl { + -moz-border-radius-bottomleft: 0; + -webkit-border-bottom-left-radius: 0; + border-bottom-left-radius: 0; + -moz-border-radius-bottomright: 5px !important; + -webkit-border-bottom-right-radius: 5px !important; + border-bottom-right-radius: 5px !important; +} + +.rtl .g-buttonset .ui-corner-br { + -moz-border-radius-bottomright: 0; + -webkit-border-bottom-right-radius: 0; + border-bottom-right-radius: 0; + -moz-border-radius-bottomleft: 5px !important; + -webkit-border-bottom-left-radius: 5px !important; + border-bottom-left-radius: 5px !important; +} + +.rtl .g-buttonset .ui-corner-right, +.rtl .ui-progressbar .ui-corner-right { + -moz-border-radius-topright: 0; + -webkit-border-top-right-radius: 0; + border-top-right-radius: 0; + -moz-border-radius-topleft: 5px !important; + -webkit-border-top-left-radius: 5px !important; + border-top-left-radius: 5px !important; + -moz-border-radius-bottomright: 0; + -webkit-border-bottom-right-radius: 0; + border-bottom-right-radius: 0; + -moz-border-radius-bottomleft: 5px !important; + -webkit-border-bottom-left-radius: 5px !important; + border-bottom-left-radius: 5px !important; +} + +.rtl .g-buttonset .ui-corner-left, +.rtl .ui-progressbar .ui-corner-left { + -moz-border-radius-topleft: 0; + -webkit-border-top-left-radius: 0; + border-top-left-radius: 0; + -moz-border-radius-topright: 5px !important; + -webkit-border-top-right-radius: 5px !important; + border-top-right-radius: 5px !important; + -moz-border-radius-bottomleft: 0; + -webkit-border-bottom-left-radius: 0; + border-bottom-left-radius: 0; + -moz-border-radius-bottomright: 5px !important; + -webkit-border-bottom-right-radius: 5px !important; + border-bottom-right-radius: 5px !important; +} + +/* RTL Superfish ~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +.rtl .sf-menu a { + border-left: none; + border-right:1px solid #fff; +} + +.rtl .sf-menu a.sf-with-ul { + padding-left: 2.25em; + padding-right: 1em; +} + +.rtl .sf-sub-indicator { + left: .75em !important; + right: auto; + background: url('superfish/images/arrows-ffffff-rtl.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ +} +.rtl a > .sf-sub-indicator { /* give all except IE6 the correct values */ + top: .8em; + background-position: -10px -100px; /* use translucent arrow for modern browsers*/ +} +/* apply hovers to modern browsers */ +.rtl a:focus > .sf-sub-indicator, +.rtl a:hover > .sf-sub-indicator, +.rtl a:active > .sf-sub-indicator, +.rtl li:hover > a > .sf-sub-indicator, +.rtl li.sfHover > a > .sf-sub-indicator { + background-position: 0 -100px; /* arrow hovers for modern browsers*/ +} + +/* point right for anchors in subs */ +.rtl .sf-menu ul .sf-sub-indicator { background-position: 0 0; } +.rtl .sf-menu ul a > .sf-sub-indicator { background-position: -10px 0; } +/* apply hovers to modern browsers */ +.rtl .sf-menu ul a:focus > .sf-sub-indicator, +.rtl .sf-menu ul a:hover > .sf-sub-indicator, +.rtl .sf-menu ul a:active > .sf-sub-indicator, +.rtl .sf-menu ul li:hover > a > .sf-sub-indicator, +.rtl .sf-menu ul li.sfHover > a > .sf-sub-indicator { + background-position: 0 0; /* arrow hovers for modern browsers*/ +} + +.rtl .sf-menu li:hover ul, +.rtl .sf-menu li.sfHover ul { + right: 0; + left: auto; +} + +.rtl ul.sf-menu li li:hover ul, +.rtl ul.sf-menu li li.sfHover ul { + right: 12em; /* match ul width */ + left: auto; +} +.rtl ul.sf-menu li li li:hover ul, +.rtl ul.sf-menu li li li.sfHover ul { + right: 12em; /* match ul width */ + left: auto; +} + +/*** shadows for all but IE6 ***/ +.rtl .sf-shadow ul { + background: url('superfish/images/shadow.png') no-repeat bottom left; + padding: 0 0 9px 8px; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + -moz-border-radius-topright: 0; + -moz-border-radius-bottomleft: 0; + -webkit-border-top-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -moz-border-radius-topleft: 17px; + -moz-border-radius-bottomright: 17px; + -webkit-border-top-left-radius: 17px; + -webkit-border-bottom-right-radius: 17px; + border-top-left-radius: 17px; + border-bottom-right-radius: 17px; +} + +/* RTL ThemeRoller ~~~~~~~~~~~~~~~~~~~~~~~~ */ + +.rtl .ui-dialog .ui-dialog-titlebar { + padding: 0.5em 1em 0.3em 0.3em; +} + +.rtl .ui-dialog .ui-dialog-title { + float: right; +} + +.rtl .ui-dialog .ui-dialog-titlebar-close { + left: 0.3em; + right: auto; +} .rtl #g-content #g-album-grid .g-item, .rtl #g-site-theme, diff --git a/themes/admin_wind/views/admin.html.php b/themes/admin_wind/views/admin.html.php index c4b51f41f0..c8041069c2 100644 --- a/themes/admin_wind/views/admin.html.php +++ b/themes/admin_wind/views/admin.html.php @@ -16,7 +16,6 @@ css("yui/reset-fonts-grids.css") ?> css("themeroller/ui.base.css") ?> css("superfish/css/superfish.css") ?> - css("gallery.common.css") ?> css("screen.css") ?>