قرینه از
https://github.com/matomo-org/matomo.git
synced 2025-08-22 06:57:53 +00:00
f8315a8a9e
* Add visual test for add to cart button * Update screenshots for add to cart * Update screenshots for add to cart * Update screenshots for add to cart * Update plugins/Marketplace/tests/UI/Marketplace_spec.js Co-authored-by: Marc Neudert <marc@innocraft.com> * Change CSS to support older browsers, fix broken HTML * Build vue files * retrigger checks * Add images for screenshot tests * Delete old screenshots with incorrect name --------- Co-authored-by: Marc Neudert <marc@innocraft.com> Co-authored-by: caddoo <caddoo@users.noreply.github.com>
609 خطوط
14 KiB
Plaintext
609 خطوط
14 KiB
Plaintext
.pluginDetails {
|
|
font-size: 13px;
|
|
text-align: left;
|
|
line-height: 20px;
|
|
|
|
> .row > .col {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
#pluginDetailsTabs > .col {
|
|
padding: 0 16px 0 0;
|
|
}
|
|
|
|
h3, h4, h5, h6 {
|
|
margin: 20px 0 10px 0;
|
|
color: #000000;
|
|
}
|
|
|
|
iframe{
|
|
width:100%;
|
|
border: 0;
|
|
background-image: url('plugins/Morpheus/images/loading-blue.gif');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
blockquote {
|
|
margin: 20px 0;
|
|
padding-left: 1.5rem;
|
|
border-left: 5px solid #ee6e73;
|
|
}
|
|
|
|
.tab-content ul, .tab-content ol {
|
|
list-style: initial;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
p, .tab-content ul, .tab-content li {
|
|
text-align: left;
|
|
line-height: 20px;
|
|
list-style: initial;
|
|
}
|
|
|
|
#pluginDetailsTabs {
|
|
border-right: 1px solid silver;
|
|
margin-top: 25px;
|
|
}
|
|
|
|
// some plugins receive inline style from the marketplace
|
|
// override them for consistency
|
|
.main-div-readme {
|
|
display: flex;
|
|
}
|
|
|
|
.left-div-readme {
|
|
width: 50%;
|
|
}
|
|
|
|
.right-div-readme {
|
|
flex-grow: initial;
|
|
width: 48%;
|
|
}
|
|
|
|
.contentDetails p {
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.description {
|
|
padding-right: 25px;
|
|
}
|
|
|
|
.metadata {
|
|
padding-left: 0.75rem;
|
|
|
|
// -1px to force overlapping border overlapping with content
|
|
margin-left: calc(~"0.75rem - 1px");
|
|
border-left: 1px solid silver;
|
|
|
|
// prevent text overflow
|
|
word-break: break-word;
|
|
}
|
|
|
|
.variationPicker {
|
|
margin-top: 0;
|
|
margin-bottom: 15px;
|
|
input.select-dropdown {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
.contentDetails a {
|
|
color: @theme-color-link;
|
|
}
|
|
|
|
.download,
|
|
.install {
|
|
padding: 11px 19px;
|
|
margin-bottom: 20px;
|
|
font-size: 17.5px;
|
|
-webkit-border-radius: 6px;
|
|
-moz-border-radius: 6px;
|
|
border-radius: 6px;
|
|
color: #ffffff;
|
|
background-color: #5bb75b;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.download:hover,
|
|
.install:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
dt {
|
|
line-height: 20px;
|
|
}
|
|
dd {
|
|
margin-left: 10px;
|
|
line-height: 20px;
|
|
color: @theme-color-text-contrast;
|
|
}
|
|
|
|
.featuredIcon {
|
|
height: 16px;
|
|
width: 16px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
// plugin details modal
|
|
#pluginDetailsModal {
|
|
max-height: 80vh;
|
|
color: #000;
|
|
|
|
width: 60%;
|
|
|
|
@media (max-width: 1200px) {
|
|
width: 75%;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
width: 90%;
|
|
max-height: 90vh;
|
|
top: 5% !important; // required to override inline style set by the modal
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
// full screen takeover
|
|
min-width: 100vw;
|
|
min-height: 100vh;
|
|
top: 0 !important; // required to override inline style set by the modal
|
|
}
|
|
|
|
.btn-close {
|
|
z-index: 100;
|
|
}
|
|
|
|
.star-icon {
|
|
height: 24px;
|
|
width: 24px;
|
|
margin-right: 4px;
|
|
vertical-align: unset;
|
|
}
|
|
|
|
.modal-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
padding: 0;
|
|
max-height: 80vh;
|
|
|
|
@media (max-width: 992px) {
|
|
max-height: 90vh;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
// full screen takeover
|
|
min-height: 100vh;
|
|
}
|
|
|
|
&--simple-header {
|
|
.modal-content__header {
|
|
height: 90px;
|
|
}
|
|
|
|
.modal-content__main {
|
|
max-height: calc(~"80vh - 180px");
|
|
|
|
@media (max-width: 992px) {
|
|
max-height: calc(~"90vh - 180px");
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
// full screen takeover
|
|
min-height: calc(~"100vh - 180px");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-content__header {
|
|
padding: 24px 24px 0;
|
|
height: 160px;
|
|
|
|
@media (max-width: 600px) {
|
|
height: 160px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 32px;
|
|
line-height: 48px;
|
|
font-weight: 700;
|
|
color: black;
|
|
padding-top: 0;
|
|
|
|
@media (max-width: 600px) {
|
|
font-size: 24px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
@media (max-width: 320px) {
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
|
|
.reviews-icon {
|
|
vertical-align: bottom;
|
|
// equivalent to #F6DA50 from https://isotropic.co/tool/hex-color-to-css-filter/
|
|
filter: invert(68%) sepia(54%) saturate(424%) hue-rotate(13deg) brightness(110%) contrast(102%);
|
|
}
|
|
|
|
.plugin-metadata-part1 {
|
|
dl {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: flex-start;
|
|
gap: 36px;
|
|
|
|
@media (max-width: 600px) {
|
|
gap: 24px;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
gap: 4px;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
dt {
|
|
flex-basis: 100%;
|
|
margin: 4px 0 0;
|
|
font-size: 12px;
|
|
line-height: 22px;
|
|
|
|
@media (max-width: 320px) {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
dd {
|
|
flex-basis: 100%; /* Use full width */
|
|
margin: 0; /* Remove default margin */
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
|
|
@media (max-width: 600px) {
|
|
font-size: 14px;
|
|
}
|
|
|
|
@media (max-width: 320px) {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
.pair {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
a {
|
|
color: #000;
|
|
|
|
&:hover {
|
|
color: @theme-color-link;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-content__main {
|
|
position: relative;
|
|
overflow-y: scroll;
|
|
max-height: calc(~"80vh - 250px");
|
|
padding: 0 24px 24px;
|
|
color: #000;
|
|
|
|
@media (max-width: 992px) {
|
|
max-height: calc(~"90vh - 250px");
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
max-height: calc(~"100vh - 250px");
|
|
}
|
|
|
|
&--with-free-trial {
|
|
@media (max-width: 660px) {
|
|
max-height: calc(~"90vh - 270px");
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
max-height: calc(~"100vh - 270px");
|
|
}
|
|
}
|
|
|
|
h2, h3, h4, h5, h6 {
|
|
margin: 20px 0 10px 0;
|
|
color: #000000;
|
|
}
|
|
|
|
// h2 should not appear in the content but at it does for some plugins
|
|
h2, h3 {
|
|
font-size: 24px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 20px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
iframe{
|
|
width:100%;
|
|
border: 0;
|
|
background-image: url('plugins/Morpheus/images/loading-blue.gif');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
blockquote {
|
|
margin: 20px 0;
|
|
padding-left: 1.5rem;
|
|
border-left: 5px solid #ee6e73;
|
|
}
|
|
|
|
ul, ol {
|
|
list-style: initial;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
p, ul, li {
|
|
text-align: left;
|
|
line-height: 20px;
|
|
list-style: initial;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
a {
|
|
color: @theme-color-link;
|
|
}
|
|
|
|
img {
|
|
max-width: 95%;
|
|
}
|
|
|
|
// styles for main content from marketplace
|
|
.main-div-readme {
|
|
display: flex;
|
|
}
|
|
|
|
.left-div-readme {
|
|
width: 50%;
|
|
}
|
|
|
|
.right-div-readme {
|
|
flex-grow: 1;
|
|
width: 50%;
|
|
}
|
|
|
|
.plugin-metadata-part2 {
|
|
dl {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
dt {
|
|
font-weight: 700;
|
|
min-width: 15%;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
dd {
|
|
text-align: right;
|
|
}
|
|
|
|
.pair {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #aaa;
|
|
|
|
&:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.plugin-screenshots {
|
|
.thumbnails {
|
|
text-align: center;
|
|
|
|
figure {
|
|
margin: 24px auto;
|
|
background: #f7f7f7;
|
|
border: 24px solid #f7f7f7;
|
|
border-bottom-width: 16px;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
figcaption {
|
|
padding: 16px 0 0;
|
|
text-align: left;
|
|
line-height: 24px;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
|
|
hr {
|
|
height: 1px;
|
|
overflow: hidden;
|
|
background-image: url('plugins/Marketplace/images/divider.svg');
|
|
border: 0;
|
|
margin: 36px 0;
|
|
}
|
|
}
|
|
|
|
.modal-content__footer {
|
|
padding: 24px;
|
|
height: 90px;
|
|
border-top: 1px solid #aaa;
|
|
margin-top: 1px; // to prevent images overflowing the border
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.cta-container {
|
|
width: 30%;
|
|
|
|
@media (max-width: 992px) {
|
|
width: 50%;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
width: 60%;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
width: 70%;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.matomo-badge-modal {
|
|
position: initial;
|
|
width: 64px;
|
|
height: 40px;
|
|
|
|
@media (max-width: 480px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&--with-free-trial {
|
|
@media (max-width: 660px) {
|
|
padding: 16px 24px;
|
|
height: 110px;
|
|
}
|
|
|
|
.cta-container-modal {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.cta-container {
|
|
width: 100%;
|
|
margin-left: 1rem;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
box-sizing: border-box;
|
|
|
|
.free-trial {
|
|
display: flex;
|
|
}
|
|
|
|
.free-trial-lead-in {
|
|
color: #5bb75b;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
display: flex;
|
|
text-align: right;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
flex-wrap: wrap;
|
|
align-content: center;
|
|
justify-content: flex-end;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.free-trial-dropdown {
|
|
width: 240px;
|
|
height: 36px;
|
|
vertical-align: top;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.addToCartLink {
|
|
width: auto;
|
|
max-width: 240px;
|
|
vertical-align: top;
|
|
padding: 0 1rem;
|
|
margin-left: 1rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@media (max-width: 660px) {
|
|
margin-left: 0;
|
|
flex-direction: column; /* Stack items vertically */
|
|
justify-content: flex-start; /* Align items to the start */
|
|
|
|
.free-trial-lead-in {
|
|
width: 50%;
|
|
}
|
|
|
|
.free-trial-dropdown {
|
|
width: 50%;
|
|
}
|
|
|
|
.addToCartLink {
|
|
width: 50%;
|
|
min-width: 50%;
|
|
margin-top: 10px; /* space between rows */
|
|
margin-left: 0;
|
|
align-self: flex-end;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
.addToCartLink {
|
|
width: 100%;
|
|
min-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.matomo-badge-modal {
|
|
position: initial;
|
|
|
|
@media (max-width: 767px) {
|
|
width: 48px;
|
|
height: 32px;
|
|
}
|
|
|
|
@media (max-width: 660px) {
|
|
display: initial;
|
|
position: absolute;
|
|
bottom: 16px;
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|