All seems fine, until hovering over discussions....😅at which point the hover effect kicks in but the whole page tweaks out.
Example:
See it in action
Between me and the AIs, we've made a bit of a mess here.
//DISCUSSION LIST//
.DiscussionListItem-content:hover {
transition: all 0.2s ease-in-out;
transform: scale(1.01);
background: linear-gradient(130deg, #6666ff, #00ff99, #ffcc66, #6666ff, #00ff99, #ffcc66, #6666ff, #00ff99, #ffcc66);
color: gold;
font-variant: small-caps;
font-size: 22px !important;
font-weight: 900 !important;
font-family: "Font Awesome 5 Free", Garamond, serif;
text-shadow: 0 0 1px black, 0 0 2px black, 0 0 3px black, 0 0 4px black, 0 0 5px black, 0 0 6px black, 0 0 7px black;
background-size: 1800% 1800%;
animation: rainbow 35s ease infinite;
}
@keyframes rainbow {
0% {background-position: 0% 62%;}
50% {background-position: 80% 19%;}
100% {background-position: 0% 62%;}
}
.DiscussionListItem {
background: rgba(153, 153, 255, 0.2);
color: white;
font-variant: small-caps;
transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}
.DiscussionListItem:hover {
transform: scale(1.01);
}
.DiscussionListItem-content {
color: white;
font-variant: small-caps;
}
.DiscussionListItem-title {
color: white;
font-variant: small-caps;
font-family: Garamond, serif;
font-size: 20px;
transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;
}
.DiscussionListItem-title:hover {
color: #ffd700;
font-size: 22px;
}
@media (max-width: 767.98px) {
.DiscussionListItem-title {
color: white;
font-variant: small-caps;
font-family: Garamond, serif;
font-size: 20px;
text-decoration: none;
}
.DiscussionListItem-title:hover {
color: #ffd700;
font-size: 22px;
}
}
.DiscussionListItem-info {
font-family: Garamond, serif;
font-size: 12px;
}
:root {
--border-radius: 5px;
--discussion-title-color: gold;
}
.DiscussionListItem-author .Avatar {
filter: drop-shadow(0px 0px 5px white);
transition: filter 0.3s ease-in-out;
}
.DiscussionListItem-author .Avatar:hover {
filter: drop-shadow(0px 0px 10px gold);
}
.DiscussionListItem-info .username {
color: black;
font-variant: small-caps;
font-family: Garamond, serif;
font-size: 15px;
font-weight: 600;
text-shadow:0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white;
transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
}
.DiscussionListItem-info .username:hover {
color: white;
font-variant: small-caps;
text-shadow: 0 0 1px gold, 0 0 2px gold, 0 0 3px gold, 0 0 4px gold;
}
.container {
margin-left: 15px;
margin-right: 15px;
width: auto;
transition: margin 0.3s ease-in-out, padding 0.3s ease-in-out, width 0.3s ease-in-out;
}
.DiscussionList-loadMore button {
width: 95%;
border-radius: 5px 5px 5px 5px;
background: linear-gradient(130deg, #6666ff, #00ff99, #ffcc66);
color: black;
font-variant: small-caps;
font-size: 20px !important;
font-weight: 900 !important;
font-family: Garamond, serif;
text-shadow: 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white, 0 0 5px white, 0 0 6px white;
background-size: 1800% 1800%;
animation: rainbow 35s ease infinite;
}
@keyframes rainbow {
0% {background-position: 0% 62%;}
50% {background-position: 80% 19%;}
100% {background-position: 0% 62%;}
}
//DISCUSSION LIST//
Tried getting coding AIs to correct this, except they keep making it even worse.
Is it the padding?
Or the margins?
Or both?
Or something else?
//EDIT: It must have something to do with:
.container {
margin-left: 0px;
margin-right: 0px;
width: auto;
transition: margin 0.3s ease-in-out, padding 0.3s ease-in-out, width 0.3s ease-in-out;
}
Tried variations of:
margin-left: #px;
margin-right: #px;
position: scroll;
position: relative;
position: fixed;
position: absolute;
left: #px;
right: #px;
display: flex;
flex-direction: column;
...and more.
