/** * @file * Basic styling for common markup. */ /** * Publishing status. */ .node--unpublished { background-color: #fff4f4; } .node--preview { background-color: #ffffea; } /** * Markup generated by theme_tablesort_indicator(). */ th.active img { display: inline; } td.active { background-color: #ddd; } /** * Markup generated by theme_item_list(). */ .item-list .title { font-weight: bold; } .item-list ul { margin: 0 0 0.75em 0; padding: 0; } .item-list ul li { margin: 0 0 0.25em 1.5em; /* LTR */ padding: 0; } [dir="rtl"] .item-list ul li { margin: 0 1.5em 0.25em 0; } /** * Markup generated by Form API. */ .form-item, .form-actions { margin-top: 1em; margin-bottom: 1em; } tr.odd .form-item, tr.even .form-item { margin-top: 0; margin-bottom: 0; white-space: nowrap; } .form-composite > .fieldset-wrapper > .description, .form-item .description { font-size: 0.85em; } label.option { display: inline; font-weight: normal; } .form-composite > legend, h4.label { font-size: inherit; font-weight: bold; margin: 0; padding: 0; } .form-checkboxes .form-item, .form-radios .form-item { margin-top: 0.4em; margin-bottom: 0.4em; } .form-type-radio .description, .form-type-checkbox .description { margin-left: 2.4em; } .marker { color: #e00; } .form-required:after { color: #e00; /* Use a Unicode symbol to prevent screen-readers from announcing the text. */ content: " \204E "; line-height: 1; vertical-align: super; } abbr.tabledrag-changed, abbr.ajax-changed { border-bottom: none; } .form-item input.error, .form-item textarea.error, .form-item select.error { border: 2px solid red; } .button, .image-button { margin-left: 1em; margin-right: 1em; } .button:first-child, .image-button:first-child { margin-left: 0; margin-right: 0; } /** * Inline items. */ .container-inline label:after { content: ':'; } .form-type-radios .container-inline label:after { content: ''; } .form-type-radios .container-inline .form-type-radio { margin: 0 1em; } .container-inline .form-actions, .container-inline.form-actions { margin-top: 0; margin-bottom: 0; } /** * Markup generated by theme_more_link(). */ .more-link { display: block; text-align: right; /* LTR */ } [dir="rtl"] .more-link { text-align: left; } /** * More help link style. */ .more-help-link { text-align: right; /* LTR */ } [dir="rtl"] .more-help-link { text-align: left; } .more-help-link a { background: url(../../../misc/help.png) 0 50% no-repeat; /* LTR */ padding: 1px 0 1px 20px; /* LTR */ } [dir="rtl"] .more-help-link a { background-position: 100% 50%; padding: 1px 20px 1px 0; } /** * Markup generated by pager.html.twig. */ .item-list .pager { clear: both; text-align: center; } .item-list .pager li { background-image: none; display: inline; list-style-type: none; padding: 0.5em; } .pager-current { font-weight: bold; } /** * Show buttons as links. */ button.link { background: transparent; border: 0; cursor: pointer; margin: 0; padding: 0; font-size: 1em; } label button.link { font-weight: bold; } /* * Autocomplete. * * @see autocomplete.js */ /* Suggestion list */ .ui-autocomplete li.ui-menu-item a.ui-state-focus, .autocomplete li.ui-menu-item a.ui-state-hover { background: #0072b9; color: #fff; margin: 0; } /** * Collapsible details. * * @see collapse.js * @thanks http://nicolasgallagher.com/css-background-image-hacks/ */ details { border: 1px solid #ccc; margin-top: 1em; margin-bottom: 1em; } details > .details-wrapper { padding: 0.5em 1.5em; } /* @todo Regression: The summary of uncollapsible details are no longer vertically aligned with the .details-wrapper in browsers without native details support. */ summary { cursor: pointer; padding: 0.2em 0.5em; } .collapse-processed > summary { padding-left: 0.5em; padding-right: 0.5em; } .collapse-processed > summary:before { background: url(../../../misc/menu-expanded.png) 0px 100% no-repeat; /* LTR */ content: ""; float: left; height: 1em; width: 1em; } [dir="rtl"] .collapse-processed > summary:before { background-position: 100% 100%; float: right; } .collapse-processed:not([open]) > summary:before { background-position: 25% 35%; /* LTR */ -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } [dir="rtl"] .collapse-processed:not([open]) > summary:before { background-position: 75% 35%; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } /** * TableDrag behavior. * * @see tabledrag.js */ tr.drag { background-color: #fffff0; } tr.drag-previous { background-color: #ffd; } body div.tabledrag-changed-warning { margin-bottom: 0.5em; } /** * TableSelect behavior. * * @see tableselect.js */ tr.selected td { background: #ffc; } td.checkbox, th.checkbox { text-align: center; } /** * Progress bar. * * @see progress.js */ .progress__track { border-color: #b3b3b3; border-radius: 10em; background-color: #f2f1eb; background-image: -webkit-linear-gradient(#e7e7df, #f0f0f0); background-image: -moz-linear-gradient(#e7e7df, #f0f0f0); background-image: -o-linear-gradient(#e7e7df, #f0f0f0); background-image: linear-gradient(#e7e7df, #f0f0f0); box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.16); } .progress__bar { border: 1px #07629a solid; background: #057ec9; background-image: -webkit-linear-gradient( top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15) ), -webkit-linear-gradient( left top, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100% ); background-image: -moz-linear-gradient( top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15) ), -moz-linear-gradient( left top, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100% ); background-image: -o-linear-gradient( top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15) ), -o-linear-gradient( left top, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100% ); background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15) ), linear-gradient( to right bottom, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100% ); background-size: 40px 40px; margin-top: -1px; margin-left: -1px; padding: 0 1px; height: 16px; border-radius: 10em; -webkit-animation: animate-stripes 3s linear infinite; -moz-animation: animate-stripes 3s linear infinite; -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -ms-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out; } /** * Progress bar animations. */ @-webkit-keyframes animate-stripes { 0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;} } @-moz-keyframes animate-stripes { 0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;} } @-o-keyframes animate-stripes { 0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;} } @-ms-keyframes animate-stripes { 0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;} } @keyframes animate-stripes { 0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;} } /** * Markup generated by theme_menu_tree(). */ ul.menu { list-style: none outside; margin-left: 1em; /* LTR */ padding: 0; text-align: left; /* LTR */ } [dir="rtl"] ul.menu { margin-left: 0; margin-right: 1em; text-align: right; } .menu .expanded { list-style-image: url(../../../misc/menu-expanded.png); list-style-type: circle; } .menu .collapsed { list-style-image: url(../../../misc/menu-collapsed.png); /* LTR */ list-style-type: disc; } [dir="rtl"] .menu .collapsed { list-style-image: url(../../misc/menu-collapsed-rtl.png); } ul.menu li { padding-top: 0.2em; margin: 0; } ul.menu a.active { color: #000; } /** * Markup generated by links.html.twig. */ ul.inline, ul.links.inline { display: inline; padding-left: 0; } ul.inline li { display: inline; list-style-type: none; padding: 0 0.5em; } ul.links a.active { color: #000; } /** * Markup generated by theme_breadcrumb(). */ .breadcrumb { padding-bottom: 0.5em; } .breadcrumb ol { margin: 0; padding: 0; } .breadcrumb li { display: inline; list-style-type: none; margin: 0; padding: 0; } /* IE8 does not support :not() and :last-child. */ .breadcrumb li:before { content: ' ยป '; } .breadcrumb li:first-child:before { content: none; } /** * Markup generated by theme_menu_local_tasks(). */ div.tabs { margin: 1em 0; } ul.tabs { list-style: none; margin: 0 0 0.5em; padding: 0; } .tabs > li { display: inline-block; margin-right: 0.3em; /* LTR */ } [dir="rtl"] .tabs > li { margin-left: 0.3em; margin-right: 0; } .tabs a { display: block; padding: 0.2em 1em; text-decoration: none; } .tabs a.active { background-color: #eee; } .tabs a:focus, .tabs a:hover { background-color: #f5f5f5; } /** * Styles for link buttons and action links. */ .action-links { list-style: none; padding: 0; margin: 1em 0; } .action-links li { display: inline-block; margin: 0 0.3em; } .action-links li:first-child { margin-left: 0; /* LTR */ } [dir="rtl"] .action-links li:first-child { margin-left: 0.3em; margin-right: 0; } .button-action { display: inline-block; line-height: 160%; padding: 0.2em 0.5em 0.3em; text-decoration: none; } .button-action:before { content: '+'; font-weight: 900; margin-left: -0.1em; /* LTR */ padding-right: 0.2em; /* LTR */ } [dir="rtl"] .button-action:before { margin-left: 0; margin-right: -0.1em; padding-left: 0.2em; padding-right: 0; } /** * Styles for system messages. */ .messages { background: no-repeat 10px 18px; /* LTR */ border: 1px solid; border-width: 1px 1px 1px 0; /* LTR */ border-radius: 2px; padding: 15px 20px 15px 35px; /* LTR */ word-wrap: break-word; overflow-wrap: break-word; } [dir="rtl"] .messages { border-width: 1px 0 1px 1px; background-position-x: 99%; padding-left: 20px; padding-right: 35px; text-align: right; } .messages + .messages { margin-top: 1.538em; } .messages__list { list-style: none; padding: 0; margin: 0; } .messages__item + .messages__item { margin-top: 0.769em; } /* @TODO Separate tables and messages styling */ .messages--status { border-color: #c9e1bd #c9e1bd #c9e1bd transparent; /* LTR */ background-image: url(../../../misc/icons/73b355/check.svg); background-position: 12px 19px; /* LTR */ box-shadow: -8px 0 0 #77b259; /* LTR */ margin-left: 8px; /* LTR */ } [dir="rtl"] .messages--status { background-position: 99.3% 19px; border-color: #c9e1bd transparent #c9e1bd #c9e1bd; box-shadow: 8px 0 0 #77b259; margin-right: 8px; } .no-svg .messages--status { background-image: url(../../../misc/icons/73b355/check.png); } .messages--status, .ok { color: #325e1c; } .messages--status, table tr.ok { background-color: #f3faef; } .messages--warning { background-image: url(../../../misc/icons/e29700/warning.svg); border-color: #f4daa6 #f4daa6 #f4daa6 transparent; /* LTR */ box-shadow: -8px 0 0 #e09600; /* LTR */ } [dir="rtl"] .messages--warning { border-color: #f4daa6 transparent #f4daa6 #f4daa6; box-shadow: 8px 0 0 #e09600; } .no-svg .messages--warning { background-image: url(../../../misc/icons/e29700/warning.png); } .messages--warning, .warning { color: #734c00; } .messages--warning, table tr.warning { background-color: #fdf8ed; } .messages--error { background-image: url(../../../misc/icons/ea2800/error.svg); border-color: #f9c9bf #f9c9bf #f9c9bf transparent; /* LTR */ box-shadow: -8px 0 0 #e62600; /* LTR */ } [dir="rtl"] .messages--error { border-color: #f9c9bf transparent #f9c9bf #f9c9bf; box-shadow: -8px 0 0 #e62600; } .no-svg .messages--error { background-image: url(../../../misc/icons/ea2800/error.png); } .messages--error, .error { color: #a51b00; } .messages--error, table tr.error { background-color: #fcf4f2; } .messages--error p.error { color: #a51b00; } /* Field display */ .field .field-label { font-weight: bold; } .field-label-inline .field-label, .field-label-inline .field-items { float:left; /*LTR*/ padding-right: 0.5em; } [dir="rtl"] .field-label-inline .field-label, [dir="rtl"] .field-label-inline .field-items { float: right; padding-left: 0.5em; } /* Form display */ form .field-edit-link { margin: 0 0.3em; } form .field-multiple-table { margin: 0; } form .field-multiple-table .field-multiple-drag { width: 30px; padding-right: 0; /*LTR*/ } [dir="rtl"] form .field-multiple-table .field-multiple-drag { padding-left: 0; } form .field-multiple-table .field-multiple-drag .tabledrag-handle { padding-right: .5em; /*LTR*/ } [dir="rtl"] form .field-multiple-table .field-multiple-drag .tabledrag-handle { padding-left: .5em; } form .field-add-more-submit { margin: .5em 0 0; }