Initial Drupal 11 with DDEV setup
This commit is contained in:
gluebox
21
web/core/themes/claro/css/theme/colors.css
Normal file
21
web/core/themes/claro/css/theme/colors.css
Normal file
@ -0,0 +1,21 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
/**
|
||||
* Reusable colors.
|
||||
*/
|
||||
.color-success {
|
||||
color: #325e1c;
|
||||
background-color: #f3faef;
|
||||
}
|
||||
.color-warning {
|
||||
color: #734c00;
|
||||
background-color: #fdf8ed;
|
||||
}
|
||||
.color-error {
|
||||
color: #a51b00;
|
||||
background-color: #fcf4f2;
|
||||
}
|
||||
15
web/core/themes/claro/css/theme/colors.pcss.css
Normal file
15
web/core/themes/claro/css/theme/colors.pcss.css
Normal file
@ -0,0 +1,15 @@
|
||||
/**
|
||||
* Reusable colors.
|
||||
*/
|
||||
.color-success {
|
||||
color: #325e1c;
|
||||
background-color: #f3faef;
|
||||
}
|
||||
.color-warning {
|
||||
color: #734c00;
|
||||
background-color: #fdf8ed;
|
||||
}
|
||||
.color-error {
|
||||
color: #a51b00;
|
||||
background-color: #fcf4f2;
|
||||
}
|
||||
102
web/core/themes/claro/css/theme/field-ui.admin.css
Normal file
102
web/core/themes/claro/css/theme/field-ui.admin.css
Normal file
@ -0,0 +1,102 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Replacement styles for Field UI admin.
|
||||
*/
|
||||
|
||||
/* 'Manage fields' and 'Manage display' overviews */
|
||||
|
||||
.field-ui-overview .region-title td {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.field-ui-overview .region-message td {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* 'Manage form display' and 'Manage display' overview */
|
||||
|
||||
.field-plugin-summary {
|
||||
float: left; /* LTR */
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
[dir="rtl"] .field-plugin-summary {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.field-plugin-summary-cell .warning {
|
||||
display: block;
|
||||
float: left; /* LTR */
|
||||
margin-right: 0.5em; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .field-plugin-summary-cell .warning {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
/* Settings edit. */
|
||||
|
||||
.field-plugin-settings-edit-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.field-plugin-settings-edit {
|
||||
width: var(--space-m);
|
||||
margin: 0;
|
||||
padding: 1px 0.5rem;
|
||||
}
|
||||
|
||||
.field-plugin-settings-edit-wrapper .ajax-progress--throbber {
|
||||
position: absolute;
|
||||
inset-block-start: 1.5625rem;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
/* Settings editing subform. */
|
||||
|
||||
.draggable.field-plugin-settings-editing,
|
||||
.draggable.drag-previous.field-plugin-settings-editing {
|
||||
background: var(--color-blue-050);
|
||||
}
|
||||
|
||||
.field-plugin-settings-editing td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.field-plugin-settings-editing .field-plugin-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.field-plugin-settings-edit-form .plugin-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.field-settings-summary-cell.field-settings-summary-cell li,
|
||||
.storage-settings-summary-cell.storage-settings-summary-cell li {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.field-settings-summary-cell li {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.field-settings-summary-cell li:first-child {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.allowed-values-table .form-item:where(:not(.hidden)) {
|
||||
display: inline-table;
|
||||
}
|
||||
83
web/core/themes/claro/css/theme/field-ui.admin.pcss.css
Normal file
83
web/core/themes/claro/css/theme/field-ui.admin.pcss.css
Normal file
@ -0,0 +1,83 @@
|
||||
/**
|
||||
* @file
|
||||
* Replacement styles for Field UI admin.
|
||||
*/
|
||||
|
||||
/* 'Manage fields' and 'Manage display' overviews */
|
||||
.field-ui-overview .region-title td {
|
||||
font-weight: bold;
|
||||
}
|
||||
.field-ui-overview .region-message td {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* 'Manage form display' and 'Manage display' overview */
|
||||
.field-plugin-summary {
|
||||
float: left; /* LTR */
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
[dir="rtl"] .field-plugin-summary {
|
||||
float: right;
|
||||
}
|
||||
.field-plugin-summary-cell .warning {
|
||||
display: block;
|
||||
float: left; /* LTR */
|
||||
margin-right: 0.5em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .field-plugin-summary-cell .warning {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
/* Settings edit. */
|
||||
.field-plugin-settings-edit-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.field-plugin-settings-edit {
|
||||
width: var(--space-m);
|
||||
margin: 0;
|
||||
padding: 1px 8px;
|
||||
}
|
||||
|
||||
.field-plugin-settings-edit-wrapper .ajax-progress--throbber {
|
||||
position: absolute;
|
||||
inset-block-start: 25px;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
/* Settings editing subform. */
|
||||
.draggable.field-plugin-settings-editing,
|
||||
.draggable.drag-previous.field-plugin-settings-editing {
|
||||
background: var(--color-blue-050);
|
||||
}
|
||||
|
||||
.field-plugin-settings-editing td {
|
||||
vertical-align: top;
|
||||
}
|
||||
.field-plugin-settings-editing .field-plugin-type {
|
||||
display: none;
|
||||
}
|
||||
.field-plugin-settings-edit-form .plugin-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.field-settings-summary-cell.field-settings-summary-cell li,
|
||||
.storage-settings-summary-cell.storage-settings-summary-cell li {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
.field-settings-summary-cell li {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.field-settings-summary-cell li:first-child {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.allowed-values-table .form-item:where(:not(.hidden)) {
|
||||
display: inline-table;
|
||||
}
|
||||
98
web/core/themes/claro/css/theme/filter.theme.css
Normal file
98
web/core/themes/claro/css/theme/filter.theme.css
Normal file
@ -0,0 +1,98 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styling for the Filter module.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Filter information under field.
|
||||
*/
|
||||
|
||||
.text-full > .form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-element--editor-format {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 37.5rem) {
|
||||
/* Leave editor's select auto-scaled. */
|
||||
.form-element.form-element--editor-format {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-wrapper {
|
||||
margin-top: 0.5em; /* (8 / 16) */
|
||||
margin-bottom: 0.5em; /* (8 / 16) */
|
||||
}
|
||||
|
||||
.filter-wrapper .form-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-help {
|
||||
float: right; /* LTR */
|
||||
padding-top: 0.25em; /* (3 / 12), because font size is 12px */
|
||||
padding-bottom: 0.25em; /* (3 / 12) */
|
||||
font-size: 0.75em; /* (12 / 16), inherited font size is 16px */
|
||||
}
|
||||
|
||||
[dir="rtl"] .filter-help {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/**
|
||||
* Compose tips.
|
||||
*
|
||||
* Wraps filter tips on page '/filter/tips[/name]'.
|
||||
*/
|
||||
|
||||
.compose-tips__item {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter guidelines.
|
||||
*/
|
||||
|
||||
.filter-guidelines__item {
|
||||
margin-top: 0.5em; /* (6 / 12) */
|
||||
color: var(--input-fg-color--description);
|
||||
font-size: 0.75em; /* (12 / 16) */
|
||||
}
|
||||
|
||||
.filter-guidelines p {
|
||||
margin-top: 0.3333em; /* (4 / 12) */
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter tips.
|
||||
*
|
||||
* Long is used on '/filter/tips[/name]', short is used for the filter tips
|
||||
* below a text format input.
|
||||
*/
|
||||
|
||||
.filter-tips--long {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.filter-tips__item,
|
||||
.filter-tips--long p {
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
.filter-tips__item--short {
|
||||
margin-top: 0.3333em; /* (4 / 12) */
|
||||
margin-bottom: 0;
|
||||
}
|
||||
81
web/core/themes/claro/css/theme/filter.theme.pcss.css
Normal file
81
web/core/themes/claro/css/theme/filter.theme.pcss.css
Normal file
@ -0,0 +1,81 @@
|
||||
/**
|
||||
* @file
|
||||
* Styling for the Filter module.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Filter information under field.
|
||||
*/
|
||||
.text-full > .form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-element--editor-format {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
/* Leave editor's select auto-scaled. */
|
||||
.form-element.form-element--editor-format {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-wrapper {
|
||||
margin-top: 0.5em; /* (8 / 16) */
|
||||
margin-bottom: 0.5em; /* (8 / 16) */
|
||||
}
|
||||
.filter-wrapper .form-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-help {
|
||||
float: right; /* LTR */
|
||||
padding-top: 0.25em; /* (3 / 12), because font size is 12px */
|
||||
padding-bottom: 0.25em; /* (3 / 12) */
|
||||
font-size: 0.75em; /* (12 / 16), inherited font size is 16px */
|
||||
}
|
||||
[dir="rtl"] .filter-help {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/**
|
||||
* Compose tips.
|
||||
*
|
||||
* Wraps filter tips on page '/filter/tips[/name]'.
|
||||
*/
|
||||
.compose-tips__item {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter guidelines.
|
||||
*/
|
||||
.filter-guidelines__item {
|
||||
margin-top: 0.5em; /* (6 / 12) */
|
||||
color: var(--input-fg-color--description);
|
||||
font-size: 0.75em; /* (12 / 16) */
|
||||
}
|
||||
.filter-guidelines p {
|
||||
margin-top: 0.3333em; /* (4 / 12) */
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter tips.
|
||||
*
|
||||
* Long is used on '/filter/tips[/name]', short is used for the filter tips
|
||||
* below a text format input.
|
||||
*/
|
||||
.filter-tips--long {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.filter-tips__item,
|
||||
.filter-tips--long p {
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
.filter-tips__item--short {
|
||||
margin-top: 0.3333em; /* (4 / 12) */
|
||||
margin-bottom: 0;
|
||||
}
|
||||
93
web/core/themes/claro/css/theme/install-page.css
Normal file
93
web/core/themes/claro/css/theme/install-page.css
Normal file
@ -0,0 +1,93 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Installation styling.
|
||||
*
|
||||
* Unfortunately we have to make our styling quite strong, to override the
|
||||
* .maintenance-page styling.
|
||||
*/
|
||||
|
||||
.install-page {
|
||||
min-height: 100%;
|
||||
background-color: var(--color-gray-100);
|
||||
}
|
||||
|
||||
.install-page h1,
|
||||
.install-page h2 {
|
||||
font-size: var(--font-size-h3);
|
||||
}
|
||||
|
||||
.install-page h3 {
|
||||
font-size: var(--font-size-h4);
|
||||
}
|
||||
|
||||
.install-page .site-name {
|
||||
margin-top: var(--space-s);
|
||||
color: var(--color-gray);
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
.install-page .title {
|
||||
margin-top: 0;
|
||||
font-size: var(--font-size-h3);
|
||||
}
|
||||
|
||||
.install-page .content {
|
||||
color: var(--color-gray);
|
||||
}
|
||||
|
||||
.install-page .site-name,
|
||||
.install-page .title,
|
||||
.install-page .content {
|
||||
max-width: 34rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Password widget
|
||||
*/
|
||||
|
||||
.install-page .password-parent,
|
||||
.install-page .confirm-parent {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.install-page .form-item .password-suggestions {
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.install-page table td {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.install-page .site-version {
|
||||
vertical-align: super;
|
||||
color: var(--color-gray-500);
|
||||
font-size: 0.5em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media all and (max-width: 63.125rem) and (min-width: 48em) {
|
||||
.install-page .password-strength,
|
||||
.install-page .confirm-parent {
|
||||
width: 100%;
|
||||
}
|
||||
.install-configure-form .form-type-password {
|
||||
width: 100%;
|
||||
}
|
||||
.password-confirm,
|
||||
.password-field {
|
||||
float: none;
|
||||
}
|
||||
.password-confirm-match {
|
||||
float: none;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
83
web/core/themes/claro/css/theme/install-page.pcss.css
Normal file
83
web/core/themes/claro/css/theme/install-page.pcss.css
Normal file
@ -0,0 +1,83 @@
|
||||
/**
|
||||
* @file
|
||||
* Installation styling.
|
||||
*
|
||||
* Unfortunately we have to make our styling quite strong, to override the
|
||||
* .maintenance-page styling.
|
||||
*/
|
||||
|
||||
.install-page {
|
||||
min-height: 100%;
|
||||
background-color: var(--color-gray-100);
|
||||
|
||||
& h1,
|
||||
& h2 {
|
||||
font-size: var(--font-size-h3);
|
||||
}
|
||||
|
||||
& h3 {
|
||||
font-size: var(--font-size-h4);
|
||||
}
|
||||
|
||||
& .site-name {
|
||||
margin-top: var(--space-s);
|
||||
color: var(--color-gray);
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
& .title {
|
||||
margin-top: 0;
|
||||
font-size: var(--font-size-h3);
|
||||
}
|
||||
|
||||
& .content {
|
||||
color: var(--color-gray);
|
||||
}
|
||||
|
||||
& .site-name,
|
||||
& .title,
|
||||
& .content {
|
||||
max-width: 34rem;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Password widget
|
||||
*/
|
||||
.install-page .password-parent,
|
||||
.install-page .confirm-parent {
|
||||
width: auto;
|
||||
}
|
||||
.install-page .form-item .password-suggestions {
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
.install-page table td {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.install-page .site-version {
|
||||
vertical-align: super;
|
||||
color: var(--color-gray-500);
|
||||
font-size: 0.5em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media all and (max-width: 1010px) and (min-width: 48em) {
|
||||
.install-page .password-strength,
|
||||
.install-page .confirm-parent {
|
||||
width: 100%;
|
||||
}
|
||||
.install-configure-form .form-type-password {
|
||||
width: 100%;
|
||||
}
|
||||
.password-confirm,
|
||||
.password-field {
|
||||
float: none;
|
||||
}
|
||||
.password-confirm-match {
|
||||
float: none;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
283
web/core/themes/claro/css/theme/maintenance-page.css
Normal file
283
web/core/themes/claro/css/theme/maintenance-page.css
Normal file
@ -0,0 +1,283 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Maintenance theming.
|
||||
*
|
||||
* These styles affect the installation UI, maintenance page, and the database update UI.
|
||||
*/
|
||||
|
||||
.maintenance-page {
|
||||
min-height: 100%;
|
||||
background-color: var(--color-gray-100);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-size: var(--font-size-h3);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-h4);
|
||||
}
|
||||
|
||||
.site-name {
|
||||
margin-top: var(--space-s);
|
||||
word-wrap: break-word;
|
||||
color: var(--color-gray);
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
.site-name--subtle {
|
||||
margin-top: var(--space-s);
|
||||
color: var(--color-gray-800);
|
||||
font-size: var(--font-size-h4);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 0;
|
||||
font-size: var(--font-size-h3);
|
||||
}
|
||||
|
||||
.title--broad {
|
||||
font-size: var(--font-size-h1);
|
||||
}
|
||||
|
||||
.site-name,
|
||||
.title {
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-bottom: var(--space-m);
|
||||
color: var(--color-gray);
|
||||
}
|
||||
|
||||
.content--subtle {
|
||||
color: var(--color-gray-800);
|
||||
}
|
||||
|
||||
.site-name,
|
||||
.title,
|
||||
.content {
|
||||
max-width: 34rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Task list & step indicator.
|
||||
* Shows on both the install screen and the database update page.
|
||||
*/
|
||||
|
||||
@media all and (max-width: 48em) {
|
||||
/* 768px */
|
||||
header[role="banner"] {
|
||||
position: relative;
|
||||
}
|
||||
.step-indicator {
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
right: 0.5em; /* LTR */
|
||||
display: block;
|
||||
font-size: 1.385em;
|
||||
}
|
||||
[dir="rtl"] .step-indicator {
|
||||
right: auto;
|
||||
left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 48em) {
|
||||
/* 768px */
|
||||
.step-indicator {
|
||||
display: none;
|
||||
}
|
||||
.task-list {
|
||||
margin-left: -3rem; /* LTR */
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
counter-reset: steps;
|
||||
font-weight: bold;
|
||||
}
|
||||
[dir="rtl"] .task-list {
|
||||
margin-right: -3rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
.task-list li {
|
||||
padding: 1rem 1rem 1rem 3rem; /* LTR */
|
||||
counter-increment: steps;
|
||||
color: var(--color-gray);
|
||||
border-radius: 0 2rem 2rem 0 /* LTR */;
|
||||
font-weight: 500;
|
||||
}
|
||||
[dir="rtl"] .task-list li {
|
||||
padding: 1rem 3rem 1rem 1rem;
|
||||
border-radius: 2rem 0 0 2rem;
|
||||
}
|
||||
.task-list li::before {
|
||||
margin-right: 0.375rem;
|
||||
content: counter(steps);
|
||||
}
|
||||
[dir="rtl"] .task-list li::before {
|
||||
margin-right: 0;
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.task-list .is-active {
|
||||
color: var(--color-absolutezero);
|
||||
border: 1px solid transparent; /* Required for forced-colors mode. */
|
||||
background: var(--color-bgblue-active);
|
||||
font-weight: 500;
|
||||
}
|
||||
.task-list .done {
|
||||
color: var(--color-gray-700);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Layout
|
||||
*/
|
||||
|
||||
.layout-container {
|
||||
width: auto;
|
||||
margin-right: 1.25em;
|
||||
margin-left: 1.25em;
|
||||
padding: var(--space-xl);
|
||||
border: 1px solid transparent; /* Required for forced-colors mode. */
|
||||
border-radius: 0.5rem;
|
||||
background: #fff;
|
||||
box-shadow: var(--shadow-z3);
|
||||
}
|
||||
|
||||
.layout-container::after {
|
||||
/* No reason for a clearfix in the markup. */
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
@media all and (max-width: 48em) {
|
||||
/* 768px */
|
||||
.layout-container {
|
||||
margin: 1.25em;
|
||||
padding: var(--space-m) var(--space-l);
|
||||
}
|
||||
|
||||
.layout-sidebar-first {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 48em) {
|
||||
/* 768px */
|
||||
html {
|
||||
display: table;
|
||||
}
|
||||
.install-page,
|
||||
.maintenance-page {
|
||||
display: table-cell;
|
||||
padding: 1em 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
html,
|
||||
.install-page,
|
||||
.maintenance-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
/**
|
||||
* Needed to override rules from system-admin--layout.pcss.
|
||||
*/
|
||||
.layout-container.layout-container.layout-container {
|
||||
width: 75%;
|
||||
max-width: 58.75rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
ul {
|
||||
margin: 0.25em 0;
|
||||
padding: 0.9375rem;
|
||||
}
|
||||
[dir="rtl"] ul {
|
||||
margin-right: 0; /* Overrides default [dir="rtl"] ul margin. */
|
||||
}
|
||||
|
||||
/* Positioning sidebar & content. */
|
||||
.layout-sidebar-first {
|
||||
float: left; /* LTR */
|
||||
width: 35%;
|
||||
}
|
||||
[dir="rtl"] .layout-sidebar-first {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
float: left; /* LTR */
|
||||
clear: none;
|
||||
box-sizing: border-box;
|
||||
width: 65%;
|
||||
padding-left: 3.85em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .main-content {
|
||||
float: right;
|
||||
padding-right: 3.85em;
|
||||
padding-left: 0;
|
||||
}
|
||||
.main-content--attached {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Status report customization for install and update page.
|
||||
*/
|
||||
|
||||
.system-status-report__status-title {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.system-status-report__entry__value {
|
||||
float: none;
|
||||
width: 100%;
|
||||
padding-top: 0;
|
||||
padding-left: 3em; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .system-status-report__entry__value {
|
||||
padding-right: 3em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates list customization for update page.
|
||||
*/
|
||||
|
||||
.update-results {
|
||||
overflow: auto; /* Required to prevent text clipping. */
|
||||
margin-top: 0;
|
||||
padding: var(--space-s);
|
||||
border: 1px solid var(--color-gray-100);
|
||||
border-radius: var(--base-border-radius);
|
||||
background: var(--color-gray-050);
|
||||
}
|
||||
|
||||
.update-results > h3:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.update-results .failure strong {
|
||||
color: var(--color-maximumred);
|
||||
}
|
||||
|
||||
.item-list > h3 {
|
||||
font-size: var(--font-size-h5);
|
||||
}
|
||||
|
||||
.item-list > ul {
|
||||
margin-left: 0;
|
||||
}
|
||||
263
web/core/themes/claro/css/theme/maintenance-page.pcss.css
Normal file
263
web/core/themes/claro/css/theme/maintenance-page.pcss.css
Normal file
@ -0,0 +1,263 @@
|
||||
/**
|
||||
* @file
|
||||
* Maintenance theming.
|
||||
*
|
||||
* These styles affect the installation UI, maintenance page, and the database update UI.
|
||||
*/
|
||||
|
||||
.maintenance-page {
|
||||
min-height: 100%;
|
||||
background-color: var(--color-gray-100);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-size: var(--font-size-h3);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-h4);
|
||||
}
|
||||
|
||||
.site-name {
|
||||
margin-top: var(--space-s);
|
||||
word-wrap: break-word;
|
||||
color: var(--color-gray);
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
.site-name--subtle {
|
||||
margin-top: var(--space-s);
|
||||
color: var(--color-gray-800);
|
||||
font-size: var(--font-size-h4);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 0;
|
||||
font-size: var(--font-size-h3);
|
||||
}
|
||||
.title--broad {
|
||||
font-size: var(--font-size-h1);
|
||||
}
|
||||
|
||||
.site-name,
|
||||
.title {
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-bottom: var(--space-m);
|
||||
color: var(--color-gray);
|
||||
}
|
||||
.content--subtle {
|
||||
color: var(--color-gray-800);
|
||||
}
|
||||
|
||||
.site-name,
|
||||
.title,
|
||||
.content {
|
||||
max-width: 34rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Task list & step indicator.
|
||||
* Shows on both the install screen and the database update page.
|
||||
*/
|
||||
@media all and (max-width: 48em) {
|
||||
/* 768px */
|
||||
header[role="banner"] {
|
||||
position: relative;
|
||||
}
|
||||
.step-indicator {
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
right: 0.5em; /* LTR */
|
||||
display: block;
|
||||
font-size: 1.385em;
|
||||
}
|
||||
[dir="rtl"] .step-indicator {
|
||||
right: auto;
|
||||
left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 48em) {
|
||||
/* 768px */
|
||||
.step-indicator {
|
||||
display: none;
|
||||
}
|
||||
.task-list {
|
||||
margin-left: -3rem; /* LTR */
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
counter-reset: steps;
|
||||
font-weight: bold;
|
||||
}
|
||||
[dir="rtl"] .task-list {
|
||||
margin-right: -3rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
.task-list li {
|
||||
padding: 1rem 1rem 1rem 3rem; /* LTR */
|
||||
counter-increment: steps;
|
||||
color: var(--color-gray);
|
||||
border-radius: 0 2rem 2rem 0 /* LTR */;
|
||||
font-weight: 500;
|
||||
}
|
||||
[dir="rtl"] .task-list li {
|
||||
padding: 1rem 3rem 1rem 1rem;
|
||||
border-radius: 2rem 0 0 2rem;
|
||||
}
|
||||
.task-list li::before {
|
||||
margin-right: 0.375rem;
|
||||
content: counter(steps);
|
||||
}
|
||||
[dir="rtl"] .task-list li::before {
|
||||
margin-right: 0;
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.task-list .is-active {
|
||||
color: var(--color-absolutezero);
|
||||
border: 1px solid transparent; /* Required for forced-colors mode. */
|
||||
background: var(--color-bgblue-active);
|
||||
font-weight: 500;
|
||||
}
|
||||
.task-list .done {
|
||||
color: var(--color-gray-700);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Layout
|
||||
*/
|
||||
.layout-container {
|
||||
width: auto;
|
||||
margin-right: 1.25em;
|
||||
margin-left: 1.25em;
|
||||
padding: var(--space-xl);
|
||||
border: 1px solid transparent; /* Required for forced-colors mode. */
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: var(--shadow-z3);
|
||||
}
|
||||
.layout-container::after {
|
||||
/* No reason for a clearfix in the markup. */
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
@media all and (max-width: 48em) {
|
||||
/* 768px */
|
||||
.layout-container {
|
||||
margin: 1.25em;
|
||||
padding: var(--space-m) var(--space-l);
|
||||
}
|
||||
|
||||
.layout-sidebar-first {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 48em) {
|
||||
/* 768px */
|
||||
html {
|
||||
display: table;
|
||||
}
|
||||
.install-page,
|
||||
.maintenance-page {
|
||||
display: table-cell;
|
||||
padding: 1em 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
html,
|
||||
.install-page,
|
||||
.maintenance-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
/**
|
||||
* Needed to override rules from system-admin--layout.pcss.
|
||||
*/
|
||||
.layout-container.layout-container.layout-container {
|
||||
width: 75%;
|
||||
max-width: 940px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
ul {
|
||||
margin: 0.25em 0;
|
||||
padding: 15px;
|
||||
}
|
||||
[dir="rtl"] ul {
|
||||
margin-right: 0; /* Overrides default [dir="rtl"] ul margin. */
|
||||
}
|
||||
|
||||
/* Positioning sidebar & content. */
|
||||
.layout-sidebar-first {
|
||||
float: left; /* LTR */
|
||||
width: 35%;
|
||||
}
|
||||
[dir="rtl"] .layout-sidebar-first {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
float: left; /* LTR */
|
||||
clear: none;
|
||||
box-sizing: border-box;
|
||||
width: 65%;
|
||||
padding-left: 3.85em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .main-content {
|
||||
float: right;
|
||||
padding-right: 3.85em;
|
||||
padding-left: 0;
|
||||
}
|
||||
.main-content--attached {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Status report customization for install and update page.
|
||||
*/
|
||||
.system-status-report__status-title {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
.system-status-report__entry__value {
|
||||
float: none;
|
||||
width: 100%;
|
||||
padding-top: 0;
|
||||
padding-left: 3em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .system-status-report__entry__value {
|
||||
padding-right: 3em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates list customization for update page.
|
||||
*/
|
||||
.update-results {
|
||||
overflow: auto; /* Required to prevent text clipping. */
|
||||
margin-top: 0;
|
||||
padding: var(--space-s);
|
||||
border: 1px solid var(--color-gray-100);
|
||||
border-radius: var(--base-border-radius);
|
||||
background: var(--color-gray-050);
|
||||
}
|
||||
.update-results > h3:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.update-results .failure strong {
|
||||
color: var(--color-maximumred);
|
||||
}
|
||||
|
||||
.item-list > h3 {
|
||||
font-size: var(--font-size-h5);
|
||||
}
|
||||
.item-list > ul {
|
||||
margin-left: 0;
|
||||
}
|
||||
884
web/core/themes/claro/css/theme/media-library.css
Normal file
884
web/core/themes/claro/css/theme/media-library.css
Normal file
@ -0,0 +1,884 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file media-library.pcss.css
|
||||
|
||||
* Styling for Media Library.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Negative margins compensate for modal dialog padding and compensate for
|
||||
* positioning that would otherwise hide the active tab indicator on the left.
|
||||
*/
|
||||
|
||||
.media-library-wrapper {
|
||||
display: flex;
|
||||
margin: -1rem -1.5rem -1rem -1rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-wrapper {
|
||||
margin-right: -1em;
|
||||
margin-left: -1.5em;
|
||||
}
|
||||
|
||||
.media-library-wrapper .messages-list,
|
||||
.media-library-wrapper .messages {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
|
||||
.media-library-menu {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: var(--vertical-tabs-menu-width);
|
||||
margin: 0;
|
||||
padding-top: var(--vertical-tabs-menu-item-shadow-extraspace);
|
||||
list-style: none;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-menu {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.media-library-menu__item {
|
||||
overflow: hidden;
|
||||
margin: var(--vertical-tabs-menu-item--top-margin) var(--vertical-tabs-menu-item--right-margin) var(--vertical-tabs-menu-item--bottom-margin) var(--vertical-tabs-menu-item--left-margin); /* LTR */
|
||||
padding: var(--vertical-tabs-menu-item-shadow-extraspace) 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-menu__item {
|
||||
margin-right: var(--vertical-tabs-menu-item--left-margin);
|
||||
margin-left: var(--vertical-tabs-menu-item--right-margin);
|
||||
}
|
||||
|
||||
.media-library-menu__item::before {
|
||||
z-index: var(--vertical-tabs-menu--z-index); /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: calc(var(--vertical-tabs-menu-separator-size) * -1);
|
||||
content: "";
|
||||
border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
|
||||
}
|
||||
|
||||
.media-library-menu__link {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-top: calc(var(--vertical-tabs-border-size) * -1);
|
||||
padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size)); /* LTR */
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
border: var(--vertical-tabs-border-size) solid transparent;
|
||||
border-width: var(--vertical-tabs-border-size) 0 var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size); /* LTR */
|
||||
border-radius: var(--vertical-tabs-border-radius) 0 0 var(--vertical-tabs-border-radius); /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-menu__link {
|
||||
padding-right: calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));
|
||||
padding-left: var(--space-s);
|
||||
border-width: var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size) var(--vertical-tabs-border-size) 0;
|
||||
border-radius: 0 var(--vertical-tabs-border-radius) var(--vertical-tabs-border-radius) 0;
|
||||
}
|
||||
|
||||
/* Menu link states. */
|
||||
|
||||
.media-library-menu__link:focus {
|
||||
z-index: calc(var(--vertical-tabs-menu--z-index) + 3); /* Focus state should be on the highest level to make the focus effect be fully visible. This also means that it should have bigger z-index than the selected link. */
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.media-library-menu__link:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: var(--color-absolutezero);
|
||||
/* These borders are necessary to replace the dividing lines while in the hover state. */
|
||||
border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
|
||||
border-bottom: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
|
||||
background: var(--color-bgblue-hover);
|
||||
}
|
||||
|
||||
/* This pseudo element provides the background for the hover state. */
|
||||
|
||||
.media-library-menu__link::before {
|
||||
position: absolute;
|
||||
z-index: calc(var(--vertical-tabs-menu--z-index) - 1); /* This should be on a lower level than the menu-item separator lines. */
|
||||
top: calc(var(--vertical-tabs-border-size) * -1);
|
||||
right: 0; /* LTR */
|
||||
bottom: calc(var(--vertical-tabs-border-size) * -1);
|
||||
left: calc(var(--vertical-tabs-menu-link--active-border-size) * -1); /* LTR */
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-menu__link::before {
|
||||
right: calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.media-library-menu__link:focus::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);
|
||||
border-radius: var(--vertical-tabs-border-radius);
|
||||
}
|
||||
|
||||
.media-library-menu__link.active {
|
||||
z-index: calc(var(--vertical-tabs-menu--z-index) + 2); /* The selected menu link should be on a higher level than the white masking line that hides the gray separator. */
|
||||
color: var(--color-absolutezero);
|
||||
border-color: var(--vertical-tabs-border-color) transparent;
|
||||
background-color: var(--color-white);
|
||||
box-shadow: var(--vertical-tabs-shadow);
|
||||
}
|
||||
|
||||
.media-library-menu__link.active:hover {
|
||||
color: var(--color-absolutezero-hover);
|
||||
background-color: var(--color-bgblue-hover);
|
||||
}
|
||||
|
||||
.media-library-menu__link.active::before {
|
||||
z-index: 1; /* The blue active-tab indication should be on a higher level than the green focus border. */
|
||||
border-left: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color); /* LTR */
|
||||
border-radius: var(--base-border-radius) 0 0 var(--base-border-radius); /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-menu__link.active::before {
|
||||
border-right: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);
|
||||
border-left: 0;
|
||||
border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
|
||||
}
|
||||
|
||||
.media-library-menu__link.active:hover::before {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.media-library-content {
|
||||
width: 100%;
|
||||
padding: 1em;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.media-library-menu + .media-library-content {
|
||||
z-index: var(--vertical-tabs-menu--z-index);
|
||||
border-left: var(--vertical-tabs-border); /* LTR */
|
||||
box-shadow: var(--vertical-tabs-shadow);
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-menu + .media-library-content {
|
||||
border-right: var(--vertical-tabs-border);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
/* Generic media add form styles. */
|
||||
|
||||
.media-library-add-form--without-input .form-item {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove outline from added media list.
|
||||
*
|
||||
* The added media list receives focus after adding new media, but since it is
|
||||
* not an interactive element, it does not need an outline.
|
||||
*/
|
||||
|
||||
.media-library-add-form__added-media {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* This Media Library form is an exception to the extrasmall button pattern.
|
||||
* Additional padding is needed to accommodate the remove button icon. The
|
||||
* margin is adjusted for alignment within the media library dialog.
|
||||
*/
|
||||
|
||||
.media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
|
||||
margin: var(--space-xs) 0; /* LTR */
|
||||
/* Left padding is double the background size of the button icon. */
|
||||
padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px) calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) * 2);
|
||||
}
|
||||
|
||||
/* This is needed to override the default extrasmall button left margin. */
|
||||
|
||||
[dir="rtl"] .media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.media-library-add-form__input-wrapper {
|
||||
padding: var(--space-xs) var(--space-l) var(--space-l) var(--space-l);
|
||||
border: var(--details-border-size) solid var(--details-border-color);
|
||||
border-radius: var(--base-border-radius);
|
||||
background-color: var(--color-white);
|
||||
box-shadow: var(--details-box-shadow);
|
||||
}
|
||||
|
||||
/* Style the media add upload form. */
|
||||
|
||||
.media-library-add-form--upload.media-library-add-form--without-input .form-item-upload {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.media-library-add-form--upload.media-library-add-form--with-input .form-managed-file__main,
|
||||
.media-library-add-form--upload.media-library-add-form--with-input .form-managed-file.no-upload {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Adjust the focus border on this element so it is not too close to buttons. */
|
||||
|
||||
.media-library-add-form__added-media:focus {
|
||||
box-shadow:
|
||||
0 0 0 calc(var(--focus-border-offset-size) + 2px) var(--color-white),
|
||||
0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px) var(--color-focus);
|
||||
}
|
||||
|
||||
.media-library-add-form .file-upload-help {
|
||||
margin: 0.5rem 0 0;
|
||||
}
|
||||
|
||||
/* Style the media add oEmbed form. */
|
||||
|
||||
.media-library-add-form--oembed .media-library-add-form__input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 37.5em) {
|
||||
.media-library-add-form--oembed .media-library-add-form__input-wrapper {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.media-library-add-form--oembed.media-library-add-form--without-input .form-item-url {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.media-library-add-form-oembed-url {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Media add form selection styles. */
|
||||
|
||||
.media-library-add-form__selected-media {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
/* Change to padding to account for the negative margin for flex grid. */
|
||||
|
||||
.media-library-add-form__selected-media .details-wrapper {
|
||||
padding: 0 0.625rem 1em 0.625rem;
|
||||
}
|
||||
|
||||
.media-library-add-form__selected-media .media-library-item .field--name-thumbnail img {
|
||||
height: 6.25rem;
|
||||
}
|
||||
|
||||
/* Generic media library view styles. */
|
||||
|
||||
.media-library-select-all {
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
margin: 0.625rem 0.5rem;
|
||||
}
|
||||
|
||||
.media-library-select-all input {
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-select-all input {
|
||||
margin-left: 0.625rem;
|
||||
}
|
||||
|
||||
.media-library-views-form,
|
||||
.media-library-selection,
|
||||
.media-library-add-form__selected-media .details-wrapper,
|
||||
.media-library-view .form--inline {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.media-library-views-form > .form-actions,
|
||||
.media-library-views-form > .field-actions {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.media-library-views-form__header {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.media-library-views-form__header .form-item {
|
||||
margin-right: 0.5rem; /* @TODO RTL? */
|
||||
}
|
||||
|
||||
.media-library-views-form__rows {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-basis: 100%;
|
||||
margin: 0 -0.5rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Override the table display of the visually hidden labels.
|
||||
*
|
||||
* The width, height and overflow properties in the styles for the
|
||||
* .visually-hidden class do not work correctly if the element has a table
|
||||
* display.
|
||||
*/
|
||||
|
||||
.media-library-item label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Media library widget view styles. */
|
||||
|
||||
.media-library-wrapper .media-library-view {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.media-library-wrapper .view-header {
|
||||
align-self: flex-end;
|
||||
margin: 1em 0;
|
||||
text-align: right; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-wrapper .view-header {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.media-library-wrapper .media-library-view .view-filters,
|
||||
.media-library-wrapper .media-library-view .view-content {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.media-library-wrapper .views-display-link {
|
||||
margin: 0;
|
||||
padding-left: 1.375rem; /* LTR */
|
||||
color: #333;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-wrapper .views-display-link {
|
||||
padding-right: 1.375rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.media-library-wrapper .views-display-link.is-active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.media-library-wrapper .views-display-link-widget {
|
||||
margin-right: 0.9375rem;
|
||||
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23333333' d='M10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3A1.5 1.5 0 0 1 10.5 9zm-8 0h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3A1.5 1.5 0 0 1 2.5 9zm8-8h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3A1.5 1.5 0 0 1 10.5 1zm-8 0h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3A1.5 1.5 0 0 1 2.5 1z'/%3e%3c/svg%3e") left 0 no-repeat; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-wrapper .views-display-link-widget {
|
||||
background-position: right 0;
|
||||
}
|
||||
|
||||
.media-library-wrapper .views-display-link-widget_table {
|
||||
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23333333' d='M7 15a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zm-4.5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 9.5a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zm-4.5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 4a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zM2.5 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3e%3c/svg%3e") left 0 no-repeat; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-wrapper .views-display-link-widget_table {
|
||||
background-position: right 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Style the media library grid items.
|
||||
*/
|
||||
|
||||
.media-library-item,
|
||||
.media-library-item__preview-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/**
|
||||
* Ajax throbbers inside a media library item.
|
||||
*/
|
||||
|
||||
.media-library-item .ajax-progress.ajax-progress.ajax-progress {
|
||||
position: absolute;
|
||||
z-index: calc(var(--vertical-tabs-menu--z-index) + 1);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
box-sizing: border-box;
|
||||
width: 3rem; /* 56px */
|
||||
height: 3rem;
|
||||
margin: -1.5rem;
|
||||
border: var(--input-border-size) solid var(--jui-dropdown-border-color);
|
||||
border-radius: 3.5rem;
|
||||
background: var(--color-white);
|
||||
box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);
|
||||
}
|
||||
|
||||
.media-library-item .ajax-progress__throbber {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
margin: -0.875rem;
|
||||
border: 3px solid var(--color-absolutezero);
|
||||
border-right: 3px dotted transparent;
|
||||
}
|
||||
|
||||
.media-library-item .ajax-progress__message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.media-library-item--grid {
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 50%;
|
||||
padding: 0.5rem;
|
||||
vertical-align: top;
|
||||
outline: none;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.media-library-item--grid::before {
|
||||
position: absolute;
|
||||
top: 0.4375rem;
|
||||
left: 0.4375rem;
|
||||
width: calc(100% - 1rem);
|
||||
height: calc(100% - 1rem);
|
||||
content: "";
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
color 0.2s,
|
||||
background 0.2s;
|
||||
pointer-events: none;
|
||||
border: 1px solid #dbdbdb;
|
||||
border-radius: 2px;
|
||||
box-shadow: var(--details-box-shadow);
|
||||
}
|
||||
|
||||
/**
|
||||
* The media library grid item focus border is moved to a child element to
|
||||
* improve padding.
|
||||
*/
|
||||
|
||||
.media-library-item--grid:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.media-library-item--grid:focus .media-library-item__preview-wrapper {
|
||||
outline: var(--focus-outline);
|
||||
box-shadow: var(--focus-box-shadow);
|
||||
}
|
||||
|
||||
/* Media library widget weight field styles. */
|
||||
|
||||
.media-library-item--grid .form-item {
|
||||
margin: 0.75em;
|
||||
}
|
||||
|
||||
/* The selected items in the add form should be shown a bit smaller. */
|
||||
|
||||
.media-library-add-form__selected-media .media-library-item--small {
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
.media-library-widget-modal .ui-dialog-buttonpane {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.media-library-widget-modal .ui-dialog-buttonpane .form-actions,
|
||||
.media-library-widget-modal .ui-dialog-buttonpane .field-actions {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* By default, the dialog is too narrow to be usable.
|
||||
* @see Drupal.ckeditor5.openDialog()
|
||||
*/
|
||||
|
||||
.ui-dialog--narrow.media-library-widget-modal {
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 45em) {
|
||||
.media-library-item--grid {
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
/* Change the width for the modal and widget since there is less space. */
|
||||
.media-library-widget-modal .media-library-item--grid,
|
||||
.media-library-selection .media-library-item--grid {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/* The selected items in the add form should be shown a bit smaller. */
|
||||
.media-library-add-form__selected-media .media-library-item--small {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 60em) {
|
||||
.media-library-item--grid {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/* Change the width for the modal and widget since there is less space. */
|
||||
.media-library-widget-modal .media-library-item--grid,
|
||||
.media-library-selection .media-library-item--grid {
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
/* The selected items in the add form should be shown a bit smaller. */
|
||||
.media-library-add-form__selected-media .media-library-item--small {
|
||||
width: 16.6%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 77em) {
|
||||
.media-library-item--grid {
|
||||
width: 16.6%;
|
||||
}
|
||||
|
||||
/* Change the width for the modal and widget since there is less space. */
|
||||
.media-library-widget-modal .media-library-item--grid,
|
||||
.media-library-selection .media-library-item--grid {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/* The selected items in the add form should be shown a bit smaller. */
|
||||
.media-library-add-form__selected-media .media-library-item--small {
|
||||
width: 16.6%;
|
||||
}
|
||||
}
|
||||
|
||||
.media-library-item--grid .field--name-thumbnail {
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
|
||||
.media-library-item--grid .field--name-thumbnail img {
|
||||
height: 11.25rem;
|
||||
object-fit: contain;
|
||||
object-position: center center;
|
||||
}
|
||||
|
||||
.media-library-item--grid.is-hover::before,
|
||||
.media-library-item--grid.checked::before,
|
||||
.media-library-item--grid.is-focus::before {
|
||||
top: 0.3125rem;
|
||||
left: 0.3125rem;
|
||||
border-width: 3px;
|
||||
border-radius: 0.1875rem;
|
||||
}
|
||||
|
||||
.media-library-item--grid.is-hover::before,
|
||||
.media-library-item--grid.checked.is-hover::before {
|
||||
border-color: var(--color-absolutezero-hover);
|
||||
}
|
||||
|
||||
.media-library-item--grid.is-focus::before {
|
||||
border-color: var(--color-focus);
|
||||
}
|
||||
|
||||
.media-library-item--grid.checked::before {
|
||||
border-color: var(--button--focus-border-color);
|
||||
}
|
||||
|
||||
.media-library-item--grid .form-boolean--type-checkbox:checked {
|
||||
border-color: var(--button--focus-border-color);
|
||||
background-color: var(--button--focus-border-color);
|
||||
}
|
||||
|
||||
.media-library-item__click-to-select-checkbox {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 1rem;
|
||||
left: 1rem; /* LTR */
|
||||
display: block;
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-item__click-to-select-checkbox {
|
||||
right: 1rem;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.media-library-item__click-to-select-checkbox input {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.media-library-item__click-to-select-checkbox .form-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.media-library-item__click-to-select-trigger {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Media library item table styles. */
|
||||
|
||||
.media-library-item--table img {
|
||||
max-width: 6.25rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Media library entity view display styles. */
|
||||
|
||||
.media-library-item__preview {
|
||||
padding-bottom: 2.125rem;
|
||||
}
|
||||
|
||||
.field--widget-media-library-widget .media-library-item__preview {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.field--widget-media-library-widget .media-library-item__preview img {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
.field--widget-media-library-widget .js-media-library-item:only-child .media-library-item__preview {
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
.media-library-item__status {
|
||||
position: absolute;
|
||||
top: 2.5rem;
|
||||
left: 0.3125rem; /* LTR */
|
||||
padding: 0.3125rem 0.625rem;
|
||||
pointer-events: none;
|
||||
color: #e4e4e4;
|
||||
background: #666;
|
||||
font-size: 0.75rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-item__status {
|
||||
right: 0.3125rem;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.media-library-item__attributes {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
max-width: calc(100% - 0.625rem);
|
||||
max-height: calc(100% - 3.125rem);
|
||||
padding: 0.3125rem;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.media-library-item__name {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: calc(var(--space-xs) / 2) var(--space-xs);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.media-library-item__attributes:hover .media-library-item__name,
|
||||
.media-library-item--grid.is-focus .media-library-item__name,
|
||||
.media-library-item--grid.checked .media-library-item__name {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.media-library-item__type {
|
||||
color: #696969;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.media-library-item--disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Media library widget styles. */
|
||||
|
||||
.media-library-widget {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.media-library-widget__toggle-weight.media-library-widget__toggle-weight {
|
||||
position: absolute;
|
||||
top: var(--space-s);
|
||||
right: var(--space-m); /* LTR */
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-widget__toggle-weight.media-library-widget__toggle-weight {
|
||||
right: auto;
|
||||
left: var(--space-m);
|
||||
}
|
||||
|
||||
/* Add negative margin for flex grid. */
|
||||
|
||||
.media-library-selection {
|
||||
margin: 1em -0.5rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Media library widget edit and delete button styles.
|
||||
*
|
||||
* We have to override the .button styles since buttons make heavy use of
|
||||
* background and border property changes.
|
||||
*/
|
||||
|
||||
.media-library-item__edit,
|
||||
.media-library-item__edit:hover,
|
||||
.media-library-item__edit:focus,
|
||||
.media-library-item__remove,
|
||||
.media-library-item__remove:hover,
|
||||
.media-library-item__remove:focus,
|
||||
.media-library-item__remove.button,
|
||||
.media-library-item__remove.button:first-child,
|
||||
.media-library-item__remove.button:disabled,
|
||||
.media-library-item__remove.button:disabled:active,
|
||||
.media-library-item__remove.button:hover,
|
||||
.media-library-item__remove.button:focus {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0.625rem;
|
||||
overflow: hidden;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin: 0.3125rem;
|
||||
padding: 0;
|
||||
transition: 0.2s border-color;
|
||||
color: transparent;
|
||||
background-size: 0.75rem;
|
||||
text-shadow: none;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.media-library-item__edit {
|
||||
right: 2.5rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-item__edit {
|
||||
right: auto;
|
||||
left: 2.5rem;
|
||||
}
|
||||
|
||||
.media-library-item__remove {
|
||||
right: 0.625rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-item__remove {
|
||||
right: auto;
|
||||
left: 0.625rem;
|
||||
}
|
||||
|
||||
.media-library-item__edit {
|
||||
/* !important to override button class border. */
|
||||
border: 1px solid var(--color-gray-200) !important;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg fill='%23545560'%3e%3cpath d='M14.545 3.042l-1.586-1.585a1.003 1.003 0 00-1.414 0L10.252 2.75l3 3 1.293-1.293a1.004 1.004 0 000-1.415zM5.25 13.751l-3-3 6.998-6.998 3 3zM.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 0.75rem;
|
||||
}
|
||||
|
||||
.media-library-item__edit:active {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.media-library-item__remove,
|
||||
.media-library-item__remove.button,
|
||||
.media-library-item__remove.button:first-child,
|
||||
.media-library-item__remove.button:disabled,
|
||||
.media-library-item__remove.button:disabled:active,
|
||||
.media-library-item__remove.button:hover,
|
||||
.media-library-item__remove.button:focus {
|
||||
/* !important to override button class border. */
|
||||
border: 1px solid var(--color-gray-200) !important;
|
||||
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.344 2.343l11.313 11.313M2.344 13.657L13.657 2.343' stroke='%2355565B' stroke-width='3'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 0.75rem;
|
||||
}
|
||||
|
||||
.media-library-item__remove:active,
|
||||
.media-library-item__remove.button:active,
|
||||
.media-library-item__remove.button:disabled:active {
|
||||
/* !important to override button class border. */
|
||||
border-color: var(--color-absolutezero) !important;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Style the added media item container. */
|
||||
|
||||
.media-library-add-form__media {
|
||||
position: relative;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #c0c0c0;
|
||||
}
|
||||
|
||||
/* Do not show the bottom border and padding for the last item. */
|
||||
|
||||
.media-library-add-form__media:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.media-library-add-form__preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 13.75rem;
|
||||
margin-right: 1.25rem; /* LTR */
|
||||
background: var(--color-gray-050-o-40);
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-add-form__preview {
|
||||
margin-right: 0;
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
.media-library-add-form__fields {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.media-library-add-form__remove-button {
|
||||
position: absolute;
|
||||
right: 0; /* LTR */
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: var(--space-xs) center;
|
||||
background-size: var(--space-s);
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-add-form__remove-button {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.media-library-add-form__remove-button.button:disabled {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%238e929c' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.views-live-preview .media-library-view div.views-row + div.views-row {
|
||||
margin-top: 0;
|
||||
}
|
||||
821
web/core/themes/claro/css/theme/media-library.pcss.css
Normal file
821
web/core/themes/claro/css/theme/media-library.pcss.css
Normal file
@ -0,0 +1,821 @@
|
||||
/**
|
||||
* @file media-library.pcss.css
|
||||
|
||||
* Styling for Media Library.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Negative margins compensate for modal dialog padding and compensate for
|
||||
* positioning that would otherwise hide the active tab indicator on the left.
|
||||
*/
|
||||
.media-library-wrapper {
|
||||
display: flex;
|
||||
margin: -1rem -1.5rem -1rem -1rem; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .media-library-wrapper {
|
||||
margin-right: -1em;
|
||||
margin-left: -1.5em;
|
||||
}
|
||||
|
||||
.media-library-wrapper .messages-list,
|
||||
.media-library-wrapper .messages {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
|
||||
.media-library-menu {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: var(--vertical-tabs-menu-width);
|
||||
margin: 0;
|
||||
padding-top: var(--vertical-tabs-menu-item-shadow-extraspace);
|
||||
list-style: none;
|
||||
color: var(--color-text);
|
||||
}
|
||||
[dir="rtl"] .media-library-menu {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.media-library-menu__item {
|
||||
overflow: hidden;
|
||||
margin: var(--vertical-tabs-menu-item--top-margin) var(--vertical-tabs-menu-item--right-margin) var(--vertical-tabs-menu-item--bottom-margin) var(--vertical-tabs-menu-item--left-margin); /* LTR */
|
||||
padding: var(--vertical-tabs-menu-item-shadow-extraspace) 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-menu__item {
|
||||
margin-right: var(--vertical-tabs-menu-item--left-margin);
|
||||
margin-left: var(--vertical-tabs-menu-item--right-margin);
|
||||
}
|
||||
|
||||
.media-library-menu__item::before {
|
||||
z-index: var(--vertical-tabs-menu--z-index); /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: calc(var(--vertical-tabs-menu-separator-size) * -1);
|
||||
content: "";
|
||||
border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
|
||||
}
|
||||
|
||||
.media-library-menu__link {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-top: calc(var(--vertical-tabs-border-size) * -1);
|
||||
padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size)); /* LTR */
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
border: var(--vertical-tabs-border-size) solid transparent;
|
||||
border-width: var(--vertical-tabs-border-size) 0 var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size); /* LTR */
|
||||
border-radius: var(--vertical-tabs-border-radius) 0 0 var(--vertical-tabs-border-radius); /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-menu__link {
|
||||
padding-right: calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));
|
||||
padding-left: var(--space-s);
|
||||
border-width: var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size) var(--vertical-tabs-border-size) 0;
|
||||
border-radius: 0 var(--vertical-tabs-border-radius) var(--vertical-tabs-border-radius) 0;
|
||||
}
|
||||
|
||||
/* Menu link states. */
|
||||
.media-library-menu__link:focus {
|
||||
z-index: calc(var(--vertical-tabs-menu--z-index) + 3); /* Focus state should be on the highest level to make the focus effect be fully visible. This also means that it should have bigger z-index than the selected link. */
|
||||
text-decoration: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.media-library-menu__link:hover {
|
||||
text-decoration: none;
|
||||
color: var(--color-absolutezero);
|
||||
/* These borders are necessary to replace the dividing lines while in the hover state. */
|
||||
border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
|
||||
border-bottom: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
|
||||
background: var(--color-bgblue-hover);
|
||||
}
|
||||
|
||||
/* This pseudo element provides the background for the hover state. */
|
||||
.media-library-menu__link::before {
|
||||
position: absolute;
|
||||
z-index: calc(var(--vertical-tabs-menu--z-index) - 1); /* This should be on a lower level than the menu-item separator lines. */
|
||||
top: calc(var(--vertical-tabs-border-size) * -1);
|
||||
right: 0; /* LTR */
|
||||
bottom: calc(var(--vertical-tabs-border-size) * -1);
|
||||
left: calc(var(--vertical-tabs-menu-link--active-border-size) * -1); /* LTR */
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
[dir="rtl"] .media-library-menu__link::before {
|
||||
right: calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.media-library-menu__link:focus::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);
|
||||
border-radius: var(--vertical-tabs-border-radius);
|
||||
}
|
||||
|
||||
.media-library-menu__link.active {
|
||||
z-index: calc(var(--vertical-tabs-menu--z-index) + 2); /* The selected menu link should be on a higher level than the white masking line that hides the gray separator. */
|
||||
color: var(--color-absolutezero);
|
||||
border-color: var(--vertical-tabs-border-color) transparent;
|
||||
background-color: var(--color-white);
|
||||
box-shadow: var(--vertical-tabs-shadow);
|
||||
}
|
||||
|
||||
.media-library-menu__link.active:hover {
|
||||
color: var(--color-absolutezero-hover);
|
||||
background-color: var(--color-bgblue-hover);
|
||||
}
|
||||
|
||||
.media-library-menu__link.active::before {
|
||||
z-index: 1; /* The blue active-tab indication should be on a higher level than the green focus border. */
|
||||
border-left: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color); /* LTR */
|
||||
border-radius: var(--base-border-radius) 0 0 var(--base-border-radius); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .media-library-menu__link.active::before {
|
||||
border-right: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);
|
||||
border-left: 0;
|
||||
border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
|
||||
}
|
||||
|
||||
.media-library-menu__link.active:hover::before {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.media-library-content {
|
||||
width: 100%;
|
||||
padding: 1em;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.media-library-menu + .media-library-content {
|
||||
z-index: var(--vertical-tabs-menu--z-index);
|
||||
border-left: var(--vertical-tabs-border); /* LTR */
|
||||
box-shadow: var(--vertical-tabs-shadow);
|
||||
}
|
||||
|
||||
[dir="rtl"] .media-library-menu + .media-library-content {
|
||||
border-right: var(--vertical-tabs-border);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
/* Generic media add form styles. */
|
||||
.media-library-add-form--without-input .form-item {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove outline from added media list.
|
||||
*
|
||||
* The added media list receives focus after adding new media, but since it is
|
||||
* not an interactive element, it does not need an outline.
|
||||
*/
|
||||
.media-library-add-form__added-media {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* This Media Library form is an exception to the extrasmall button pattern.
|
||||
* Additional padding is needed to accommodate the remove button icon. The
|
||||
* margin is adjusted for alignment within the media library dialog.
|
||||
*/
|
||||
.media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
|
||||
margin: var(--space-xs) 0; /* LTR */
|
||||
/* Left padding is double the background size of the button icon. */
|
||||
padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px) calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) * 2);
|
||||
}
|
||||
|
||||
/* This is needed to override the default extrasmall button left margin. */
|
||||
[dir="rtl"] .media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.media-library-add-form__input-wrapper {
|
||||
padding: var(--space-xs) var(--space-l) var(--space-l) var(--space-l);
|
||||
border: var(--details-border-size) solid var(--details-border-color);
|
||||
border-radius: var(--base-border-radius);
|
||||
background-color: var(--color-white);
|
||||
box-shadow: var(--details-box-shadow);
|
||||
}
|
||||
|
||||
/* Style the media add upload form. */
|
||||
.media-library-add-form--upload.media-library-add-form--without-input .form-item-upload {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.media-library-add-form--upload.media-library-add-form--with-input .form-managed-file__main,
|
||||
.media-library-add-form--upload.media-library-add-form--with-input .form-managed-file.no-upload {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Adjust the focus border on this element so it is not too close to buttons. */
|
||||
.media-library-add-form__added-media:focus {
|
||||
box-shadow:
|
||||
0 0 0 calc(var(--focus-border-offset-size) + 2px) var(--color-white),
|
||||
0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px) var(--color-focus);
|
||||
}
|
||||
|
||||
.media-library-add-form .file-upload-help {
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
/* Style the media add oEmbed form. */
|
||||
.media-library-add-form--oembed .media-library-add-form__input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 37.5em) {
|
||||
.media-library-add-form--oembed .media-library-add-form__input-wrapper {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.media-library-add-form--oembed.media-library-add-form--without-input .form-item-url {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.media-library-add-form-oembed-url {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Media add form selection styles. */
|
||||
.media-library-add-form__selected-media {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
/* Change to padding to account for the negative margin for flex grid. */
|
||||
.media-library-add-form__selected-media .details-wrapper {
|
||||
padding: 0 10px 1em 10px;
|
||||
}
|
||||
|
||||
.media-library-add-form__selected-media .media-library-item .field--name-thumbnail img {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
/* Generic media library view styles. */
|
||||
.media-library-select-all {
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
margin: 10px 8px;
|
||||
}
|
||||
.media-library-select-all input {
|
||||
margin-right: 10px;
|
||||
}
|
||||
[dir="rtl"] .media-library-select-all input {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.media-library-views-form,
|
||||
.media-library-selection,
|
||||
.media-library-add-form__selected-media .details-wrapper,
|
||||
.media-library-view .form--inline {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.media-library-views-form > .form-actions,
|
||||
.media-library-views-form > .field-actions {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.media-library-views-form__header {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.media-library-views-form__header .form-item {
|
||||
margin-right: 8px; /* @TODO RTL? */
|
||||
}
|
||||
|
||||
.media-library-views-form__rows {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-basis: 100%;
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Override the table display of the visually hidden labels.
|
||||
*
|
||||
* The width, height and overflow properties in the styles for the
|
||||
* .visually-hidden class do not work correctly if the element has a table
|
||||
* display.
|
||||
*/
|
||||
.media-library-item label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Media library widget view styles. */
|
||||
.media-library-wrapper .media-library-view {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.media-library-wrapper .view-header {
|
||||
align-self: flex-end;
|
||||
margin: 1em 0;
|
||||
text-align: right; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .media-library-wrapper .view-header {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.media-library-wrapper .media-library-view .view-filters,
|
||||
.media-library-wrapper .media-library-view .view-content {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.media-library-wrapper .views-display-link {
|
||||
margin: 0;
|
||||
padding-left: 22px; /* LTR */
|
||||
color: #333;
|
||||
font-size: 15px;
|
||||
line-height: 16px;
|
||||
}
|
||||
[dir="rtl"] .media-library-wrapper .views-display-link {
|
||||
padding-right: 22px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.media-library-wrapper .views-display-link.is-active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.media-library-wrapper .views-display-link-widget {
|
||||
margin-right: 15px;
|
||||
background: url(../../../../misc/icons/333333/grid.svg) left 0 no-repeat; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .media-library-wrapper .views-display-link-widget {
|
||||
background-position: right 0;
|
||||
}
|
||||
|
||||
.media-library-wrapper .views-display-link-widget_table {
|
||||
background: url(../../../../misc/icons/333333/table.svg) left 0 no-repeat; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .media-library-wrapper .views-display-link-widget_table {
|
||||
background-position: right 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Style the media library grid items.
|
||||
*/
|
||||
.media-library-item,
|
||||
.media-library-item__preview-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/**
|
||||
* Ajax throbbers inside a media library item.
|
||||
*/
|
||||
.media-library-item .ajax-progress.ajax-progress.ajax-progress {
|
||||
position: absolute;
|
||||
z-index: calc(var(--vertical-tabs-menu--z-index) + 1);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
box-sizing: border-box;
|
||||
width: 3rem; /* 56px */
|
||||
height: 3rem;
|
||||
margin: -1.5rem;
|
||||
border: var(--input-border-size) solid var(--jui-dropdown-border-color);
|
||||
border-radius: 3.5rem;
|
||||
background: var(--color-white);
|
||||
box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);
|
||||
}
|
||||
.media-library-item .ajax-progress__throbber {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
margin: -0.875rem;
|
||||
border: 3px solid var(--color-absolutezero);
|
||||
border-right: 3px dotted transparent;
|
||||
}
|
||||
.media-library-item .ajax-progress__message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.media-library-item--grid {
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 50%;
|
||||
padding: 8px;
|
||||
vertical-align: top;
|
||||
outline: none;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.media-library-item--grid::before {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 7px;
|
||||
width: calc(100% - 16px);
|
||||
height: calc(100% - 16px);
|
||||
content: "";
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
color 0.2s,
|
||||
background 0.2s;
|
||||
pointer-events: none;
|
||||
border: 1px solid #dbdbdb;
|
||||
border-radius: 2px;
|
||||
box-shadow: var(--details-box-shadow);
|
||||
}
|
||||
|
||||
/**
|
||||
* The media library grid item focus border is moved to a child element to
|
||||
* improve padding.
|
||||
*/
|
||||
.media-library-item--grid:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.media-library-item--grid:focus .media-library-item__preview-wrapper {
|
||||
outline: var(--focus-outline);
|
||||
box-shadow: var(--focus-box-shadow);
|
||||
}
|
||||
|
||||
/* Media library widget weight field styles. */
|
||||
.media-library-item--grid .form-item {
|
||||
margin: 0.75em;
|
||||
}
|
||||
|
||||
/* The selected items in the add form should be shown a bit smaller. */
|
||||
.media-library-add-form__selected-media .media-library-item--small {
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
.media-library-widget-modal .ui-dialog-buttonpane {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.media-library-widget-modal .ui-dialog-buttonpane .form-actions,
|
||||
.media-library-widget-modal .ui-dialog-buttonpane .field-actions {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* By default, the dialog is too narrow to be usable.
|
||||
* @see Drupal.ckeditor5.openDialog()
|
||||
*/
|
||||
.ui-dialog--narrow.media-library-widget-modal {
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 45em) {
|
||||
.media-library-item--grid {
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
/* Change the width for the modal and widget since there is less space. */
|
||||
.media-library-widget-modal .media-library-item--grid,
|
||||
.media-library-selection .media-library-item--grid {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/* The selected items in the add form should be shown a bit smaller. */
|
||||
.media-library-add-form__selected-media .media-library-item--small {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 60em) {
|
||||
.media-library-item--grid {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/* Change the width for the modal and widget since there is less space. */
|
||||
.media-library-widget-modal .media-library-item--grid,
|
||||
.media-library-selection .media-library-item--grid {
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
/* The selected items in the add form should be shown a bit smaller. */
|
||||
.media-library-add-form__selected-media .media-library-item--small {
|
||||
width: 16.6%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 77em) {
|
||||
.media-library-item--grid {
|
||||
width: 16.6%;
|
||||
}
|
||||
|
||||
/* Change the width for the modal and widget since there is less space. */
|
||||
.media-library-widget-modal .media-library-item--grid,
|
||||
.media-library-selection .media-library-item--grid {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/* The selected items in the add form should be shown a bit smaller. */
|
||||
.media-library-add-form__selected-media .media-library-item--small {
|
||||
width: 16.6%;
|
||||
}
|
||||
}
|
||||
|
||||
.media-library-item--grid .field--name-thumbnail {
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
|
||||
.media-library-item--grid .field--name-thumbnail img {
|
||||
height: 180px;
|
||||
object-fit: contain;
|
||||
object-position: center center;
|
||||
}
|
||||
|
||||
.media-library-item--grid.is-hover::before,
|
||||
.media-library-item--grid.checked::before,
|
||||
.media-library-item--grid.is-focus::before {
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
border-width: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.media-library-item--grid.is-hover::before,
|
||||
.media-library-item--grid.checked.is-hover::before {
|
||||
border-color: var(--color-absolutezero-hover);
|
||||
}
|
||||
|
||||
.media-library-item--grid.is-focus::before {
|
||||
border-color: var(--color-focus);
|
||||
}
|
||||
|
||||
.media-library-item--grid.checked::before {
|
||||
border-color: var(--button--focus-border-color);
|
||||
}
|
||||
|
||||
.media-library-item--grid .form-boolean--type-checkbox:checked {
|
||||
border-color: var(--button--focus-border-color);
|
||||
background-color: var(--button--focus-border-color);
|
||||
}
|
||||
|
||||
.media-library-item__click-to-select-checkbox {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 16px;
|
||||
left: 16px; /* LTR */
|
||||
display: block;
|
||||
}
|
||||
[dir="rtl"] .media-library-item__click-to-select-checkbox {
|
||||
right: 16px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.media-library-item__click-to-select-checkbox input {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.media-library-item__click-to-select-checkbox .form-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.media-library-item__click-to-select-trigger {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Media library item table styles. */
|
||||
.media-library-item--table img {
|
||||
max-width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Media library entity view display styles. */
|
||||
.media-library-item__preview {
|
||||
padding-bottom: 34px;
|
||||
}
|
||||
|
||||
.field--widget-media-library-widget .media-library-item__preview {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.field--widget-media-library-widget .media-library-item__preview img {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
.field--widget-media-library-widget .js-media-library-item:only-child .media-library-item__preview {
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
.media-library-item__status {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 5px; /* LTR */
|
||||
padding: 5px 10px;
|
||||
pointer-events: none;
|
||||
color: #e4e4e4;
|
||||
background: #666;
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
}
|
||||
[dir="rtl"] .media-library-item__status {
|
||||
right: 5px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.media-library-item__attributes {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
max-width: calc(100% - 10px);
|
||||
max-height: calc(100% - 50px);
|
||||
padding: 5px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.media-library-item__name {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: calc(var(--space-xs) / 2) var(--space-xs);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.media-library-item__attributes:hover .media-library-item__name,
|
||||
.media-library-item--grid.is-focus .media-library-item__name,
|
||||
.media-library-item--grid.checked .media-library-item__name {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.media-library-item__type {
|
||||
color: #696969;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.media-library-item--disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Media library widget styles. */
|
||||
.media-library-widget {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.media-library-widget__toggle-weight.media-library-widget__toggle-weight {
|
||||
position: absolute;
|
||||
top: var(--space-s);
|
||||
right: var(--space-m); /* LTR */
|
||||
text-decoration: none;
|
||||
}
|
||||
[dir="rtl"] .media-library-widget__toggle-weight.media-library-widget__toggle-weight {
|
||||
right: auto;
|
||||
left: var(--space-m);
|
||||
}
|
||||
|
||||
/* Add negative margin for flex grid. */
|
||||
.media-library-selection {
|
||||
margin: 1em -8px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Media library widget edit and delete button styles.
|
||||
*
|
||||
* We have to override the .button styles since buttons make heavy use of
|
||||
* background and border property changes.
|
||||
*/
|
||||
.media-library-item__edit,
|
||||
.media-library-item__edit:hover,
|
||||
.media-library-item__edit:focus,
|
||||
.media-library-item__remove,
|
||||
.media-library-item__remove:hover,
|
||||
.media-library-item__remove:focus,
|
||||
.media-library-item__remove.button,
|
||||
.media-library-item__remove.button:first-child,
|
||||
.media-library-item__remove.button:disabled,
|
||||
.media-library-item__remove.button:disabled:active,
|
||||
.media-library-item__remove.button:hover,
|
||||
.media-library-item__remove.button:focus {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 10px;
|
||||
overflow: hidden;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 5px;
|
||||
padding: 0;
|
||||
transition: 0.2s border-color;
|
||||
color: transparent;
|
||||
background-size: 12px;
|
||||
text-shadow: none;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.media-library-item__edit {
|
||||
right: 40px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .media-library-item__edit {
|
||||
right: auto;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.media-library-item__remove {
|
||||
right: 10px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .media-library-item__remove {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.media-library-item__edit {
|
||||
/* !important to override button class border. */
|
||||
border: 1px solid var(--color-gray-200) !important;
|
||||
background-image: url("../../images/icons/545560/pencil.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 12px;
|
||||
}
|
||||
.media-library-item__edit:active {
|
||||
background-image: url("../../../../misc/icons/ffffff/pencil.svg");
|
||||
}
|
||||
.media-library-item__remove,
|
||||
.media-library-item__remove.button,
|
||||
.media-library-item__remove.button:first-child,
|
||||
.media-library-item__remove.button:disabled,
|
||||
.media-library-item__remove.button:disabled:active,
|
||||
.media-library-item__remove.button:hover,
|
||||
.media-library-item__remove.button:focus {
|
||||
/* !important to override button class border. */
|
||||
border: 1px solid var(--color-gray-200) !important;
|
||||
background-image: url("../../../../misc/icons/545560/ex.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 12px;
|
||||
}
|
||||
|
||||
.media-library-item__remove:active,
|
||||
.media-library-item__remove.button:active,
|
||||
.media-library-item__remove.button:disabled:active {
|
||||
/* !important to override button class border. */
|
||||
border-color: var(--color-absolutezero) !important;
|
||||
background-image: url("../../../../misc/icons/ffffff/ex.svg");
|
||||
}
|
||||
|
||||
/* Style the added media item container. */
|
||||
.media-library-add-form__media {
|
||||
position: relative;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #c0c0c0;
|
||||
}
|
||||
|
||||
/* Do not show the bottom border and padding for the last item. */
|
||||
.media-library-add-form__media:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.media-library-add-form__preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 220px;
|
||||
margin-right: 20px; /* LTR */
|
||||
background: var(--color-gray-050-o-40);
|
||||
}
|
||||
[dir="rtl"] .media-library-add-form__preview {
|
||||
margin-right: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.media-library-add-form__fields {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.media-library-add-form__remove-button {
|
||||
position: absolute;
|
||||
right: 0; /* LTR */
|
||||
background-image: url("../../../../misc/icons/000000/ex.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: var(--space-xs) center;
|
||||
background-size: var(--space-s);
|
||||
}
|
||||
[dir="rtl"] .media-library-add-form__remove-button {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
.media-library-add-form__remove-button.button:disabled {
|
||||
background-image: url("../../../../misc/icons/8e929c/ex.svg");
|
||||
}
|
||||
|
||||
.views-live-preview .media-library-view div.views-row + div.views-row {
|
||||
margin-top: 0;
|
||||
}
|
||||
371
web/core/themes/claro/css/theme/toolbar.icons.theme.css
Normal file
371
web/core/themes/claro/css/theme/toolbar.icons.theme.css
Normal file
@ -0,0 +1,371 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styling for toolbar module icons.
|
||||
*
|
||||
* If Claro is the admin theme, this stylesheet will be used by the active theme
|
||||
* even if the active theme is not Claro.
|
||||
*/
|
||||
|
||||
.toolbar .toolbar-icon {
|
||||
position: relative;
|
||||
padding-left: 2.75em; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .toolbar .toolbar-icon {
|
||||
padding-right: 2.75em;
|
||||
padding-left: 1.3333em;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-icon::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.6667em; /* LTR */
|
||||
display: block;
|
||||
width: 1.538em;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
background-position: center center;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] .toolbar .toolbar-icon::before {
|
||||
right: 0.6667em;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.toolbar button.toolbar-icon {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-menu ul .toolbar-icon {
|
||||
padding-left: 1.3333em; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .toolbar .toolbar-menu ul .toolbar-icon {
|
||||
padding-right: 1.3333em;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-menu ul a.toolbar-icon::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu ul a {
|
||||
padding-left: 2.75em; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul a {
|
||||
padding-right: 2.75em;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
|
||||
padding-left: 3.75em; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
|
||||
padding-right: 3.75em;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu a {
|
||||
padding-right: 4em; /* LTR */
|
||||
padding-left: 2.75em; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu a {
|
||||
padding-right: 2.75em;
|
||||
padding-left: 4em;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.is-active::before {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
/**
|
||||
* Top level icons.
|
||||
*/
|
||||
|
||||
.toolbar-bar .toolbar-icon-menu::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M14.752 6h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 0h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .69.56 1.25 1.25 1.25h13.502c.689 0 1.25-.56 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 12h-13.502c-.69 0-1.25.561-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.689-.561-1.25-1.25-1.25z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-bar .toolbar-icon-menu:active::before,
|
||||
.toolbar-bar .toolbar-icon-menu.is-active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.752 6h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 0h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .69.56 1.25 1.25 1.25h13.502c.689 0 1.25-.56 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 12h-13.502c-.69 0-1.25.561-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.689-.561-1.25-1.25-1.25z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-bar .toolbar-icon-help::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-bar .toolbar-icon-help:active::before,
|
||||
.toolbar-bar .toolbar-icon-help.is-active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/**
|
||||
* Main menu icons.
|
||||
*/
|
||||
|
||||
.toolbar-icon-system-admin-content::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M12.502 7h-5c-.276 0-.502-.225-.502-.5v-5c0-.275-.225-.5-.5-.5h-3c-.275 0-.5.225-.5.5v12.029c0 .275.225.5.5.5h9.002c.275 0 .5-.225.5-.5v-6.029c0-.275-.225-.5-.5-.5zM8.502 6h4c.275 0 .34-.159.146-.354l-4.293-4.292c-.195-.195-.353-.129-.353.146v4c0 .275.225.5.5.5z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-icon-system-admin-content:active::before,
|
||||
.toolbar-icon-system-admin-content.is-active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23000000' d='M12.502 7h-5c-.276 0-.502-.225-.502-.5v-5c0-.275-.225-.5-.5-.5h-3c-.275 0-.5.225-.5.5v12.029c0 .275.225.5.5.5h9.002c.275 0 .5-.225.5-.5v-6.029c0-.275-.225-.5-.5-.5zM8.502 6h4c.275 0 .34-.159.146-.354l-4.293-4.292c-.195-.195-.353-.129-.353.146v4c0 .275.225.5.5.5z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-icon-system-admin-structure::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23787878' d='M15.002,11.277c0-0.721,0-1.471,0-2.014c0-1.456-0.824-2.25-2.25-2.25c-1.428,0-3.5,0-3.5,0c-0.139,0-0.25-0.112-0.25-0.25v-2.04c0.596-0.346,1-0.984,1-1.723c0-1.104-0.895-2-2-2C6.896,1,6,1.896,6,3c0,0.738,0.405,1.376,1,1.722v2.042c0,0.138-0.112,0.25-0.25,0.25c0,0-2.138,0-3.5,0S1,7.932,1,9.266c0,0.521,0,1.277,0,2.012c-0.595,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2c0-0.732-0.405-1.377-1-1.729V9.266c0-0.139,0.112-0.25,0.25-0.25h3.536C6.904,9.034,7,9.126,7,9.25v2.027C6.405,11.624,6,12.26,6,13c0,1.104,0.896,2,2.002,2c1.105,0,2-0.896,2-2c0-0.738-0.404-1.376-1-1.723V9.25c0-0.124,0.098-0.216,0.215-0.234h3.535c0.137,0,0.25,0.111,0.25,0.25v2.012c-0.596,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2C16.002,12.262,15.598,11.623,15.002,11.277z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-icon-system-admin-structure:active::before,
|
||||
.toolbar-icon-system-admin-structure.is-active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath d='M15.002,11.277c0-0.721,0-1.471,0-2.014c0-1.456-0.824-2.25-2.25-2.25c-1.428,0-3.5,0-3.5,0c-0.139,0-0.25-0.112-0.25-0.25v-2.04c0.596-0.346,1-0.984,1-1.723c0-1.104-0.895-2-2-2C6.896,1,6,1.896,6,3c0,0.738,0.405,1.376,1,1.722v2.042c0,0.138-0.112,0.25-0.25,0.25c0,0-2.138,0-3.5,0S1,7.932,1,9.266c0,0.521,0,1.277,0,2.012c-0.595,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2c0-0.732-0.405-1.377-1-1.729V9.266c0-0.139,0.112-0.25,0.25-0.25h3.536C6.904,9.034,7,9.126,7,9.25v2.027C6.405,11.624,6,12.26,6,13c0,1.104,0.896,2,2.002,2c1.105,0,2-0.896,2-2c0-0.738-0.404-1.376-1-1.723V9.25c0-0.124,0.098-0.216,0.215-0.234h3.535c0.137,0,0.25,0.111,0.25,0.25v2.012c-0.596,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2C16.002,12.262,15.598,11.623,15.002,11.277z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-icon-system-themes-page::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M8.184 7.928l-1.905 1.983-3.538-2.436 4.714-4.713 2.623 3.183-1.894 1.983zm-1.746-7.523c-.236-.416-.803-.649-1.346.083-.259.349-4.727 4.764-4.91 4.983-.182.218-.294.721.044.976.34.258 5.611 3.933 5.611 3.933l-.225.229c.7.729.816.854 1.046.863.75.016 2.035-1.457 2.578-.854.541.604 3.537 3.979 3.537 3.979.51.531 1.305.559 1.815.041.521-.521.541-1.311.025-1.848 0 0-2.742-2.635-3.904-3.619-.578-.479.869-2.051.854-2.839-.008-.238-.125-.361-.823-1.095l-.22.243c0 .003-3.846-4.659-4.082-5.075z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-icon-system-themes-page:active::before,
|
||||
.toolbar-icon-system-themes-page.is-active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M8.184 7.928l-1.905 1.983-3.538-2.436 4.714-4.713 2.623 3.183-1.894 1.983zm-1.746-7.523c-.236-.416-.803-.649-1.346.083-.259.349-4.727 4.764-4.91 4.983-.182.218-.294.721.044.976.34.258 5.611 3.933 5.611 3.933l-.225.229c.7.729.816.854 1.046.863.75.016 2.035-1.457 2.578-.854.541.604 3.537 3.979 3.537 3.979.51.531 1.305.559 1.815.041.521-.521.541-1.311.025-1.848 0 0-2.742-2.635-3.904-3.619-.578-.479.869-2.051.854-2.839-.008-.238-.125-.361-.823-1.095l-.22.243c0 .003-3.846-4.659-4.082-5.075z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-icon-entity-user-collection::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M6.722 11.291l.451-.17-.165-.32c-.536-1.039-.685-1.934-.761-2.672-.082-.808-.144-2.831 1.053-4.189.244-.278.493-.493.743-.675.012-.826-.135-1.766-.646-2.345-.618-.7-1.4-.787-1.4-.787l-.497-.055-.498.055s-.783.087-1.398.787c-.617.702-.717 1.948-.625 2.855.06.583.17 1.263.574 2.05.274.533.341.617.355 1.01.022.595.027 1.153-.671 1.538-.697.383-1.564.508-2.403 1.088-.596.41-.709 1.033-.78 1.459l-.051.41c-.029.273.173.498.448.498h5.012c.457-.24.89-.402 1.259-.537zM5.064 15.096c.07-.427.184-1.05.78-1.46.838-.581 1.708-.706 2.404-1.089.699-.385.693-.943.672-1.537-.014-.393-.08-.477-.354-1.01-.406-.787-.515-1.467-.576-2.049-.093-.909.008-2.155.625-2.856.615-.7 1.398-.787 1.398-.787l.492-.055h.002l.496.055s.781.087 1.396.787c.615.701.72 1.947.623 2.855-.062.583-.172 1.262-.571 2.049-.271.533-.341.617-.354 1.01-.021.595-.062 1.22.637 1.604.697.385 1.604.527 2.438 1.104.923.641.822 1.783.822 1.783-.022.275-.269.5-.542.5h-9.991c-.275 0-.477-.223-.448-.496l.051-.408z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-icon-entity-user-collection:active::before,
|
||||
.toolbar-icon-entity-user-collection.is-active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23000000' d='M6.722 11.291l.451-.17-.165-.32c-.536-1.039-.685-1.934-.761-2.672-.082-.808-.144-2.831 1.053-4.189.244-.278.493-.493.743-.675.012-.826-.135-1.766-.646-2.345-.618-.7-1.4-.787-1.4-.787l-.497-.055-.498.055s-.783.087-1.398.787c-.617.702-.717 1.948-.625 2.855.06.583.17 1.263.574 2.05.274.533.341.617.355 1.01.022.595.027 1.153-.671 1.538-.697.383-1.564.508-2.403 1.088-.596.41-.709 1.033-.78 1.459l-.051.41c-.029.273.173.498.448.498h5.012c.457-.24.89-.402 1.259-.537zM5.064 15.096c.07-.427.184-1.05.78-1.46.838-.581 1.708-.706 2.404-1.089.699-.385.693-.943.672-1.537-.014-.393-.08-.477-.354-1.01-.406-.787-.515-1.467-.576-2.049-.093-.909.008-2.155.625-2.856.615-.7 1.398-.787 1.398-.787l.492-.055h.002l.496.055s.781.087 1.396.787c.615.701.72 1.947.623 2.855-.062.583-.172 1.262-.571 2.049-.271.533-.341.617-.354 1.01-.021.595-.062 1.22.637 1.604.697.385 1.604.527 2.438 1.104.923.641.822 1.783.822 1.783-.022.275-.269.5-.542.5h-9.991c-.275 0-.477-.223-.448-.496l.051-.408z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-icon-system-modules-list::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M11.002 11v2.529c0 .275-.225.471-.5.471h-3c-.827 0-1.112-.754-.604-1.316l.81-.725c.509-.562.513-1.461-.097-2.01-.383-.344-1.027-.728-2.111-.728s-1.727.386-2.109.731c-.609.549-.606 1.45-.097 2.015l.808.717c.509.562.223 1.316-.602 1.316h-3c-.276 0-.5-.193-.5-.471v-9.029c0-.276.224-.5.5-.5h3c.825 0 1.111-.768.602-1.332l-.808-.73c-.51-.563-.513-1.465.097-2.014.382-.344 1.025-.731 2.109-.731s1.728.387 2.111.731c.608.548.606 1.45.097 2.014l-.81.73c-.509.564-.223 1.332.603 1.332h3c.274 0 .5.224.5.5v2.5c0 .825.642 1.111 1.233.602l.771-.808c.599-.51 1.547-.513 2.127.097.364.383.772 1.025.772 2.109s-.408 1.727-.771 2.109c-.58.604-1.529.604-2.127.097l-.77-.808c-.593-.509-1.234-.223-1.234.602z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-icon-system-modules-list:active::before,
|
||||
.toolbar-icon-system-modules-list.is-active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M11.002 11v2.529c0 .275-.225.471-.5.471h-3c-.827 0-1.112-.754-.604-1.316l.81-.725c.509-.562.513-1.461-.097-2.01-.383-.344-1.027-.728-2.111-.728s-1.727.386-2.109.731c-.609.549-.606 1.45-.097 2.015l.808.717c.509.562.223 1.316-.602 1.316h-3c-.276 0-.5-.193-.5-.471v-9.029c0-.276.224-.5.5-.5h3c.825 0 1.111-.768.602-1.332l-.808-.73c-.51-.563-.513-1.465.097-2.014.382-.344 1.025-.731 2.109-.731s1.728.387 2.111.731c.608.548.606 1.45.097 2.014l-.81.73c-.509.564-.223 1.332.603 1.332h3c.274 0 .5.224.5.5v2.5c0 .825.642 1.111 1.233.602l.771-.808c.599-.51 1.547-.513 2.127.097.364.383.772 1.025.772 2.109s-.408 1.727-.771 2.109c-.58.604-1.529.604-2.127.097l-.77-.808c-.593-.509-1.234-.223-1.234.602z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-icon-system-admin-config::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M14.416 11.586l-.01-.008v-.001l-5.656-5.656c.15-.449.252-.921.252-1.421 0-2.485-2.016-4.5-4.502-4.5-.505 0-.981.102-1.434.255l2.431 2.431-.588 2.196-2.196.588-2.445-2.445c-.162.464-.268.956-.268 1.475 0 2.486 2.014 4.5 4.5 4.5.5 0 .972-.102 1.421-.251l5.667 5.665c.781.781 2.047.781 2.828 0s.781-2.047 0-2.828z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-icon-system-admin-config:active::before,
|
||||
.toolbar-icon-system-admin-config.is-active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M14.416 11.586l-.01-.008v-.001l-5.656-5.656c.15-.449.252-.921.252-1.421 0-2.485-2.016-4.5-4.502-4.5-.505 0-.981.102-1.434.255l2.431 2.431-.588 2.196-2.196.588-2.445-2.445c-.162.464-.268.956-.268 1.475 0 2.486 2.014 4.5 4.5 4.5.5 0 .972-.102 1.421-.251l5.667 5.665c.781.781 2.047.781 2.828 0s.781-2.047 0-2.828z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-icon-system-admin-reports::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M4 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-4.25c0-.274.225-.5.5-.5h3c.275 0 .5.226.5.5v4.25zM10.002 13.529c0 .275-.225.5-.5.5h-3.002c-.275 0-.5-.225-.5-.5v-13c0-.275.225-.5.5-.5h3.002c.275 0 .5.225.5.5v13zM16.002 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-9.5c0-.275.225-.5.5-.5h3c.275 0 .5.225.5.5v9.5z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-icon-system-admin-reports:active::before,
|
||||
.toolbar-icon-system-admin-reports.is-active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23000000' d='M4 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-4.25c0-.274.225-.5.5-.5h3c.275 0 .5.226.5.5v4.25zM10.002 13.529c0 .275-.225.5-.5.5h-3.002c-.275 0-.5-.225-.5-.5v-13c0-.275.225-.5.5-.5h3.002c.275 0 .5.225.5.5v13zM16.002 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-9.5c0-.275.225-.5.5-.5h3c.275 0 .5.225.5.5v9.5z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-icon-help-main::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar-icon-help-main:active::before,
|
||||
.toolbar-icon-help-main.is-active::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 16.5em) {
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
|
||||
width: 4em;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
text-indent: -624.9375rem;
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
left: 0; /* LTR */
|
||||
width: 100%;
|
||||
background-size: 42% auto;
|
||||
}
|
||||
.no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
background-size: auto auto;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 36em) {
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
|
||||
width: auto;
|
||||
padding-right: 1.3333em; /* LTR */
|
||||
padding-left: 2.75em; /* LTR */
|
||||
text-indent: 0;
|
||||
background-position: left center; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
|
||||
padding-right: 2.75em;
|
||||
padding-left: 1.3333em;
|
||||
background-position: right center;
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
left: 0.6667em; /* LTR */
|
||||
width: 1.538em;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
.no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
background-size: auto auto;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
right: 0.6667em;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Accessibility/focus
|
||||
*/
|
||||
|
||||
.toolbar-tab a:focus {
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.toolbar-lining button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.toolbar-tray-horizontal a:focus,
|
||||
.toolbar-box a:focus {
|
||||
outline: none;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.toolbar-box a:hover:focus {
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-icon.toolbar-handle:focus {
|
||||
outline: none;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle.
|
||||
*/
|
||||
|
||||
.toolbar .toolbar-icon.toolbar-handle {
|
||||
width: 4em;
|
||||
text-indent: -624.9375rem;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-icon.toolbar-handle::before {
|
||||
left: 1.6667em; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .toolbar .toolbar-icon.toolbar-handle::before {
|
||||
right: 1.6667em;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-icon.toolbar-handle::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%235181C6' d='M8.002 1c-3.869 0-7.002 3.134-7.002 7s3.133 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.459 6.336l-4.105 4.105c-.196.189-.515.189-.708 0l-4.107-4.105c-.194-.194-.194-.513 0-.707l.977-.978c.194-.194.513-.194.707 0l2.422 2.421c.192.195.513.195.708 0l2.422-2.42c.188-.194.512-.194.707 0l.977.977c.193.194.193.513 0 .707z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar .toolbar-icon.toolbar-handle.open::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M8.002 1c-3.867 0-7.002 3.134-7.002 7s3.135 7 7.002 7 7-3.134 7-7-3.133-7-7-7zm4.462 8.37l-.979.979c-.19.19-.516.19-.707 0l-2.422-2.419c-.196-.194-.515-.194-.708 0l-2.423 2.417c-.194.193-.513.193-.707 0l-.977-.976c-.194-.194-.194-.514 0-.707l4.106-4.106c.193-.194.515-.194.708 0l4.109 4.105c.19.192.19.513 0 .707z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%235181C6' d='M2.611 5.393c-.17-.216-.084-.393.191-.393h10.397c.275 0 .361.177.191.393l-5.08 6.464c-.17.216-.452.216-.622 0l-5.077-6.464z'/%3e%3c/svg%3e");
|
||||
background-size: 75%;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M13.391 10.607c.17.216.084.393-.191.393h-10.398c-.275 0-.361-.177-.191-.393l5.08-6.464c.17-.216.45-.216.62 0l5.08 6.464z'/%3e%3c/svg%3e");
|
||||
background-size: 75%;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-icon-escape-admin::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M8.002 1c-3.868 0-7.002 3.133-7.002 7 0 3.865 3.134 7 7.002 7 3.865 0 7-3.135 7-7 0-3.867-3.135-7-7-7zm2.348 10.482l-.977.977c-.195.193-.514.193-.707 0l-4.108-4.105c-.194-.195-.194-.514 0-.708l4.108-4.105c.193-.194.512-.194.707 0l.979.977c.191.194.191.513 0 .707l-2.422 2.421c-.195.194-.195.515 0 .708l2.419 2.421c.196.19.196.512.001.707z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
[dir="rtl"] .toolbar .toolbar-icon-escape-admin::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M8.002 1c-3.868 0-7.002 3.135-7.002 7 0 3.867 3.134 7 7.002 7 3.865 0 7-3.133 7-7 0-3.865-3.135-7-7-7zm3.441 7.357l-4.106 4.104c-.194.191-.514.191-.708 0l-.978-.979c-.194-.193-.194-.518 0-.707l2.423-2.421c.195-.195.195-.514 0-.708l-2.422-2.421c-.194-.194-.194-.513 0-.707l.977-.977c.194-.194.514-.194.708 0l4.106 4.108c.191.194.191.515 0 .708z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/**
|
||||
* Orientation toggle.
|
||||
*/
|
||||
|
||||
.toolbar .toolbar-toggle-orientation button {
|
||||
width: 2.4375rem;
|
||||
height: 2.4375rem;
|
||||
padding: 0;
|
||||
text-indent: -999em;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-toggle-orientation button::before {
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation .toolbar-icon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* In order to support a hover effect on the SVG images, while also supporting
|
||||
* RTL text direction and no SVG support, this little icon requires some very
|
||||
* specific targeting, setting and unsetting.
|
||||
*/
|
||||
|
||||
.toolbar .toolbar-toggle-orientation [value="vertical"]::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M2.5 2h-2.491v12.029h2.491c.276 0 .5-.225.5-.5v-11.029c0-.276-.224-.5-.5-.5zM14.502 6.029h-4c-.275 0-.5-.225-.5-.5v-1c0-.275-.16-.341-.354-.146l-3.294 3.292c-.194.194-.194.513 0 .708l3.294 3.293c.188.193.354.129.354-.146v-1c0-.271.227-.5.5-.5h4c.275 0 .5-.225.5-.5v-3c0-.276-.225-.501-.5-.501z'/%3e%3c/g%3e%3c/svg%3e"); /* LTR */
|
||||
}
|
||||
|
||||
.toolbar .toolbar-toggle-orientation [value="vertical"]:hover::before,
|
||||
.toolbar .toolbar-toggle-orientation [value="vertical"]:focus::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M2.5 2h-2.491v12.029h2.491c.276 0 .5-.225.5-.5v-11.029c0-.276-.224-.5-.5-.5zM14.502 6.029h-4c-.275 0-.5-.225-.5-.5v-1c0-.275-.16-.341-.354-.146l-3.294 3.292c-.194.194-.194.513 0 .708l3.294 3.293c.188.193.354.129.354-.146v-1c0-.271.227-.5.5-.5h4c.275 0 .5-.225.5-.5v-3c0-.276-.225-.501-.5-.501z'/%3e%3c/g%3e%3c/svg%3e"); /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M13.51 2c-.275 0-.5.224-.5.5v11.029c0 .275.225.5.5.5h2.492v-12.029h-2.492zM6.362 4.382c-.194-.194-.353-.128-.353.147v1c0 .275-.225.5-.5.5h-4c-.275 0-.5.225-.5.5v3c0 .271.225.5.5.5h4c.275 0 .5.225.5.5v1c0 .271.159.34.354.146l3.295-3.293c.193-.194.193-.513 0-.708l-3.296-3.292z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:hover::before,
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:focus::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M13.51 2c-.275 0-.5.224-.5.5v11.029c0 .275.225.5.5.5h2.492v-12.029h-2.492zM6.362 4.382c-.194-.194-.353-.128-.353.147v1c0 .275-.225.5-.5.5h-4c-.275 0-.5.225-.5.5v3c0 .271.225.5.5.5h4c.275 0 .5.225.5.5v1c0 .271.159.34.354.146l3.295-3.293c.193-.194.193-.513 0-.708l-3.296-3.292z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar .toolbar-toggle-orientation [value="horizontal"]::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M1.986.019v2.491c0 .276.225.5.5.5h11.032c.275 0 .5-.224.5-.5v-2.491h-12.032zM8.342 6.334c-.193-.194-.513-.194-.708 0l-3.294 3.293c-.194.195-.129.353.146.353h1c.275 0 .5.227.5.5v4.02c0 .275.225.5.5.5h3.002c.271 0 .5-.225.5-.5v-4.02c0-.274.225-.5.5-.5h1c.271 0 .34-.158.145-.354l-3.291-3.292z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.toolbar .toolbar-toggle-orientation [value="horizontal"]:hover::before,
|
||||
.toolbar .toolbar-toggle-orientation [value="horizontal"]:focus::before {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M1.986.019v2.491c0 .276.225.5.5.5h11.032c.275 0 .5-.224.5-.5v-2.491h-12.032zM8.342 6.334c-.193-.194-.513-.194-.708 0l-3.294 3.293c-.194.195-.129.353.146.353h1c.275 0 .5.227.5.5v4.02c0 .275.225.5.5.5h3.002c.271 0 .5-.225.5-.5v-4.02c0-.274.225-.5.5-.5h1c.271 0 .34-.158.145-.354l-3.291-3.292z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
}
|
||||
305
web/core/themes/claro/css/theme/toolbar.icons.theme.pcss.css
Normal file
305
web/core/themes/claro/css/theme/toolbar.icons.theme.pcss.css
Normal file
@ -0,0 +1,305 @@
|
||||
/**
|
||||
* @file
|
||||
* Styling for toolbar module icons.
|
||||
*
|
||||
* If Claro is the admin theme, this stylesheet will be used by the active theme
|
||||
* even if the active theme is not Claro.
|
||||
*/
|
||||
|
||||
.toolbar .toolbar-icon {
|
||||
position: relative;
|
||||
padding-left: 2.75em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-icon {
|
||||
padding-right: 2.75em;
|
||||
padding-left: 1.3333em;
|
||||
}
|
||||
.toolbar .toolbar-icon::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.6667em; /* LTR */
|
||||
display: block;
|
||||
width: 1.538em;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
background-position: center center;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-icon::before {
|
||||
right: 0.6667em;
|
||||
left: auto;
|
||||
}
|
||||
.toolbar button.toolbar-icon {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
font-size: 1em;
|
||||
}
|
||||
.toolbar .toolbar-menu ul .toolbar-icon {
|
||||
padding-left: 1.3333em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-menu ul .toolbar-icon {
|
||||
padding-right: 1.3333em;
|
||||
padding-left: 0;
|
||||
}
|
||||
.toolbar .toolbar-menu ul a.toolbar-icon::before {
|
||||
display: none;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu ul a {
|
||||
padding-left: 2.75em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul a {
|
||||
padding-right: 2.75em;
|
||||
padding-left: 0;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
|
||||
padding-left: 3.75em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
|
||||
padding-right: 3.75em;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu a {
|
||||
padding-right: 4em; /* LTR */
|
||||
padding-left: 2.75em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu a {
|
||||
padding-right: 2.75em;
|
||||
padding-left: 4em;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.is-active::before {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
/**
|
||||
* Top level icons.
|
||||
*/
|
||||
.toolbar-bar .toolbar-icon-menu::before {
|
||||
background-image: url(../../../../misc/icons/bebebe/hamburger.svg);
|
||||
}
|
||||
.toolbar-bar .toolbar-icon-menu:active::before,
|
||||
.toolbar-bar .toolbar-icon-menu.is-active::before {
|
||||
background-image: url(../../../../misc/icons/ffffff/hamburger.svg);
|
||||
}
|
||||
.toolbar-bar .toolbar-icon-help::before {
|
||||
background-image: url(../../../../misc/icons/bebebe/questionmark-disc.svg);
|
||||
}
|
||||
.toolbar-bar .toolbar-icon-help:active::before,
|
||||
.toolbar-bar .toolbar-icon-help.is-active::before {
|
||||
background-image: url(../../../../misc/icons/ffffff/questionmark-disc.svg);
|
||||
}
|
||||
|
||||
/**
|
||||
* Main menu icons.
|
||||
*/
|
||||
.toolbar-icon-system-admin-content::before {
|
||||
background-image: url(../../../../misc/icons/787878/file.svg);
|
||||
}
|
||||
.toolbar-icon-system-admin-content:active::before,
|
||||
.toolbar-icon-system-admin-content.is-active::before {
|
||||
background-image: url(../../../../misc/icons/000000/file.svg);
|
||||
}
|
||||
.toolbar-icon-system-admin-structure::before {
|
||||
background-image: url(../../../../misc/icons/787878/orgchart.svg);
|
||||
}
|
||||
.toolbar-icon-system-admin-structure:active::before,
|
||||
.toolbar-icon-system-admin-structure.is-active::before {
|
||||
background-image: url(../../../../misc/icons/000000/orgchart.svg);
|
||||
}
|
||||
.toolbar-icon-system-themes-page::before {
|
||||
background-image: url(../../../../misc/icons/787878/paintbrush.svg);
|
||||
}
|
||||
.toolbar-icon-system-themes-page:active::before,
|
||||
.toolbar-icon-system-themes-page.is-active::before {
|
||||
background-image: url(../../../../misc/icons/000000/paintbrush.svg);
|
||||
}
|
||||
.toolbar-icon-entity-user-collection::before {
|
||||
background-image: url(../../../../misc/icons/787878/people.svg);
|
||||
}
|
||||
.toolbar-icon-entity-user-collection:active::before,
|
||||
.toolbar-icon-entity-user-collection.is-active::before {
|
||||
background-image: url(../../../../misc/icons/000000/people.svg);
|
||||
}
|
||||
.toolbar-icon-system-modules-list::before {
|
||||
background-image: url(../../../../misc/icons/787878/puzzlepiece.svg);
|
||||
}
|
||||
.toolbar-icon-system-modules-list:active::before,
|
||||
.toolbar-icon-system-modules-list.is-active::before {
|
||||
background-image: url(../../../../misc/icons/000000/puzzlepiece.svg);
|
||||
}
|
||||
.toolbar-icon-system-admin-config::before {
|
||||
background-image: url(../../../../misc/icons/787878/wrench.svg);
|
||||
}
|
||||
.toolbar-icon-system-admin-config:active::before,
|
||||
.toolbar-icon-system-admin-config.is-active::before {
|
||||
background-image: url(../../../../misc/icons/000000/wrench.svg);
|
||||
}
|
||||
.toolbar-icon-system-admin-reports::before {
|
||||
background-image: url(../../../../misc/icons/787878/barchart.svg);
|
||||
}
|
||||
.toolbar-icon-system-admin-reports:active::before,
|
||||
.toolbar-icon-system-admin-reports.is-active::before {
|
||||
background-image: url(../../../../misc/icons/000000/barchart.svg);
|
||||
}
|
||||
.toolbar-icon-help-main::before {
|
||||
background-image: url(../../../../misc/icons/787878/questionmark-disc.svg);
|
||||
}
|
||||
.toolbar-icon-help-main:active::before,
|
||||
.toolbar-icon-help-main.is-active::before {
|
||||
background-image: url(../../../../misc/icons/000000/questionmark-disc.svg);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 16.5em) {
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
|
||||
width: 4em;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
left: 0; /* LTR */
|
||||
width: 100%;
|
||||
background-size: 42% auto;
|
||||
}
|
||||
.no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
background-size: auto auto;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 36em) {
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
|
||||
width: auto;
|
||||
padding-right: 1.3333em; /* LTR */
|
||||
padding-left: 2.75em; /* LTR */
|
||||
text-indent: 0;
|
||||
background-position: left center; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
|
||||
padding-right: 2.75em;
|
||||
padding-left: 1.3333em;
|
||||
background-position: right center;
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
left: 0.6667em; /* LTR */
|
||||
width: 1.538em;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
.no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
background-size: auto auto;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
right: 0.6667em;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Accessibility/focus
|
||||
*/
|
||||
.toolbar-tab a:focus {
|
||||
text-decoration: underline;
|
||||
outline: none;
|
||||
}
|
||||
.toolbar-lining button:focus {
|
||||
outline: none;
|
||||
}
|
||||
.toolbar-tray-horizontal a:focus,
|
||||
.toolbar-box a:focus {
|
||||
outline: none;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.toolbar-box a:hover:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.toolbar .toolbar-icon.toolbar-handle:focus {
|
||||
outline: none;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle.
|
||||
*/
|
||||
.toolbar .toolbar-icon.toolbar-handle {
|
||||
width: 4em;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.toolbar .toolbar-icon.toolbar-handle::before {
|
||||
left: 1.6667em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-icon.toolbar-handle::before {
|
||||
right: 1.6667em;
|
||||
left: auto;
|
||||
}
|
||||
.toolbar .toolbar-icon.toolbar-handle::before {
|
||||
background-image: url(../../../../misc/icons/5181c6/chevron-disc-down.svg);
|
||||
}
|
||||
.toolbar .toolbar-icon.toolbar-handle.open::before {
|
||||
background-image: url(../../../../misc/icons/787878/chevron-disc-up.svg);
|
||||
}
|
||||
.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle::before {
|
||||
background-image: url(../../../../misc/icons/5181c6/twistie-down.svg);
|
||||
background-size: 75%;
|
||||
}
|
||||
.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open::before {
|
||||
background-image: url(../../../../misc/icons/787878/twistie-up.svg);
|
||||
background-size: 75%;
|
||||
}
|
||||
.toolbar .toolbar-icon-escape-admin::before {
|
||||
background-image: url(../../../../misc/icons/bebebe/chevron-disc-left.svg);
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-icon-escape-admin::before {
|
||||
background-image: url(../../../../misc/icons/bebebe/chevron-disc-right.svg);
|
||||
}
|
||||
/**
|
||||
* Orientation toggle.
|
||||
*/
|
||||
.toolbar .toolbar-toggle-orientation button {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
padding: 0;
|
||||
text-indent: -999em;
|
||||
}
|
||||
.toolbar .toolbar-toggle-orientation button::before {
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation .toolbar-icon {
|
||||
padding: 0;
|
||||
}
|
||||
/**
|
||||
* In order to support a hover effect on the SVG images, while also supporting
|
||||
* RTL text direction and no SVG support, this little icon requires some very
|
||||
* specific targeting, setting and unsetting.
|
||||
*/
|
||||
.toolbar .toolbar-toggle-orientation [value="vertical"]::before {
|
||||
background-image: url(../../../../misc/icons/bebebe/push-left.svg); /* LTR */
|
||||
}
|
||||
.toolbar .toolbar-toggle-orientation [value="vertical"]:hover::before,
|
||||
.toolbar .toolbar-toggle-orientation [value="vertical"]:focus::before {
|
||||
background-image: url(../../../../misc/icons/787878/push-left.svg); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]::before {
|
||||
background-image: url(../../../../misc/icons/bebebe/push-right.svg);
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:hover::before,
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:focus::before {
|
||||
background-image: url(../../../../misc/icons/787878/push-right.svg);
|
||||
}
|
||||
.toolbar .toolbar-toggle-orientation [value="horizontal"]::before {
|
||||
background-image: url(../../../../misc/icons/bebebe/push-up.svg);
|
||||
}
|
||||
.toolbar .toolbar-toggle-orientation [value="horizontal"]:hover::before,
|
||||
.toolbar .toolbar-toggle-orientation [value="horizontal"]:focus::before {
|
||||
background-image: url(../../../../misc/icons/787878/push-up.svg);
|
||||
}
|
||||
188
web/core/themes/claro/css/theme/toolbar.theme.css
Normal file
188
web/core/themes/claro/css/theme/toolbar.theme.css
Normal file
@ -0,0 +1,188 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
/**
|
||||
* @file toolbar.theme.css
|
||||
*
|
||||
* If Claro is the admin theme, this stylesheet will be used by the active theme
|
||||
* even if the active theme is not Claro.
|
||||
*/
|
||||
.toolbar {
|
||||
font-family: "Source Sans Pro", "Lucida Grande", Verdana, sans-serif;
|
||||
/* Set base font size to 13px based on root ems. */
|
||||
font-size: 0.8125rem;
|
||||
-moz-tap-highlight-color: rgb(0, 0, 0, 0);
|
||||
-o-tap-highlight-color: rgb(0, 0, 0, 0);
|
||||
-webkit-tap-highlight-color: rgb(0, 0, 0, 0);
|
||||
tap-highlight-color: rgb(0, 0, 0, 0);
|
||||
-moz-touch-callout: none;
|
||||
-o-touch-callout: none;
|
||||
-webkit-touch-callout: none;
|
||||
touch-callout: none;
|
||||
}
|
||||
.toolbar .toolbar-item {
|
||||
padding: 1em 1.3333em;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
line-height: 1em;
|
||||
}
|
||||
.toolbar .toolbar-item:hover,
|
||||
.toolbar .toolbar-item:focus {
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
/**
|
||||
* Toolbar bar.
|
||||
*/
|
||||
.toolbar .toolbar-bar {
|
||||
color: #ddd;
|
||||
background-color: #0f0f0f;
|
||||
box-shadow: -1px 0 3px 1px rgb(0, 0, 0, 0.3333); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar {
|
||||
box-shadow: 1px 0 3px 1px rgb(0, 0, 0, 0.3333);
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-item {
|
||||
color: #fff;
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-item {
|
||||
font-weight: bold;
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-item:hover,
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-item:focus {
|
||||
background-image: linear-gradient(rgb(255, 255, 255, 0.125) 20%, transparent 200%);
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
|
||||
color: #000;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #fff;
|
||||
}
|
||||
/**
|
||||
* Toolbar tray.
|
||||
*/
|
||||
.toolbar .toolbar-tray {
|
||||
background-color: #fff;
|
||||
}
|
||||
.toolbar-horizontal .toolbar-tray > .toolbar-lining {
|
||||
padding-right: 5em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-horizontal .toolbar-tray > .toolbar-lining {
|
||||
padding-right: 0;
|
||||
padding-left: 5em;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical {
|
||||
border-right: 1px solid #aaa; /* LTR */
|
||||
background-color: #f5f5f5;
|
||||
box-shadow: -1px 0 5px 2px rgb(0, 0, 0, 0.3333); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical {
|
||||
border-right: 0 none;
|
||||
border-left: 1px solid #aaa;
|
||||
box-shadow: 1px 0 5px 2px rgb(0, 0, 0, 0.3333);
|
||||
}
|
||||
.toolbar-horizontal .toolbar-tray {
|
||||
border-bottom: 1px solid #aaa;
|
||||
box-shadow: -2px 1px 3px 1px rgb(0, 0, 0, 0.3333); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-horizontal .toolbar-tray {
|
||||
box-shadow: 2px 1px 3px 1px rgb(0, 0, 0, 0.3333);
|
||||
}
|
||||
.toolbar .toolbar-tray-horizontal .toolbar-tray {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.toolbar-tray a,
|
||||
.toolbar-tray a:visited {
|
||||
padding: 1em 1.3333em;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: #565656;
|
||||
}
|
||||
.toolbar-tray a:hover,
|
||||
.toolbar-tray a:active,
|
||||
.toolbar-tray a:focus,
|
||||
.toolbar-tray a.is-active {
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
color: #000;
|
||||
}
|
||||
.toolbar .toolbar-menu {
|
||||
background-color: #fff;
|
||||
}
|
||||
.toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
|
||||
border-left: 1px solid #ddd; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
|
||||
border-right: 1px solid #ddd;
|
||||
border-left: 0 none;
|
||||
}
|
||||
.toolbar-horizontal .toolbar-tray .menu-item:last-child {
|
||||
border-right: 1px solid #ddd; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item:last-child {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .menu-item + .menu-item {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .menu-item:last-child {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .menu-item .menu-item {
|
||||
border: 0 none;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu ul ul {
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .menu-item:last-child > ul {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu .toolbar-menu .toolbar-menu .toolbar-menu {
|
||||
margin-left: 0.25em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu .toolbar-menu .toolbar-menu .toolbar-menu {
|
||||
margin-right: 0.25em;
|
||||
margin-left: 0;
|
||||
}
|
||||
.toolbar .toolbar-menu .toolbar-menu a {
|
||||
color: #434343;
|
||||
}
|
||||
/**
|
||||
* Orientation toggle.
|
||||
*/
|
||||
.toolbar .toolbar-toggle-orientation {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
|
||||
border-left: 1px solid #c9c9c9; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
|
||||
border-right: 1px solid #c9c9c9;
|
||||
border-left: 0 none;
|
||||
}
|
||||
.toolbar .toolbar-toggle-orientation > .toolbar-lining {
|
||||
float: right; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation > .toolbar-lining {
|
||||
float: left;
|
||||
}
|
||||
.toolbar .toolbar-toggle-orientation button {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.toolbar-horizontal .toolbar-tray > .toolbar-lining,
|
||||
.toolbar-horizontal .toolbar .toolbar-toggle-orientation .toolbar-icon {
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
.toolbar .toolbar-bar {
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
181
web/core/themes/claro/css/theme/toolbar.theme.pcss.css
Normal file
181
web/core/themes/claro/css/theme/toolbar.theme.pcss.css
Normal file
@ -0,0 +1,181 @@
|
||||
/**
|
||||
* @file toolbar.theme.css
|
||||
*
|
||||
* If Claro is the admin theme, this stylesheet will be used by the active theme
|
||||
* even if the active theme is not Claro.
|
||||
*/
|
||||
.toolbar {
|
||||
font-family: "Source Sans Pro", "Lucida Grande", Verdana, sans-serif;
|
||||
/* Set base font size to 13px based on root ems. */
|
||||
font-size: 0.8125rem;
|
||||
-moz-tap-highlight-color: rgb(0, 0, 0, 0);
|
||||
-o-tap-highlight-color: rgb(0, 0, 0, 0);
|
||||
-webkit-tap-highlight-color: rgb(0, 0, 0, 0);
|
||||
tap-highlight-color: rgb(0, 0, 0, 0);
|
||||
-moz-touch-callout: none;
|
||||
-o-touch-callout: none;
|
||||
-webkit-touch-callout: none;
|
||||
touch-callout: none;
|
||||
}
|
||||
.toolbar .toolbar-item {
|
||||
padding: 1em 1.3333em;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
line-height: 1em;
|
||||
}
|
||||
.toolbar .toolbar-item:hover,
|
||||
.toolbar .toolbar-item:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Toolbar bar.
|
||||
*/
|
||||
.toolbar .toolbar-bar {
|
||||
color: #ddd;
|
||||
background-color: #0f0f0f;
|
||||
box-shadow: -1px 0 3px 1px rgb(0, 0, 0, 0.3333); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar {
|
||||
box-shadow: 1px 0 3px 1px rgb(0, 0, 0, 0.3333);
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-item {
|
||||
color: #fff;
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-item {
|
||||
font-weight: bold;
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-item:hover,
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-item:focus {
|
||||
background-image: linear-gradient(rgb(255, 255, 255, 0.125) 20%, transparent 200%);
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
|
||||
color: #000;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/**
|
||||
* Toolbar tray.
|
||||
*/
|
||||
.toolbar .toolbar-tray {
|
||||
background-color: #fff;
|
||||
}
|
||||
.toolbar-horizontal .toolbar-tray > .toolbar-lining {
|
||||
padding-right: 5em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-horizontal .toolbar-tray > .toolbar-lining {
|
||||
padding-right: 0;
|
||||
padding-left: 5em;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical {
|
||||
border-right: 1px solid #aaa; /* LTR */
|
||||
background-color: #f5f5f5;
|
||||
box-shadow: -1px 0 5px 2px rgb(0, 0, 0, 0.3333); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical {
|
||||
border-right: 0 none;
|
||||
border-left: 1px solid #aaa;
|
||||
box-shadow: 1px 0 5px 2px rgb(0, 0, 0, 0.3333);
|
||||
}
|
||||
.toolbar-horizontal .toolbar-tray {
|
||||
border-bottom: 1px solid #aaa;
|
||||
box-shadow: -2px 1px 3px 1px rgb(0, 0, 0, 0.3333); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-horizontal .toolbar-tray {
|
||||
box-shadow: 2px 1px 3px 1px rgb(0, 0, 0, 0.3333);
|
||||
}
|
||||
.toolbar .toolbar-tray-horizontal .toolbar-tray {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.toolbar-tray a,
|
||||
.toolbar-tray a:visited {
|
||||
padding: 1em 1.3333em;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: #565656;
|
||||
}
|
||||
.toolbar-tray a:hover,
|
||||
.toolbar-tray a:active,
|
||||
.toolbar-tray a:focus,
|
||||
.toolbar-tray a.is-active {
|
||||
text-decoration: underline;
|
||||
color: #000;
|
||||
}
|
||||
.toolbar .toolbar-menu {
|
||||
background-color: #fff;
|
||||
}
|
||||
.toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
|
||||
border-left: 1px solid #ddd; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
|
||||
border-right: 1px solid #ddd;
|
||||
border-left: 0 none;
|
||||
}
|
||||
.toolbar-horizontal .toolbar-tray .menu-item:last-child {
|
||||
border-right: 1px solid #ddd; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item:last-child {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .menu-item + .menu-item {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .menu-item:last-child {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .menu-item .menu-item {
|
||||
border: 0 none;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu ul ul {
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .menu-item:last-child > ul {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu .toolbar-menu .toolbar-menu .toolbar-menu {
|
||||
margin-left: 0.25em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu .toolbar-menu .toolbar-menu .toolbar-menu {
|
||||
margin-right: 0.25em;
|
||||
margin-left: 0;
|
||||
}
|
||||
.toolbar .toolbar-menu .toolbar-menu a {
|
||||
color: #434343;
|
||||
}
|
||||
|
||||
/**
|
||||
* Orientation toggle.
|
||||
*/
|
||||
.toolbar .toolbar-toggle-orientation {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
|
||||
border-left: 1px solid #c9c9c9; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
|
||||
border-right: 1px solid #c9c9c9;
|
||||
border-left: 0 none;
|
||||
}
|
||||
.toolbar .toolbar-toggle-orientation > .toolbar-lining {
|
||||
float: right; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation > .toolbar-lining {
|
||||
float: left;
|
||||
}
|
||||
.toolbar .toolbar-toggle-orientation button {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.toolbar-horizontal .toolbar-tray > .toolbar-lining,
|
||||
.toolbar-horizontal .toolbar .toolbar-toggle-orientation .toolbar-icon {
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
.toolbar .toolbar-bar {
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
830
web/core/themes/claro/css/theme/views_ui.admin.theme.css
Normal file
830
web/core/themes/claro/css/theme/views_ui.admin.theme.css
Normal file
@ -0,0 +1,830 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* View UI admin theme.
|
||||
*
|
||||
* Replaces the styles provided by the views_ui module.
|
||||
*/
|
||||
|
||||
.views-admin .links {
|
||||
margin: 0;
|
||||
list-style: none outside none;
|
||||
}
|
||||
|
||||
.views-admin a:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.views-admin .icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.views-admin .icon,
|
||||
.views-admin .icon-text {
|
||||
background-image: url(../../../../modules/views_ui/images/sprites.png);
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
background-position: left top; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .views-admin .icon,
|
||||
[dir="rtl"] .views-admin .icon-text {
|
||||
background-position: right top;
|
||||
}
|
||||
|
||||
.views-admin a.icon {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0.25rem;
|
||||
background:
|
||||
linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat,
|
||||
repeat-y;
|
||||
box-shadow: 0 0 0 rgb(0, 0, 0, 0.3333) inset;
|
||||
}
|
||||
|
||||
.views-admin a.icon:hover {
|
||||
border-color: #d0d0d0;
|
||||
box-shadow: 0 0 1px rgb(0, 0, 0, 0.3333) inset;
|
||||
}
|
||||
|
||||
.views-admin a.icon:active {
|
||||
border-color: #c0c0c0;
|
||||
}
|
||||
|
||||
.views-admin span.icon {
|
||||
position: relative;
|
||||
float: left; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .views-admin span.icon {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.views-admin .icon.compact {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-indent: -624.9375rem;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
/* Targets any element with an icon -> text combo */
|
||||
|
||||
.views-admin .icon-text {
|
||||
padding-left: 1.1875rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .views-admin .icon-text {
|
||||
padding-right: 1.1875rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.views-admin .icon.linked {
|
||||
background-position: center -153px;
|
||||
}
|
||||
|
||||
.views-admin .icon.unlinked {
|
||||
background-position: center -195px;
|
||||
}
|
||||
|
||||
.views-admin .icon.delete {
|
||||
background-position: center -52px;
|
||||
}
|
||||
|
||||
.views-admin a.icon.delete {
|
||||
background-position:
|
||||
center -52px,
|
||||
left top; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .views-admin a.icon.delete {
|
||||
background-position:
|
||||
center -52px,
|
||||
right top;
|
||||
}
|
||||
|
||||
.views-admin .icon.rearrange {
|
||||
background-position: center -111px;
|
||||
}
|
||||
|
||||
.views-admin a.icon.rearrange {
|
||||
background-position:
|
||||
center -111px,
|
||||
left top; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .views-admin a.icon.rearrange {
|
||||
background-position:
|
||||
center -111px,
|
||||
right top;
|
||||
}
|
||||
|
||||
details.box-padding {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.views-admin details details {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-top: 0.5625rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.form-type-checkbox {
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
.form-checkbox,
|
||||
.form-radio {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* Indent form elements so they're directly underneath the label of the checkbox that reveals them */
|
||||
|
||||
.views-admin .form-type-checkbox + .form-wrapper {
|
||||
margin-left: 1rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .views-admin .form-type-checkbox + .form-wrapper {
|
||||
margin-right: 1rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Hide 'remove' checkboxes. */
|
||||
|
||||
.views-remove-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* sizes the labels of checkboxes and radio button to the height of the text */
|
||||
|
||||
.views-admin .form-type-checkbox label,
|
||||
.views-admin .form-type-radio label {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.views-admin-dependent .form-item {
|
||||
margin-top: 0.375rem;
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.views-ui-view-name h3 {
|
||||
margin: 0.25em 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.view-changed {
|
||||
margin-bottom: 1.3125rem;
|
||||
}
|
||||
|
||||
.views-admin .unit-title {
|
||||
margin-top: 1.125rem;
|
||||
margin-bottom: 0;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6154;
|
||||
}
|
||||
|
||||
.views-ui-view-displays ul {
|
||||
margin-left: 0; /* LTR */
|
||||
padding-left: 0; /* LTR */
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
[dir="rtl"] .views-ui-view-displays ul {
|
||||
margin-right: 0;
|
||||
margin-left: inherit;
|
||||
padding-right: 0;
|
||||
padding-left: inherit;
|
||||
}
|
||||
|
||||
/* These header classes are ambiguous and should be scoped to th elements */
|
||||
|
||||
.views-ui-name {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.views-ui-description {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.views-ui-machine-name {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.views-ui-displays {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.views-ui-operations {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
/**
|
||||
* I wish this didn't have to be so specific
|
||||
*/
|
||||
|
||||
.form-item-description-enable + .form-item-description {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.form-item-description-enable label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form-item-page-create,
|
||||
.form-item-block-create {
|
||||
margin-top: 0.8125rem;
|
||||
}
|
||||
|
||||
.form-item-page-create label,
|
||||
.form-item-block-create label,
|
||||
.form-item-rest-export-create label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* This makes the form elements after the "Display Format" label flow underneath the label */
|
||||
|
||||
.form-item-page-style-style-plugin > label,
|
||||
.form-item-block-style-style-plugin > label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.views-attachment .options-set label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Styling for the form that allows views filters to be rearranged. */
|
||||
|
||||
.group-populated {
|
||||
display: none;
|
||||
}
|
||||
|
||||
td.group-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.views-ui-dialog td.group-title {
|
||||
height: 1px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.views-ui-dialog td.group-title span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.group-message .form-submit,
|
||||
.views-remove-group-link,
|
||||
.views-add-group {
|
||||
float: right; /* LTR */
|
||||
clear: both;
|
||||
}
|
||||
|
||||
[dir="rtl"] .group-message .form-submit,
|
||||
[dir="rtl"] .views-remove-group-link,
|
||||
[dir="rtl"] .views-add-group {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.views-operator-label {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -0.8125rem;
|
||||
padding: 0.5px 0.375rem;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid var(--color-gray-200);
|
||||
background: #fff;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.grouped-description,
|
||||
.exposed-description {
|
||||
float: left; /* LTR */
|
||||
padding-top: 0.1875rem;
|
||||
padding-right: 0.625rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .grouped-description,
|
||||
[dir="rtl"] .exposed-description {
|
||||
float: right;
|
||||
padding-right: 0;
|
||||
padding-left: 0.625rem;
|
||||
}
|
||||
|
||||
.views-displays {
|
||||
padding-bottom: 2.25rem;
|
||||
border-top: 1px solid var(--color-gray-200-o-80);
|
||||
border-right: 1px solid var(--color-gray-200-o-80);
|
||||
border-left: 1px solid var(--color-gray-200-o-80);
|
||||
}
|
||||
|
||||
.views-display-top {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-s) var(--space-s) calc(var(--space-s) - 0.3125rem);
|
||||
border-bottom: 1px solid var(--color-gray-200-o-80);
|
||||
background-color: var(--color-gray-050);
|
||||
}
|
||||
|
||||
.form-edit .form-actions,
|
||||
.form-edit .field-actions {
|
||||
margin-top: 0;
|
||||
padding: var(--space-s) var(--space-m);
|
||||
border-right: 1px solid var(--color-gray-200-o-80);
|
||||
border-bottom: 1px solid var(--color-gray-200-o-80);
|
||||
border-left: 1px solid var(--color-gray-200-o-80);
|
||||
background-color: var(--color-gray-050);
|
||||
}
|
||||
|
||||
.edit-display-settings {
|
||||
margin: var(--space-l) var(--space-l) 0 var(--space-l);
|
||||
}
|
||||
|
||||
.edit-display-settings-top.views-ui-display-tab-bucket.views-ui-display-tab-bucket {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin: 0 0 var(--space-l);
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.edit-display-settings-top.views-ui-display-tab-bucket .views-display-setting {
|
||||
padding: 0.125rem 0 0;
|
||||
}
|
||||
|
||||
.views-display-column {
|
||||
border: 1px solid var(--color-gray-200-o-80);
|
||||
border-radius: var(--base-border-radius);
|
||||
box-shadow: var(--details-box-shadow);
|
||||
}
|
||||
|
||||
.views-display-column + .views-display-column {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.view-preview-form .form-item--view-args,
|
||||
.view-preview-form .form-actions,
|
||||
.view-preview-form .field-actions {
|
||||
margin-top: 0.3125rem;
|
||||
}
|
||||
|
||||
.view-preview-form .views-bulk-actions__item {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
.view-preview-form .arguments-preview {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.view-preview-form .form-item--view-args {
|
||||
margin-top: var(--space-m);
|
||||
}
|
||||
|
||||
.view-preview-form .arguments-preview,
|
||||
.view-preview-form .form-item--view-args {
|
||||
margin-right: var(--space-m);
|
||||
margin-left: var(--space-m);
|
||||
}
|
||||
|
||||
.preview-submit-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-item--live-preview,
|
||||
.view-preview-form .form-actions,
|
||||
.view-preview-form .field-actions {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 45em) {
|
||||
/* 720px */
|
||||
.view-preview-form .form-type-textfield .description {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* These are the individual "buckets," or boxes, inside the display settings area */
|
||||
|
||||
.views-ui-display-tab-bucket.views-ui-display-tab-bucket {
|
||||
position: relative;
|
||||
margin: 0 0 var(--space-xs);
|
||||
padding-top: var(--space-xs);
|
||||
padding-bottom: var(--space-xs);
|
||||
border-bottom: 1px solid var(--color-gray-200-o-80);
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.views-ui-display-tab-bucket:last-of-type {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.views-ui-display-tab-bucket + .views-ui-display-tab-bucket {
|
||||
border-top: medium none;
|
||||
}
|
||||
|
||||
.views-ui-display-tab-bucket__header {
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: var(--space-s) var(--space-m) calc(var(--space-s) + 2px);
|
||||
}
|
||||
|
||||
.views-ui-display-tab-bucket__title {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.views-ui-display-tab-bucket.access {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.views-ui-display-tab-bucket.page-settings {
|
||||
border-bottom: medium none;
|
||||
}
|
||||
|
||||
/** Applies an overridden(italics) font style to overridden buckets.
|
||||
* The better way to implement this would be to add the overridden class
|
||||
* to the bucket header when the bucket is overridden and style it as a
|
||||
* generic icon classed element. For the moment, we'll style the bucket
|
||||
* header specifically with the overridden font style.
|
||||
*/
|
||||
|
||||
.views-ui-display-tab-setting.overridden,
|
||||
.views-ui-display-tab-bucket.overridden .views-ui-display-tab-bucket__title {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* This is each row within one of the "boxes." */
|
||||
|
||||
.views-ui-display-tab-bucket .views-display-setting {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: var(--space-xs) var(--space-m);
|
||||
color: #666;
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
.views-ui-display-tab-actions.views-ui-display-tab-bucket .views-display-setting {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.views-ui-display-tab-bucket .views-group-text {
|
||||
margin-top: 0.375rem;
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.views-ui-display-tab-bucket__actions {
|
||||
margin-left: var(--space-xs); /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .views-ui-display-tab-bucket__actions {
|
||||
margin-right: var(--space-xs);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.views-display-setting .label {
|
||||
margin-right: var(--space-xs); /* LTR */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[dir="rtl"] .views-display-setting .label {
|
||||
margin-right: 0;
|
||||
margin-left: var(--space-xs);
|
||||
}
|
||||
|
||||
.label--separator.label--separator {
|
||||
margin-right: var(--space-xs);
|
||||
margin-left: var(--space-xs);
|
||||
}
|
||||
|
||||
.views-edit-view {
|
||||
margin-bottom: 0.9375rem;
|
||||
}
|
||||
|
||||
.views-edit-view.disabled .views-displays {
|
||||
background-color: var(--color-red-020);
|
||||
}
|
||||
|
||||
.views-edit-view.disabled .views-display-column {
|
||||
background: var(--color-white);
|
||||
}
|
||||
|
||||
/* The contents of the popup dialog on the views edit form. */
|
||||
|
||||
.views-filterable-options .form-type-checkbox {
|
||||
padding: 0.3125rem 0.5rem;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.filterable-option .form-item {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.views-filterable-options .form-type-checkbox .description {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.views-filterable-options-controls .form-item {
|
||||
width: 30%;
|
||||
margin: 0 0 0 2%; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .views-filterable-options-controls .form-item {
|
||||
margin: 0 2% 0 0;
|
||||
}
|
||||
|
||||
.views-filterable-options-controls input,
|
||||
.views-filterable-options-controls select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.views-ui-dialog.views-ui-dialog > .ui-dialog-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.views-ui-dialog .views-filterable-options {
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
[id^="views-ui-add-handler-form"] .scroll {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.views-ui-dialog .views-add-form-selected {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.views-ui-dialog .views-add-form-selected > div {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0.3rem 0.8rem;
|
||||
border: 1px solid #dedfe4;
|
||||
border-radius: 2px 2px 0 0;
|
||||
box-shadow: 0 4px 20px rgb(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.views-ui-dialog .form-item-selected {
|
||||
margin: 0;
|
||||
padding: 0.375rem 1rem;
|
||||
}
|
||||
|
||||
.views-ui-dialog .views-add-form-selected .views-selected-options {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.views-ui-dialog.views-ui-dialog-scroll .ui-dialog-titlebar {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.views-ui-dialog .views-offset-top:not(:empty) {
|
||||
position: relative;
|
||||
padding: var(--space-s) var(--space-m) var(--space-xs);
|
||||
background-color: var(--color-gray-050);
|
||||
}
|
||||
|
||||
.views-ui-dialog .views-offset-top:not(:empty)::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0.1875rem;
|
||||
content: "";
|
||||
background: linear-gradient(to bottom, rgb(80, 81, 86, 0.11) 0%, rgb(18, 19, 20, 0.02) 49%, rgb(18, 19, 20, 0) 100%);
|
||||
}
|
||||
|
||||
.views-ui-dialog .views-offset-top > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.views-ui-dialog .views-offset-top .form-item {
|
||||
max-width: 40%;
|
||||
margin: 0 var(--space-s) var(--space-s) 0;
|
||||
}
|
||||
|
||||
.views-ui-dialog .tabledrag-toggle-weight-wrapper {
|
||||
margin: 0 0 var(--space-m) 0;
|
||||
}
|
||||
|
||||
.views-ui-dialog details .item-list {
|
||||
padding-left: 2em; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .views-ui-dialog details .item-list {
|
||||
padding-right: 2em;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.views-display-columns .details-wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.views-ui-rearrange-filter-form table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.views-ui-rearrange-filter-form tr td[rowspan] {
|
||||
border: 1px solid var(--color-gray-200);
|
||||
}
|
||||
|
||||
.views-ui-rearrange-filter-form tr[id^="views-row"] {
|
||||
border-right: 1px solid #cdcdcd; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .views-ui-rearrange-filter-form tr[id^="views-row"] {
|
||||
border-right: 0;
|
||||
border-left: 1px solid #cdcdcd;
|
||||
}
|
||||
|
||||
.views-ui-rearrange-filter-form .draggable td {
|
||||
border-bottom: 0.0625rem solid var(--color-gray-200);
|
||||
}
|
||||
|
||||
.views-ui-rearrange-filter-form .group-empty {
|
||||
border-bottom: 1px solid #cdcdcd;
|
||||
}
|
||||
|
||||
.form-item-options-expose-required,
|
||||
.form-item-options-expose-label,
|
||||
.form-item-options-expose-field-identifier,
|
||||
.form-item-options-expose-description {
|
||||
margin-top: 0.375rem;
|
||||
margin-bottom: 0.375rem;
|
||||
margin-left: 1.125rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-item-options-expose-required,
|
||||
[dir="rtl"] .form-item-options-expose-label,
|
||||
[dir="rtl"] .form-item-options-expose-field-identifier,
|
||||
[dir="rtl"] .form-item-options-expose-description {
|
||||
margin-right: 1.125rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.views-preview-wrapper {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.view-preview-form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.view-preview-form__title {
|
||||
margin-top: 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid #ccc;
|
||||
background-color: var(--color-gray-050);
|
||||
}
|
||||
|
||||
.view-preview-form .form-item--live-preview {
|
||||
position: absolute;
|
||||
top: 0.6875rem;
|
||||
right: var(--space-s);
|
||||
margin-top: 2px;
|
||||
margin-left: 2px; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .view-preview-form .form-item--live-preview {
|
||||
right: auto;
|
||||
left: var(--space-s);
|
||||
margin-right: 2px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.views-live-preview {
|
||||
padding: var(--space-m);
|
||||
}
|
||||
|
||||
.views-live-preview .views-query-info {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.views-live-preview .section-title {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
color: var(--color-gray-800);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: normal;
|
||||
line-height: 1.6154;
|
||||
}
|
||||
|
||||
.views-live-preview .view > * {
|
||||
margin-top: var(--space-m);
|
||||
}
|
||||
|
||||
.views-live-preview .preview-section {
|
||||
margin: 0 -0.3125rem;
|
||||
padding: 0.1875rem 0.3125rem;
|
||||
border: 1px dashed #dedede;
|
||||
}
|
||||
|
||||
.views-live-preview li.views-row + li.views-row {
|
||||
margin-top: 1.125rem;
|
||||
}
|
||||
|
||||
/* The div.views-row is intentional and excludes li.views-row, for example */
|
||||
|
||||
.views-live-preview div.views-row + div.views-row {
|
||||
margin-top: 2.25rem;
|
||||
}
|
||||
|
||||
.views-query-info table {
|
||||
margin: 0.625rem 0;
|
||||
border-spacing: 0;
|
||||
border-collapse: separate;
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
.views-query-info table tr {
|
||||
background-color: var(--color-gray-050);
|
||||
}
|
||||
|
||||
.views-query-info table th,
|
||||
.views-query-info table td {
|
||||
padding: var(--space-xs) var(--space-l);
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
.messages {
|
||||
margin-bottom: 1.125rem;
|
||||
line-height: 1.4555;
|
||||
}
|
||||
|
||||
.js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: -1px;
|
||||
right: -0.3125rem; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"].js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {
|
||||
right: auto;
|
||||
left: -0.3125rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Position dropbuttons with flexbox instead after the dropbuttons have been
|
||||
* converted to splitbuttons.
|
||||
*
|
||||
* @see https://www.drupal.org/project/drupal/issues/3134107
|
||||
* @see https://www.drupal.org/project/drupal/issues/1899236
|
||||
*/
|
||||
|
||||
.edit-display-settings-top.views-ui-display-tab-bucket .dropbutton-wrapper {
|
||||
top: 0.8125rem;
|
||||
right: var(--space-s); /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .edit-display-settings-top.views-ui-display-tab-bucket .dropbutton-wrapper {
|
||||
right: auto;
|
||||
left: var(--space-s);
|
||||
}
|
||||
|
||||
.views-list-section {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.form-textarea-wrapper,
|
||||
.form-item-options-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.views-messages .messages-list,
|
||||
.views-messages .messages-list__item {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Styles on devices with touchevents.
|
||||
*/
|
||||
|
||||
html:not(.no-touchevents) .views-ui-display-tab-bucket__header--actions {
|
||||
padding: var(--space-l) var(--space-xs);
|
||||
}
|
||||
|
||||
html:not(.no-touchevents) .edit-display-settings-top.views-ui-display-tab-bucket {
|
||||
padding: var(--space-m) var(--space-xs);
|
||||
}
|
||||
685
web/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
Normal file
685
web/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
Normal file
@ -0,0 +1,685 @@
|
||||
/**
|
||||
* @file
|
||||
* View UI admin theme.
|
||||
*
|
||||
* Replaces the styles provided by the views_ui module.
|
||||
*/
|
||||
|
||||
.views-admin .links {
|
||||
margin: 0;
|
||||
list-style: none outside none;
|
||||
}
|
||||
.views-admin a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.views-admin .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.views-admin .icon,
|
||||
.views-admin .icon-text {
|
||||
background-image: url(../../../../modules/views_ui/images/sprites.png);
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
background-position: left top; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .views-admin .icon,
|
||||
[dir="rtl"] .views-admin .icon-text {
|
||||
background-position: right top;
|
||||
}
|
||||
.views-admin a.icon {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background:
|
||||
linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat,
|
||||
repeat-y;
|
||||
box-shadow: 0 0 0 rgb(0, 0, 0, 0.3333) inset;
|
||||
}
|
||||
.views-admin a.icon:hover {
|
||||
border-color: #d0d0d0;
|
||||
box-shadow: 0 0 1px rgb(0, 0, 0, 0.3333) inset;
|
||||
}
|
||||
.views-admin a.icon:active {
|
||||
border-color: #c0c0c0;
|
||||
}
|
||||
.views-admin span.icon {
|
||||
position: relative;
|
||||
float: left; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .views-admin span.icon {
|
||||
float: right;
|
||||
}
|
||||
.views-admin .icon.compact {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-indent: -9999px;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
/* Targets any element with an icon -> text combo */
|
||||
.views-admin .icon-text {
|
||||
padding-left: 19px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .views-admin .icon-text {
|
||||
padding-right: 19px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.views-admin .icon.linked {
|
||||
background-position: center -153px;
|
||||
}
|
||||
.views-admin .icon.unlinked {
|
||||
background-position: center -195px;
|
||||
}
|
||||
.views-admin .icon.delete {
|
||||
background-position: center -52px;
|
||||
}
|
||||
.views-admin a.icon.delete {
|
||||
background-position:
|
||||
center -52px,
|
||||
left top; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .views-admin a.icon.delete {
|
||||
background-position:
|
||||
center -52px,
|
||||
right top;
|
||||
}
|
||||
.views-admin .icon.rearrange {
|
||||
background-position: center -111px;
|
||||
}
|
||||
.views-admin a.icon.rearrange {
|
||||
background-position:
|
||||
center -111px,
|
||||
left top; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .views-admin a.icon.rearrange {
|
||||
background-position:
|
||||
center -111px,
|
||||
right top;
|
||||
}
|
||||
details.box-padding {
|
||||
border: none;
|
||||
}
|
||||
.views-admin details details {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-item {
|
||||
margin-top: 9px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.form-type-checkbox {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.form-checkbox,
|
||||
.form-radio {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* Indent form elements so they're directly underneath the label of the checkbox that reveals them */
|
||||
.views-admin .form-type-checkbox + .form-wrapper {
|
||||
margin-left: 16px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .views-admin .form-type-checkbox + .form-wrapper {
|
||||
margin-right: 16px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Hide 'remove' checkboxes. */
|
||||
.views-remove-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* sizes the labels of checkboxes and radio button to the height of the text */
|
||||
.views-admin .form-type-checkbox label,
|
||||
.views-admin .form-type-radio label {
|
||||
line-height: 2;
|
||||
}
|
||||
.views-admin-dependent .form-item {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.views-ui-view-name h3 {
|
||||
margin: 0.25em 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
.view-changed {
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
.views-admin .unit-title {
|
||||
margin-top: 18px;
|
||||
margin-bottom: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.6154;
|
||||
}
|
||||
.views-ui-view-displays ul {
|
||||
margin-left: 0; /* LTR */
|
||||
padding-left: 0; /* LTR */
|
||||
list-style: none;
|
||||
}
|
||||
[dir="rtl"] .views-ui-view-displays ul {
|
||||
margin-right: 0;
|
||||
margin-left: inherit;
|
||||
padding-right: 0;
|
||||
padding-left: inherit;
|
||||
}
|
||||
|
||||
/* These header classes are ambiguous and should be scoped to th elements */
|
||||
.views-ui-name {
|
||||
width: 20%;
|
||||
}
|
||||
.views-ui-description {
|
||||
width: 30%;
|
||||
}
|
||||
.views-ui-machine-name {
|
||||
width: 15%;
|
||||
}
|
||||
.views-ui-displays {
|
||||
width: 25%;
|
||||
}
|
||||
.views-ui-operations {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
/**
|
||||
* I wish this didn't have to be so specific
|
||||
*/
|
||||
.form-item-description-enable + .form-item-description {
|
||||
margin-top: 0;
|
||||
}
|
||||
.form-item-description-enable label {
|
||||
font-weight: bold;
|
||||
}
|
||||
.form-item-page-create,
|
||||
.form-item-block-create {
|
||||
margin-top: 13px;
|
||||
}
|
||||
.form-item-page-create label,
|
||||
.form-item-block-create label,
|
||||
.form-item-rest-export-create label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* This makes the form elements after the "Display Format" label flow underneath the label */
|
||||
.form-item-page-style-style-plugin > label,
|
||||
.form-item-block-style-style-plugin > label {
|
||||
display: block;
|
||||
}
|
||||
.views-attachment .options-set label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Styling for the form that allows views filters to be rearranged. */
|
||||
.group-populated {
|
||||
display: none;
|
||||
}
|
||||
td.group-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
.views-ui-dialog td.group-title {
|
||||
height: 1px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.views-ui-dialog td.group-title span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
height: 1px;
|
||||
}
|
||||
.group-message .form-submit,
|
||||
.views-remove-group-link,
|
||||
.views-add-group {
|
||||
float: right; /* LTR */
|
||||
clear: both;
|
||||
}
|
||||
[dir="rtl"] .group-message .form-submit,
|
||||
[dir="rtl"] .views-remove-group-link,
|
||||
[dir="rtl"] .views-add-group {
|
||||
float: left;
|
||||
}
|
||||
.views-operator-label {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -13px;
|
||||
padding: 0.5px 6px;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid var(--color-gray-200);
|
||||
background: #fff;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
.grouped-description,
|
||||
.exposed-description {
|
||||
float: left; /* LTR */
|
||||
padding-top: 3px;
|
||||
padding-right: 10px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .grouped-description,
|
||||
[dir="rtl"] .exposed-description {
|
||||
float: right;
|
||||
padding-right: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.views-displays {
|
||||
padding-bottom: 36px;
|
||||
border-top: 1px solid var(--color-gray-200-o-80);
|
||||
border-right: 1px solid var(--color-gray-200-o-80);
|
||||
border-left: 1px solid var(--color-gray-200-o-80);
|
||||
}
|
||||
.views-display-top {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-s) var(--space-s) calc(var(--space-s) - 5px);
|
||||
border-bottom: 1px solid var(--color-gray-200-o-80);
|
||||
background-color: var(--color-gray-050);
|
||||
}
|
||||
.form-edit .form-actions,
|
||||
.form-edit .field-actions {
|
||||
margin-top: 0;
|
||||
padding: var(--space-s) var(--space-m);
|
||||
border-right: 1px solid var(--color-gray-200-o-80);
|
||||
border-bottom: 1px solid var(--color-gray-200-o-80);
|
||||
border-left: 1px solid var(--color-gray-200-o-80);
|
||||
background-color: var(--color-gray-050);
|
||||
}
|
||||
.edit-display-settings {
|
||||
margin: var(--space-l) var(--space-l) 0 var(--space-l);
|
||||
}
|
||||
.edit-display-settings-top.views-ui-display-tab-bucket.views-ui-display-tab-bucket {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin: 0 0 var(--space-l);
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
line-height: 20px;
|
||||
}
|
||||
.edit-display-settings-top.views-ui-display-tab-bucket .views-display-setting {
|
||||
padding: 0.125rem 0 0;
|
||||
}
|
||||
.views-display-column {
|
||||
border: 1px solid var(--color-gray-200-o-80);
|
||||
border-radius: var(--base-border-radius);
|
||||
box-shadow: var(--details-box-shadow);
|
||||
}
|
||||
.views-display-column + .views-display-column {
|
||||
margin-top: 0;
|
||||
}
|
||||
.view-preview-form .form-item--view-args,
|
||||
.view-preview-form .form-actions,
|
||||
.view-preview-form .field-actions {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.view-preview-form .views-bulk-actions__item {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
.view-preview-form .arguments-preview {
|
||||
font-size: 1em;
|
||||
}
|
||||
.view-preview-form .form-item--view-args {
|
||||
margin-top: var(--space-m);
|
||||
}
|
||||
.view-preview-form .arguments-preview,
|
||||
.view-preview-form .form-item--view-args {
|
||||
margin-right: var(--space-m);
|
||||
margin-left: var(--space-m);
|
||||
}
|
||||
.preview-submit-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
.form-item--live-preview,
|
||||
.view-preview-form .form-actions,
|
||||
.view-preview-form .field-actions {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 45em) {
|
||||
/* 720px */
|
||||
.view-preview-form .form-type-textfield .description {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* These are the individual "buckets," or boxes, inside the display settings area */
|
||||
.views-ui-display-tab-bucket.views-ui-display-tab-bucket {
|
||||
position: relative;
|
||||
margin: 0 0 var(--space-xs);
|
||||
padding-top: var(--space-xs);
|
||||
padding-bottom: var(--space-xs);
|
||||
border-bottom: 1px solid var(--color-gray-200-o-80);
|
||||
line-height: 20px;
|
||||
}
|
||||
.views-ui-display-tab-bucket:last-of-type {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
.views-ui-display-tab-bucket + .views-ui-display-tab-bucket {
|
||||
border-top: medium none;
|
||||
}
|
||||
.views-ui-display-tab-bucket__header {
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: var(--space-s) var(--space-m) calc(var(--space-s) + 2px);
|
||||
}
|
||||
.views-ui-display-tab-bucket__title {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
.views-ui-display-tab-bucket.access {
|
||||
padding-top: 0;
|
||||
}
|
||||
.views-ui-display-tab-bucket.page-settings {
|
||||
border-bottom: medium none;
|
||||
}
|
||||
|
||||
/** Applies an overridden(italics) font style to overridden buckets.
|
||||
* The better way to implement this would be to add the overridden class
|
||||
* to the bucket header when the bucket is overridden and style it as a
|
||||
* generic icon classed element. For the moment, we'll style the bucket
|
||||
* header specifically with the overridden font style.
|
||||
*/
|
||||
.views-ui-display-tab-setting.overridden,
|
||||
.views-ui-display-tab-bucket.overridden .views-ui-display-tab-bucket__title {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* This is each row within one of the "boxes." */
|
||||
.views-ui-display-tab-bucket .views-display-setting {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: var(--space-xs) var(--space-m);
|
||||
color: #666;
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
.views-ui-display-tab-actions.views-ui-display-tab-bucket .views-display-setting {
|
||||
background-color: transparent;
|
||||
}
|
||||
.views-ui-display-tab-bucket .views-group-text {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.views-ui-display-tab-bucket__actions {
|
||||
margin-left: var(--space-xs); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .views-ui-display-tab-bucket__actions {
|
||||
margin-right: var(--space-xs);
|
||||
margin-left: 0;
|
||||
}
|
||||
.views-display-setting .label {
|
||||
margin-right: var(--space-xs); /* LTR */
|
||||
white-space: nowrap;
|
||||
}
|
||||
[dir="rtl"] .views-display-setting .label {
|
||||
margin-right: 0;
|
||||
margin-left: var(--space-xs);
|
||||
}
|
||||
.label--separator.label--separator {
|
||||
margin-right: var(--space-xs);
|
||||
margin-left: var(--space-xs);
|
||||
}
|
||||
.views-edit-view {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.views-edit-view.disabled .views-displays {
|
||||
background-color: var(--color-red-020);
|
||||
}
|
||||
.views-edit-view.disabled .views-display-column {
|
||||
background: var(--color-white);
|
||||
}
|
||||
/* The contents of the popup dialog on the views edit form. */
|
||||
.views-filterable-options .form-type-checkbox {
|
||||
padding: 5px 8px;
|
||||
border-top: none;
|
||||
}
|
||||
.filterable-option .form-item {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.views-filterable-options .form-type-checkbox .description {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.views-filterable-options-controls .form-item {
|
||||
width: 30%;
|
||||
margin: 0 0 0 2%; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .views-filterable-options-controls .form-item {
|
||||
margin: 0 2% 0 0;
|
||||
}
|
||||
.views-filterable-options-controls input,
|
||||
.views-filterable-options-controls select {
|
||||
width: 100%;
|
||||
}
|
||||
.views-ui-dialog.views-ui-dialog > .ui-dialog-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.views-ui-dialog .views-filterable-options {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
[id^="views-ui-add-handler-form"] .scroll {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.views-ui-dialog .views-add-form-selected {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.views-ui-dialog .views-add-form-selected > div {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0.3rem 0.8rem;
|
||||
border: 1px solid #dedfe4;
|
||||
border-radius: 2px 2px 0 0;
|
||||
box-shadow: 0 4px 20px rgb(0, 0, 0, 0.1);
|
||||
}
|
||||
.views-ui-dialog .form-item-selected {
|
||||
margin: 0;
|
||||
padding: 6px 16px;
|
||||
}
|
||||
.views-ui-dialog .views-add-form-selected .views-selected-options {
|
||||
display: inline;
|
||||
}
|
||||
.views-ui-dialog.views-ui-dialog-scroll .ui-dialog-titlebar {
|
||||
border: none;
|
||||
}
|
||||
.views-ui-dialog .views-offset-top:not(:empty) {
|
||||
position: relative;
|
||||
padding: var(--space-s) var(--space-m) var(--space-xs);
|
||||
background-color: var(--color-gray-050);
|
||||
}
|
||||
.views-ui-dialog .views-offset-top:not(:empty)::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
content: "";
|
||||
background: linear-gradient(to bottom, rgb(80, 81, 86, 0.11) 0%, rgb(18, 19, 20, 0.02) 49%, rgb(18, 19, 20, 0) 100%);
|
||||
}
|
||||
|
||||
.views-ui-dialog .views-offset-top > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.views-ui-dialog .views-offset-top .form-item {
|
||||
max-width: 40%;
|
||||
margin: 0 var(--space-s) var(--space-s) 0;
|
||||
}
|
||||
|
||||
.views-ui-dialog .tabledrag-toggle-weight-wrapper {
|
||||
margin: 0 0 var(--space-m) 0;
|
||||
}
|
||||
|
||||
.views-ui-dialog details .item-list {
|
||||
padding-left: 2em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .views-ui-dialog details .item-list {
|
||||
padding-right: 2em;
|
||||
padding-left: 0;
|
||||
}
|
||||
.views-display-columns .details-wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
.views-ui-rearrange-filter-form table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.views-ui-rearrange-filter-form tr td[rowspan] {
|
||||
border: 1px solid var(--color-gray-200);
|
||||
}
|
||||
.views-ui-rearrange-filter-form tr[id^="views-row"] {
|
||||
border-right: 1px solid #cdcdcd; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .views-ui-rearrange-filter-form tr[id^="views-row"] {
|
||||
border-right: 0;
|
||||
border-left: 1px solid #cdcdcd;
|
||||
}
|
||||
.views-ui-rearrange-filter-form .draggable td {
|
||||
border-bottom: 0.0625rem solid var(--color-gray-200);
|
||||
}
|
||||
.views-ui-rearrange-filter-form .group-empty {
|
||||
border-bottom: 1px solid #cdcdcd;
|
||||
}
|
||||
.form-item-options-expose-required,
|
||||
.form-item-options-expose-label,
|
||||
.form-item-options-expose-field-identifier,
|
||||
.form-item-options-expose-description {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
margin-left: 18px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .form-item-options-expose-required,
|
||||
[dir="rtl"] .form-item-options-expose-label,
|
||||
[dir="rtl"] .form-item-options-expose-field-identifier,
|
||||
[dir="rtl"] .form-item-options-expose-description {
|
||||
margin-right: 18px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.views-preview-wrapper {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.view-preview-form {
|
||||
position: relative;
|
||||
}
|
||||
.view-preview-form__title {
|
||||
margin-top: 0;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
background-color: var(--color-gray-050);
|
||||
}
|
||||
.view-preview-form .form-item--live-preview {
|
||||
position: absolute;
|
||||
top: 0.6875rem;
|
||||
right: var(--space-s);
|
||||
margin-top: 2px;
|
||||
margin-left: 2px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .view-preview-form .form-item--live-preview {
|
||||
right: auto;
|
||||
left: var(--space-s);
|
||||
margin-right: 2px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.views-live-preview {
|
||||
padding: var(--space-m);
|
||||
}
|
||||
.views-live-preview .views-query-info {
|
||||
overflow: auto;
|
||||
}
|
||||
.views-live-preview .section-title {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
color: var(--color-gray-800);
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 1.6154;
|
||||
}
|
||||
.views-live-preview .view > * {
|
||||
margin-top: var(--space-m);
|
||||
}
|
||||
.views-live-preview .preview-section {
|
||||
margin: 0 -5px;
|
||||
padding: 3px 5px;
|
||||
border: 1px dashed #dedede;
|
||||
}
|
||||
.views-live-preview li.views-row + li.views-row {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
/* The div.views-row is intentional and excludes li.views-row, for example */
|
||||
.views-live-preview div.views-row + div.views-row {
|
||||
margin-top: 36px;
|
||||
}
|
||||
.views-query-info table {
|
||||
margin: 10px 0;
|
||||
border-spacing: 0;
|
||||
border-collapse: separate;
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
.views-query-info table tr {
|
||||
background-color: var(--color-gray-050);
|
||||
}
|
||||
.views-query-info table th,
|
||||
.views-query-info table td {
|
||||
padding: var(--space-xs) var(--space-l);
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
.messages {
|
||||
margin-bottom: 18px;
|
||||
line-height: 1.4555;
|
||||
}
|
||||
|
||||
.js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: -1px;
|
||||
right: -5px; /* LTR */
|
||||
}
|
||||
[dir="rtl"].js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {
|
||||
right: auto;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Position dropbuttons with flexbox instead after the dropbuttons have been
|
||||
* converted to splitbuttons.
|
||||
*
|
||||
* @see https://www.drupal.org/project/drupal/issues/3134107
|
||||
* @see https://www.drupal.org/project/drupal/issues/1899236
|
||||
*/
|
||||
.edit-display-settings-top.views-ui-display-tab-bucket .dropbutton-wrapper {
|
||||
top: 0.8125rem;
|
||||
right: var(--space-s); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .edit-display-settings-top.views-ui-display-tab-bucket .dropbutton-wrapper {
|
||||
right: auto;
|
||||
left: var(--space-s);
|
||||
}
|
||||
|
||||
.views-list-section {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.form-textarea-wrapper,
|
||||
.form-item-options-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.views-messages .messages-list,
|
||||
.views-messages .messages-list__item {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Styles on devices with touchevents.
|
||||
*/
|
||||
html:not(.no-touchevents) .views-ui-display-tab-bucket__header--actions {
|
||||
padding: var(--space-l) var(--space-xs);
|
||||
}
|
||||
html:not(.no-touchevents) .edit-display-settings-top.views-ui-display-tab-bucket {
|
||||
padding: var(--space-m) var(--space-xs);
|
||||
}
|
||||
Reference in New Issue
Block a user