Arav/dwelling-files
1
0
Fork 0
Code Releases 8 Activity

Styled a new overlay.

Browse Source
This commit is contained in:
Alexander Andreev 2022-09-20 03:38:35 +04:00
parent fa8f439dec
commit 5a47a0a5e1
Signed by: Arav
GPG Key ID: 0388CC8FAA51063F
1 changed files with 35 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
web/assets/css/main.css
View File

@ -105,8 +105,9 @@ section { margin-top: 1rem; }
align-items: center; align-items: center;
background-color: var(--overlay-background-color); background-color: var(--overlay-background-color);
display: flex; display: flex;
flex-direction: column; flex-direction: row;
height: 100%; height: 100%;
justify-content: space-between;
left: 0; left: 0;
max-height: 100%; max-height: 100%;
position: fixed; position: fixed;
@ -114,18 +115,39 @@ section { margin-top: 1rem; }
visibility: hidden; visibility: hidden;
width: 100%; } width: 100%; }
#overlay video, #overlay div {
#overlay audio, align-items: center;
#overlay img { display: flex;
height: 100%;
width: 100%;
z-index: 9999; }
#overlay :is(video, audio, img) {
margin: auto; margin: auto;
max-height: 100%; max-height: 100%;
max-width: 86%; max-width: 86%; }
}
#overlay span { #overlay span {
bottom: 0;
color: var(--background-color); color: var(--background-color);
left: 0;
position: fixed;
text-shadow: 0 0 .3rem var(--secondary-color); text-shadow: 0 0 .3rem var(--secondary-color);
} z-index: 999; }
#overlay button {
background: none;
border: none;
color: var(--background-color);
font: inherit;
font-size: 2rem;
padding: 0 1rem;
height: 100%;
z-index: 999; }
#overlay button:hover {
background-color: var(--background-color);
color: var(--primary-color); }
table { overflow-y: scroll; width: 100%; } table { overflow-y: scroll; width: 100%; }
@ -153,25 +175,15 @@ td a:hover { transition: none; }
td:nth-child(2), td:nth-child(2),
td:last-child { white-space: nowrap; } td:last-child { white-space: nowrap; }
thead tr th.clickable { thead tr th.clickable { cursor: pointer; }
cursor: pointer;
}
thead tr th.clickable:hover { thead tr th.clickable:hover { color: var(--secondary-color); }
color: var(--secondary-color);
}
thead tr th.clickable:not(.sort-up):not(.sort-down)::after { thead tr th.clickable:not(.sort-up):not(.sort-down)::after { content: '⇅'; }
content: '⇅';
}
thead tr th.clickable.sort-up::after { thead tr th.clickable.sort-up::after { content: '↑'; }
content: '↑';
}
thead tr th.clickable.sort-down::after { thead tr th.clickable.sort-down::after { content: '↓'; }
content: '↓';
}
footer { footer {
font-size: .8rem; font-size: .8rem;