Repository navigation
Expand file tree
/
Copy pathstyles.css
More file actions
151 lines (151 loc) · 12.9 KB
/
Copy pathstyles.css
File metadata and controls
151 lines (151 loc) · 12.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
:root {
--bg: #f4f6f8;
--surface: #ffffff;
--surface-2: #eef2f5;
--ink: #17202a;
--muted: #5d6b78;
--border: #d6dde3;
--accent: #0067b8;
--accent-soft: #e6f2fb;
--azure: #0078d4;
--m365: #6b48c7;
--danger: #b42318;
--danger-soft: #fff0ee;
--warning: #8a4b08;
--warning-soft: #fff4e5;
--success: #146c43;
--radius: 8px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); color: var(--ink); font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif; }
body { margin: 0; min-height: 100vh; }
button, input, select { font: inherit; }
button, select, input { color: inherit; }
.topbar { min-height: 92px; padding: 20px clamp(20px, 4vw, 64px); background: #17202a; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header-logo { display: block; width: clamp(300px, 34vw, 450px); height: auto; flex: 0 1 auto; }
.eyebrow { color: #a9cbe5; font-size: 12px; font-weight: 700; letter-spacing: .1em; margin: 0 0 2px; text-transform: uppercase; }
h1 { font-size: clamp(25px, 3vw, 34px); font-weight: 650; letter-spacing: -.03em; margin: 0; }
.header-status { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.refresh-banner { min-height: 38px; display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid rgb(101 183 238 / .58); border-radius: 10px; background: rgb(0 103 184 / .16); color: #d8effd; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1px rgb(101 183 238 / .08), 0 0 20px rgb(0 120 212 / .22); animation: refresh-glow 2.4s ease-in-out infinite; }
.refresh-orbit { width: 14px; height: 14px; flex: 0 0 auto; border: 2px solid rgb(169 203 229 / .35); border-top-color: #8bcdf7; border-radius: 50%; animation: refresh-spin 1.1s linear infinite; }
.refresh-banner[data-state="complete"] { background: rgb(69 196 124 / .12); border-color: rgb(129 211 165 / .46); box-shadow: 0 0 18px rgb(69 196 124 / .16); }
.refresh-banner[data-state="backoff"], .refresh-banner[data-state="failed"] { color: #c5d5e1; background: rgb(93 107 120 / .16); border-color: rgb(169 203 229 / .28); box-shadow: none; animation: none; }
.refresh-banner[data-state="backoff"] .refresh-orbit, .refresh-banner[data-state="failed"] .refresh-orbit { border: 2px solid rgb(169 203 229 / .38); animation: none; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }
@keyframes refresh-glow { 50% { box-shadow: 0 0 0 1px rgb(101 183 238 / .14), 0 0 26px rgb(0 120 212 / .34); } }
.freshness { color: #d5e1eb; display: flex; align-items: center; gap: 9px; font-size: 13px; text-align: right; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #f0b429; box-shadow: 0 0 0 3px rgb(240 180 41 / .18); flex: 0 0 auto; }
.status-dot.ok { background: #45c47c; box-shadow: 0 0 0 3px rgb(69 196 124 / .18); }
.status-dot.error { background: #ff6b5e; box-shadow: 0 0 0 3px rgb(255 107 94 / .18); }
main { max-width: 1500px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 40px) 64px; }
.updates-hero { margin-bottom: 12px; }
.updates-eyebrow { color: #9a3412; font-size: 12px; font-weight: 800; letter-spacing: .1em; line-height: 1.2; margin: 0; text-transform: uppercase; }
.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; }
.summary div { min-height: 86px; padding: 17px 20px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--border); }
.summary div:last-child { border-right: 0; }
.summary span { font-size: 25px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.summary small { color: var(--muted); font-size: 12px; margin-top: 3px; }
.workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.filters { position: sticky; top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: grid; gap: 9px; }
.view-switch { display: grid; gap: 6px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.view-switch-label { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; margin: 0 0 2px; text-transform: uppercase; }
.view-option { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: center; border: 1px solid transparent; border-radius: 7px; padding: 9px 8px; color: inherit; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
.view-option:hover { background: var(--surface-2); border-color: var(--border); }
.view-option.active { background: var(--accent-soft); border-color: #b9d9ef; box-shadow: inset 3px 0 0 var(--accent); }
.view-option strong, .view-option small { display: block; }
.view-option strong { font-size: 12px; line-height: 1.25; }
.view-option small { color: var(--muted); font-size: 11px; line-height: 1.25; margin-top: 2px; }
.view-glyph { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 6px; color: var(--accent); background: var(--accent-soft); font-size: 16px; }
.view-option.active .view-glyph { color: #fff; background: var(--accent); }
.filter-heading, .results-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h2 { font-size: 18px; margin: 0; letter-spacing: -.01em; }
.text-button { border: 0; background: transparent; color: var(--accent); cursor: pointer; padding: 5px; font-size: 13px; }
.filters > label, legend { color: var(--muted); font-size: 12px; font-weight: 650; margin-top: 8px; }
.filters input[type="search"], .filters select, .sort-label select { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 0 10px; }
.search-wrap { position: relative; }
.search-wrap input { padding-right: 38px !important; }
kbd { position: absolute; right: 10px; top: 10px; min-width: 22px; padding: 2px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; color: var(--muted); background: var(--surface-2); text-align: center; font-size: 11px; }
fieldset { border: 0; margin: 7px 0 0; padding: 0; display: grid; gap: 4px; }
legend { padding: 0 0 4px; }
.check { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; min-height: 36px; font-size: 13px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.check span { color: var(--muted); font-variant-numeric: tabular-nums; }
.results { min-width: 0; }
.results-bar { min-height: 56px; margin-bottom: 8px; }
.results-bar p { color: var(--muted); font-size: 13px; margin: 3px 0 0; }
.sort-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.sort-label select { width: auto; min-width: 180px; }
.active-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.filter-chip { border: 1px solid #b9d9ef; background: var(--accent-soft); color: #084d7d; border-radius: 999px; padding: 5px 9px; font-size: 12px; }
.items { display: grid; gap: 9px; }
.update-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 17px 19px; transition: border-color .15s ease, box-shadow .15s ease; }
.update-card:hover { border-color: #aebbc5; box-shadow: 0 3px 12px rgb(23 32 42 / .06); }
.card-topline { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
.card-topline time { margin-left: auto; font-variant-numeric: tabular-nums; }
.source-badge { color: #fff; border-radius: 4px; padding: 3px 6px; font-size: 11px; font-weight: 700; }
.source-badge.azure { background: var(--azure); }
.source-badge.m365 { background: var(--m365); }
.product { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
h3 { font-size: 17px; line-height: 1.35; margin: 11px 0 7px; letter-spacing: -.01em; }
h3 a { color: var(--ink); text-decoration: none; }
h3 a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.description { color: #44515d; font-size: 13px; line-height: 1.52; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.tag-row span { border: 1px solid var(--border); border-radius: 4px; color: var(--muted); background: var(--surface-2); padding: 3px 6px; font-size: 11px; }
.tag-row .action-badge[data-action="Retirement"] { color: var(--danger); background: var(--danger-soft); border-color: #f2b8b2; font-weight: 700; }
.tag-row .action-badge[data-action="Action required"] { color: var(--warning); background: var(--warning-soft); border-color: #f1c88d; font-weight: 700; }
.feature-id { font-family: ui-monospace, "Cascadia Mono", monospace; }
.load-more { display: block; width: 100%; min-height: 46px; margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--accent); cursor: pointer; font-weight: 650; }
.empty, .error-panel { border: 1px dashed var(--border); background: var(--surface); border-radius: var(--radius); color: var(--muted); padding: 42px; text-align: center; }
.error-panel { border-color: #efaaa3; color: var(--danger); }
.demo-shell { max-width: 820px; padding-top: 48px; }
.demo-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: clamp(24px, 4vw, 38px); box-shadow: 0 12px 32px rgb(23 32 42 / .07); }
.demo-eyebrow { color: var(--accent); margin-bottom: 7px; }
.demo-copy { max-width: 650px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0; }
.demo-button { min-height: 40px; padding: 0 13px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--accent); cursor: pointer; font-weight: 650; font-size: 13px; }
.demo-button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.demo-button.quiet { color: var(--muted); }
.demo-button:disabled { cursor: wait; opacity: .55; }
.job-timeline { list-style: none; margin: 0; padding: 6px 0; display: grid; gap: 4px; }
.job-timeline li { min-height: 39px; display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: 13px; border-radius: 7px; padding: 6px 9px; transition: color .2s ease, background .2s ease; }
.job-timeline li span { width: 10px; height: 10px; flex: 0 0 auto; border: 2px solid var(--border); border-radius: 50%; }
.job-timeline li.active { color: var(--ink); background: var(--accent-soft); }
.job-timeline li.active span { border-color: var(--accent); box-shadow: 0 0 12px rgb(0 103 184 / .28); animation: refresh-glow 1.5s ease-in-out infinite; }
.job-timeline li.complete span { border-color: #45a66f; background: #45a66f; box-shadow: 0 0 0 3px rgb(69 166 111 / .12); }
.job-timeline li.paused { opacity: .62; }
.demo-result { min-height: 22px; margin: 17px 0 0; color: var(--muted); font-size: 12px; }
footer { max-width: 1500px; margin: -38px auto 0; padding: 0 clamp(16px, 3vw, 40px) 28px; color: var(--muted); font-size: 11px; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgb(0 103 184 / .28); outline-offset: 2px; }
@media (max-width: 850px) {
.header-status { align-items: flex-end; flex-direction: column-reverse; gap: 8px; }
.summary { grid-template-columns: repeat(2, 1fr); }
.summary div:nth-child(2) { border-right: 0; }
.summary div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
.workspace { grid-template-columns: 1fr; }
.filters { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.view-switch, .filter-heading, .filters fieldset, .search-wrap { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.topbar { align-items: flex-start; flex-direction: column; }
.header-logo { width: min(100%, 450px); }
.freshness { text-align: left; }
.header-status { align-items: flex-start; width: 100%; }
.refresh-banner { max-width: 100%; white-space: normal; }
.filters { grid-template-columns: 1fr; }
.filters > * { grid-column: 1 !important; }
.results-bar { align-items: flex-start; flex-direction: column; }
.sort-label { width: 100%; }
.sort-label select { flex: 1; min-width: 0; }
.card-topline { flex-wrap: wrap; }
.card-topline time { width: 100%; margin-left: 0; }
}
@media (prefers-color-scheme: dark) {
:root { --bg:#10151a; --surface:#172027; --surface-2:#202b33; --ink:#f2f5f7; --muted:#a8b4be; --border:#34414b; --accent:#65b7ee; --accent-soft:#173a50; }
.description { color: #c2ccd4; }
.topbar { background: #0a0f13; }
h3 a:hover { color: #8bcdf7; }
.filter-chip { color: #b9e0f8; border-color: #285d7c; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .refresh-banner, .refresh-orbit { animation: none !important; } }