Files: c5c7a8ffadbd51aa28a5f3f096fe43f69405da44 / examples / express / views / lib / sakura.css
3283 bytesRaw
1 | /* Sakura.css v1.0.0 |
2 | * ================ |
3 | * Minimal css theme. |
4 | * Project: https://github.com/oxalorg/sakura |
5 | */ |
6 | /* Body */ |
7 | html { |
8 | font-size: 62.5%; |
9 | font-family: serif; } |
10 | |
11 | body { |
12 | font-size: 1.8rem; |
13 | line-height: 1.618; |
14 | max-width: 38em; |
15 | margin: auto; |
16 | color: #4a4a4a; |
17 | background-color: #f9f9f9; |
18 | padding: 13px; } |
19 | |
20 | @media (max-width: 684px) { |
21 | body { |
22 | font-size: 1.53rem; } } |
23 | @media (max-width: 382px) { |
24 | body { |
25 | font-size: 1.35rem; } } |
26 | h1, h2, h3, h4, h5, h6 { |
27 | line-height: 1.1; |
28 | font-family: Verdana, Geneva, sans-serif; |
29 | font-weight: 700; |
30 | overflow-wrap: break-word; |
31 | word-wrap: break-word; |
32 | -ms-word-break: break-all; |
33 | word-break: break-word; |
34 | -ms-hyphens: auto; |
35 | -moz-hyphens: auto; |
36 | -webkit-hyphens: auto; |
37 | hyphens: auto; } |
38 | |
39 | h1 { |
40 | font-size: 2.35em; } |
41 | |
42 | h2 { |
43 | font-size: 2em; } |
44 | |
45 | h3 { |
46 | font-size: 1.75em; } |
47 | |
48 | h4 { |
49 | font-size: 1.5em; } |
50 | |
51 | h5 { |
52 | font-size: 1.25em; } |
53 | |
54 | h6 { |
55 | font-size: 1em; } |
56 | |
57 | small, sub, sup { |
58 | font-size: 75%; } |
59 | |
60 | hr { |
61 | border-color: #2c8898; } |
62 | |
63 | a { |
64 | text-decoration: none; |
65 | color: #2c8898; } |
66 | a:hover { |
67 | color: #982c61; |
68 | border-bottom: 2px solid #4a4a4a; } |
69 | |
70 | ul { |
71 | padding-left: 1.4em; } |
72 | |
73 | li { |
74 | margin-bottom: 0.4em; } |
75 | |
76 | blockquote { |
77 | font-style: italic; |
78 | margin-left: 1.5em; |
79 | padding-left: 1em; |
80 | border-left: 3px solid #2c8898; } |
81 | |
82 | img { |
83 | max-width: 100%; } |
84 | |
85 | /* Pre and Code */ |
86 | pre { |
87 | background-color: #f1f1f1; |
88 | display: block; |
89 | padding: 1em; |
90 | overflow-x: auto; } |
91 | |
92 | code { |
93 | font-size: 0.9em; |
94 | padding: 0 0.5em; |
95 | background-color: #f1f1f1; |
96 | white-space: pre-wrap; } |
97 | |
98 | pre > code { |
99 | padding: 0; |
100 | background-color: transparent; |
101 | white-space: pre; } |
102 | |
103 | /* Tables */ |
104 | table { |
105 | text-align: justify; |
106 | width: 100%; |
107 | border-collapse: collapse; } |
108 | |
109 | td, th { |
110 | padding: 0.5em; |
111 | border-bottom: 1px solid #f1f1f1; } |
112 | |
113 | /* Buttons, forms and input */ |
114 | input, textarea { |
115 | border: 1px solid #4a4a4a; } |
116 | input:focus, textarea:focus { |
117 | border: 1px solid #2c8898; } |
118 | |
119 | textarea { |
120 | width: 100%; } |
121 | |
122 | .button, button, input[type="submit"], input[type="reset"], input[type="button"] { |
123 | display: inline-block; |
124 | padding: 5px 10px; |
125 | text-align: center; |
126 | text-decoration: none; |
127 | white-space: nowrap; |
128 | background-color: #2c8898; |
129 | color: #f9f9f9; |
130 | border-radius: 1px; |
131 | border: 1px solid #2c8898; |
132 | cursor: pointer; |
133 | box-sizing: border-box; } |
134 | .button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] { |
135 | cursor: default; |
136 | opacity: .5; } |
137 | .button:focus, .button:hover, button:focus, button:hover, input[type="submit"]:focus, input[type="submit"]:hover, input[type="reset"]:focus, input[type="reset"]:hover, input[type="button"]:focus, input[type="button"]:hover { |
138 | background-color: #982c61; |
139 | border-color: #982c61; |
140 | color: #f9f9f9; |
141 | outline: 0; } |
142 | |
143 | textarea, select, input[type] { |
144 | color: #4a4a4a; |
145 | padding: 6px 10px; |
146 | /* The 6px vertically centers text on FF, ignored by Webkit */ |
147 | margin-bottom: 10px; |
148 | background-color: #f1f1f1; |
149 | border: 1px solid #f1f1f1; |
150 | border-radius: 4px; |
151 | box-shadow: none; |
152 | box-sizing: border-box; } |
153 | textarea:focus, select:focus, input[type]:focus { |
154 | border: 1px solid #2c8898; |
155 | outline: 0; } |
156 | |
157 | label, legend, fieldset { |
158 | display: block; |
159 | margin-bottom: .5rem; |
160 | font-weight: 600; } |
161 |
Built with git-ssb-web