From c291f5cc36de3ccd701234277396f3616fbae215 Mon Sep 17 00:00:00 2001 From: Joe Shindelar Date: Thu, 23 Aug 2012 09:24:21 +0200 Subject: [PATCH] Issue [#1510532] Work in progress --- core/misc/collapse.js | 5 +- .../lib/Drupal/file/Tests/FileFieldWidgetTest.php | 2 +- .../lib/Drupal/forum/Tests/ForumIndexTest.php | 2 +- .../node/lib/Drupal/node/NodeFormController.php | 119 +- .../Tests/MultiStepNodeFormBasicOptionsTest.php | 2 +- core/modules/node/node.js | 15 +- core/modules/node/node.module | 32 + core/modules/system/layouts/layout-form-3.tpl.php | 35 + .../Drupal/translation/Tests/TranslationTest.php | 4 +- core/themes/seven/ie.css | 20 +- core/themes/seven/images/buttons.png | Bin 786 -> 1030 bytes core/themes/seven/images/icon-twistie.png | Bin 0 -> 1274 bytes core/themes/seven/reset.css | 523 +++++--- core/themes/seven/style-rtl.css | 64 +- core/themes/seven/style.css | 1382 ++++++++++++++------ core/themes/seven/template.php | 41 + 16 files changed, 1602 insertions(+), 644 deletions(-) create mode 100644 core/modules/system/layouts/layout-form-3.tpl.php create mode 100644 core/themes/seven/images/icon-twistie.png diff --git a/core/misc/collapse.js b/core/misc/collapse.js index d834563..b9af1b6 100644 --- a/core/misc/collapse.js +++ b/core/misc/collapse.js @@ -84,8 +84,9 @@ Drupal.behaviors.collapse = { .after(' '); // .wrapInner() does not retain bound events. + var $linkText = $('').prepend($legend.contents()); var $link = $('') - .prepend($legend.contents()) + .prepend($linkText) .appendTo($legend) .click(function () { var fieldset = $fieldset.get(0); @@ -97,7 +98,7 @@ Drupal.behaviors.collapse = { return false; }); - $legend.append(summary); + $legend.find('.fieldset-title').append(summary); }); } }; diff --git a/core/modules/file/lib/Drupal/file/Tests/FileFieldWidgetTest.php b/core/modules/file/lib/Drupal/file/Tests/FileFieldWidgetTest.php index 4f93ce0..053e8da 100644 --- a/core/modules/file/lib/Drupal/file/Tests/FileFieldWidgetTest.php +++ b/core/modules/file/lib/Drupal/file/Tests/FileFieldWidgetTest.php @@ -300,7 +300,7 @@ class FileFieldWidgetTest extends FileFieldTestBase { // Unpublishes node. $this->drupalLogin($this->admin_user); $edit = array( - 'status' => FALSE, + 'status' => 0, ); $this->drupalPost('node/' . $node->nid . '/edit', $edit, t('Save')); diff --git a/core/modules/forum/lib/Drupal/forum/Tests/ForumIndexTest.php b/core/modules/forum/lib/Drupal/forum/Tests/ForumIndexTest.php index a9d1a7c..4cc271c 100644 --- a/core/modules/forum/lib/Drupal/forum/Tests/ForumIndexTest.php +++ b/core/modules/forum/lib/Drupal/forum/Tests/ForumIndexTest.php @@ -67,7 +67,7 @@ class ForumIndexTest extends WebTestBase { // Unpublish the node. $edit = array( - 'status' => FALSE, + 'status' => 0, ); $this->drupalPost("node/{$node->nid}/edit", $edit, t('Save')); $this->assertText(t('Access denied'), 'Unpublished node is no longer accessible.'); diff --git a/core/modules/node/lib/Drupal/node/NodeFormController.php b/core/modules/node/lib/Drupal/node/NodeFormController.php index c5763e8..e39ef37 100644 --- a/core/modules/node/lib/Drupal/node/NodeFormController.php +++ b/core/modules/node/lib/Drupal/node/NodeFormController.php @@ -54,6 +54,9 @@ class NodeFormController extends EntityFormController { * Overrides Drupal\entity\EntityFormController::form(). */ public function form(array $form, array &$form_state, EntityInterface $node) { + // Use a three-region form layout by default. + $form['#theme'] = array('layout_form_3'); + // Some special stuff when previewing a node. if (isset($form_state['node_preview'])) { $form['#prefix'] = $form_state['node_preview']; @@ -106,19 +109,61 @@ class NodeFormController extends EntityFormController { ); $form['additional_settings'] = array( - '#type' => 'vertical_tabs', + '#type' => 'fieldset', '#weight' => 99, + '#attributes' => array( + 'class' => array('collapsibles'), + ), ); - // Add a log field if the "Create new revision" option is checked, or if the - // current user has the ability to check that option. - $form['revision_information'] = array( + // Build variables for use in settings summary. + $pub_state = ''; + $last_saved = ''; + $author = ''; + if (!$node->isNew()) { + $pub_state = (isset($node->status) && $node->status == 1) ? t('Published') : t('Not published'); + $last_saved = '' . t('Last saved') . ': ' . format_date($node->changed); + $author = '' . t('Author') . ': ' . user_format_name(user_load($node->uid)); + } + else { + $pub_state = t('Not published'); + $last_saved = t('Not saved yet'); + $author = '' . t('Author') . ': ' . user_format_name($GLOBALS['user']); + } + // Create the node settings summary that appears (by default) at the top + // of the settings region. Always contains publication status, date/time last + // saved, and author. + $form['settings_summary'] = array ( '#type' => 'fieldset', - '#title' => t('Revision information'), - '#collapsible' => TRUE, - // Collapsed by default when "Create new revision" is unchecked - '#collapsed' => !$node->revision, - '#group' => 'additional_settings', + ); + $form['settings_summary']['publication_state'] = array( + '#type' => 'item', + '#markup' => $pub_state, + ); + $form['settings_summary']['last_saved'] = array( + '#type' => 'item', + '#markup' => $last_saved, + ); + $form['settings_summary']['author'] = array( + '#type' => 'item', + '#markup' => $author, + ); + // If editing an existing node, show the url alias as well. + if (!$node->isNew()) { + $url_alias = '' . t('URL') . ': ' . drupal_get_path_alias('node/' . $node->id()); + $form['settings_summary']['url'] = array( + '#type' => 'item', + '#markup' => $url_alias, + ); + } + + // Add a log field if the "Create new revision" option is checked, or if the + // current user has the ability to check that option. + $form['revision_information'] = array( + '#type' => 'fieldset', + '#collapsible' => FALSE, + '#collapsed' => FALSE, + '#group' => 'settings_summary', '#attributes' => array( 'class' => array('node-form-revision-information'), ), @@ -136,23 +181,18 @@ class NodeFormController extends EntityFormController { '#access' => user_access('administer nodes'), ); - // Check the revision log checkbox when the log textarea is filled in. - // This must not happen if "Create new revision" is enabled by default, - // since the state would auto-disable the checkbox otherwise. - if (!$node->revision) { - $form['revision_information']['revision']['#states'] = array( - 'checked' => array( - 'textarea[name="log"]' => array('empty' => FALSE), - ), - ); - } - $form['revision_information']['log'] = array( '#type' => 'textarea', '#title' => t('Revision log message'), '#rows' => 4, '#default_value' => !empty($node->log) ? $node->log : '', '#description' => t('Briefly describe the changes you have made.'), + '#attributes' => array('name' => 'log'), + '#states' => array( + 'visible' => array( + ':input[name="revision"]' => array('checked' => TRUE), + ), + ), ); // Node author information for administrators. @@ -200,7 +240,7 @@ class NodeFormController extends EntityFormController { $form['options'] = array( '#type' => 'fieldset', '#access' => user_access('administer nodes'), - '#title' => t('Publishing options'), + '#title' => t('Promotion options'), '#collapsible' => TRUE, '#collapsed' => TRUE, '#group' => 'additional_settings', @@ -213,12 +253,6 @@ class NodeFormController extends EntityFormController { '#weight' => 95, ); - $form['options']['status'] = array( - '#type' => 'checkbox', - '#title' => t('Published'), - '#default_value' => $node->status, - ); - $form['options']['promote'] = array( '#type' => 'checkbox', '#title' => t('Promoted to front page'), @@ -241,6 +275,37 @@ class NodeFormController extends EntityFormController { return parent::form($form, $form_state, $node); } + protected function actionsElement(array $form, array &$form_state) { + $element = parent::actionsElement($form, $form_state); + $node = $this->getEntity($form_state); + + // Add a nested fieldset to contain the save button and publication status + // select control. + $element['save'] = array( + '#type' => 'container', + '#attributes' => array('class' => array('form-action-group', 'container-inline')), + ); + + $element['save']['submit'] = $element['submit']; + unset($element['submit']); + $element['save']['submit']['#button_type'] = 'primary'; + + $element['save']['status'] = array( + '#type' => 'select', + '#options' => array( + 0 => t('Not published'), + 1 => t('Published'), + ), + '#default_value' => $node->status, + '#weight' => 10, + ); + + $element['delete']['#button_type'] = 'delete'; + $element['preview']['#button_type'] = 'preview'; + + return $element; + } + /** * Overrides Drupal\entity\EntityFormController::actions(). */ diff --git a/core/modules/node/lib/Drupal/node/Tests/MultiStepNodeFormBasicOptionsTest.php b/core/modules/node/lib/Drupal/node/Tests/MultiStepNodeFormBasicOptionsTest.php index abb31f3..4d310f1 100644 --- a/core/modules/node/lib/Drupal/node/Tests/MultiStepNodeFormBasicOptionsTest.php +++ b/core/modules/node/lib/Drupal/node/Tests/MultiStepNodeFormBasicOptionsTest.php @@ -49,7 +49,7 @@ class MultiStepNodeFormBasicOptionsTest extends WebTestBase { 'choice[new:1][chtext]' => 'a', ); $this->drupalPost('node/add/poll', $edit, t('Add another choice')); - $this->assertNoFieldChecked('edit-status', 'status stayed unchecked'); + $this->assertFieldById('edit-status', 0, 'status stayed not published'); $this->assertNoFieldChecked('edit-promote', 'promote stayed unchecked'); $this->assertFieldChecked('edit-sticky', 'sticky stayed checked'); } diff --git a/core/modules/node/node.js b/core/modules/node/node.js index 0899d3c..2ee23f7 100644 --- a/core/modules/node/node.js +++ b/core/modules/node/node.js @@ -33,14 +33,15 @@ Drupal.behaviors.nodeFieldsetSummaries = { var $context = $(context); var vals = []; - $context.find('input:checked').parent().each(function () { - vals.push(Drupal.checkPlain($.trim($(this).text()))); - }); - - if (!$context.find('.form-item-status input').is(':checked')) { - vals.unshift(Drupal.t('Not published')); + if ($context.find('input').is(':checked')) { + $context.find('input:checked').parent().each(function () { + vals.push(Drupal.checkPlain($.trim($(this).text()))); + }); + return vals.join(', '); + } + else { + return Drupal.t('Not promoted'); } - return vals.join(', '); }); } }; diff --git a/core/modules/node/node.module b/core/modules/node/node.module index 349aab5..1845dcb 100644 --- a/core/modules/node/node.module +++ b/core/modules/node/node.module @@ -176,6 +176,11 @@ function node_theme() { 'node_recent_content' => array( 'variables' => array('node' => NULL), ), + 'layout_form_3' => array( + 'render element' => 'form', + 'path' => 'core/modules/system/layouts', + 'template' => 'layout-form-3', + ), ); } @@ -1390,6 +1395,33 @@ function template_preprocess_node(&$variables) { } /** + * Process variables for layout-form-3.tpl.php + */ +function template_preprocess_layout_form_3(&$vars) { + $form = &$vars['form']; + + // Create regions expected by the layout template. + $vars['regions'] = array( + 'first' => array(), + 'second' => array(), + 'footer' => array(), + ); + + // Chunk the form into separate render arrays and place them in regions. + // Currently this is rudimentary; array key order within regions determines + // render order, and the remaining $form array needs to be printed in the + // template using drupal_render_children($form). + $vars['regions']['second'][] = $form['settings_summary']; + unset($form['settings_summary']); + + $vars['regions']['second'][] = $form['additional_settings']; + unset($form['additional_settings']); + + $vars['regions']['footer'] = $form['actions']; + unset($form['actions']); +} + +/** * Implements hook_permission(). */ function node_permission() { diff --git a/core/modules/system/layouts/layout-form-3.tpl.php b/core/modules/system/layouts/layout-form-3.tpl.php new file mode 100644 index 0000000..a307867 --- /dev/null +++ b/core/modules/system/layouts/layout-form-3.tpl.php @@ -0,0 +1,35 @@ + +
+
+ + + + + +
+ + +
+ +
+ + + +
+ +
+ +
diff --git a/core/modules/translation/lib/Drupal/translation/Tests/TranslationTest.php b/core/modules/translation/lib/Drupal/translation/Tests/TranslationTest.php index a409150..045d2ae 100644 --- a/core/modules/translation/lib/Drupal/translation/Tests/TranslationTest.php +++ b/core/modules/translation/lib/Drupal/translation/Tests/TranslationTest.php @@ -170,7 +170,7 @@ class TranslationTest extends WebTestBase { // Unpublish the Spanish translation to check that the related language // switch link is not shown. $this->drupalLogin($this->admin_user); - $edit = array('status' => FALSE); + $edit = array('status' => 0); $this->drupalPost("node/$translation_es->nid/edit", $edit, t('Save')); $this->drupalLogin($this->translator); $this->assertLanguageSwitchLinks($node, $translation_es, FALSE); @@ -181,7 +181,7 @@ class TranslationTest extends WebTestBase { $edit = array('language_interface[enabled][language-url]' => FALSE); $this->drupalPost('admin/config/regional/language/detection', $edit, t('Save settings')); $this->resetCaches(); - $edit = array('status' => TRUE); + $edit = array('status' => 1); $this->drupalPost("node/$translation_es->nid/edit", $edit, t('Save')); $this->drupalLogin($this->translator); $this->assertLanguageSwitchLinks($node, $translation_es, TRUE, 'node'); diff --git a/core/themes/seven/ie.css b/core/themes/seven/ie.css index d1a71ce..978a5e7 100644 --- a/core/themes/seven/ie.css +++ b/core/themes/seven/ie.css @@ -1,12 +1,20 @@ /* IE renders absolute positioned legend where fieldset content starts. */ -fieldset .fieldset-legend { +/*fieldset .fieldset-legend { left: 0; top: 0; +}*/ + +/* Fake the top borders of fieldsets in IE8. */ +fieldset legend { + border-left: 1px solid #ccc; + border-right: 1px solid #ccc; + border-top: 1px solid #ccc; + margin-left: -1px; + margin-right: -1px; + margin-top: -1px; } -/* IE renders monospace font too big. */ -code, -pre, -kbd { - font-size: 1em; +.accordion .collapsible legend { + border: 0; + margin: 0; } diff --git a/core/themes/seven/images/buttons.png b/core/themes/seven/images/buttons.png index ae833d5f8f1750d4323f64aaa72e3e2e407c5b59..d3f939fc6ca82624a6c8517fc935b6f44f5806f8 100644 GIT binary patch literal 1030 zcmbVLzi!h&7&jC_spwEK5Recjw?ZHh`_8c)+tjqKozO_QL}?@|_LaDm zI?xUE1$YBCCN>5nw!Q)&A)bJh1%-2(1ca&%wa&h~&)@I&{eRQkcsxIMYmVc%`Nq1_ zV*3U5uFhU&->(a|SJ`%x);e^P^yt7#F=qv&i$Npuwr~r3!QRVbyv%Vk{jlAk9ruah zlSuFi9U+erhUU2Cl|1qMZA?KIZ-ueR|NQug2Vr3H&lDHBiH-Z=`hJQx_cz-9{zO!C)W^DgsHjM5OC_!68Xy zrcuuJV(R7PI9r@BI5_juFrgudLBZ&C$u2c{=IKcYQR2E&;y4>8ilt102wuV2x4VSJD kXODg_9yfb$pO?6c*SHVLorCWW`C{U^Ms34+zxLwr4>;C2o&W#< literal 786 zcmb7?TTGGx6vscMwY<%WY1*ceZC&2V!BWy2R`!!W}9>yd@V(ZwdgQuCOqd1AR`{71{Ax@GbweOyDISf&d# zbm0nJxY|0YZvCch73tc9nl{mD8)C%zH{!K+iLMGXO%48sP4!Duv^OeVA0Y_V9@*Vi{THmp{w&1T!&+_c;64u@lFYs=|$ zx?Ha9?d@Mhsn3yX@NjW4DMji{MtB`M<}}dTqp}FmvFFM`37yPLR0nzs7PnvcMW9$Lf3kMN>4Vv=YAncJX9qvH zusip#(GOw`;jjTu!6FPl)@PQGwbl^8C70r6uBntnY_Noo)AtNm7-o`sAym#$?IX8h zHVs+-L|bS7vv*j^=I=QpWuvA{ZUzU*+Y8(qnl!3ZQV$el&M&TnE1Td^3;X4X@Qd#} jT~o@E4lvSQbjz``>L(zdEX%5cj(;5&pB%@D&3N?}%n-ue diff --git a/core/themes/seven/images/icon-twistie.png b/core/themes/seven/images/icon-twistie.png new file mode 100644 index 0000000000000000000000000000000000000000..5533d3447b171cf9d1be3ad379927da7a31677c2 GIT binary patch literal 1274 zcmeAS@N?(olHy`uVBq!ia0vp^JV30%!3HGvcHQ0sq$EpRBT9nv(@M${i&7aJQ}UBi z6+Ckj(^G>|6H_V+Po~;1FfeCihD4M^`1)8S=jZArg4F0$^BXQ!4Z zB&DWj=GiK}-@RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT6rXh3di zNuokUZcbjYRfVk**jy_h8zii+qySb@l5ML5aa4qFfP!;=QL2Kep0RGSfuW&-nVFuU ziK&^Hp^k!)fuWJU0T7w#8k$&{npqi{D?ot~(6*wKG^-#NH>h1eo~=?wNlAf~zJ7Um zxn8-kUVc%!zM-Y1CCCgTBVC{h-Qvo;lEez#ykcdT2`;I{$wiq3C7Jno3Lp~`lk!VT zY?Xj6g?J&iz}FXUa9%MqpnyT9Uy)d#Z>VRWpPLKv7g%+1Nl+@n8CX>phg24%>IbD3 z=a&{G1LGr28KxN+cK9s)eNyv)d8P=MIm}hE^%)o#H9TD$Ln>}1{rUgjp4mu4 zLnDDXXurgT11+4w2TX*S)ow5yvEi{`Fyme4P{Y&lwBsrR(=LY^p^md4mXJdYLx(Mh zH7CISslaMR<_!W9{_`CvblB4-!K>eJL%zdbF!^w*!Z*f8?nhcKIVzMLSSB%@H}A$I zHXegT%T=8ko+K>Y%O;lb>ptHRKb9-+n3Md~GCEis56@%t-_vmAPm|?KWs^m5$$@{Q zw7v`87kECj)-+qwI88#| zqfkg=#&?G05gGUzFQIh6V;^hF=$)UnQGq<%3EiPgg&ebxsLQ0Q7pL A5C8xG literal 0 HcmV?d00001 diff --git a/core/themes/seven/reset.css b/core/themes/seven/reset.css index de53f28..4aee951 100644 --- a/core/themes/seven/reset.css +++ b/core/themes/seven/reset.css @@ -1,202 +1,391 @@ +/** + * @file + * Reset stylesheet for Seven admin theme + * Based on Normalize CSS by @necolas and others. + * 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css + */ + +/** + * HTML5 display definitions + */ + +/* Corrects `block` display not defined in IE6/7/8/9 & FF3. */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +/* Corrects `inline-block` display not defined in IE6/7/8/9 & FF3. */ +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/* Prevents modern browsers from displaying `audio` without controls. + * Remove excess height in iOS5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; +} + +/* Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4. + * Known issue: no IE6 support. + */ +[hidden] { + display: none; +} /** - * Reset CSS styles. - * - * Based on Eric Meyer's "Reset CSS 1.0" tool from - * http://meyerweb.com/eric/tools/css/reset + * Base + */ + +/* 1. Corrects text resizing oddly in IE6/7 when body `font-size` uses em units. + * 2. Prevents iOS text size adjust after orientation change, without disabling + * user zoom. */ +html { + font-size: 100%; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} +/* Addresses `font-family` inconsistency between `textarea` and other + * form elements. + */ html, -body, -div, -span, -applet, -object, -iframe, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -big, -cite, -code, -del, -dfn, -em, -font, -img, -ins, -kbd, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -b, -u, -i, -center, -dl, -dt, -dd, -ol, -ul, -li, -fieldset, -form, +button, input, select, -textarea, -label, -legend, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td, -/* Drupal: system-menus.css */ -td.menu-disabled, -ul.links, -ul.links.inline, -ul.links li, -.block ul, -/* Drupal: admin.css */ -div.admin, -/* Drupal: system.css */ -tr.even, -tr.odd, -tr.drag, -tbody, -tbody th, -thead th, -.breadcrumb, -.item-list .icon, -.item-list .title, -.item-list ul, -.item-list ul li, -ol.task-list li.active, -.form-item, -tr.odd .form-item, -tr.even .form-item, -.form-item .description, -.form-item label, -.form-item label.option, -.form-checkboxes, -.form-radios, -.form-checkboxes .form-item, -.form-radios .form-item, -.marker, -.form-required, -.more-link, -.more-help-link, -.item-list .pager, -.item-list .pager li, -.pager-current, -.tips, -ul.primary, -ul.primary li, -ul.primary li a, -ul.primary li.active a, -ul.primary li a:hover, -ul.secondary, -ul.secondary li, -ul.secondary a, -ul.secondary a.active, -.resizable-textarea { +textarea { + font-family: sans-serif; +} + +/* Addresses margins handled incorrectly in IE6/7. */ +body { margin: 0; - padding: 0; - border: 0; - vertical-align: baseline; } -/* Drupal: system-menus.css */ -ul.links, -ul.links.inline, -ul.links li, -.block ul, -ol, -ul, -.item-list ul, -.item-list ul li { - list-style: none; + +/** + * Links + */ + +/* Addresses `outline` inconsistency between Chrome and other browsers. */ +a:focus { + outline: thin dotted; +} + +/* Improves readability when focused and also mouse hovered in all browsers. + * people.opera.com/patrickl/experiments/keyboard/test + */ +a:active, +a:hover { + outline: 0; +} + +/** + * Typography + */ + +/* Addresses font sizes and margins set differently in IE6/7. + * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} +h3 { + font-size: 1.17em; + margin: 1em 0; +} +h4 { + font-size: 1em; + margin: 1.33em 0; +} +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} +h6 { + font-size: 0.75em; + margin: 2.33em 0; +} + +/* Addresses style set to `bolder` in FF3+, S4/5, Chrome. */ +b, +strong { + font-weight: bold; } -blockquote, + +blockquote { + margin: 1em 40px; +} + +/* Addresses styling not present in S5, Chrome. */ +dfn { + font-style: italic; +} + +/* Addresses styling not present in IE6/7/8/9. */ +mark { + background: #ff0; + color: #000; +} + +/* Addresses margins set differently in IE6/7. */ +p, +pre { + margin: 1em 0; +} + +/* Corrects font family set oddly in IE6, S4/5, Chrome. + * en.wikipedia.org/wiki/User:Davidgothberg/Test59 + */ +code, +kbd, +pre, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} + +/* Improves readability of pre-formatted text in all browsers. */ +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* Addresses CSS quotes not supported in IE6/7. */ q { quotes: none; } -blockquote:before, -blockquote:after, + +/* Addresses `quotes` property not supported in S4. */ q:before, q:after { content: ''; content: none; } -/* Remember to highlight inserts somehow! */ -ins { - text-decoration: none; +small { + font-size: 75%; } -del { - text-decoration: line-through; + +/* Prevents `sub` and `sup` affecting `line-height` in all browsers. + * gist.github.com/413930 + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; } -/* Tables still need 'cellspacing="0"' in the markup. */ -table { - border-collapse: collapse; - border-spacing: 0; +/** + * Lists + */ + +/* Addresses margins set differently in IE6/7. */ +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +/* Addresses paddings set differently in IE6/7. */ +menu, +ol, +ul { + padding: 0; +} + +/* Corrects list images handled incorrectly in IE7. */ +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} + +/** + * Embedded content + */ + +/* 1. Removes border when inside `a` element in IE6/7/8/9, FF3. + * 2. Improves image quality when scaled in IE7. + * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ + */ +img { + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ +} + +/* Corrects overflow displayed oddly in IE9. */ +svg:not(:root) { + overflow: hidden; +} + +/** + * Figures + */ + +/* Addresses margin not present in IE6/7/8/9, S5, O11. */ +figure { + margin: 0; } /** - * Font reset. - * - * Specifically targets form elements which browsers often times give - * special treatment. + * Forms */ + +/* Corrects margin displayed oddly in IE6/7. */ +form { + margin: 0; +} + +/* Define consistent border, margin, and padding. */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* 1. Corrects color not being inherited in IE6/7/8/9. + * 2. Corrects text not wrapping in FF3. + * 3. Corrects alignment displayed oddly in IE6/7. + */ +legend { + border: 0; /* 1 */ + padding: 0; + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ +} + +/* 1. Corrects font size not being inherited in all browsers. + * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome. + * 3. Improves appearance and consistency in all browsers. + */ +button, input, select, textarea { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ +} + +/* Addresses FF3/4 setting `line-height` on `input` using `!important` in the + * UA stylesheet. + */ +button, +input { + line-height: normal; +} + +/* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Corrects inability to style clickable `input` types in iOS. + * 3. Improves usability and consistency of cursor style between image-type + * `input` and others. + * 4. Removes inner spacing in IE7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE6. + */ +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ + *overflow: visible; /* 4 */ +} + +/* Re-set default cursor for disabled elements. */ +button[disabled], +input[disabled] { + cursor: default; } + +/* 1. Addresses box sizing set to content-box in IE8/9. + * 2. Removes excess padding in IE8/9. + * 3. Removes excess padding in IE7. + * Known issue: excess padding remains in IE6. + */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ +} + +/* 1. Addresses `appearance` set to `searchfield` in S5, Chrome. + * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz` + * to future-proof). + */ +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/* Removes inner padding and search cancel button in S5, Chrome on OS X. */ +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* Removes inner padding and border in FF3+. */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* 1. Removes default vertical scrollbar in IE6/7/8/9. + * 2. Improves readability and alignment in all browsers. + */ textarea { - font-size: 1em; - line-height: 1.538em; + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ } + /** - * Markup free clearing. - * - * Consider adding your own selectors to this instead of finding ways - * to sneak the clearfix class into Drupal's markup. - * From http://perishablepress.com/press/2009/12/06/new-clearfix-hack - */ -ul.links:after, -div.admin-panel .body:after, -.clearfix:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} + * Tables + */ -/* Exclude inline links from clearfix behavior */ -ul.inline:after { - content: ""; - display: none; - clear: none; +/* Remove most spacing between table cells. */ +table { + border-collapse: collapse; + border-spacing: 0; } diff --git a/core/themes/seven/style-rtl.css b/core/themes/seven/style-rtl.css index e98c968..d97fe1b 100644 --- a/core/themes/seven/style-rtl.css +++ b/core/themes/seven/style-rtl.css @@ -1,6 +1,10 @@ +/** + * @file + * Right-to-left stylesheet for the Seven admin theme. + */ /** - * Generic elements. + * Generic elements */ dl dd, dl dl { @@ -19,8 +23,8 @@ ol { * Skip link. */ #skip-link { - right: 50%; margin-right: -5.25em; + right: 50%; } #skip-link a, #skip-link a:link, @@ -31,10 +35,6 @@ ol { /** * Branding. */ -#branding { - padding: 20px 20px 0 20px; -} - #branding div.block { float: left; padding-left: 0; @@ -58,7 +58,7 @@ ol { /** * Page title. */ -#branding h1.page-title { +#branding .page-title { float: right; } @@ -84,11 +84,6 @@ ul.primary { /** * Page layout. */ -#page { - padding: 20px 0 40px 0; - margin-left: 40px; - margin-right: 40px; -} #secondary-links ul.links li { padding: 0 0 10px 10px; } @@ -98,13 +93,13 @@ ul.inline li { padding-right: 0; } ul.admin-list li { - padding: 9px 30px 0 0; - margin-right: 0; background: url(images/list-item-rtl.png) no-repeat right 11px; + margin-right: 0; + padding: 9px 30px 0 0; } ul.admin-list li a { - margin-right: -30px; margin-left: 0; + margin-right: -30px; padding: 0 30px 4px 0; } ul.admin-list.compact li a { @@ -143,19 +138,15 @@ fieldset .fieldset-legend { padding-right: 15px; right: 0; } -fieldset .fieldset-wrapper { - padding: 0 15px 13px 13px; -} -/* Filter */ +/** + * Filters + */ .filter-wrapper .form-item, .filter-wrapper .filter-guidelines, .filter-wrapper .filter-help { padding: 2px 0 0 0; } -ul.tips li { - margin: 0.25em 1.5em 0.25em 0; -} body div.form-type-radio div.description, body div.form-type-checkbox div.description { margin-left: 0; @@ -166,25 +157,30 @@ a.button { margin-left: 1em; margin-right: 0; } -ul.action-links li { +.action-links { + padding-right: 0; +} +.action-links > li { float: right; margin: 0 0 0 1em; } -ul.action-links a { +.action-links a { + background-position: right center; padding-left: 0; padding-right: 15px; - background-position: right center; } /* Update options. */ div.admin-options label, div.admin-options div.form-item { + float: right; margin-left: 10px; margin-right: 0; - float: right; } -/* Maintenance theming */ +/** + * Maintenance page + */ body.in-maintenance #sidebar-first { float: right; } @@ -205,6 +201,13 @@ ol.task-list li.active { } /* Overlay theming */ +@media screen and (min-width: 900px) { + #overlay { + padding-left: 48px; + padding-right: 36px; + } +} + .overlay #branding .breadcrumb { float: right; } @@ -224,6 +227,13 @@ div.add-or-remove-shortcuts { padding: 0 0 5px 5px; } +#dashboard div.block div.content { + padding: 10px 5px 5px 5px; +} +#dashboard div.block div.content ul.menu { + margin-right: 20px; +} + /* User login block */ #user-login-form .openid-links { margin-right: 0; diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css index 8d7164b..702f6f3 100644 --- a/core/themes/seven/style.css +++ b/core/themes/seven/style.css @@ -1,11 +1,15 @@ +/** + * @file + * Main stylesheet for the Seven admin theme. + */ /** - * Generic elements. + * Generic elements */ body { - color: #000; background: #fff; - font: normal 81.3%/1.538em "Lucida Grande", "Lucida Sans Unicode", sans-serif; + color: #000; + font: normal 81.3%/1.538em "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; } a { color: #0074bd; @@ -15,14 +19,11 @@ a:hover { text-decoration: underline; } hr { - margin: 0; - padding: 0; + background: #cccccc; border: none; height: 1px; - background: #cccccc; -} -legend { - font-weight: bold; + margin: 0; + padding: 0; } h1, h2, @@ -30,11 +31,14 @@ h3, h4, h5, h6 { - font-weight: bold; + letter-spacing: .03em; margin: 10px 0; + text-rendering: optimizeLegibility; } h1 { + font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; font-size: 1.538em; + font-weight: 300; } h2 { font-size: 1.385em; @@ -57,8 +61,8 @@ dl { } dl dd, dl dl { - margin-left: 20px; /* LTR */ margin-bottom: 10px; + margin-left: 20px; /* LTR */ } blockquote { margin: 1em 40px; @@ -82,17 +86,14 @@ small { font-size: smaller; } sub { - vertical-align: sub; font-size: smaller; line-height: normal; + vertical-align: sub; } sup { - vertical-align: super; font-size: smaller; line-height: normal; -} -nobr { - white-space: nowrap; + vertical-align: super; } abbr, acronym { @@ -101,8 +102,8 @@ acronym { ul, .block ul, .item-list ul { - list-style-type: disc; list-style-image: none; + list-style-type: disc; margin: 0.25em 0 0.25em 1.5em; /* LTR */ } .item-list .pager li { @@ -111,8 +112,8 @@ ul, .item-list ul li, li.leaf, ul.menu li { - list-style-type: disc; list-style-image: none; + list-style-type: disc; } ul.menu li { margin: 0; @@ -131,42 +132,36 @@ ul.menu li.expanded { list-style-image:url(../../misc/menu-expanded.png); list-style-type:circle; } -quote, code { margin: .5em 0; } -code, -pre, -kbd { - font-size: 1.231em; -} pre { margin: 0.5em 0; white-space: pre-wrap; } /** - * Skip link. + * Link to skip to main content */ #skip-link { - margin-top: 0; - position: absolute; left: 50%; /* LTR */ margin-left: -5.25em; /* LTR */ + margin-top: 0; + position: absolute; width: auto; z-index: 50; } #skip-link a, #skip-link a:link, #skip-link a:visited { - display: block; background: #444; + -moz-border-radius: 0 0 10px 10px; + border-radius: 0 0 10px 10px; color: #fff; + display: block; font-size: 0.94em; padding: 1px 10px 2px 10px; /* LTR */ text-decoration: none; - -moz-border-radius: 0 0 10px 10px; - border-radius: 0 0 10px 10px; } #skip-link a:hover, #skip-link a:focus, @@ -178,15 +173,12 @@ pre { * Branding. */ #branding { + background-color: #e0e0d8; overflow: hidden; - padding: 20px 20px 0 20px; /* LTR */ + padding: 20px 4% 0; position: relative; background-color: #e0e0d8; } -#branding .breadcrumb { - font-size: 0.846em; - padding-bottom: 5px; -} #branding div.block { position: relative; float: right; /* LTR */ @@ -211,7 +203,6 @@ pre { text-align: center; width: 80px; } - /** * Help. */ @@ -227,39 +218,39 @@ pre { } /** - * Page title. + * Page title */ #page-title { background: #333; padding-top: 20px; } -#branding h1.page-title { +#branding .page-title { color: #000; + float: left; /* LTR */ + font-size: 1.538em; + font-weight: normal; margin: 0; padding-bottom: 10px; - font-size: 1.385em; - font-weight: normal; - float: left; /* LTR */ } /** - * Console. + * Console */ #console { - margin: 9px 0 10px; + margin: .5em 0; } /** - * Tabs. + * Tabs */ ul.primary { - float: right; /* LTR */ border-bottom: none; - text-transform: uppercase; + float: right; /* LTR */ font-size: 0.923em; height: 2.60em; margin: 0; padding-top: 0; + text-transform: uppercase; } ul.primary li { float: left; /* LTR */ @@ -267,24 +258,25 @@ ul.primary li { margin: 0 2px; } ul.primary li a:link, -ul.primary li a.active, ul.primary li a:active, ul.primary li a:visited, ul.primary li a:hover, +ul.primary li a.active, ul.primary li.active a { + background-color: #a6a7a2; + border-color: #a6a7a2; + -moz-border-radius: 8px 8px 0 0; + border-radius: 8px 8px 0 0; + border-style: solid; + border-width: 1px 1px 0 1px; + color: #000; display: block; float: left; /* LTR */ + font-weight: bold; height: 2.60em; line-height: 2.60em; + margin: 0; padding: 0 18px 8px; - background-color: #a6a7a2; - color: #000; - font-weight: bold; - border-width: 1px 1px 0 1px; - border-style: solid; - border-color: #a6a7a2; - -moz-border-radius: 8px 8px 0 0; - border-radius: 8px 8px 0 0; } ul.primary li.active a, ul.primary li.active a.active, @@ -303,16 +295,19 @@ ul.primary li.active a:hover { clear: both; } ul.secondary { + background-color: #fff; + border: 0; float: right; /* LTR */ font-size: 0.923em; - padding: 0 3px 5px; line-height: 1.385em; overflow: hidden; - background-color: #fff; + padding: 0 3px 5px; } ul.secondary li { - margin: 0 5px; + border: 0; float: none; /* LTR */ + margin: 0 5px; + padding: 0 10px 0 0; /* LTR */ } ul.secondary li a { background-color: #ddd; @@ -323,9 +318,10 @@ ul.secondary li a, ul.secondary li a:hover, ul.secondary li.active a, ul.secondary li.active a.active { - padding: 2px 10px; -moz-border-radius: 7px; border-radius: 7px; + border: 0; + padding: 2px 10px; } ul.secondary li a:hover, ul.secondary li.active a, @@ -333,121 +329,29 @@ ul.secondary li.active a.active { color: #fff; background: #666; } -#content { - clear: left; -} - -/** - * Page layout. - */ -#page { - padding: 20px 0 40px 0; /* LTR */ - margin-right: 40px; /* LTR */ - margin-left: 40px; /* LTR */ - background: #fff; - position: relative; - color: #333; -} -#secondary-links ul.links li { - padding: 0 10px 10px 0; /* LTR */ -} -#secondary-links ul.links li a { - font-size: 0.923em; - background: #777; - color: #fff; - text-align: center; - padding: 5px; - height: 55px; - width: 80px; - overflow: hidden; - -moz-border-radius: 5px; - border-radius: 5px; -} -#secondary-links ul.links li a:hover { - background: #999; -} -ul.links li, -ul.inline li { - padding-right: 1em; /* LTR */ -} -ul.inline li { - display: inline; -} -#secondary-links ul.links li.active-trail a, -#secondary-links ul.links li a.active { - background: #333; -} -ul.admin-list li { - position: relative; - padding-left: 30px; /* LTR */ - padding-top: 9px; - border-top: 1px solid #ccc; - margin-left: 0; /* LTR */ - margin-bottom: 10px; - background: url(images/list-item.png) no-repeat 0 11px; /* LTR */ - list-style-type: none; - list-style-image: none; -} -.admin-panel .item-list ul, -ul.admin-list { - margin: 0; - padding: 0; -} -.admin-panel .item-list ul, -ul.admin-list.compact { - margin: 8px 0; -} -.admin-panel .item-list li, -ul.admin-list.compact li { - border: none; - background: none; - margin: 0 0 0.75em; - line-height: 1; - padding: 0; -} -ul.admin-list li:last-child { - border-bottom: none; -} -ul.admin-list li a { - margin-left: -30px; /* LTR */ - padding: 0 0 4px 30px; /* LTR */ - min-height: 0; -} -ul.admin-list.compact li a { - margin-left: 0; /* LTR */ - padding: 0; -} -ul.admin-list li div.description a { - margin-left: 0; /* LTR */ - padding: 0; - min-height: inherit; -} -div.submitted { - color: #898989; -} /** - * Tables. + * Tables */ table { - width: 100%; + border: 1px solid #bebfb9; font-size: 0.923em; margin: 0 0 10px; - border: 1px solid #bebfb9; + width: 100%; } table td, table th { - vertical-align: middle; - padding: 8px 10px; border: 0; color: #000; + padding: 8px 10px; + vertical-align: middle; } tr.even, tr.odd { - border-width: 0 1px 0 1px; - border-style: solid; - border-color: #bebfb9; background: #f3f4ee; + border-color: #bebfb9; + border-style: solid; + border-width: 0 1px 0 1px; } tr.odd { background: #fff; @@ -459,13 +363,13 @@ tr.drag-previous { background: #ffb; } table th { - text-transform: uppercase; background: #e1e2dc; - font-weight: normal; - border-width: 1px; - border-style: solid; border-color: #bebfb9; + border-style: solid; + border-width: 1px; + font-weight: normal; padding: 3px 10px; + text-transform: uppercase; } table th.active { background: #bdbeb9; @@ -479,14 +383,11 @@ table th.active a { } table th.active img { position: absolute; - top: 3px; right: 3px; /* LTR */ + top: 3px; } -/** - * Force browsers to calculate the width of a 'select all' TH element. - */ table th.select-all { - width: 1px; + width: 1px; /* force browsers to calculate width */ } table td.active { background: #e9e9dd; @@ -499,7 +400,6 @@ table tr.selected td { background: #ffc; border-color: #eeb; } - table.system-status-report tr { border-bottom: 1px solid #ccc; } @@ -515,7 +415,6 @@ table.system-status-report tr.error { color: #8c2e0b; background-color: #fef5f1; } - /** * Exception for webkit bug with the right border of the last cell * in some tables, since it's webkit only, we can use :last-child @@ -524,84 +423,89 @@ tr td:last-child { border-right: 1px solid #bebfb9; /* LTR */ } - -/** - * Fieldsets. - * - * Fieldset legends are displayed like containers in Seven. However, several - * browsers do not support styling of LEGEND elements. To achieve the desired - * styling: - * - All fieldsets use 'position: relative'. - * - All legend labels are wrapped in a single span.fieldset-legend that uses - * 'position: absolute', which means that the LEGEND element itself is not - * rendered by browsers. - * - Due to using 'position: absolute', collapsed fieldsets do not have a - * height; the fieldset requires a 'padding-top' to make the absolute - * positioned .fieldset-legend appear as though it would have a height. - * - Various browsers are positioning the legend differently if there is a - * 'padding-left'/'padding-right' applied on a fieldset and inherit the - * positioning even to absolute positioned elements within; we therefore have - * to apply all padding to the inner .fieldset-wrapper instead. - */ -fieldset { - border: 1px solid #ccc; - padding: 2.5em 0 0 0; /* LTR */ - position: relative; - margin: 1em 0; -} -fieldset .fieldset-legend { - margin-top: 0.5em; - padding-left: 15px; /* LTR */ - position: absolute; - text-transform: uppercase; -} -fieldset .fieldset-wrapper { - padding: 0 13px 13px 15px; /* LTR */ -} -fieldset.collapsed { - background-color: transparent; -} -.js fieldset.collapsed { - border-width: 1px; - height: auto; -} -fieldset fieldset { - background-color: #fff; -} -fieldset fieldset fieldset { - background-color: #f8f8f8; -} - /** - * Form elements. + * Forms */ -.form-item { - padding: 9px 0; - margin: 0 0 10px; -} -.filter-wrapper .form-item, -div.teaser-checkbox .form-item, -.form-item .form-item { - padding: 5px 0; - margin: 0; - border: 0; +input, +textarea, +select { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +select[multiple] { + display: block; } -.form-type-checkbox { +#diff-inline-form select, +div.filter-options select { padding: 0; } -.text-format-wrapper .form-item { - padding-bottom: 0; -} -.form-item label { - margin: 0; - padding: 0; +.form-autocomplete, +.form-text, +.form-tel, +.form-email, +.form-url, +.form-search, +.form-number, +.form-color, +.form-file, +.form-textarea { + background: #f7f7f7; + -moz-border-radius: 0; + border-radius: 0; + border: 1px solid #bbb; + -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); + color: #333; + padding: .5em; + -moz-transition: border linear 0.2s, box-shadow linear 0.2s; + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + transition: border linear 0.2s, box-shadow linear 0.2s; } -.form-item label.option { - font-size: 0.923em; - text-transform: none; +td .form-autocomplete, +td .form-text, +td .form-tel, +td .form-email, +td .form-url, +td .form-search, +td .form-number, +td .form-color { + padding-bottom: .25em; + padding-top: .25em; +} +.form-autocomplete, +.form-text, +.form-tel, +.form-email, +.form-url, +.form-search, +.form-number, +.form-color, +textarea { + max-width: 100%; +} +.layout-form-3 .form-autocomplete, +.layout-form-3 .form-text, +.layout-form-3 .form-tel, +.layout-form-3 .form-email, +.layout-form-3 .form-url, +.layout-form-3 .form-search, +.layout-form-3 .form-number, +.layout-form-3 .form-color, +.layout-form-3 textarea { + width: 100%; } -.form-item label.option input { - vertical-align: middle; +.form-text:focus, +.form-tel:focus, +.form-email:focus, +.form-url:focus, +.form-search:focus, +.form-number:focus, +.form-color:focus, +.form-file:focus, +textarea:focus { + background-color: #f9f9f9; } .form-disabled input.form-autocomplete, .form-disabled input.form-text, @@ -617,151 +521,766 @@ div.teaser-checkbox .form-item, background-color: #eee; color: #777; } - -/* Filter */ -.filter-wrapper { - border-top: 0; - padding: 10px 2px; +.image-widget-data { + float: none; } -.filter-wrapper .fieldset-wrapper { - padding: 0 6px; +.form-file { + max-width: 60%; } -.filter-wrapper .form-item, +.js input.form-autocomplete { + background-position: 100% 8px; +} +.js input.throbbing { + background-position: 100% -12px; +} + +/** + * Form items + */ +.form-item, +[class*="field-name-field-"] { + margin: 0 0 8px 0; + padding-bottom: 8px; + padding-top: 8px; +} +.form-item:last-child { + margin-bottom: 0; +} +.text-format-wrapper .form-item { + padding-bottom: 0; +} +.filter-wrapper .form-item, +div.teaser-checkbox .form-item, +.form-item .form-item { + border: 0; + margin: 0; + padding: 3px 0; +} +tr .form-item { + padding-bottom: 0; + padding-top: 0; +} +.form-type-checkbox + *[style] { + margin-top: 1em; +} + +/** + * Labels + */ +label { + font-size: 1.077em; + margin-bottom: .4em; +} +label[for] { + cursor: pointer; /* Labels with explicit associations are clickable. */ +} +label[for="edit-filters-order"] { + float: left; +} +label.option { + font-size: 0.923em; + text-transform: none; +} +label.option input { + vertical-align: middle; +} + +/** + * Checkboxes and Radios + */ +.form-type-checkbox { + margin: 8px 0; + padding: 0; +} +input.form-checkbox, +input.form-radio { + vertical-align: baseline; +} + +/** + * Filters + */ +.filter-wrapper { + border-top: 0; + overflow: hidden; + padding: 0; +} +.filter-wrapper .form-item, .filter-wrapper .filter-guidelines, .filter-wrapper .filter-help { font-size: 0.923em; padding: 2px 0 0 0; /* LTR */ } -ul.tips, -div.description, -.form-item div.description { - margin: 5px 0; - line-height: 1.231em; - font-size: 0.923em; - color: #666; +.exposed-filters .form-item { + overflow: hidden; } -ul.tips li { - margin: 0.25em 0 0.25em 1.5em; /* LTR */ + +/** + * Form item descriptions and explanatory text + */ +.tips, +.description, +.form-item .description { + color: #666; + font-size: 12px; + font-weight: 300; + line-height: 1.4em; + margin: 5px 0; + text-shadow: none; } body div.form-type-radio div.description, body div.form-type-checkbox div.description { margin-left: 1.5em; /* LTR */ } -input.form-submit, -a.button { - cursor: pointer; - padding: 4px 17px; - margin-bottom: 1em; - margin-right: 1em; /* LTR */ - color: #5a5a5a; - text-align: center; - font-weight: normal; +div.admin-requirements, +div.admin-required { + color: #666; + margin-top: .5em; +} + +/** + * Fieldsets + */ +fieldset { + border: 1px solid #ccc; + margin: 1em 0; + padding: 0; /* LTR */ +} +fieldset fieldset { + background-color: #fff; +} +fieldset fieldset fieldset { + background-color: #f8f8f8; +} +fieldset .fieldset-wrapper { + clear: both; + margin-bottom: 13px; + margin-top: 13px; + padding: 0 13px; +} + +/** + * Fieldset Legends + * 1. Emulate display: block in modern browsers + */ +legend { + float: left; /* 1. */ font-size: 1.077em; - font-family: "Lucida Grande", Verdana, sans-serif; - border: 1px solid #e4e4e4; - border-bottom: 1px solid #b4b4b4; - border-left-color: #d2d2d2; - border-right-color: #d2d2d2; - background: url(images/buttons.png) 0 0 repeat-x; - -moz-border-radius: 20px; - border-radius: 20px; -} -a.button:link, -a.button:visited, -a.button:hover, -a.button:active { + font-weight: bold; + margin: .75em 0 .5em 0; + padding: 0; + width: 100%; /* 1. */ +} +fieldset .fieldset-legend { + line-height: 1.25em; + padding-left: 13px; /* LTR; @todo */ + text-transform: uppercase; +} + +/** + * Collapsible fieldsets + */ +fieldset.collapsed { + background-color: transparent; +} +.js fieldset.collapsed { + border-width: 1px; + height: auto; +} +.js fieldset.collapsible > legend { + font-size: 13px; + margin-bottom: 0; + margin-top: 0; + padding: 0; +} +/* 1. Override standard menu-expanded/collapsed bg images */ +.js fieldset.collapsible > legend .fieldset-legend { + background-image: none; /* 1 */ + margin: 0; + padding: 0; + position: relative; +} +/* Reduce spacing and smooth animation for contents */ +/* @todo find a better solution */ +.collapsible .form-item { + margin: 0; +} +.collapsible .form-type-checkbox { + padding: 4px 0; +} +/* Fieldset toggle */ +.collapsible .fieldset-title { + display: block; + outline: 0; + padding: 1em 13px 1em 26px; text-decoration: none; - color: #5a5a5a; -} -.node-form input#edit-submit, -.node-form input#edit-submit-1 { - border: 1px solid #8eB7cd; - border-left-color: #8eB7cd; - border-right-color: #8eB7cd; - border-bottom-color: #7691a2; - background: url(images/buttons.png) 0 -40px repeat-x; - color: #133B54; -} -input.form-submit:active { - background: #666; - color: #fff; - border-color: #555; - text-shadow: #222 0 -1px 0; } -input.form-button-disabled, -input.form-button-disabled:active { - background: #eee none; - border-color: #eee; +/* New expanded/collapsed icons are their own elements, so background overflow + * with sprites is no longer an issue. */ +.js .collapsible .fieldset-title:before { + background: transparent url(images/icon-twistie.png) no-repeat 0 -12px; + content: ''; + display: block; + height: 12px; + left: 10px; + overflow: hidden; + position: absolute; + top: 1.15em; + width: 12px; +} +.js .collapsed .fieldset-title:before { + background-position: 0 0; /* LTR; @todo RTL */ +} +.js .fieldset-title:hover .fieldset-title-text { + text-decoration: underline; +} +.fieldset-legend span.summary { + display: none; +} +/* body class to re-enable summaries */ +.show-collapsible-summaries .fieldset-legend span.summary { + display: inline; + font-size: .95em; + font-weight: normal; + margin: 0; + padding: 0; + text-decoration: none; text-shadow: none; - color: #999; -} -input.form-autocomplete, -input.form-text, -input.form-tel, -input.form-email, -input.form-url, -input.form-search, -input.form-number, -input.form-color, -input.form-file, -textarea.form-textarea, -select.form-select { - padding: 2px; - border: 1px solid #ccc; - border-top-color: #999; - background: #fff; - color: #333; - -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; - -moz-transition: border linear 0.2s, box-shadow linear 0.2s; - transition: border linear 0.2s, box-shadow linear 0.2s; + text-transform: none; } -input.form-text:focus, -input.form-tel:focus, -input.form-email:focus, -input.form-url:focus, -input.form-search:focus, -input.form-number:focus, -input.form-color:focus, -input.form-file:focus, -textarea.form-textarea:focus, -select.form-select:focus { - color: #000; - border-color: rgba(0, 116, 189, 0.8); - -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(220, 220, 220, 0.4); - -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(220, 220, 220, 0.4); - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(220, 220, 220, 0.4); - outline-color: rgba(0, 116, 189, 0.5); + +/** + * Accordion: custom collapsible fielset block + * + * @todo the holy grail technique needs to be isolated into a variant or scoped. + */ +.accordion { + background-color: #eee; + border-left: 1px solid #ccc; + border-right: 1px solid #ccc; + border-top: 1px solid #ccc; + margin-bottom: 1em; + margin-top: 1em; } -.js input.form-autocomplete { - background-position: 100% 4px; +.accordion > .form-wrapper { + border: 0; + -moz-box-shadow: 0 1px 0 white; + -webkit-box-shadow: 0 1px 0 white; + box-shadow: 0 1px 0 white; + margin: 0; } -.js input.throbbing { - background-position: 100% -16px; +.accordion .collapsibles > .fieldset-wrapper { + margin: 0; + padding: 0; } -ul.action-links { - margin: 1em 0; - padding: 0 20px 0 20px; /* LTR */ +/* Expanded fieldset (default state) */ +.accordion .collapsible { + background-color: #e2e2e2; + background-image: + -moz-linear-gradient(left, rgba(0, 0, 0, .05), transparent 3px), + -moz-linear-gradient(right, rgba(0, 0, 0, .05), transparent 3px); + background-image: + -ms-linear-gradient(left, rgba(0, 0, 0, .05), transparent 3px), + -ms-linear-gradient(right, rgba(0, 0, 0, .05), transparent 3px); + background-image: + -o-linear-gradient(left, rgba(0, 0, 0, .05), transparent 3px), + -o-linear-gradient(right, rgba(0, 0, 0, .05), transparent 3px); + background-image: + -webkit-linear-gradient(left, rgba(0, 0, 0, .05), transparent 3px), + -webkit-linear-gradient(right, rgba(0, 0, 0, .05), transparent 3px); + background-image: + linear-gradient(left, rgba(0, 0, 0, .05), transparent 3px), + linear-gradient(right, rgba(0, 0, 0, .05), transparent 3px); + border-bottom: 1px solid #a5a5a5; + border-left: 0; + border-right: 0; + border-top: 0; + -moz-box-shadow: inset 0 1px 0px rgba(255, 255, 255, .5); + -webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 255, .5); + box-shadow: inset 0 1px 0px rgba(255, 255, 255, .5); + margin: 0; + text-shadow: 0 1px 0 white; + -moz-transition: background-color .1s; + -ms-transition: background-color .1s; + -o-transition: background-color .1s; + -webkit-transition: background-color .1s; + transition: background-color .1s; +} +/* Expanded, with top inner shadow */ +.accordion .collapsible:first-child, +.accordion .collapsed + .collapsible { + -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .14); + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .14); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, .14); +} +/* Override all expanded variants */ +.accordion .collapsed { + background-color: transparent !important; + background-image: none !important; + border-bottom: 1px solid #b5b5b5 !important; + -moz-box-shadow: inset 0 1px 0px white !important; + -webkit-box-shadow: inset 0 1px 0px white !important; + box-shadow: inset 0 1px 0px white !important; +} +.accordion .collapsible a { + color: #005E99; +} +.accordion .collapsed a { + color: #0074BD; +} +@media screen and (min-width: 900px) { + .layout-form-3 .form-region-second .accordion { + background-color: transparent; + margin-top: 0; + margin-bottom: 0; + border: 0; + } + .overlay .layout-form-3 .form-region-second .accordion .collapsible { + background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .08), transparent 6px); + background-image: -ms-linear-gradient(left, rgba(0, 0, 0, .08), transparent 6px); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, .08), transparent 6px); + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .08), transparent 6px); + background-image: linear-gradient(left, rgba(0, 0, 0, .08), transparent 6px); + } +} + +/** + * Buttons + * + * 1. Font metrics matter for vertical centering of button text. Choose a single + * consistent typeface. + * 2. Image file gradient fallback + */ +.button { + background: #f9f9f9 url(images/buttons.png) repeat-x left top; /* 2 */ + background: #f9f9f9 -moz-linear-gradient(top, transparent, rgba(0, 0, 0, .12)); + background: #f9f9f9 -ms-linear-gradient(top, transparent, rgba(0, 0, 0, .12)); + background: #f9f9f9 -o-linear-gradient(top, transparent, rgba(0, 0, 0, .12)); + background: #f9f9f9 -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .12)); + background: #f9f9f9 linear-gradient(top, transparent, rgba(0, 0, 0, .12)); + border: 1px solid #999; + -moz-border-radius: 4px; + border-radius: 4px; + -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .4); + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .4); + box-shadow: 0 1px 2px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .4); + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #222; + cursor: pointer; + display: inline-block; + font-family: Arial, sans-serif; /* 1 */ + line-height: 1em; + padding: 8px 2.5em; + text-align: center; + text-decoration: none; + text-shadow: 0 1px rgba(255, 255, 255, .85); +} +.button:focus, +.button:hover { + background: white -moz-linear-gradient(top, transparent, rgba(0, 0, 0, .09)); + background: white -ms-linear-gradient(top, transparent, rgba(0, 0, 0, .09)); + background: white -o-linear-gradient(top, transparent, rgba(0, 0, 0, .09)); + background: white -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .09)); + background: white linear-gradient(top, transparent, rgba(0, 0, 0, .09)); +} +.button:active { + background: #f9f9f9 url(images/buttons.png) repeat-x left bottom; + background: #f9f9f9 -moz-linear-gradient(bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, .15)); + background: #f9f9f9 -ms-linear-gradient(bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, .15)); + background: #f9f9f9 -o-linear-gradient(bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, .15)); + background: #f9f9f9 -webkit-linear-gradient(bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, .15)); + background: #f9f9f9 linear-gradient(bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, .15)); + border-color: #999; + -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25); + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25); +} +.form-file + .button, +.form-item-operation + .button { + margin-left: .5em; +} +td .button { + height: auto; + padding-bottom: .4em; + padding-top: .4em; +} +/** + * Reversed-color buttons (white text on dark) + * + * 1. prevent over-bold letterforms in webkit + */ +.button-primary, +.button-delete { + color: white; + font-weight: bolder; + -webkit-font-smoothing: antialiased; /* 1 */ + text-shadow: 0 1px 1px rgba(0, 0, 0, .35); +} +/* Primary button */ +.button-primary { + background-color: #4f9fea; + background-image: -moz-linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1)); + background-image: -ms-linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1)); + background-image: -o-linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1)); + background-image: -webkit-linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1)); + background-image: linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1)); + border-color: #3974ae; +} +.button-primary:focus, +.button-primary:hover { + background-color: #55adff; + background-image: -moz-linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, .4)); + background-image: -ms-linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, .4)); + background-image: -o-linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, .4)); + background-image: -webkit-linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, .4)); + background-image: linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, .4)); + +} +.button-primary:active { + background-color: #4f9fea; + background-image: -moz-linear-gradient(bottom, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1)); + background-image: -ms-linear-gradient(bottom, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1)); + background-image: -o-linear-gradient(bottom, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1)); + background-image: -webkit-linear-gradient(bottom, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1)); + background-image: linear-gradient(bottom, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1)); + border-color: #3974ae; +} +/* Delete button */ +.button-delete { + background-color: #ed522f; + background-image: -moz-linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1)); + background-image: -ms-linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1)); + background-image: -o-linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1)); + background-image: -webkit-linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1)); + background-image: linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1)); + border-color: #91311c; +} +.button-delete:focus, +.button-delete:hover { + background-color: #ff6541; + background-image: -moz-linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, .4)); + background-image: -ms-linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, .4)); + background-image: -o-linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, .4)); + background-image: -webkit-linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, .4)); + background-image: linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, .4)); +} +.button-delete:active { + background-color: #ed522f; + background-image: -moz-linear-gradient(bottom, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1)); + background-image: -ms-linear-gradient(bottom, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1)); + background-image: -o-linear-gradient(bottom, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1)); + background-image: -webkit-linear-gradient(bottom, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1)); + background-image: linear-gradient(bottom, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1)); + border-color: #91311c; +} +/* Disabled buttons; selectors are overqualified to override other states. */ +.button.button[disabled], +.button.button-disabled, +input[type].form-button-disabled { + background: #eee; + border-color: #aaa; + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); + color: #777; + cursor: not-allowed; + opacity: .65; + text-shadow: none; +} + +/** + * Action links + * + * Links at the top of admin pages, like the '+ Add content' link at the top + * of /admin/content + */ +.action-links { list-style-type: none; + margin: 1em 0; overflow: hidden; + padding-left: 0; /* LTR */ } -ul.action-links li { +.action-links > li { float: left; /* LTR */ margin: 0 1em 0 0; /* LTR */ } -ul.action-links a { - padding-left: 15px; /* LTR */ +.action-links a { background: transparent url(images/add.png) no-repeat 0 center; line-height: 30px; + padding-left: 15px; /* LTR */ } -/* Exceptions */ -#diff-inline-form select, -div.filter-options select { +/** + * Page layout + */ +#page { + background: #fff; + color: #333; + padding: 0 4% 15px; + position: relative; +} +#content { + clear: left; +} +#secondary-links ul.links li { + padding: 0 10px 10px 0; /* LTR */ +} +#secondary-links ul.links li a { + background: #777; + -moz-border-radius: 5px; + border-radius: 5px; + color: #fff; + font-size: 0.923em; + height: 55px; + overflow: hidden; + padding: 5px; + text-align: center; + width: 80px; +} +#secondary-links ul.links li a:hover { + background: #999; +} +ul.links li, +ul.inline li { + padding-right: 1em; /* LTR */ +} +ul.inline li { + display: inline; +} +#secondary-links ul.links li.active-trail a, +#secondary-links ul.links li a.active { + background: #333; +} +ul.admin-list li { + background: url(images/list-item.png) no-repeat 0 11px; /* LTR */ + border-top: 1px solid #ccc; + list-style-image: none; + list-style-type: none; + margin-bottom: 10px; + margin-left: 0; /* LTR */ + padding-left: 30px; /* LTR */ + padding-top: 9px; + position: relative; +} +.admin-panel .item-list ul, +ul.admin-list { + margin: 0; + padding: 0; +} +.admin-panel .item-list ul, +ul.admin-list.compact { + margin: 8px 0; +} +.admin-panel .item-list li, +ul.admin-list.compact li { + background: none; + border: none; + line-height: 1; + margin: 0 0 0.75em; + padding: 0; +} +ul.admin-list li:last-child { + border-bottom: none; +} +ul.admin-list li a { + margin-left: -30px; /* LTR */ + min-height: 0; + padding: 0 0 4px 30px; /* LTR */ +} +ul.admin-list.compact li a { + margin-left: 0; /* LTR */ + padding: 0; +} +ul.admin-list li div.description a { + margin-left: 0; /* LTR */ + min-height: inherit; + padding: 0; +} +div.submitted { + color: #898989; +} + +/** + * Node add/edit pages + * + * Widescreen version has main fields to the left and settings in a sidebar; + * mobile layout is stacked, top-to-bottom: main fields, settings, form actions. + */ +.region-content .preview { + margin-bottom: 1.5em; +} +.form-region-footer { + overflow: hidden; + padding-bottom: 1em; +} +#edit-settings-summary { + border-bottom: 1px solid #bbb; + overflow: hidden; + padding-bottom: .5em; +} +#edit-settings-summary > legend { + display: none; +} +#edit-settings-summary span.label { + font-weight: bold; +} +#edit-settings-summary .form-item { + font-size: 1em; + margin: 0; + padding: 0; +} +#edit-settings-summary #edit-publication-state { + font-size: 1.231em; + font-weight: normal; + margin-bottom: 0; + margin-top: 1em; + text-shadow: 0 1px 0 white; +} +#edit-settings-summary #edit-last-saved { + font-style: italic; + margin-bottom: .5em; +} +#edit-settings-summary #edit-last-saved span.label { + font-weight: normal; +} +#edit-settings-summary .form-item-log { + margin-top: .5em; +} +.node-form-revision-information { + background: transparent; + border: 0; +} +.node-form-revision-information > .fieldset-wrapper { + margin: 0; padding: 0; } +.form-actions { + margin-top: 1em; +} +.form-actions > * { + margin-right: 1em; /* LTR; @todo RTL */ +} +.form-action-group { + background-color: #eee; + -moz-border-radius: 5px; + border-radius: 5px; + border: 1px solid #ccc; + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + margin-top: -4px; + padding: 3px 6px 3px 3px; /* LTR; @todo RTL */ +} +.button-delete { + float: right; /* LTR; @todo RTL */ + margin-right: 0; /* LTR; @todo RTL */ + width: auto; +} +@media screen and (max-width: 600px) { + .form-actions > * { + margin-right: 0; /* LTR; @todo RTL */ + width: 100%; + } + .form-actions > * + * { + margin-top: 1.75em; + } + .form-action-group .button { + display: inline-block; + margin: 0; + width: 50%; + } + .form-action-group input, + .form-action-group select { + width: 48%; + } +} +@media screen and (min-width: 900px) { + .overlay[class*="page-node-add-"] #overlay-content, + .overlay.page-node-edit #overlay-content { + padding: 0; + } + #page { + padding-bottom: 40px; + } + .overlay[class*="page-node-add-"] #page, + .overlay.page-node-edit #page { + padding-bottom: 0; + } + /* form container */ + .layout-form-3 { + overflow: hidden; + position: relative; + } + .layout-form-3:after { + background: #ccc; + bottom: 0; + content: ''; + display: block; + height: 1px; + position: absolute; + right: 0; /* LTR; @todo RTL */ + width: 35%; + } + .overlay .layout-form-3 { + border-top: 1px solid #ccc; + margin-left: -20px; + margin-right: -20px; + } + .overlay .layout-form-3:after { + display: none; + } + /* layout regions */ + .form-region { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + .layout-form-3 .form-region-first, + .layout-form-3 .form-region-footer { + float: left; /* LTR; @todo RTL */ + padding-right: 20px; /* LTR; @todo RTL */ + width: 65%; + } + .overlay .layout-form-3 .form-region-first { + padding-top: 1.5em; + } + .overlay .layout-form-3 .form-region-first, + .overlay .layout-form-3 .form-region-footer { + padding-left: 20px; /* LTR; @todo RTL */ + } + .layout-form-3 .form-region-second { + background-color: #eee; + border: 1px solid #ccc; + float: right; /* LTR; @todo RTL */ + margin-bottom: -999em; + padding-bottom: 999em; + width: 35%; + } + .overlay .layout-form-3 .form-region-second { + border-left: 1px solid #c6c6c6; + -moz-box-shadow: inset 0.2em 0.1em .5em rgba(0, 0, 0, .1); /* LTR; @todo RTL */ + -webkit-box-shadow: inset 0.2em 0.1em .5em rgba(0, 0, 0, .1); /* LTR; @todo RTL */ + box-shadow: inset 0.2em 0.1em .5em rgba(0, 0, 0, .1); /* LTR; @todo RTL */ + } + /* input and textarea tweaks */ + .layout-form-3 .form-region-second input, + .layout-form-3 .form-region-second textarea { + background-color: white; + } + .layout-form-3 .form-region-second .collapsible input, + .layout-form-3 .form-region-second .collapsible textarea { + background-color: #f4f4f4; + } +} /** - * System. + * System */ @media screen and (min-width: 40em) { div.admin .right, @@ -772,23 +1291,25 @@ div.filter-options select { } div.admin-panel, div.admin-panel .body { - padding: 0; clear: left; + padding: 0; } div.admin-panel { - margin: 0 0 20px; - padding: 9px; background: #f8f8f8; border: 1px solid #ccc; + margin: 0 0 20px; + padding: 9px; } div.admin-panel h3 { font-size: 0.923em; - text-transform: uppercase; margin: 0; padding-bottom: 9px; + text-transform: uppercase; } -/* admin/appearance */ +/** + * Appearance page (theme configuring) + */ #system-themes-page h2 { font-weight: normal; text-transform: uppercase; @@ -803,63 +1324,66 @@ div.admin-panel h3 { margin-top: 0; } -/* Update options. */ +/** + * Update options + */ div.admin-options { background: #f8f8f8; - line-height: 30px; - height: 30px; - padding: 9px; border: 1px solid #ccc; + height: 30px; + line-height: 30px; margin: 0 0 10px; + padding: 9px; } div.admin-options label { - text-transform: uppercase; font: 0.846em/1.875em Lucida Grande, Lucida Sans Unicode, sans-serif; + text-transform: uppercase; } div.admin-options label, div.admin-options div.form-item { - margin-right: 10px; /* LTR */ float: left; /* LTR */ + margin-right: 10px; /* LTR */ } div.admin-options div.form-item { - padding: 0; border: 0; + padding: 0; } - /* Update status */ .versions table.version { border: none; } -/* Maintenance theming */ +/** + * Maintenance page + */ body.in-maintenance #sidebar-first { float: left; /* LTR */ width: 200px; } body.in-maintenance #content { + clear: none; float: right; /* LTR */ - width: 550px; padding-right: 20px; /* LTR */ - clear: none; + width: 550px; } body.in-maintenance #page { - overflow: auto; - width: 770px; margin: 0 auto; + overflow: auto; padding-top: 2em; + width: 770px; } body.in-maintenance #branding h1 { - width: 770px; - margin: 0 auto; float: none; + margin: 0 auto; + width: 770px; } body.in-maintenance .form-radios .form-type-radio { padding: 2px 0; } body.in-maintenance div.form-item:after { + clear: none; content: ""; display: none; - clear: none; } body.in-maintenance .form-submit { display: block; @@ -869,30 +1393,65 @@ body.in-maintenance #logo { max-width: 180px; } ol.task-list { - margin-left: 0; /* LTR */ - list-style-type: none; list-style-image: none; + list-style-type: none; + margin-left: 0; /* LTR */ } ol.task-list li { - padding: 0.5em 1em 0.5em 20px; /* LTR */ color: #adadad; + padding: 0.5em 1em 0.5em 20px; /* LTR */ } ol.task-list li.active { background: transparent url(images/task-item.png) no-repeat 3px 50%; /* LTR */ - padding: 0.5em 1em 0.5em 20px; /* LTR */ color: #000; + padding: 0.5em 1em 0.5em 20px; /* LTR */ } ol.task-list li.done { background: transparent url(images/task-check.png) no-repeat 0 50%; color: green; } -/* Overlay theming */ +/** + * Overlay + */ +#overlay { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + min-width: 0; + overflow-x: hidden; /* prevent unnecessary scrollbars; @todo: more testing */ + padding-left: 36px; + padding-right: 36px; + padding-top: 0; + width: 100%; +} +@media screen and (min-width: 900px) { + #overlay { + padding-right: 48px; /* LTR */ + } +} +#overlay-tabs { + bottom: -1px; + font-size: 1.54em; + line-height: 1.54em; + margin: 0; +} +#overlay-tabs li { + margin: 0 -2px; +} +#overlay-content { + padding: 0 0 1em 0; +} .overlay #branding { background-color: #fff; + padding-left: 20px; + padding-right: 20px; padding-top: 15px; } -.overlay #branding h1.page-title, +.overlay .breadcrumb { + padding-bottom: 0; +} +.overlay .page-title, .overlay #left, .overlay #footer { display: none; @@ -901,20 +1460,6 @@ ol.task-list li.done { margin: 0; padding: 0 20px; } -.overlay #branding .breadcrumb { - float: left; /* LTR */ - position: relative; - z-index: 10; -} -#overlay-tabs { - bottom: -1px; - font-size: 1.54em; - line-height: 1.54em; - margin: 0; -} -#overlay-tabs li { - margin: 0 -2px; -} .overlay ul.secondary { background: transparent none; margin: -1.4em 0 0.3em 0; /* LTR */ @@ -923,19 +1468,40 @@ ol.task-list li.done { .overlay #content { padding: 0; } -h1#overlay-title { - font-weight: normal; -} -/* Shortcut theming */ +/** + * Shortcuts + */ div.add-or-remove-shortcuts { float: left; /* LTR */ - padding-top: 6px; padding-left: 6px; /* LTR */ + padding-top: 6px; } -/* Field UI */ +/** + * Dashboard + */ +#dashboard .dashboard-region div.block h2 { + background: #E0E0D8; +} +#dashboard div.block h2 { + font-size: 1em; + margin: 0; + padding: 3px 10px; +} +#dashboard div.block div.content { + padding: 10px 5px 5px 5px; /* LTR */ +} +#dashboard div.block div.content ul.menu { + margin-left: 20px; /* LTR */ +} +#dashboard .dashboard-region .block { + border: #ccc 1px solid; +} +/** + * Field UI + */ #field-display-overview input.field-formatter-settings-edit { margin: 0; padding: 1px 8px; @@ -956,16 +1522,24 @@ div.add-or-remove-shortcuts { margin-bottom: 0; } -/* Recent content block */ +/** + * Recent Content block + */ +#dashboard div#block-node-recent div.content { + padding: 0; +} #block-node-recent table, -#block-node-recent tr { +#block-node-recent tr, +#block-node-recent td:last-child { border: none; } #block-node-recent .more-link { padding: 0 5px 5px 0; /* LTR */ } -/* User login block */ +/** + * User Login block + */ #user-login-form .openid-links { margin-left: 0; /* LTR */ } @@ -973,7 +1547,9 @@ div.add-or-remove-shortcuts { margin-left: 1.5em; /* LTR */ } -/* Disable overlay message */ +/** + * 'Disable Overlay' message + */ #overlay-disable-message { background-color: #addafc; } @@ -991,7 +1567,7 @@ div.add-or-remove-shortcuts { } .overlay-disable-message-focused #overlay-dismiss-message { background-color: #59a0d8; - color: #fff; -moz-border-radius: 8px; border-radius: 8px; + color: #fff; } diff --git a/core/themes/seven/template.php b/core/themes/seven/template.php index a8643ab..b72352e 100644 --- a/core/themes/seven/template.php +++ b/core/themes/seven/template.php @@ -115,3 +115,44 @@ function seven_css_alter(&$css) { $css['core/misc/ui/themes/base/jquery.ui.theme.css']['data'] = drupal_get_path('theme', 'seven') . '/jquery.ui.theme.css'; } } + +/** + * Overrides theme_button(). + * + * Seven generalizes its button styles; apply a .button class in addition to the + * standard `form-submit` class. If the #button_type has been set, forego the + * `form-submit` class and add button sub-classes of the form `.button-#button_type`. + * So for a #button_type of 'primary', classes will be "button button-primary". + */ +function seven_button($variables) { + $element = $variables['element']; + $element['#attributes']['type'] = 'submit'; + element_set_attributes($element, array('id', 'name', 'value')); + + $element['#attributes']['class'][] = 'button'; + if (!empty($element['#button_type'])) { + $element['#attributes']['class'][] = 'button-' . $element['#button_type']; + } + else { + $element['#attributes']['class'][] = 'form-submit'; + } + if (!empty($element['#attributes']['disabled'])) { + $element['#attributes']['class'][] = 'button-disabled'; + } + + return ''; +} + +/** + * Process variables for layout-form-3.tpl.php + * + * Wrap region contents in a faux-block. + */ +function seven_preprocess_layout_form_3(&$vars) { + $form_settings = array( + '#prefix' => '
', + '#suffix' => '
', + 'content' => $vars['regions']['second'], + ); + $vars['regions']['second'] = $form_settings; +} -- 1.7.10