vega-frontend-monorepo/apps/trading/pages/styles.css

212 lines
5.7 KiB
CSS
Raw Normal View History

@import 'ag-grid-community/styles/ag-grid.css';
@import 'ag-grid-community/styles/ag-theme-balham.css';
2022-02-23 14:49:24 +00:00
@tailwind base;
@tailwind components;
@tailwind utilities;
/**
* TAILWIND HELPERS
*/
html,
body,
#__next {
@apply h-full;
}
.text-default {
@apply text-vega-clight-50 dark:text-vega-cdark-50;
}
.text-secondary {
@apply text-vega-clight-100 dark:text-vega-cdark-100;
}
.text-muted {
@apply text-vega-clight-200 dark:text-vega-cdark-200;
}
.border-default {
@apply border-vega-clight-600 dark:border-vega-cdark-600;
}
/**
* ALLOTMENT
*/
feat(#927) design update (#1201) * feat: create new buttons * feat: update anchor and button link styles * feat: add icon support * feat: fix full width with icon * feat: convert invalid button props to use new props * feat: tidy up explorer * feat: more tidy up for token and trading * feat: move styles to css file using @apply * chore: remove css with @apply as its not working in apps * fix: deposit form button * feat: use default tailwind config, start on forms * feat: fixup trade grid styles * feat: form styles * feat: styles for order book and tables * feat: make key management use dropdown * feat: update various components * feat: tidy up wallet section * feat: token tidy up * feat: token governance styles * Feat/927: Dialog styling * feat: token styles * feat: add font familys * feat: change token borders to be softer * feat: console-lite changes to support new theme * Feat/927: Centered key-value-table.tsx spacing * Feat/927: Tweak to Explorer site border colours to be inline with trading * Feat/927: Tweak to Explorer header * Feat/927: Theme switcher icon colours * Feat/927: Fix for Explorer block data styling * feat: fix tests, add status footer and change logos * feat: render both theme icons to avoid hydration error * chore: run migrations for project * fix: tailwindconfig build to work with new next version * feat: use document page for next as per documentation * chore: update build targets to use development mode when serving * fix: console-lite default text colors * chore: fix tooltip text break, change submit button * feat: adjust console-lite styles to work with tabs * feat: add bespoke dialog for console-lite market-selector * Feat/927: Theme switcher now has prop for fixed bg colour * Feat/927: Font size and border radius tweak for toggles * Feat/927: Cleaned up trade-grid.tsx spacing * feat: responsive styles for market header and nav * feat: update designs for market popover * fix: nav active state * chore: allow classname to be passed to button * Feat/927: Fix Token width on desktop (was overflowing) * Feat/927: Fix token header h1 from wrapping * Feat/927: Tweak for claim-flow.tsx * fix: connect button test * Feat/927: Proposals list styling polish * Feat/927: key-value-table.tsx spacing tweak * feat: add copy button to kp dropdown * Feat/927: Removing old theme params and uses * Feat/927: Removing old theme params and uses, documenting the now used otb sizes * feat: use key val table in asset dialog * feat: align tooltip styles * fix: orderbook grid alignment * chore: linting * fix: dialog sizing in medium mode, node switcher styles * chore: remove unused color classes * feat: update radio and checkbox designs * feat: updates to storybook * feat: update design system stories * chore: stories update * chore: rename resize panels and tidy * feat: fix checkbox tick * fix: add poyfills for jest in trading test setup * chore: fix checkbox tests * chore: fix tests * chore: fix tests again * chore: revert token wallet name test * fix: tooltip tests on console-lite * fix: wallet dropdown test Co-authored-by: sam-keen <samuel.kleinmann@gmail.com>
2022-08-31 04:35:46 +00:00
html {
--focus-border: theme(colors.vega.pink.500);
--pennant-color-danger: theme(colors.vega.pink.500);
}
feat(#927) design update (#1201) * feat: create new buttons * feat: update anchor and button link styles * feat: add icon support * feat: fix full width with icon * feat: convert invalid button props to use new props * feat: tidy up explorer * feat: more tidy up for token and trading * feat: move styles to css file using @apply * chore: remove css with @apply as its not working in apps * fix: deposit form button * feat: use default tailwind config, start on forms * feat: fixup trade grid styles * feat: form styles * feat: styles for order book and tables * feat: make key management use dropdown * feat: update various components * feat: tidy up wallet section * feat: token tidy up * feat: token governance styles * Feat/927: Dialog styling * feat: token styles * feat: add font familys * feat: change token borders to be softer * feat: console-lite changes to support new theme * Feat/927: Centered key-value-table.tsx spacing * Feat/927: Tweak to Explorer site border colours to be inline with trading * Feat/927: Tweak to Explorer header * Feat/927: Theme switcher icon colours * Feat/927: Fix for Explorer block data styling * feat: fix tests, add status footer and change logos * feat: render both theme icons to avoid hydration error * chore: run migrations for project * fix: tailwindconfig build to work with new next version * feat: use document page for next as per documentation * chore: update build targets to use development mode when serving * fix: console-lite default text colors * chore: fix tooltip text break, change submit button * feat: adjust console-lite styles to work with tabs * feat: add bespoke dialog for console-lite market-selector * Feat/927: Theme switcher now has prop for fixed bg colour * Feat/927: Font size and border radius tweak for toggles * Feat/927: Cleaned up trade-grid.tsx spacing * feat: responsive styles for market header and nav * feat: update designs for market popover * fix: nav active state * chore: allow classname to be passed to button * Feat/927: Fix Token width on desktop (was overflowing) * Feat/927: Fix token header h1 from wrapping * Feat/927: Tweak for claim-flow.tsx * fix: connect button test * Feat/927: Proposals list styling polish * Feat/927: key-value-table.tsx spacing tweak * feat: add copy button to kp dropdown * Feat/927: Removing old theme params and uses * Feat/927: Removing old theme params and uses, documenting the now used otb sizes * feat: use key val table in asset dialog * feat: align tooltip styles * fix: orderbook grid alignment * chore: linting * fix: dialog sizing in medium mode, node switcher styles * chore: remove unused color classes * feat: update radio and checkbox designs * feat: updates to storybook * feat: update design system stories * chore: stories update * chore: rename resize panels and tidy * feat: fix checkbox tick * fix: add poyfills for jest in trading test setup * chore: fix checkbox tests * chore: fix tests * chore: fix tests again * chore: revert token wallet name test * fix: tooltip tests on console-lite * fix: wallet dropdown test Co-authored-by: sam-keen <samuel.kleinmann@gmail.com>
2022-08-31 04:35:46 +00:00
html.dark {
--focus-border: theme(colors.vega.yellow.500);
}
/* hide pane separation border, we leave it blank so border is applied within a padded area */
.split-view-view::before {
display: none;
}
/* re show separator border within chart */
.plot-container__chart .split-view-view::before {
display: block;
}
/**
* PENNANT
*/
html [data-theme='dark'],
html [data-theme='light'] {
/* sell candles only use stroke as the candle is solid (without border) */
--pennant-color-sell-stroke: theme(colors.market.red.DEFAULT);
/* studies */
--pennant-color-eldar-ray-bear-power: theme(colors.market.red.DEFAULT);
--pennant-color-eldar-ray-bull-power: theme(colors.market.green.600);
--pennant-color-macd-divergence-buy: theme(colors.market.green.600);
--pennant-color-macd-divergence-sell: theme(colors.market.red.DEFAULT);
--pennant-color-macd-signal: theme(colors.vega.blue.DEFAULT);
--pennant-color-macd-macd: theme(colors.vega.yellow.500);
--pennant-color-volume-sell: theme(colors.market.red.DEFAULT);
}
html [data-theme='light'] {
--separator-border: theme(colors.vega.clight.400);
--pennant-background-surface-color: theme(colors.vega.clight.900);
/* candles */
--pennant-color-buy-fill: theme(colors.market.green.DEFAULT);
--pennant-color-buy-stroke: theme(colors.market.green.600);
/* sell uses stroke for fill and stroke */
--pennant-color-sell-stroke: theme(colors.market.red.DEFAULT);
/* depth chart */
--pennant-color-depth-buy-fill: theme(colors.market.green.DEFAULT);
--pennant-color-depth-buy-stroke: theme(colors.market.green.600);
--pennant-color-depth-sell-fill: theme(colors.market.red.DEFAULT);
--pennant-color-depth-sell-stroke: theme(colors.market.red.650);
--pennant-color-volume-buy: theme(colors.market.green.300);
--pennant-color-volume-sell: theme(colors.market.red.300);
}
html [data-theme='dark'] {
--separator-border: theme(colors.vega.cdark.400);
--pennant-background-surface-color: theme('colors.vega.cdark.900');
/* candles */
--pennant-color-buy-fill: theme(colors.market.green.600);
--pennant-color-buy-stroke: theme(colors.market.green.DEFAULT);
/* sell uses stroke for fill and stroke */
--pennant-color-sell-stroke: theme(colors.market.red.DEFAULT);
/* depth chart */
--pennant-color-depth-buy-fill: theme(colors.market.green.600);
--pennant-color-depth-buy-stroke: theme(colors.market.green.DEFAULT);
--pennant-color-depth-sell-fill: theme(colors.market.red.650);
--pennant-color-depth-sell-stroke: theme(colors.market.red.DEFAULT);
--pennant-color-volume-buy: theme(colors.market.green.600);
--pennant-color-volume-sell: theme(colors.market.red.650);
}
/**
* AG GRID
*
* - Do not edit without updating other global stylesheets for each app
*/
.vega-ag-grid .ag-root-wrapper {
border: solid 0px;
}
.vega-ag-grid .ag-react-container {
overflow: hidden;
text-overflow: ellipsis;
}
.vega-ag-grid .ag-cell,
.vega-ag-grid .ag-full-width-row .ag-cell-wrapper.ag-row-group {
line-height: calc(min(var(--ag-line-height, 26px), 26px) - 4px);
}
.vega-ag-grid .ag-row,
.vega-ag-grid .ag-cell {
border-width: 0;
}
.vega-ag-grid .ag-cell .ag-cell-wrapper {
height: 100%;
}
.vega-ag-grid .ag-header-row {
@apply font-alpha font-normal;
}
/* Light variables */
.ag-theme-balham {
--ag-grid-size: 2px; /* Used for compactness */
--ag-row-height: 36px;
--ag-header-height: 36px;
--ag-background-color: theme(colors.white);
--ag-border-color: theme(colors.vega.clight.600);
--ag-header-background-color: theme(colors.vega.clight.700);
--ag-odd-row-background-color: theme(colors.white);
--ag-header-column-separator-color: theme(colors.vega.clight.500);
--ag-row-border-color: theme(colors.vega.clight.600);
--ag-row-hover-color: theme(colors.vega.clight.800);
--ag-modal-overlay-background-color: rgb(244 244 244 / 50%);
}
/* Dark variables */
.ag-theme-balham-dark {
--ag-grid-size: 2px; /* Used for compactness */
--ag-row-height: 36px;
--ag-header-height: 36px;
--ag-background-color: theme(colors.vega.cdark.900);
--ag-border-color: theme(colors.vega.cdark.600);
--ag-header-background-color: theme(colors.vega.cdark.700);
--ag-odd-row-background-color: theme(colors.vega.cdark.900);
--ag-header-column-separator-color: theme(colors.vega.cdark.500);
--ag-row-border-color: theme(colors.vega.cdark.600);
--ag-row-hover-color: theme(colors.vega.cdark.800);
--ag-modal-overlay-background-color: rgb(9 11 16 / 50%);
}
.ag-theme-balham-dark .ag-row.no-hover,
.ag-theme-balham-dark .ag-row.no-hover:hover,
.ag-theme-balham .ag-row.no-hover,
.ag-theme-balham .ag-row.no-hover:hover {
background: var(--ag-background-color);
}
/**
* REACT VIRTUALIZED list
*/
.vega-scrollbar {
/* Works on Firefox */
scrollbar-width: thin;
scrollbar-color: #999 #333;
}
/* Works on Chrome, Edge, and Safari */
.vega-scrollbar::-webkit-scrollbar {
width: 6px;
background-color: #999;
}
.vega-scrollbar::-webkit-scrollbar-thumb {
width: 6px;
background-color: #333;
}
.vega-scrollbar::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
background-color: #999;
}