superdesk-ui-framework 4.0.28 → 4.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -42196,107 +42196,122 @@ i.sd-sidetab-menu__helper-icon {
42196
42196
  .sd-bottom-nav-list .sd-bottom-nav-list__item--disabled .sd-bottom-nav-list__item-title {
42197
42197
  pointer-events: none; }
42198
42198
 
42199
- :root {
42200
- --sd-editor-colour__main-bg: hsla(0, 0%, 100%, 1);
42201
- --sd-editor-colour__main-bg--alt: hsla(214, 13%, 96%, 1);
42202
- --sd-editor-colour__main-border: hsla(214, 13%, 12%, 0.2);
42203
- --sd-editor-colour__txt: hsla(0, 0%, 20%, 1);
42204
- --sd-editor-colour__txt--accent: var(--sd-colour-interactive);
42205
- --sd-editor-colour__quote-border: hsla(0, 0%, 20%, 0.5);
42206
- --sd-editor-colour__controls-bg: hsla(214, 13%, 96%, 1);
42207
- --sd-editor-colour__controls-border: hsla(214, 13%, 12%, 0.2);
42208
- --sd-editor-colour__button-bg--active: hsla(214, 13%, 96%, 0.2);
42209
- --sd-editor-colour__button-txt--active: var(--sd-colour-interactive);
42210
- --sd-editor-colour__field-label-bg: hsla(214, 13%, 12%, 0.5);
42211
- --sd-editor-colour__field-label-txt: hsla(214, 13%, 96%, 0.8);
42212
- --sd-editor-colour__float-toolbar-bg: hsla(214, 13%, 96%, 0.96);
42213
- --sd-editor-colour__comment-bg: hsla(54, 100%, 61%, 0.3);
42214
- --sd-editor-colour__annotation: hsla(91, 100%, 40%, 0.6);
42215
- --sd-editor-colour__removing: hsla(279, 64%, 47%, 1);
42216
- --sd-editor-colour__removing-bg: hsla(279, 64%, 47%, 0.12);
42217
- --sd-editor-colour__adding: hsla(82, 90%, 32%, 1);
42218
- --sd-editor-colour__adding-bg: hsla(82, 90%, 32%, 0.16); }
42219
-
42220
- .sd-editor--theme-default {
42221
- --sd-editor-colour__main-bg: hsla(0, 0%, 100%, 1);
42222
- --sd-editor-colour__main-bg--alt: hsla(214, 13%, 96%, 1);
42223
- --sd-editor-colour__main-border: hsla(214, 13%, 12%, 0.2);
42224
- --sd-editor-colour__txt: hsla(0, 0%, 20%, 1);
42225
- --sd-editor-colour__txt--accent: var(--sd-colour-interactive);
42226
- --sd-editor-colour__quote-border: hsla(0, 0%, 20%, 0.5);
42227
- --sd-editor-colour__controls-bg: hsla(214, 13%, 96%, 1);
42228
- --sd-editor-colour__controls-border: hsla(214, 13%, 12%, 0.2);
42229
- --sd-editor-colour__button-bg--active: hsla(214, 13%, 99%, 0.9); }
42230
-
42231
- .sd-editor--theme-dark {
42232
- --sd-editor-colour__main-bg: hsla(214, 13%, 12%, 1);
42233
- --sd-editor-colour__main-bg--alt: hsla(214, 13%, 16%, 1);
42234
- --sd-editor-colour__main-border: hsla(214, 13%, 85%, 0.2);
42235
- --sd-editor-colour__txt: hsla(214, 13%, 85%, 1);
42236
- --sd-editor-colour__txt--accent: var(--sd-colour-interactive);
42237
- --sd-editor-colour__quote-border: hsla(214, 13%, 85%, 0.5);
42238
- --sd-editor-colour__controls-bg: hsla(214, 13%, 16%, 1);
42239
- --sd-editor-colour__controls-border: hsla(214, 13%, 85%, 0.2);
42240
- --sd-editor-colour__field-label-bg: hsla(214, 13%, 5%, 0.9);
42241
- --sd-editor-colour__float-toolbar-bg: hsla(214, 13%, 16%, 0.96);
42242
- --sd-editor-colour__comment-bg: hsla(54, 100%, 61%, 0.16);
42243
- --sd-editor-colour__annotation: hsla(91, 100%, 40%, 0.6);
42244
- --sd-editor-colour__removing: hsla(279, 64%, 47%, 1);
42245
- --sd-editor-colour__removing-bg: hsla(279, 64%, 47%, 0.12);
42246
- --sd-editor-colour__adding: hsla(82, 90%, 32%, 1);
42247
- --sd-editor-colour__adding-bg: hsla(82, 90%, 32%, 0.16); }
42248
-
42249
- .sd-editor--theme-blue {
42250
- --sd-editor-colour__main-bg: hsla(212, 89%, 22%, 1);
42251
- --sd-editor-colour__main-bg--alt: hsla(212, 89%, 28%, 1);
42252
- --sd-editor-colour__main-border: hsla(214, 13%, 85%, 0.2);
42253
- --sd-editor-colour__txt: hsla(0, 0%, 100%, 1);
42254
- --sd-editor-colour__txt--accent: hsla(307, 100%, 50%, 1);
42255
- --sd-editor-colour__quote-border: hsla(214, 13%, 85%, 0.5);
42256
- --sd-editor-colour__controls-bg: hsla(212, 89%, 26%, 1);
42257
- --sd-editor-colour__controls-border: hsla(214, 13%, 85%, 0.2); }
42258
-
42259
- .sd-editor--theme-turquoise {
42260
- --sd-editor-colour__main-bg: hsla(178, 49%, 57%, 1);
42261
- --sd-editor-colour__main-bg--alt: hsla(178, 49%, 64%, 1);
42262
- --sd-editor-colour__main-border: hsla(214, 13%, 12%, 0.2);
42263
- --sd-editor-colour__txt: hsla(213, 49%, 14%, 1);
42264
- --sd-editor-colour__txt--accent: hsla(307, 100%, 50%, 1);
42265
- --sd-editor-colour__quote-border: hsla(213, 49%, 14%, 0.5);
42266
- --sd-editor-colour__controls-bg: hsla(178, 49%, 61%, 1);
42267
- --sd-editor-colour__controls-border: hsla(214, 13%, 12%, 0.12);
42268
- --sd-editor-colour__comment-bg: hsla(54, 100%, 61%, 0.3);
42269
- --sd-editor-colour__annotation: hsla(91, 100%, 40%, 0.6);
42270
- --sd-editor-colour__removing: hsla(279, 64%, 47%, 1);
42271
- --sd-editor-colour__removing-bg: hsla(279, 64%, 47%, 0.12);
42272
- --sd-editor-colour__adding: hsla(82, 90%, 32%, 1);
42273
- --sd-editor-colour__adding-bg: hsla(82, 90%, 32%, 0.16); }
42274
-
42275
- .sd-editor--theme-military {
42276
- --sd-editor-colour__main-bg: hsla(70, 25%, 50%, 1);
42277
- --sd-editor-colour__main-bg--alt: hsla(70, 25%, 58%, 1);
42278
- --sd-editor-colour__main-border: hsla(214, 13%, 12%, 0.2);
42279
- --sd-editor-colour__txt: hsla(71, 25%, 13%, 1);
42280
- --sd-editor-colour__txt--accent: hsla(307, 100%, 50%, 1);
42281
- --sd-editor-colour__quote-border: hsla(71, 25%, 13%, 0.5);
42282
- --sd-editor-colour__controls-bg: hsla(70, 25%, 52%, 1);
42283
- --sd-editor-colour__controls-border: hsla(214, 13%, 12%, 0.12);
42284
- --sd-editor-colour__comment-bg: hsla(54, 100%, 61%, 0.3);
42285
- --sd-editor-colour__annotation: hsla(91, 100%, 40%, 0.6);
42286
- --sd-editor-colour__removing: hsla(279, 64%, 47%, 1);
42287
- --sd-editor-colour__removing-bg: hsla(279, 64%, 47%, 0.12);
42288
- --sd-editor-colour__adding: hsla(82, 100%, 20%, 1);
42289
- --sd-editor-colour__adding-bg: hsla(82, 90%, 22%, 0.16); }
42290
-
42291
- .sd-editor--theme-natural {
42292
- --sd-editor-colour__main-bg: hsla(51, 57%, 85%, 1);
42293
- --sd-editor-colour__main-bg--alt: hsla(51, 57%, 79%, 1);
42294
- --sd-editor-colour__main-border: hsla(214, 13%, 12%, 0.2);
42295
- --sd-editor-colour__txt: hsla(0, 18%, 10%, 1);
42296
- --sd-editor-colour__txt--accent: var(--sd-colour-interactive);
42297
- --sd-editor-colour__quote-border: hsla(0, 18%, 10%, .5);
42298
- --sd-editor-colour__controls-bg: hsla(51, 57%, 82%, 1);
42299
- --sd-editor-colour__controls-border: hsla(214, 13%, 85%, 0.2); }
42199
+ :root,
42200
+ [data-theme="dark-ui"] {
42201
+ --sd-editor-colour__main-bg: var(--color-surface-base);
42202
+ --sd-editor-colour__main-border: var(--color-line-medium);
42203
+ --sd-editor-colour__txt: var(--color-text-default);
42204
+ --sd-editor-colour__txt--accent: var(--color-interactive-default);
42205
+ --sd-editor-colour__quote-border: var(--color-line-strong);
42206
+ --sd-editor-colour__controls-border: var(--color-line-light);
42207
+ --sd-editor-colour__controls-bg: var(--color-surface-subdued);
42208
+ --sd-editor-colour__button-bg--active: hsl(214 13% 96% / 0.2);
42209
+ --sd-editor-colour__button-txt--active: var(--color-interactive-default);
42210
+ --sd-editor-colour__field-label-bg: hsl(214 13% 4% / 0.5);
42211
+ --sd-editor-colour__field-label-txt: hsl(214 13% 96% / 1);
42212
+ --sd-editor-colour__comment-bg: hsl(54 88% 55% / 0.35);
42213
+ --sd-editor-colour__annotation: hsl(91 100% 40% / 0.6);
42214
+ --sd-editor-colour__removing: var(--color-highlight-text);
42215
+ --sd-editor-colour__removing-bg: var(--color-highlight-translucent);
42216
+ --sd-editor-colour__adding: var(--color-success-text);
42217
+ --sd-editor-colour__adding-bg: var(--color-success-translucent); }
42218
+ :root .sd-editor--theme-default,
42219
+ [data-theme="dark-ui"] .sd-editor--theme-default {
42220
+ --theme-color-base: hsl(0 0% 100%);
42221
+ --sd-editor-colour__main-bg: var(--theme-color-base);
42222
+ --sd-editor-colour__main-bg--alt: hsl(214 13% 96%);
42223
+ --sd-editor-colour__main-border: hsl(214 13% 12% / 0.2);
42224
+ --sd-editor-colour__txt: var(--color-text-onlight);
42225
+ --sd-editor-colour__txt--accent: var(--color-interactive-default);
42226
+ --sd-editor-colour__quote-border: hsl(214 13% 55% / 0.5);
42227
+ --sd-editor-colour__controls-bg: hsl(214 13% 94%);
42228
+ --sd-editor-colour__controls-border: hsl(214 13% 12% / 0.2);
42229
+ --sd-editor-colour__button-bg--active: hsl(214 13% 99% / 0.9);
42230
+ --sd-editor-colour__removing: var(--blissful-berry-600);
42231
+ --sd-editor-colour__removing-bg: var(--blissful-berry-500-a12);
42232
+ --sd-editor-colour__adding: var(--green-brier-600);
42233
+ --sd-editor-colour__adding-bg: var(--green-brier-400-a12); }
42234
+ :root .sd-editor--theme-dark,
42235
+ [data-theme="dark-ui"] .sd-editor--theme-dark {
42236
+ --theme-color-base: hsl(214 13% 12%);
42237
+ --sd-editor-colour__main-bg: var(--theme-color-base);
42238
+ --sd-editor-colour__main-bg--alt: lch(from var(--theme-color-base) calc(l - 5) c h);
42239
+ --sd-editor-colour__main-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.3);
42240
+ --sd-editor-colour__txt: var(--color-text-ondark);
42241
+ --sd-editor-colour__txt--accent: var(--color-interactive-text);
42242
+ --sd-editor-colour__quote-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.5);
42243
+ --sd-editor-colour__controls-bg: lch(from var(--theme-color-base) calc(l - 5) c h);
42244
+ --sd-editor-colour__controls-border: lch(from var(--theme-color-base) calc(l + 65) c h / 0.2);
42245
+ --sd-editor-colour__field-label-bg: lch(from var(--theme-color-base) calc(l - 10) c h);
42246
+ --sd-editor-colour__removing: var(--blissful-berry-300);
42247
+ --sd-editor-colour__removing-bg: var(--blissful-berry-500-a16);
42248
+ --sd-editor-colour__adding: var(--green-brier-300);
42249
+ --sd-editor-colour__adding-bg: var(--green-brier-400-a12); }
42250
+ :root .sd-editor--theme-blue,
42251
+ [data-theme="dark-ui"] .sd-editor--theme-blue {
42252
+ --theme-color-base: hsl(212 91% 18%);
42253
+ --sd-editor-colour__main-bg: var(--theme-color-base);
42254
+ --sd-editor-colour__main-bg--alt: lch(from var(--theme-color-base) calc(l - 5) c h);
42255
+ --sd-editor-colour__main-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.3);
42256
+ --sd-editor-colour__txt: var(--color-text-ondark);
42257
+ --sd-editor-colour__txt--accent: hsl(307 100% 50%);
42258
+ --sd-editor-colour__quote-border: lch(from var(--theme-color-base) calc(l + 55) calc(c - 20) h / 0.5);
42259
+ --sd-editor-colour__controls-bg: lch(from var(--theme-color-base) calc(l - 5) c h);
42260
+ --sd-editor-colour__controls-border: lch(from var(--theme-color-base) calc(l + 65) calc(c - 50) h / 0.2);
42261
+ --sd-editor-colour__field-label-bg: lch(from var(--theme-color-base) calc(l - 10) c h);
42262
+ --sd-editor-colour__removing: var(--blissful-berry-300);
42263
+ --sd-editor-colour__removing-bg: var(--blissful-berry-500-a16);
42264
+ --sd-editor-colour__adding: var(--green-brier-300);
42265
+ --sd-editor-colour__adding-bg: var(--green-brier-400-a12); }
42266
+ :root .sd-editor--theme-turquoise,
42267
+ [data-theme="dark-ui"] .sd-editor--theme-turquoise {
42268
+ --theme-color-base: hsl(179 49% 65%);
42269
+ --sd-editor-colour__main-bg: var(--theme-color-base);
42270
+ --sd-editor-colour__main-bg--alt: lch(from var(--theme-color-base) calc(l - 5) c h);
42271
+ --sd-editor-colour__main-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.3);
42272
+ --sd-editor-colour__txt: var(--color-text-onlight);
42273
+ --sd-editor-colour__txt--accent: hsl(307 100% 50%);
42274
+ --sd-editor-colour__quote-border: lch(from var(--theme-color-base) calc(l - 40) c h / 0.5);
42275
+ --sd-editor-colour__controls-bg: lch(from var(--theme-color-base) calc(l + 3) c h);
42276
+ --sd-editor-colour__controls-border: lch(from var(--theme-color-base) calc(l - 47) c h / 0.2);
42277
+ --sd-editor-colour__comment-bg: hsl(54 90% 80% / 0.5);
42278
+ --sd-editor-colour__annotation: hsl(91 100% 60% / 0.8);
42279
+ --sd-editor-colour__removing: var(--blissful-berry-600);
42280
+ --sd-editor-colour__removing-bg: var(--blissful-berry-500-a12);
42281
+ --sd-editor-colour__adding: var(--green-brier-600);
42282
+ --sd-editor-colour__adding-bg: var(--green-brier-400-a12); }
42283
+ :root .sd-editor--theme-military,
42284
+ [data-theme="dark-ui"] .sd-editor--theme-military {
42285
+ --theme-color-base: hsl(69 25% 65%);
42286
+ --sd-editor-colour__main-bg: var(--theme-color-base);
42287
+ --sd-editor-colour__main-bg--alt: lch(from var(--theme-color-base) calc(l - 5) c h);
42288
+ --sd-editor-colour__main-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.3);
42289
+ --sd-editor-colour__txt: var(--color-text-onlight);
42290
+ --sd-editor-colour__txt--accent: hsl(307 100% 50%);
42291
+ --sd-editor-colour__quote-border: lch(from var(--theme-color-base) calc(l - 40) c h / 0.5);
42292
+ --sd-editor-colour__controls-bg: lch(from var(--theme-color-base) calc(l + 3) c h);
42293
+ --sd-editor-colour__controls-border: lch(from var(--theme-color-base) calc(l - 47) c h / 0.2);
42294
+ --sd-editor-colour__comment-bg: hsl(54 90% 80% / 0.5);
42295
+ --sd-editor-colour__annotation: hsl(91 100% 60% / 0.8);
42296
+ --sd-editor-colour__removing: var(--blissful-berry-600);
42297
+ --sd-editor-colour__removing-bg: var(--blissful-berry-500-a12);
42298
+ --sd-editor-colour__adding: var(--green-brier-600);
42299
+ --sd-editor-colour__adding-bg: var(--green-brier-400-a12); }
42300
+ :root .sd-editor--theme-natural,
42301
+ [data-theme="dark-ui"] .sd-editor--theme-natural {
42302
+ --theme-color-base: hsl(51 50% 89%);
42303
+ --sd-editor-colour__main-bg: var(--theme-color-base);
42304
+ --sd-editor-colour__main-bg--alt: lch(from var(--theme-color-base) calc(l - 5) c h);
42305
+ --sd-editor-colour__main-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.3);
42306
+ --sd-editor-colour__txt: var(--color-text-onlight);
42307
+ --sd-editor-colour__txt--accent: var(--color-interactive-text);
42308
+ --sd-editor-colour__quote-border: lch(from var(--theme-color-base) calc(l - 40) c h / 0.5);
42309
+ --sd-editor-colour__controls-bg: lch(from var(--theme-color-base) calc(l + 3) c h);
42310
+ --sd-editor-colour__controls-border: lch(from var(--theme-color-base) calc(l - 69) c h / 0.2);
42311
+ --sd-editor-colour__removing: var(--blissful-berry-600);
42312
+ --sd-editor-colour__removing-bg: var(--blissful-berry-500-a12);
42313
+ --sd-editor-colour__adding: var(--green-brier-600);
42314
+ --sd-editor-colour__adding-bg: var(--green-brier-400-a12); }
42300
42315
 
