@canopy-iiif/app 1.5.6 → 1.5.8

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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/ui/styles/components/header/_header.scss +8 -10
  3. package/ui/styles/components/modal/_modal.scss +16 -18
  4. package/ui/styles/index.css +17 -25
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canopy-iiif/app",
3
- "version": "1.5.6",
3
+ "version": "1.5.8",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "author": "Mat Jordan <mat@northwestern.edu>",
package/ui/styles/components/header/_header.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  align-items: center;
6
6
  gap: 1.618rem;
7
7
  padding: 1rem 1.618rem;
8
- background: trabsparent;
8
+ background: transparent;
9
9
  z-index: 1;
10
10
  }
11
11
 
@@ -24,9 +24,6 @@
24
24
  width: 2.5rem;
25
25
  height: 2.5rem;
26
26
  border-radius: 0.75rem;
27
- border: 1px solid var(--color-gray-200);
28
- background: rgba(255, 255, 255, 0.8);
29
- color: var(--color-gray-800);
30
27
  transition:
31
28
  background 150ms ease,
32
29
  color 150ms ease,
@@ -35,7 +32,6 @@
35
32
 
36
33
  .canopy-header__menu:hover,
37
34
  .canopy-header__menu:focus-visible {
38
- background: rgba(255, 255, 255, 0.95);
39
35
  color: var(--color-gray-900);
40
36
  outline: none;
41
37
  }
@@ -81,19 +77,21 @@
81
77
  width: 2.5rem;
82
78
  height: 2.5rem;
83
79
  border-radius: 0.75rem;
84
- border: 1px solid var(--color-gray-200);
85
- background: rgba(255, 255, 255, 0.8);
86
- color: var(--color-gray-800);
80
+ color: var(--color-accent-900);
81
+ cursor: pointer;
87
82
  transition:
88
83
  background 150ms ease,
89
84
  color 150ms ease,
90
85
  border-color 150ms ease;
86
+
87
+ svg path {
88
+ stroke-width: 2.618px;
89
+ }
91
90
  }
92
91
 
93
92
  .canopy-header__icon-button:hover,
94
93
  .canopy-header__icon-button:focus-visible {
95
- background: rgba(255, 255, 255, 1);
96
- color: var(--color-gray-900);
94
+ color: var(--color-accent-700);
97
95
  outline: none;
98
96
  }
99
97
 
package/ui/styles/components/modal/_modal.scss CHANGED
@@ -6,14 +6,13 @@
6
6
  display: none;
7
7
  align-items: center;
8
8
  justify-content: center;
9
- background: rgba(15, 23, 42, 0.6);
10
- backdrop-filter: blur(8px);
9
+ background: #0006;
11
10
  box-sizing: border-box;
12
11
  padding: clamp(1.25rem, 4vw, 2.5rem);
13
12
  overflow: hidden;
14
13
  }
15
14
 
16
- .canopy-modal[data-open='true'] {
15
+ .canopy-modal[data-open="true"] {
17
16
  display: flex;
18
17
  }
19
18
 
@@ -21,12 +20,12 @@
21
20
  position: relative;
22
21
  display: flex;
23
22
  flex-direction: column;
24
- width: min(100%, 38rem);
25
- max-width: 38rem;
23
+ width: 400px;
24
+ max-width: 400px;
26
25
  max-height: min(90vh, 640px);
27
26
  background: var(--color-gray-50);
28
27
  border-radius: 1rem;
29
- box-shadow: 0 28px 60px -24px rgba(15, 23, 42, 0.65);
28
+ box-shadow: 12px 24px 48px rgba(0, 0, 0, 0.5);
30
29
  overflow: hidden;
31
30
  margin: 0;
32
31
  }
@@ -37,7 +36,7 @@
37
36
  }
38
37
 
39
38
  .canopy-modal__body--padded {
40
- padding: 1.5rem;
39
+ padding: 1.618rem;
41
40
  }
42
41
 
43
42
  .canopy-modal__brand {
@@ -69,17 +68,21 @@
69
68
  width: 2.5rem;
70
69
  height: 2.5rem;
71
70
  border-radius: 9999px;
72
- border: 1px solid var(--color-gray-200);
73
- background: rgba(255, 255, 255, 0.92);
74
- color: var(--color-gray-700);
71
+ color: var(--color-accent-900);
75
72
  cursor: pointer;
76
- transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
73
+ transition:
74
+ background-color 150ms ease,
75
+ color 150ms ease,
76
+ border-color 150ms ease;
77
+
78
+ svg path {
79
+ stroke-width: 2.618px;
80
+ }
77
81
  }
78
82
 
79
83
  .canopy-modal__close:hover,
80
84
  .canopy-modal__close:focus-visible {
81
- background: rgba(248, 250, 252, 1);
82
- color: var(--color-gray-900);
85
+ color: var(--color-accent-700);
83
86
  outline: none;
84
87
  }
85
88
 
@@ -92,7 +95,6 @@
92
95
  .canopy-modal {
93
96
  align-items: stretch;
94
97
  justify-content: stretch;
95
- backdrop-filter: blur(2px);
96
98
  padding: 0;
97
99
  }
98
100
 
@@ -111,10 +113,6 @@
111
113
  border-radius: 0.75rem;
