123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326 |
- /**
- * @file
- * Visual styling for Settings Tray module.
- */
- /* @todo Move this into toolbar when this module is no longer experimental:
- * https://www.drupal.org/node/2784593.
- */
- /* Style the edit mode toolbar and tabs. */
- #toolbar-bar.js-outside-in-edit-mode {
- background-image: linear-gradient(to bottom,#0c97ed,#1f86c7);
- }
- .js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
- color: #999;
- }
- .js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
- color: #333;
- }
- /* Style both the edit and editing states of the contextual links toggle tab. */
- .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item,
- .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active,
- .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
- background-color: #50a0e9;
- background-image: linear-gradient(to bottom, #007bc6, #0071b8);
- color: #ddd;
- text-shadow: none;
- font-weight: bold;
- outline: none;
- }
- /* Make the hover of the inactive state the same as the active state. */
- .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
- .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
- background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
- color: #fff;
- }
- /* Make the hover of the active state the same as the inactive state. */
- .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
- background-color: #2369a6;
- background-image: linear-gradient(to bottom, #007bc6, #0071b8);
- color: #fff;
- }
- /* Make the inactive icon grey. */
- .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:before {
- background-image: url(../../../misc/icons/bebebe/pencil.svg);
- }
- /* Make the active icon white. */
- .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:before {
- background-image: url(../../../misc/icons/ffffff/pencil.svg);
- }
- .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover:before {
- background-image: url(../../../misc/icons/ffffff/pencil.svg);
- }
- .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
- background-image: url(../../../misc/icons/ffffff/pencil.svg);
- }
- .toolbar-tab > .button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
- background-image: url(../../../misc/icons/ffffff/pencil.svg);
- }
- /* Style the editables while in edit mode. */
- .dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable {
- outline: 1px dashed rgba(0,0,0,0.5);
- box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
- }
- .dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable:hover,
- .dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable.outside-in-active-editable {
- background-color: rgba(0,0,0,0.2);
- }
- /* Style the dialog-off-canvas container. */
- .ui-dialog-outside-in {
- background: #444;
- border: 0 solid transparent;
- border-radius: 0;
- box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
- padding: 0;
- color: #ddd;
- /* Layer the dialog just under the toolbar. */
- z-index: 501;
- }
- /* Style content in the tray. */
- .ui-dialog-outside-in p,
- .ui-dialog-outside-in h1,
- .ui-dialog-outside-in h2,
- .ui-dialog-outside-in h3,
- .ui-dialog-outside-in h4,
- .ui-dialog-outside-in h5,
- .ui-dialog-outside-in h6,
- .ui-dialog-outside-in pre,
- .ui-dialog-outside-in legend,
- .ui-dialog-outside-in cite,
- .ui-dialog-outside-in span,
- .ui-dialog-outside-in summary,
- .ui-dialog-outside-in details,
- .ui-dialog-outside-in .form-item {
- color: #ddd;
- font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
- font-size: 14px;
- font-weight: normal;
- background-color: transparent;
- text-shadow: none;
- }
- .ui-dialog-outside-in a,
- .ui-dialog-outside-in .link {
- border-bottom: none;
- font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #85bef4;
- text-decoration: none;
- transition: color .5s ease;
- }
- .ui-dialog-outside-in a:focus,
- .ui-dialog-outside-in .link:focus,
- .ui-dialog-outside-in a:hover,
- .ui-dialog-outside-in .link:hover {
- outline: none;
- color: #46a0f5;
- }
- /* Style the tray header. */
- .ui-dialog-outside-in .ui-dialog-titlebar {
- padding: 20px;
- background: #2d2d2d;
- border: 0;
- border-bottom: 1px solid #000;
- border-radius: 0;
- font-weight: normal;
- color: #fff;
- }
- .ui-dialog-outside-in .ui-dialog-titlebar-close {
- background-image: url(../../../misc/icons/bebebe/ex.svg);
- background-position: center center;
- background-repeat: no-repeat;
- background-color: transparent;
- border: 0;
- position: absolute;
- right: 20px;
- -moz-transition: all .5s ease;
- transition: background .5s ease;
- }
- .ui-dialog-outside-in .ui-dialog-titlebar-close:hover {
- background-image: url(../../../misc/icons/ffffff/ex.svg);
- }
- [dir="rtl"] .ui-dialog-outside-in .ui-dialog-titlebar-close {
- left: 20px;
- right: auto;
- }
- .ui-dialog-outside-in .ui-dialog-title {
- font-size: 16px;
- margin: 0;
- /* Push the text away from the icon. */
- padding-left: 30px; /* LTR */
- padding-right: 0px; /* LTR */
- /* Ensure that long titles do not overlap the close button. */
- max-width: 210px;
- text-align: left; /* LTR */
- }
- [dir="rtl"] .ui-dialog-outside-in .ui-dialog-title {
- text-align: right;
- padding-left: 0px;
- padding-right: 0px;
- }
- .ui-dialog-outside-in .ui-dialog-title:before {
- background: transparent url(../../../misc/icons/ffffff/pencil.svg) no-repeat scroll center center;
- background-size: 100% auto;
- content: '';
- display: block;
- height: 100%;
- position: absolute;
- left: 20px; /* LTR */
- top: 0;
- width: 20px;
- }
- [dir="rtl"] .ui-dialog-outside-in .ui-dialog-title:before {
- left: auto;
- right: 20px;
- }
- /* Override default styling from jquery UI. */
- .ui-state-default,
- .ui-widget-content .ui-state-default,
- .ui-widget-header .ui-state-default {
- border: 0;
- font-weight: normal;
- font-size: 14px;
- color: #333;
- }
- /* Hide the defauld Jquery UI dialog close button. */
- .ui-dialog-outside-in .ui-icon-closethick {
- visibility: hidden;
- }
- /* Groups below here with todos to move to new component need to load last. */
- /**
- * Visual styling for buttons in the Settings Tray module's off canvas tray.
- * @todo Move to its own component:
- * https://www.drupal.org/node/1945262.
- */
- .ui-dialog-outside-in button.link {
- background: transparent;
- border: 0;
- cursor: pointer;
- margin: 0;
- padding: 0;
- }
- .ui-dialog-outside-in .button {
- width: 100%;
- height: auto;
- margin: 1em auto;
- padding: 6px 1em;
- background: #7b7b7b;
- border-radius: 1em;
- font-size: 14px;
- color: #fff;
- transition: all .5s ease;
- }
- .ui-dialog-outside-in .button:hover,
- .ui-dialog-outside-in .button:focus {
- background: #888;
- }
- .ui-dialog-outside-in .button--primary {
- background: #277abd none;
- border: none;
- color: #fff;
- transition: all .5s ease;
- }
- .ui-dialog-outside-in .button--primary:hover,
- .ui-dialog-outside-in .button--primary:focus {
- background: #2b8bd8;
- }
- /*
- * Visual styling for dropbutton in the Settings Tray module's off canvas tray.
- * @todo Move to its own component:
- * https://www.drupal.org/node/1945262.
- */
- .ui-dialog-outside-in .dropbutton-widget {
- background: #7b7b7b none;
- border: 0;
- border-radius: 1em;
- color: #eee;
- transition: background .5s ease;
- }
- .ui-dialog-outside-in .dropbutton-widget:hover {
- box-shadow: 0 2px 2px 1px rgba(0,0,0,0.5);
- }
- .ui-dialog-outside-in .dropbutton-toggle button {
- background: #7b7b7b none;
- border-bottom-right-radius: 1em; /* LTR */
- border-top-right-radius: 1em; /* LTR */
- border-style: solid;
- border-color: #333;
- border-left-width: 1px; /* LTR */
- transition: background .5s ease;
- }
- [dir="rtl"] .ui-dialog-outside-in .dropbutton-toggle button {
- border-radius: 0;
- border-bottom-left-radius: 1em;
- border-top-left-radius: 1em;
- border-width: 0;
- border-right-width: 1px;
- }
- .ui-dialog-outside-in .dropbutton .dropbutton-action:hover,
- .ui-dialog-outside-in .dropbutton a:hover {
- background: #6b6b6b none;
- border-bottom-left-radius: 1em; /* LTR */
- border-top-left-radius: 1em; /* LTR */
- }
- [dir="rtl"] .ui-dialog-outside-in .dropbutton .dropbutton-action:hover,
- [dir="rtl"] .ui-dialog-outside-in .dropbutton a:hover {
- border-radius: 0;
- border-bottom-right-radius: 1em;
- border-top-right-radius: 1em;
- }
- .ui-dialog-outside-in .dropbutton a {
- padding: 0.1em 0.8em;
- color: #eee;
- font-size: 90%;
- line-height: 1.8;
- transition: all .5s ease;
- }
- .ui-dialog-outside-in .dropbutton:hover a {
- color: #fff;
- }
- /* Make an arrow out of borders with some fancy CSS. */
- .ui-dialog-outside-in span.dropbutton-arrow {
- border-bottom-color: transparent;
- border-left-color: transparent;
- border-right-color: transparent;
- border-style: solid;
- border-width: 0.3333em 0.3333em 0;
- display: block;
- height: 0;
- line-height: 0;
- position: absolute;
- right: 40%;
- top: 50%;
- margin-top: -0.1666em;
- width: 0;
- overflow: hidden;
- color: #fff;
- }
- .js .ui-dialog-outside-in .dropbutton-toggle .dropbutton-arrow:hover {
- background: transparent;
- }
- .ui-dialog-outside-in td .dropbutton-multiple {
- padding-right: 0;
- }
- [dir="rtl"].ui-dialog-outside-in td .dropbutton-multiple {
- padding-left: 0;
- }
- .ui-dialog-outside-in td .dropbutton-multiple .dropbutton {
- border-right: 0;
- border-left: 0;
- }
- .ui-dialog-outside-in td .dropbutton .secondary-action {
- border-top-color: #000;
- }
|