42301
42316
  .color-swatch__list {
42302
42317
  display: grid;
@@ -42608,30 +42623,34 @@ i.sd-sidetab-menu__helper-icon {
42608
42623
  font-size: 1.8rem; }
42609
42624
 
42610
42625
  .Editor3-styleButton {
42611
- color: var(--sd-editor-colour__txt);
42626
+ color: inherit;
42612
42627
  cursor: pointer;
42613
42628
  margin: 0.4rem 0.2rem;
42614
- height: 3rem;
42615
- min-width: 3rem;
42629
+ height: 3.2rem;
42630
+ min-width: 3.2rem;
42616
42631
  padding: 0.6rem;
42617
42632
  display: inline-block;
42618
- border-radius: 1.5rem;
42633
+ border-radius: var(--b-radius--medium);
42619
42634
  text-align: center;
42620
- line-height: 1.6rem; }
42635
+ line-height: 1.6rem;
42636
+ transition: all 0.2s ease; }
42621
42637
  .Editor3-styleButton [class*="icon-"] {
42638
+ transition: opacity 0.2s ease;
42622
42639
  color: inherit;
42623
- opacity: 0.5;
42640
+ opacity: 0.8;
42624
42641
  vertical-align: middle; }
42625
- .Editor3-styleButton:hover [class*="icon-"] {
42626
- color: inherit;
42627
- opacity: 0.9; }
42642
+ .Editor3-styleButton:hover {
42643
+ background-color: rgba(140, 151, 166, 0.25); }
42644
+ .Editor3-styleButton:hover [class*="icon-"] {
42645
+ color: inherit;
42646
+ opacity: 1; }
42628
42647
  .Editor3-styleButton .inactive [class*="icon-"] {
42629
- opacity: 0.2; }
42648
+ opacity: 0.4; }
42630
42649
  .Editor3-styleButton .inactive:hover [class*="icon-"] {
42631
- opacity: 0.2; }
42650
+ opacity: 0.4; }
42632
42651
  .Editor3-styleButton.Editor3-activeButton, .Editor3-styleButton.Editor3-activeButton:hover {
42633
- color: var(--sd-editor-colour__button-txt--active);
42634
- background-color: rgba(0, 0, 0, 0.075); }
42652
+ color: var(--color-text-ondark);
42653
+ background-color: var(--color-interactive-default); }
42635
42654
  .Editor3-styleButton.Editor3-activeButton [class*="icon-"], .Editor3-styleButton.Editor3-activeButton:hover [class*="icon-"] {
42636
42655
  opacity: 1; }
42637
42656