60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
|
import { DomTools } from './domtools.classes.domtools';
|
||
|
|
|
||
|
|
import { css, unsafeCSS } from 'lit';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* changes scrollbar styles to be consistent across OS borders
|
||
|
|
*/
|
||
|
|
export const scrollBarStyles: string = (() => {
|
||
|
|
const returnStyles =
|
||
|
|
navigator.userAgent.indexOf('Mac OS X') !== -1
|
||
|
|
? css`
|
||
|
|
/* width */
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Track */
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background: #111;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Handle */
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background: #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Handle on hover */
|
||
|
|
::-webkit-scrollbar-thumb:hover {
|
||
|
|
background: #777;
|
||
|
|
}
|
||
|
|
`.cssText
|
||
|
|
: ``;
|
||
|
|
return returnStyles;
|
||
|
|
})();
|
||
|
|
|
||
|
|
export const globalBaseStyles: string = css`
|
||
|
|
/* global material font */
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Material Icons';
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 400;
|
||
|
|
src: url(https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2)
|
||
|
|
format('woff2');
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Roboto Font */
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400');
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;300;400');
|
||
|
|
|
||
|
|
/* global body styles */
|
||
|
|
body {
|
||
|
|
margin: 0px;
|
||
|
|
font-family: 'Roboto', sans-serif;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* scroll bar styles */
|
||
|
|
${unsafeCSS(scrollBarStyles)}
|
||
|
|
`.cssText;
|