250 lines
6.3 KiB
CSS
250 lines
6.3 KiB
CSS
@import 'ag-grid-community/styles/ag-grid.css';
|
|
@import 'ag-grid-community/styles/ag-theme-balham.css';
|
|
|
|
/** Load AlphaLyrae font */
|
|
@font-face {
|
|
font-family: AlphaLyrae;
|
|
src: url('/AlphaLyrae.woff2') format('woff2');
|
|
}
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/**
|
|
* TAILWIND HELPERS
|
|
*/
|
|
|
|
html,
|
|
body,
|
|
#__next {
|
|
@apply h-full;
|
|
}
|
|
|
|
.font-mono {
|
|
@apply tracking-tighter;
|
|
}
|
|
|
|
.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
|
|
*/
|
|
|
|
html {
|
|
--focus-border: theme(colors.vega.pink.500);
|
|
--pennant-color-danger: theme(colors.vega.pink.500);
|
|
}
|
|
|
|
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'] {
|
|
/* fonts */
|
|
--pennant-font-family-base: theme(fontFamily.alpha);
|
|
--pennant-font-family-monospace: theme(fontFamily.mono);
|
|
|
|
/* 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);
|
|
|
|
/* reduce space between candles */
|
|
--pennant-candlestick-inner-padding: 0.25;
|
|
}
|
|
|
|
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.DEFAULT);
|
|
--pennant-color-volume-sell: theme(colors.market.red.DEFAULT);
|
|
}
|
|
|
|
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.DEFAULT);
|
|
}
|
|
|
|
/**
|
|
* 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-normal font-alpha;
|
|
}
|
|
|
|
.ag-theme-balham,
|
|
.ag-theme-balham-dark {
|
|
--ag-grid-size: 3px; /* Used for compactness */
|
|
--ag-row-height: 36px;
|
|
--ag-header-height: 28px;
|
|
}
|
|
|
|
@media (min-width: theme(screens.xxl)) {
|
|
.ag-theme-balham,
|
|
.ag-theme-balham-dark {
|
|
--ag-header-height: 36px;
|
|
}
|
|
}
|
|
|
|
/* Light variables */
|
|
.ag-theme-balham {
|
|
--ag-background-color: theme(colors.vega.clight.900);
|
|
--ag-border-color: theme(colors.vega.clight.600);
|
|
--ag-header-background-color: theme(colors.vega.clight.700);
|
|
--ag-odd-row-background-color: transparent;
|
|
--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-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: transparent;
|
|
--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;
|
|
}
|
|
|
|
/* Chrome, Safari, Edge, Opera */
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Firefox */
|
|
input[type='number'] {
|
|
-moz-appearance: textfield;
|
|
}
|