add stylesheets for navbar component

src/components/design-system/textarea.module.css

@@ -0,0 +1,20 @@
+.textarea {
+ background: #ffffff;
+ border: 2px solid var(--fg-muted);
+ padding: 8px 12px;
+ display: block;
+ font-size: 0.9rem;
+ font-family: inherit;
+ outline: none;
+ width: 100%;
+ line-height: 1.2;
+}
+
+.textarea:focus {
+ border-color: var(--bg-btn-inactive);
+}
+
+.textarea::placeholder {
+ color: var(--fg-muted);
+ user-select: none;
+}

src/components/navbar.module.css

@@ -154,6 +154,10 @@
  width: 24px;
 }
 
+.stuckBtn {
+ background-color: rgb(255, 66, 66);
+}
+
 /* Transparency! */
 .transparent {
  background: transparent;
@@ -172,6 +176,39 @@
  color: var(--fg-muted);
 }
 
+/* Nav popup */
+.stuckPopup {
+ background: var(--accent-dark);
+ color: #ffffff;
+ z-index: 9;
+ position: absolute;
+ top: 48px;
+ right: 25vw;
+ padding: 8px;
+ box-shadow: 0 4px 8px 0 #0000005e;
+ min-width: 160px;
+}
+
+.stuckPopup form {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+}
+
+.stuckPopup .divider {
+ height: 2px;
+ background: var(--accent);
+ margin: 8px 0;
+}
+
+.stuckPopup ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+}
+
 /* Nav popup */
 .navPopup {
  background: var(--accent-dark);

src/global.css

@@ -121,3 +121,20 @@ a:hover {
 .grecaptcha-badge {
  visibility: hidden;
 }
+
+select {
+ line-height: 1.2;
+ background: var(--bg-btn-inactive);
+ background: white;
+ color: var(--bg-btn-inactive);
+ border: 2px solid var(--bg-btn-inactive);
+ padding: 8px 12px;
+ padding-right: 20px;
+ appearance: none;
+ display: block;
+ font-size: 0.9rem;
+ font-family: inherit;
+ outline: none;
+ width: 100%;
+ user-select: none;
+}