openguessr-ui 0.2.5 → 0.3.0

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.
package/base.css CHANGED
@@ -242,13 +242,6 @@ select {
242
242
  appearance: none;
243
243
  }
244
244
 
245
- /* Search */
246
- search {
247
- display: flex;
248
- justify-content: center;
249
- gap: var(--box-margin);
250
- }
251
-
252
245
  /* View transition animations */
253
246
  :root::view-transition-new(root),
254
247
  :root::view-transition-old(root) {
@@ -10,7 +10,9 @@
10
10
  if (errorPopupState.reload) window.location.reload();
11
11
  }}
12
12
  >
13
- <h1 class="popup-title">{errorPopupState.title}</h1>
13
+ <div class="popup-title">
14
+ <h1>{errorPopupState.title}</h1>
15
+ </div>
14
16
  <div>
15
17
  <p class="slight-bottom-margin">{errorPopupState.description}</p>
16
18
  {#if errorPopupState.errorCode}
@@ -36,6 +38,7 @@
36
38
  font-family: monospace;
37
39
  margin-top: var(--box-margin);
38
40
  box-shadow: var(--box-shadow);
41
+ user-select: text;
39
42
  }
40
43
 
41
44
  #error-popup-disable {
@@ -103,6 +103,7 @@
103
103
  position: fixed;
104
104
  left: var(--box-margin);
105
105
  right: var(--box-margin);
106
+ margin-top: env(safe-area-inset-top);
106
107
  display: flex;
107
108
  justify-content: center;
108
109
  pointer-events: none;
@@ -67,7 +67,7 @@
67
67
  class:frame-less={frameless}
68
68
  style:max-width={ultraSlim ? "450px" : verySlim ? "600px" : slim ? "750px" : "850px"}
69
69
  >
70
- <button class="close-popup-button standard-button bright" aria-label="close" onclick={close}
70
+ <button class="close-popup-button standard-button" aria-label="close" onclick={close}
71
71
  ><X strokeWidth={2.25} /></button
72
72
  >
73
73
  <div class="content of-top of-bottom" class:content-frameless={frameless}>
@@ -110,21 +110,27 @@
110
110
  position: relative;
111
111
  overflow-y: auto;
112
112
  overflow-x: hidden;
113
- max-height: min(900px, calc(100dvh - var(--layout-margin) * 2 - 50px));
113
+ max-height: min(
114
+ 900px,
115
+ calc(
116
+ 100dvh - var(--layout-margin) * 2 - var(--layout-spacer) - env(safe-area-inset-top) -
117
+ env(safe-area-inset-bottom)
118
+ )
119
+ );
114
120
  width: 100%;
115
121
  scrollbar-width: none;
116
122
  border-radius: var(--box-margin);
117
123
  }
118
124
 
119
125
  .content-frameless {
120
- max-height: calc(100dvh - var(--layout-margin) * 2 - var(--box-margin) - 10px);
126
+ max-height: calc(100dvh - var(--layout-spacer) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
121
127
  margin-bottom: -4px;
122
128
  border-radius: 0;
123
129
  }
124
130
 
125
131
  .ui-window {
126
132
  width: calc(100% - var(--layout-margin) * 2);
127
- padding: calc(var(--layout-margin) + 5px);
133
+ padding: calc(var(--layout-margin) + var(--content-margin));
128
134
  border-radius: calc(var(--layout-margin) + var(--box-margin));
129
135
  text-align: left;
130
136
  position: relative;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "openguessr-ui",
3
- "version": "0.2.5",
3
+ "version": "0.3.0",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite example"