|
1 | 1 | /* Thebelab Buttons */ |
2 | 2 | .thebelab-button { |
3 | | - z-index: 999; |
4 | | - display: inline-block; |
5 | | - padding: 0.35em 1.2em; |
6 | | - margin: 0px 1px; |
7 | | - border-radius: 0.12em; |
8 | | - box-sizing: border-box; |
9 | | - text-decoration: none; |
10 | | - font-family: 'Roboto', sans-serif; |
11 | | - font-weight: 300; |
12 | | - text-align: center; |
13 | | - transition: all 0.2s; |
14 | | - background-color: #dddddd; |
15 | | - border: 0.05em solid white; |
16 | | - color: #000000; |
17 | | -} |
18 | | - |
19 | | -.thebelab-button:hover{ |
20 | | - border: 0.05em solid black; |
21 | | - background-color: #fcfcfc; |
| 3 | + z-index: 999; |
| 4 | + display: inline-block; |
| 5 | + padding: 0.35em 1.2em; |
| 6 | + margin: 0px 1px; |
| 7 | + border-radius: 0.12em; |
| 8 | + box-sizing: border-box; |
| 9 | + text-decoration: none; |
| 10 | + font-family: "Roboto", sans-serif; |
| 11 | + font-weight: 300; |
| 12 | + text-align: center; |
| 13 | + transition: all 0.2s; |
| 14 | + background-color: #dddddd; |
| 15 | + border: 0.05em solid white; |
| 16 | + color: #000000; |
| 17 | +} |
| 18 | + |
| 19 | +.thebelab-button:hover { |
| 20 | + border: 0.05em solid black; |
| 21 | + background-color: #fcfcfc; |
22 | 22 | } |
23 | 23 |
|
24 | 24 | .thebe-launch-button { |
25 | | - height: 2.2em; |
26 | | - font-size: .8em; |
27 | | - border: 1px black solid; |
| 25 | + height: 2.2em; |
| 26 | + font-size: 0.8em; |
| 27 | + border: 1px black solid; |
28 | 28 | } |
29 | 29 |
|
30 | 30 | /* Thebelab Cell */ |
|
33 | 33 | } |
34 | 34 |
|
35 | 35 | .thebelab-cell .thebelab-input { |
36 | | - padding-left: 1em; |
37 | | - margin-bottom: .5em; |
38 | | - margin-top: .5em; |
| 36 | + padding-left: 1em; |
| 37 | + margin-bottom: 0.5em; |
| 38 | + margin-top: 0.5em; |
39 | 39 | } |
40 | 40 |
|
41 | 41 | .thebelab-cell .jp-OutputArea { |
42 | | - margin-top: .5em; |
43 | | - margin-left: 1em; |
| 42 | + margin-top: 0.5em; |
| 43 | + margin-left: 1em; |
44 | 44 | } |
45 | 45 |
|
46 | 46 | button.thebelab-button.thebelab-run-button { |
47 | | - margin-left: 1.5em; |
48 | | - margin-bottom: .5em; |
| 47 | + margin-left: 1.5em; |
| 48 | + margin-bottom: 0.5em; |
49 | 49 | } |
50 | 50 |
|
51 | 51 | /* Loading button */ |
52 | 52 | button.thebe-launch-button div.spinner { |
53 | | - float: left; |
54 | | - margin-right: 1em; |
| 53 | + float: left; |
| 54 | + margin-right: 1em; |
55 | 55 | } |
56 | 56 |
|
57 | 57 | /* Remove the spinner when thebelab is ready */ |
58 | 58 | .thebe-launch-button.thebe-status-ready .spinner { |
59 | | - display: none; |
| 59 | + display: none; |
60 | 60 | } |
61 | 61 |
|
62 | 62 | .thebe-launch-button span.status { |
63 | | - font-family: monospace; |
64 | | - font-weight: bold; |
| 63 | + font-family: monospace; |
| 64 | + font-weight: bold; |
65 | 65 | } |
66 | 66 |
|
67 | 67 | .thebe-launch-button.thebe-status-ready span.status { |
68 | | - color: green; |
| 68 | + color: green; |
69 | 69 | } |
70 | 70 |
|
71 | 71 | .spinner { |
72 | | - height: 2em; |
73 | | - text-align: center; |
74 | | - font-size: 0.7em; |
75 | | - } |
| 72 | + height: 2em; |
| 73 | + text-align: center; |
| 74 | + font-size: 0.7em; |
| 75 | +} |
76 | 76 |
|
77 | | - .spinner > div { |
78 | | - background-color: #F37726; |
79 | | - height: 100%; |
80 | | - width: 6px; |
81 | | - display: inline-block; |
| 77 | +.spinner > div { |
| 78 | + background-color: #f37726; |
| 79 | + height: 100%; |
| 80 | + width: 6px; |
| 81 | + display: inline-block; |
82 | 82 |
|
83 | | - -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; |
84 | | - animation: sk-stretchdelay 1.2s infinite ease-in-out; |
85 | | - } |
| 83 | + -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; |
| 84 | + animation: sk-stretchdelay 1.2s infinite ease-in-out; |
| 85 | +} |
86 | 86 |
|
87 | | - .spinner .rect2 { |
88 | | - -webkit-animation-delay: -1.1s; |
89 | | - animation-delay: -1.1s; |
90 | | - } |
| 87 | +.spinner .rect2 { |
| 88 | + -webkit-animation-delay: -1.1s; |
| 89 | + animation-delay: -1.1s; |
| 90 | +} |
91 | 91 |
|
92 | | - .spinner .rect3 { |
93 | | - -webkit-animation-delay: -1.0s; |
94 | | - animation-delay: -1.0s; |
95 | | - } |
| 92 | +.spinner .rect3 { |
| 93 | + -webkit-animation-delay: -1s; |
| 94 | + animation-delay: -1s; |
| 95 | +} |
96 | 96 |
|
97 | | - .spinner .rect4 { |
98 | | - -webkit-animation-delay: -0.9s; |
99 | | - animation-delay: -0.9s; |
100 | | - } |
| 97 | +.spinner .rect4 { |
| 98 | + -webkit-animation-delay: -0.9s; |
| 99 | + animation-delay: -0.9s; |
| 100 | +} |
101 | 101 |
|
102 | | - .spinner .rect5 { |
103 | | - -webkit-animation-delay: -0.8s; |
104 | | - animation-delay: -0.8s; |
105 | | - } |
| 102 | +.spinner .rect5 { |
| 103 | + -webkit-animation-delay: -0.8s; |
| 104 | + animation-delay: -0.8s; |
| 105 | +} |
106 | 106 |
|
107 | | - @-webkit-keyframes sk-stretchdelay { |
108 | | - 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } |
109 | | - 20% { -webkit-transform: scaleY(1.0) } |
| 107 | +@-webkit-keyframes sk-stretchdelay { |
| 108 | + 0%, |
| 109 | + 40%, |
| 110 | + 100% { |
| 111 | + -webkit-transform: scaleY(0.4); |
110 | 112 | } |
| 113 | + 20% { |
| 114 | + -webkit-transform: scaleY(1); |
| 115 | + } |
| 116 | +} |
111 | 117 |
|
112 | | - @keyframes sk-stretchdelay { |
113 | | - 0%, 40%, 100% { |
114 | | - transform: scaleY(0.4); |
115 | | - -webkit-transform: scaleY(0.4); |
116 | | - } 20% { |
117 | | - transform: scaleY(1.0); |
118 | | - -webkit-transform: scaleY(1.0); |
119 | | - } |
| 118 | +@keyframes sk-stretchdelay { |
| 119 | + 0%, |
| 120 | + 40%, |
| 121 | + 100% { |
| 122 | + transform: scaleY(0.4); |
| 123 | + -webkit-transform: scaleY(0.4); |
120 | 124 | } |
| 125 | + 20% { |
| 126 | + transform: scaleY(1); |
| 127 | + -webkit-transform: scaleY(1); |
| 128 | + } |
| 129 | +} |
0 commit comments