2020-10-30 23:41:44 +13:00
|
|
|
html {
|
2020-10-30 09:42:34 +13:00
|
|
|
/* Light theme */
|
|
|
|
|
--background: #FFFFFF;
|
2020-05-23 20:49:25 +12:00
|
|
|
--ink: #393C44;
|
2020-10-30 23:41:44 +13:00
|
|
|
}
|
|
|
|
|
html.dark {
|
2020-10-30 09:42:34 +13:00
|
|
|
/* Dark theme */
|
2020-10-30 23:41:44 +13:00
|
|
|
--theme-hue: 208;
|
|
|
|
|
--theme-saturation: 9%;
|
|
|
|
|
--theme-brightness: 16%;
|
|
|
|
|
--ink: hsl(var(--theme-hue), var(--theme-saturation), 90%);
|
|
|
|
|
--background: hsl(var(--theme-hue), var(--theme-saturation), var(--theme-brightness));
|
|
|
|
|
--grey-1: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 2%));
|
|
|
|
|
--grey-2: hsl(var(--theme-hue), calc(var(--theme-saturation) + 1%), calc(var(--theme-brightness) + 4%));
|
|
|
|
|
--grey-3: hsl(var(--theme-hue), var(--theme-saturation),calc(var(--theme-brightness) + 7%));
|
|
|
|
|
--grey-4: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 10%));
|
|
|
|
|
--grey-5: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 25%));
|
|
|
|
|
--grey-6: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 30%));
|
|
|
|
|
--grey-7: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 55%));
|
|
|
|
|
--grey-8: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 60%));
|
|
|
|
|
--grey-9: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 70%));
|
2019-07-13 21:35:57 +12:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html, body {
|
2020-10-30 09:42:34 +13:00
|
|
|
font-family: var(--font-sans);
|
2020-06-23 19:19:16 +12:00
|
|
|
color: var(--ink);
|
2019-07-13 21:35:57 +12:00
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
2020-06-23 19:19:16 +12:00
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
2020-11-03 01:14:16 +13:00
|
|
|
background-color: var(--background);
|
2019-07-13 21:35:57 +12:00
|
|
|
}
|
|
|
|
|
|
2020-05-03 02:29:10 +12:00
|
|
|
#app {
|
|
|
|
|
height: 100%;
|
2020-06-02 09:04:32 +12:00
|
|
|
box-sizing: border-box;
|
|
|
|
|
overflow-y: hidden;
|
2020-05-03 02:29:10 +12:00
|
|
|
}
|
|
|
|
|
|
2020-03-13 03:23:29 +13:00
|
|
|
.hoverable:hover {
|
|
|
|
|
cursor: pointer;
|
2020-08-23 08:34:46 +12:00
|
|
|
}
|
|
|
|
|
|
2020-08-23 20:31:39 +12:00
|
|
|
/* Top bottom spacing */
|
2020-08-23 08:34:46 +12:00
|
|
|
.bb-margin-m {
|
|
|
|
|
margin-bottom: var(--spacing-m);
|
|
|
|
|
}
|
|
|
|
|
* + .bb-margin-m {
|
|
|
|
|
margin-top: var(--spacing-m);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bb-margin-xl {
|
|
|
|
|
margin-bottom: var(--spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
* + .bb-margin-xl {
|
|
|
|
|
margin-top: var(--spacing-xl);
|
2020-08-23 20:44:30 +12:00
|
|
|
}
|
