mirror of
https://github.com/fluxerapp/fluxer
synced 2026-10-17 13:05:32 +09:00
656 lines
13 KiB
CSS
656 lines
13 KiB
CSS
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
|
|
|
.gifPickerContainer {
|
|
position: relative;
|
|
display: grid;
|
|
height: 100%;
|
|
grid-template-rows: 1fr;
|
|
overflow: hidden;
|
|
background-color: var(--background-primary);
|
|
--gif-picker-category-overlay-bg: rgb(0 0 0 / 0.68);
|
|
--gif-picker-category-overlay-hover-bg: rgb(0 0 0 / 0.5);
|
|
--gif-picker-gif-overlay-bg: rgb(0 0 0 / 0.18);
|
|
--gif-picker-gif-overlay-hover-bg: rgb(0 0 0 / 0.04);
|
|
}
|
|
|
|
.gifPickerMain {
|
|
position: relative;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background-color: var(--background-primary);
|
|
}
|
|
|
|
.autoSizerWrapper {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.autoSizerWrapper > div {
|
|
height: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.loadingSkeletonGrid {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.loadingSkeletonBlob {
|
|
position: absolute;
|
|
border-radius: 0.375rem;
|
|
background-color: var(--background-secondary);
|
|
contain: layout paint;
|
|
will-change: opacity, transform;
|
|
}
|
|
|
|
.virtualList {
|
|
overflow-anchor: none;
|
|
background-color: var(--background-primary);
|
|
}
|
|
|
|
.scrollContent {
|
|
padding-bottom: var(--spacing-3);
|
|
}
|
|
|
|
.virtualRow {
|
|
display: flex;
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.loadingSkeletonBlob {
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.virtualRow {
|
|
gap: var(--spacing-2);
|
|
}
|
|
}
|
|
|
|
.searchBarContainer {
|
|
--gif-picker-header-control-height: 2.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
min-height: var(--gif-picker-header-control-height);
|
|
}
|
|
|
|
.mobileHeaderWrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-3);
|
|
padding-block: var(--spacing-2);
|
|
padding-inline: var(--spacing-4);
|
|
}
|
|
|
|
.searchBarTitleWrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
min-height: var(--gif-picker-header-control-height);
|
|
}
|
|
|
|
.searchBarTitleLeft {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.searchBarActions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.searchBarBackButton {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
border-radius: var(--radius-md);
|
|
flex-shrink: 0;
|
|
color: var(--text-primary-muted);
|
|
transition:
|
|
background-color 0.1s ease-out,
|
|
color 0.1s ease-out;
|
|
}
|
|
|
|
.searchBarBackButton:disabled {
|
|
cursor: default;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.searchBarBackButton:not(:disabled):hover {
|
|
background-color: var(--background-modifier-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
}
|
|
|
|
.searchBarTitle {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.grid {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: var(--spacing-3);
|
|
padding: 0 0.625rem 1rem 0.625rem;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
gap: var(--spacing-3);
|
|
min-width: 14.1875rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.grid {
|
|
gap: var(--spacing-2);
|
|
padding: 0 0.625rem 1rem 0.625rem;
|
|
}
|
|
|
|
.column {
|
|
gap: var(--spacing-2);
|
|
min-width: calc(50svw - 1.25rem);
|
|
}
|
|
|
|
.gridItem {
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
}
|
|
|
|
.gridItem {
|
|
position: relative;
|
|
border-radius: 0.375rem;
|
|
background-color: var(--background-secondary);
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border: 0.0625rem solid transparent;
|
|
transition: border-color 0.1s ease-out;
|
|
outline: none;
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
contain: paint;
|
|
}
|
|
|
|
.gridItemFocused {
|
|
border-color: var(--brand-primary-light);
|
|
box-shadow: inset 0 0 0 0.125rem var(--brand-primary-light);
|
|
}
|
|
|
|
.gridItemBackdrop {
|
|
position: absolute;
|
|
inset: 0.0625rem;
|
|
transition: background-color 0.1s ease-out;
|
|
z-index: 2;
|
|
background-color: var(--gif-picker-category-overlay-bg);
|
|
border-radius: calc(0.375rem - 0.0625rem);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.gridItemGif .gridItemBackdrop {
|
|
display: none;
|
|
}
|
|
|
|
.gridItemGifPicker .gridItemBackdrop {
|
|
display: block;
|
|
background-color: var(--gif-picker-gif-overlay-bg);
|
|
}
|
|
|
|
.gifMediaContainer {
|
|
position: absolute;
|
|
inset: 0.0625rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
border-radius: calc(0.375rem - 0.0625rem);
|
|
background-color: var(--background-secondary);
|
|
z-index: 1;
|
|
}
|
|
|
|
.gridItemFavorites .gridItemBackdrop {
|
|
background-color: color-mix(in srgb, var(--brand-primary) 60%, transparent);
|
|
}
|
|
|
|
.gridItemCategoryEmpty {
|
|
background-color: var(--brand-primary-light);
|
|
}
|
|
|
|
.gridItemCategoryEmpty .gridItemBackdrop {
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
background-color: color-mix(in srgb, var(--brand-primary-light) 40%, transparent);
|
|
}
|
|
|
|
.gridItemFavorites.gridItemCategoryEmpty {
|
|
background-color: var(--brand-primary);
|
|
}
|
|
|
|
.gridItemFavorites.gridItemCategoryEmpty .gridItemBackdrop {
|
|
background-color: color-mix(in srgb, var(--brand-primary) 40%, transparent);
|
|
}
|
|
|
|
.gridItemCategoryTitle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 3;
|
|
pointer-events: none;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.gridItemIcon {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.gridItemCategoryTitleText {
|
|
font-size: 1rem;
|
|
line-height: 1rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
text-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.gif {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.gifVideoContainer {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.gifVideoContainer > video,
|
|
.gifVideoContainer > img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.gifVideoContainer > video {
|
|
z-index: 1;
|
|
}
|
|
|
|
.gifVideoContainer > img {
|
|
z-index: 0;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
background-color: var(--background-primary);
|
|
}
|
|
|
|
.backButton {
|
|
margin-right: 1rem;
|
|
cursor: pointer;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
color: var(--text-primary-muted);
|
|
transition: color 0.1s ease-out;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.backButton:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
}
|
|
|
|
.header h2 {
|
|
flex: 1;
|
|
margin: 0;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.skeletonContainer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.625rem;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.skeletonItem {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--background-secondary) 0%,
|
|
var(--background-tertiary) 50%,
|
|
var(--background-secondary) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
border-radius: 0.375rem;
|
|
animation: shimmer 2s ease-in-out infinite;
|
|
will-change: background-position;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -200% center;
|
|
}
|
|
100% {
|
|
background-position: 200% center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.skeletonItem {
|
|
border-radius: 0.25rem;
|
|
}
|
|
}
|
|
|
|
.suggestionsContainer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
padding: 1rem 1rem 0;
|
|
justify-content: center;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.suggestionTag {
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
border-radius: 1rem;
|
|
background-color: var(--background-tertiary);
|
|
color: var(--text-primary);
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.suggestionTag:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
}
|
|
|
|
.suggestionTag:active {
|
|
background-color: var(--background-modifier-selected);
|
|
}
|
|
|
|
.hoverActionButtons {
|
|
composes: toolbar from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
|
|
--action-toolbar-surface: var(--form-surface-background);
|
|
--action-toolbar-border: var(--background-modifier-accent);
|
|
--gif-hover-action-hover-background: var(--surface-interactive-hover-bg);
|
|
--gif-hover-action-selected-background: var(--surface-interactive-selected-bg);
|
|
--gif-hover-action-danger-text: color-mix(in srgb, var(--status-danger) 78%, var(--text-primary) 22%);
|
|
--gif-hover-action-danger-background: color-mix(
|
|
in srgb,
|
|
var(--status-danger) 6%,
|
|
var(--surface-interactive-hover-bg)
|
|
);
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
right: 0.5rem;
|
|
z-index: 10;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transform: translateY(-0.25rem);
|
|
transition: none;
|
|
}
|
|
|
|
.favoriteButton {
|
|
composes: item from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
:global(:where(html.window-focused, html.unfocused-fully-interactive):not(.window-focus-activation-guard))
|
|
.favoriteButton:not(.favoriteButtonDanger):not(.favoriteButtonActive):hover {
|
|
color: var(--text-primary);
|
|
background: var(--gif-hover-action-hover-background);
|
|
}
|
|
|
|
:global(:where(html.window-focused, html.unfocused-fully-interactive):not(.window-focus-activation-guard))
|
|
.favoriteButtonDanger:hover {
|
|
background: var(--gif-hover-action-danger-background);
|
|
}
|
|
}
|
|
|
|
.favoriteButtonActive {
|
|
color: var(--text-primary);
|
|
background: var(--gif-hover-action-selected-background);
|
|
}
|
|
|
|
.favoriteButtonDanger {
|
|
color: var(--gif-hover-action-danger-text);
|
|
}
|
|
|
|
.favoriteButtonIcon {
|
|
composes: icon from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
|
|
height: 1.125rem;
|
|
width: 1.125rem;
|
|
}
|
|
|
|
.favoriteButtonActiveIcon {
|
|
height: 1.125rem;
|
|
width: 1.125rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.centeredContent {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-bottom: 4rem;
|
|
}
|
|
|
|
.slate {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 1rem;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.slateContent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.slateIcon {
|
|
height: 3.5rem;
|
|
width: 3.5rem;
|
|
color: var(--text-primary-muted);
|
|
}
|
|
|
|
.slateTextContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.slateTitle {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.slateDescription {
|
|
font-size: 1rem;
|
|
color: var(--text-primary-muted);
|
|
}
|
|
|
|
:global(.theme-light) .gifPickerContainer {
|
|
background-color: var(--background-primary);
|
|
--gif-picker-category-overlay-bg: rgb(255 255 255 / 0.56);
|
|
--gif-picker-category-overlay-hover-bg: rgb(255 255 255 / 0.36);
|
|
--gif-picker-gif-overlay-bg: rgb(255 255 255 / 0.16);
|
|
--gif-picker-gif-overlay-hover-bg: rgb(255 255 255 / 0.04);
|
|
}
|
|
|
|
:global(.theme-light) .gifPickerMain,
|
|
:global(.theme-light) .scrollArea {
|
|
background-color: var(--background-primary);
|
|
}
|
|
|
|
:global(.theme-light) .gridItem {
|
|
background-color: color-mix(in srgb, var(--background-primary) 90%, var(--background-secondary) 10%);
|
|
border-color: color-mix(in srgb, var(--background-modifier-accent) 60%, transparent);
|
|
}
|
|
|
|
:global(.theme-light) .gridItemCategoryTitleText {
|
|
color: var(--text-primary);
|
|
text-shadow: none;
|
|
}
|
|
|
|
:global(.theme-light) .gridItemIcon {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
:global(.theme-light) .gridItemFavorites .gridItemCategoryTitleText,
|
|
:global(.theme-light) .gridItemFavorites .gridItemIcon {
|
|
color: var(--text-on-brand-primary);
|
|
}
|
|
|
|
:global(.theme-light) .gridItemFavorites .gridItemCategoryTitleText {
|
|
text-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
:global(.theme-light) .suggestionTag {
|
|
background-color: var(--background-secondary);
|
|
}
|
|
|
|
:global(.theme-light) .gridItemFocused {
|
|
border-color: var(--brand-primary);
|
|
box-shadow: inset 0 0 0 0.125rem var(--brand-primary);
|
|
}
|
|
|
|
:global(.theme-light) .gridItemFavorites .gridItemBackdrop {
|
|
background-color: color-mix(in srgb, var(--brand-primary) 60%, transparent);
|
|
}
|
|
|
|
:global(.theme-light) .gridItemCategoryEmpty {
|
|
background-color: var(--brand-primary);
|
|
}
|
|
|
|
:global(.theme-light) .gridItemCategoryEmpty .gridItemBackdrop {
|
|
background-color: color-mix(in srgb, var(--brand-primary) 40%, transparent);
|
|
}
|
|
|
|
.searchBarContent {
|
|
display: flex;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
.favoriteButtonSpinner {
|
|
width: 1.125rem;
|
|
height: 1.125rem;
|
|
border-radius: 62.4375rem;
|
|
box-sizing: border-box;
|
|
|
|
border: 0.125rem solid color-mix(in srgb, var(--brand-primary-light) 20%, transparent);
|
|
border-top-color: var(--brand-primary-light);
|
|
border-right-color: var(--brand-primary-light);
|
|
|
|
animation: gifFavoriteSpinner 600ms linear infinite;
|
|
}
|
|
|
|
@keyframes gifFavoriteSpinner {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.gridItemGif:focus-within .hoverActionButtons,
|
|
.gridItemFavoritePending .hoverActionButtons,
|
|
.gridItemFocused .hoverActionButtons {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.gridItemCategory:focus-within .gridItemBackdrop,
|
|
.gridItemFocused.gridItemCategory .gridItemBackdrop {
|
|
background-color: var(--gif-picker-category-overlay-hover-bg);
|
|
}
|
|
|
|
.gridItemGifPicker:focus-within .gridItemBackdrop,
|
|
.gridItemFocused.gridItemGifPicker .gridItemBackdrop {
|
|
background-color: var(--gif-picker-gif-overlay-hover-bg);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.gridItemCategory:hover {
|
|
border-color: var(--brand-primary-light);
|
|
box-shadow: inset 0 0 0 0.0625rem var(--brand-primary-light);
|
|
}
|
|
|
|
.gridItemCategory:hover .gridItemBackdrop {
|
|
background-color: var(--gif-picker-category-overlay-hover-bg);
|
|
}
|
|
|
|
.gridItemGifPicker:hover {
|
|
border-color: var(--brand-primary-light);
|
|
box-shadow: inset 0 0 0 0.0625rem var(--brand-primary-light);
|
|
}
|
|
|
|
.gridItemGifPicker:hover .gridItemBackdrop {
|
|
background-color: var(--gif-picker-gif-overlay-hover-bg);
|
|
}
|
|
|
|
.gridItemFavorites:hover .gridItemBackdrop {
|
|
background-color: color-mix(in srgb, var(--brand-primary) 80%, transparent);
|
|
}
|
|
|
|
:global(.theme-light) .gridItemFavorites:hover .gridItemBackdrop {
|
|
background-color: color-mix(in srgb, var(--brand-primary) 80%, transparent);
|
|
}
|
|
|
|
.gridItemGif:hover .hoverActionButtons {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
@media (hover: none) {
|
|
.gridItemFocused {
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
}
|