|
395
|
1 $spacing: 10px;
|
|
|
2 $screen-sm: 600px;
|
|
|
3
|
|
|
4 $bg: #fff;
|
|
|
5 $gray: #eee;
|
|
|
6 $gray-dark: darken($gray, 20%);
|
|
|
7 $danger: scale-color(#f00, $lightness: 90%);
|
|
|
8 $danger-dark: darken($danger, 60%);
|
|
|
9 $info: scale-color(#0f0, $lightness: 90%);
|
|
|
10 $info-dark: darken($info, 60%);
|
|
|
11 $primary: scale-color(#06f, $lightness: 90%);
|
|
|
12
|
|
|
13 $monospace: Consolas, monospace;
|
|
|
14
|
|
|
15 *, ::before, ::after {
|
|
|
16 position: relative;
|
|
|
17 box-sizing: border-box;
|
|
|
18 }
|
|
|
19
|
|
|
20 body, button, input, textarea {
|
|
|
21 font-family: Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
|
|
|
22 font-size: 12px;
|
|
|
23 }
|
|
|
24
|
|
|
25 p, h1 {
|
|
|
26 margin: 0px;
|
|
|
27 }
|
|
|
28
|
|
|
29 html {
|
|
|
30 height: 100%;
|
|
|
31 }
|
|
|
32
|
|
|
33 body {
|
|
|
34 height: 100%;
|
|
|
35 margin: 0px;
|
|
|
36 display: flex;
|
|
|
37 flex-direction: column;
|
|
|
38 }
|
|
|
39
|
|
|
40 .input-url1 { display: none !important; }
|
|
|
41
|
|
|
42 .monospaced {
|
|
|
43 font-family: $monospace;
|
|
|
44 }
|
|
|
45
|
|
|
46 .header {
|
|
|
47 background-color: $gray;
|
|
|
48 display: flex;
|
|
|
49 justify-content: space-between;
|
|
|
50 align-items: center;
|
|
|
51 padding: $spacing;
|
|
|
52 flex: none;
|
|
|
53 }
|
|
|
54
|
|
|
55 .main {
|
|
|
56 display: flex;
|
|
|
57 flex: 1 0 auto;
|
|
|
58 padding: $spacing;
|
|
|
59 flex-direction: column;
|
|
|
60 }
|
|
|
61
|
|
|
62 .main-form {
|
|
|
63 flex: 1;
|
|
|
64 display: flex;
|
|
|
65 flex-direction: column;
|
|
|
66 }
|
|
|
67
|
|
|
68 .main-textarea-container {
|
|
|
69 flex: 1 0 auto;
|
|
|
70 display: flex;
|
|
|
71 }
|
|
|
72
|
|
|
73 .main-textarea {
|
|
|
74 width: 100%;
|
|
|
75 }
|
|
|
76
|
|
|
77 .settings {
|
|
|
78 display: flex;
|
|
|
79 margin: $spacing (-$spacing/2) 0px;
|
|
|
80 }
|
|
|
81
|
|
|
82 .settings-item {
|
|
|
83 display: flex;
|
|
|
84 flex-direction: column;
|
|
|
85 flex: 1;
|
|
|
86 margin: 0px $spacing/2;
|
|
|
87
|
|
|
88 @media (min-width: $screen-sm) {
|
|
|
89 flex: none;
|
|
|
90 }
|
|
|
91 }
|
|
|
92
|
|
|
93 .settings-label {
|
|
|
94 margin-bottom: $spacing/2;
|
|
|
95 }
|
|
|
96
|
|
|
97 .actions {
|
|
|
98 display: flex;
|
|
|
99 }
|
|
|
100
|
|
|
101 .action {
|
|
|
102 flex: 1;
|
|
|
103 @media (min-width: $screen-sm) {
|
|
|
104 flex: none;
|
|
|
105 }
|
|
|
106 margin: 0px $spacing/2;
|
|
|
107 }
|
|
354
|
108
|
|
395
|
109 .alert {
|
|
|
110 padding: $spacing;
|
|
|
111 flex: none;
|
|
|
112 }
|
|
|
113
|
|
|
114 .alert-danger {
|
|
|
115 background-color: $danger;
|
|
|
116 }
|
|
|
117
|
|
|
118 .alert-info {
|
|
|
119 background-color: $info;
|
|
|
120 }
|
|
|
121
|
|
|
122 .field_with_errors {
|
|
|
123 display: flex;
|
|
|
124 width: 100%;
|
|
|
125 border: 1px solid $danger-dark;
|
|
|
126 }
|
|
|
127
|
|
|
128 .paste-content {
|
|
|
129 flex: 1 0 auto;
|
|
|
130 display: flex;
|
|
|
131 flex-direction: column;
|
|
|
132 }
|
|
|
133
|
|
|
134 .paste-nav {
|
|
|
135 display: flex;
|
|
|
136 justify-content: space-between;
|
|
|
137 margin: 0px (-$spacing/2);
|
|
|
138 }
|
|
|
139
|
|
|
140 .paste-nav-item {
|
|
|
141 flex: 1 1 0px;
|
|
|
142 text-align: center;
|
|
|
143 border: 1px solid $gray-dark;
|
|
|
144 margin: 0px $spacing/2 $spacing;
|
|
|
145 padding: $spacing;
|
|
|
146
|
|
|
147 &:hover {
|
|
|
148 background-color: $gray-dark;
|
|
|
149 }
|
|
|
150 }
|
|
|
151
|
|
|
152 .active {
|
|
|
153 background-color: $gray;
|
|
|
154 }
|
|
|
155
|
|
|
156 .paste-plain {
|
|
|
157 background-color: $gray;
|
|
|
158 margin: 0px;
|
|
|
159 border: 1px solid $gray-dark;
|
|
|
160 flex: none;
|
|
|
161 }
|
|
|
162
|
|
|
163 .line {
|
|
|
164 background-color: $bg;
|
|
|
165 flex: 1;
|
|
|
166 }
|
|
|
167
|
|
|
168 .paste-nav--bottom {
|
|
|
169 margin-top: $spacing;
|
|
|
170 margin-bottom: 0px;
|
|
|
171 }
|
|
|
172
|
|
|
173 .settings-item--inline {
|
|
|
174 flex-direction: row;
|
|
|
175 flex: 1;
|
|
|
176 }
|
|
|
177
|
|
|
178 .action--horizontal-minimum {
|
|
|
179 margin: 0px;
|
|
|
180 flex: none;
|
|
|
181 }
|
|
|
182
|
|
|
183 .settings-group {
|
|
|
184 display: flex;
|
|
|
185 flex-direction: column;
|
|
|
186 width: 100%;
|
|
|
187
|
|
|
188 @media (min-width: $screen-sm) {
|
|
|
189 flex-direction: row;
|
|
|
190 justify-content: space-between;
|
|
|
191 }
|
|
|
192 }
|
|
|
193
|
|
|
194 .btn {
|
|
|
195 box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.1) inset;
|
|
|
196 border: 0px;
|
|
|
197 background-color: $gray;
|
|
|
198 cursor: pointer;
|
|
|
199 padding: $spacing ($spacing*2);
|
|
|
200 }
|
|
|
201
|
|
|
202 @mixin btn-color($color) {
|
|
|
203 background-color: $color;
|
|
|
204
|
|
|
205 &:hover {
|
|
|
206 background-color: darken($color, 10%);
|
|
|
207 }
|
|
|
208
|
|
|
209 &:focus {
|
|
|
210 background-color: darken($color, 20%);
|
|
|
211 }
|
|
|
212 }
|
|
|
213
|
|
|
214 .btn--primary {
|
|
|
215 @include btn-color($primary);
|
|
|
216 }
|
|
|
217
|
|
|
218 .btn--danger {
|
|
|
219 @include btn-color($danger);
|
|
|
220 }
|
|
|
221
|
|
|
222 .btn--min-width {
|
|
|
223 flex: none;
|
|
|
224 }
|
