File size: 2,223 Bytes
74e8f2f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
@import '../style/mixins';
.image-prompt {
display: flex;
gap: 1.5em;
align-items: flex-start;
margin-top: 2rem;
@include phone-portrait {
align-items: center;
flex-direction: column;
gap: 0;
margin-bottom: 5rem;
}
.left {
display: flex;
flex-direction: column;
.wrapper {
position: relative;
.src {
position: absolute;
right: 2rem;
bottom: 2rem;
color: white;
font-size: 1.5rem;
text-shadow: 2px 2px black;
text-decoration: none;
}
}
.animation {
position: relative;
width: 224px;
height: 15px;
opacity: 0;
.computing {
text-align: center;
}
}
}
.right {
display: flex;
flex-grow: 1;
flex-direction: column;
gap: 0.5em;
.top {
text-align: right;
height: 30px;
}
.buttons {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 1em;
align-items: center;
}
.item {
position: relative;
display: flex;
.pct {
display: inline-block;
margin-right: 1em;
width: 3.5em;
text-align: right;
opacity: 0;
transition: opacity 0.5s;
}
input {
flex-grow: 1;
max-width: 70vw;
border-radius: 0;
background: transparent;
border: 0;
border-bottom: 1px solid var(--text-fg);
color: var(--text-fg);
outline: none;
&.toolong {
border-bottom: 1px solid var(--text-red);
color: var(--text-red);
}
}
.bar {
position: absolute;
display: inline-block;
top: 5%;
left: 0;
z-index: -1;
background: var(--bar-col);
height: 90%;
width: 0;
transition: width 0.5s;
}
}
.bottom {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 1em;
align-items: center;
opacity: 0;
.tweet {
background: rgb(18, 150, 223);
color: white;
text-decoration: none;
padding: 0px 15px;
border-radius: 16px;
}
}
}
}
|