diff --git a/daemon/HTTPServer.cpp b/daemon/HTTPServer.cpp index cec986ab..dc700016 100644 --- a/daemon/HTTPServer.cpp +++ b/daemon/HTTPServer.cpp @@ -307,6 +307,7 @@ namespace http { URL url; url.parse_query(params); page = params["page"]; + std::string token = params["token"]; s << "\r\n" @@ -321,7 +322,11 @@ namespace http { "\r\n" "\r\n" "
\r\n\r\n" - "" + "\r\n" "
" << tr("Main page") << "
" + "" << tr("Main page") << " " + // placeholder for graceful shutdown button (requires token) + "Shutdown
\r\n"; if (i2p::context.IsFloodfill ()) s << "" << tr("LeaseSets") << "\r\n"; diff --git a/webconsole/style.css b/webconsole/style.css index 176ec4eb..f5570f36 100644 --- a/webconsole/style.css +++ b/webconsole/style.css @@ -1,3 +1,6 @@ +/* "purple" console theme for i2pd */ +/* Author: dr|z3d */ + :root { --bodyfont: Open Sans, Noto Sans, Ubuntu, Segoe UI, sans-serif; --monospaced: Droid Sans Mono, Noto Mono, Lucida Console, DejaVu Sans Mono, monospace; @@ -88,10 +91,6 @@ body { color: var(--ink); } -.header { - display: none; -} - .wrapper { margin: 0 auto; padding: 5px; @@ -101,6 +100,39 @@ body { text-align: center; } +.header { + display: inline-block; + width: 100%; + vertical-align: middle; + position: relative; +} + +#shutdownbutton { + position: absolute; + top: 0; + right: -10px; + display: inline-block; + width: 40px; + height: 44px; + font-size: 0; + background: var(--shutdown) no-repeat center center / 24px; + opacity: .6; + mix-blend-mode: luminosity; +} + +#shutdownbutton:hover, #shutdownbutton:focus { + opacity: .7; + mix-blend-mode: normal; +} + +#shutdownbutton:active { + transform: scale(.85); +} + +#shutdownbutton:active[data-tooltip]::after { + display: none; +} + b { font-weight: 600; } @@ -430,9 +462,10 @@ td:last-child { } #warning, #success { - display: block; + margin: -5px 0 10px; width: 100%; height: 48px; + display: block; background: var(--error) no-repeat center top / 44px; } @@ -844,7 +877,8 @@ a[href^="https://gwhois"] { } span[data-tooltip]:hover::after, span[data-tooltip]:active::after, -.itag[data-tooltip]:hover::after, .itag[data-tooltip]:active::after { +.itag[data-tooltip]:hover::after, .itag[data-tooltip]:active::after, +.header a[data-tooltip][href*="cmd"]:hover::after { padding: 3px 6px; display: inline-block; position: absolute; @@ -858,6 +892,11 @@ span[data-tooltip]:hover::after, span[data-tooltip]:active::after, background: #fff !important; content: attr(data-tooltip); text-shadow: none !important; + white-space: nowrap; +} + +.header a[data-tooltip][href*="cmd"]:hover::after { + left: -50px; } .slide label {