💄 Подчистил CSS

This commit is contained in:
2021-04-01 09:35:05 +03:00
parent 6bdee34c9d
commit a3fa18af82
6 changed files with 23 additions and 26 deletions

View File

@@ -41,7 +41,7 @@ export default {
<style> <style>
body { body {
margin: 0px; margin: 0;
background-color: #5a5a5a; background-color: #5a5a5a;
} }
@@ -62,14 +62,14 @@ body {
color: #f3f3f350; color: #f3f3f350;
background-color: #12121250; background-color: #12121250;
border-radius: 6px; border-radius: 6px;
padding: 3px 6px 3px 6px; padding: 3px 6px;
position: fixed; position: fixed;
width: 20ch; width: 20ch;
left: 0; left: 0;
right: 0; right: 0;
bottom: 10px; bottom: 10px;
text-align: center; text-align: center;
margin: 0 auto 0 auto; margin: 0 auto;
transition: all 0.3s; transition: all 0.3s;
cursor: pointer; cursor: pointer;
z-index: -1; z-index: -1;
@@ -80,14 +80,6 @@ body {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
} }
.correct {
color: #121212;
background-color: rgb(124, 230, 124) !important;
}
.wrong {
background-color: rgb(255, 71, 71) !important;
}
@media only screen and (max-width: 520px) { @media only screen and (max-width: 520px) {
.source { .source {
display: none; display: none;

View File

@@ -31,7 +31,7 @@ export default {
background-color: #5a5a5a; background-color: #5a5a5a;
border-radius: 6px; border-radius: 6px;
margin: 3px; margin: 3px;
padding: 5px 9px 5px 9px; padding: 5px 9px;
transition: transform 0.2s; transition: transform 0.2s;
} }
.option:hover { .option:hover {

View File

@@ -45,14 +45,14 @@ div {
width: 400px; width: 400px;
margin: auto; margin: auto;
border-radius: 18px; border-radius: 18px;
padding: 40px 10px 40px 10px; padding: 40px 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
} }
input { input {
font-size: 1em; font-size: 1em;
text-align: center; text-align: center;
padding: 5px 8px 5px 8px; padding: 5px 8px;
margin-bottom: 1em; margin-bottom: 1em;
border-radius: 6px; border-radius: 6px;
border: none; border: none;
@@ -67,14 +67,14 @@ button {
border-radius: 6px; border-radius: 6px;
border: none; border: none;
width: 20ch; width: 20ch;
padding: 5px 8px 5px 8px; padding: 5px 8px;
cursor: pointer; cursor: pointer;
} }
@media only screen and (max-width: 520px) { @media only screen and (max-width: 520px) {
div { div {
width: 100%; width: 100%;
padding: 40px 0px 40px 0px; padding: 40px 0;
} }
} }
</style> </style>

View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<span v-show="!correct" class="wrong-answr">Нет, это был не {{ selectedName }} 😢</span> <span v-show="!correct" class="wrong">Нет, это был не {{ selectedName }} 😢</span>
<div class="result" v-bind:class="{correct: correct}"> <div class="result" v-bind:class="{correct: correct}">
{{ name }} {{ date }} {{ name }} {{ date }}
</div> </div>
@@ -21,12 +21,17 @@ export default {
<style scoped> <style scoped>
.result { .result {
padding: 30px 40px 30px 40px; padding: 30px 40px;
border-radius: 8px; border-radius: 8px;
background-color: #5a5a5a; background-color: #5a5a5a;
} }
.wrong-answr { .correct {
color: #121212;
background-color: rgb(124, 230, 124);
}
.wrong {
color: rgb(255, 71, 71); color: rgb(255, 71, 71);
} }
</style> </style>

View File

@@ -17,10 +17,10 @@ export default {
<style scoped> <style scoped>
div { div {
width: 350px; width: 350px;
border-radius: 0px 0px 17px 17px; border-radius: 0 0 17px 17px;
background-color: #f3f3f3; background-color: #f3f3f3;
margin: auto; margin: auto;
padding: 0.4em 18px 0.4em 18px; padding: 0.4em 18px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
@@ -42,9 +42,9 @@ span {
div { div {
width: 100%; width: 100%;
position: fixed; position: fixed;
padding: 0.4em 0px 0.4em 0px; padding: 0.4em 0;
bottom: 0px; bottom: 0;
border-radius: 0px; border-radius: 0;
z-index: 100; z-index: 100;
} }
} }

View File

@@ -72,8 +72,8 @@ div {
div { div {
width: 100%; width: 100%;
position: relative; position: relative;
padding: 1em 0px 1em 0px; padding: 1em 0;
margin: 1em 0px 0px 0px; margin: 1em 0 0 0;
border-radius: 17px; border-radius: 17px;
} }
} }