117 lines
2.9 KiB
CSS
117 lines
2.9 KiB
CSS
/**
|
|
* 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;
|
|
} |