Page MenuHomePhabricator
Differential D19604 Diff 58919 cashtab/src/components/Header/styled.ts

Changeset View

Standalone View

View Options

cashtab/src/components/Header/styled.ts

// Copyright (c) 2024 The Bitcoin developers // Copyright (c) 2024 The Bitcoin developers
// Distributed under the MIT software license, see the accompanying // Distributed under the MIT software license, see the accompanying
// file COPYING or http://www.opensource.org/licenses/mit-license.php. // file COPYING or http://www.opensource.org/licenses/mit-license.php.
import styled from 'styled-components'; import styled from 'styled-components';
export const HeaderCtn = styled.div` export const HeaderCtn = styled.div`
display: flex; display: flex;
width: 100%; width: 100%;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
padding: 20px; padding: 20px;
background: ${props => props.theme.primaryBackground}; padding-bottom: 10px;
border-bottom: 1px solid ${props => props.theme.border}; background-color: ${props => props.theme.primaryBackground}1A;
backdrop-filter: blur(35px);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 99; z-index: 99;
@media (max-width: 1100px) { @media (max-width: 1100px) {
position: relative; position: relative;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
padding: 10px; padding: 10px 10px 5px 10px;
position: relative; position: relative;
/* Solid background on mobile so content doesn't show through (fixes Android overlap) */
background-color: ${props => props.theme.primaryBackground};
backdrop-filter: none;
} }
`; `;
export const MobileHeader = styled.div` export const MobileHeader = styled.div`
display: none; display: none;
@media (max-width: 768px) { @media (max-width: 768px) {
display: flex; display: flex;
align-items: center; align-items: center;
Show All 37 Lines @media (max-width: 1100px) {
margin-left: 10px; margin-left: 10px;
} }
`; `;
export const WalletSelectCtn = styled.div` export const WalletSelectCtn = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
height: 34px; height: 34px;
gap: 5px; gap: 15px;
@media (max-width: 768px) { @media (max-width: 768px) {
height: 30px; height: 32px;
width: 100%; width: 100%;
flex-direction: row-reverse;
justify-content: space-between;
margin: 2px 0 2px 0;
} }
`; `;
export const WalletDropdown = styled.select` export const WalletDropdown = styled.select`
width: 180px; width: 180px;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
font-size: var(--text-base); font-size: var(--text-base);
line-height: var(--text-base--line-height); line-height: var(--text-base--line-height);
padding: 0px 10px; padding: 0 36px 0 14px;
color: ${props => props.theme.secondaryText}; color: ${props => props.theme.primaryText};
font-weight: 600;
border: none; border: none;
border-radius: 5px; border-radius: 100px;
background-color: ${props => props.theme.secondaryBackground}; background-color: rgba(255, 255, 255, 0.14);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 10px 6px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
text-overflow: ellipsis; text-overflow: ellipsis;
text-decoration: none !important; text-decoration: none !important;
&:focus-visible { &:focus-visible {
outline: none; outline: none;
text-decoration: underline; text-decoration: underline;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
width: 100%; font-size: var(--text-sm);
line-height: var(--text-sm--line-height);
} }
`; `;
export const WalletOption = styled.option` export const WalletOption = styled.option`
text-align: left; text-align: left;
background-color: ${props => props.theme.secondaryBackground}; background-color: ${props => props.theme.secondaryBackground};
:hover { :hover {
color: ${props => props.theme.accent}; color: ${props => props.theme.accent};
background-color: ${props => props.theme.primaryBackground}; background-color: ${props => props.theme.primaryBackground};
Show All 33 Linesexport const CardWrapper = styled.div`
width: 100%; width: 100%;
@media (max-width: 1100px) { @media (max-width: 1100px) {
overflow: hidden; overflow: hidden;
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
width: 40px; width: 20px;
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
background: linear-gradient( background: linear-gradient(
to left, to left,
rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4),
transparent transparent
); );
} }
} }
`; `;
export const BalanceXec = styled.div` export const BalanceXec = styled.div`
display: flex; display: flex;
Show All 30 Lines
export const BalanceCard = styled.div<{ export const BalanceCard = styled.div<{
tokenLabel?: string; tokenLabel?: string;
}>` }>`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
width: 100%; width: 100%;
border-radius: 5px; border-radius: 10px;
overflow-wrap: break-word; overflow-wrap: break-word;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 14px;
text-align: left; text-align: left;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
color: ${props => props.theme.primaryText}; color: ${props => props.theme.primaryText};
background: linear-gradient( background: ${props =>
to right,
${props =>
(props.tokenLabel === 'FIRMA' (props.tokenLabel === 'FIRMA'
? props.theme.firmaAccent ? props.theme.firmaAccent
: props.tokenLabel === 'XECX' : props.tokenLabel === 'XECX'
? props.theme.secondaryAccent ? props.theme.secondaryAccent
: props.theme.accent) + '4D'}, : props.theme.accent) + '4D'};
${props => props.theme.secondaryBackground}
);
@media (max-width: 1100px) { @media (max-width: 1100px) {
padding: 6px 10px; padding: 10px 10px;
width: 88%; width: 88%;
flex-shrink: 0; flex-shrink: 0;
scroll-snap-align: start; scroll-snap-align: start;
} }
`; `;
export const BackgroundImage = styled.img` export const BackgroundImage = styled.img`
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
right: 10px; right: 10px;
width: 80px; width: 80px;
opacity: 0.1; opacity: 0.1;
@media (max-width: 1100px) { @media (max-width: 1100px) {
right: 5px; right: 5px;
width: 35px; width: 35px;
} }
`; `;
export const BalanceTitle = styled.div<{ export const BalanceTitle = styled.div<{
tokenLabel?: string; tokenLabel?: string;
}>` }>`
width: 100%; width: 100%;
margin-bottom: 3px; margin-bottom: 6px;
font-size: var(--text-sm); font-size: var(--text-sm);
color: ${props => display: flex;
props.tokenLabel === 'FIRMA' align-items: center;
? props.theme.firmaAccent gap: 4px;
: props.tokenLabel === 'XECX' svg {
? props.theme.secondaryAccent width: auto;
: props.theme.accent}; height: 12px;
fill: currentColor;
}
@media (max-width: 1100px) { @media (max-width: 1100px) {
margin-bottom: 2px; margin-bottom: 2px;
font-size: 12px; font-size: 12px;
} }
`; `;
export const BalanceRow = styled.div<{ export const BalanceRow = styled.div<{
hideBalance: boolean; hideBalance: boolean;
tokenLabel: string; tokenLabel: string;
}>` }>`
font-weight: 600; font-weight: 600;
font-size: var(--text-xl); font-size: var(--text-2xl);
line-height: 1.2em; line-height: 1em;
color: ${props => color: ${props =>
props.hideBalance ? 'transparent' : props.theme.primaryText}; props.hideBalance ? 'transparent' : props.theme.primaryText};
text-shadow: ${props => text-shadow: ${props =>
props.hideBalance ? `0 0 15px ${props.theme.primaryText}` : 'none'}; props.hideBalance ? `0 0 15px ${props.theme.primaryText}` : 'none'};
@media (max-width: 768px) { @media (max-width: 768px) {
font-size: var(--text-lg); font-size: var(--text-lg);
} }
a { a {
color: ${props => props.theme.primaryText}; color: ${props => props.theme.primaryText};
:hover { :hover {
color: ${props => color: ${props => props.theme.accent};
props.tokenLabel === 'FIRMA'
? props.theme.firmaAccent
: props.tokenLabel === 'XECX'
? props.theme.secondaryAccent
: props.theme.accent};
text-decoration: underline; text-decoration: underline;
} }
} }
`; `;
export const BalanceFiat = styled.div<{ balanceVisible: boolean }>` export const BalanceFiat = styled.div<{ balanceVisible: boolean }>`
font-size: var(--text-base); font-size: var(--text-base);
line-height: var(--text-base--line-height); line-height: var(--text-base--line-height);
color: ${props => color: ${props =>
Show All 12 Lines