Простой вопрос, касающийся переопределения вложенного атрибута CSS.
Я попытался подойти к источнику этой таблицы стилей галереи, чтобы добраться до ее основы, но я просто не могу работатьмой способ обойти это.
Я просто пытаюсь изменить максимальную ширину и ширину
body.gallery .asset.is-landscape img
на новое значение, но, похоже, это не сработает, даже если приписать! Важный
здесьэто CSS, о котором я собираюсь сделать, чтобы внести указанное выше изменение в:
body.gallery .asset.is-landscape img, body.gallery .asset.is-square img, body.nested_gallery .asset.is-landscape img, body.nested_gallery .asset.is-square img {
max-width: 550px;
width: 80%;
}
Вот вся таблица стилей, в которой я тщательно попытался изменить элементы, которые, как мне казалось, могли повлиять на галерею вложенных тел, но безуспех.Не берите в голову, я, очевидно, не эксперт, это может быть что-то легко решить.
/*
------------------------------------------------------------------
Gallery Styles
------------------------------------------------------------------
*/
html.is-changing body.gallery .main, html.is-changing body.nested_gallery .main {
transform: translate3d(20px, 0, 0);
opacity: 0; }
body.gallery, body.nested_gallery {
overflow-y: hidden;
position: relative;
height: 100%; }
body.gallery .page-name-small, body.nested_gallery .page-name-small {
opacity: 1 !important;
pointer-events: auto !important;
top: -2px; }
body.gallery .breadcrumb-link.bottom, body.nested_gallery .breadcrumb-link.bottom {
-webkit-transition: opacity 250ms ease;
transition: opacity 250ms ease;
display: none;
position: fixed;
bottom: 10px;
left: 20px;
z-index: 96; }
body.gallery .breadcrumb-link.bottom.hidden, body.nested_gallery .breadcrumb-link.bottom.hidden {
opacity: 0; }
body.gallery .overview-icon-bottom, body.nested_gallery .overview-icon-bottom {
-webkit-transition: opacity 250ms ease;
transition: opacity 250ms ease;
display: none;
cursor: pointer;
position: fixed;
bottom: 9px;
right: 100px;
z-index: 96; }
body.gallery .overview-icon-bottom.hidden, body.nested_gallery .overview-icon-bottom.hidden {
opacity: 0;
pointer-events: none; }
body.gallery .assets-container, body.nested_gallery .assets-container {
-webkit-overflow-scrolling: touch;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-x: auto;
overflow-y: hidden; }
body.gallery .assets-container.is-draggable .asset.img img, body.nested_gallery .assets-container.is-draggable .asset.img img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
body.gallery .assets-container.is-draggable.is-dragging, body.nested_gallery .assets-container.is-draggable.is-dragging {
cursor: grabbing !important;
cursor: -moz-grabbing !important;
cursor: -webkit-grabbing !important; }
body.gallery .main, body.nested_gallery .main {
-webkit-transition: opacity 250ms ease, -webkit-transform 250ms ease;
transition: opacity 250ms ease, -webkit-transform 250ms ease;
transition: opacity 250ms ease, transform 250ms ease;
transition: opacity 250ms ease, transform 250ms ease, -webkit-transform 250ms ease;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1; }
body.gallery .main .assets-container, body.nested_gallery .main .assets-container {
display: flex;
height: 100vh; }
body.gallery .title-element, body.nested_gallery .title-element {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 50vw; }
body.gallery .title-element .text, body.nested_gallery .title-element .text {
position: relative;
max-width: 500px;
padding: 20px;
width: 80%; }
body.gallery .title-element img, body.nested_gallery .title-element img {
max-width: 600px;
width: 80%; }
body.gallery .cover-image, body.nested_gallery .cover-image {
display: flex;
flex-direction: column;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 50vw; }
body.gallery .cover-image.is-landscape img, body.gallery .cover-image.is-square img, body.nested_gallery .cover-image.is-landscape img, body.nested_gallery .cover-image.is-square img {
max-width: 600px;
width: 80%; }
body.gallery .cover-image.is-portrait img, body.nested_gallery .cover-image.is-portrait img {
max-height: 600px;
height: 80vh; }
body.gallery .caption, body.nested_gallery .caption {
max-width: 80%;
margin-top: 20px;
position: relative; }
body.gallery .caption p, body.nested_gallery .caption p {
margin: 0; }
body.gallery .caption p + p, body.nested_gallery .caption p + p {
margin-top: 1em; }
body.gallery .asset, body.nested_gallery .asset {
display: flex;
flex-direction: column;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 50vw; }
body.gallery .asset.is-landscape img, body.gallery .asset.is-square img, body.nested_gallery .asset.is-landscape img, body.nested_gallery .asset.is-square img {
max-width: 550px;
width: 80%; }
body.gallery .asset.is-portrait img, body.nested_gallery .asset.is-portrait img {
-o-object-fit: contain;
object-fit: contain;
max-height: 700px;
height: 64vh; }
body.gallery .asset.image img, body.gallery .asset.video img, body.nested_gallery .asset.image img, body.nested_gallery .asset.video img {
cursor: pointer; }
body.gallery .asset.video .video-thumb-container, body.nested_gallery .asset.video .video-thumb-container {
position: relative;
width: 80%;
max-width: 600px; }
body.gallery .asset.video .video-thumb-container .vimeo_cont, body.gallery .asset.video .video-thumb-container .youtube_cont, body.nested_gallery .asset.video .video-thumb-container .vimeo_cont, body.nested_gallery .asset.video .video-thumb-container .youtube_cont {
width: 100%; }
body.gallery .asset.video .video-thumb-container .video-play-icon, body.nested_gallery .asset.video .video-thumb-container .video-play-icon {
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
opacity: 0.9;
position: absolute;
top: 50%;
left: 50%;
margin-top: -23px;
margin-left: -23px; }
body.gallery .asset.video .video-thumb-container:hover .video-play-icon, body.nested_gallery .asset.video .video-thumb-container:hover .video-play-icon {
-webkit-transform: scale(1.08);
-ms-transform: scale(1.08);
transform: scale(1.08);
opacity: 1; }
body.gallery .asset.text .text-content, body.nested_gallery .asset.text .text-content {
max-width: 500px;
padding: 20px;
position: relative;
width: 80%; }
body.gallery .next-nested-page, body.nested_gallery .next-nested-page {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
width: 50vw; }
body.gallery .next-nested-page .nexted-nested-page-title, body.nested_gallery .next-nested-page .nexted-nested-page-title {
padding-left: 20px;
padding-right: 110px; }
body.gallery .next-nested-page .nexted-nested-page-title .title, body.nested_gallery .next-nested-page .nexted-nested-page-title .title {
color: #ffffff;
font-family: "Miller Banner Black", "Miller Banner Black", serif;
font-size: 19px;
font-weight: normal; }
body.gallery .next-nested-page .nexted-nested-page-title .see-more, body.nested_gallery .next-nested-page .nexted-nested-page-title .see-more {
color: rgba(40, 40, 40, 0.75);
font-size: 14px; }
body.gallery .next-nested-page.is-landscape img, body.gallery .next-nested-page.is-square img, body.nested_gallery .next-nested-page.is-landscape img, body.nested_gallery .next-nested-page.is-square img {
max-width: 600px;
width: 80%; }
body.gallery .next-nested-page.is-portrait img, body.nested_gallery .next-nested-page.is-portrait img {
max-height: 400px;
height: 80vh; }
body.gallery .next-nested-page .nexted-nested-page-cover-image, body.nested_gallery .next-nested-page .nexted-nested-page-cover-image {
transition: opacity 250ms ease;
transform: translate(100%, -50%);
opacity: 0.5;
position: absolute;
top: 50%;
right: 90px; }
body.gallery .next-nested-page:hover .nexted-nested-page-cover-image, body.nested_gallery .next-nested-page:hover .nexted-nested-page-cover-image {
opacity: 1; }
body.gallery .caption, body.nested_gallery .caption {
color: #282828;
font-size: 20px;
line-height: 2;
font-family: "Miller Banner Roman", "Miller Banner Roman", serif; }
body.gallery .gallery-zoom-container, body.nested_gallery .gallery-zoom-container {
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
pointer-events: none;
opacity: 0;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 97; }
body.gallery .gallery-zoom-container .vimeo_cont, body.gallery .gallery-zoom-container .youtube_cont, body.nested_gallery .gallery-zoom-container .vimeo_cont, body.nested_gallery .gallery-zoom-container .youtube_cont {
width: 85vw; }
body.gallery .gallery-zoom-container img.fit-h, body.nested_gallery .gallery-zoom-container img.fit-h {
width: 100vw !important;
height: auto !important; }
body.gallery .gallery-zoom-container img.fit-v, body.nested_gallery .gallery-zoom-container img.fit-v {
width: auto !important;
height: 100vh !important; }
body.gallery .gallery-zoom-container.landscape img, body.nested_gallery .gallery-zoom-container.landscape img {
width: auto;
height: 100vh; }
body.gallery .gallery-zoom-container.portrait img.is-landscape, body.nested_gallery .gallery-zoom-container.portrait img.is-landscape {
width: 100vw;
height: auto; }
body.gallery .gallery-zoom-container.portrait img.is-portrait, body.nested_gallery .gallery-zoom-container.portrait img.is-portrait {
width: auto;
height: 100vh; }
body.gallery .gallery-zoom-container.active, body.nested_gallery .gallery-zoom-container.active {
opacity: 1;
pointer-events: auto; }
body.gallery .gallery-counter, body.nested_gallery .gallery-counter {
-webkit-transition: opacity 250ms ease;
transition: opacity 250ms ease;
position: fixed;
bottom: 20px;
left: 0;
text-align: center;
width: 100%;
z-index: 96; }
body.gallery .gallery-counter.hidden, body.nested_gallery .gallery-counter.hidden {
opacity: 0; }
body.gallery .gallery-overview-overlay, body.nested_gallery .gallery-overview-overlay {
background: rgba(255, 255, 255, 0.75);
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
pointer-events: none;
opacity: 0;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 97; }
body.gallery .gallery-overview-overlay .gallery-overview-inner, body.nested_gallery .gallery-overview-overlay .gallery-overview-inner {
-webkit-overflow-scrolling: touch;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 20px; }
body.gallery .gallery-overview-overlay.active, body.nested_gallery .gallery-overview-overlay.active {
opacity: 1;
pointer-events: auto; }
body.gallery .gallery-overview-overlay.active .gallery-overview-inner, body.nested_gallery .gallery-overview-overlay.active .gallery-overview-inner {
overflow-y: auto; }
body.gallery .gallery-overview-overlay .overview-asset, body.nested_gallery .gallery-overview-overlay .overview-asset {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 500px;
margin: 40px;
padding: 50px;
width: calc(33.3333% - 80px); }
body.gallery .gallery-overview-overlay .overview-asset .overview-asset-content, body.nested_gallery .gallery-overview-overlay .overview-asset .overview-asset-content {
cursor: pointer;
position: relative;
max-height: 100%;
width: 100%; }
body.gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-left, body.nested_gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-left {
left: -50px;
margin-right: auto; }
body.gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-right, body.nested_gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-right {
left: 50px;
margin-left: auto; }
body.gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-top, body.nested_gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-top {
-ms-flex-item-align: start;
align-self: flex-start; }
body.gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-bottom, body.nested_gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-bottom {
-ms-flex-item-align: end;
align-self: flex-end; }
body.gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-h-center, body.nested_gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-h-center {
margin-left: auto;
margin-right: auto; }
body.gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-v-center, body.nested_gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-v-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-self: center; }
body.gallery .gallery-overview-overlay .overview-asset.text .text-content, body.nested_gallery .gallery-overview-overlay .overview-asset.text .text-content {
background: #ffffff;
border: 2px solid #282828;
padding: 50px 30px; }
body.gallery .gallery-overview-overlay .close-overview, body.nested_gallery .gallery-overview-overlay .close-overview {
font-size: 4rem;
color: #282828;
cursor: pointer;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -1rem; }
.is-changing .gallery-counter {
opacity: 0; }
Спасибо тому, кто нашел время, чтобы ответить и объяснить, где я сделал свои ошибки:)