-
{ box-sizing: border-box;
}
body {
background-color: #ebebeb; background-image: linear-gradient( 45deg, #f4f4f4 25%, transparent 25%, transparent 75%, #f4f4f4 75%, #f4f4f4 ), linear-gradient( 45deg, #f4f4f4 25%, transparent 25%, transparent 75%, #f4f4f4 75%, #f4f4f4 ); background-position: 0 0, 10px 10px; background-size: 20px 20px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0;
}
.InlineLink {
color: #000000; text-decoration: none;
}
.InlineLink:hover {
text-decoration: underline;
}
.InlineLink::after {
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMy45IDEyYzAtMS43MSAxLjM5LTMuMSAzLjEtMy4xaDRWN0g3Yy0yLjc2IDAtNSAyLjI0LTUgNXMyLjI0IDUgNSA1aDR2LTEuOUg3Yy0xLjcxIDAtMy4xLTEuMzktMy4xLTMuMXpNOCAxM2g4di0ySDh2MnptOS02aC00djEuOWg0YzEuNzEgMCAzLjEgMS4zOSAzLjEgMy4xcy0xLjM5IDMuMS0zLjEgMy4xaC00VjE3aDRjMi43NiAwIDUtMi4yNCA1LTVzLTIuMjQtNS01LTV6Ii8+PC9zdmc+); content: ''; display: inline-block; height: 24px; opacity: .2; vertical-align: middle; width: 24px; margin-left: 5px;
}
.InlineLink:hover::after {
opacity: 1;
}
.HappoDiffs__header {
align-items: baseline; background-color: #ffffff; box-shadow: 0 0 4px rgba(0, 0, 0, .3); display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px 10px 15px;
}
.HappoDiffs__header > * {
margin-right: 10px; margin-bottom: 5px;
}
.HappoDiffs__header > :last-child {
margin-right: 0;
}
.HappoDiffs__headerTitle {
margin: 0;
}
.HappoDiffs__main {
padding: 10px;
}
.Diff__images, .NewImage__image {
white-space: nowrap; max-width: 100%; overflow-x: auto;
}
.Diff__buttons {
margin-bottom: 5px;
}
.Diff__button {
border: 1px solid #ccc; border-left-width: 0; background-color: #f0f0f0; padding: 10px 20px; cursor: pointer;
}
.Diff__button {
background-color: #666; border-color: #444; color: white;
}
.Diff__button–first {
border-left-width: 1px; border-radius: 3px 0 0 3px;
}
.Diff__button–last {
border-radius: 0 3px 3px 0;
}
.Swiper {
display: inline-block; line-height: 0; position: relative;
}
.Swiper__cursor {
box-shadow: 0px 0px 2px 0px #ffffff; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background-color: #666666; pointer-events: none;
}
.Swiper__image {
left: 0; overflow: hidden; pointer-events: none; position: absolute; top: 0;
}
.SideBySide__image {
vertical-align: top;
}
.SmoothProgress {
overflow: hidden; height: 10px; width: 100%; max-width: calc(100vw - 20px); border: 1px solid #cccccc; border-radius: 5px; transition: opacity 1s;
}
.SmoothProgress__bar {
background-color: rgba(179, 54, 130, .5); height: 100%; width: 100%; transition: transform 1s ease-in-out;
}