112
114
  }
113
115
 
114
- .canopy-modal__body--padded {
115
- padding: 1rem;
116
- }
117
-
118
116
  .canopy-modal__brand {
119
117
  margin-bottom: 1rem;
120
118
  }
package/ui/styles/index.css CHANGED
@@ -573,7 +573,7 @@ section[data-footnotes] ul li,
573
573
  align-items: center;
574
574
  gap: 1.618rem;
575
575
  padding: 1rem 1.618rem;
576
- background: trabsparent;
576
+ background: transparent;
577
577
  z-index: 1;
578
578
  }
579
579
  .canopy-header__brand {
@@ -590,14 +590,10 @@ section[data-footnotes] ul li,
590
590
  width: 2.5rem;
591
591
  height: 2.5rem;
592
592
  border-radius: 0.75rem;
593
- border: 1px solid var(--color-gray-200);
594
- background: rgba(255, 255, 255, 0.8);
595
- color: var(--color-gray-800);
596
593
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
597
594
  }
598
595
  .canopy-header__menu:hover,
599
596
  .canopy-header__menu:focus-visible {
600
- background: rgba(255, 255, 255, 0.95);
601
597
  color: var(--color-gray-900);
602
598
  outline: none;
603
599
  }
@@ -636,15 +632,16 @@ section[data-footnotes] ul li,
636
632
  width: 2.5rem;
637
633
  height: 2.5rem;
638
634
  border-radius: 0.75rem;
639
- border: 1px solid var(--color-gray-200);
640
- background: rgba(255, 255, 255, 0.8);
641
- color: var(--color-gray-800);
635
+ color: var(--color-accent-900);
636
+ cursor: pointer;
642
637
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
643
638
  }
639
+ .canopy-header__icon-button svg path {
640
+ stroke-width: 2.618px;
641
+ }
644
642
  .canopy-header__icon-button:hover,
645
643
  .canopy-header__icon-button:focus-visible {
646
- background: rgb(255, 255, 255);
647
- color: var(--color-gray-900);
644
+ color: var(--color-accent-700);
648
645
  outline: none;
649
646
  }
650
647
  .canopy-header__search-icon {
@@ -863,8 +860,7 @@ section[data-footnotes] ul li,
863
860
  display: none;
864
861
  align-items: center;
865
862
  justify-content: center;
866
- background: rgba(15, 23, 42, 0.6);
867
- backdrop-filter: blur(8px);
863
+ background: rgba(0, 0, 0, 0.4);
868
864
  box-sizing: border-box;
869
865
  padding: clamp(1.25rem, 4vw, 2.5rem);
870
866
  overflow: hidden;
@@ -876,12 +872,12 @@ section[data-footnotes] ul li,
876
872
  position: relative;
877
873
  display: flex;
878
874
  flex-direction: column;
879
- width: min(100%, 38rem);
880
- max-width: 38rem;
875
+ width: 400px;
876
+ max-width: 400px;
881
877
  max-height: min(90vh, 640px);
882
878
  background: var(--color-gray-50);
883
879
  border-radius: 1rem;
884
- box-shadow: 0 28px 60px -24px rgba(15, 23, 42, 0.65);
880
+ box-shadow: 12px 24px 48px rgba(0, 0, 0, 0.5);
885
881
  overflow: hidden;
886
882
  margin: 0;
887
883
  }
@@ -890,7 +886,7 @@ section[data-footnotes] ul li,
890
886
  overflow-y: auto;
891
887
  }
892
888
  .canopy-modal__body--padded {
893
- padding: 1.5rem;
889
+ padding: 1.618rem;
894
890
  }
895
891
  .canopy-modal__brand {
896
892
  display: flex;
@@ -918,16 +914,16 @@ section[data-footnotes] ul li,
918
914
  width: 2.5rem;
919
915
  height: 2.5rem;
920
916
  border-radius: 9999px;
921
- border: 1px solid var(--color-gray-200);
922
- background: rgba(255, 255, 255, 0.92);
923
- color: var(--color-gray-700);
917
+ color: var(--color-accent-900);
924
918
  cursor: pointer;
925
919
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
926
920
  }
921
+ .canopy-modal__close svg path {
922
+ stroke-width: 2.618px;
923
+ }
927
924
  .canopy-modal__close:hover,
928
925
  .canopy-modal__close:focus-visible {
929
- background: rgb(248, 250, 252);
930
- color: var(--color-gray-900);
926
+ color: var(--color-accent-700);
931
927
  outline: none;
932
928
  }
933
929
  .canopy-modal__close-icon {
@@ -938,7 +934,6 @@ section[data-footnotes] ul li,
938
934
  .canopy-modal {
939
935
  align-items: stretch;
940
936
  justify-content: stretch;
941
- backdrop-filter: blur(2px);
942
937
  padding: 0;
943
938
  }
944
939
  .canopy-modal__panel {
@@ -954,9 +949,6 @@ section[data-footnotes] ul li,
954
949
  right: 1rem;
955
950
  border-radius: 0.75rem;
956
951
  }
957
- .canopy-modal__body--padded {
958
- padding: 1rem;
959
- }
960
952
  .canopy-modal__brand {
961
953
  margin-bottom: 1rem;
962
954
  }