4fbc208b41
* add .DS_Store to .gitignore * create header component * add icons image file to the project * add new theme variables * insert header component into Viewer * add web fonts * create dropdown component * update header styles * import dropdown with custom list into header component * reindent index * Update index.html * create json file for header menu settings * import header menu * header prefix
40 lines
1.2 KiB
CSS
40 lines
1.2 KiB
CSS
/* "Tide" theme */
|
|
/* TODO:
|
|
- Convert the other themes to CSS Variables
|
|
- Allow user to set default CSS theme in JS config
|
|
- Export the themes as identical JS objects
|
|
- For theme switcher, update root-level CSS properties via JS (https://medium.com/@_bengarrison/accessing-and-modifying-css-variables-with-javascript-2ccb735bbff0)
|
|
*/
|
|
|
|
:root {
|
|
/* Interface UI Colors */
|
|
--default-color: #9CCEF9;
|
|
--hover-color: #ffffff;
|
|
--active-color: #20A5D6;
|
|
--ui-border-color: #44626F;
|
|
--ui-border-color-dark: #3C5D80;
|
|
--ui-border-color-active: #00a4d9;
|
|
--primary-background-color: #000000;
|
|
--box-background-color: #3E5975;
|
|
|
|
/* Common palette */
|
|
--ui-yellow: #E29E4A;
|
|
--ui-sky-blue: #6FBDE2;
|
|
/* State palette */
|
|
--ui-state-error: #FFCCCC;
|
|
--ui-state-error-border: #993333;
|
|
--ui-state-error-text: #661111;
|
|
--ui-gray-light: #516873;
|
|
--ui-gray: #263340;
|
|
--ui-gray-dark: #16202B;
|
|
--ui-gray-darker: #151A1F;
|
|
--ui-gray-darkest: #14202A;
|
|
|
|
/* Text Colors */
|
|
--text-color-active: #000000;
|
|
--text-primary-color: #ffffff;
|
|
--text-secondary-color: #91b9cd;
|
|
--large-numbers-color: #6fbde2;
|
|
--text-disabled-color: #878787;
|
|
}
|