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

154 lines
4.5 KiB
CSS

@import 'ag-grid-community/styles/ag-grid.css';
@import 'ag-grid-community/styles/ag-theme-balham.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body,
#__next {
@apply h-full;
}
/* Styles for allotment */
html {
--focus-border: theme('colors.vega.pink.500');
--separator-border: theme('colors.vega.light.200');
--pennant-color-danger: theme('colors.vega.pink.500');
}
html.dark {
--focus-border: theme('colors.vega.yellow.500');
--separator-border: theme('colors.vega.dark.200');
}
.border-default {
@apply border-vega-light-200 dark:border-vega-dark-200;
}
/* 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.500');
/* studies */
--pennant-color-eldar-ray-bear-power: theme('colors.market.red.500');
--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.500');
--pennant-color-macd-signal: theme('colors.vega.blue.500');
--pennant-color-macd-macd: theme('colors.vega.yellow.500');
--pennant-color-volume-sell: theme('colors.market.red.500');
}
html [data-theme='light'] {
/* candles */
--pennant-color-buy-fill: theme(colors.market.green.500);
--pennant-color-buy-stroke: theme(colors.market.green.600);
/* sell uses stroke for fill and stroke */
--pennant-color-sell-stroke: theme(colors.market.red.500);
/* depth chart */
--pennant-color-depth-buy-fill: theme(colors.market.green.500);
--pennant-color-depth-buy-stroke: theme(colors.market.green.600);
--pennant-color-depth-sell-fill: theme(colors.market.red.500);
--pennant-color-depth-sell-stroke: theme(colors.market.red.600);
--pennant-color-volume-buy: theme(colors.market.green.400);
--pennant-color-volume-sell: theme(colors.market.red.400);
}
html [data-theme='dark'] {
/* candles */
--pennant-color-buy-fill: theme(colors.market.green.600);
--pennant-color-buy-stroke: theme(colors.market.green.500);
/* sell uses stroke for fill and stroke */
--pennant-color-sell-stroke: theme(colors.market.red.500);
/* depth chart */
--pennant-color-depth-buy-fill: theme(colors.market.green.600);
--pennant-color-depth-buy-stroke: theme(colors.market.green.500);
--pennant-color-depth-sell-fill: theme(colors.market.red.600);
--pennant-color-depth-sell-stroke: theme(colors.market.red.500);
--pennant-color-volume-buy: theme(colors.market.green.600);
--pennant-color-volume-sell: theme(colors.market.red.600);
}
/* 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;
}
/* Light variables */
.ag-theme-balham {
--ag-background-color: theme(colors.white);
--ag-border-color: theme(colors.neutral[300]);
--ag-header-background-color: theme(colors.white);
--ag-odd-row-background-color: theme(colors.white);
--ag-header-column-separator-color: theme(colors.neutral[300]);
--ag-row-border-color: theme(colors.white);
--ag-row-hover-color: theme(colors.neutral[100]);
}
/* Dark variables */
.ag-theme-balham-dark {
--ag-background-color: theme(colors.black);
--ag-border-color: theme(colors.neutral[700]);
--ag-header-background-color: theme(colors.black);
--ag-odd-row-background-color: theme(colors.black);
--ag-header-column-separator-color: theme(colors.neutral[600]);
--ag-row-border-color: theme(colors.black);
--ag-row-hover-color: theme(colors.neutral[800]);
}
.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);
}
.virtualized-list {
/* Works on Firefox */
scrollbar-width: thin;
scrollbar-color: #999 #333;
}
/* Works on Chrome, Edge, and Safari */
.virtualized-list::-webkit-scrollbar {
width: 6px;
background-color: #999;
}
.virtualized-list::-webkit-scrollbar-thumb {
width: 6px;
background-color: #333;
}
.virtualized-list::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
background-color: #999;
}