@ibgib/space-gib 0.0.32 → 0.0.34

package/src/client/css/components.css

@@ -0,0 +1,218 @@
+/* ── Common Component Tab Styling ── */
+.tabs-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.tabs-list {
+    display: flex;
+    gap: 0.25rem;
+    overflow-x: auto;
+    flex-grow: 1;
+    padding-bottom: 5px; /* Leave space for the thin scrollbar */
+    margin-bottom: -5px; /* Offset the padding in layout */
+
+    /* Custom scrollbar properties for Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: var(--clr-accent-dim) transparent;
+}
+
+/* Chrome, Safari, Edge, Opera */
+.tabs-list::-webkit-scrollbar {
+    height: 5px; /* Thin horizontal scrollbar */
+}
+
+.tabs-list::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.tabs-list::-webkit-scrollbar-thumb {
+    background: var(--clr-accent-dim);
+    border-radius: var(--radius-sm);
+    border: 1px solid transparent; /* Avoid thumb touching edges */
+    background-clip: padding-box;
+}
+
+.tabs-list::-webkit-scrollbar-thumb:hover {
+    background: var(--clr-accent);
+}
+
+/* Tab button styling (.tab-btn is TS default, .panel-tab-button for backwards compatibility) */
+.tab-btn,
+.panel-tab-button {
+    padding: var(--tab-padding);
+    background: var(--tab-background-color);
+    border-radius: var(--tab-border-radius);
+    border: var(--tab-border-width) solid var(--tab-border-color);
+    border-bottom: none;
+    color: var(--tab-text-color);
+    font-family: var(--font-sans);
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
+    outline: none;
+}
+
+.tab-btn:hover,
+.panel-tab-button:hover {
+    background: var(--tab-background-color-hover);
+    color: var(--clr-text-primary);
+    border-color: var(--clr-border-hover);
+}
+
+.tab-btn.active,
+.panel-tab-button.active {
+    background: var(--tab-background-color-active);
+    color: var(--tab-text-color-active);
+    border-color: var(--tab-border-color-active);
+    border-bottom: var(--tab-border-width) solid transparent;
+    font-weight: 600;
+    box-shadow: inset 0 2px 0 0 var(--clr-accent);
+}
+
+.tab-btn.global-active::after {
+    content: " •";
+    color: var(--clr-accent);
+    font-size: 1.2rem;
+    line-height: 0;
+    vertical-align: middle;
+}
+
+.action-btn.active-primary:disabled {
+    opacity: 0.85;
+    background: rgba(120, 248, 126, 0.15) !important;
+    color: var(--clr-accent) !important;
+    border: 1px solid var(--clr-accent) !important;
+}
+
+/* ── Common Component Layout & Controls ── */
+
+.component-container {
+    padding: 2rem;
+    background: var(--clr-bg-glass);
+    backdrop-filter: blur(16px);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--clr-border);
+    box-shadow: var(--shadow-card);
+    color: var(--clr-text-primary);
+}
+
+.action-row {
+    display: flex;
+    gap: 1rem;
+    margin-top: 0.5rem;
+}
+
+.action-btn {
+    padding: var(--button-padding-base, 0.75rem 1.5rem);
+    background: var(--button-background-color-base, var(--clr-accent));
+    color: var(--button-text-color-base, var(--clr-bg-deep));
+    border: var(--button-border-width-base, 1px) solid var(--button-border-color-base, transparent);
+    border-radius: var(--button-border-radius-base, var(--radius-md));
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--t-fast);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.action-btn:hover:not(:disabled) {
+    background: var(--button-hover-background-color, #9fffa5);
+    color: var(--button-hover-text-color, var(--clr-bg-deep));
+    border-color: var(--button-hover-border-color, transparent);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px var(--clr-accent-glow);
+}
+
+.action-btn:active:not(:disabled) {
+    transform: translateY(0);
+}
+
+.action-btn.secondary {
+    background: transparent;
+    border-color: var(--button-border-color-base, rgba(255, 255, 255, 0.2));
+    color: var(--clr-text-primary);
+}
+
+.action-btn.secondary:hover:not(:disabled) {
+    background: var(--button-hover-background-color, rgba(255, 255, 255, 0.05));
+    border-color: var(--button-hover-border-color, rgba(255, 255, 255, 0.4));
+    color: var(--clr-text-primary);
+    box-shadow: none;
+}
+
+.action-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background: var(--clr-border) !important;
+    color: var(--clr-text-muted) !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+    transform: none !important;
+}
+
+.text-input,
+.secret-input {
+    flex-grow: 1;
+    padding: var(--input-padding, 0.75rem);
+    background: var(--input-background-color, rgba(0, 0, 0, 0.25));
+    color: var(--input-text-color, var(--clr-text-primary));
+    border: var(--input-border-width, 1px) solid var(--input-border-color, var(--clr-border));
+    border-radius: var(--input-border-radius, var(--radius-sm));
+    font-size: 0.9rem;
+    font-family: var(--font-mono);
+    transition: border-color var(--t-fast);
+}
+
+.text-input:focus,
+.secret-input:focus {
+    outline: none;
+    border-color: var(--clr-accent);
+}
+
+.text-input.invalid,
+.secret-input.invalid {
+    border-color: var(--clr-danger);
+    box-shadow: 0 0 0 2px rgba(255, 91, 91, 0.2);
+}
+
+.status-msg {
+    padding: 0.75rem 1rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.85rem;
+    margin: 0;
+}
+
+.status-msg.success {
+    background: rgba(120, 248, 126, 0.08);
+    border: 1px solid var(--clr-border);
+    color: var(--clr-accent);
+}
+
+.status-msg.error {
+    background: rgba(255, 91, 91, 0.08);
+    border: 1px solid rgba(255, 91, 91, 0.2);
+    color: var(--clr-danger);
+}
+
+.status-msg.info {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: var(--clr-text-secondary);
+}
+
+.address-code,
+.keystone-addr {
+    display: block;
+    padding: 0.75rem;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: var(--radius-sm);
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    word-break: break-all;
+    color: var(--clr-accent);
+}