diff options
| author | Igor Tolmachev <me@igorek.dev> | 2024-04-20 17:40:45 +0900 |
|---|---|---|
| committer | Igor Tolmachev <me@igorek.dev> | 2024-04-20 17:40:45 +0900 |
| commit | 93b7de928e8ab59396fcd5ac263aed37afc5ec85 (patch) | |
| tree | b04e4c7d8ec596e9a17297d9c63efce6c5e511ec /style.css | |
| parent | 86d3bd0da5d45f1227ae182f9d87b1a4cc0bfa38 (diff) | |
| download | pages-93b7de928e8ab59396fcd5ac263aed37afc5ec85.tar.gz pages-93b7de928e8ab59396fcd5ac263aed37afc5ec85.zip | |
Add "click to copy" tooltip
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 55 |
1 files changed, 31 insertions, 24 deletions
| @@ -1,48 +1,55 @@ | |||
| 1 | @font-face { | 1 | @font-face { |
| 2 | font-family: Noto Sans Mono; | 2 | font-family: Noto Sans Mono; |
| 3 | src: url(font.ttf); | 3 | src: url(font.ttf); |
| 4 | } | 4 | } |
| 5 | 5 | ||
| 6 | * { | 6 | * { |
| 7 | font-family: Noto Sans Mono; | 7 | font-family: Noto Sans Mono; |
| 8 | } | 8 | } |
| 9 | 9 | ||
| 10 | @media screen and (max-width: 700px) { | 10 | @media screen and (max-width: 700px) { |
| 11 | * { | 11 | * { |
| 12 | font-size: small; | 12 | font-size: small; |
| 13 | } | 13 | } |
| 14 | } | 14 | } |
| 15 | 15 | ||
| 16 | @media screen and (min-width: 700px) { | 16 | @media screen and (min-width: 700px) { |
| 17 | * { | 17 | * { |
| 18 | font-size: x-large; | 18 | font-size: x-large; |
| 19 | } | 19 | } |
| 20 | } | 20 | } |
| 21 | 21 | ||
| 22 | @media (prefers-color-scheme: dark) { | 22 | @media (prefers-color-scheme: dark) { |
| 23 | body { | 23 | body { |
| 24 | color: #a7a7a7; | 24 | color: #a7a7a7; |
| 25 | background: #1e1e1e; | 25 | background: #1e1e1e; |
| 26 | } | 26 | } |
| 27 | } | 27 | } |
| 28 | 28 | ||
| 29 | @media (prefers-color-scheme: light) { | 29 | @media (prefers-color-scheme: light) { |
| 30 | body { | 30 | body { |
| 31 | color: #464b50; | 31 | color: #464b50; |
| 32 | background: #ffffff; | 32 | background: #ffffff; |
| 33 | } | 33 | } |
| 34 | } | 34 | } |
| 35 | 35 | ||
| 36 | a, | 36 | a, |
| 37 | .copy { | 37 | .copy { |
| 38 | cursor: pointer; | 38 | cursor: pointer; |
| 39 | text-decoration: underline; | 39 | color: #7587a6; |
| 40 | color: #7587a6; | ||
| 41 | } | 40 | } |
| 42 | 41 | ||
| 43 | a:active, | 42 | a:active, |
| 44 | .copy:active { | 43 | .copy:active { |
| 45 | cursor: pointer; | 44 | cursor: pointer; |
| 46 | text-decoration: underline; | 45 | color: #9b859d; |
| 47 | color: #9b859d; | 46 | } |
| 48 | } \ No newline at end of file | 47 | |
| 48 | .copy > .copy-tooltip { | ||
| 49 | visibility: hidden; | ||
| 50 | margin-left: 1em; | ||
| 51 | } | ||
| 52 | |||
| 53 | .copy:hover > .copy-tooltip { | ||
| 54 | visibility: visible; | ||
| 55 | } | ||