1 2 /* Global */3 body {4 color: black;5 font-family: sans-serif;6 }7 8 /* Layout */9 .content {10 max-width: 720px;11 margin: 0 auto;12 padding: 0 16px;13 }14 15 .content-small {16 max-width: 400px;17 margin: 0 auto;18 }19 20 .text-center {21 text-align: center;22 }23 24 /* Header */25 .header {26 overflow-y: hidden;27 }28 29 30 31 /* Spots */32 .spots {33 padding: 16px;34 text-align: center;35 }36 37 .spot {38 display: inline-block;39 text-decoration: none;40 text-align: center;41 margin: 8px;42 padding: 8px;43 border-radius: 8px;44 width: 128px;45 vertical-align: text-top;46 }47 48 .spot:hover {49 transition: all 0.1s ease-out;50 transform: scale(1.1, 1.1);51 box-shadow: 2px 2px 8px rgba(0,0,0,0.6);52 }53 54 .spot .spot-icon {55 display: inline-block;56 width: 128px;57 height: 128px;58 background-repeat: no-repeat;59 background-position: center center;60 background-size: contain;61 }62 63 .spot .spot-title {64 display: block;65 font-weight: bold;66 color: #269ada;67 font-size: 120%;68 }69 70 .spot .spot-description {71 display: block;72 color: gray;73 }74 75 /* code */76 .code {77 background-color: #FFFFEE;78 border: solid 1px #EEEEDD;79 border-radius: 0.25rem;80 padding: 0.25rem;81 white-space: pre-wrap;82 font-family: monospace, mono;83 font-size: 0.8rem;84 text-align: left;85 }86 87 /* output */88 /*89 .output {90 display: inline-block;91 padding: 0.5rem 1rem;92 line-height: 1.25;93 color: #464a4c;94 border: solid 1px #5cb3fd;95 border-radius: 0.25rem;96 outline: 0;97 width: 370px;98 font-size: 1rem;99 text-align: center;100 font-family: monospace, mono;101 }*/102 103 #consumer-line {104 padding: 4px 0;105 font-family: monospace, mono;106 font-size: 60%;107 color: gray;108 }109 110 111 /* button */112 .button {113 /* Layout */114 text-align: center;115 display: inline-block;116 white-space: nowrap;117 vertical-align: middle;118 padding: 0.5rem 1rem;119 border-radius: 0.25rem;120 121 /* Colors */122 text-decoration: none;123 color: white;124 background-color: #0275d8;125 border: solid 1px #0275d8;126 line-height: 1.25;127 font-size: 1rem;128 margin: 0;129 130 /* Interaction */131 touch-action: manipulation;132 cursor: pointer;133 134 /* Animation */135 transition: all .1s ease-in-out;136 }137 138 .button:focus {139 outline: 0;140 box-shadow: 0 0 0 2px rgba(2,117,216,.5)141 }142 143 .button:hover {144 background-color: #025aa5;145 border-color: #01549b;146 }147 148 /* Card */149 150 .card {151 color: white;152 position: relative;153 width: 403px;154 height: 264px;155 background: black url('img/card.png') center center no-repeat;156 background-size: contain;157 box-shadow: 2px 2px 4px rgba(0,0,0,0.4);158 border-radius: 22px;159 }160 161 .card div {162 font-family: monospace, mono;163 }164 165 .card #OutputApiKey {166 display: block;167 border: none;168 padding: 0;169 margin: 0;170 background-color: transparent;171 width: 100%;172 }173 174 .card #card-picture {175 position: absolute;176 width: 48px;177 height: 48px;178 border-radius: 4px;179 top: 8px;180 right: 8px;181 background: gray center center no-repeat;182 background-size: contain;183 border-top-right-radius: 16px;184 }185 186 .card #card-apikey-frame {187 position: absolute;188 left: 20px;189 right: 0;190 top: 62%;191 text-align: center;192 text-shadow: 2px 2px 4px rgba(128,128,255,0.6);193 }194 195 .card #OutputApiKey {196 color: white;197 font-family: monospace, mono;198 text-align: center;199 font-size: 16px;200 }201 202 .card #OutputApiKey:focus {203 outline: 0;204 }205 206 .card #card-email {207 position: absolute;208 left: 28px;209 right: 8px;210 top: 24%;211 text-align: right;212 }213 214 .card #card-consumerid-frame {215 position: absolute;216 left: 9%;217 right: 110px;218 top: 83%;219 font-size: 12px;220 color: gray;221 text-align: left;222 }223 Enlace
El enlace para compartir es: