mirrors/takahe
1
1
Fork 0
mirror of https://github.com/jointakahe/takahe.git synced 2025-03-29 10:05:31 +00:00
Code Issues Projects Releases Packages Wiki Activity

At all screen widths, just use the default <body> scrollbar for consistent behaviour and looks. (#237)

Browse source
This commit is contained in:
Tyler Kennedy 2022-12-23 05:56:25 -05:00 committed by GitHub
parent 79fd800a78
commit 175b8b37b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
static/css/style.css
View file

@ -99,6 +99,12 @@ td a {
--color-button-main: #444b5d; --color-button-main: #444b5d;
--color-button-main-hover: #515d7c; --color-button-main-hover: #515d7c;
--color-button-disabled: #7c9c97; --color-button-disabled: #7c9c97;
--sm-header-height: 50px;
--sm-sidebar-width: 50px;
--md-sidebar-width: 250px;
--md-header-height: 50px;
} }
body { body {
@ -330,7 +336,7 @@ nav a i {
} }
.right-column { .right-column {
width: 250px; width: var(--md-sidebar-width);
background: var(--color-bg-menu); background: var(--color-bg-menu);
border-radius: 0 0 5px 0; border-radius: 0 0 5px 0;
} }
@ -1236,45 +1242,39 @@ form .post {
@media (max-width: 920px), @media (max-width: 920px),
(display-mode: standalone) { (display-mode: standalone) {
html {
scrollbar-color: var(--color-bg-main) var(--color-text-duller);
}
div::-webkit-scrollbar {
background: var(--color-bg-main);
width: 7px;
}
div::-webkit-scrollbar-thumb {
background: var(--color-bg-main);
}
div:hover::-webkit-scrollbar-thumb {
background: var(--color-text-dull);
}
div.columns { div.columns {
height: calc(100vh - 50px); height: calc(100vh - 50px);
align-items: stretch; align-items: stretch;
} }
.left-column, .left-column {
margin: var(--md-header-height) var(--md-sidebar-width) 0 0;
}
.right-column { .right-column {
overflow-y: auto; width: var(--md-sidebar-width);
overflow-x: hidden; position: fixed;
height: 100%;
right: 0;
}
header {
height: var(--md-header-height);
position: fixed;
width: 100%;
background-color: var(--color-bg-main);
z-index: 9;
} }
main { main {
width: 100%; width: 100%;
overflow: hidden;
margin: 0; margin: 0;
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
} }
footer { footer {
position: absolute; position: fixed;
bottom: 0; bottom: 0;
right: 0; right: 0;
width: 250px; width: 250px;
@ -1296,8 +1296,12 @@ form .post {
@media (max-width: 750px) { @media (max-width: 750px) {
header {
height: var(--sm-header-height);
}
header menu a.identity { header menu a.identity {
width: 50px; width: var(--sm-sidebar-width);
padding: 10px 10px 0 0; padding: 10px 10px 0 0;
font-size: 0; font-size: 0;
} }
@ -1306,8 +1310,13 @@ form .post {
font-size: 22px; font-size: 22px;
} }
.left-column {
padding: 8px;
margin: var(--sm-header-height) var(--sm-sidebar-width) 0 0;
}
.right-column { .right-column {
width: 50px; width: var(--sm-sidebar-width);
} }
.right-column nav { .right-column nav {
@ -1336,10 +1345,6 @@ form .post {
display: none; display: none;
} }
.left-column {
padding: 8px;
}
.post { .post {
margin-bottom: 15px; margin-bottom: 15px;
} }