Gitiles
Code Review Sign In
git.clicks.codes / Clicks / clicks.codes / 30307e6b598b3d57f43c291abc48c6940e90934d / . / styles / globals.css
blob: a9601064b9f34050a5925c5b3d98693f6451921b [file] [log] [blame]
pineafanad183522021-10-24 09:24:59 +0100[diff] [blame]1@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
pineafan4f9cf4d2021-10-24 09:02:30 +0100[diff] [blame]2
3
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]4html, body {
Samuel Shuert016ea022021-09-01 16:17:24 -0500[diff] [blame]5 padding: 0;
6 margin: 0;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]7
pineafandf39fd42021-09-04 16:05:27 +0100[diff] [blame]8 overflow-x: hidden;
9}
10
11html {
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]12 --card-background-color: rgba(255, 255, 255, 0.65);
13 --card-text-color: #424242;
14 --card-overlay-color: rgba(0, 0, 0, 0);
15 --card-filter: drop-shadow(0px 0px 5px #00000080);
16 --page-background: #ffffff;
pineafand494b852021-09-03 19:49:49 +0100[diff] [blame]17 --link-color: #6576CC;
18 --hint-color: #f1f1f1;
pineafan30307e62021-11-02 21:09:43 +0000[diff] [blame^]19 --card-border-color: #C4C4C4;
pineafan4f9cf4d2021-10-24 09:02:30 +0100[diff] [blame]20
pineafandf39fd42021-09-04 16:05:27 +0100[diff] [blame]21 background-color: var(--page-background);
22}
23
24@media (prefers-color-scheme: dark) {
25 html {
26 --card-background-color: rgba(0, 0, 0, 0.65);
27 --card-text-color: #ffffff;
28 --card-overlay-filter: brightness(0.75);
29 --card-filter: drop-shadow(0px 0px 5px #42424280);
30 --page-background: #252525;
31 --link-color: #6576CC;
32 --hint-color: #101010;
pineafan30307e62021-11-02 21:09:43 +0000[diff] [blame^]33 --card-border-color: #424242;
pineafandf39fd42021-09-04 16:05:27 +0100[diff] [blame]34 }
35}
36
37
38.light {
39 --card-background-color: rgba(255, 255, 255, 0.65);
40 --card-text-color: #424242;
41 --card-overlay-color: rgba(0, 0, 0, 0);
42 --card-filter: drop-shadow(0px 0px 5px #00000080);
43 --page-background: #ffffff;
44 --link-color: #6576CC;
45 --hint-color: #f1f1f1;
pineafan30307e62021-11-02 21:09:43 +0000[diff] [blame^]46 --card-border-color: #C4C4C4;
pineafandf39fd42021-09-04 16:05:27 +0100[diff] [blame]47}
48
49.dark {
50 --card-background-color: rgba(0, 0, 0, 0.65);
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]51 --card-text-color: #ffffff;
52 --card-overlay-filter: brightness(0.75);
53 --card-filter: drop-shadow(0px 0px 5px #42424280);
pineafand494b852021-09-03 19:49:49 +0100[diff] [blame]54 --page-background: #252525;
55 --link-color: #6576CC;
pineafandf39fd42021-09-04 16:05:27 +0100[diff] [blame]56 --hint-color: #101010;
pineafan30307e62021-11-02 21:09:43 +0000[diff] [blame^]57 --card-border-color: #424242;
Samuel Shuert016ea022021-09-01 16:17:24 -0500[diff] [blame]58}
59
pineafandf39fd42021-09-04 16:05:27 +0100[diff] [blame]60
Samuel Shuert016ea022021-09-01 16:17:24 -0500[diff] [blame]61a {
Samuel Shuert016ea022021-09-01 16:17:24 -0500[diff] [blame]62 text-decoration: none;
pineafand494b852021-09-03 19:49:49 +0100[diff] [blame]63 transition: 0.5s ease-in-out;
64 color: var(--link-color)
Samuel Shuert016ea022021-09-01 16:17:24 -0500[diff] [blame]65}
66
67* {
68 box-sizing: border-box;
pineafanad183522021-10-24 09:24:59 +0100[diff] [blame]69 font-family: 'Roboto', sans-serif;
Samuel Shuert604e31d2021-09-02 16:06:20 -0500[diff] [blame]70 scroll-behavior: smooth;
Samuel Shuert016ea022021-09-01 16:17:24 -0500[diff] [blame]71}
pineafand494b852021-09-03 19:49:49 +0100[diff] [blame]72
73code {
74 font-family: monospace;
75 font-weight: bold;
76 color: #F27878;
77 background-color: var(--hint-color);
78 padding: 2px;
79 font-size: 105%;
80 border-radius: 5px;
81 padding-left: 5px;
82}