| 1 |
.screen { |
| 2 |
box-sizing: border-box; |
| 3 |
height: 80vh; |
| 4 |
width: 100%; |
| 5 |
.frame-address { |
| 6 |
border-radius: 7px 7px 0 0; |
| 7 |
display: flex; |
| 8 |
.site-base { |
| 9 |
background: md-get-palette-color(indigo, 900); |
| 10 |
border-radius: 5px 0 0 0; |
| 11 |
color: white; |
| 12 |
padding: 0.5em; |
| 13 |
} |
| 14 |
.site-path { |
| 15 |
flex: 1; |
| 16 |
input { |
| 17 |
border: 0 none; |
| 18 |
border-radius: 0 5px 0 0; |
| 19 |
font-size: inherit; |
| 20 |
padding: 0.5em; |
| 21 |
padding-left: 0.1em; |
| 22 |
width: 100%; |
| 23 |
} |
| 24 |
} |
| 25 |
} |
| 26 |
.frame-wrap { |
| 27 |
border: 10px solid md-get-palette-color(indigo, 300); |
| 28 |
border-radius: 15px; |
| 29 |
display: flex; |
| 30 |
flex-direction: column; |
| 31 |
height: 100%; |
| 32 |
opacity: 1; |
| 33 |
transition: opacity 500ms ease-in; |
| 34 |
width: 100%; |
| 35 |
} |
| 36 |
&.loading { |
| 37 |
.frame-wrap { |
| 38 |
opacity: 0; |
| 39 |
} |
| 40 |
} |
| 41 |
iframe, |
| 42 |
iframe:not(.md-image) { |
| 43 |
border-radius: 0 0 7px 7px; |
| 44 |
flex: 1; |
| 45 |
width: 100%; |
| 46 |
} |
| 47 |
} |
