Aboammar: test

2024-05-19T09:46:22Z

test

صفحهٔ تازه

/* .content-improvement-box */
.content-improvement-box {
display: flex;
flex-flow: wrap column;
margin: 0 -0.5rem;
}

/* .content-improvement-problems */
.content-improvement-problems,
.content-improvement-invitation {
margin: 0 0.5rem;
}

.content-improvement-problems {
order: 2;
display: flex;
flex-wrap: wrap;
margin: -0.5rem 0;
padding-top: 1rem;
}

.content-improvement-item {
flex: 1 2 auto;
padding: 0.5rem;
width: 100%;
}

body.skin-vector-2022 .content-improvement-item:last-child {
display: none;
}

/** .content-improvement-item color modifier **/
.content-improvement-item.-color-red > a {
border-bottom: 5px solid #dd3333;
}

.content-improvement-item.-color-red > a:hover,
.content-improvement-item.-color-red > a:focus {
background-color: #dd3333;
}

.content-improvement-item.-color-blue > a {
border-bottom: 5px solid #36c;
}

.content-improvement-item.-color-blue > a:hover,
.content-improvement-item.-color-blue > a:focus {
background-color: #36c;
}

.content-improvement-item.-color-green > a {
border-bottom: 5px solid #00af89;
}

.content-improvement-item.-color-green > a:hover,
.content-improvement-item.-color-green > a:focus {
background-color: #00af89;
}

.content-improvement-item.-color-gray > a {
border-bottom: 5px solid #a2a9b1;
}

.content-improvement-item.-color-gray > a:hover,
.content-improvement-item.-color-gray > a:focus {
background-color: #a2a9b1;
}

/** .content-improvement-item > a **/
.content-improvement-item > a {
box-sizing: border-box;
position: relative;
z-index: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
overflow: hidden;
padding: 0.5rem 1rem 1rem;
width: 100%;
height: 100%;
color: inherit;
background: #f7f7f7;
text-decoration: none;
transition: color .1s ease-in-out, background .1s ease-in-out, box-shadow .1s ease-in-out, opacity .1s ease-in-out;
}

.content-improvement-item > a:hover,
.content-improvement-item > a:focus {
color: #fff;
box-shadow: 0 2px 5px #ccc;
}

.content-improvement-item > a:active {
opacity: 0.7;
box-shadow: 0 4px 7px #ccc;
}

.content-improvement-item > a::before {
content: "";
position: absolute;
z-index: -1;
top: 50%;
right: 0.75rem;
transform: translateY(-50%);
width: 100%;
height: 90%;
background-size: contain;
background-position: right;
background-repeat: no-repeat;
opacity: 0.02;
transition: opacity .1s ease-in-out;
}

.content-improvement-item > a:hover::before,
.content-improvement-item > a:focus::before {
opacity: 0.08;
}

.content-improvement-item > a > span {
display: block;
width: 100%;
}

.content-improvement-item > a > span:nth-child(2) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.content-improvement-item__number {
font-weight: bold;
font-size: 1.8em;
padding-right: 0.25em;
}

/* .content-improvement-invitation */
.content-improvement-invitation {
order: 1;
padding: 1rem;
background: #f7f7f7;
}

.content-improvement-invitation__icon {
margin: 0 0 0.5em 0.75em;
float: right;
width: 5rem;
height: 5rem;
background-size: 5rem;
background-position: center;
background-repeat: no-repeat;
}

body.skin-vector-2022 .content-improvement-invitation__icon {
width: 4.35rem;
height: 4.35rem;
background-size: 4.35rem;
}

.content-improvement-invitation__title {
font-weight: bold;
font-size: 1.1em;
}

.content-improvement-invitation__content p:last-child {
margin-bottom: 0;
}

.content-improvement-invitation__button {
padding: 0.75rem 0 0.45rem;
}

/* responsive */
@media (min-width: 768px) {
/* .content-improvement-problems */
.content-improvement-item {
width: 40%;
}
}

@media (min-width: 992px) {
/* .content-improvement-box */
.content-improvement-box {
flex-direction: row;
}

/* .content-improvement-problems */
.content-improvement-problems {
flex: 2;
order: 1;
padding-top: 0;
}

body.skin-vector-2022 .content-improvement-problems {
flex: 5;
}

/* .content-improvement-invitation */
.content-improvement-invitation {
flex: 1;
order: 2;
}

body.skin-vector-2022 .content-improvement-invitation {
flex: 3;
}
}

@media (min-width: 1200px) {
/* .content-improvement-problems */
body:not(.skin-vector-2022) .content-improvement-item {
width: 30%;
}
}

html.skin-theme-clientpref-night .content-improvement-item > a {
background: inherit;
}

الگو:Islamical2023/Improved content/styles.css - تاریخچهٔ نسخه‌ها

Aboammar: test