|
1 | | -import { css } from '@emotion/react'; |
| 1 | +import { css } from '@emotion/css'; |
2 | 2 | import { GrafanaTheme2 } from '@grafana/data'; |
3 | 3 |
|
4 | 4 | import 'ol/ol.css'; |
@@ -49,130 +49,156 @@ export function getGlobalStyles(theme: GrafanaTheme2) { |
49 | 49 | // border: 2px dotted rgba(0,60,136,0.7); |
50 | 50 | // } |
51 | 51 |
|
52 | | - return css({ |
53 | | - '.ol-scale-line': { |
54 | | - background: theme.colors.border.weak, // rgba(0,60,136,0.3); |
55 | | - }, |
56 | | - '.ol-scale-line-inner': { |
57 | | - border: `1px solid ${theme.colors.text.primary}`, // #eee; |
58 | | - borderTop: 0, // 0px; |
59 | | - color: theme.colors.text.primary, // #eee; |
60 | | - }, |
61 | | - '.ol-control': { |
62 | | - backgroundColor: theme.colors.background.primary, // rgba(255,255,255,0.4); |
63 | | - }, |
64 | | - '.ol-control:hover': { |
65 | | - backgroundColor: theme.colors.background.secondary, // rgba(255,255,255,0.6); |
66 | | - }, |
67 | | - '.ol-control button': { |
68 | | - color: theme.colors.secondary.text, // white; |
69 | | - backgroundColor: theme.colors.secondary.main, // rgba(0,60,136,0.5); |
70 | | - }, |
71 | | - '.ol-control button:hover': { |
72 | | - color: theme.colors.secondary.text, |
73 | | - backgroundColor: theme.colors.secondary.shade, // rgba(0,60,136,0.5); |
74 | | - }, |
75 | | - '.ol-control button:focus': { |
76 | | - color: theme.colors.secondary.text, |
77 | | - backgroundColor: theme.colors.secondary.main, // rgba(0,60,136,0.5); |
78 | | - }, |
79 | | - '.ol-attribution ul': { |
80 | | - color: theme.colors.text.primary, // #000; |
81 | | - textShadow: 'none', |
82 | | - }, |
83 | | - '.ol-attribution:not(.ol-collapsed)': { |
84 | | - backgroundColor: theme.colors.background.secondary, // rgba(255,255,255,0.8); |
85 | | - }, |
86 | | - '.ol-control.layer-switcher': { |
87 | | - top: "0.5em", |
88 | | - right: "0.5em", |
89 | | - // textAlign: "right" |
90 | | - textAlign: "left" |
91 | | - }, |
92 | | - '.ol-control.layer-switcher.shown.layer-switcher-activation-mode-click': { |
93 | | - paddingRight: "0.5em" |
94 | | - }, |
95 | | - '.ol-control.layer-switcher.shown.layer-switcher-activation-mode-click > button': { |
96 | | - right: 0, |
97 | | - borderLeft: 0, |
98 | | - }, |
99 | | - '.ol-control.layer-switcher.shown.layer-switcher-activation-mode-click > .panel': { |
100 | | - display: 'block', |
101 | | - }, |
102 | | - '.ol-control.layer-switcher.layer-switcher-activation-mode-click > .panel': { |
103 | | - display: 'none', |
104 | | - }, |
105 | | - '.ol-control.layer-switcher button': { |
106 | | - right: 0, |
107 | | - borderLeft: 0, |
108 | | - /* content: url('./img/icons/layers.svg'); */ |
109 | | - /* background-image: url('./img/icons/layers.svg'); |
110 | | - background-repeat: no-repeat; */ |
111 | | - /* https://icons.getbootstrap.com/#usage */ |
112 | | - }, |
113 | | - '.ol-control.layer-switcher li.layer': { |
114 | | - listStyle: 'none', |
115 | | - }, |
116 | | - '.layer-switcher li label': { |
117 | | - paddingLeft: "0.5em", |
118 | | - /* padding-right: 1.2em; */ |
119 | | - display: "inline-block", |
120 | | - marginTop: "1px", |
121 | | - }, |
122 | | - '.data-layer-add': { |
123 | | - display: 'flex', |
124 | | - justifyContent: 'flex-end', |
125 | | - marginBottom: 10, |
126 | | - }, |
127 | | - '.data-layer-remove': { |
128 | | - display: 'flex', |
129 | | - justifyContent: 'flex-end', |
130 | | - marginBottom: 10, |
131 | | - marginTop: 10, |
132 | | - }, |
133 | | - '.ol-custom-overviewmap': { |
134 | | - /* left: 0.5em; */ |
135 | | - /* bottom: 0.5em; */ |
136 | | - right: "0.5em", |
137 | | - bottom: "20%", |
138 | | - padding: "1px" |
139 | | - }, |
140 | | - '.ol-custom-overviewmap.ol-uncollapsible': { |
141 | | - bottom: 0, |
142 | | - left: 0, |
143 | | - borderRadius: "0 2px 0 0" |
144 | | - }, |
145 | | - '.ol-custom-overviewmap .ol-overviewmap-map, .ol-custom-overviewmap button': { |
146 | | - display: "block", |
147 | | - borderRadius: "4px" |
148 | | - }, |
149 | | - '.ol-custom-overviewmap .ol-overviewmap-map': { |
150 | | - border: "1px solid #7b98bc", |
151 | | - height: "150px", |
152 | | - margin: "1px", |
153 | | - width: "150px" |
154 | | - }, |
155 | | - '.ol-custom-overviewmap:not(.ol-collapsed) button': { |
156 | | - bottom: "6px", |
157 | | - left: "6px", |
158 | | - position: "absolute", |
159 | | - background: theme.colors.background.secondary |
160 | | - }, |
161 | | - '.ol-custom-overviewmap:not(.ol-collapsed) button:hover div': { |
162 | | - color: theme.colors.secondary.text, |
163 | | - backgroundColor: theme.colors.secondary.shade, // rgba(0,60,136,0.5); |
164 | | - }, |
165 | | - '.ol-custom-overviewmap.ol-collapsed .ol-overviewmap-map, .ol-custom-overviewmap.ol-uncollapsible button': { |
166 | | - display: "none" |
167 | | - }, |
168 | | - '.ol-custom-overviewmap:not(.ol-collapsed)': { |
169 | | - background: theme.colors.background.secondary |
170 | | - }, |
171 | | - '.ol-custom-overviewmap .ol-overviewmap-box': { |
172 | | - border: "2px solid red" |
173 | | - }, |
174 | | - '.ol-custom-overviewmap .ol-overviewmap-box:hover': { |
175 | | - cursor: "move" |
176 | | - } |
177 | | - }); |
| 52 | + return css` |
| 53 | + .ol-scale-line { |
| 54 | + background: ${theme.colors.border.weak}; /* rgba(0,60,136,0.3); */ |
| 55 | + } |
| 56 | +
|
| 57 | + .ol-scale-line-inner { |
| 58 | + border: 1px solid ${theme.colors.text.primary}; /* #eee; */ |
| 59 | + border-top: 0; |
| 60 | + color: ${theme.colors.text.primary}; /* #eee; */ |
| 61 | + } |
| 62 | +
|
| 63 | + .ol-control { |
| 64 | + background-color: ${theme.colors.background.primary}; /* rgba(255,255,255,0.4); */ |
| 65 | + } |
| 66 | +
|
| 67 | + .ol-control:hover { |
| 68 | + background-color: ${theme.colors.background.secondary}; /* rgba(255,255,255,0.6); */ |
| 69 | + } |
| 70 | +
|
| 71 | + .ol-control button { |
| 72 | + color: ${theme.colors.secondary.text}; /* white; */ |
| 73 | + background-color: ${theme.colors.secondary.main}; /* rgba(0,60,136,0.5); */ |
| 74 | + } |
| 75 | +
|
| 76 | + .ol-control button:hover { |
| 77 | + color: ${theme.colors.secondary.text}; |
| 78 | + background-color: ${theme.colors.secondary.shade}; /* rgba(0,60,136,0.5); */ |
| 79 | + } |
| 80 | +
|
| 81 | + .ol-control button:focus { |
| 82 | + color: ${theme.colors.secondary.text}; |
| 83 | + background-color: ${theme.colors.secondary.main}; /* rgba(0,60,136,0.5); */ |
| 84 | + } |
| 85 | +
|
| 86 | + .ol-attribution ul { |
| 87 | + color: ${theme.colors.text.primary}; /* #000; */ |
| 88 | + text-shadow: none; |
| 89 | + } |
| 90 | +
|
| 91 | + .ol-attribution:not(.ol-collapsed) { |
| 92 | + background-color: ${theme.colors.background.secondary}; /* rgba(255,255,255,0.8); */ |
| 93 | + } |
| 94 | +
|
| 95 | + .ol-control.layer-switcher { |
| 96 | + top: 0.5em; |
| 97 | + right: 0.5em; |
| 98 | + text-align: left; |
| 99 | + } |
| 100 | +
|
| 101 | + .ol-control.layer-switcher.shown.layer-switcher-activation-mode-click { |
| 102 | + padding-right: 0.5em; |
| 103 | + } |
| 104 | +
|
| 105 | + .ol-control.layer-switcher.shown.layer-switcher-activation-mode-click > button { |
| 106 | + right: 0; |
| 107 | + border-left: 0; |
| 108 | + } |
| 109 | +
|
| 110 | + .ol-control.layer-switcher.shown.layer-switcher-activation-mode-click > .panel { |
| 111 | + display: block; |
| 112 | + } |
| 113 | +
|
| 114 | + .ol-control.layer-switcher.layer-switcher-activation-mode-click > .panel { |
| 115 | + display: none; |
| 116 | + } |
| 117 | +
|
| 118 | + .ol-control.layer-switcher button { |
| 119 | + right: 0; |
| 120 | + border-left: 0; |
| 121 | + /* content: url('./img/icons/layers.svg'); */ |
| 122 | + /* background-image: url('./img/icons/layers.svg'); |
| 123 | + background-repeat: no-repeat; */ |
| 124 | + /* https://icons.getbootstrap.com/#usage */ |
| 125 | + } |
| 126 | +
|
| 127 | + .ol-control.layer-switcher li.layer { |
| 128 | + list-style: none; |
| 129 | + } |
| 130 | +
|
| 131 | + .layer-switcher li label { |
| 132 | + padding-left: 0.5em; |
| 133 | + display: inline-block; |
| 134 | + margin-top: 1px; |
| 135 | + } |
| 136 | +
|
| 137 | + .data-layer-add { |
| 138 | + display: flex; |
| 139 | + justify-content: flex-end; |
| 140 | + margin-bottom: 10px; |
| 141 | + } |
| 142 | +
|
| 143 | + .data-layer-remove { |
| 144 | + display: flex; |
| 145 | + justify-content: flex-end; |
| 146 | + margin-bottom: 10px; |
| 147 | + margin-top: 10px; |
| 148 | + } |
| 149 | +
|
| 150 | + .ol-custom-overviewmap { |
| 151 | + right: 0.5em; |
| 152 | + bottom: 20%; |
| 153 | + padding: 1px; |
| 154 | + } |
| 155 | +
|
| 156 | + .ol-custom-overviewmap.ol-uncollapsible { |
| 157 | + bottom: 0; |
| 158 | + left: 0; |
| 159 | + border-radius: 0 2px 0 0; |
| 160 | + } |
| 161 | +
|
| 162 | + .ol-custom-overviewmap .ol-overviewmap-map, |
| 163 | + .ol-custom-overviewmap button { |
| 164 | + display: block; |
| 165 | + border-radius: 4px; |
| 166 | + } |
| 167 | +
|
| 168 | + .ol-custom-overviewmap .ol-overviewmap-map { |
| 169 | + border: 1px solid #7b98bc; |
| 170 | + height: 150px; |
| 171 | + margin: 1px; |
| 172 | + width: 150px; |
| 173 | + } |
| 174 | +
|
| 175 | + .ol-custom-overviewmap:not(.ol-collapsed) button { |
| 176 | + bottom: 6px; |
| 177 | + left: 6px; |
| 178 | + position: absolute; |
| 179 | + background: ${theme.colors.background.secondary}; |
| 180 | + } |
| 181 | +
|
| 182 | + .ol-custom-overviewmap:not(.ol-collapsed) button:hover div { |
| 183 | + color: ${theme.colors.secondary.text}; |
| 184 | + background-color: ${theme.colors.secondary.shade}; /* rgba(0,60,136,0.5); */ |
| 185 | + } |
| 186 | +
|
| 187 | + .ol-custom-overviewmap.ol-collapsed .ol-overviewmap-map, |
| 188 | + .ol-custom-overviewmap.ol-uncollapsible button { |
| 189 | + display: none; |
| 190 | + } |
| 191 | +
|
| 192 | + .ol-custom-overviewmap:not(.ol-collapsed) { |
| 193 | + background: ${theme.colors.background.secondary}; |
| 194 | + } |
| 195 | +
|
| 196 | + .ol-custom-overviewmap .ol-overviewmap-box { |
| 197 | + border: 2px solid red; |
| 198 | + } |
| 199 | +
|
| 200 | + .ol-custom-overviewmap .ol-overviewmap-box:hover { |
| 201 | + cursor: move; |
| 202 | + } |
| 203 | + ` |
178 | 204 | } |
0 commit comments