forked from sheetjs/docs.sheetjs.com
fix: [Electron Demo] - update screenshots, and re-style the details element.
This commit is contained in:
parent
4ff62b8032
commit
93de5bce80
Binary file not shown.
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 30 KiB |
@ -100,17 +100,21 @@ button, input[type="submit"] {
|
||||
transition: background-color 0.2s ease;
|
||||
color: var(--button-text);
|
||||
}
|
||||
|
||||
button:hover, input[type="submit"]:hover {
|
||||
background-color: var(--button-primary-hover);
|
||||
}
|
||||
|
||||
button:active, input[type="submit"]:active {
|
||||
background-color: var(--button-primary-active);
|
||||
}
|
||||
|
||||
button:disabled, input[type="submit"]:disabled {
|
||||
background-color: var(--button-primary-disabled);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
@ -139,9 +143,11 @@ button:focus, input[type="submit"]:focus, input[type="file"]:focus {
|
||||
border-radius: 4px;
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
.file-upload input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-upload.drag-over {
|
||||
border-color: var(--text-accent);
|
||||
background-color: #e6f8ee;
|
||||
@ -177,6 +183,7 @@ footer {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
footer ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -186,6 +193,7 @@ footer ul {
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer li {
|
||||
list-style: none;
|
||||
}
|
||||
@ -207,10 +215,8 @@ table {
|
||||
padding: 1rem;
|
||||
max-width: 900px;
|
||||
border-collapse: collapse;
|
||||
margin: 0 auto;
|
||||
font-family: "Roboto", "Roboto Condensed", sans-serif;
|
||||
overflow: hidden;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
@ -250,7 +256,6 @@ table tbody tr:hover {
|
||||
|
||||
.sheetjs-sheet-name {
|
||||
font-family: "Roboto Condensed", sans-serif;
|
||||
color: var(--text-accent);
|
||||
padding: 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -259,9 +264,31 @@ table tbody tr:hover {
|
||||
margin: 1rem auto;
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
cursor: pointer;
|
||||
background-color: #eee;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
details:focus-within {
|
||||
outline: 3px solid var(--text-accent);
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 2px var(--text-accent);
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: 3px solid var(--text-accent);
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 2px var(--text-accent);
|
||||
}
|
||||
|
||||
summary:focus-within {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sheetjs-tab-content {
|
||||
cursor: pointer;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* =====================
|
||||
File Status/Loaded/Unload
|
||||
@ -272,6 +299,7 @@ table tbody tr:hover {
|
||||
min-height: 1.5em;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.file-loaded {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
@ -279,6 +307,7 @@ table tbody tr:hover {
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.unload-btn:hover {
|
||||
background: var(--danger);
|
||||
color: var(--white);
|
||||
@ -296,6 +325,7 @@ table tbody tr:hover {
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
border: 6px solid #f3f3f3;
|
||||
border-top: 6px solid var(--text-accent);
|
||||
@ -318,10 +348,12 @@ table tbody tr:hover {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
font-size: 1rem;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user