button example

2025-09-14 18:51:27 -04:00
parent 9f0b0638e5
commit bac621bbaa
16 changed files with 1155 additions and 1460 deletions
--- a/themes/default/theme.css
+++ b/themes/default/theme.css
@@ -0,0 +1,117 @@
+/**
+ * NOSTR_LOGIN_LITE - Default Monospace Theme
+ * Black/white/red color scheme with monospace typography
+ * Simplified 14-variable system (6 core + 8 floating tab)
+ */
+
+:root {
+  /* Core Variables (6) */
+  --nl-primary-color: #000000;
+  --nl-secondary-color: #ffffff;
+  --nl-accent-color: #ff0000;
+  --nl-muted-color: #666666;
+  --nl-font-family: "Courier New", Courier, monospace;
+  --nl-border-radius: 15px;
+  --nl-border-width: 3px;
+  
+  /* Floating Tab Variables (8) */
+  --nl-tab-bg-logged-out: #ffffff;
+  --nl-tab-bg-logged-in: #ffffff;
+  --nl-tab-bg-opacity-logged-out: 0.9;
+  --nl-tab-bg-opacity-logged-in: 0.2;
+  --nl-tab-color-logged-out: #000000;
+  --nl-tab-color-logged-in: #ffffff;
+  --nl-tab-border-logged-out: #000000;
+  --nl-tab-border-logged-in: #ff0000;
+  --nl-tab-border-opacity-logged-out: 1.0;
+  --nl-tab-border-opacity-logged-in: 0.1;
+}
+
+/* Base component styles using simplified variables */
+.nl-component {
+  font-family: var(--nl-font-family);
+  color: var(--nl-primary-color);
+}
+
+.nl-button {
+  background: var(--nl-secondary-color);
+  color: var(--nl-primary-color);
+  border: var(--nl-border-width) solid var(--nl-primary-color);
+  border-radius: var(--nl-border-radius);
+  font-family: var(--nl-font-family);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.nl-button:hover {
+  border-color: var(--nl-accent-color);
+}
+
+.nl-button:active {
+  background: var(--nl-accent-color);
+  color: var(--nl-secondary-color);
+}
+
+.nl-input {
+  background: var(--nl-secondary-color);
+  color: var(--nl-primary-color);
+  border: var(--nl-border-width) solid var(--nl-primary-color);
+  border-radius: var(--nl-border-radius);
+  font-family: var(--nl-font-family);
+  box-sizing: border-box;
+}
+
+.nl-input:focus {
+  border-color: var(--nl-accent-color);
+  outline: none;
+}
+
+.nl-container {
+  background: var(--nl-secondary-color);
+  border: var(--nl-border-width) solid var(--nl-primary-color);
+  border-radius: var(--nl-border-radius);
+}
+
+.nl-title, .nl-heading {
+  font-family: var(--nl-font-family);
+  color: var(--nl-primary-color);
+  margin: 0;
+}
+
+.nl-text {
+  font-family: var(--nl-font-family);
+  color: var(--nl-primary-color);
+}
+
+.nl-text--muted {
+  color: var(--nl-muted-color);
+}
+
+.nl-icon {
+  font-family: var(--nl-font-family);
+  color: var(--nl-primary-color);
+}
+
+/* Floating tab styles */
+.nl-floating-tab {
+  font-family: var(--nl-font-family);
+  border-radius: var(--nl-border-radius);
+  border: var(--nl-border-width) solid;
+  transition: all 0.2s ease;
+}
+
+.nl-floating-tab--logged-out {
+  background: rgba(255, 255, 255, var(--nl-tab-bg-opacity-logged-out));
+  color: var(--nl-tab-color-logged-out);
+  border-color: rgba(0, 0, 0, var(--nl-tab-border-opacity-logged-out));
+}
+
+.nl-floating-tab--logged-in {
+  background: rgba(0, 0, 0, var(--nl-tab-bg-opacity-logged-in));
+  color: var(--nl-tab-color-logged-in);
+  border-color: rgba(255, 0, 0, var(--nl-tab-border-opacity-logged-in));
+}
+
+.nl-transition {
+  transition: all 0.2s ease;
+}