/** * Copyright 2025 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ .pebble-screenshot { background-repeat: no-repeat; display: inline-block; height: 407px; padding: 112px 49px 127px; text-align: left; width: 242px; background-size: contain; } .pebble-screenshot--steel-black, .pebble-screenshot--steel-stainless { height: 424px; padding: 113px 50px 143px; width: 244px; } .pebble-screenshot--time-black, .pebble-screenshot--time-white, .pebble-screenshot--time-red { height: 350px; padding-top: 91px; padding-left: 50px; padding-right: 50px; padding-bottom: 91px; width: 244px; } .pebble-screenshot--time-round-black-20, .pebble-screenshot--time-round-silver-20 { height: 390px; padding-top: 110px; padding-left: 55px; padding-right: 54px; padding-bottom: 100px; width: 289px; } .pebble-screenshot--time-round-red-14, .pebble-screenshot--time-round-rosegold-14, .pebble-screenshot--time-round-silver-14 { height: 390px; padding-top: 107px; padding-left: 58px; padding-right: 56px; padding-bottom: 103px; width: 294px; } .pebble-screenshot--pebble2-black, .pebble-screenshot--pebble2-black-lime, .pebble-screenshot--pebble2-black-red, .pebble-screenshot--pebble2-white, .pebble-screenshot--pebble2-white-teal { height: 390px; padding-top: 103px; padding-left: 48px; padding-right: 86px; padding-bottom: 100px; width: 294px; } .pebble-screenshot--steel-black { background-image: url('/assets/images/pebbles/steel_black.png'); } .pebble-screenshot--steel-stainless { background-image: url('/assets/images/pebbles/steel_stainless.png'); } .pebble-screenshot--time-black { background-image: url('/assets/images/pebbles/snowy-black.png'); } .pebble-screenshot--time-red { background-image: url('/assets/images/pebbles/snowy-red.png'); } .pebble-screenshot--time-white { background-image: url('/assets/images/pebbles/snowy-white.png'); } .pebble-screenshot--red { background-image: url('/assets/images/pebbles/red.png'); } .pebble-screenshot--black { background-image: url('/assets/images/pebbles/black.png'); } .pebble-screenshot--orange { background-image: url('/assets/images/pebbles/orange.png'); } .pebble-screenshot--white { background-image: url('/assets/images/pebbles/white.png'); } .pebble-screenshot--grey { background-image: url('/assets/images/pebbles/grey.png'); } .pebble-screenshot--white-black { background-image: url('/assets/images/pebbles/white_black.png'); } .pebble-screenshot--time-round-black-20, .pebble-screenshot--time-round-silver-20 { background-image: url('/assets/images/pebbles/time-round-black-20.png'); } .pebble-screenshot--time-round-red-14, .pebble-screenshot--time-round-rosegold-14, .pebble-screenshot--time-round-silver-14 { background-image: url('/assets/images/pebbles/time-round-red-14.png'); } .pebble-screenshot--pebble2-black { background-image: url('/assets/images/pebbles/device_pebble2_black.png'); } .pebble-screenshot--pebble2-black-lime { background-image: url('/assets/images/pebbles/device_pebble2_blacklime.png'); } .pebble-screenshot--pebble2-black-red { background-image: url('/assets/images/pebbles/device_pebble2_blackred.png'); } .pebble-screenshot--pebble2-white { background-image: url('/assets/images/pebbles/device_pebble2_white.png'); } .pebble-screenshot--pebble2-white-teal { background-image: url('/assets/images/pebbles/device_pebble2_whiteteal.png'); } .pebble-screenshot--strapless { background-position: 0 -34px; height: 339px; padding-bottom: 93px; padding-top: 78px; &.pebble-screenshot--steel-black, &.pebble-screenshot--steel-stainless { background-position: 0 -50px; height: 324px; padding-top: 63px; } } .pebble-screenshot--smaller { &.pebble-screenshot--steel-black, &.pebble-screenshot--steel-stainless { height: 212px; padding: 56px 25px 72px; width: 122px; } &.pebble-screenshot--time-black, &.pebble-screenshot--time-white, &.pebble-screenshot--time-red { height: 175px; padding-top: 45px; padding-left: 25px; padding-right: 25px; padding-bottom: 45px; width: 122px; } &.pebble-screenshot--time-round-black-20, &.pebble-screenshot--time-round-red-14, &.pebble-screenshot--time-round-rosegold-14, &.pebble-screenshot--time-round-silver-14, &.pebble-screenshot--time-round-silver-20 { height: 175px; padding-top: 41px; padding-left: 17px; padding-right: 19px; padding-bottom: 42px; width: 128px; } } .pebble-screenshot--small { &.pebble-screenshot--steel-black, &.pebble-screenshot--steel-stainless { height: 318px; padding: 82px 38px 107px 37px; width: 183px; } &.pebble-screenshot--time-black, &.pebble-screenshot--time-white, &.pebble-screenshot--time-red { height: 263px; padding-top: 68px; padding-left: 37px; padding-right: 38px; padding-bottom: 68px; width: 183px; } &.pebble-screenshot--time-round-black-20, &.pebble-screenshot--time-round-red-14, &.pebble-screenshot--time-round-rosegold-14, &.pebble-screenshot--time-round-silver-14, &.pebble-screenshot--time-round-silver-20 { height: 263px; padding-top: 62px; padding-left: 26px; padding-right: 25px; padding-bottom: 64px; width: 188px; } } .screenshot-viewer { margin-bottom: 1rem; max-width: 100%; overflow-y: scroll; } .screenshot-viewer__screenshots { display: -webkit-flex; display: flex; align-items: flex-end; -webkit-align-items: flex-end; } .screenshot-viewer__platform { flex: 1 0 auto; -webkit-flex: 1 0 auto; text-align: center; margin-right: 1rem; &:last-child { margin-right: 0; } } .screenshot-viewer__tabs { display: -webkit-flex; display: flex; align-items: flex-end; -webkit-align-items: flex-end; h4 { background-color: $gray-02; color: $white; font-weight: normal; text-transform: uppercase; font-size: 1.2em; padding: 0.2em; margin-top: 0.5em; flex: 1 0 auto; -webkit-flex: 1 0 auto; text-align: center; margin-right: 1rem; &:last-child { margin-right: 0; } } } .screenshot-viewer--tabbed { .screenshot-viewer__tabs { h4 { border: 2px solid $gray-02; background-color: $gray-06; color: $gray-02; cursor: pointer; &.selected { background-color: $gray-02; color: $white; } } } }