apex4x
Version:
The Comprehensive ARIA Development Suite
91 lines (77 loc) • 2.47 kB
CSS
/*--------------------------------------------------------------------
WHATSOCK AccDC
TECHNICAL STYLEGUIDE
2016-2020
-------------------------------------------------------------------- */
/*--------------------------------------------------------------------
CSS by Laurence Lewis October 2020
-------------------------------------------------------------------- */
/***************
Lets modernise this and use css variables to define the colours so we only have to define them once.
There are a lot of different colours used in the modules. We can review all the colours used and reduce the number by examining the root colours below.
If root color is --color-06: #c0294245;
Call 'background-color: var(--whatsock-red);
************/
:root {
/*common*/
--whatsock-red: #c13836;
--whatsock-blue: #63b7c2;
--whatsock-orange-main: #ffcc00;
--whatsock-orange-highlight: #fce7c7;
--whatsock-gray: #b8b7ab;
--whatsock-contrast-red: #cb4a48;
--whatsock-black: #2e3135;
--whatsockBeige: #f2d3a1;
--bodyText: #262626;
--elementBlack: #1f1f23;
--globalWhite: #ffffff;
--offWhite: #f7f7f7;
--apexDarkGreen: #006400;
/*Accordion*/
--acordDarkGreen: #24575b;
--acordLightGrey: #eeeeee;
--acordDarkGrey: #333333;
/*Buttons*/
--button-blue--light: #90ceff;
--button-blue-medium: #035f84;
--button-orange-dark: #7d2412;
--button-blueGrey: #286278;
--button-pink-dark: #49182e;
/*NAV*/
--navLinkBackground: #444a51;
/*Forms*/
--inputBorder: #808080;
--buttons-bar: #286278;
--resetBackground: #555555;
--mediumOrange: #ff6600;
/*Tablist*/
--tablist-black: #2e3135;
--tablist-brown: #5d1f2c;
--tablistDarkGrey: #333333;
/*Listbox*/
--listbox-lightGrey: #e0e0e0;
--listbox-darkGrey: #333333;
--listbox-limeGreen: #80ff00;
--listbox-limeBlue: #92dbf6;
/*Comboboxes*/
--combobox-lightGrey: #eeeeee;
--combobox-lightGrey2: #e0e0e0;
--combobox-darkGrey: #333333;
--combobox-midGrey: #777777;
--combobox-red: #c1384d;
/*datepickers*/
--datepicker-pink: #db7093;
--datepicker-dayInMonth: #e6e6e6;
--datepicker-day: #e2a037;
--datepicker-darkGrey: #49182e;
--datepicker-lightGrey: #cccccc;
--datepicker-lmGrey: #bdbdbd;
--datepicker-mmGrey: #c2c2c2;
--datepicker-dGrey: #3d4043;
--datepicker-codeBGrey: #e4e4e4;
/*Tooltips*/
--tooltip-boxshadow: #868686;
/*Footnotes*/
--aqua-light: #bae8d4;
--footnote-grey: #999999;
}