make atem more responsive and more gradients

This commit is contained in:
2023-02-09 19:40:07 -06:00
parent 6e4133ae8f
commit d2958966be
3 changed files with 52 additions and 8 deletions
+30 -6
View File
@@ -13,8 +13,8 @@ h3 {
width: 35px;
height: 35px;
background: white;
border: 4px solid;
border-color: #8c8c8c;
border: 2px solid;
border-color: #bcbcbc;
border-radius: 3px;
margin: 6px;
}
@@ -30,18 +30,29 @@ h3 {
}
.atem-red {
background: rgb(255, 130, 131);
background: radial-gradient(circle, rgba(255, 130, 131, 1) 0%, rgba(255, 41, 40, 1) 100%);
background: rgb(255, 128, 132);
background: radial-gradient(circle, rgba(255, 128, 132, 1) 0%, rgba(247, 18, 48, 1), rgba(255, 43, 58, 1) 100%);
box-shadow: 0px 0px 10px 1px rgb(255, 128, 132);
}
.atem-green {
background: rgb(14, 238, 7);
background: radial-gradient(circle, rgba(14, 238, 7, 1) 0%, rgba(29, 204, 14, 1) 100%);
box-shadow: 0px 0px 10px 1px rgb(14, 238, 7);
}
.atem-yellow {
background: rgb(255, 240, 0);
background: radial-gradient(circle, rgba(255, 240, 0, 1) 0%, rgba(250, 169, 9, 1) 100%);
background: rgb(249, 255, 3);
background: radial-gradient(
circle,
rgba(249, 255, 3, 1) 0%,
rgba(253, 214, 14, 1) 55%,
rgba(255, 174, 0, 1) 69%,
rgba(253, 181, 0, 1) 75%,
rgba(249, 197, 7, 1) 79%,
rgba(250, 169, 9, 1) 100%
);
box-shadow: 0px 0px 10px 1px rgb(249, 255, 3);
}
.atem-gray {
@@ -153,3 +164,16 @@ h3 {
.no-wrap {
flex-wrap: nowrap;
}
.show-small {
display: none;
}
@media screen and (min-width: 0px) and (max-width: 480px) {
.hide-small {
display: none;
}
.show-small {
display: block;
}
}