did some touch ups, now the maquee should be actually working
This commit is contained in:
@@ -45,13 +45,14 @@
|
||||
display: flex;
|
||||
width: max-content;
|
||||
will-change: transform;
|
||||
animation: scrolling 20s linear infinite;
|
||||
animation: scrolling 5s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
.pexpo-core-comment-group {
|
||||
display: flex;
|
||||
gap: 100px;
|
||||
padding-right: 100px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
@@ -110,7 +111,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
max-width: 600px;
|
||||
box-shadow: #00000020 0px 5px 20px 0;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
@@ -199,6 +200,6 @@
|
||||
|
||||
@keyframes scrolling {
|
||||
to {
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
transform: translate3d(calc(-100% / var(--group-count)), 0, 0);
|
||||
}
|
||||
}
|
||||
204
public/css/register.css
Normal file
204
public/css/register.css
Normal file
@@ -0,0 +1,204 @@
|
||||
#pexpo-custom-comment-form {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pexpo-core-comments-title {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
color: #333;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.pexpo-core-comments-body:has(> .pexpo-core-comment-groups-wrapper) {
|
||||
margin: 0 auto;
|
||||
padding: 20px 0;
|
||||
max-width: 1500px;
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
black 80px,
|
||||
black calc(100% - 80px),
|
||||
transparent
|
||||
);
|
||||
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
black 80px,
|
||||
black calc(100% - 80px),
|
||||
transparent
|
||||
);
|
||||
|
||||
&:hover .pexpo-core-comment-groups-wrapper {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
.pexpo-core-comment-groups-wrapper {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
will-change: transform;
|
||||
animation: scrolling 20s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
.pexpo-core-comment-group {
|
||||
display: flex;
|
||||
gap: 100px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.pexpo-core-comment {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
width: 500px;
|
||||
color: #333;
|
||||
border-radius: 24px;
|
||||
box-shadow: rgba(0,0,0,0.1) 5px 5px 20px 0;
|
||||
padding: 20px 20px 50px 20px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.pexpo-core-comment-content {
|
||||
font-style: italic;
|
||||
font-size: 1.2rem;
|
||||
max-height: 250px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.pexpo-core-comment-said_by {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
padding-left: 30px;
|
||||
max-height: 50px;
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.comment-form:has(> .pexpo-core-com-form-wrapper) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 100px;
|
||||
|
||||
& .form-submit .submit {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.pexpo-core-com-form-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
box-shadow: #00000020 0px 5px 20px 0;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
margin-top: 50px;
|
||||
|
||||
& .pexpo-core-com-form-title {
|
||||
margin: 0 0 20px 0;
|
||||
font-size: 1.5rem;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& .pexpo-core-com-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
|
||||
& label {
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
& input, & textarea {
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
background-color: #00000010;
|
||||
font-size: 1rem;
|
||||
resize: vertical;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color: #00000020;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pexpo-core-com-consent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: left;
|
||||
font-size: 1.3rem;
|
||||
|
||||
& div {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
|
||||
& input[type="checkbox"] {
|
||||
width: auto;
|
||||
transform: scale(1.2);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pexpo-core-no-comments {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
color: #777;
|
||||
margin: 50px 0;
|
||||
}
|
||||
|
||||
.pexpo-core-submit-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 40px;
|
||||
|
||||
& .submit {
|
||||
background-image: linear-gradient(rgb(178, 34, 34) 21%, rgb(149, 0, 0) 87%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
padding: 10px 20px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes scrolling {
|
||||
to {
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user