Release RedGifs Video Downloader 0.6.21

options.css

@@ -0,0 +1,195 @@
+:root {
+  color-scheme: dark;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #0b0f16;
+  color: #f4f7fb;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  margin: 0;
+  background:
+    radial-gradient(circle at 92% 0, rgba(240, 68, 104, 0.18), transparent 34%),
+    linear-gradient(150deg, #111722, #080b10 70%);
+}
+
+button,
+input {
+  font: inherit;
+}
+
+.settings-shell {
+  width: min(680px, calc(100% - 32px));
+  margin: 0 auto;
+  padding: 52px 0;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 24px;
+}
+
+.settings-mark {
+  display: grid;
+  width: 52px;
+  height: 52px;
+  place-items: center;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #ff5277, #cf2851);
+  box-shadow: 0 14px 38px rgba(240, 68, 104, 0.25);
+  font-weight: 900;
+}
+
+h1,
+p {
+  margin: 0;
+}
+
+h1 {
+  font-size: 22px;
+}
+
+header p {
+  margin-top: 4px;
+  color: #8995a9;
+  font-size: 13px;
+}
+
+.settings-card {
+  padding: 25px;
+  border: 1px solid #263143;
+  border-radius: 18px;
+  background: rgba(15, 21, 31, 0.92);
+  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
+}
+
+.settings-card > label:first-child {
+  display: block;
+  margin-bottom: 8px;
+  color: #d9e0ea;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+input[type="text"] {
+  width: 100%;
+  padding: 12px 13px;
+  border: 1px solid #344157;
+  border-radius: 11px;
+  outline: none;
+  background: #0c1119;
+  color: #f4f7fb;
+}
+
+input[type="text"]:focus {
+  border-color: #f04468;
+  box-shadow: 0 0 0 3px rgba(240, 68, 104, 0.13);
+}
+
+.help {
+  margin: 9px 0 23px;
+  color: #7f8a9e;
+  font-size: 11px;
+  line-height: 1.55;
+}
+
+code {
+  color: #d9e0ea;
+}
+
+.check-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 11px;
+  padding: 13px 0;
+  border-top: 1px solid #232d3d;
+  cursor: pointer;
+}
+
+.check-row input {
+  width: 17px;
+  height: 17px;
+  margin-top: 2px;
+  accent-color: #f04468;
+}
+
+.check-row strong,
+.check-row small {
+  display: block;
+}
+
+.check-row strong {
+  font-size: 13px;
+}
+
+.check-row small {
+  margin-top: 4px;
+  color: #7f8a9e;
+  font-size: 11px;
+}
+
+.preview {
+  margin-top: 18px;
+  padding: 13px;
+  border: 1px solid #2b374a;
+  border-radius: 11px;
+  background: #0c1119;
+}
+
+.preview span,
+.preview strong {
+  display: block;
+}
+
+.preview span {
+  margin-bottom: 5px;
+  color: #748096;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.preview strong {
+  overflow-wrap: anywhere;
+  color: #cdd5e2;
+  font-size: 12px;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 9px;
+  margin-top: 22px;
+}
+
+button {
+  padding: 10px 15px;
+  border: 0;
+  border-radius: 10px;
+  cursor: pointer;
+  font-weight: 800;
+}
+
+.primary {
+  background: #f04468;
+  color: #fff;
+}
+
+.secondary {
+  background: #202a39;
+  color: #cbd3df;
+}
+
+.status {
+  min-height: 18px;
+  margin-top: 12px;
+  color: #69dda9;
+  font-size: 11px;
+  text-align: right;
+}