mirror of
https://github.com/Ernous/TorrServerJellyfin.git
synced 2025-12-19 13:36:09 +05:00
94 lines
2.0 KiB
JavaScript
94 lines
2.0 KiB
JavaScript
import styled, { css } from 'styled-components'
|
|
|
|
export const AppWrapper = styled.div`
|
|
height: 100%;
|
|
background: #cbe8d9;
|
|
display: grid;
|
|
grid-template-columns: 60px 1fr;
|
|
grid-template-rows: 60px 1fr;
|
|
grid-template-areas:
|
|
'head head'
|
|
'side content';
|
|
`
|
|
|
|
export const CenteredGrid = styled.div`
|
|
height: 100%;
|
|
display: grid;
|
|
place-items: center;
|
|
`
|
|
|
|
export const AppHeader = styled.div`
|
|
${({ theme: { primary } }) => css`
|
|
background: ${primary};
|
|
color: #fff;
|
|
grid-area: head;
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
align-items: center;
|
|
grid-template-columns: repeat(2, max-content) 1fr;
|
|
box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
|
|
padding: 0 16px;
|
|
z-index: 3;
|
|
`}
|
|
`
|
|
export const AppSidebarStyle = styled.div`
|
|
${({ isDrawerOpen }) => css`
|
|
grid-area: side;
|
|
width: ${isDrawerOpen ? '400%' : '100%'};
|
|
z-index: 2;
|
|
overflow-x: hidden;
|
|
transition: width 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
|
|
border-right: 1px solid rgba(0, 0, 0, 0.12);
|
|
background: #575757;
|
|
color: #eee;
|
|
white-space: nowrap;
|
|
`}
|
|
`
|
|
export const TorrentListWrapper = styled.div`
|
|
grid-area: content;
|
|
padding: 20px;
|
|
overflow: auto;
|
|
|
|
display: grid;
|
|
place-content: start;
|
|
grid-template-columns: repeat(auto-fit, minmax(max-content, 570px));
|
|
gap: 20px;
|
|
|
|
@media (max-width: 1260px), (max-height: 500px) {
|
|
padding: 10px;
|
|
gap: 15px;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
`
|
|
|
|
export const LanguageSwitch = styled.div`
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
background: #56b887;
|
|
height: 35px;
|
|
width: 35px;
|
|
transition: all 0.2s;
|
|
font-weight: 600;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #fff;
|
|
|
|
:hover {
|
|
background: #4db380;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
height: 28px;
|
|
width: 28px;
|
|
font-size: 12px;
|
|
}
|
|
`
|