Grayscale variable

merge-requests/8/head
Bob Mottram 2020-07-10 19:28:54 +01:00
parent bbd83dbb52
commit 7ec9ecfc6e
4 changed files with 52 additions and 52 deletions

View File

@ -39,7 +39,7 @@ body {
font-family: 'Montserrat'; font-family: 'Montserrat';
font-weight: 700; font-weight: 700;
min-height: 100vh; min-height: 100vh;
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
} }
main { main {
@ -182,12 +182,12 @@ tr:nth-child(even) > .calendar__day__cell:nth-child(even) {
} }
.calendardayicon { .calendardayicon {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
width: 100% width: 100%
} }
.buttonprev { .buttonprev {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: left; float: left;
width: 10%; width: 10%;
-ms-transform: translateY(30%); -ms-transform: translateY(30%);
@ -195,7 +195,7 @@ tr:nth-child(even) > .calendar__day__cell:nth-child(even) {
} }
.buttonnext { .buttonnext {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: right; float: right;
width: 10%; width: 10%;
-ms-transform: translateY(30%) scaleX(-1); -ms-transform: translateY(30%) scaleX(-1);

View File

@ -50,7 +50,7 @@ body, html {
max-width: 100%; max-width: 100%;
min-width: 600px; min-width: 600px;
margin: 5% auto; margin: 5% auto;
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
} }
a, u { a, u {
@ -91,7 +91,7 @@ a:link {
} }
.followAvatar img { .followAvatar img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
border-radius: 10%; border-radius: 10%;
width: 20%; width: 20%;
min-width: 200px; min-width: 200px;
@ -171,7 +171,7 @@ input[type=text] {
} }
.options img { .options img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
width: 15%; width: 15%;
} }

View File

@ -41,7 +41,7 @@ body, html {
min-width: 600px; min-width: 600px;
margin: 0 auto; margin: 0 auto;
font-size: var(--font-size); font-size: var(--font-size);
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
} }
a, u { a, u {
@ -98,13 +98,13 @@ button:hover {
} }
.imgcontainer { .imgcontainer {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
text-align: center; text-align: center;
margin: 24px 0 12px 0; margin: 24px 0 12px 0;
} }
img.avatar { img.avatar {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
width: 40%; width: 40%;
border-radius: 50%; border-radius: 50%;
} }

View File

@ -71,7 +71,7 @@ body, html {
min-width: 950px; min-width: 950px;
margin: 0 auto; margin: 0 auto;
font-size: var(--font-size); font-size: var(--font-size);
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
} }
a, u { a, u {
@ -109,7 +109,7 @@ a:link {
} }
.rssfeed img { .rssfeed img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
width: 5%; width: 5%;
float: right; float: right;
} }
@ -147,7 +147,7 @@ a:link {
} }
.hero-image img { .hero-image img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
width: 50%; width: 50%;
} }
@ -179,7 +179,7 @@ a:link {
} }
.hero-text img.emoji { .hero-text img.emoji {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
width: 50px; width: 50px;
padding: 0 0; padding: 0 0;
margin: 0 0; margin: 0 0;
@ -311,7 +311,7 @@ a:link {
} }
.container img.emoji { .container img.emoji {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: none; float: none;
width: 50px; width: 50px;
margin-left: 0px; margin-left: 0px;
@ -322,7 +322,7 @@ a:link {
} }
.hero-text img.emojiprofile { .hero-text img.emojiprofile {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: none; float: none;
width: 50px; width: 50px;
margin-left: 0px; margin-left: 0px;
@ -356,7 +356,7 @@ a:link {
} }
.container img.announceOrReply { .container img.announceOrReply {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: none; float: none;
width: 30px; width: 30px;
margin: 0 0; margin: 0 0;
@ -366,7 +366,7 @@ a:link {
} }
.container img.DMicon { .container img.DMicon {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: none; float: none;
width: 40px; width: 40px;
margin: 0 0; margin: 0 0;
@ -389,14 +389,14 @@ a:link {
} }
.container img.attachment { .container img.attachment {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
max-width: 120%; max-width: 120%;
margin-left: 5%; margin-left: 5%;
width: 120%; width: 120%;
padding-bottom: 3%; padding-bottom: 3%;
} }
.container img.right { .container img.right {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: var(--icons-side); float: var(--icons-side);
margin-left: 0px; margin-left: 0px;
margin-right:0; margin-right:0;
@ -404,7 +404,7 @@ a:link {
margin: 0 0; margin: 0 0;
} }
.containericons img.right { .containericons img.right {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: var(--icons-side); float: var(--icons-side);
margin-left: 20px; margin-left: 20px;
margin-right: 0; margin-right: 0;
@ -538,7 +538,7 @@ input[type=submit]:hover {
} }
.dropdown img { .dropdown img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
opacity: 1.0; opacity: 1.0;
width: 32px; width: 32px;
height: 32px; height: 32px;
@ -563,7 +563,7 @@ input[type=submit]:hover {
} }
.search-result img { .search-result img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
width: 7%; width: 7%;
padding: 0px 30px; padding: 0px 30px;
} }
@ -588,7 +588,7 @@ input[type=submit]:hover {
} }
.dropdown-content img { .dropdown-content img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
width: 32px; width: 32px;
height: 32px; height: 32px;
padding: 0px 0px; padding: 0px 0px;
@ -638,7 +638,7 @@ input[type=submit]:hover {
} }
.dropbtn img { .dropbtn img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
opacity: 1.0; opacity: 1.0;
width: 3%; width: 3%;
height: 3%; height: 3%;
@ -652,7 +652,7 @@ div.gallery:hover {
} }
div.gallery img { div.gallery img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
width: 100%; width: 100%;
height: auto; height: auto;
} }
@ -896,7 +896,7 @@ aside .toggle-inside li {
text-align: center; text-align: center;
} }
.container img { .container img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: left; float: left;
max-width: 400px; max-width: 400px;
width: 5%; width: 5%;
@ -905,12 +905,12 @@ aside .toggle-inside li {
border-radius: var(--image-corners); border-radius: var(--image-corners);
} }
.container img.emojisearch { .container img.emojisearch {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
width: 15%; width: 15%;
float: right; float: right;
} }
.container img.emojicalendar { .container img.emojicalendar {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: left; float: left;
max-width: 400px; max-width: 400px;
width: 8%; width: 8%;
@ -918,7 +918,7 @@ aside .toggle-inside li {
transform: translateY(-25%); transform: translateY(-25%);
} }
.container img.timelineicon { .container img.timelineicon {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: var(--icons-side); float: var(--icons-side);
margin-left: 0px; margin-left: 0px;
margin-right:0; margin-right:0;
@ -927,7 +927,7 @@ aside .toggle-inside li {
width: 50px; width: 50px;
} }
.container img.emojiheader { .container img.emojiheader {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: none; float: none;
width: 25px; width: 25px;
margin-left: 0px; margin-left: 0px;
@ -937,7 +937,7 @@ aside .toggle-inside li {
vertical-align: middle; vertical-align: middle;
} }
.containericons img { .containericons img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: var(--icons-side); float: var(--icons-side);
max-width: 200px; max-width: 200px;
width: 3%; width: 3%;
@ -945,7 +945,7 @@ aside .toggle-inside li {
border-radius: 0%; border-radius: 0%;
} }
div.mediaicons img { div.mediaicons img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: right; float: right;
max-width: 200px; max-width: 200px;
width: 6%; width: 6%;
@ -953,7 +953,7 @@ aside .toggle-inside li {
border-radius: 0%; border-radius: 0%;
} }
div.mediaavatar img { div.mediaavatar img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: left; float: left;
max-width: 200px; max-width: 200px;
width: 5%; width: 5%;
@ -961,7 +961,7 @@ aside .toggle-inside li {
border-radius: 0%; border-radius: 0%;
} }
.timeline-avatar img { .timeline-avatar img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
opacity: 1.0; opacity: 1.0;
width: 8%; width: 8%;
height: 8%; height: 8%;
@ -1217,24 +1217,24 @@ aside .toggle-inside li {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
.hero-text img.qrcode { .hero-text img.qrcode {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
border-radius: 1%; border-radius: 1%;
width: 5%; width: 5%;
min-width: 20px; min-width: 20px;
} }
.hero-text img.title { .hero-text img.title {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
border-radius: 1%; border-radius: 1%;
width: 15%; width: 15%;
} }
#msgscope label img { #msgscope label img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
width: 46px; width: 46px;
height: 46px; height: 46px;
padding: 0px 0px; padding: 0px 0px;
} }
.toggle-msgScope img { .toggle-msgScope img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
width: 32px; width: 32px;
height: 32px; height: 32px;
padding: 0px 0px; padding: 0px 0px;
@ -1310,7 +1310,7 @@ aside .toggle-inside li {
text-align: center; text-align: center;
} }
.container img { .container img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: left; float: left;
max-width: 400px; max-width: 400px;
width: 15%; width: 15%;
@ -1319,12 +1319,12 @@ aside .toggle-inside li {
border-radius: var(--image-corners); border-radius: var(--image-corners);
} }
.container img.emojisearch { .container img.emojisearch {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
width: 25%; width: 25%;
float: right; float: right;
} }
.container img.emojicalendar { .container img.emojicalendar {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: left; float: left;
max-width: 400px; max-width: 400px;
width: 12%; width: 12%;
@ -1332,7 +1332,7 @@ aside .toggle-inside li {
transform: translateY(-25%); transform: translateY(-25%);
} }
.container img.timelineicon { .container img.timelineicon {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: var(--icons-side); float: var(--icons-side);
margin-left: 0px; margin-left: 0px;
margin-right:0; margin-right:0;
@ -1341,7 +1341,7 @@ aside .toggle-inside li {
width: 100px; width: 100px;
} }
.container img.emojiheader { .container img.emojiheader {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: none; float: none;
width: 45px; width: 45px;
margin-left: 0px; margin-left: 0px;
@ -1351,7 +1351,7 @@ aside .toggle-inside li {
vertical-align: middle; vertical-align: middle;
} }
div.mediaavatar img { div.mediaavatar img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: left; float: left;
max-width: 200px; max-width: 200px;
width: 8%; width: 8%;
@ -1359,7 +1359,7 @@ aside .toggle-inside li {
border-radius: 0%; border-radius: 0%;
} }
div.mediaicons img { div.mediaicons img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: right; float: right;
max-width: 200px; max-width: 200px;
width: 10%; width: 10%;
@ -1367,7 +1367,7 @@ aside .toggle-inside li {
border-radius: 0%; border-radius: 0%;
} }
.containericons img { .containericons img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
float: var(--icons-side); float: var(--icons-side);
max-width: 200px; max-width: 200px;
width: 7%; width: 7%;
@ -1375,7 +1375,7 @@ aside .toggle-inside li {
border-radius: 0%; border-radius: 0%;
} }
.timeline-avatar img { .timeline-avatar img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
opacity: 1.0; opacity: 1.0;
width: 15%; width: 15%;
height: 15%; height: 15%;
@ -1631,24 +1631,24 @@ aside .toggle-inside li {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
.hero-text img.qrcode { .hero-text img.qrcode {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
border-radius: 1%; border-radius: 1%;
width: 15%; width: 15%;
min-width: 20px; min-width: 20px;
} }
.hero-text img.title { .hero-text img.title {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
border-radius: 1%; border-radius: 1%;
width: 25%; width: 25%;
} }
#msgscope label img { #msgscope label img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
width: 64px; width: 64px;
height: 64px; height: 64px;
padding: 0px 0px; padding: 0px 0px;
} }
.toggle-msgScope img { .toggle-msgScope img {
filter: grayscale(--grayscale); filter: grayscale(var(--grayscale));
width: 64px; width: 64px;
height: 64px; height: 64px;
margin: -15px 0px; margin: -15px 0px;