diff --git a/webui-src/app/scss/components/_statusbar.scss b/webui-src/app/scss/components/_statusbar.scss new file mode 100644 index 0000000..0f88078 --- /dev/null +++ b/webui-src/app/scss/components/_statusbar.scss @@ -0,0 +1,42 @@ +@use '../abstracts' as *; + +/* Status Bar Styles */ +.statusbar { + @include flex($justify: space-between, $align: center); + height: 28px; + background-color: $dark-color; + border-top: 1px solid #2e2e38; + padding: 0 1rem; + font-size: 0.8rem; + color: #94a3b8; + z-index: 100; + box-sizing: border-box; + user-select: none; + flex-shrink: 0; + + &-left { + @include flex($align: center); + } + + &-right { + @include flex($align: center, $gap: 1.5rem); + } + + &-item { + @include flex($align: center); + } + + &-divider { + width: 1px; + height: 14px; + background-color: #2e2e38; + } +} + +.status-bullet { + width: 8px; + height: 8px; + border-radius: 50%; + display: inline-block; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); +} diff --git a/webui-src/app/scss/pages/_config.scss b/webui-src/app/scss/pages/_config.scss index 5bdcf39..659cc95 100644 --- a/webui-src/app/scss/pages/_config.scss +++ b/webui-src/app/scss/pages/_config.scss @@ -89,3 +89,58 @@ .config-files { @include flex(column, $gap: 1rem); } + +/* Hidden Service Configuration layout overrides */ +.proxy-server-container { + width: 100%; + @include flex(column, $gap: 1rem); +} + +.proxy-description { + color: #334155; + font-size: 0.95rem; + margin-bottom: 0.5rem; +} + +.proxy-rows-container { + @include flex(column, $gap: 0.75rem); + width: 100%; +} + +.proxy-row { + display: grid; + grid-template-columns: 160px 220px 220px auto; + gap: 0.75rem; + align-items: center; + width: 100%; +} + +.proxy-label { + font-size: 0.95rem; + font-weight: 500; + color: #1e293b; +} + +.proxy-addr-input, +.proxy-port-input { + width: 100% !important; + max-width: none !important; +} + +.proxy-status-container { + @include flex($align: center, $gap: 0.5rem); +} + +.proxy-status-bullet { + width: 14px; + height: 14px; + border-radius: 50%; + display: inline-block; + border: 1px solid #475569; +} + +.proxy-status-text { + font-size: 0.95rem; + color: #1e293b; +} +