diff --git a/core/modules/config/src/Tests/ConfigImportUITest.php b/core/modules/config/src/Tests/ConfigImportUITest.php index b868d3597c1..8da2792666c 100644 --- a/core/modules/config/src/Tests/ConfigImportUITest.php +++ b/core/modules/config/src/Tests/ConfigImportUITest.php @@ -102,20 +102,20 @@ class ConfigImportUITest extends WebTestBase { // Verify that both appear as ready to import. $this->drupalGet('admin/config/development/configuration'); - $this->assertText($name); - $this->assertText($dynamic_name); - $this->assertText('core.extension'); - $this->assertText('system.theme'); - $this->assertText('action.settings'); + $this->assertRaw('' . $name); + $this->assertRaw('' . $dynamic_name); + $this->assertRaw('core.extension'); + $this->assertRaw('system.theme'); + $this->assertRaw('action.settings'); $this->assertFieldById('edit-submit', t('Import all')); // Import and verify that both do not appear anymore. $this->drupalPostForm(NULL, array(), t('Import all')); - $this->assertNoText($name); - $this->assertNoText($dynamic_name); - $this->assertNoText('core.extension'); - $this->assertNoText('system.theme'); - $this->assertNoText('action.settings'); + $this->assertNoRaw('' . $name); + $this->assertNoRaw('' . $dynamic_name); + $this->assertNoRaw('core.extension'); + $this->assertNoRaw('system.theme'); + $this->assertNoRaw('action.settings'); $this->assertNoFieldById('edit-submit', t('Import all')); @@ -177,15 +177,15 @@ class ConfigImportUITest extends WebTestBase { // Verify that both appear as ready to import. $this->drupalGet('admin/config/development/configuration'); - $this->assertText('core.extension'); - $this->assertText('system.theme'); - $this->assertText('action.settings'); + $this->assertRaw('core.extension'); + $this->assertRaw('system.theme'); + $this->assertRaw('action.settings'); // Import and verify that both do not appear anymore. $this->drupalPostForm(NULL, array(), t('Import all')); - $this->assertNoText('core.extension'); - $this->assertNoText('system.theme'); - $this->assertNoText('action.settings'); + $this->assertNoRaw('core.extension'); + $this->assertNoRaw('system.theme'); + $this->assertNoRaw('action.settings'); $this->rebuildContainer(); $this->assertFalse(\Drupal::moduleHandler()->moduleExists('ban'), 'Ban module uninstalled during import.'); diff --git a/core/modules/system/src/Tests/Menu/MenuRouterTest.php b/core/modules/system/src/Tests/Menu/MenuRouterTest.php index 7de9006880f..838a47e3a49 100644 --- a/core/modules/system/src/Tests/Menu/MenuRouterTest.php +++ b/core/modules/system/src/Tests/Menu/MenuRouterTest.php @@ -277,7 +277,7 @@ class MenuRouterTest extends WebTestBase { // For a regular user, the fact that the site is in maintenance mode means // we expect the theme callback system to be bypassed entirely. $this->drupalGet('menu-test/theme-callback/use-admin-theme'); - $this->assertRaw('bartik/css/style.css', "The maintenance theme's CSS appears on the page."); + $this->assertRaw('bartik/css/base/elements.css', "The maintenance theme's CSS appears on the page."); // An administrator, however, should continue to see the requested theme. $admin_user = $this->drupalCreateUser(array('access site in maintenance mode')); @@ -296,7 +296,7 @@ class MenuRouterTest extends WebTestBase { // Request a theme that is not installed. $this->drupalGet('menu-test/theme-callback/use-stark-theme'); $this->assertText('Active theme: bartik. Actual theme: bartik.', 'The theme negotiation system falls back on the default theme when a theme that is not installed is requested.'); - $this->assertRaw('bartik/css/style.css', "The default theme's CSS appears on the page."); + $this->assertRaw('bartik/css/base/elements.css', "The default theme's CSS appears on the page."); // Now install the theme and request it again. $theme_handler = $this->container->get('theme_handler'); @@ -315,7 +315,7 @@ class MenuRouterTest extends WebTestBase { protected function doTestThemeCallbackFakeTheme() { $this->drupalGet('menu-test/theme-callback/use-fake-theme'); $this->assertText('Active theme: bartik. Actual theme: bartik.', 'The theme negotiation system falls back on the default theme when a theme that does not exist is requested.'); - $this->assertRaw('bartik/css/style.css', "The default theme's CSS appears on the page."); + $this->assertRaw('bartik/css/base/elements.css', "The default theme's CSS appears on the page."); } /** @@ -324,7 +324,7 @@ class MenuRouterTest extends WebTestBase { protected function doTestThemeCallbackNoThemeRequested() { $this->drupalGet('menu-test/theme-callback/no-theme-requested'); $this->assertText('Active theme: bartik. Actual theme: bartik.', 'The theme negotiation system falls back on the default theme when no theme is requested.'); - $this->assertRaw('bartik/css/style.css', "The default theme's CSS appears on the page."); + $this->assertRaw('bartik/css/base/elements.css', "The default theme's CSS appears on the page."); } } diff --git a/core/modules/taxonomy/src/Tests/ThemeTest.php b/core/modules/taxonomy/src/Tests/ThemeTest.php index 9ababed458c..d83d6ed0028 100644 --- a/core/modules/taxonomy/src/Tests/ThemeTest.php +++ b/core/modules/taxonomy/src/Tests/ThemeTest.php @@ -44,7 +44,7 @@ class ThemeTest extends TaxonomyTestBase { // Viewing a taxonomy term should use the default theme. $term = $this->createTerm($vocabulary); $this->drupalGet('taxonomy/term/' . $term->id()); - $this->assertRaw('bartik/css/style.css', t("The default theme's CSS appears on the page for viewing a taxonomy term.")); + $this->assertRaw('bartik/css/base/elements.css', t("The default theme's CSS appears on the page for viewing a taxonomy term.")); // Editing a taxonomy term should use the same theme as adding one. $this->drupalGet('taxonomy/term/' . $term->id() . '/edit'); diff --git a/core/tests/Drupal/Tests/Core/Asset/CssCollectionGrouperUnitTest.php b/core/tests/Drupal/Tests/Core/Asset/CssCollectionGrouperUnitTest.php index 688ba5483d0..2d82c83c930 100644 --- a/core/tests/Drupal/Tests/Core/Asset/CssCollectionGrouperUnitTest.php +++ b/core/tests/Drupal/Tests/Core/Asset/CssCollectionGrouperUnitTest.php @@ -91,16 +91,16 @@ class CssCollectionGrouperUnitTest extends UnitTestCase { 'browsers' => array('IE' => TRUE, '!IE' => TRUE), 'basename' => 'external.css', ), - 'style.css' => array( + 'elements.css' => array( 'group' => 100, 'every_page' => TRUE, 'media' => 'all', 'type' => 'file', 'weight' => 0.001, 'preprocess' => TRUE, - 'data' => 'core/themes/bartik/css/style.css', + 'data' => 'core/themes/bartik/css/base/elements.css', 'browsers' => array('IE' => TRUE, '!IE' => TRUE), - 'basename' => 'style.css', + 'basename' => 'elements.css', ), 'print.css' => array( 'group' => 100, @@ -163,7 +163,7 @@ class CssCollectionGrouperUnitTest extends UnitTestCase { $this->assertSame($groups[4]['media'], 'all'); $this->assertSame($groups[4]['preprocess'], TRUE); $this->assertSame(count($groups[4]['items']), 1); - $this->assertContains($css_assets['style.css'], $groups[4]['items']); + $this->assertContains($css_assets['elements.css'], $groups[4]['items']); // Check group 6. $this->assertSame($groups[5]['group'], 100); diff --git a/core/themes/bartik/bartik.libraries.yml b/core/themes/bartik/bartik.libraries.yml index 2ea569364a4..236a167cf52 100644 --- a/core/themes/bartik/bartik.libraries.yml +++ b/core/themes/bartik/bartik.libraries.yml @@ -2,8 +2,46 @@ global-styling: version: VERSION css: theme: + css/base/elements.css: {} + css/base/typography.css: {} css/layout.css: {} - css/style.css: {} + css/components/admin.css: {} + css/components/book.css: {} + css/components/breadcrumb.css: {} + css/components/captions.css: {} + css/components/comments.css: {} + css/components/content.css: {} + css/components/contextual.css: {} + # @see https://www.drupal.org/node/2389735 + css/components/dropbutton.component.css: {} + css/components/featured.css: {} + css/components/footer.css: {} + css/components/form.css: {} + css/components/forum.css: {} + css/components/header.css: {} + css/components/help.css: {} + css/components/highlighted.css: {} + css/components/list.css: {} + css/components/messages.css: {} + css/components/node-preview.css: {} + css/components/pager.css: {} + css/components/primary-menu.css: {} + css/components/search.css: {} + css/components/search-results.css: {} + css/components/secondary-menu.css: {} + css/components/shortcut.css: {} + css/components/skip-link.css: {} + css/components/sidebar.css: {} + css/components/table.css: {} + css/components/tabs.css: {} + css/components/tips.css: {} + css/components/triptych.css: {} + css/components/user.css: {} + # @see https://www.drupal.org/node/2389735 + css/components/vertical-tabs.component.css: {} + css/components/views.css: {} + css/components/buttons.css: {} + css/components/media.css: {} css/colors.css: {} css/print.css: { media: print } @@ -21,7 +59,7 @@ maintenance_page: version: VERSION css: theme: - css/maintenance-page.css: {} + css/theme/maintenance-page.css: {} dependencies: - system/maintenance - bartik/global-styling diff --git a/core/themes/bartik/css/base/elements.css b/core/themes/bartik/css/base/elements.css new file mode 100644 index 00000000000..ead25e91a39 --- /dev/null +++ b/core/themes/bartik/css/base/elements.css @@ -0,0 +1,117 @@ +/* ---------- Overall Specifications ---------- */ + +body { + line-height: 1.5; + font-size: 87.5%; + word-wrap: break-word; + margin: 0; + padding: 0; + border: 0; +} +a { + text-decoration: none; + border-bottom: 1px dotted; +} +a:hover, +a:active, +a:focus, +.link:hover, +.link:active, +.link:focus { + text-decoration: none; + border-bottom-style: solid; +} +.field-type-image a, +h1 a, +h2 a, +[role*=banner] a, +.feed-icon, +.contextual-links a, +.toolbar a { + border-bottom: none !important; +} +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 1.0em 0 0.5em; + font-weight: inherit; +} +h1 { + font-size: 1.357em; + color: #000; +} +h2 { + font-size: 1.143em; +} +h3 { + font-size: 1.092em; +} +h4 { + font-size: 1.05em; +} +h5 { + font-size: 0.889em; + text-transform: uppercase; + letter-spacing: 0.1em; +} +h6 { + font-size: 0.67em; + text-transform: uppercase; + letter-spacing: 0.1em; +} +p { + margin: 0 0 1.2em; +} +del { + text-decoration: line-through; +} + +/* ------------------ Reset Styles ------------------ */ + +blockquote { + background: #f7f7f7; + border-left: 1px solid #bbb; + font-style: italic; + margin: 1.5em 10px; + padding: 0.5em 10px; +} +[dir="rtl"] blockquote { + border-left: none; + border-right: 4px solid #afafaf; +} +blockquote:before { + color: #bbb; + content: "\201C"; + font-size: 3em; + line-height: 0.1em; + margin-right: 0.2em; + vertical-align: -.4em; +} +[dir="rtl"] blockquote:before { + content: "\201D"; +} +blockquote:after { + color: #bbb; + content: "\201D"; + font-size: 3em; + line-height: 0.1em; + vertical-align: -.45em; +} +[dir="rtl"] blockquote:after { + content: "\201C"; +} +blockquote > p:first-child { + display: inline; +} +a.feed-icon { + display: inline-block; + padding: 15px 0 0 0; +} +img { + max-width: 100%; + height: auto; + border: 0; +} diff --git a/core/themes/bartik/css/base/typography.css b/core/themes/bartik/css/base/typography.css new file mode 100644 index 00000000000..fb3fcd098a1 --- /dev/null +++ b/core/themes/bartik/css/base/typography.css @@ -0,0 +1,35 @@ +/* ------------------ Fonts ------------------ */ + +body, +#site-slogan, +.site-slogan, +#page .ui-widget, +.comment-form label, +.node-form label, +.node-form .description { + font-family: Georgia, "Times New Roman", Times, serif; +} +#header, +#footer-wrapper, +.skip-link, +ul.contextual-links, +ul.links, +ul.primary, +.pager__items, +div.field-type-taxonomy-term-reference, +div.messages, +.node__meta, +p.comment-time, +table, +.breadcrumb, +.link { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} +input, +textarea, +select, +.form-button, +a.button, +button { + font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; +} diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css index f2ef534545c..6ba30647a63 100644 --- a/core/themes/bartik/css/colors.css +++ b/core/themes/bartik/css/colors.css @@ -56,3 +56,18 @@ a:active, .region-secondary-menu .menu li a { color: #fffeff; } + +/* ---------- Color Form ----------- */ + +[dir="rtl"] .color-form #palette { + margin-left: 0; + margin-right: 20px; +} +[dir="rtl"] .color-form .form-item label { + float: right; +} +[dir="rtl"] .color-form #palette .lock { + right: -20px; + left: 0; +} + diff --git a/core/themes/bartik/css/components/admin.css b/core/themes/bartik/css/components/admin.css new file mode 100644 index 00000000000..1661946fc8b --- /dev/null +++ b/core/themes/bartik/css/components/admin.css @@ -0,0 +1,49 @@ +/* ---------- Admin-specific Theming ---------- */ +.path-admin #content img { + margin-right: 15px; /* LTR */ +} +.path-admin #content .simpletest-image img { + margin: 0; +} +.path-admin #admin-dblog img { + margin: 0 5px; +} + +/* Block demo mode */ +.demo-block { + background: #ffff66; + border: 1px dotted #9f9e00; + color: #000; + font: 90% "Lucida Grande", "Lucida Sans Unicode", sans-serif; + margin: 5px; + padding: 5px; + text-align: center; + text-shadow: none; +} +#featured .demo-block { + font-size: 0.55em; +} +#header .demo-block { + width: 500px; +} + +/* Configuration. */ +div.admin-panel { + background: #fbfbfb; + border: 1px solid #ccc; + margin: 10px 0; + padding: 0 5px 5px; +} +div.admin-panel h3 { + margin: 16px 7px; +} +div.admin-panel dt { + border-top: 1px solid #ccc; + padding: 7px 0 0; +} +div.admin-panel dd { + margin: 0 0 10px; +} +div.admin-panel .description { + margin: 0 0 14px 7px; +} diff --git a/core/themes/bartik/css/components/book.css b/core/themes/bartik/css/components/book.css new file mode 100644 index 00000000000..9f166b97397 --- /dev/null +++ b/core/themes/bartik/css/components/book.css @@ -0,0 +1,8 @@ +.book-navigation .menu { + border-top: 1px solid #d6d6d6; +} +.book-navigation .book-pager { + border-bottom: 1px solid #d6d6d6; + border-top: 1px solid #d6d6d6; + margin: 0; +} diff --git a/core/themes/bartik/css/components/breadcrumb.css b/core/themes/bartik/css/components/breadcrumb.css new file mode 100644 index 00000000000..6c81a969d38 --- /dev/null +++ b/core/themes/bartik/css/components/breadcrumb.css @@ -0,0 +1,5 @@ +/* -------------- Breadcrumbs -------------- */ + +.breadcrumb { + font-size: 0.929em; +} diff --git a/core/themes/bartik/css/components/buttons.css b/core/themes/bartik/css/components/buttons.css new file mode 100644 index 00000000000..e2370e23453 --- /dev/null +++ b/core/themes/bartik/css/components/buttons.css @@ -0,0 +1,25 @@ +/* ---------------- Buttons ---------------- */ + +.button { + background-color: #fff; + background-image: -webkit-linear-gradient(top, #f3f3f3, #e8e8e8); + background-image: linear-gradient(to bottom, #f3f3f3, #e8e8e8); + border: 1px solid #e4e4e4; + border-bottom-color: #b4b4b4; + border-left-color: #d2d2d2; + border-right-color: #d2d2d2; + color: #3a3a3a; + cursor: pointer; + font-size: 0.929em; + font-weight: normal; + text-align: center; + padding: 0.250em 1.063em; + border-radius: 1em; +} +.button:hover, +.button:active, +.button:focus { + text-decoration: none; + color: #5a5a5a; + background: #dedede; +} diff --git a/core/themes/bartik/css/components/captions.css b/core/themes/bartik/css/components/captions.css new file mode 100644 index 00000000000..4d68e113034 --- /dev/null +++ b/core/themes/bartik/css/components/captions.css @@ -0,0 +1,31 @@ +/* -------------- Captions -------------- */ +.caption { + margin-bottom: 1.2em; +} +.caption > * { + background: #F3F3F3; + padding: 0.5ex; + border: 1px solid #CCC; +} +.caption > figcaption { + border: 1px solid #CCC; + border-top: none; + padding-top: 0.5ex; + font-size: small; + text-align: center; +} + +/* Override Bartik's default blockquote and pre styles when captioned. */ +.caption-pre > pre, +.caption-blockquote > blockquote { + margin: 0; +} +.caption-blockquote > figcaption::before { + content: "— "; +} +.caption-blockquote > figcaption { + text-align: left; +} +[dir="rtl"] .caption-blockquote > figcaption { + text-align: right; +} diff --git a/core/themes/bartik/css/components/comments.css b/core/themes/bartik/css/components/comments.css new file mode 100644 index 00000000000..1166e216584 --- /dev/null +++ b/core/themes/bartik/css/components/comments.css @@ -0,0 +1,105 @@ +/* ----------------- Comments ----------------- */ + +.comment h2.title { + margin-bottom: 1em; +} +.comment .field-name-field-user-picture img { + margin-left: 0; /* LTR */ +} +[dir="rtl"] .comment .field-name-field-user-picture img { + margin-right: 0; +} +.comment { + margin-bottom: 20px; + display: table; + vertical-align: top; +} +.comment .attribution { + display: table-cell; + padding: 0 30px 0 0; /* LTR */ + vertical-align: top; + overflow: hidden; +} +[dir="rtl"] .comment .attribution { + float: right; + padding: 0 0 0 30px; +} +.comment .attribution img { + margin: 0; + border: 1px solid #d3d7d9; +} +.comment .attribution .username { + white-space: nowrap; +} +.comment .submitted p { + margin: 4px 0; + font-size: 1.071em; + line-height: 1.2; +} +.comment .submitted .comment-time { + font-size: 0.786em; + color: #68696b; +} +.comment .submitted .comment-permalink { + font-size: 0.786em; +} +.comment .content { + font-size: 0.929em; + line-height: 1.6; +} +.comment .comment-arrow { + background: url(../images/comment-arrow.gif) no-repeat 0 center transparent; /* LTR */ + border-left: 1px solid; + border-right: 1px solid; + height: 40px; + margin-left: -47px; /* LTR */ + margin-top: 10px; + position: absolute; + width: 20px; +} +[dir="rtl"] .comment .comment-arrow { + background-image: url(../images/comment-arrow-rtl.gif); + margin-left: 0; + margin-right: -47px; +} +.comment .comment-text { + padding: 10px 25px; + border: 1px solid #d3d7d9; + display: table-cell; + vertical-align: top; + position: relative; + width: 100%; +} +.comment .indented { + margin-left: 40px; /* LTR */ +} +[dir="rtl"] .comment .indented { + margin-right: 40px; + margin-left: 0; +} +.comment ul.links { + padding: 0 0 0.25em 0; +} +.comment ul.links li { + padding: 0 0.5em 0 0; /* LTR */ +} +[dir="rtl"] .comment ul.links li { + padding: 0 0 0.5em; +} +.comment.unpublished { + margin-right: 5px; /* LTR */ + padding: 5px 2px 5px 5px; /* LTR */ +} +[dir="rtl"] .comment.unpublished { + margin-left: 5px; + margin-right: 0; + padding: 5px 5px 5px 2px; +} +.comment.unpublished .comment-text .comment-arrow { + border-left: 1px solid #fff4f4; + border-right: 1px solid #fff4f4; +} + +.comment-footer { + display: table-row; +} diff --git a/core/themes/bartik/css/components/content.css b/core/themes/bartik/css/components/content.css new file mode 100644 index 00000000000..6a672dd576c --- /dev/null +++ b/core/themes/bartik/css/components/content.css @@ -0,0 +1,177 @@ +/* ----------------- Content ------------------ */ + +.content, +.node__content { + margin-top: 10px; +} +h1#page-title { + font-size: 2em; + line-height: 1; +} +#content h2 { + margin-bottom: 2px; + font-size: 1.429em; + line-height: 1.4; +} +.node__content { + font-size: 1.071em; +} +.node--view-mode-teaser .node__content { + font-size: 1em; +} +.node--view-mode-teaser h2 { + margin-top: 0; + padding-top: 0.5em; +} +.node--view-mode-teaser h2 a { + color: #181818; +} +.node--view-mode-teaser { + border-bottom: 1px solid #d3d7d9; + margin-bottom: 30px; + padding-bottom: 15px; +} +.node--view-mode-teaser.node--sticky { + background: #f9f9f9; + background: rgba(0, 0, 0, 0.024); + border: 1px solid #d3d7d9; + padding: 0 15px 15px; +} +.node--view-mode-teaser .node__content { + clear: none; + line-height: 1.6; +} +.node__meta { + font-size: 0.857em; + color: #68696b; + margin-bottom: -5px; +} +.node__meta .field-name-field-user-picture img { + float: left; /* LTR */ + margin: 1px 20px 0 0; /* LTR */ +} +[dir="rtl"] .node__meta .field-name-field-user-picture img { + float: right; + margin-left: 20px; + margin-right: 0; +} +.field-type-taxonomy-term-reference { + margin: 0 0 1.2em; +} +.field-type-taxonomy-term-reference .field-label { + font-weight: normal; + margin: 0; + padding-right: 5px; /* LTR */ +} +[dir="rtl"] .field-type-taxonomy-term-reference .field-label { + padding-left: 5px; + padding-right: 0; +} +.field-type-taxonomy-term-reference .field-label, +.field-type-taxonomy-term-reference ul.links { + font-size: 0.8em; +} +.node--view-mode-teaser .field-type-taxonomy-term-reference .field-label, +.node--view-mode-teaser .field-type-taxonomy-term-reference ul.links { + font-size: 0.821em; +} +.field-type-taxonomy-term-reference ul.links { + padding: 0; + margin: 0; + list-style: none; +} +.field-type-taxonomy-term-reference ul.links li { + float: left; /* LTR */ + padding: 0 1em 0 0; /* LTR */ + white-space: nowrap; +} +[dir="rtl"] .field-type-taxonomy-term-reference ul.links li { + padding: 0 0 0 1em; + float: right; +} +.node__links { + text-align: right; +} +[dir="rtl"] .node__links { + text-align: left; + margin-right: 236px; + margin-left: 0; +} +.field-type-image img, +.field-name-field-user-picture img { + margin: 0 0 1em; +} +ul.links { + color: #68696b; + font-size: 0.821em; +} +.node--unpublished, +.unpublished { + padding: 20px 15px 0; +} +.node--unpublished .comment-text .comment-arrow, +.unpublished .comment-text .comment-arrow { + border-left: 1px solid #fff4f4; + border-right: 1px solid #fff4f4; +} +.node-preview-container { + background: #d1e8f5; + background-image: -webkit-linear-gradient(top, #d1e8f5, #d3e8f4); + background-image: linear-gradient(to bottom, #d1e8f5, #d3e8f4); + font-family: Arial, sans-serif; + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3333); + position: fixed; + z-index: 499; + width: 100%; + padding: 10px; +} +.node-preview-backlink { + background-color: #419ff1; + background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, -webkit-linear-gradient(top, #419ff1, #1076d5); + background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, linear-gradient(to bottom, #419ff1, #1076d5); /* LTR */ + border: 1px solid #0048c8; + border-radius: .4em; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); + color: #fff; + font-size: 0.9em; + line-height: normal; + margin: 0; + padding: 4px 1em 4px 0.6em; /* LTR */ + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); +} +[dir="rtl"] .node-preview-backlink { + background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, -webkit-linear-gradient(top, #419ff1, #1076d5); + background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, linear-gradient(to bottom, #419ff1, #1076d5); + padding: 4px 0.6em 4px 1em; + float: right; +} +.node-preview-backlink:focus, +.node-preview-backlink:hover { + background-color: #419cf1; + background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, -webkit-linear-gradient(top, #59abf3, #2a90ef); + background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, linear-gradient(to bottom, #59abf3, #2a90ef); /* LTR */ + border: 1px solid #0048c8; + text-decoration: none; + color: #fff; +} +[dir="rtl"] .node-preview-backlink:focus, +[dir="rtl"] .node-preview-backlink:hover { + background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, -webkit-linear-gradient(top, #59abf3, #2a90ef); + background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, linear-gradient(to bottom, #59abf3, #2a90ef); +} +.node-preview-backlink:active { + background-color: #0e69be; + background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, -webkit-linear-gradient(top, #0e69be, #2a93ef); + background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, linear-gradient(to bottom, #0e69be, #2a93ef); /* LTR */ + border: 1px solid #0048c8; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); +} +.node-preview-backlink:active { + background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, -webkit-linear-gradient(top, #0e69be, #2a93ef); + background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, linear-gradient(to bottom, #0e69be, #2a93ef); +} +.node-preview-backlink::before { + content: ''; + width: 10px; + display: inline-block; +} diff --git a/core/themes/bartik/css/components/contextual.css b/core/themes/bartik/css/components/contextual.css new file mode 100644 index 00000000000..0b083951e7f --- /dev/null +++ b/core/themes/bartik/css/components/contextual.css @@ -0,0 +1,4 @@ +#header .contextual .trigger, +#footer-wrapper .contextual .trigger { + border: none; +} diff --git a/core/themes/bartik/css/components/dropbutton.component.css b/core/themes/bartik/css/components/dropbutton.component.css new file mode 100644 index 00000000000..ac14aef685c --- /dev/null +++ b/core/themes/bartik/css/components/dropbutton.component.css @@ -0,0 +1,111 @@ +/* ---------- Dropbutton ----------- */ +.js .dropbutton-multiple.open .dropbutton-widget { + border-radius: 1em; +} +.js .dropbutton-widget { + position: relative !important; + border: 1px solid #e4e4e4; + border-bottom-color: #b4b4b4; + border-left-color: #d2d2d2; + border-right-color: #d2d2d2; + background-color: #fff; + background-image: -webkit-linear-gradient(top, #f3f3f3, #e8e8e8); + background-image: linear-gradient(to bottom, #f3f3f3, #e8e8e8); + color: #3a3a3a; + cursor: pointer; + text-align: center; + margin: 0.125em 0; + border-radius: 1em; +} +.js .dropbutton-widget:hover { + border-top-color: #e4e4e4; + border-bottom-color: #b4b4b4; + border-left-color: #d2d2d2; + border-right-color: #d2d2d2; +} +.js .dropbutton-widget .button { + border: none; + margin: 0; + padding: 0.32em 1em; + width: 100%; + border-radius: 1em; +} +.js .dropbutton-widget .button:hover { + border-radius: 1em 0 0 1em; +} +[dir="rtl"].js .dropbutton-widget .button:hover { + border-radius: 0 1em 1em 0; +} +.js .dropbutton-single .dropbutton-widget .dropbutton-action a { + color: #3a3a3a; +} +.js .dropbutton-single .dropbutton-widget .dropbutton-action a:hover { + background: #dedede; + border-radius: 1em; +} +.js .dropbutton-multiple .dropbutton-widget .dropbutton-action a { + color: #3a3a3a; + margin-right: 0; +} +[dir="rtl"].js .dropbutton-multiple .dropbutton-widget .dropbutton-action a { + margin-left: 0; +} +.js .dropbutton-multiple .dropbutton-widget .dropbutton-action a:hover { + background: #dedede; +} +.js .dropbutton-multiple .dropbutton-widget .dropbutton-action:first-child a:hover { + border-radius: 1em 0 0 1em; /* LTR */ +} +[dir="rtl"].js .dropbutton-multiple .dropbutton-widget .dropbutton-action:first-child a:hover { + border-radius: 0 1em 1em 0; +} +.js .dropbutton-multiple.open .dropbutton-widget .dropbutton-action:first-child a:hover { + border-radius: 1em 0 0 0; /* LTR */ +} +[dir="rtl"].js .dropbutton-multiple.open .dropbutton-widget .dropbutton-action:first-child a:hover { + border-radius: 0 1em 0 0; +} +.js .dropdown-widget .publish .button { + border-radius: 1em 0 0 1em; /* LTR */ +} +[dir="rtl"].js .dropbutton-widget .publish .button { + border-radius: 0 1em 1em 0; +} +.js .dropbutton-multiple.open .dropbutton-action:first-child a, +.js .dropbutton-multiple.open .dropbutton-action:first-child .button { + border-radius: 1em 0 0 0; /* LTR */ +} +[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child a, +[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child .button { + border-radius: 0 1em 0 0; +} +.js .dropbutton-multiple.open .dropbutton-action:last-child a, +.js .dropbutton-multiple.open .dropbutton-action:last-child .button { + border-radius: 0 0 0 1em; /* LTR */ +} +[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child a, +[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child .button { + border-radius: 0 0 1em 0; +} +.js .dropbutton .secondary-action { + border-top-color: #ccc; +} +.js .dropbutton-toggle button { + border-radius: 0 1em 1em 0; /* LTR */ + background-color: #e8e8e8; + background-image: -webkit-linear-gradient(top, #e8e8e8, #d2d2d2); + background-image: linear-gradient(to bottom, #e8e8e8, #d2d2d2); +} +[dir="rtl"].js .dropbutton-toggle button { + border-radius: 1em 0 0 1em; +} +.js .dropbutton-toggle .button:hover { + background: #ccc; +} + +.js .dropbutton a { + border-bottom: none; +} +.js .dropbutton a:hover { + border-bottom-style: none; +} diff --git a/core/themes/bartik/css/components/featured.css b/core/themes/bartik/css/components/featured.css new file mode 100644 index 00000000000..3c5685258c1 --- /dev/null +++ b/core/themes/bartik/css/components/featured.css @@ -0,0 +1,22 @@ +/* ----------------- Featured ----------------- */ + +#featured { + text-align: center; + font-size: 1.2em; + font-weight: normal; + line-height: 1.4; + padding: 20px 10px 45px; + margin: 0; + background: #f0f0f0; + background: rgba(30, 50, 10, 0.08); + border-bottom: 1px solid #e7e7e7; + text-shadow: 1px 1px #fff; +} +#featured h2 { + font-size: 1.2em; + line-height: 1; +} +#featured p { + margin: 0; + padding: 0; +} diff --git a/core/themes/bartik/css/components/footer.css b/core/themes/bartik/css/components/footer.css new file mode 100644 index 00000000000..094181a9e14 --- /dev/null +++ b/core/themes/bartik/css/components/footer.css @@ -0,0 +1,142 @@ +/* ------------------ Footer ------------------ */ + +#footer-wrapper .block .content { + color: #c0c0c0; + color: rgba(255, 255, 255, 0.65); + font-size: 0.857em; +} +#footer-wrapper .block .content a { + color: #fcfcfc; + color: rgba(255, 255, 255, 0.8); +} +#footer-wrapper .block .content a:hover, +#footer-wrapper .block .content a:focus { + color: #fefefe; + color: rgba(255, 255, 255, 0.95); +} +#footer-wrapper .block { + margin: 20px 0; + border: 1px solid #444; + border-color: rgba(255, 255, 255, 0.1); + padding: 10px; +} +#footer-columns .block-menu, +#footer .block { + margin: 0; + padding: 0; + border: none; +} +#footer .block { + margin: 0.5em 0; +} +#footer .block .content { + padding: 0.5em 0; + margin-top: 0; +} +#footer .block > h2 { + /* @extend .visually-hidden */ + position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); + overflow: hidden; + height: 1px; +} +#footer .block h2 { + margin: 0; +} +#footer-columns h2 { + border-bottom: 1px solid #555; + border-color: rgba(255, 255, 255, 0.15); + font-size: 1em; + margin-bottom: 0; + padding-bottom: 3px; + text-transform: uppercase; +} +#footer-columns .content { + margin-top: 0; +} +#footer-columns p { + margin-top: 1em; +} +#footer-columns .content ul { + list-style: none; + padding-left: 0; /* LTR */ + margin-left: 0; +} +[dir="rtl"] #footer-columns .content ul { + padding-right: 0; +} +#footer-columns .content li { + list-style: none; + margin: 0; + padding: 0; +} +#footer-columns .content li a { + display: block; + border-bottom: 1px solid #555; + border-color: rgba(255, 255, 255, 0.15); + line-height: 1.2; + padding: 0.8em 2px 0.8em 20px; /* LTR */ + text-indent: -15px; +} +[dir="rtl"] #footer-columns .content li a { + padding: 0.8em 20px 0.8em 2px; +} +#footer-columns .content li a:hover, +#footer-columns .content li a:focus { + background-color: #1f1f21; + background-color: rgba(255, 255, 255, 0.05); + text-decoration: none; +} +#footer { + letter-spacing: 0.2px; + margin-top: 30px; + border-top: 1px solid #555; + border-color: rgba(255, 255, 255, 0.15); +} +#footer .region { + margin-top: 20px; +} +#footer .block { + clear: both; +} +#footer .menu , +#footer .menu li { + list-style: none; + margin: 0; + padding: 0; +} +#footer .menu li a { + float: left; /* LTR */ + padding: 0 12px; + display: block; + border-right: 1px solid #555; /* LTR */ + border-color: rgba(255, 255, 255, 0.15); +} +[dir="rtl"] #footer .menu li a { + float: right; + border-left: 1px solid #555; + border-color: rgba(255, 255, 255, 0.15); + border-right: none; +} +#footer .menu li:first-child a { + padding-left: 0; /* LTR */ +} +[dir="rtl"] #footer .menu li:first-child a { + padding-right: 0; + padding-left: 12px; +} +#footer .menu li:last-child a { + padding-right: 0; /* LTR */ + border-right: none; /* LTR */ +} +[dir="rtl"] #footer .menu li:last-child a { + padding-left: 0; + border-left: none; +} +#footer-wrapper tr.odd { + background-color: transparent; +} +#footer-wrapper tr.even { + background-color: #2c2c2c; + background-color: rgba(0, 0, 0, 0.15); +} diff --git a/core/themes/bartik/css/components/form.css b/core/themes/bartik/css/components/form.css new file mode 100644 index 00000000000..82377adccef --- /dev/null +++ b/core/themes/bartik/css/components/form.css @@ -0,0 +1,250 @@ +/* -------------- Password Field ------------- */ + +.password-field { + margin: 0; +} + +/* -------------- Form Elements ------------- */ + +form { + margin: 0; + padding: 0; +} +fieldset { + margin: 1em 0; +} +details, +fieldset, +.filter-wrapper { + border-radius: 4px; +} +.filter-wrapper { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.filter-help a { + font-size: 0.857em; +} +.filter-wrapper .form-item label { + margin-right: 10px; +} +summary { + background: #dbdbdb; + color: #3b3b3b; + text-shadow: 0 1px 0 #fff; +} +details summary a { + color: #3b3b3b; +} +details summary a:hover, +details summary a:active, +details summary a:focus { + color: #000; +} +details .details-description { + font-style: italic; +} +label { + display: table; + font-weight: bold; +} +label[for] { + cursor: pointer; +} +input { + margin: 2px 0; + padding: 4px; + /* Keep form elements from overflowing their containers. */ + max-width: 100%; + box-sizing: border-box; +} +input, +textarea { + font-size: 0.929em; +} +textarea { + line-height: 1.5; +} +textarea.form-textarea, +select.form-select { + padding: 4px; +} +input.form-text, +input.form-tel, +input.form-email, +input.form-url, +input.form-search, +input.form-file, +input.form-number, +input.form-color, +textarea.form-textarea, +select.form-select { + border: 1px solid #ccc; + color: #3b3b3b; +} +input.form-submit:hover, +input.form-submit:focus { + background: #dedede; +} +.password-suggestions ul li { + margin-left: 1.2em; /* LTR */ +} +[dir="rtl"] .password-suggestions ul li { + margin-right: 1.2em; + margin-left: 0; +} +.form-item label { + font-size: 0.929em; +} +.form-type-radio label, +.form-type-checkbox label { + margin-left: 4px; +} +.form-type-radio .description, +.form-type-checkbox .description { + margin-left: 2px; +} +.form-actions { + padding-top: 10px; +} +/* Node Form */ +#edit-body { + margin-bottom: 2em; +} + +.node-form .form-wrapper { + margin-bottom: 2em; +} + +/* Contact Form */ +.contact-form #edit-name { + width: 75%; + border-radius: 4px; +} +.contact-form #edit-mail { + width: 75%; + border-radius: 4px; +} +.contact-form #edit-subject { + width: 75%; + border-radius: 4px; +} +.contact-form #edit-message { + width: 76.3%; + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +/* Disabled form elements */ +.form-disabled input, +.form-disabled select, +.form-disabled textarea, +.form-button-disabled, +.form-button-disabled:hover, +.form-button-disabled:active, +.form-button-disabled:focus + { + background: #ededed; + border-color: #bbb; + color: #717171; +} +.image-button-disabled, +.image-button-disabled:hover, +.image-button-disabled:active, +.image-button-disabled:focus { + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + opacity: .5; +} +.form-disabled label { + color: #717171; +} + +/* Comment form */ +.comment-form label { + float: left; /* LTR */ + font-size: 0.929em; + width: 120px; +} +[dir="rtl"] .comment-form label { + float: right; +} +.comment-form input, +.comment-form .form-select { + margin: 0; + border-radius: 4px; +} +.comment-form .form-type-textarea label { + float: none; +} +.comment-form .form-item, +.comment-form .form-radios, +.comment-form .form-type-checkbox, +.comment-form .form-select { + margin-bottom: 10px; + overflow: hidden; +} +.comment-form .form-type-checkbox, +.comment-form .form-radios { + margin-left: 120px; /* LTR */ +} +[dir="rtl"] .comment-form .form-type-checkbox, +[dir="rtl"] .comment-form .form-radios, +[dir="rtl"] .comment-form .form-item .description { + margin-left: 0; + margin-right: 120px; +} +.comment-form .form-type-checkbox label, +.comment-form .form-radios label { + float: none; + margin-top: 0; +} +.comment-form input.form-file { + width: auto; +} +.layout-no-sidebars .comment-form .form-text { + width: 800px; +} +.layout-one-sidebar .comment-form .form-text { + width: 500px; +} +.layout-two-sidebars .comment-form .form-text { + width: 320px; +} +.comment-form .form-item .description { + font-size: 0.786em; + line-height: 1.2; + margin-left: 120px; /* LTR */ +} +#content h2.comment-form { + margin-bottom: 0.5em; +} +.comment-form .form-textarea { + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} +.comment-form details.filter-wrapper .details-wrapper, +.comment-form .text-format-wrapper .form-item { + margin-top: 0; + margin-bottom: 0; +} +.filter-wrapper label { + width: auto; + float: none; +} +.filter-wrapper .form-select { + min-width: 120px; +} +.comment-form details.filter-wrapper .tips { + font-size: 0.786em; +} +#comment-body-add-more-wrapper .form-type-textarea label { + margin-bottom: 0.4em; +} +#edit-actions input { + margin-right: 0.6em; /* LTR */ +} +[dir="rtl"] #edit-actions input { + margin-left: 0.6em; + margin-right: 0; +} diff --git a/core/themes/bartik/css/components/forum.css b/core/themes/bartik/css/components/forum.css new file mode 100644 index 00000000000..689f1d9dd93 --- /dev/null +++ b/core/themes/bartik/css/components/forum.css @@ -0,0 +1,6 @@ +#forum .name { + font-size: 1.083em; +} +#forum .description { + font-size: 1em; +} diff --git a/core/themes/bartik/css/components/header.css b/core/themes/bartik/css/components/header.css new file mode 100644 index 00000000000..e7d2ffb61cf --- /dev/null +++ b/core/themes/bartik/css/components/header.css @@ -0,0 +1,195 @@ +/* ------------------ Header ------------------ */ +#logo, +.site-logo { + float: left; /* LTR */ + padding-left: 5px; /* LTR */ +} +[dir="rtl"] #logo, +[dir="rtl"] .site-logo { + padding: 15px 10px 15px 15px; +} + +#name-and-slogan, +.site-branding-text { + float: left; /* LTR */ + margin: 0; + padding: 5px 10px 8px; +} +[dir="rtl"] #name-and-slogan, +[dir="rtl"] .site-branding-text { + margin: 0 15px 30px 0; +} + +#site-name, +.site-name { + font-size: 1.6em; + color: #686868; + line-height: 1; +} +h1#site-name, +h1.site-name { + margin: 0; +} +#site-name a, +.site-name a { + font-weight: normal; +} +#site-slogan, +.site-slogan { + font-size: 0.929em; + margin-top: 7px; + word-spacing: 0.1em; + font-style: italic; +} +/* Region header blocks. */ +.region-header .block { + font-size: 0.857em; + float: left; /* LTR */ + margin: 0 10px; + padding: 0; +} +.region-header .block > h2 { + /* @extend .visually-hidden */ + position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); + overflow: hidden; + height: 1px; +} +.region-header .block .content { + margin: 0; + padding: 0; +} +.region-header .block ul { + margin: 0; + padding: 0; +} +.region-header .block li { + list-style: none; + list-style-image: none; + padding: 0; +} +.region-header .form-text { + background: #fefefe; + background: rgba(255, 255, 255, 0.7); + border-color: #ccc; + border-color: rgba(255, 255, 255, 0.3); + margin-right: 2px; /* LTR */ + width: 120px; +} +[dir="rtl"] .region-header .form-text { + margin-left: 2px; + margin-right: 0; +} +.region-header .form-text:hover, +.region-header .form-text:active, +.region-header .form-text:focus { + background: #fff; + background: rgba(255, 255, 255, 0.8); +} +.region-header .form-required:after { + background-image: url(../images/required.svg); +} +/* Region header block menus. */ +.region-header .block-menu { + border: 1px solid; + border-color: #eee; + border-color: rgba(255, 255, 255, 0.2); + padding: 0; + width: 208px; +} +.region-header .block-menu li a { + display: block; + border-bottom: 1px solid; + border-bottom-color: #eee; + border-bottom-color: rgba(255, 255, 255, 0.2); + padding: 3px 7px; +} +.region-header .block-menu li a:hover, +.region-header .block-menu li a:active, +.region-header .block-menu li a:focus { + text-decoration: none; + background: rgba(255, 255, 255, 0.15); +} +.region-header .block-menu li:last-child a { + border-bottom: 0; +} +/* User Login block in the header region */ +.region-header #block-user-login { + width: auto; +} +.region-header #block-user-login .content { + margin-top: 2px; +} +.region-header #block-user-login .form-item { + float: left; /* LTR */ + margin: 0; + padding: 0; +} +.region-header #block-user-login div.item-list, +.region-header #block-user-login div.description { + font-size: 0.916em; + margin: 0; +} +.region-header #block-user-login div.item-list { + clear: both; +} +.region-header #block-user-login div.description { + display: inline; +} +.region-header #block-user-login .item-list ul { + padding: 0; + line-height: 1; +} +.region-header #block-user-login .item-list li { + list-style: none; + float: left; /* LTR */ + padding: 3px 0 1px; +} +.region-header #block-user-login .item-list li:last-child { + padding-left: 0.5em; /* LTR */ +} +[dir="rtl"] .region-header #block-user-login .item-list li:last-child { + padding-left: 0; + padding-right: 0.5em; +} +.region-header #block-user-login .form-actions { + margin: 4px 0 0; + padding: 0; + clear: both; +} +.region-header #block-user-login input.form-submit { + border: 1px solid; + border-color: #ccc; + border-color: rgba(255, 255, 255, 0.5); + background: #eee; + background: rgba(255, 255, 255, 0.7); + margin: 4px 0; + padding: 3px 8px; +} +.region-header #block-user-login input.form-submit:hover, +.region-header #block-user-login input.form-submit:focus { + background: #fff; + background: rgba(255, 255, 255, 0.9); +} +/* Search block in region header. */ +.region-header #block-search-form { + width: 208px; +} +.region-header #block-search-form .form-text { + width: 154px; +} +/* Language switcher block in region header. */ +.region-header .block-locale ul li { + display: inline; + padding: 0 0.5em; +} + +[dir="rtl"] #logo, +[dir="rtl"] .site-logo, +[dir="rtl"] #name-and-slogan, +[dir="rtl"] .site-branding-text, +[dir="rtl"] .region-header .block, +[dir="rtl"] .region-header #block-user-login .form-item, +[dir="rtl"] .region-header #block-user-login .item-list li { + float: right; +} diff --git a/core/themes/bartik/css/components/help.css b/core/themes/bartik/css/components/help.css new file mode 100644 index 00000000000..f11e9153dd9 --- /dev/null +++ b/core/themes/bartik/css/components/help.css @@ -0,0 +1,7 @@ +/* ------------------- Help ------------------- */ + +.region-help { + border: 1px solid #d3d7d9; + padding: 0 1.5em; + margin-bottom: 30px; +} diff --git a/core/themes/bartik/css/components/highlighted.css b/core/themes/bartik/css/components/highlighted.css new file mode 100644 index 00000000000..bc32a787172 --- /dev/null +++ b/core/themes/bartik/css/components/highlighted.css @@ -0,0 +1,6 @@ +/* --------------- Highlighted ---------------- */ + +#highlighted { + border-bottom: 1px solid #d3d7d9; + font-size: 120%; +} diff --git a/core/themes/bartik/css/components/list.css b/core/themes/bartik/css/components/list.css new file mode 100644 index 00000000000..af8cc6bd185 --- /dev/null +++ b/core/themes/bartik/css/components/list.css @@ -0,0 +1,67 @@ +/* ------------------ List Styles ------------------ */ + +.block ol, +.block ul { + margin: 0; + padding: 0 0 0.25em 1em; /* LTR */ +} +[dir="rtl"] .block ol, +[dir="rtl"] .block ul { + padding: 0 1em 0.25em 0; + /* This is required to win over specifity of [dir="rtl"] ul.menu */ + margin-right: 0; +} +.contextual-region .contextual .contextual-links a { + font-size: 0.923em; + text-shadow: 0 0 0 !important; +} +.pager .pager__items { + padding: 0; +} +.pager__item { + font-size: 0.929em; + padding: 10px 15px; +} +.pager__item a { + display: inline-block; +} +.pager__item.is-active a { + color: #3B3B3B; + border-bottom: 0; +} +.pager__item--first, +.pager__item--previous { + padding: 10px 10px 10px 0; +} +.pager__item--ellipsis { + padding: 10px 0; +} +.pager__item--last, +.pager__item--next { + padding: 10px 0 10px 10px; +} +ul.menu li { + margin: 0; +} +.region-content ul, +.region-content ol { + margin: 1em 0; + padding: 0 0 0.25em 15px; /* LTR */ +} +[dir="rtl"] .region-content ul, +[dir="rtl"] .region-content ol { + padding: 0 15px 0.25em 0; +} +.item-list ul li { + margin: 0; + padding: 0.2em 0.5em 0 0; /* LTR */ +} +[dir="rtl"] .item-list ul li { + padding: 0.2em 0 0 0.5em; +} +ul.tips { + padding: 0 0 0 1.25em; /* LTR */ +} +[dir="rtl"] ul.tips { + padding: 0 1.25em 0 0; +} diff --git a/core/themes/bartik/css/components/media.css b/core/themes/bartik/css/components/media.css new file mode 100644 index 00000000000..6c43bc3c22e --- /dev/null +++ b/core/themes/bartik/css/components/media.css @@ -0,0 +1,172 @@ +/* ----------- media queries ------------------------------- */ + +@media all and (min-width: 461px) and (max-width: 900px) { + /* ------------ Header and Menus -------------------------- */ + + .region-header { + margin: .5em 5px .75em; + } + #logo, + .site-logo { + padding: 5px 0 0 5px; /* LTR */ + } + [dir="rtl"] #logo, + [dir="rtl"] .site-logo { + padding: 5px 5px 0 0; + } + #name-and-slogan, + .site-branding-text { + padding: 10px 10px 8px; + } + .region-primary-menu .menu { + margin: 0 5px; + padding: 0; + text-align: center; + } + .region-primary-menu .menu li, + body:not(:target) .region-primary-menu .menu li { + float: left; /* LTR */ + margin-right: 5px; /* LTR */ + padding: 0; + display: inline-block; + width: 32.75%; + height: auto; + overflow: visible; + } + [dir="rtl"] .region-primary-menu .menu li, + [dir="rtl"] body:not(:target) .region-primary-menu .menu li { + float: right; + margin-left: 5px; + margin-right: 0; + } + .region-primary-menu .menu li:nth-child(3n) { + margin-right: -5px; /* LTR */ + } + [dir="rtl"] .region-primary-menu .menu li:nth-child(3n) { + margin-left: -5px; + margin-right: 0; + } + .region-primary-menu .menu a { + float: none; + display: block; + border-radius: 8px; + margin-bottom: 5px; + padding: 0.9em 5px; + } + body:not(:target) .region-primary-menu .menu-toggle { + display: none; + } +} + +@media all and (min-width: 901px) { + + .region-header { + margin: 1em 5px 1.5em; + } + #logo, + .site-logo { + padding: 15px 15px 15px 10px; /* LTR */ + } + [dir="rtl"] #logo, + [dir="rtl"] .site-logo { + padding: 15px 10px 15px 15px; + } + #name-and-slogan, + .site-branding-text { + padding: 26px 0 0; + margin: 0 0 30px 15px; /* LTR */ + } + [dir="rtl"] #name-and-slogan, + [dir="rtl"] .site-branding-text { + margin: 0 15px 30px 0; + } + #site-name, + .site-name { + font-size: 1.821em; + } + .region-primary-menu .block-menu .menu { + font-size: 0.929em; + margin: 0; + padding: 0 15px; + } + .region-primary-menu .menu li, + body:not(:target) .region-primary-menu .menu li { + float: left; /* LTR */ + list-style: none; + padding: 0 1px; + margin: 0 1px; + width: auto; + height: auto; + overflow: visible; + } + [dir="rtl"] .region-primary-menu .menu li, + [dir="rtl"] body:not(:target) .region-primary-menu .menu li { + float: right; + } + .region-primary-menu .menu a { + float: left; /* LTR */ + padding: 0.7em 0.8em; + margin-bottom: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + [dir="rtl"] .region-primary-menu .menu a { + float: right; + padding: 0.7em 0.8em; + } + .featured .region-primary-menu .menu li a:active, + .featured .region-primary-menu .menu li a.active { + background: #f0f0f0; + background: rgba(240, 240, 240, 1.0); + } + body:not(:target) .region-primary-menu .menu-toggle { + display: none; + } +} + +@media all and (min-width: 520px) { + + /* ----------------- Featured ----------------- */ + #featured { + font-size: 1.643em; + } + #featured h2 { + font-size: 1.174em; + } + + /* ------------------ Triptych ----------------- */ + #triptych h2 { + font-size: 1.714em; + margin-bottom: 0.9em; + } + #triptych .block { + margin-bottom: 2em; + padding-bottom: 2em; + } +} + +/** + * Responsive tables. + */ +@media screen and (max-width: 37.5em) { /* 600px */ + th.priority-low, + td.priority-low, + th.priority-medium, + td.priority-medium { + display: none; + } +} +@media screen and (max-width: 60em) { /* 920px */ + th.priority-low, + td.priority-low { + display: none; + } +} + +/* ---------- Input fields ---------- */ +@media screen and (max-width: 60em) { /* 920px */ + input, + textarea { + font-size: 1.142857143em; + } +} diff --git a/core/themes/bartik/css/components/messages.css b/core/themes/bartik/css/components/messages.css new file mode 100644 index 00000000000..880efa1f9ca --- /dev/null +++ b/core/themes/bartik/css/components/messages.css @@ -0,0 +1,17 @@ +/* ---------------- Messages ----------------- */ + +#messages { + padding: 20px 0 5px; + margin: 0 auto; +} +.featured #messages { + background: #f0f0f0; + background: rgba(30, 50, 10, 0.08); +} +div.messages { + margin: 8px 15px 8px 23px; /* LTR */ +} +[dir="rtl"] div.messages { + margin-right: 23px; + margin-left: 15px; +} diff --git a/core/themes/bartik/css/components/node-preview.css b/core/themes/bartik/css/components/node-preview.css new file mode 100644 index 00000000000..65fd871e97c --- /dev/null +++ b/core/themes/bartik/css/components/node-preview.css @@ -0,0 +1,61 @@ +.node-preview-container { + background: #d1e8f5; + background-image: -webkit-linear-gradient(top, #d1e8f5, #d3e8f4); + background-image: linear-gradient(to bottom, #d1e8f5, #d3e8f4); + font-family: Arial, sans-serif; + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3333); + position: fixed; + z-index: 499; + width: 100%; + padding: 10px; +} +.node-preview-backlink { + background-color: #419ff1; + background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, -webkit-linear-gradient(top, #419ff1, #1076d5); + background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, linear-gradient(to bottom, #419ff1, #1076d5); /* LTR */ + border: 1px solid #0048c8; + border-radius: .4em; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); + color: #fff; + font-size: 0.9em; + line-height: normal; + margin: 0; + padding: 4px 1em 4px 0.6em; /* LTR */ + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); +} +[dir="rtl"] .node-preview-backlink { + background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, -webkit-linear-gradient(top, #419ff1, #1076d5); + background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, linear-gradient(to bottom, #419ff1, #1076d5); + padding: 4px 0.6em 4px 1em; + float: right; +} +.node-preview-backlink:focus, +.node-preview-backlink:hover { + background-color: #419cf1; + background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, -webkit-linear-gradient(top, #59abf3, #2a90ef); + background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, linear-gradient(to bottom, #59abf3, #2a90ef); /* LTR */ + border: 1px solid #0048c8; + text-decoration: none; + color: #fff; +} +[dir="rtl"] .node-preview-backlink:focus, +[dir="rtl"] .node-preview-backlink:hover { + background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, -webkit-linear-gradient(top, #59abf3, #2a90ef); + background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, linear-gradient(to bottom, #59abf3, #2a90ef); +} +.node-preview-backlink:active { + background-color: #0e69be; + background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, -webkit-linear-gradient(top, #0e69be, #2a93ef); + background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, linear-gradient(to bottom, #0e69be, #2a93ef); /* LTR */ + border: 1px solid #0048c8; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); +} +.node-preview-backlink:active { + background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, -webkit-linear-gradient(top, #0e69be, #2a93ef); + background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, linear-gradient(to bottom, #0e69be, #2a93ef); +} +.node-preview-backlink::before { + content: ''; + width: 10px; + display: inline-block; +} diff --git a/core/themes/bartik/css/components/pager.css b/core/themes/bartik/css/components/pager.css new file mode 100644 index 00000000000..6fb5a83e3c8 --- /dev/null +++ b/core/themes/bartik/css/components/pager.css @@ -0,0 +1,27 @@ +/* --------------- Pager ------------ */ + +.pager .pager__items { + padding: 0; +} +.pager__item { + font-size: 0.929em; + padding: 10px 15px; +} +.pager__item a { + display: inline-block; +} +.pager__item.is-active a { + color: #3B3B3B; + border-bottom: 0; +} +.pager__item--first, +.pager__item--previous { + padding: 10px 10px 10px 0; +} +.pager__item--ellipsis { + padding: 10px 0; +} +.pager__item--last, +.pager__item--next { + padding: 10px 0 10px 10px; +} diff --git a/core/themes/bartik/css/components/primary-menu.css b/core/themes/bartik/css/components/primary-menu.css new file mode 100644 index 00000000000..bcd0cf2a039 --- /dev/null +++ b/core/themes/bartik/css/components/primary-menu.css @@ -0,0 +1,107 @@ +/* --------------- Primary Menu ------------ */ + +.region-primary-menu { + clear: both; +} +.region-primary-menu .menu { + font-size: 0.929em; + margin: 0 5px; + padding: 0; + text-align: left; /* LTR */ +} +[dir="rtl"] .region-primary-menu .menu { + text-align: right; +} +.region-primary-menu .menu li { + float: none; + list-style: none; + margin: 0; + padding: 0; + height: auto; + width: 100%; +} +.region-primary-menu .menu a { + color: #333; + background: #ccc; + background: rgba(255, 255, 255, 0.7); + float: none; + display: block; + text-decoration: none; + text-shadow: 0 1px #eee; + border-radius: 8px; + margin: 4px 0; + padding: 0.9em 0 0.9em 10px; /* LTR */ +} +[dir="rtl"] .region-primary-menu .menu a { + padding: 0.9em 10px 0.9em 0; +} +.region-primary-menu .menu a:hover, +.region-primary-menu .menu a:focus { + background: #f6f6f2; + background: rgba(255, 255, 255, 0.95); +} +.region-primary-menu .menu a:active { + background: #b3b3b3; + background: rgba(255, 255, 255, 1); +} +.region-primary-menu .menu li a.active { + border-bottom: none; +} + +/* ---------- Primary Menu Toggle ----------- */ +/* Hide the toggle by default. */ +.menu-toggle, +.menu-toggle-target { + display: none; +} +/* Unhide it for the primary menu. */ +.region-primary-menu .menu-toggle-target { + display: inherit; + position: fixed; + top: 0; +} +.region-primary-menu .menu-toggle { + display: none; +} +body:not(:target) .region-primary-menu .menu-toggle { + color: #333; + background: #ccc; + background: rgba(255, 255, 255, 0.7); + float: none; + font-size: 0.929em; + display: block; + text-decoration: none; + text-shadow: 0 1px #eee; + padding: 0.9em 10px 0.9em 10px; + z-index: 1000; +} +body:not(:target) .region-primary-menu .menu-toggle:after { + content:""; + background: url(../../../../misc/icons/ffffff/hamburger.svg) no-repeat; + background-size: contain; + width: 22px; + height: 22px; + display: inline-block; + position: absolute; + right: 10px; /* LTR */ +} +[dir="rtl"] body:not(:target) .region-primary-menu .menu-toggle:after { + right: initial; + left: 10px; +} +body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle, +body:not(:target) .region-primary-menu .menu-toggle--hide { + display: none; +} +body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle--hide { + display: block; +} + +body:not(:target) .region-primary-menu .menu li { + height: 0; + overflow: hidden; +} +body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu li { + height: auto; + overflow: visible; +} diff --git a/core/themes/bartik/css/components/search-results.css b/core/themes/bartik/css/components/search-results.css new file mode 100644 index 00000000000..d463bf329f6 --- /dev/null +++ b/core/themes/bartik/css/components/search-results.css @@ -0,0 +1,19 @@ +/* --------------- Search Results ---------------- */ + +ol.search-results { + padding-left: 0; + list-style-position: inside; +} +.search-results li { + border-bottom: 1px solid #d3d7d9; + padding-bottom: 0.4285em; + margin-bottom: 0.5em; +} +.search-results li:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 1em; +} +.search-results .search-snippet-info { + padding-left: 0; +} diff --git a/core/themes/bartik/css/components/search.css b/core/themes/bartik/css/components/search.css new file mode 100644 index 00000000000..6de5d029115 --- /dev/null +++ b/core/themes/bartik/css/components/search.css @@ -0,0 +1,71 @@ +/* --------------- Search Form ---------------- */ + +#block-search-form { + padding-bottom: 7px; +} +#block-search-form .content { + margin-top: 0; +} +#search-form input[type="search"], +#block-search-form input[type="search"] { + box-sizing: border-box; + padding: 4px; + -webkit-appearance: textfield; +} +#search-form input[type="search"]::-webkit-search-decoration, +#block-search-form input[type="search"]::-webkit-search-decoration { + display: none; +} +#search-form input#edit-keys, +#block-search-form .form-item-search-block-form input { + float: left; /* LTR */ + font-size: 1em; + margin-right: 5px; +} +[dir="rtl"] #search-form input#edit-keys, +[dir="rtl"] #block-search-form .form-item-search-block-form input { + float: right; + margin-left: 5px; + margin-right: 0; +} +#search-block-form input.form-submit, +#search-form input.form-submit { + margin-left: 0; + margin-right: 0; + height: 25px; + width: 34px; + padding: 0; + cursor: pointer; + text-indent: -9999px; + border-color: #e4e4e4 #d2d2d2 #b4b4b4; + background: #f0f0f0 url(../../../../misc/icons/505050/loupe.svg) no-repeat center; + overflow: hidden; +} +#search-block-form input.form-submit:hover, +#search-block-form input.form-submit:focus, +#search-form input.form-submit:hover, +#search-form input.form-submit:focus { + background: #dedede url(../../../../misc/icons/424242/loupe.svg) no-repeat center; +} +#search-form .form-item-keys label { + display: block; +} + +/* --------------- Search Results ---------------- */ +ol.search-results { + padding-left: 0; + list-style-position: inside; +} +.search-results li { + border-bottom: 1px solid #d3d7d9; + padding-bottom: 0.4285em; + margin-bottom: 0.5em; +} +.search-results li:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 1em; +} +.search-results .search-snippet-info { + padding-left: 0; +} diff --git a/core/themes/bartik/css/components/secondary-menu.css b/core/themes/bartik/css/components/secondary-menu.css new file mode 100644 index 00000000000..6c4476bbbf5 --- /dev/null +++ b/core/themes/bartik/css/components/secondary-menu.css @@ -0,0 +1,24 @@ +/* --------------- Secondary Menu ------------ */ + +.region-secondary-menu .menu { + text-align: right; /* LTR */ + font-size: 0.929em; + margin: 0 10px; + padding: 0; +} +[dir="rtl"] .region-secondary-menu .menu { + text-align: left; +} +.region-secondary-menu .menu li { + margin: 0; + padding: 0; + display: inline; +} +.region-secondary-menu .menu a { + display: inline-block; + padding: 0.8em; +} +.region-secondary-menu .menu a:hover, +.region-secondary-menu .menu a:focus { + text-decoration: underline; +} diff --git a/core/themes/bartik/css/components/shortcut.css b/core/themes/bartik/css/components/shortcut.css new file mode 100644 index 00000000000..2262be82a5f --- /dev/null +++ b/core/themes/bartik/css/components/shortcut.css @@ -0,0 +1,15 @@ +/* -------------- Shortcut Links -------------- */ + +.shortcut-wrapper { + margin: 2.2em 0 1.1em 0; /* Same as usual h1#page-title margin. */ +} +.shortcut-wrapper h1#page-title { + float: left; /* LTR */ + margin: 0; +} +[dir="rtl"] .shortcut-wrapper h1#page-title { + float: right; +} +div.add-or-remove-shortcuts { + padding-top: 0.9em; +} diff --git a/core/themes/bartik/css/components/sidebar.css b/core/themes/bartik/css/components/sidebar.css new file mode 100644 index 00000000000..7f1d5d83300 --- /dev/null +++ b/core/themes/bartik/css/components/sidebar.css @@ -0,0 +1,31 @@ +/* ------------------ Sidebar ----------------- */ + +.sidebar .section { + padding-top: 10px; +} +.sidebar .block { + border-style: solid; + border-width: 1px; + padding: 15px 20px; + margin: 0 0 20px; +} +.sidebar h2 { + margin: 0 0 0.5em; + border-bottom: 1px solid #d6d6d6; + padding-bottom: 5px; + text-shadow: 0 1px 0 #fff; + font-size: 1.071em; + line-height: 1.2; +} +.sidebar .block .content { + font-size: 0.914em; + line-height: 1.4; +} +.sidebar tbody { + border: none; +} +.sidebar tr.even, +.sidebar tr.odd { + background: none; + border-bottom: 1px solid #d6d6d6; +} diff --git a/core/themes/bartik/css/components/skip-link.css b/core/themes/bartik/css/components/skip-link.css new file mode 100644 index 00000000000..f02a5c3bd66 --- /dev/null +++ b/core/themes/bartik/css/components/skip-link.css @@ -0,0 +1,29 @@ +/* ------------------ Skip link ----------------- */ + +.skip-link, +.skip-link.visually-hidden.focusable { + left: 50%; + margin-left: -5.25em; + margin-top: 0; + position: absolute !important; + width: auto; + z-index: 50; +} +.skip-link, +.skip-link:link, +.skip-link:visited { + background: #444; + background: rgba(0, 0, 0, 0.6); + color: #fff; + display: inline-block; + font-size: 0.94em; + line-height: 1.7; + padding: 1px 10px 2px 10px; + text-decoration: none; + border-radius: 0 0 10px 10px; +} +.skip-link:hover, +.skip-link:active, +.skip-link:focus { + outline: 0; +} diff --git a/core/themes/bartik/css/components/table.css b/core/themes/bartik/css/components/table.css new file mode 100644 index 00000000000..0173e347fc9 --- /dev/null +++ b/core/themes/bartik/css/components/table.css @@ -0,0 +1,66 @@ +/* ------------------ Table Styles ------------------ */ + +table { + border: 0; + border-spacing: 0; + font-size: 0.857em; + margin: 10px 0; + width: 100%; +} +table table { + font-size: 1em; +} +#footer-wrapper table { + font-size: 1em; +} +tr { + border-bottom: 1px solid #ccc; + padding: 0.1em 0.6em; + background: #efefef; + background: rgba(0, 0, 0, 0.063); +} +thead > tr { + border-bottom: 1px solid #000; +} +tr.odd { + background: #e4e4e4; + background: rgba(0, 0, 0, 0.105); +} +table tr th { + background: #757575; + background: rgba(0, 0, 0, 0.51); + border-bottom-style: none; +} +table tr th, +table tr th a, +table tr th a:hover, +table tr th a:focus { + color: #fff; + font-weight: bold; +} +table tbody tr th { + vertical-align: top; +} +tr td, +tr th { + padding: 4px 9px; + border: 1px solid #fff; + text-align: left; /* LTR */ +} +[dir="rtl"] tr td, +[dir="rtl"] tr th { + text-align: right; +} +#footer-wrapper tr td, +#footer-wrapper tr th { + border-color: #555; + border-color: rgba(255, 255, 255, 0.18); +} +table ul.links { + margin: 0; + padding: 0; + font-size: 1em; +} +table ul.links li { + padding: 0 1em 0 0; +} diff --git a/core/themes/bartik/css/components/tabs.css b/core/themes/bartik/css/components/tabs.css new file mode 100644 index 00000000000..00f8e70a414 --- /dev/null +++ b/core/themes/bartik/css/components/tabs.css @@ -0,0 +1,110 @@ +/* --------------- System Tabs --------------- */ + +div.tabs { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + margin-bottom: 20px; +} +.tabs ul.primary li a { + color: #000; + background-color: #ededed; + border-color: #bbb; + border-style: solid solid none solid; + border-width: 1px; + height: 1.8em; + line-height: 1.9; + display: block; + font-size: 0.929em; + padding: 0 10px 3px; + margin: 0; + text-shadow: 0 1px 0 #fff; +} +.tabs ul.primary li.active a { + background-color: #ffffff; + border: 1px solid #bbb; +} +@media screen and (max-width: 37.5em) { /* 600px */ + .tabs ul.primary { + border-bottom: 1px solid #bbb; + } + .tabs ul.primary li { + display: block; + margin: 0; + } + .tabs ul.primary li a { + padding: 5px 10px; + } + .tabs ul.primary li.active a { + border-bottom: none; + } +} +@media screen and (min-width: 37.5em) { /* 600px */ + .tabs ul.primary { + border-collapse: collapse; + height: auto; + line-height: normal; + padding: 0 3px; + margin: 0; + overflow: hidden; + border: none; + background: transparent url(../../images/tabs-border.png) repeat-x left bottom; + white-space: nowrap; + } + .tabs ul.primary li { + display: block; + float: left; /* LTR */ + vertical-align: bottom; + margin: 0 5px 0 0; /* LTR */ + } + [dir="rtl"] .tabs ul.primary li { + margin: 0 0 0 5px; + float: right; + zoom: 1; + } + .tabs ul.primary li a { + float: left; /* not LTR */ + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .tabs ul.primary li.active a { + border-bottom: 1px solid #fff; + } +} +.tabs ul.secondary { + border-bottom: none; + margin: 5px; + padding: 0.5em 0; +} +.tabs ul.secondary li { + border-right: 1px solid #ccc; /* LTR */ + display: block; + float: left; /* LTR */ + margin: 0; + padding: 0 1em; +} +[dir="rtl"] .tabs ul.secondary li { + border-left: 1px solid #ccc; + border-right: none; + float: right; +} +.tabs ul.secondary li:last-child { + border-right: none; /* LTR */ +} +[dir="rtl"] .tabs ul.secondary li:last-child { + border-left: none; +} +.tabs ul.secondary li:first-child { + padding-left: 0; /* LTR */ +} +[dir="rtl"] .tabs ul.secondary li:first-child { + padding-right: 0; +} +.tabs ul.secondary li a { + display: inline; + padding: 0.25em 0.5em; + text-decoration: none; +} +.tabs ul.secondary li a.active { + background: #f2f2f2; + border-bottom: none; + border-radius: 5px; +} diff --git a/core/themes/bartik/css/components/tips.css b/core/themes/bartik/css/components/tips.css new file mode 100644 index 00000000000..6d350fafa07 --- /dev/null +++ b/core/themes/bartik/css/components/tips.css @@ -0,0 +1,7 @@ +/* ----------------- Tips ----------------- */ +ul.tips { + padding: 0 0 0 1.25em; /* LTR */ +} +[dir="rtl"] ul.tips { + padding: 0 1.25em 0 0; +} diff --git a/core/themes/bartik/css/components/triptych.css b/core/themes/bartik/css/components/triptych.css new file mode 100644 index 00000000000..148f3b86e18 --- /dev/null +++ b/core/themes/bartik/css/components/triptych.css @@ -0,0 +1,55 @@ +/* ----------------- Triptych ----------------- */ + +#triptych-wrapper { + background-color: #f0f0f0; + background: rgba(30, 50, 10, 0.08); + border-top: 1px solid #e7e7e7; +} +#triptych h2 { + color: #000; + font-size: 1.4em; + margin-bottom: 0.6em; + text-shadow: 0 1px 0 #fff; + text-align: center; + line-height: 1; +} +#triptych .block { + margin-bottom: 1em; + padding-bottom: 1em; + border-bottom: 1px solid #dfdfdf; + line-height: 1.3; +} +#triptych .block:last-child { + border-bottom: none; +} +#triptych .block ul li, +#triptych .block ol li { + list-style: none; +} +#triptych .block ul, +#triptych .block ol { + padding-left: 0; +} +#triptych #block-user-login .form-text { + width: 185px; +} +#triptych #block-user-online p { + margin-bottom: 0; +} +#triptych #block-node-syndicate h2 { + overflow: hidden; + width: 0; + height: 0; +} +#triptych-last #block-node-syndicate { + text-align: right; +} +#triptych #block-search-form .form-type-search input { + width: 185px; +} +#triptych-middle #block-system-powered-by { + text-align: center; +} +#triptych-last #block-system-powered-by { + text-align: right; +} diff --git a/core/themes/bartik/css/components/user.css b/core/themes/bartik/css/components/user.css new file mode 100644 index 00000000000..3963534d53e --- /dev/null +++ b/core/themes/bartik/css/components/user.css @@ -0,0 +1,8 @@ +/* -------------- User Profile -------------- */ + +.profile .field-name-field-user-picture { + float: none; +} +div.password-suggestions { + border: 0; +} diff --git a/core/themes/bartik/css/components/vertical-tabs.component.css b/core/themes/bartik/css/components/vertical-tabs.component.css new file mode 100644 index 00000000000..21231cfe9e2 --- /dev/null +++ b/core/themes/bartik/css/components/vertical-tabs.component.css @@ -0,0 +1,5 @@ +/* Vertical Tabs Reset */ +ul.vertical-tabs-list { + margin: -1px 0 -1px -15em; + padding: 0; +} diff --git a/core/themes/bartik/css/components/views.css b/core/themes/bartik/css/components/views.css new file mode 100644 index 00000000000..e2013111999 --- /dev/null +++ b/core/themes/bartik/css/components/views.css @@ -0,0 +1,111 @@ +/* ---------- Views styling ---------- */ + +/* @group Lists */ + +.views-display-top .secondary .action-list { + padding-left: 0; /* LTR */ +} + +[dir="rtl"] .views-display-top .secondary .action-list { + padding-left: inherit; + padding-right: 0; +} + +/* @end */ + +/* @group Attachment details tabs + * + * The tabs that switch between sections + */ + +.views-displays .region-content .secondary, +.views-displays .region-content .secondary { + padding-bottom: 0; + padding-left: 0; +} + +.views-displays .secondary a { + font-size: smaller; +} + +.views-displays .secondary > li a { + border-radius: 5px; +} + +.views-displays .secondary > li.open a { + border-radius: 5px 5px 0 0; +} + +.views-displays .secondary .open > a:hover, +.views-displays .secondary .open > a:focus { + color: #0071B3; +} + +.views-displays .secondary input.form-submit { + font-size: smaller; +} + +/* @end */ + +/* @group Modal dialog box + * + * The contents of the popup dialog on the views edit form. + */ + +.views-filterable-options .filterable-option:nth-of-type(even) .form-type-checkbox { + background-color: #F9F9F9; +} + +/* @end */ + +.views-display-column .details-wrapper { + margin-top: 0; +} + +.views-display-column details summary { + background: none; + border: none; + font-family: inherit; + font-size: 13px; + line-height: inherit; + position: relative; + text-indent: 0; + text-shadow: none; + top: 3px; +} + +.views-display-columns details { + position: inherit; +} + +.views-display-columns details summary { + padding: 0 0 4px 2px; /* LTR */ +} +[dir="rtl"] .views-display-columns details summary { + padding: 0 2px 4px 0; +} + +.views-display-columns a.fieldset-title { + color: #0071B3; +} + +.views-display-columns a.fieldset-title:hover, +.views-display-columns a.fieldset-title:focus { + color: #018FE2; +} + +/* @group Dropbutton */ + +.views-ui-display-tab-actions .dropbutton input { + color: #0071B3; +} + +.views-ui-display-tab-actions .dropbutton input:hover, +.views-ui-display-tab-actions .dropbutton input:focus { + color: #018FE2; +} + +.views-ui-display-tab-actions .dropbutton input.form-submit { + margin-right: 0; + margin-top: 0; +} diff --git a/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css index 1456058e96d..b8896e9de9d 100644 --- a/core/themes/bartik/css/layout.css +++ b/core/themes/bartik/css/layout.css @@ -230,3 +230,10 @@ body, width: 25%; } } +/* ------------------- Main ------------------- */ + +#main { + margin-top: 20px; + margin-bottom: 40px; +} + diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css deleted file mode 100644 index ac08e0984ad..00000000000 --- a/core/themes/bartik/css/style.css +++ /dev/null @@ -1,2290 +0,0 @@ -/* ---------- Overall Specifications ---------- */ - -body { - line-height: 1.5; - font-size: 87.5%; - word-wrap: break-word; - margin: 0; - padding: 0; - border: 0; -} -a { - text-decoration: none; - border-bottom: 1px dotted; -} -a:hover, -a:active, -a:focus, -.link:hover, -.link:active, -.link:focus { - text-decoration: none; - border-bottom-style: solid; -} -.field-type-image a, -h1 a, -h2 a, -[role*=banner] a, -.feed-icon, -.contextual-links a, -.toolbar a { - border-bottom: none !important; -} -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 1.0em 0 0.5em; - font-weight: inherit; -} -h1 { - font-size: 1.357em; - color: #000; -} -h2 { - font-size: 1.143em; -} -h3 { - font-size: 1.092em; -} -h4 { - font-size: 1.05em; -} -h5 { - font-size: 0.889em; - text-transform: uppercase; - letter-spacing: 0.1em; -} -h6 { - font-size: 0.67em; - text-transform: uppercase; - letter-spacing: 0.1em; -} -p { - margin: 0 0 1.2em; -} -del { - text-decoration: line-through; -} - -/** - * The generic monospace font family is listed before Courier new to avoid a - * a bug in font-size rendering: - * http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing - */ -code, -pre, -kbd, -samp, -var { - padding: 0 0.4em; - font-size: 0.857em; - font-family: Menlo, Consolas, "Andale Mono", "Lucida Console", "Nimbus Mono L", "DejaVu Sans Mono", monospace, "Courier New"; -} -code { - background-color: #f2f2f2; - background-color: rgba(40, 40, 0, 0.06); -} -pre code, -pre kbd, -pre samp, -pre var, -kbd kbd, -kbd samp, -code var { - font-size: 100%; - background-color: transparent; -} -pre code, -pre samp, -pre var { - padding: 0; -} -.description code { - font-size: 1em; -} -kbd { - background-color: #f2f2f2; - border: 1px outset #575757; - margin: 0 3px; - color: #666; - display: inline-block; - padding: 0 6px; - border-radius: 5px; -} -pre { - background-color: #f2f2f2; - background-color: rgba(40, 40, 0, 0.06); - margin: 10px 0; - overflow: hidden; - padding: 15px; - white-space: pre-wrap; -} - - -/* ------------------ Fonts ------------------ */ - -body, -#site-slogan, -.site-slogan, -#page .ui-widget, -.comment-form label, -.node-form label, -.node-form .description { - font-family: Georgia, "Times New Roman", Times, serif; -} -#header, -#footer-wrapper, -.skip-link, -ul.contextual-links, -ul.links, -ul.primary, -.pager__items, -div.field-type-taxonomy-term-reference, -div.messages, -.node__meta, -p.comment-time, -table, -.breadcrumb, -.link { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -} -input, -textarea, -select, -.form-button, -a.button, -button { - font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; -} - -/* ------------------ Reset Styles ------------------ */ - -blockquote { - background: #f7f7f7; - border-left: 1px solid #bbb; - font-style: italic; - margin: 1.5em 10px; - padding: 0.5em 10px; -} -[dir="rtl"] blockquote { - border-left: none; - border-right: 4px solid #afafaf; -} -blockquote:before { - color: #bbb; - content: "\201C"; - font-size: 3em; - line-height: 0.1em; - margin-right: 0.2em; - vertical-align: -.4em; -} -[dir="rtl"] blockquote:before { - content: "\201D"; -} -blockquote:after { - color: #bbb; - content: "\201D"; - font-size: 3em; - line-height: 0.1em; - vertical-align: -.45em; -} -[dir="rtl"] blockquote:after { - content: "\201C"; -} -blockquote > p:first-child { - display: inline; -} -a.feed-icon { - display: inline-block; - padding: 15px 0 0 0; -} -img { - max-width: 100%; - height: auto; - border: 0; -} - -/* ------------------ Table Styles ------------------ */ - -table { - border: 0; - border-spacing: 0; - font-size: 0.857em; - margin: 10px 0; - width: 100%; -} -table table { - font-size: 1em; -} -#footer-wrapper table { - font-size: 1em; -} -tr { - border-bottom: 1px solid #ccc; - padding: 0.1em 0.6em; - background: #efefef; - background: rgba(0, 0, 0, 0.063); -} -thead > tr { - border-bottom: 1px solid #000; -} -tr.odd { - background: #e4e4e4; - background: rgba(0, 0, 0, 0.105); -} -table tr th { - background: #757575; - background: rgba(0, 0, 0, 0.51); - border-bottom-style: none; -} -table tr th, -table tr th a, -table tr th a:hover, -table tr th a:focus { - color: #fff; - font-weight: bold; -} -table tbody tr th { - vertical-align: top; -} -tr td, -tr th { - padding: 4px 9px; - border: 1px solid #fff; - text-align: left; /* LTR */ -} -[dir="rtl"] tr td, -[dir="rtl"] tr th { - text-align: right; -} -#footer-wrapper tr td, -#footer-wrapper tr th { - border-color: #555; - border-color: rgba(255, 255, 255, 0.18); -} -table ul.links { - margin: 0; - padding: 0; - font-size: 1em; -} -table ul.links li { - padding: 0 1em 0 0; -} - -/* ------------------ List Styles ------------------ */ - -.block ol, -.block ul { - margin: 0; - padding: 0 0 0.25em 1em; /* LTR */ -} -[dir="rtl"] .block ol, -[dir="rtl"] .block ul { - padding: 0 1em 0.25em 0; - /* This is required to win over specifity of [dir="rtl"] ul.menu */ - margin-right: 0; -} -.contextual-region .contextual .contextual-links a { - font-size: 0.923em; - text-shadow: 0 0 0 !important; -} -.pager .pager__items { - padding: 0; -} -.pager__item { - font-size: 0.929em; - padding: 10px 15px; -} -.pager__item a { - display: inline-block; -} -.pager__item.is-active a { - color: #3B3B3B; - border-bottom: 0; -} -.pager__item--first, -.pager__item--previous { - padding: 10px 10px 10px 0; -} -.pager__item--ellipsis { - padding: 10px 0; -} -.pager__item--last, -.pager__item--next { - padding: 10px 0 10px 10px; -} -ul.menu li { - margin: 0; -} -.region-content ul, -.region-content ol { - margin: 1em 0; - padding: 0 0 0.25em 15px; /* LTR */ -} -[dir="rtl"] .region-content ul, -[dir="rtl"] .region-content ol { - padding: 0 15px 0.25em 0; -} -.item-list ul li { - margin: 0; - padding: 0.2em 0.5em 0 0; /* LTR */ -} -[dir="rtl"] .item-list ul li { - padding: 0.2em 0 0 0.5em; -} -ul.tips { - padding: 0 0 0 1.25em; /* LTR */ -} -[dir="rtl"] ul.tips { - padding: 0 1.25em 0 0; -} - -/* ------------------ Header ------------------ */ -.skip-link, -.skip-link.visually-hidden.focusable { - left: 50%; - margin-left: -5.25em; - margin-top: 0; - position: absolute !important; - width: auto; - z-index: 50; -} -.skip-link, -.skip-link:link, -.skip-link:visited { - background: #444; - background: rgba(0, 0, 0, 0.6); - color: #fff; - display: inline-block; - font-size: 0.94em; - line-height: 1.7; - padding: 1px 10px 2px 10px; - text-decoration: none; - border-radius: 0 0 10px 10px; -} -.skip-link:hover, -.skip-link:active, -.skip-link:focus { - outline: 0; -} -#logo, -.site-logo { - float: left; /* LTR */ - padding-left: 5px; /* LTR */ -} -[dir="rtl"] #logo, -[dir="rtl"] .site-logo { - padding: 15px 10px 15px 15px; -} - -#name-and-slogan, -.site-branding-text { - float: left; /* LTR */ - margin: 0; - padding: 5px 10px 8px; -} -[dir="rtl"] #name-and-slogan, -[dir="rtl"] .site-branding-text { - margin: 0 15px 30px 0; -} - -#site-name, -.site-name { - font-size: 1.6em; - color: #686868; - line-height: 1; -} -h1#site-name, -h1.site-name { - margin: 0; -} -#site-name a, -.site-name a { - font-weight: normal; -} -#site-slogan, -.site-slogan { - font-size: 0.929em; - margin-top: 7px; - word-spacing: 0.1em; - font-style: italic; -} -/* Region header blocks. */ -.region-header .block { - font-size: 0.857em; - float: left; /* LTR */ - margin: 0 10px; - padding: 0; -} -.region-header .block > h2 { - /* @extend .visually-hidden */ - position: absolute !important; - clip: rect(1px, 1px, 1px, 1px); - overflow: hidden; - height: 1px; -} -.region-header .block .content { - margin: 0; - padding: 0; -} -.region-header .block ul { - margin: 0; - padding: 0; -} -.region-header .block li { - list-style: none; - list-style-image: none; - padding: 0; -} -.region-header .form-text { - background: #fefefe; - background: rgba(255, 255, 255, 0.7); - border-color: #ccc; - border-color: rgba(255, 255, 255, 0.3); - margin-right: 2px; /* LTR */ - width: 120px; -} -[dir="rtl"] .region-header .form-text { - margin-left: 2px; - margin-right: 0; -} -.region-header .form-text:hover, -.region-header .form-text:active, -.region-header .form-text:focus { - background: #fff; - background: rgba(255, 255, 255, 0.8); -} -.region-header .form-required:after { - background-image: url(../images/required.svg); -} -/* Region header block menus. */ -.region-header .block-menu { - border: 1px solid; - border-color: #eee; - border-color: rgba(255, 255, 255, 0.2); - padding: 0; - width: 208px; -} -.region-header .block-menu li a { - display: block; - border-bottom: 1px solid; - border-bottom-color: #eee; - border-bottom-color: rgba(255, 255, 255, 0.2); - padding: 3px 7px; -} -.region-header .block-menu li a:hover, -.region-header .block-menu li a:active, -.region-header .block-menu li a:focus { - text-decoration: none; - background: rgba(255, 255, 255, 0.15); -} -.region-header .block-menu li:last-child a { - border-bottom: 0; -} -/* User Login block in the header region */ -.region-header #block-user-login { - width: auto; -} -.region-header #block-user-login .content { - margin-top: 2px; -} -.region-header #block-user-login .form-item { - float: left; /* LTR */ - margin: 0; - padding: 0; -} -.region-header #block-user-login div.item-list, -.region-header #block-user-login div.description { - font-size: 0.916em; - margin: 0; -} -.region-header #block-user-login div.item-list { - clear: both; -} -.region-header #block-user-login div.description { - display: inline; -} -.region-header #block-user-login .item-list ul { - padding: 0; - line-height: 1; -} -.region-header #block-user-login .item-list li { - list-style: none; - float: left; /* LTR */ - padding: 3px 0 1px; -} -.region-header #block-user-login .item-list li:last-child { - padding-left: 0.5em; /* LTR */ -} -[dir="rtl"] .region-header #block-user-login .item-list li:last-child { - padding-left: 0; - padding-right: 0.5em; -} -.region-header #block-user-login .form-actions { - margin: 4px 0 0; - padding: 0; - clear: both; -} -.region-header #block-user-login input.form-submit { - border: 1px solid; - border-color: #ccc; - border-color: rgba(255, 255, 255, 0.5); - background: #eee; - background: rgba(255, 255, 255, 0.7); - margin: 4px 0; - padding: 3px 8px; -} -.region-header #block-user-login input.form-submit:hover, -.region-header #block-user-login input.form-submit:focus { - background: #fff; - background: rgba(255, 255, 255, 0.9); -} -/* Search block in region header. */ -.region-header #block-search-form { - width: 208px; -} -.region-header #block-search-form .form-text { - width: 154px; -} -/* Language switcher block in region header. */ -.region-header .block-locale ul li { - display: inline; - padding: 0 0.5em; -} - -[dir="rtl"] #logo, -[dir="rtl"] .site-logo, -[dir="rtl"] #name-and-slogan, -[dir="rtl"] .site-branding-text, -[dir="rtl"] .region-header .block, -[dir="rtl"] .region-header #block-user-login .form-item, -[dir="rtl"] .region-header #block-user-login .item-list li { - float: right; -} - -/* --------------- Primary Menu ------------ */ -.region-primary-menu { - clear: both; -} -.region-primary-menu .menu { - font-size: 0.929em; - margin: 0 5px; - padding: 0; - text-align: left; /* LTR */ -} -[dir="rtl"] .region-primary-menu .menu { - text-align: right; -} -.region-primary-menu .menu li { - float: none; - list-style: none; - margin: 0; - padding: 0; - height: auto; - width: 100%; -} -.region-primary-menu .menu a { - color: #333; - background: #ccc; - background: rgba(255, 255, 255, 0.7); - float: none; - display: block; - text-decoration: none; - text-shadow: 0 1px #eee; - border-radius: 8px; - margin: 4px 0; - padding: 0.9em 0 0.9em 10px; /* LTR */ -} -[dir="rtl"] .region-primary-menu .menu a { - padding: 0.9em 10px 0.9em 0; -} -.region-primary-menu .menu a:hover, -.region-primary-menu .menu a:focus { - background: #f6f6f2; - background: rgba(255, 255, 255, 0.95); -} -.region-primary-menu .menu a:active { - background: #b3b3b3; - background: rgba(255, 255, 255, 1); -} -.region-primary-menu .menu li a.active { - border-bottom: none; -} - -/* ---------- Primary Menu Toggle ----------- */ -/* Hide the toggle by default. */ -.menu-toggle, -.menu-toggle-target { - display: none; -} -/* Unhide it for the primary menu. */ -.region-primary-menu .menu-toggle-target { - display: inherit; - position: fixed; - top: 0; -} -.region-primary-menu .menu-toggle { - display: none; -} -body:not(:target) .region-primary-menu .menu-toggle { - color: #333; - background: #ccc; - background: rgba(255, 255, 255, 0.7); - float: none; - font-size: 0.929em; - display: block; - text-decoration: none; - text-shadow: 0 1px #eee; - padding: 0.9em 10px 0.9em 10px; - z-index: 1000; -} -body:not(:target) .region-primary-menu .menu-toggle:after { - content:""; - background: url(../../../misc/icons/ffffff/hamburger.svg) no-repeat; - background-size: contain; - width: 22px; - height: 22px; - display: inline-block; - position: absolute; - right: 10px; /* LTR */ -} -[dir="rtl"] body:not(:target) .region-primary-menu .menu-toggle:after { - right: initial; - left: 10px; -} -body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle, -body:not(:target) .region-primary-menu .menu-toggle--hide { - display: none; -} -body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle--hide { - display: block; -} - -body:not(:target) .region-primary-menu .menu li { - height: 0; - overflow: hidden; -} -body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu li { - height: auto; - overflow: visible; -} - -/* --------------- Secondary Menu ------------ */ - -.region-secondary-menu .menu { - text-align: right; /* LTR */ - font-size: 0.929em; - margin: 0 10px; - padding: 0; -} -[dir="rtl"] .region-secondary-menu .menu { - text-align: left; -} -.region-secondary-menu .menu li { - margin: 0; - padding: 0; - display: inline; -} -.region-secondary-menu .menu a { - display: inline-block; - padding: 0.8em; -} -.region-secondary-menu .menu a:hover, -.region-secondary-menu .menu a:focus { - text-decoration: underline; -} - -/* ------------------- Main ------------------- */ - -#main { - margin-top: 20px; - margin-bottom: 40px; -} - -/* ----------------- Featured ----------------- */ - -#featured { - text-align: center; - font-size: 1.2em; - font-weight: normal; - line-height: 1.4; - padding: 20px 10px 45px; - margin: 0; - background: #f0f0f0; - background: rgba(30, 50, 10, 0.08); - border-bottom: 1px solid #e7e7e7; - text-shadow: 1px 1px #fff; -} -#featured h2 { - font-size: 1.2em; - line-height: 1; -} -#featured p { - margin: 0; - padding: 0; -} - -/* --------------- Highlighted ---------------- */ - -#highlighted { - border-bottom: 1px solid #d3d7d9; - font-size: 120%; -} - -/* ------------------- Help ------------------- */ - -.region-help { - border: 1px solid #d3d7d9; - padding: 0 1.5em; - margin-bottom: 30px; -} - -/* ----------------- Content ------------------ */ - -.content, -.node__content { - margin-top: 10px; -} -h1#page-title { - font-size: 2em; - line-height: 1; -} -#content h2 { - margin-bottom: 2px; - font-size: 1.429em; - line-height: 1.4; -} -.node__content { - font-size: 1.071em; -} -.node--view-mode-teaser .node__content { - font-size: 1em; -} -.node--view-mode-teaser h2 { - margin-top: 0; - padding-top: 0.5em; -} -.node--view-mode-teaser h2 a { - color: #181818; -} -.node--view-mode-teaser { - border-bottom: 1px solid #d3d7d9; - margin-bottom: 30px; - padding-bottom: 15px; -} -.node--view-mode-teaser.node--sticky { - background: #f9f9f9; - background: rgba(0, 0, 0, 0.024); - border: 1px solid #d3d7d9; - padding: 0 15px 15px; -} -.node--view-mode-teaser .node__content { - clear: none; - line-height: 1.6; -} -.node__meta { - font-size: 0.857em; - color: #68696b; - margin-bottom: -5px; -} -.node__meta .field-name-field-user-picture img { - float: left; /* LTR */ - margin: 1px 20px 0 0; /* LTR */ -} -[dir="rtl"] .node__meta .field-name-field-user-picture img { - float: right; - margin-left: 20px; - margin-right: 0; -} -.field-type-taxonomy-term-reference { - margin: 0 0 1.2em; -} -.field-type-taxonomy-term-reference .field-label { - font-weight: normal; - margin: 0; - padding-right: 5px; /* LTR */ -} -[dir="rtl"] .field-type-taxonomy-term-reference .field-label { - padding-left: 5px; - padding-right: 0; -} -.field-type-taxonomy-term-reference .field-label, -.field-type-taxonomy-term-reference ul.links { - font-size: 0.8em; -} -.node--view-mode-teaser .field-type-taxonomy-term-reference .field-label, -.node--view-mode-teaser .field-type-taxonomy-term-reference ul.links { - font-size: 0.821em; -} -.field-type-taxonomy-term-reference ul.links { - padding: 0; - margin: 0; - list-style: none; -} -.field-type-taxonomy-term-reference ul.links li { - float: left; /* LTR */ - padding: 0 1em 0 0; /* LTR */ - white-space: nowrap; -} -[dir="rtl"] .field-type-taxonomy-term-reference ul.links li { - padding: 0 0 0 1em; - float: right; -} -.node__links { - text-align: right; -} -[dir="rtl"] .node__links { - text-align: left; - margin-right: 236px; - margin-left: 0; -} -.field-type-image img, -.field-name-field-user-picture img { - margin: 0 0 1em; -} -ul.links { - color: #68696b; - font-size: 0.821em; -} -.node--unpublished, -.unpublished { - padding: 20px 15px 0; -} -.node--unpublished .comment-text .comment-arrow, -.unpublished .comment-text .comment-arrow { - border-left: 1px solid #fff4f4; - border-right: 1px solid #fff4f4; -} -.node-preview-container { - background: #d1e8f5; - background-image: -webkit-linear-gradient(top, #d1e8f5, #d3e8f4); - background-image: linear-gradient(to bottom, #d1e8f5, #d3e8f4); - font-family: Arial, sans-serif; - box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3333); - position: fixed; - z-index: 499; - width: 100%; - padding: 10px; -} -.node-preview-backlink { - background-color: #419ff1; - background: url(../../../misc/icons/000000/chevron-left.svg) left no-repeat, -webkit-linear-gradient(top, #419ff1, #1076d5); - background: url(../../../misc/icons/000000/chevron-left.svg) left no-repeat, linear-gradient(to bottom, #419ff1, #1076d5); /* LTR */ - border: 1px solid #0048c8; - border-radius: .4em; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); - color: #fff; - font-size: 0.9em; - line-height: normal; - margin: 0; - padding: 4px 1em 4px 0.6em; /* LTR */ - text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); -} -[dir="rtl"] .node-preview-backlink { - background: url(../../../misc/icons/000000/chevron-right.svg) right no-repeat, -webkit-linear-gradient(top, #419ff1, #1076d5); - background: url(../../../misc/icons/000000/chevron-right.svg) right no-repeat, linear-gradient(to bottom, #419ff1, #1076d5); - padding: 4px 0.6em 4px 1em; - float: right; -} -.node-preview-backlink:focus, -.node-preview-backlink:hover { - background-color: #419cf1; - background: url(../../../misc/icons/000000/chevron-left.svg) left no-repeat, -webkit-linear-gradient(top, #59abf3, #2a90ef); - background: url(../../../misc/icons/000000/chevron-left.svg) left no-repeat, linear-gradient(to bottom, #59abf3, #2a90ef); /* LTR */ - border: 1px solid #0048c8; - text-decoration: none; - color: #fff; -} -[dir="rtl"] .node-preview-backlink:focus, -[dir="rtl"] .node-preview-backlink:hover { - background: url(../../../misc/icons/000000/chevron-right.svg) right no-repeat, -webkit-linear-gradient(top, #59abf3, #2a90ef); - background: url(../../../misc/icons/000000/chevron-right.svg) right no-repeat, linear-gradient(to bottom, #59abf3, #2a90ef); -} -.node-preview-backlink:active { - background-color: #0e69be; - background: url(../../../misc/icons/000000/chevron-left.svg) left no-repeat, -webkit-linear-gradient(top, #0e69be, #2a93ef); - background: url(../../../misc/icons/000000/chevron-left.svg) left no-repeat, linear-gradient(to bottom, #0e69be, #2a93ef); /* LTR */ - border: 1px solid #0048c8; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); -} -.node-preview-backlink:active { - background: url(../../../misc/icons/000000/chevron-right.svg) right no-repeat, -webkit-linear-gradient(top, #0e69be, #2a93ef); - background: url(../../../misc/icons/000000/chevron-right.svg) right no-repeat, linear-gradient(to bottom, #0e69be, #2a93ef); -} -.node-preview-backlink::before { - content: ''; - width: 10px; - display: inline-block; -} - -/* ----------------- Comments ----------------- */ - -.comment h2.title { - margin-bottom: 1em; -} -.comment .field-name-field-user-picture img { - margin-left: 0; /* LTR */ -} -[dir="rtl"] .comment .field-name-field-user-picture img { - margin-right: 0; -} -.comment { - margin-bottom: 20px; - display: table; - vertical-align: top; -} -.comment .attribution { - display: table-cell; - padding: 0 30px 0 0; /* LTR */ - vertical-align: top; - overflow: hidden; -} -[dir="rtl"] .comment .attribution { - float: right; - padding: 0 0 0 30px; -} -.comment .attribution img { - margin: 0; - border: 1px solid #d3d7d9; -} -.comment .attribution .username { - white-space: nowrap; -} -.comment .submitted p { - margin: 4px 0; - font-size: 1.071em; - line-height: 1.2; -} -.comment .submitted .comment-time { - font-size: 0.786em; - color: #68696b; -} -.comment .submitted .comment-permalink { - font-size: 0.786em; -} -.comment .content { - font-size: 0.929em; - line-height: 1.6; -} -.comment .comment-arrow { - background: url(../images/comment-arrow.gif) no-repeat 0 center transparent; /* LTR */ - border-left: 1px solid; - border-right: 1px solid; - height: 40px; - margin-left: -47px; /* LTR */ - margin-top: 10px; - position: absolute; - width: 20px; -} -[dir="rtl"] .comment .comment-arrow { - background-image: url(../images/comment-arrow-rtl.gif); - margin-left: 0; - margin-right: -47px; -} -.comment .comment-text { - padding: 10px 25px; - border: 1px solid #d3d7d9; - display: table-cell; - vertical-align: top; - position: relative; - width: 100%; -} -.comment .indented { - margin-left: 40px; /* LTR */ -} -[dir="rtl"] .comment .indented { - margin-right: 40px; - margin-left: 0; -} -.comment ul.links { - padding: 0 0 0.25em 0; -} -.comment ul.links li { - padding: 0 0.5em 0 0; /* LTR */ -} -[dir="rtl"] .comment ul.links li { - padding: 0 0 0.5em; -} -.comment.unpublished { - margin-right: 5px; /* LTR */ - padding: 5px 2px 5px 5px; /* LTR */ -} -[dir="rtl"] .comment.unpublished { - margin-left: 5px; - margin-right: 0; - padding: 5px 5px 5px 2px; -} -.comment.unpublished .comment-text .comment-arrow { - border-left: 1px solid #fff4f4; - border-right: 1px solid #fff4f4; -} - -.comment-footer { - display: table-row; -} - -/* ------------------ Sidebar ----------------- */ -.sidebar .section { - padding-top: 10px; -} -.sidebar .block { - border: 1px solid; - padding: 15px 20px; - margin: 0 0 20px; -} -.sidebar h2 { - margin: 0 0 0.5em; - border-bottom: 1px solid #d6d6d6; - padding-bottom: 5px; - text-shadow: 0 1px 0 #fff; - font-size: 1.071em; - line-height: 1.2; -} -.sidebar .block .content { - font-size: 0.914em; - line-height: 1.4; -} -.sidebar tbody { - border: none; -} -.sidebar tr.even, -.sidebar tr.odd { - background: none; - border-bottom: 1px solid #d6d6d6; -} - -/* ----------------- Triptych ----------------- */ - -#triptych-wrapper { - background-color: #f0f0f0; - background: rgba(30, 50, 10, 0.08); - border-top: 1px solid #e7e7e7; -} -#triptych h2 { - color: #000; - font-size: 1.4em; - margin-bottom: 0.6em; - text-shadow: 0 1px 0 #fff; - text-align: center; - line-height: 1; -} -#triptych .block { - margin-bottom: 1em; - padding-bottom: 1em; - border-bottom: 1px solid #dfdfdf; - line-height: 1.3; -} -#triptych .block:last-child { - border-bottom: none; -} -#triptych .block ul li, -#triptych .block ol li { - list-style: none; -} -#triptych .block ul, -#triptych .block ol { - padding-left: 0; -} -#triptych #block-user-login .form-text { - width: 185px; -} -#triptych #block-user-online p { - margin-bottom: 0; -} -#triptych #block-node-syndicate h2 { - overflow: hidden; - width: 0; - height: 0; -} -#triptych-last #block-node-syndicate { - text-align: right; -} -#triptych #block-search-form .form-type-search input { - width: 185px; -} -#triptych-middle #block-system-powered-by { - text-align: center; -} -#triptych-last #block-system-powered-by { - text-align: right; -} - -/* ------------------ Footer ------------------ */ - -#footer-wrapper .block .content { - color: #c0c0c0; - color: rgba(255, 255, 255, 0.65); - font-size: 0.857em; -} -#footer-wrapper .block .content a { - color: #fcfcfc; - color: rgba(255, 255, 255, 0.8); -} -#footer-wrapper .block .content a:hover, -#footer-wrapper .block .content a:focus { - color: #fefefe; - color: rgba(255, 255, 255, 0.95); -} -#footer-wrapper .block { - margin: 20px 0; - border: 1px solid #444; - border-color: rgba(255, 255, 255, 0.1); - padding: 10px; -} -#footer-columns .block-menu, -#footer .block { - margin: 0; - padding: 0; - border: none; -} -#footer .block { - margin: 0.5em 0; -} -#footer .block .content { - padding: 0.5em 0; - margin-top: 0; -} -#footer .block > h2 { - /* @extend .visually-hidden */ - position: absolute !important; - clip: rect(1px, 1px, 1px, 1px); - overflow: hidden; - height: 1px; -} -#footer .block h2 { - margin: 0; -} -#footer-columns h2 { - border-bottom: 1px solid #555; - border-color: rgba(255, 255, 255, 0.15); - font-size: 1em; - margin-bottom: 0; - padding-bottom: 3px; - text-transform: uppercase; -} -#footer-columns .content { - margin-top: 0; -} -#footer-columns p { - margin-top: 1em; -} -#footer-columns .content ul { - list-style: none; - padding-left: 0; /* LTR */ - margin-left: 0; -} -[dir="rtl"] #footer-columns .content ul { - padding-right: 0; -} -#footer-columns .content li { - list-style: none; - margin: 0; - padding: 0; -} -#footer-columns .content li a { - display: block; - border-bottom: 1px solid #555; - border-color: rgba(255, 255, 255, 0.15); - line-height: 1.2; - padding: 0.8em 2px 0.8em 20px; /* LTR */ - text-indent: -15px; -} -[dir="rtl"] #footer-columns .content li a { - padding: 0.8em 20px 0.8em 2px; -} -#footer-columns .content li a:hover, -#footer-columns .content li a:focus { - background-color: #1f1f21; - background-color: rgba(255, 255, 255, 0.05); - text-decoration: none; -} -#footer { - letter-spacing: 0.2px; - margin-top: 30px; - border-top: 1px solid #555; - border-color: rgba(255, 255, 255, 0.15); -} -#footer .region { - margin-top: 20px; -} -#footer .block { - clear: both; -} -#footer .menu , -#footer .menu li { - list-style: none; - margin: 0; - padding: 0; -} -#footer .menu li a { - float: left; /* LTR */ - padding: 0 12px; - display: block; - border-right: 1px solid #555; /* LTR */ - border-color: rgba(255, 255, 255, 0.15); -} -[dir="rtl"] #footer .menu li a { - float: right; - border-left: 1px solid #555; - border-color: rgba(255, 255, 255, 0.15); - border-right: none; -} -#footer .menu li:first-child a { - padding-left: 0; /* LTR */ -} -[dir="rtl"] #footer .menu li:first-child a { - padding-right: 0; - padding-left: 12px; -} -#footer .menu li:last-child a { - padding-right: 0; /* LTR */ - border-right: none; /* LTR */ -} -[dir="rtl"] #footer .menu li:last-child a { - padding-left: 0; - border-left: none; -} -#footer-wrapper tr.odd { - background-color: transparent; -} -#footer-wrapper tr.even { - background-color: #2c2c2c; - background-color: rgba(0, 0, 0, 0.15); -} - -/* --------------- System Tabs --------------- */ - -div.tabs { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - margin-bottom: 20px; -} -.tabs ul.primary li a { - color: #000; - background-color: #ededed; - border-color: #bbb; - border-style: solid solid none solid; - border-width: 1px; - height: 1.8em; - line-height: 1.9; - display: block; - font-size: 0.929em; - padding: 0 10px 3px; - margin: 0; - text-shadow: 0 1px 0 #fff; -} -.tabs ul.primary li.active a { - background-color: #ffffff; - border: 1px solid #bbb; -} -@media screen and (max-width: 37.5em) { /* 600px */ - .tabs ul.primary { - border-bottom: 1px solid #bbb; - } - .tabs ul.primary li { - display: block; - margin: 0; - } - .tabs ul.primary li a { - padding: 5px 10px; - } - .tabs ul.primary li.active a { - border-bottom: none; - } -} -@media screen and (min-width: 37.5em) { /* 600px */ - .tabs ul.primary { - border-collapse: collapse; - height: auto; - line-height: normal; - padding: 0 3px; - margin: 0; - overflow: hidden; - border: none; - background: transparent url(../images/tabs-border.png) repeat-x left bottom; - white-space: nowrap; - } - .tabs ul.primary li { - display: block; - float: left; /* LTR */ - vertical-align: bottom; - margin: 0 5px 0 0; /* LTR */ - } - [dir="rtl"] .tabs ul.primary li { - margin: 0 0 0 5px; - float: right; - zoom: 1; - } - .tabs ul.primary li a { - float: left; /* not LTR */ - border-top-left-radius: 6px; - border-top-right-radius: 6px; - } - .tabs ul.primary li.active a { - border-bottom: 1px solid #fff; - } -} -.tabs ul.secondary { - border-bottom: none; - margin: 5px; - padding: 0.5em 0; -} -.tabs ul.secondary li { - border-right: 1px solid #ccc; /* LTR */ - display: block; - float: left; /* LTR */ - margin: 0; - padding: 0 1em; -} -[dir="rtl"] .tabs ul.secondary li { - border-left: 1px solid #ccc; - border-right: none; - float: right; -} -.tabs ul.secondary li:last-child { - border-right: none; /* LTR */ -} -[dir="rtl"] .tabs ul.secondary li:last-child { - border-left: none; -} -.tabs ul.secondary li:first-child { - padding-left: 0; /* LTR */ -} -[dir="rtl"] .tabs ul.secondary li:first-child { - padding-right: 0; -} -.tabs ul.secondary li a { - display: inline; - padding: 0.25em 0.5em; - text-decoration: none; -} -.tabs ul.secondary li a.active { - background: #f2f2f2; - border-bottom: none; - border-radius: 5px; -} - -/* ---------------- Messages ----------------- */ - -#messages { - padding: 20px 0 5px; - margin: 0 auto; -} -.featured #messages { - background: #f0f0f0; - background: rgba(30, 50, 10, 0.08); -} -div.messages { - margin: 8px 15px 8px 23px; /* LTR */ -} -[dir="rtl"] div.messages { - margin-right: 23px; - margin-left: 15px; -} - -/* -------------- Breadcrumbs -------------- */ - -.breadcrumb { - font-size: 0.929em; -} - -/* -------------- User Profile -------------- */ - -.profile .field-name-field-user-picture { - float: none; -} - -/* -------------- Password Field ------------- */ - -.password-field { - margin: 0; -} - -/* ---------------- Buttons ---------------- */ - -.button { - background-color: #fff; - background-image: -webkit-linear-gradient(top, #f3f3f3, #e8e8e8); - background-image: linear-gradient(to bottom, #f3f3f3, #e8e8e8); - border: 1px solid #e4e4e4; - border-bottom-color: #b4b4b4; - border-left-color: #d2d2d2; - border-right-color: #d2d2d2; - color: #3a3a3a; - cursor: pointer; - font-size: 0.929em; - font-weight: normal; - text-align: center; - padding: 0.250em 1.063em; - border-radius: 1em; -} -.button:hover, -.button:active, -.button:focus { - text-decoration: none; - color: #5a5a5a; - background: #dedede; -} - -/* -------------- Form Elements ------------- */ - -form { - margin: 0; - padding: 0; -} -fieldset { - margin: 1em 0; -} -details, -fieldset, -.filter-wrapper { - border-radius: 4px; -} -.filter-wrapper { - border-top-left-radius: 0; - border-top-right-radius: 0; -} -.filter-help a { - font-size: 0.857em; -} -.filter-wrapper .form-item label { - margin-right: 10px; -} -summary { - background: #dbdbdb; - color: #3b3b3b; - text-shadow: 0 1px 0 #fff; -} -details summary a { - color: #3b3b3b; -} -details summary a:hover, -details summary a:active, -details summary a:focus { - color: #000; -} -details .details-description { - font-style: italic; -} -label { - display: table; - font-weight: bold; -} -label[for] { - cursor: pointer; -} -input { - margin: 2px 0; - padding: 4px; - /* Keep form elements from overflowing their containers. */ - max-width: 100%; - box-sizing: border-box; -} -input, -textarea { - font-size: 0.929em; -} -textarea { - line-height: 1.5; -} -textarea.form-textarea, -select.form-select { - padding: 4px; -} -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 { - border: 1px solid #ccc; - color: #3b3b3b; -} -input.form-submit:hover, -input.form-submit:focus { - background: #dedede; -} -.password-suggestions ul li { - margin-left: 1.2em; /* LTR */ -} -[dir="rtl"] .password-suggestions ul li { - margin-right: 1.2em; - margin-left: 0; -} -.form-item label { - font-size: 0.929em; -} -.form-type-radio label, -.form-type-checkbox label { - margin-left: 4px; -} -.form-type-radio .description, -.form-type-checkbox .description { - margin-left: 2px; -} -.form-actions { - padding-top: 10px; -} - -/* Node Form */ -#edit-body { - margin-bottom: 2em; -} - -.node-form .form-wrapper { - margin-bottom: 2em; -} - -/* Vertical Tabs Reset */ -ul.vertical-tabs-list { - margin: -1px 0 -1px -15em; - padding: 0; -} - -/* Contact Form */ -.contact-form #edit-name { - width: 75%; - border-radius: 4px; -} -.contact-form #edit-mail { - width: 75%; - border-radius: 4px; -} -.contact-form #edit-subject { - width: 75%; - border-radius: 4px; -} -.contact-form #edit-message { - width: 76.3%; - border-top-left-radius: 4px; - border-top-right-radius: 4px; -} - -/* Disabled form elements */ -.form-disabled input, -.form-disabled select, -.form-disabled textarea, -.form-button-disabled, -.form-button-disabled:hover, -.form-button-disabled:active, -.form-button-disabled:focus - { - background: #ededed; - border-color: #bbb; - color: #717171; -} -.image-button-disabled, -.image-button-disabled:hover, -.image-button-disabled:active, -.image-button-disabled:focus { - -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - filter: alpha(opacity=50); - opacity: .5; -} -.form-disabled label { - color: #717171; -} - -/* Comment form */ -.comment-form label { - float: left; /* LTR */ - font-size: 0.929em; - width: 120px; -} -[dir="rtl"] .comment-form label { - float: right; -} -.comment-form input, -.comment-form .form-select { - margin: 0; - border-radius: 4px; -} -.comment-form .form-type-textarea label { - float: none; -} -.comment-form .form-item, -.comment-form .form-radios, -.comment-form .form-type-checkbox, -.comment-form .form-select { - margin-bottom: 10px; - overflow: hidden; -} -.comment-form .form-type-checkbox, -.comment-form .form-radios { - margin-left: 120px; /* LTR */ -} -[dir="rtl"] .comment-form .form-type-checkbox, -[dir="rtl"] .comment-form .form-radios, -[dir="rtl"] .comment-form .form-item .description { - margin-left: 0; - margin-right: 120px; -} -.comment-form .form-type-checkbox label, -.comment-form .form-radios label { - float: none; - margin-top: 0; -} -.comment-form input.form-file { - width: auto; -} -.layout-no-sidebars .comment-form .form-text { - width: 800px; -} -.layout-one-sidebar .comment-form .form-text { - width: 500px; -} -.layout-two-sidebars .comment-form .form-text { - width: 320px; -} -.comment-form .form-item .description { - font-size: 0.786em; - line-height: 1.2; - margin-left: 120px; /* LTR */ -} -#content h2.comment-form { - margin-bottom: 0.5em; -} -.comment-form .form-textarea { - border-top-left-radius: 4px; - border-top-right-radius: 4px; -} -.comment-form details.filter-wrapper .details-wrapper, -.comment-form .text-format-wrapper .form-item { - margin-top: 0; - margin-bottom: 0; -} -.filter-wrapper label { - width: auto; - float: none; -} -.filter-wrapper .form-select { - min-width: 120px; -} -.comment-form details.filter-wrapper .tips { - font-size: 0.786em; -} -#comment-body-add-more-wrapper .form-type-textarea label { - margin-bottom: 0.4em; -} -#edit-actions input { - margin-right: 0.6em; /* LTR */ -} -[dir="rtl"] #edit-actions input { - margin-left: 0.6em; - margin-right: 0; -} - -/* -------------- Other Overrides ------------- */ - -div.password-suggestions { - border: 0; -} -#forum .name { - font-size: 1.083em; -} -#forum .description { - font-size: 1em; -} -#header .contextual .trigger, -#footer-wrapper .contextual .trigger { - border: none; -} - -/* ---------- Color Form ----------- */ - -[dir="rtl"] .color-form #palette { - margin-left: 0; - margin-right: 20px; -} -[dir="rtl"] .color-form .form-item label { - float: right; -} -[dir="rtl"] .color-form #palette .lock { - right: -20px; - left: 0; -} - -/* --------------- Search Form ---------------- */ - -#block-search-form { - padding-bottom: 7px; -} -#block-search-form .content { - margin-top: 0; -} -#search-form input[type="search"], -#block-search-form input[type="search"] { - box-sizing: border-box; - padding: 4px; - -webkit-appearance: textfield; -} -#search-form input[type="search"]::-webkit-search-decoration, -#block-search-form input[type="search"]::-webkit-search-decoration { - display: none; -} -#search-form input#edit-keys, -#block-search-form .form-item-search-block-form input { - float: left; /* LTR */ - font-size: 1em; - margin-right: 5px; -} -[dir="rtl"] #search-form input#edit-keys, -[dir="rtl"] #block-search-form .form-item-search-block-form input { - float: right; - margin-left: 5px; - margin-right: 0; -} -#search-block-form input.form-submit, -#search-form input.form-submit { - margin-left: 0; - margin-right: 0; - height: 25px; - width: 34px; - padding: 0; - cursor: pointer; - text-indent: -9999px; - border-color: #e4e4e4 #d2d2d2 #b4b4b4; - background: #f0f0f0 url(../../../misc/icons/505050/loupe.svg) no-repeat center; - overflow: hidden; -} -#search-block-form input.form-submit:hover, -#search-block-form input.form-submit:focus, -#search-form input.form-submit:hover, -#search-form input.form-submit:focus { - background: #dedede url(../../../misc/icons/424242/loupe.svg) no-repeat center; -} -#search-form .form-item-keys label { - display: block; -} - -/* --------------- Search Results ---------------- */ -ol.search-results { - padding-left: 0; - list-style-position: inside; -} -.search-results li { - border-bottom: 1px solid #d3d7d9; - padding-bottom: 0.4285em; - margin-bottom: 0.5em; -} -.search-results li:last-child { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 1em; -} -.search-results .search-snippet-info { - padding-left: 0; -} - -/* -------------- Captions -------------- */ -.caption { - margin-bottom: 1.2em; -} -.caption > * { - background: #F3F3F3; - padding: 0.5ex; - border: 1px solid #CCC; -} -.caption > figcaption { - border: 1px solid #CCC; - border-top: none; - padding-top: 0.5ex; - font-size: small; - text-align: center; -} - -/* Override Bartik's default blockquote and pre styles when captioned. */ -.caption-pre > pre, -.caption-blockquote > blockquote { - margin: 0; -} -.caption-blockquote > figcaption::before { - content: "— "; -} -.caption-blockquote > figcaption { - text-align: left; -} -[dir="rtl"] .caption-blockquote > figcaption { - text-align: right; -} - -/* -------------- Shortcut Links -------------- */ - -.shortcut-wrapper { - margin: 2.2em 0 1.1em 0; /* Same as usual h1#page-title margin. */ -} -.shortcut-wrapper h1#page-title { - float: left; /* LTR */ - margin: 0; -} -[dir="rtl"] .shortcut-wrapper h1#page-title { - float: right; -} -div.add-or-remove-shortcuts { - padding-top: 0.9em; -} - -/* ---------- Admin-specific Theming ---------- */ -.path-admin #content img { - margin-right: 15px; /* LTR */ -} -.path-admin #content .simpletest-image img { - margin: 0; -} -.path-admin #admin-dblog img { - margin: 0 5px; -} - -/* Block demo mode */ -.demo-block { - background: #ffff66; - border: 1px dotted #9f9e00; - color: #000; - font: 90% "Lucida Grande", "Lucida Sans Unicode", sans-serif; - margin: 5px; - padding: 5px; - text-align: center; - text-shadow: none; -} -#featured .demo-block { - font-size: 0.55em; -} -#header .demo-block { - width: 500px; -} - -/* Configuration. */ -div.admin-panel { - background: #fbfbfb; - border: 1px solid #ccc; - margin: 10px 0; - padding: 0 5px 5px; -} -div.admin-panel h3 { - margin: 16px 7px; -} -div.admin-panel dt { - border-top: 1px solid #ccc; - padding: 7px 0 0; -} -div.admin-panel dd { - margin: 0 0 10px; -} -div.admin-panel .description { - margin: 0 0 14px 7px; -} - -/* ---------- book ----------- */ -.book-navigation .menu { - border-top: 1px solid #d6d6d6; -} -.book-navigation .book-pager { - border-bottom: 1px solid #d6d6d6; - border-top: 1px solid #d6d6d6; - margin: 0; -} - -/* ---------- Dropbutton ----------- */ -.js .dropbutton-multiple.open .dropbutton-widget { - border-radius: 1em; -} -.js .dropbutton-widget { - position: relative !important; - border: 1px solid #e4e4e4; - border-bottom-color: #b4b4b4; - border-left-color: #d2d2d2; - border-right-color: #d2d2d2; - background-color: #fff; - background-image: -webkit-linear-gradient(top, #f3f3f3, #e8e8e8); - background-image: linear-gradient(to bottom, #f3f3f3, #e8e8e8); - color: #3a3a3a; - cursor: pointer; - text-align: center; - margin: 0.125em 0; - border-radius: 1em; -} -.js .dropbutton-widget:hover { - border-top-color: #e4e4e4; - border-bottom-color: #b4b4b4; - border-left-color: #d2d2d2; - border-right-color: #d2d2d2; -} -.js .dropbutton-widget .button { - border: none; - margin: 0; - padding: 0.32em 1em; - width: 100%; - border-radius: 1em; -} -.js .dropbutton-widget .button:hover { - border-radius: 1em 0 0 1em; -} -[dir="rtl"].js .dropbutton-widget .button:hover { - border-radius: 0 1em 1em 0; -} -.js .dropbutton-single .dropbutton-widget .dropbutton-action a { - color: #3a3a3a; -} -.js .dropbutton-single .dropbutton-widget .dropbutton-action a:hover { - background: #dedede; - border-radius: 1em; -} -.js .dropbutton-multiple .dropbutton-widget .dropbutton-action a { - color: #3a3a3a; - margin-right: 0; -} -[dir="rtl"].js .dropbutton-multiple .dropbutton-widget .dropbutton-action a { - margin-left: 0; -} -.js .dropbutton-multiple .dropbutton-widget .dropbutton-action a:hover { - background: #dedede; -} -.js .dropbutton-multiple .dropbutton-widget .dropbutton-action:first-child a:hover { - border-radius: 1em 0 0 1em; /* LTR */ -} -[dir="rtl"].js .dropbutton-multiple .dropbutton-widget .dropbutton-action:first-child a:hover { - border-radius: 0 1em 1em 0; -} -.js .dropbutton-multiple.open .dropbutton-widget .dropbutton-action:first-child a:hover { - border-radius: 1em 0 0 0; /* LTR */ -} -[dir="rtl"].js .dropbutton-multiple.open .dropbutton-widget .dropbutton-action:first-child a:hover { - border-radius: 0 1em 0 0; -} -.js .dropdown-widget .publish .button { - border-radius: 1em 0 0 1em; /* LTR */ -} -[dir="rtl"].js .dropbutton-widget .publish .button { - border-radius: 0 1em 1em 0; -} -.js .dropbutton-multiple.open .dropbutton-action:first-child a, -.js .dropbutton-multiple.open .dropbutton-action:first-child .button { - border-radius: 1em 0 0 0; /* LTR */ -} -[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child a, -[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child .button { - border-radius: 0 1em 0 0; -} -.js .dropbutton-multiple.open .dropbutton-action:last-child a, -.js .dropbutton-multiple.open .dropbutton-action:last-child .button { - border-radius: 0 0 0 1em; /* LTR */ -} -[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child a, -[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child .button { - border-radius: 0 0 1em 0; -} -.js .dropbutton .secondary-action { - border-top-color: #ccc; -} -.js .dropbutton-toggle button { - border-radius: 0 1em 1em 0; /* LTR */ - background-color: #e8e8e8; - background-image: -webkit-linear-gradient(top, #e8e8e8, #d2d2d2); - background-image: linear-gradient(to bottom, #e8e8e8, #d2d2d2); -} -[dir="rtl"].js .dropbutton-toggle button { - border-radius: 1em 0 0 1em; -} -.js .dropbutton-toggle .button:hover { - background: #ccc; -} - -.js .dropbutton a { - border-bottom: none; -} -.js .dropbutton a:hover { - border-bottom-style: none; -} - -/* ----------- media queries ------------------------------- */ - -@media all and (min-width: 461px) and (max-width: 900px) { - /* ------------ Header and Menus -------------------------- */ - - .region-header { - margin: .5em 5px .75em; - } - #logo, - .site-logo { - padding: 5px 0 0 5px; /* LTR */ - } - [dir="rtl"] #logo, - [dir="rtl"] .site-logo { - padding: 5px 5px 0 0; - } - #name-and-slogan, - .site-branding-text { - padding: 10px 10px 8px; - } - .region-primary-menu .menu { - margin: 0 5px; - padding: 0; - text-align: center; - } - .region-primary-menu .menu li, - body:not(:target) .region-primary-menu .menu li { - float: left; /* LTR */ - margin-right: 5px; /* LTR */ - padding: 0; - display: inline-block; - width: 32.75%; - height: auto; - overflow: visible; - } - [dir="rtl"] .region-primary-menu .menu li, - [dir="rtl"] body:not(:target) .region-primary-menu .menu li { - float: right; - margin-left: 5px; - margin-right: 0; - } - .region-primary-menu .menu li:nth-child(3n) { - margin-right: -5px; /* LTR */ - } - [dir="rtl"] .region-primary-menu .menu li:nth-child(3n) { - margin-left: -5px; - margin-right: 0; - } - .region-primary-menu .menu a { - float: none; - display: block; - border-radius: 8px; - margin-bottom: 5px; - padding: 0.9em 5px; - } - body:not(:target) .region-primary-menu .menu-toggle { - display: none; - } -} - -@media all and (min-width: 901px) { - - .region-header { - margin: 1em 5px 1.5em; - } - #logo, - .site-logo { - padding: 15px 15px 15px 10px; /* LTR */ - } - [dir="rtl"] #logo, - [dir="rtl"] .site-logo { - padding: 15px 10px 15px 15px; - } - #name-and-slogan, - .site-branding-text { - padding: 26px 0 0; - margin: 0 0 30px 15px; /* LTR */ - } - [dir="rtl"] #name-and-slogan, - [dir="rtl"] .site-branding-text { - margin: 0 15px 30px 0; - } - #site-name, - .site-name { - font-size: 1.821em; - } - .region-primary-menu .block-menu .menu { - font-size: 0.929em; - margin: 0; - padding: 0 15px; - } - .region-primary-menu .menu li, - body:not(:target) .region-primary-menu .menu li { - float: left; /* LTR */ - list-style: none; - padding: 0 1px; - margin: 0 1px; - width: auto; - height: auto; - overflow: visible; - } - [dir="rtl"] .region-primary-menu .menu li, - [dir="rtl"] body:not(:target) .region-primary-menu .menu li { - float: right; - } - .region-primary-menu .menu a { - float: left; /* LTR */ - padding: 0.7em 0.8em; - margin-bottom: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - [dir="rtl"] .region-primary-menu .menu a { - float: right; - padding: 0.7em 0.8em; - } - .featured .region-primary-menu .menu li a:active, - .featured .region-primary-menu .menu li a.active { - background: #f0f0f0; - background: rgba(240, 240, 240, 1.0); - } - body:not(:target) .region-primary-menu .menu-toggle { - display: none; - } -} - -@media all and (min-width: 520px) { - - /* ----------------- Featured ----------------- */ - #featured { - font-size: 1.643em; - } - #featured h2 { - font-size: 1.174em; - } - - /* ------------------ Triptych ----------------- */ - #triptych h2 { - font-size: 1.714em; - margin-bottom: 0.9em; - } - #triptych .block { - margin-bottom: 2em; - padding-bottom: 2em; - } -} - -/** - * Responsive tables. - */ -@media screen and (max-width: 37.5em) { /* 600px */ - th.priority-low, - td.priority-low, - th.priority-medium, - td.priority-medium { - display: none; - } -} -@media screen and (max-width: 60em) { /* 920px */ - th.priority-low, - td.priority-low { - display: none; - } -} - -/* ---------- Input fields ---------- */ -@media screen and (max-width: 60em) { /* 920px */ - input, - textarea { - font-size: 1.142857143em; - } -} - -/* ---------- Views styling ---------- */ - -/* @group Lists */ - -.views-display-top .secondary .action-list { - padding-left: 0; /* LTR */ -} - -[dir="rtl"] .views-display-top .secondary .action-list { - padding-left: inherit; - padding-right: 0; -} - -/* @end */ - -/* @group Attachment details tabs - * - * The tabs that switch between sections - */ - -.views-displays .region-content .secondary, -.views-displays .region-content .secondary { - padding-bottom: 0; - padding-left: 0; -} - -.views-displays .secondary a { - font-size: smaller; -} - -.views-displays .secondary > li a { - border-radius: 5px; -} - -.views-displays .secondary > li.open a { - border-radius: 5px 5px 0 0; -} - -.views-displays .secondary .open > a:hover, -.views-displays .secondary .open > a:focus { - color: #0071B3; -} - -.views-displays .secondary input.form-submit { - font-size: smaller; -} - -/* @end */ - -/* @group Modal dialog box - * - * The contents of the popup dialog on the views edit form. - */ - -.views-filterable-options .filterable-option:nth-of-type(even) .form-type-checkbox { - background-color: #F9F9F9; -} - -/* @end */ - -.views-display-column .details-wrapper { - margin-top: 0; -} - -.views-display-column details summary { - background: none; - border: none; - font-family: inherit; - font-size: 13px; - line-height: inherit; - position: relative; - text-indent: 0; - text-shadow: none; - top: 3px; -} - -.views-display-columns details { - position: inherit; -} - -.views-display-columns details summary { - padding: 0 0 4px 2px; /* LTR */ -} -[dir="rtl"] .views-display-columns details summary { - padding: 0 2px 4px 0; -} - -.views-display-columns a.fieldset-title { - color: #0071B3; -} - -.views-display-columns a.fieldset-title:hover, -.views-display-columns a.fieldset-title:focus { - color: #018FE2; -} - -/* @group Dropbutton */ - -.views-ui-display-tab-actions .dropbutton input { - color: #0071B3; -} - -.views-ui-display-tab-actions .dropbutton input:hover, -.views-ui-display-tab-actions .dropbutton input:focus { - color: #018FE2; -} - -.views-ui-display-tab-actions .dropbutton input.form-submit { - margin-right: 0; - margin-top: 0; -} - -/* @end */