workspaces.off-canvas.css

Styling for the Workspaces off-canvas user interface.

File

core/modules/workspaces/css/workspaces.off-canvas.css

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Styling for the Workspaces off-canvas user interface.

  11.  */

  12. 

  13. #drupal-off-canvas-wrapper.workspaces-dialog {

  14.   padding-bottom: calc(var(--off-canvas-padding) / 2);

  15. }

  16. 

  17. @media (min-width: 47.9375rem) {

  18.   #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-content > div {

  19.     display: flex;

  20.     align-items: flex-end;

  21.     width: 100%;

  22.     height: 100%;

  23.   }

  24. }

  25. 

  26. @media (max-width: 47.9375rem) {

  27.   #drupal-off-canvas-wrapper.workspaces-dialog + .ui-dialog .ui-dialog-content {

  28.     max-height: unset !important; /* Override the max-height added by JS. */

  29.   }

  30. }

  31. 

  32. /**

  33.    * The Workspace UI hides the titlebar, but we need to show and correctly

  34.    * position the close button that is nested within it.

  35.    */

  36. 

  37. #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar {

  38.   all: revert;

  39. }

  40. 

  41. #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar::before {

  42.   content: none;

  43. }

  44. 

  45. #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-title {

  46.   display: none;

  47. }

  48. 

  49. #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {

  50.   inset-block-start: 1em;

  51.   inset-inline-end: 1em;

  52.   z-index: 1;

  53.   transform: none;

  54. }

  55. 

  56. #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace {

  57.   padding: 0 var(--off-canvas-padding);

  58. }

  59. 

  60. @media (min-width: 47.9375rem) {

  61.   #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace {

  62.     display: flex;

  63.     flex-direction: column;

  64.     flex-basis: 12.5rem;

  65.     flex-grow: 2;

  66.     align-self: stretch;

  67.     order: 1;

  68.     padding: var(--off-canvas-padding) var(--off-canvas-padding) 0;

  69.   }

  70. }

  71. 

  72. #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__title {

  73.   font-size: 0.8125rem;

  74.   font-weight: bold;

  75. }

  76. 

  77. #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label {

  78.   position: relative; /* Anchor icon pseudo-element. */

  79.   padding: 1.125rem 3.125rem 0;

  80.   color: #fff;

  81.   font-size: 1.125rem;

  82.   font-weight: bold;

  83.   line-height: 1.2;

  84. }

  85. 

  86. #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label::before {

  87.   position: absolute;

  88.   inset-inline-start: 0;

  89.   display: block;

  90.   width: 1.25rem;

  91.   height: 1.25rem;

  92.   content: "";

  93.   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3e  %3cpath fill='%23F0A100' fill-rule='evenodd' d='M38,0 L2.002,0 C0.896716337,-1.37884559e-07 0.000552089742,0.895716475 0,2.001 L0,38.003 C0,39.105 0.899,40.003 2,40.003 L38,40.003 C39.103,40.003 40,39.103 40,38.003 L40,2.001 C40.000531,1.47031248 39.7900198,0.961193334 39.4148607,0.585846626 C39.0397016,0.210499918 38.5306877,-0.000265742306 38,0 Z M34.003,4 C35.105,4 36.003,4.899 36.003,6 C36.003,7.102 35.103,7.998 34.003,7.998 C32.9235903,7.96385326 32.0662376,7.07894966 32.0662376,5.999 C32.0662376,4.91905034 32.9235903,4.03414674 34.003,4 Z M26.003,4 C27.105,4 28.002,4.899 28.002,6 C28.002,7.102 27.102,7.998 26.002,7.998 C24.9225903,7.96385326 24.0652376,7.07894966 24.0652376,5.999 C24.0652376,4.91905034 24.9225903,4.03414674 26.002,4 L26.003,4 Z M18.002,4 C19.104,4 20.002,4.899 20.002,6 C20.002,7.102 19.102,7.998 18.002,7.998 C16.899,7.998 16.002,7.1 16.002,5.999 C16.0025521,4.89482104 16.8978209,3.99999986 18.002,4 Z M36.002,36.002 L4,36.002 L4,12.001 L36.002,12.001 L36.002,36.002 Z M8.805,32.002 L15.196,32.002 C15.4092125,32.0030667 15.6140295,31.9189775 15.764983,31.7683995 C15.9159365,31.6178215 16.0005357,31.4132145 16,31.2 L16,16.805 C16.0005341,16.5919596 15.916072,16.3875055 15.7653354,16.2369566 C15.6145988,16.0864077 15.4100395,16.0022004 15.197,16.003 L8.794,16.003 C8.581215,16.0027342 8.37706868,16.087145 8.22660684,16.2376068 C8.07614501,16.3880687 7.99173418,16.592215 7.992,16.805 L7.992,31.208 C7.99966319,31.6507223 8.36222028,32.0048063 8.805,32.002 Z M20.803,24.002 L31.206,24.002 C31.4190404,24.0025341 31.6234945,23.918072 31.7740434,23.7673354 C31.9245923,23.6165988 32.0087996,23.4120395 32.008,23.199 L32.008,16.797 C32.0085328,16.5841335 31.9242078,16.3798319 31.7736879,16.2293121 C31.6231681,16.0787922 31.4188665,15.9944672 31.206,15.995 L20.803,15.995 C20.5901335,15.9944672 20.3858319,16.0787922 20.2353121,16.2293121 C20.0847922,16.3798319 20.0004672,16.5841335 20.001,16.797 L20.001,23.199 C20.001,23.646 20.356,24.001 20.803,24.001 L20.803,24.002 Z M20.803,32.002 L31.206,32.002 C31.4188665,32.0025328 31.6231681,31.9182078 31.7736879,31.7676879 C31.9242078,31.6171681 32.0085328,31.4128665 32.008,31.2 L32.008,28.797 C32.0085328,28.5841335 31.9242078,28.3798319 31.7736879,28.2293121 C31.6231681,28.0787922 31.4188665,27.9944672 31.206,27.995 L20.803,27.995 C20.5901335,27.9944672 20.3858319,28.0787922 20.2353121,28.2293121 C20.0847922,28.3798319 20.0004672,28.5841335 20.001,28.797 L20.001,31.2 C20.001,31.647 20.356,32.002 20.803,32.002 Z'/%3e%3c/svg%3e") center center no-repeat;

  94.   background-size: contain;

  95. }

  96. 

  97. @media (min-width: 47.9375rem) {

  98.   #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label::before {

  99.     width: 2.5rem;

  100.     height: 2.5rem;

  101.   }

  102. }

  103. 

  104. /* This is the "Manage workspace" link that appears when you're on a non-default workspace. */

  105. 

  106. #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__manage {

  107.   display: block;

  108.   font-size: 0.8125rem;

  109. }

  110. 

  111. /* This is the link to "View all workspaces". */

  112. 

  113. #drupal-off-canvas-wrapper.workspaces-dialog .all-workspaces {

  114.   display: inline-block;

  115.   padding: var(--off-canvas-padding);

  116.   font-size: 0.875rem;

  117. }

  118. 

  119. @media (min-width: 47.9375rem) {

  120.   #drupal-off-canvas-wrapper.workspaces-dialog .all-workspaces {

  121.     grid-row: 1;

  122.     grid-column: 2;

  123.     justify-self: end;

  124.     padding: 0;

  125.   }

  126. }

  127. 

  128. #drupal-off-canvas-wrapper.workspaces-dialog .workspaces > h3 {

  129.   margin-top: 0;

  130. }

  131. 

  132. #drupal-off-canvas-wrapper.workspaces-dialog .workspaces ul {

  133.   display: flex;

  134.   flex-direction: column;

  135.   grid-row: 2;

  136.   grid-column: 1 / -1;

  137.   margin: 0;

  138.   padding: 0;

  139.   list-style: none;

  140.   gap: 2px;

  141. }

  142. 

  143. @media (min-width: 47.9375rem) {

  144.   #drupal-off-canvas-wrapper.workspaces-dialog .workspaces ul {

  145.     flex-direction: row;

  146.   }

  147. }

  148. 

  149. #drupal-off-canvas-wrapper.workspaces-dialog .workspaces li {

  150.   flex: 1;

  151. }

  152. 

  153. @media (min-width: 47.9375rem) {

  154.   #drupal-off-canvas-wrapper.workspaces-dialog .workspaces {

  155.     display: grid;

  156.     flex-grow: 8;

  157.     grid-template-columns: 1fr 1fr;

  158.   }

  159. }

  160. 

  161. /* This is the link to the workspace. */

  162. 

  163. #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item {

  164.   position: relative;

  165.   display: block;

  166.   min-height: 4.6875rem;

  167.   padding-block-start: var(--off-canvas-padding);

  168.   padding-inline-start: 3.125rem;

  169.   color: var(--off-canvas-text-color);

  170.   outline-offset: -2px; /* Ensure focus outline doesn't overflow. */

  171.   background-color: var(--off-canvas-background-color-light);

  172.   font-size: 0.875rem;

  173.   font-weight: bold;

  174. }

  175. 

  176. #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:hover,

  177. #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:focus {

  178.   background-color: #666;

  179. }

  180. 

  181. #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item::before {

  182.   position: absolute;

  183.   inset-inline-start: var(--off-canvas-padding);

  184.   display: block;

  185.   width: 1.25rem;

  186.   height: 1.25rem;

  187.   content: "";

  188.   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3e  %3cpath fill='%23F0A100' fill-rule='evenodd' d='M38,0 L2.002,0 C0.896716337,-1.37884559e-07 0.000552089742,0.895716475 0,2.001 L0,38.003 C0,39.105 0.899,40.003 2,40.003 L38,40.003 C39.103,40.003 40,39.103 40,38.003 L40,2.001 C40.000531,1.47031248 39.7900198,0.961193334 39.4148607,0.585846626 C39.0397016,0.210499918 38.5306877,-0.000265742306 38,0 Z M34.003,4 C35.105,4 36.003,4.899 36.003,6 C36.003,7.102 35.103,7.998 34.003,7.998 C32.9235903,7.96385326 32.0662376,7.07894966 32.0662376,5.999 C32.0662376,4.91905034 32.9235903,4.03414674 34.003,4 Z M26.003,4 C27.105,4 28.002,4.899 28.002,6 C28.002,7.102 27.102,7.998 26.002,7.998 C24.9225903,7.96385326 24.0652376,7.07894966 24.0652376,5.999 C24.0652376,4.91905034 24.9225903,4.03414674 26.002,4 L26.003,4 Z M18.002,4 C19.104,4 20.002,4.899 20.002,6 C20.002,7.102 19.102,7.998 18.002,7.998 C16.899,7.998 16.002,7.1 16.002,5.999 C16.0025521,4.89482104 16.8978209,3.99999986 18.002,4 Z M36.002,36.002 L4,36.002 L4,12.001 L36.002,12.001 L36.002,36.002 Z M8.805,32.002 L15.196,32.002 C15.4092125,32.0030667 15.6140295,31.9189775 15.764983,31.7683995 C15.9159365,31.6178215 16.0005357,31.4132145 16,31.2 L16,16.805 C16.0005341,16.5919596 15.916072,16.3875055 15.7653354,16.2369566 C15.6145988,16.0864077 15.4100395,16.0022004 15.197,16.003 L8.794,16.003 C8.581215,16.0027342 8.37706868,16.087145 8.22660684,16.2376068 C8.07614501,16.3880687 7.99173418,16.592215 7.992,16.805 L7.992,31.208 C7.99966319,31.6507223 8.36222028,32.0048063 8.805,32.002 Z M20.803,24.002 L31.206,24.002 C31.4190404,24.0025341 31.6234945,23.918072 31.7740434,23.7673354 C31.9245923,23.6165988 32.0087996,23.4120395 32.008,23.199 L32.008,16.797 C32.0085328,16.5841335 31.9242078,16.3798319 31.7736879,16.2293121 C31.6231681,16.0787922 31.4188665,15.9944672 31.206,15.995 L20.803,15.995 C20.5901335,15.9944672 20.3858319,16.0787922 20.2353121,16.2293121 C20.0847922,16.3798319 20.0004672,16.5841335 20.001,16.797 L20.001,23.199 C20.001,23.646 20.356,24.001 20.803,24.001 L20.803,24.002 Z M20.803,32.002 L31.206,32.002 C31.4188665,32.0025328 31.6231681,31.9182078 31.7736879,31.7676879 C31.9242078,31.6171681 32.0085328,31.4128665 32.008,31.2 L32.008,28.797 C32.0085328,28.5841335 31.9242078,28.3798319 31.7736879,28.2293121 C31.6231681,28.0787922 31.4188665,27.9944672 31.206,27.995 L20.803,27.995 C20.5901335,27.9944672 20.3858319,28.0787922 20.2353121,28.2293121 C20.0847922,28.3798319 20.0004672,28.5841335 20.001,28.797 L20.001,31.2 C20.001,31.647 20.356,32.002 20.803,32.002 Z'/%3e%3c/svg%3e") center center no-repeat;

  189.   background-size: 100% auto;

  190. }

  191. 

  192. #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace--default .active-workspace__label::before,

  193. #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item--default::before {

  194.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e  %3cpath fill='%2381C071' fill-rule='evenodd' d='M19,0 L1,0 C0.449,0 0,0.448 0,1 L0,19 C0,19.552 0.45,20 1,20 L19,20 C19.552,20 20,19.55 20,19 L20,1 C20,0.44771525 19.5522847,3.38176876e-17 19,0 Z M17.001,2 C17.553,2 18.001,2.45 18.001,3 C18.001,3.55 17.551,3.999 17.001,3.999 C16.451,3.999 16.001,3.549 16.001,2.999 C16.001,2.44671525 16.4487153,1.999 17.001,1.999 L17.001,2 Z M13.001,2 C13.552,2 14.001,2.45 14.001,3 C14.001,3.55 13.551,3.999 13.001,3.999 C12.4487153,3.999 12.001,3.55128475 12.001,2.999 C12.001,2.44671525 12.4487153,1.999 13.001,1.999 L13.001,2 Z M9.001,2 C9.552,2 10.001,2.45 10.001,3 C10.001,3.55 9.551,3.999 9.001,3.999 C8.44871525,3.999 8.001,3.55128475 8.001,2.999 C8.001,2.44671525 8.44871525,1.999 9.001,1.999 L9.001,2 Z M18.001,18 L2,18 L2,6 L18.001,6 L18.001,18 Z M4.402,16 L7.598,16 C7.70460623,16.0005334 7.80701477,15.9584887 7.88249152,15.8831997 C7.95796827,15.8079107 8.00026785,15.7056072 8,15.599 L8,8.402 C8.00026565,8.29574025 7.95824022,8.19374159 7.88319685,8.11851062 C7.80815349,8.04327965 7.70626008,8.00099967 7.6,8.001 L4.396,8.001 C4.28956674,8.00073358 4.18741595,8.04289612 4.11215603,8.11815603 C4.03689612,8.19341595 3.99473358,8.29556674 3.995,8.402 L3.995,15.603 C3.999,15.823 4.177,16 4.401,16 L4.402,16 Z M10.402,12 L15.603,12 C15.7094333,12.0002664 15.811584,11.9581039 15.886844,11.882844 C15.9621039,11.807584 16.0042664,11.7054333 16.004,11.599 L16.004,8.398 C16.0042664,8.29156674 15.9621039,8.18941595 15.886844,8.11415603 C15.811584,8.03889612 15.7094333,7.99673358 15.603,7.997 L10.402,7.997 C10.2957402,7.99673435 10.1937416,8.03875978 10.1185106,8.11380315 C10.0432796,8.18884651 10.0009997,8.29073992 10.001,8.397 L10.001,11.6 C10.001,11.824 10.178,12 10.401,12 L10.402,12 Z M10.402,16 L15.603,16 C15.7094333,16.0002664 15.811584,15.9581039 15.886844,15.882844 C15.9621039,15.807584 16.0042664,15.7054333 16.004,15.599 L16.004,14.398 C16.0042664,14.2915667 15.9621039,14.189416 15.886844,14.114156 C15.811584,14.0388961 15.7094333,13.9967336 15.603,13.997 L10.402,13.997 C10.2957402,13.9967343 10.1937416,14.0387598 10.1185106,14.1138031 C10.0432796,14.1888465 10.0009997,14.2907399 10.001,14.397 L10.001,15.6 C10.001,15.824 10.178,16 10.401,16 L10.402,16 Z'/%3e%3c/svg%3e"); /* Green icon. */

  195. }

  196. 

  197. #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__actions .button {

  198.   margin: 0.625rem 0 0;

  199. }

  200. 

  201. @media (max-width: 47.9375rem) {

  202.   #drupal-off-canvas-wrapper.workspaces-dialog {

  203.     height: 100% !important;

  204.   }

  205. }