This commit is contained in:
2026-04-22 14:58:18 +09:00
parent 4d618f3b22
commit ba04eaf573
6 changed files with 131 additions and 176 deletions
+25 -50
View File
@@ -1,11 +1,4 @@
/* =====================================================
* Nercone TLS Test — shared styles
* Palette comes from /public/assets/css/style.css
* #1A1A1A = page bg #272727 = block bg
* #202020 = input bg #3a3a3a = border
* #E0E0E0 = tx #939393 = light-grey-alt
* #00C878 = bright-green #00C0FF = bright-blue
* ===================================================== */
/* Nercone TLS Test — shared styles. Palette uses CSS vars from /assets/css/style.css. */
/* ------ Landing page ------ */
.tls-landing {
@@ -22,7 +15,6 @@
margin: 0 0 8px 0;
font-size: clamp(40pt, 6vw, 64pt);
line-height: 1.1;
color: #FFFFFF;
letter-spacing: -0.01em;
}
.tls-landing-subtitle {
@@ -40,21 +32,21 @@
flex: 1;
min-width: 0;
background-color: #3a3a3a;
color: #E0E0E0;
color: var(--color-light-grey);
border: 1px solid #4a4a4a;
border-radius: 6px;
padding: 12px 16px;
font-family: inherit;
font-size: 13pt;
}
.tls-landing-input::placeholder { color: #939393; }
.tls-landing-input::placeholder { color: var(--color-light-grey-alt); }
.tls-landing-input:focus {
outline: none;
border-color: #00C0FF;
border-color: var(--color-bright-blue);
}
.tls-landing-submit {
background-color: #0096D0;
color: #FFFFFF;
color: var(--color-white);
border: none;
border-radius: 6px;
padding: 12px 28px;
@@ -75,10 +67,10 @@
flex-wrap: wrap;
}
.tls-landing-links a {
color: #939393;
color: var(--color-light-grey-alt);
text-decoration: underline;
}
.tls-landing-links a:hover { color: #E0E0E0; }
.tls-landing-links a:hover { color: var(--color-light-grey); }
.tls-aux-section {
max-width: 900px;
@@ -110,9 +102,6 @@
.tls-status-testid {
margin: 10px 0 0 0;
}
.tls-status-testid code {
font-family: "MesloLGS Nerd Font", "MesloLGS NF", "Menlo", "Consolas", monospace;
}
.tls-progress-track {
width: 100%;
height: 6px;
@@ -122,7 +111,7 @@
}
.tls-progress-bar {
height: 100%;
background-color: #00C878;
background-color: var(--color-bright-green);
transition: width 0.25s ease;
}
@@ -130,7 +119,7 @@
.tls-log-wrap {
width: min(1100px, 100%);
margin: 0 auto;
background-color: #272727;
background-color: var(--color-dark-grey-alt);
border-radius: 8px;
padding: 18px 22px;
text-align: left;
@@ -183,10 +172,10 @@
.tls-results-header {
position: static;
display: block;
background-color: #272727;
background-color: var(--color-dark-grey-alt);
padding: 28px clamp(16px, 4vw, 40px) 0;
margin-bottom: 0;
border-bottom: 1px solid #1a1a1a;
border-bottom: 1px solid var(--color-dark-grey);
backdrop-filter: none;
}
.tls-results-header::before {
@@ -234,7 +223,6 @@
margin: 0 0 4px 0;
font-size: 22pt;
font-weight: 700;
color: #FFFFFF;
word-break: break-all;
}
.tls-results-metaline {
@@ -249,7 +237,6 @@
font-size: 10pt;
}
.tls-results-testid code {
font-family: "MesloLGS Nerd Font", "MesloLGS NF", "Menlo", "Consolas", monospace;
padding: 0;
}
.tls-results-actions {
@@ -271,15 +258,15 @@
}
.tls-btn-secondary {
background-color: #3a3a3a;
color: #E0E0E0;
color: var(--color-light-grey);
}
.tls-btn-secondary:hover { background-color: #4a4a4a; }
.tls-btn-primary {
background-color: #0096D0;
color: #FFFFFF;
color: var(--color-white);
}
.tls-btn-primary:hover { background-color: #00B4F0; }
.tls-btn-primary.is-done { background-color: #00A050; }
.tls-btn-primary.is-done { background-color: var(--color-green); }
/* Tabs — sit at the bottom of the results header banner. */
.tls-results-header .tls-tabs {
@@ -291,11 +278,11 @@
flex-wrap: wrap;
gap: 0;
margin: 12px 0 16px 0;
border-bottom: 1px solid #1a1a1a;
border-bottom: 1px solid var(--color-dark-grey);
}
.tls-tab {
background: transparent;
color: #939393;
color: var(--color-light-grey-alt);
border: none;
border-bottom: 2px solid transparent;
padding: 10px 18px 10px 18px;
@@ -305,12 +292,12 @@
margin-bottom: -1px;
}
.tls-tab:hover {
color: #E0E0E0;
color: var(--color-light-grey);
}
.tls-tab.is-active {
color: #FFFFFF;
color: var(--color-white);
font-weight: 600;
border-bottom-color: #E0E0E0;
border-bottom-color: var(--color-light-grey);
}
.tls-tab-panels {
padding: 0 clamp(16px, 4vw, 40px) 40px;
@@ -332,7 +319,6 @@
.tls-section-title {
font-size: 14pt;
font-weight: 600;
color: #FFFFFF;
margin: 0 0 10px 0;
padding-bottom: 6px;
border-bottom: 1px solid #3a3a3a;
@@ -346,7 +332,7 @@
background-color: #202020;
border-radius: 6px;
overflow: hidden;
color: #E0E0E0;
color: var(--color-light-grey);
}
.tls-table th,
.tls-table td {
@@ -357,7 +343,7 @@
}
.tls-table thead th {
background-color: #2a2a2a;
color: #939393;
color: var(--color-light-grey-alt);
font-weight: 500;
font-size: 10.5pt;
text-transform: uppercase;
@@ -368,7 +354,6 @@
border-bottom: none;
}
.tls-table code {
font-family: "MesloLGS Nerd Font", "MesloLGS NF", "Menlo", "Consolas", monospace;
font-size: 10.5pt;
background-color: transparent;
padding: 0;
@@ -381,7 +366,7 @@
.tls-cipher-version {
margin: 0 0 6px 0;
font-size: 11.5pt;
color: #E0E0E0;
color: var(--color-light-grey);
font-weight: 600;
}
.tls-cipher-list {
@@ -395,9 +380,8 @@
gap: 4px 16px;
}
.tls-cipher-list code {
font-family: "MesloLGS Nerd Font", "MesloLGS NF", "Menlo", "Consolas", monospace;
font-size: 10pt;
color: #E0E0E0;
color: var(--color-light-grey);
background: transparent;
padding: 0;
}
@@ -421,36 +405,28 @@
margin: 0;
}
.tls-raw code {
font-family: "MesloLGS Nerd Font", "MesloLGS NF", "Menlo", "Consolas", monospace;
white-space: pre;
background: transparent;
padding: 0;
}
/* ------------------------------------------------------------------
* Print stylesheet — "PDFをダウンロード" uses window.print() which
* lets the user save the page as a PDF from the browser print dialog.
* Hide chrome (tabs, buttons, site header/footer) and expand all tab
* panels so the resulting PDF contains every finding.
* ------------------------------------------------------------------ */
/* Print stylesheet — "PDFをダウンロード" uses window.print(). Hide chrome and
* expand all tab panels so the resulting PDF contains every finding. */
@media print {
html, body {
background: #ffffff !important;
color: #101010 !important;
}
/* Hide site-wide chrome and interactive controls. */
footer, .tls-tabs, .tls-results-actions,
#tls-copy-json, script, .tls-landing-links {
display: none !important;
}
/* Keep the results-header banner but make it paper-friendly. */
.tls-results-header {
background: transparent !important;
border: 0 !important;
padding: 0 0 16px 0 !important;
border-bottom: 1px solid #cccccc !important;
}
/* Expand every tab panel so the full report prints. */
.tls-tab-panels {
padding: 0 !important;
}
@@ -481,7 +457,6 @@
border-bottom: 1px dotted #cccccc;
padding: 4px 0;
}
/* Rank badge keeps its colour via currentColor. */
.tls-rank-badge {
print-color-adjust: exact;
-webkit-print-color-adjust: exact;