jcrabapple revisou este gist . Ir para a revisão
1 file changed, 177 insertions
bearblog_dashboard_catppuccin_mocha.css(arquivo criado)
@@ -0,0 +1,177 @@ | |||
1 | + | :root { | |
2 | + | --width: 800px; | |
3 | + | --font-main: Verdana, sans-serif; | |
4 | + | --font-secondary: Verdana, sans-serif; | |
5 | + | --font-scale: 1em; | |
6 | + | --background-color: #1e1e2e; /* Base color */ | |
7 | + | --heading-color: #cdd6f4; /* Text color */ | |
8 | + | --text-color: #cdd6f4; /* Text color */ | |
9 | + | --link-color: #89b4fa; /* Blue */ | |
10 | + | --visited-color: #cba6f7; /* Mauve */ | |
11 | + | --code-background-color: #313244; /* Surface1 */ | |
12 | + | --code-color: #cdd6f4; /* Text color */ | |
13 | + | --blockquote-color: #cdd6f4; /* Text color */ | |
14 | + | } | |
15 | + | ||
16 | + | @media (prefers-color-scheme: dark) { | |
17 | + | :root { | |
18 | + | --background-color: #1e1e2e; /* Base color */ | |
19 | + | --heading-color: #cdd6f4; /* Text color */ | |
20 | + | --text-color: #cdd6f4; /* Text color */ | |
21 | + | --link-color: #89b4fa; /* Blue */ | |
22 | + | --visited-color: #cba6f7; /* Mauve */ | |
23 | + | --code-background-color: #313244; /* Surface1 */ | |
24 | + | --code-color: #cdd6f4; /* Text color */ | |
25 | + | --blockquote-color: #cdd6f4; /* Text color */ | |
26 | + | } | |
27 | + | } | |
28 | + | ||
29 | + | body { | |
30 | + | font-family: var(--font-secondary); | |
31 | + | font-size: var(--font-scale); | |
32 | + | margin: auto; | |
33 | + | padding: 20px; | |
34 | + | max-width: var(--width); | |
35 | + | text-align: left; | |
36 | + | background-color: var(--background-color); | |
37 | + | word-wrap: break-word; | |
38 | + | overflow-wrap: break-word; | |
39 | + | line-height: 1.5; | |
40 | + | color: var(--text-color); | |
41 | + | } | |
42 | + | ||
43 | + | h1, h2, h3, h4, h5, h6 { | |
44 | + | font-family: var(--font-main); | |
45 | + | color: var(--heading-color); | |
46 | + | } | |
47 | + | ||
48 | + | a { | |
49 | + | color: var(--link-color); | |
50 | + | cursor: pointer; | |
51 | + | text-decoration: none; | |
52 | + | } | |
53 | + | ||
54 | + | a:hover { | |
55 | + | text-decoration: underline; | |
56 | + | } | |
57 | + | ||
58 | + | nav a { | |
59 | + | margin-right: 8px; | |
60 | + | } | |
61 | + | ||
62 | + | strong, b { | |
63 | + | color: var(--heading-color); | |
64 | + | } | |
65 | + | ||
66 | + | button { | |
67 | + | margin: 0; | |
68 | + | cursor: pointer; | |
69 | + | } | |
70 | + | ||
71 | + | main { | |
72 | + | line-height: 1.6; | |
73 | + | } | |
74 | + | ||
75 | + | table { | |
76 | + | width: 100%; | |
77 | + | } | |
78 | + | ||
79 | + | hr { | |
80 | + | border-top: 1px dashed var(--blockquote-color); | |
81 | + | } | |
82 | + | ||
83 | + | img { | |
84 | + | max-width: 100%; | |
85 | + | } | |
86 | + | ||
87 | + | code { | |
88 | + | font-family: monospace; | |
89 | + | padding: 2px; | |
90 | + | background-color: var(--code-background-color); | |
91 | + | color: var(--code-color); | |
92 | + | border-radius: 3px; | |
93 | + | } | |
94 | + | ||
95 | + | blockquote { | |
96 | + | border-left: 2px solid var(--link-color); | |
97 | + | color: var(--blockquote-color); | |
98 | + | padding-left: 20px; | |
99 | + | font-style: italic; | |
100 | + | } | |
101 | + | ||
102 | + | footer { | |
103 | + | padding: 25px 0; | |
104 | + | text-align: center; | |
105 | + | } | |
106 | + | ||
107 | + | .title:hover { | |
108 | + | text-decoration: none; | |
109 | + | } | |
110 | + | ||
111 | + | .title h1 { | |
112 | + | font-size: 1.5em; | |
113 | + | } | |
114 | + | ||
115 | + | .inline { | |
116 | + | width: auto !important; | |
117 | + | } | |
118 | + | ||
119 | + | .highlight, .code { | |
120 | + | padding: 1px 15px; | |
121 | + | background-color: var(--code-background-color); | |
122 | + | color: var(--code-color); | |
123 | + | border-radius: 3px; | |
124 | + | } | |
125 | + | ||
126 | + | /* blog post list */ | |
127 | + | ul.blog-posts { | |
128 | + | list-style-type:none;padding:none | |
129 | + | } | |
130 | + | ul.blog-posts li{display:flex} | |
131 | + | ul.blog-posts li span{flex-basis:auto} | |
132 | + | ul.blog-posts li a{color:#cba6f7} | |
133 | + | ul.blog-posts li a:hover{text-decoration:none} | |
134 | + | ul.blog-posts li a::before{content:"\2022";margin-right:.5rem;color:#89b4fa} | |
135 | + | textarea { | |
136 | + | background-color: #1e1e2e; /* Base color */ | |
137 | + | color: #cdd6f4; /* Text color */ | |
138 | + | border: 1px solid #313244; /* Surface1 */ | |
139 | + | padding: 10px; | |
140 | + | font-family: Verdana, sans-serif; | |
141 | + | font-size: 1em; | |
142 | + | resize: vertical; /* Allow vertical resizing only */ | |
143 | + | outline: none; | |
144 | + | } | |
145 | + | ||
146 | + | textarea:focus { | |
147 | + | border-color: #89b4fa; /* Blue for focus */ | |
148 | + | box-shadow: 0 0 5px #89b4fa; | |
149 | + | } | |
150 | + | input:not([type="submit"]), | |
151 | + | textarea, | |
152 | + | .editable { | |
153 | + | background-color: #1e1e2e; /* Base color */ | |
154 | + | color: #cdd6f4; /* Text color */ | |
155 | + | border: 1px solid #313244; /* Surface1 */ | |
156 | + | padding: 10px; | |
157 | + | font-family: Verdana, sans-serif; | |
158 | + | font-size: 1em; | |
159 | + | outline: none; | |
160 | + | } | |
161 | + | ||
162 | + | input:not([type="submit"]):focus, | |
163 | + | textarea:focus, | |
164 | + | .editable:focus { | |
165 | + | border-color: #89b4fa; /* Blue for focus */ | |
166 | + | box-shadow: 0 0 5px #89b4fa; | |
167 | + | } | |
168 | + | ||
169 | + | @media (prefers-color-scheme: dark) { | |
170 | + | input:not([type="submit"]), | |
171 | + | textarea, | |
172 | + | .editable { | |
173 | + | background-color: #1e1e2e; /* Base color */ | |
174 | + | color: #cdd6f4; /* Text color */ | |
175 | + | border: 1px solid #313244; /* Surface1 */ | |
176 | + | } | |
177 | + | } |
Próximo
Anterior