diff --git a/pkg6depotd/static/css/style.css b/pkg6depotd/static/css/style.css index 038bd27..5496d22 100644 --- a/pkg6depotd/static/css/style.css +++ b/pkg6depotd/static/css/style.css @@ -516,40 +516,70 @@ main.container { word-break: break-all; } -/* Install command */ -.install-cmd { +/* Copyable blocks (FMRI, install command) */ +.copyable-block { margin-bottom: 0.75rem; } + +.copyable-label { + display: block; + font-size: 0.72rem; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--d-text-muted); + font-weight: 600; + margin-bottom: 0.3rem; +} + +.copyable-row { background: var(--d-bg-surface); border: 1px solid var(--d-border); border-radius: var(--d-radius); - padding: 0.65rem 1rem; - font-family: var(--d-mono); - font-size: 0.84rem; - color: var(--d-heading); + padding: 0.55rem 0.75rem; display: flex; align-items: center; - gap: 0.6rem; - margin-bottom: 2rem; - overflow-x: auto; - white-space: nowrap; + justify-content: space-between; + gap: 0.75rem; } -.install-cmd .prompt { +.copyable-text { + font-family: var(--d-mono); + font-size: 0.82rem; + color: var(--d-heading); + white-space: nowrap; + overflow-x: auto; + flex: 1; + scrollbar-width: thin; +} + +.copyable-text .prompt { color: var(--d-accent); user-select: none; font-weight: 600; } -/* FMRI badge */ -.fmri-badge { - display: inline-block; - background: var(--d-bg-surface); - border: 1px solid var(--d-border); +.copy-btn { + flex-shrink: 0; + display: inline-flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; border-radius: 4px; - padding: 0.15rem 0.5rem; - font-family: var(--d-mono); - font-size: 0.78rem; - color: var(--d-text); - word-break: break-all; + background: transparent; + border: 1px solid var(--d-border); + color: var(--d-text-muted); + cursor: pointer; + transition: all var(--d-transition); +} + +.copy-btn:hover { + background: var(--d-bg-hover); + color: var(--d-heading); + border-color: var(--d-accent-dim); +} + +.copy-btn.copied { + color: var(--d-success); + border-color: var(--d-success); } /* ========================================================================== diff --git a/pkg6depotd/templates/base.html b/pkg6depotd/templates/base.html index cb963a6..1fbe953 100644 --- a/pkg6depotd/templates/base.html +++ b/pkg6depotd/templates/base.html @@ -82,9 +82,14 @@ .info-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem} .info-row .label{color:var(--d-text-muted);font-size:0.84rem;white-space:nowrap} .info-row .value{font-family:var(--d-mono);font-size:0.84rem;color:var(--d-heading);text-align:right;word-break:break-all} - .install-cmd{background:var(--d-bg-surface);border:1px solid var(--d-border);border-radius:var(--d-radius);padding:0.65rem 1rem;font-family:var(--d-mono);font-size:0.84rem;color:var(--d-heading);display:flex;align-items:center;gap:0.6rem;margin-bottom:2rem;overflow-x:auto;white-space:nowrap} - .install-cmd .prompt{color:var(--d-accent);user-select:none;font-weight:600} - .fmri-badge{display:inline-block;background:var(--d-bg-surface);border:1px solid var(--d-border);border-radius:4px;padding:0.15rem 0.5rem;font-family:var(--d-mono);font-size:0.78rem;color:var(--d-text);word-break:break-all} + .copyable-block{margin-bottom:0.75rem} + .copyable-label{display:block;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--d-text-muted);font-weight:600;margin-bottom:0.3rem} + .copyable-row{background:var(--d-bg-surface);border:1px solid var(--d-border);border-radius:var(--d-radius);padding:0.55rem 0.75rem;display:flex;align-items:center;justify-content:space-between;gap:0.75rem} + .copyable-text{font-family:var(--d-mono);font-size:0.82rem;color:var(--d-heading);white-space:nowrap;overflow-x:auto;flex:1;scrollbar-width:thin} + .copyable-text .prompt{color:var(--d-accent);user-select:none;font-weight:600} + .copy-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:4px;background:transparent;border:1px solid var(--d-border);color:var(--d-text-muted);cursor:pointer;transition:all var(--d-transition)} + .copy-btn:hover{background:var(--d-bg-hover);color:var(--d-heading);border-color:var(--d-accent-dim)} + .copy-btn.copied{color:var(--d-success);border-color:var(--d-success)} .section-heading{font-size:1.05rem;margin:2rem 0 0.75rem;padding-bottom:0.4rem;border-bottom:1px solid var(--d-border-subtle)} .dep-list li{display:flex;align-items:center;gap:0.6rem;padding:0.4rem 0;border-bottom:1px solid var(--d-border-subtle);font-family:var(--d-mono);font-size:0.82rem} .dep-list li:last-child{border-bottom:none} diff --git a/pkg6depotd/templates/package_detail.html b/pkg6depotd/templates/package_detail.html index 78562d0..40f96b0 100644 --- a/pkg6depotd/templates/package_detail.html +++ b/pkg6depotd/templates/package_detail.html @@ -56,18 +56,28 @@ Compressed {{ csize }} -
- FMRI - - {{ fmri_str }} - -
-
- $ pkg install {{ fmri_str }} +
+ FMRI +
+ {{ fmri_str }} + +
+
+ +
+ Install +
+ $ pkg install {{ fmri_str }} + +
{% if !dependencies.is_empty() %} @@ -106,4 +116,21 @@ Loading manifest...
+ + {% endblock %}