openguessr-ui 0.2.6 → 0.3.1

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
@@ -89,7 +89,7 @@ span {
89
89
  color: white;
90
90
  }
91
91
 
92
- /* Input */
92
+ /* Input and textarea */
93
93
  input {
94
94
  font-family: inherit;
95
95
  color: white;
@@ -103,6 +103,11 @@ input {
103
103
  padding: 0;
104
104
  }
105
105
 
106
+ input,
107
+ textarea {
108
+ user-select: text;
109
+ }
110
+
106
111
  input::placeholder,
107
112
  textarea::placeholder {
108
113
  color: white;
@@ -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.6",
3
+ "version": "0.3.1",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite example"