Interface improvements

package.json

@@ -1,6 +1,6 @@
 {
  "name": "txtdot",
- "version": "1.5.1",
+ "version": "1.5.2",
  "private": true,
  "description": "",
  "main": "dist/app.js",

src/publicConfig.ts

@@ -1,5 +1,5 @@
 export default {
- version: '1.5.1',
+ version: '1.5.2',
  description:
  'txtdot is an HTTP proxy that parses only text, links and pictures from pages reducing internet bandwidth usage, removing ads and heavy scripts',
 };

static/common.css

@@ -3,28 +3,30 @@
 }
 
 :root {
- --bg: #fff;
- --fg: #111;
+ --bg: #fdfbff;
+ --fg: #1a1c1e;
 
- --bg2: #bbb;
+ --bg2: #74777f;
  --fg2: #333;
 
- --accent: #0070cc; /* hsl(207, 100%, 40%) */
- --accent-hl: #003866; /* hsl(207, 100%, 20%) */
+ --accent: #255fa4;
+ --accent-hl: #003060;
 
- --error: #ff9400;
+ --error: #ffb4ab;
 }
 
 @media (prefers-color-scheme: dark) {
  :root {
- --bg: #222;
- --fg: #eee;
+ --bg: #1a1c1e;
+ --fg: #e3e2e6;
 
- --bg2: #444;
+ --bg2: #8e9199;
  --fg2: #bbb;
 
- --accent: #33a3ff; /* hsl(207, 100%, 60%) */
- --accent-hl: #99d1ff; /* hsl(207, 100%, 80%) */
+ --accent: #a6c8ff;
+ /* hsl(207, 100%, 60%) */
+ --accent-hl: #003060;
+ /* hsl(207, 100%, 80%) */
  }
 }
 
@@ -48,28 +50,39 @@ main {
 .menu {
  display: flex;
  flex-direction: row;
- column-gap: 0.25rem;
+ flex-wrap: wrap;
+ gap: 0.375rem;
+ align-items: flex-start;
 }
 
 .button {
- padding: 0.25rem 0.75rem;
+ padding: 0.25rem 1rem;
 
- border: 0.125rem solid var(--accent);
- border-radius: 0.25rem;
+ border: none;
+ border-radius: 1rem;
+
+ background: var(--accent);
+ color: var(--bg);
 
- background: var(--bg);
- color: var(--fg);
  text-decoration: none;
  font-size: 1rem;
 
  cursor: pointer;
+
+ transition: box-shadow 0.25s ease-out;
 }
+
 .button.secondary {
- border-color: var(--bg2);
+ background: var(--bg);
+ color: var(--fg);
+
+ border: 1px solid var(--bg2);
 }
+
 .button:hover {
- background: var(--bg2);
- color: var(--fg);
+ box-shadow:
+ 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.2),
+ 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.14);
 }
 
 a {

static/form-inputs.css

@@ -0,0 +1,20 @@
+input[type='text'],
+select {
+ outline: 0;
+ border: 0;
+ border-bottom: 1px var(--bg2) solid;
+ padding: 0.25rem 0.25rem;
+
+ background: var(--bg);
+ color: var(--fg);
+ font-size: 1rem;
+
+ width: 100%;
+
+ transition: border-bottom 0.25s ease-out;
+}
+
+input[type='text']:focus,
+select:focus {
+ border-bottom-color: var(--accent);
+}

static/form.css

@@ -7,6 +7,7 @@
  gap: 0.5rem 0.25rem;
 
  width: fit-content;
+ margin-top: 0.5rem;
 }
 
 .input-row {
@@ -23,41 +24,70 @@
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
+
+ font-size: 1rem;
 }
 
 label {
  font-size: 0.9rem;
 }
 
-#url,
-#search {
- width: 100%;
- height: 100%; /* shrink to #submit height */
+#switch-search {
+ display: none;
+}
 
- outline: none;
- border: 0;
- border-bottom: 0.125rem solid var(--fg2);
+#switch-search:checked ~ .switch-label > .switch-btn {
+ background: var(--accent);
+ justify-content: end;
+}
 
- background: var(--bg);
- color: var(--fg);
- font-size: 1rem;
+#switch-search:not(:checked) ~ .main-form-search {
+ display: none;
 }
-#url::placeholder {
- color: var(--fg2);
- opacity: 1;
+
+#switch-search:not(:checked) ~ .main-form-url {
+ display: grid;
 }
 
-#submit {
- font-size: 1rem;
+#switch-search:checked ~ .main-form-search {
+ display: grid;
 }
 
-select {
- border: 0;
- border-bottom: 0.125rem solid var(--accent);
+#switch-search:checked ~ .main-form-url {
+ display: none;
+}
 
- background: var(--bg);
- color: var(--fg);
+.switch-label {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 0.5rem;
+ cursor: pointer;
+}
 
- font-weight: 500;
- font-size: 0.9rem;
+.switch-btn {
+ width: 2.875rem;
+ height: 1.75rem;
+
+ border-radius: 1rem;
+
+ background: var(--bg2);
+
+ padding: 0.3rem;
+ display: flex;
+ flex-direction: row;
+ justify-content: start;
+ align-items: center;
+}
+
+.switch-btn::before {
+ content: '';
+
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
+
+ border-radius: 1rem;
+
+ background: var(--bg);
 }

static/get.css

@@ -1,7 +1,3 @@
-.menu .button {
- font-size: 0.9rem;
-}
-
 .title {
  border-bottom: 0.125rem solid var(--bg2);
  padding-bottom: 0.125rem;
@@ -11,6 +7,7 @@
 a {
  color: var(--accent);
 }
+
 a:hover {
  color: var(--accent-hl);
 }

static/search.css

@@ -1,25 +1,12 @@
-.right {
+.form-search {
  display: flex;
+ flex-direction: row;
+ gap: 0.25rem 0.375rem;
  margin-left: auto;
 }
 
-#search {
- width: 100%;
- height: 100%; /* shrink to #submit height */
-
- outline: none;
- border: 0;
- border-bottom: 0.125rem solid var(--fg2);
-
- background: var(--bg);
- color: var(--fg);
- font-size: 1rem;
-
- margin-right: 0.5rem;
- margin-left: 0.5rem;
-}
-
-#search::placeholder {
- color: var(--fg2);
- opacity: 1;
+@media (max-width: 504px) {
+ .form-search {
+ margin: 0.25rem;
+ }
 }