phanpy/src/components/shortcuts.css

207 lines
5 KiB
CSS
Raw Normal View History

2023-02-16 12:51:54 +03:00
#shortcuts-button {
position: fixed;
bottom: 16px;
bottom: max(16px, env(safe-area-inset-bottom));
left: 16px;
left: max(16px, env(safe-area-inset-left));
padding: 16px;
background-color: var(--bg-faded-blur-color);
z-index: 101;
transition: all 0.3s ease-in-out;
2023-02-17 14:31:28 +03:00
border: var(--hairline-width) solid var(--bg-color);
box-shadow: inset 0 -4px 16px -8px var(--button-bg-blur-color),
0 3px 8px -1px var(--drop-shadow-color);
2023-02-16 12:51:54 +03:00
}
#shortcuts-button .icon {
transform: translateY(2px); /* Balance the icon's vertical alignment */
}
#app:has(#home-page):not(:has(#home-page ~ .deck-container)):has(header[hidden])
#shortcuts-button,
#app:has(#home-page ~ .deck-container header[hidden]) #shortcuts-button,
2023-02-16 12:51:54 +03:00
#shortcuts-button[hidden] {
transform: translateY(200%);
pointer-events: none;
user-select: none;
}
#shortcuts-button:is(:hover, :focus) {
2023-02-18 19:08:37 +03:00
background-color: var(--bg-color);
2023-02-16 12:51:54 +03:00
filter: none;
}
#shortcuts-button:active {
2023-02-17 14:31:28 +03:00
transform: scale(0.95);
transition: none;
2023-02-16 12:51:54 +03:00
}
@media (min-width: calc(40em + 56px + 8px)) {
#shortcuts-button {
right: 16px;
right: max(16px, env(safe-area-inset-right));
left: auto;
top: 16px;
top: max(16px, env(safe-area-inset-top));
bottom: auto;
}
#app:has(#home-page):not(:has(#home-page ~ .deck-container)):has(
header[hidden]
)
#shortcuts-button,
#app:has(#home-page ~ .deck-container header[hidden]) #shortcuts-button,
#shortcuts-button[hidden] {
transform: translateY(-200%);
}
2023-02-16 12:51:54 +03:00
}
2023-02-27 18:59:41 +03:00
/* TAB BAR */
#shortcuts .tab-bar:not([hidden]) {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
background-color: var(--bg-blur-color);
backdrop-filter: blur(16px) saturate(3);
border-top: var(--hairline-width) solid var(--outline-color);
box-shadow: 0 -8px 16px -8px var(--drop-shadow-color);
overflow: auto;
transition: all 0.3s ease-in-out;
padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom)
env(safe-area-inset-left);
2023-02-28 02:59:48 +03:00
user-select: none;
-webkit-touch-callout: none;
2023-02-27 18:59:41 +03:00
}
#shortcuts .tab-bar ul {
display: flex;
margin: 0;
padding: 0;
}
#shortcuts .tab-bar li {
flex-grow: 1;
margin: 0;
padding: 0;
list-style: none;
display: flex;
2023-02-28 03:38:46 +03:00
justify-content: center;
2023-10-06 13:13:10 +03:00
min-width: 20vw;
flex-basis: 20vw;
2023-02-27 18:59:41 +03:00
}
#shortcuts .tab-bar li a {
2023-03-01 14:08:17 +03:00
-webkit-tap-highlight-color: transparent;
2023-02-27 18:59:41 +03:00
display: block;
color: var(--text-insignificant-color);
font-size: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 8px;
text-decoration: none;
text-shadow: 0 var(--hairline-width) var(--bg-color);
2023-10-06 13:13:10 +03:00
width: 100%;
&:is(:hover, :focus) {
color: var(--text-color);
}
2023-02-27 18:59:41 +03:00
}
#shortcuts .tab-bar li a:active {
transform: scale(0.95);
transition: none;
}
#shortcuts .tab-bar li a * {
pointer-events: none;
}
#shortcuts .tab-bar li a span {
width: 100%;
text-align: center;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#shortcuts .tab-bar li a.is-active {
color: var(--link-color);
background-image: radial-gradient(
closest-side at 50% 50%,
var(--bg-color),
transparent
);
}
#app:has(#home-page):not(:has(#home-page ~ .deck-container)):has(header[hidden])
#shortcuts
.tab-bar,
#app:has(#home-page ~ .deck-container header[hidden]) #shortcuts .tab-bar,
2023-02-27 18:59:41 +03:00
shortcuts .tab-bar[hidden] {
transform: translateY(200%);
pointer-events: none;
user-select: none;
}
@media (max-width: calc(40em - 1px)) {
#app[data-shortcuts-view-mode='tab-menu-bar'] .deck-container {
padding-bottom: 52px;
}
#shortcuts .tab-bar li a.has-subtitle .icon,
#shortcuts .tab-bar li a.has-subtitle .icon svg {
width: 14px !important;
height: 14px !important;
}
#shortcuts .tab-bar li a span {
line-height: 1;
}
}
2023-02-28 03:38:46 +03:00
@media (min-width: 40em) {
#app[data-shortcuts-view-mode='tab-menu-bar'] .timeline-deck {
2023-02-27 18:59:41 +03:00
margin-top: 44px;
}
#app[data-shortcuts-view-mode='tab-menu-bar'] .timeline-deck > header {
2023-02-27 18:59:41 +03:00
--margin-top: calc(44px + 8px);
}
#shortcuts .tab-bar:not([hidden]) {
top: 0;
bottom: auto;
padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
env(safe-area-inset-left);
background-color: var(--bg-faded-blur-color);
border: 0;
box-shadow: none;
border-bottom: var(--hairline-width) solid var(--bg-faded-color);
}
2023-02-28 03:38:46 +03:00
#shortcuts .tab-bar ul:before {
content: '';
margin: auto;
}
#shortcuts .tab-bar ul:after {
content: '';
margin: auto;
2023-02-27 18:59:41 +03:00
}
#shortcuts .tab-bar li {
flex-grow: 0;
2023-10-06 13:13:10 +03:00
min-width: auto;
flex-basis: auto;
2023-02-27 18:59:41 +03:00
}
#shortcuts .tab-bar li a {
padding: 0 16px;
2023-02-27 19:34:53 +03:00
width: auto;
2023-02-27 18:59:41 +03:00
flex-direction: row;
font-size: 14px;
height: 44px;
gap: 4px;
}
#shortcuts .tab-bar li a span {
text-align: left;
line-height: 1;
}
2023-03-03 15:42:17 +03:00
#app:has(#home-page):not(:has(#home-page ~ .deck-container)):has(
header[hidden]
)
#shortcuts
.tab-bar,
#app:has(#home-page ~ .deck-container header[hidden]) #shortcuts .tab-bar,
2023-02-27 18:59:41 +03:00
shortcuts .tab-bar[hidden] {
transform: translateY(-150%);
pointer-events: none;
user-select: none;
}
}