44 lines
2.3 KiB
CSS
44 lines
2.3 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
color: #17211b;
|
|
background: #e9eee8;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background: radial-gradient(circle at 10% 0%, #f8fbf4, transparent 38%), #e9eee8;
|
|
}
|
|
|
|
.page { max-width: 980px; margin: 0 auto; padding: 64px 24px; }
|
|
.eyebrow { color: #56745f; font: 700 12px/1.2 sans-serif; letter-spacing: 2px; }
|
|
h1 { max-width: 620px; margin: 12px 0; font-size: clamp(38px, 7vw, 72px); line-height: .95; font-weight: 400; }
|
|
.lede { max-width: 560px; color: #5d6a61; font: 16px/1.6 sans-serif; }
|
|
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 36px 0 16px; }
|
|
button { border: 0; border-radius: 4px; padding: 12px 17px; color: #f7faf4; background: #1f5a3b; font: 700 13px sans-serif; cursor: pointer; }
|
|
button.secondary { color: #1f5a3b; background: #cbdcc9; }
|
|
button.quiet { color: #5d6a61; background: transparent; }
|
|
button:disabled { opacity: .45; cursor: not-allowed; }
|
|
.status { min-height: 22px; color: #56745f; font: 13px sans-serif; }
|
|
.table-wrap { overflow-x: auto; border-top: 1px solid #b9c7ba; }
|
|
table { width: 100%; border-collapse: collapse; font: 14px/1.4 sans-serif; }
|
|
th, td { padding: 14px 10px; border-bottom: 1px solid #cbd5cc; text-align: left; }
|
|
th { color: #56745f; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
|
|
td:nth-child(2) { width: 140px; color: #68766c; }
|
|
.tree-name { display: inline-flex; align-items: center; gap: 8px; min-width: 240px; padding-top: 0; padding-bottom: 0; border: 0; background: transparent; color: #17211b; font: inherit; text-align: left; }
|
|
.tree-group { padding-left: 0; cursor: pointer; }
|
|
.tree-folder { color: #1f5a3b; }
|
|
.tree-zip { color: #8a5a20; }
|
|
.tree-chevron { display: inline-block; width: 12px; color: #78917d; font-size: 10px; }
|
|
.remove-btn { padding: 2px 7px; color: #8c5148; background: transparent; font: 20px/1 sans-serif; }
|
|
.remove-btn:hover { color: #b32f22; }
|
|
.tree-row td:first-child { white-space: nowrap; }
|
|
.count { color: #5d6a61; font: 13px sans-serif; }
|
|
.result { margin-top: 44px; padding-top: 18px; border-top: 2px solid #1f5a3b; }
|
|
.result h2 { font-size: 26px; font-weight: 400; }
|
|
.result li { margin: 8px 0; font: 14px sans-serif; }
|
|
@media (max-width: 600px) {
|
|
.page { padding: 36px 16px; }
|
|
.toolbar button { flex: 1 1 42%; }
|
|
} |