]> git.wincent.com - hextrapolate.git/blob - src/App.css
ad2383cbb5162d88c34e37b5994910257bec6320
[hextrapolate.git] / src / App.css
1 html {
2   box-sizing: border-box;
3 }
4
5 *,
6 *:before,
7 *:after {
8   box-sizing: inherit;
9 }
10
11 body {
12   font-family: monospace;
13 }
14
15 .hextrapolate-footer {
16   text-align: center;
17 }
18
19 .hextrapolate-field {
20   display: flex;
21   flex-grow: 5;
22   font-size: 12px;
23   position: relative;
24 }
25
26 .hextrapolate-field input {
27   flex-grow: 80;
28   font-family: monospace;
29 }
30
31 .hextrapolate-row {
32   align-items: baseline;
33   display: flex;
34   margin-bottom: 12px;
35 }
36
37 .hextrapolate {
38   padding: 0 64px;
39 }
40
41 .hextrapolate h1 {
42   text-align: center;
43 }
44
45 .hextrapolate-base {
46   display: inline-block;
47   font-size: 12px;
48   padding-right: 12px;
49   text-align: right;
50   width: 128px;
51 }
52
53 .hextrapolate-copy {
54   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBmaWxsPSIjNDQ0IiBkPSJNMjAgOFYwSDZMMCA2djE4aDEydjhoMjBWOEgyMHpNNiAyLjgyOFY2SDIuODI4TDYgMi44Mjh6TTIgMjJWOGg2VjJoMTB2NmwtNiA2djhIMnptMTYtMTEuMTcyVjE0aC0zLjE3MkwxOCAxMC44Mjh6TTMwIDMwSDE0VjE2aDZ2LTZoMTB2MjB6Ii8+PC9zdmc+);
55   background-repeat: no-repeat;
56   background-size: 16px 16px;
57   cursor: pointer;
58   display: inline-block;
59   height: 16px;
60   margin-left: 8px;
61   overflow: hidden;
62   position: relative;
63   text-indent: -10000px;
64   top: 4px;
65   user-select: none;
66   width: 16px;
67 }
68
69 .hextrapolate-copy-status {
70   color: #0f0;
71   opacity: 0;
72   position: absolute;
73   right: 4px;
74   top: 4px;
75   transform: scale(1);
76   transition: transform .25s, opacity .25s;
77   user-select: none;
78 }
79
80 .hextrapolate-copy-success {
81   opacity: .5;
82   transform: scale(5);
83   transition: transform .5s, opacity .5s;
84 }
85
86 @media (max-width: 500px) {
87   .hextrapolate {
88     padding: 0 8px;
89   }
90
91   .hextrapolate h1 {
92     font-size: 1.2em;
93     min-height: 4em;
94   }
95
96   .hextrapolate-field input,
97   .hextrapolate-field input:focus,
98   .hextrapolate-field select,
99   .hextrapolate-field select:focus {
100     background: #eee;
101     font-size: 16px;
102   }
103
104   .hextrapolate-row {
105     display: block;
106   }
107
108   .hextrapolate-base {
109     display: block;
110     text-align: left;
111   }
112 }