| 1 | @import url('reset.css'); |
| 2 | |
| 3 | body { |
| 4 | background: #F6F6F6; |
| 5 | |
| 6 | color: #252525; |
| 7 | --text-color: #252525; |
| 8 | |
| 9 | --header-text-color: #4A4A4A; |
| 10 | --header-help-color: #a0a0a0; |
| 11 | |
| 12 | --menu-text-color: #777777; |
| 13 | --menu-background-color: #F6F6F6; |
| 14 | --menu-border-color: #DFDFDF; |
| 15 | --menu-selected-text-color: #0B57D0; |
| 16 | --menu-selected-border-color: #0B57D0; |
| 17 | |
| 18 | --panel-background-color: #F2F2F2; |
| 19 | --panel-border-color: #E5E5E5; |
| 20 | |
| 21 | |
| 22 | |
| 23 | |
| 24 | --dark-text-color: #8F8F8F; |
| 25 | --dark-background-color: #dddddd; |
| 26 | |
| 27 | --warning-text-color: #8a0000; |
| 28 | |
| 29 | --dark-warning-color: #4a0000; |
| 30 | --dark-warning-color-hover: #854e4e; |
| 31 | --dark-warning-color-active: #714242; |
| 32 | |
| 33 | --button-text-color: #7a91b5; |
| 34 | --button-border-color: #7a91b5; |
| 35 | --button-background-color-hover: #aacbff; |
| 36 | --button-background-color-active: #047DB7; |
| 37 | |
| 38 | --primary-button-text-color: #062E6F; |
| 39 | --primary-button-background-color: #A8C7FA; |
| 40 | --primary-button-background-color-hover: #A0BDED; |
| 41 | --primary-button-background-color-active: #839FCC; |
| 42 | |
| 43 | --warning-button-text-color: #8a0000; |
| 44 | --warning-button-background-color: #ffbcbc; |
| 45 | --warning-button-background-color-hover: #fa9f9f; |
| 46 | --warning-button-background-color-active: #ff6161; |
| 47 | |
| 48 | --success-text-color: #2c5639; |
| 49 | --success-background-color: #9fdab1; |
| 50 | } |
| 51 | |
| 52 | @media (prefers-color-scheme: dark) { |
| 53 | body { |
| 54 | background: #282828; |
| 55 | |
| 56 | color: #DFDFDF; |
| 57 | --text-color: #DFDFDF; |
| 58 | |
| 59 | --header-text-color: #E9E9E9; |
| 60 | --header-help-color: #626262; |
| 61 | |
| 62 | --menu-text-color: #B4B4B4; |
| 63 | --menu-background-color: #383838; |
| 64 | --menu-border-color: #5e5e5e; |
| 65 | --menu-selected-text-color: #a8c7fa; |
| 66 | --menu-selected-border-color: #a8c7fa; |
| 67 | |
| 68 | --panel-background-color: #2B2B2B; |
| 69 | --panel-border-color: #464646; |
| 70 | |
| 71 | |
| 72 | |
| 73 | --dark-text-color: #8F8F8F; |
| 74 | --dark-background-color: #111111; |
| 75 | |
| 76 | --warning-text-color: #F2B8B5; |
| 77 | --warning-background-color: #734444; |
| 78 | |
| 79 | |
| 80 | |
| 81 | --button-text-color: #95b2e0; |
| 82 | --button-border-color: #95b2e0; |
| 83 | --button-background-color-hover: #003852; |
| 84 | --button-background-color-active: #047DB7; |
| 85 | |
| 86 | --warning-button-text-color: #ffc2c2; |
| 87 | --warning-button-background-color: #773333; |
| 88 | --warning-button-background-color-hover: #854e4e; |
| 89 | --warning-button-background-color-active: #714242; |
| 90 | |
| 91 | --success-text-color: #6DD58C; |
| 92 | --success-background-color: #2c5639; |
| 93 | } |
| 94 | } |
| 95 | |
| 96 | body { |
| 97 | font-family: Arial, Tahoma, sans-serif; |
| 98 | font-size: 16px; |
| 99 | line-height: 1.2; |
| 100 | } |
| 101 | |
| 102 | h1, h2, h3, h4, h5, h6 { |
| 103 | display: block; |
| 104 | font-size: 16px; |
| 105 | margin-bottom: 24px; |
| 106 | } |
| 107 | |
| 108 | p, li, small, form { |
| 109 | display: block; |
| 110 | margin-bottom: 12px; |
| 111 | } |
| 112 | |
| 113 | li { |
| 114 | margin-left: 12px; |
| 115 | } |
| 116 | |
| 117 | code { |
| 118 | font-family: 'Courier New', Courier, monospace, Tahoma, sans-serif; |
| 119 | } |
| 120 | |
| 121 | .dark { |
| 122 | background-color: var(--background-color); |
| 123 | color: var(--text-color); |
| 124 | } |
| 125 | .dark small { |
| 126 | color: var(--dark-text-color); |
| 127 | } |
| 128 | |
| 129 | .light { |
| 130 | background-color: var(--background-color); |
| 131 | color: #1f1f1f; |
| 132 | } |
| 133 | .light small { |
| 134 | color: var(--dark-text-color); |
| 135 | } |