diff options
author | lucashemi <lucasxberger@gmail.com> | 2022-03-17 17:41:51 -0300 |
---|---|---|
committer | lucashemi <lucasxberger@gmail.com> | 2022-03-17 17:41:51 -0300 |
commit | 39da26bcc06c868cf01e4f308e722be7589c936d (patch) | |
tree | 8c5f40513e37481098169b2cf6d03275bbc8831b /style.css |
v1.0
Diffstat (limited to 'style.css')
-rw-r--r-- | style.css | 212 |
1 files changed, 212 insertions, 0 deletions
diff --git a/style.css b/style.css new file mode 100644 index 0000000..c1e7817 --- /dev/null +++ b/style.css @@ -0,0 +1,212 @@ +body { + background-color: slategray; +} + +.container { + width: 30vw; + font-family: sans-serif; + color: white; + background-color: grey; + position: absolute; + left: 10%; + top: 10%; + font-weight: 700; + display: grid; + grid-template-areas: + "resultado resultado resultado resultado" + "C C X div" + "sete oito nove vez" + "quatro cinco seis men" + "um dois tres mai" + "ze ze ponto eq" +} + + +.botao { + padding: 2.5rem; + font-size: 26px; + background-color: #444; + border: 3px solid #666; +} + +.botao:hover { + opacity: 0.8;; +} + +.resultado { + grid-area: resultado; + border-top: 6px solid #666; + border-left: 6px solid #666; + border-right: 6px solid #666; +} + +.resultado:hover { + opacity: 1; +} + +.botao-c { + grid-area: C; + border-left: 6px solid #666; +} + +.botao-ze { + grid-area: ze; + border-left: 6px solid #666; + border-bottom: 6px solid #666; +} + +.botao-X { + grid-area: X; + color: lightcoral; +} + +.sp { + background-color: orange; + border-right: 6px solid #666; +} + +.botao-div { + grid-area: div; +} + +.botao-vez { + grid-area: vez; +} + +.botao-men { + grid-area: men; +} + +.botao-mai { + grid-area: mai; +} + +.botao-eq { + grid-area: eq; + border-bottom: 6px solid #666; +} + +.botao-ponto { + grid-area: ponto; + border-bottom: 6px solid #666; +} + +.botao-um { + grid-area: um; + border-left: 6px solid #666; +} + +.botao-dois { + grid-area: dois; +} + +.botao-tres { + grid-area: tres; +} + +.botao-quatro { + grid-area: quatro; + border-left: 6px solid #666; +} + +.botao-cinco { + grid-area: cinco; +} + +.botao-seis { + grid-area: seis; +} + +.botao-sete { + grid-area: sete; + border-left: 6px solid #666; +} + +.botao-oito { + grid-area: oito; +} + +.botao-nove { + grid-area: nove; +} + +@media screen and (max-width: 375px){ + .container { + width: 80vw; + top: 5%; + } + + .resultado { + min-width: 230px; + min-height: 40px; + } + + .botao { + padding: 0.5rem; + font-size: 28px; + } +} + +@media screen and (min-width: 375px){ + .container { + width: 80vw; + top: 5%; + } + + .resultado { + min-width: 256px; + min-height: 40px; + } + + .botao { + padding: 1rem; + font-size: 30px; + } +} + +@media screen and (min-width: 425px){ + .container { + width: 80vw; + } + + .botao { + padding: 1rem; + font-size: 30px; + } +} + +@media screen and (min-width: 768px){ + .container { + width: 45vw; + left: 30%; + } + + .botao { + padding: 1.5rem; + font-size: 30px; + } +} + +@media screen and (min-width: 1024px){ + .container { + width: 40vw; + left: 30%; + } + + .botao { + padding: 1.5rem; + font-size: 30px; + } +} + +@media screen and (min-width: 1440px){ + .container { + width: 30vw; + left: 35%; + } + + .botao { + padding: 1.5rem; + font-size: 30px; + } +}
\ No newline at end of file |