@charset "UTF-8"; /* !!! Don't modify these files manually !!! instead run the following script: ./webapp/scripts/generate_css_imports.js */ /** Like opacify * (http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#opacify-instance_method) * but increases the opacity to exactly 1.0. */ /** * Emit a background-color property with a opaque color fallback for * browsers that don't support the colors with alpha * (http://caniuse.com/css3-colors). * * $solidColor is optional. If not specified, we'll generate an opaque version * of $color. Rule of thumb: Only specify $solidColor when the alpha component * of $color is < 0.8. */ /** * Emit a background property with a linear gradient and a solid color * fallback for browsers that don't support gradients * (http://caniuse.com/css-gradients). */ /* * http://compass-style.org/reference/compass/utilities/general/clearfix/#mixin-clearfix */ /* * http://compass-style.org/reference/compass/utilities/general/clearfix/#mixin-pie-clearfix */ /** * Mixin to add a media-query based on the number of columns that are visible. * @param {number} lower-bound number of columns * @param {number} upper-bound number of columns, defaults to the lower-bound * * Usage: * @include columns-query(3) to target layouts with 3 columns * If $numColumnsBegin is equal to the minimum number of columns, it is * assumed that the query applies to viewport sizes smaller than minColumns, * and will begin at 0. * @include columns-query(3, 5) to target layouts with 3-5 columns */ /* * hover-mask styles the image-overlay that lightens on hover and darkens on active. */ /* Default is for desktop. Mobile can specify pinWidth and fontSize */ /* * inner-shadow-container is a mixin that allows us to apply an inset shadow * easily over an image. * */ @-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* Gestalt global CSS */ /* DEPRECATED - use Gestalt components instead */ /* Border lines */ .border { border: 1px solid #efefef; } .border-top { border-top: 1px solid #efefef; } .border-right { border-right: 1px solid #efefef; } .border-bottom { border-bottom: 1px solid #efefef; } .border-left { border-left: 1px solid #efefef; } .no-border { border: 0; } /* Border radii */ .square { border-radius: 0; } .circle { border-radius: 50%; } .rounded { border-radius: 8px; } .rounded-top { border-radius: 8px 8px 0 0; } .rounded-right { border-radius: 0 8px 8px 0; } .rounded-bottom { border-radius: 0 0 8px 8px; } .rounded-left { border-radius: 8px 0 0 8px; } /* blue */ .blue { color: #0084ff; } .blue-hover:hover { color: #0084ff; } .bg-blue { background-color: #0084ff; } /* dark-gray */ .dark-gray { color: #555; } .dark-gray-hover:hover { color: #555; } /* gray */ .gray { color: #b5b5b5; } .bg-gray { background-color: #b5b5b5; } /* red */ .red { color: #bd081c; } .bg-red { background-color: #bd081c; } .bg-red-active:active { background-color: #a3081a; } .bg-red-focus:focus { background-color: #ad081b; } .bg-red-hover:hover { background-color: #bd081c; } /* super-light-gray */ .bg-super-light-gray { background-color: #efefef; } /* white */ .white { color: #fff; } .bg-white { background-color: #fff; } /* yellow */ .yellow { color: #fab904; } .bg-yellow { background-color: #fab904; } /* olive */ .olive { color: #364a4c; } /* columns */ .col, .xs-col { display: inline-block; vertical-align: top; } .col-1, .xs-col-1 { width: 8.33333%; } .col-2, .xs-col-2 { width: 16.66667%; } .col-3, .xs-col-3 { width: 25%; } .col-4, .xs-col-4 { width: 33.33333%; } .col-5, .xs-col-5 { width: 41.66667%; } .col-6, .xs-col-6 { width: 50%; } .col-7, .xs-col-7 { width: 58.33333%; } .col-8, .xs-col-8 { width: 66.66667%; } .col-9, .xs-col-9 { width: 75%; } .col-10, .xs-col-10 { width: 83.33333%; } .col-11, .xs-col-11 { width: 91.66667%; } .col-12, .xs-col-12 { width: 100%; } @media (min-width: 360px) { .sm-col-1 { width: 8.33333%; } .sm-col-2 { width: 16.66667%; } .sm-col-3 { width: 25%; } .sm-col-4 { width: 33.33333%; } .sm-col-5 { width: 41.66667%; } .sm-col-6 { width: 50%; } .sm-col-7 { width: 58.33333%; } .sm-col-8 { width: 66.66667%; } .sm-col-9 { width: 75%; } .sm-col-10 { width: 83.33333%; } .sm-col-11 { width: 91.66667%; } .sm-col-12 { width: 100%; } } @media (min-width: 800px) { .md-col-1 { width: 8.33333%; } .md-col-2 { width: 16.66667%; } .md-col-3 { width: 25%; } .md-col-4 { width: 33.33333%; } .md-col-5 { width: 41.66667%; } .md-col-6 { width: 50%; } .md-col-7 { width: 58.33333%; } .md-col-8 { width: 66.66667%; } .md-col-9 { width: 75%; } .md-col-10 { width: 83.33333%; } .md-col-11 { width: 91.66667%; } .md-col-12 { width: 100%; } } @media (min-width: 1312px) { .lg-col-1 { width: 8.33333%; } .lg-col-2 { width: 16.66667%; } .lg-col-3 { width: 25%; } .lg-col-4 { width: 33.33333%; } .lg-col-5 { width: 41.66667%; } .lg-col-6 { width: 50%; } .lg-col-7 { width: 58.33333%; } .lg-col-8 { width: 66.66667%; } .lg-col-9 { width: 75%; } .lg-col-10 { width: 83.33333%; } .lg-col-11 { width: 91.66667%; } .lg-col-12 { width: 100%; } } /* cursor */ .pointer { cursor: pointer; } .zoom-in { cursor: zoom-in; } .zoom-out { cursor: zoom-out; } /* floats */ .pull-left { float: left; } .pull-right { float: right; } .clearfix::before, .clearfix::after { content: " "; display: table; } .clearfix::after { clear: both; } /* display */ .block { display: block; } .inline { display: inline; } .inline-block { display: inline-block; } .table { display: table; } .table-cell { display: table-cell; } /* overflow */ .overflow-hidden { overflow: hidden; } .overflow-scroll { overflow: scroll; } .overflow-auto { overflow: auto; } .fit { max-width: 100%; } /* position */ .relative { position: relative; } .fixed { position: fixed; } .absolute { position: absolute; } .top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } /* box model */ .border-box { box-sizing: border-box; } .flex { display: -webkit-box; display: -ms-flexbox; display: flex; } @media (min-width: 360px) { .sm-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media (min-width: 800px) { .md-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media (min-width: 1312px) { .lg-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } } .flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .items-start { -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; } .items-end { -webkit-box-align: end; -ms-flex-align: end; -ms-grid-row-align: flex-end; align-items: flex-end; } .items-center { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; -ms-grid-row-align: baseline; align-items: baseline; } .items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; } .self-start { -ms-flex-item-align: start; align-self: flex-start; } .self-end { -ms-flex-item-align: end; align-self: flex-end; } .self-center { -ms-flex-item-align: center; align-self: center; } .self-baseline { -ms-flex-item-align: baseline; align-self: baseline; } .self-stretch { -ms-flex-item-align: stretch; align-self: stretch; } .justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .justify-around { -ms-flex-pack: distribute; justify-content: space-around; } .content-start { -ms-flex-line-pack: start; align-content: flex-start; } .content-end { -ms-flex-line-pack: end; align-content: flex-end; } .content-center { -ms-flex-line-pack: center; align-content: center; } .content-between { -ms-flex-line-pack: justify; align-content: space-between; } .content-around { -ms-flex-line-pack: distribute; align-content: space-around; } .content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; } /* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */ .flex-auto { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; /* 1 */ min-width: 0; /* 1 */ } .flex-none { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .order-first { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .order-last { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } /* formatting */ .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } .bold { font-weight: bold; } .regular { font-style: normal; } .italic { font-style: italic; } .underline { text-decoration: underline; } /* lists */ .list-style-none { list-style: none; } /* text overflow */ .no-wrap { white-space: nowrap; } .break-word { -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; word-wrap: break-word; } .truncate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* styles */ .sans-serif { font-family: "Helvetica Neue", Helvetica, "\30D2\30E9\30AE\30CE\89D2\30B4 Pro W3", "Hiragino Kaku Gothic Pro", "\30E1\30A4\30EA\30AA", Meiryo, "\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF", arial, sans-serif; } .antialiased { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } /* scale */ .text-xs, .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.primary span.buttonText, .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits .storyCredits .creditFooter, .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .creditItem, .Pin .creditFooter { font-size: 10px; letter-spacing: -0.025px; line-height: 11px; word-spacing: 0; } :lang(ja) .text-xs, :lang(ja) .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.remove :lang(ja) span.buttonText, :lang(ja) .news .pending .actions .Button.primary span.buttonText, .news .pending .actions .Button.primary :lang(ja) span.buttonText, :lang(ja) .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .Typeahead.typeaheadWithTitles li a.titleItem :lang(ja) .typeaheadName, :lang(ja) .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .storyCreditWrapper :lang(ja) .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits :lang(ja) .storyCredits > .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits .creditFooter, .ExploreStoryCredits .storyCredits :lang(ja) .creditFooter, :lang(ja) .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .pinCreditWrapper :lang(ja) .creditItem, :lang(ja) .Pin.summary .pinCredits > .creditItem, .Pin.summary :lang(ja) .pinCredits > .creditItem, :lang(ja) .Pin .creditFooter, .Pin :lang(ja) .creditFooter { font-size: 8.6px; } .text-s, .FirstPinCreate .Pin.summary .pinMeta .TextField, .Board .boardName .boardPinCount, .Board .boardName.hasBoardContext .User.boardRepTitle .fullname, .Board .boardName.hasBoardContext .User.exploreTabTitle .fullname, .BoardHeader .belowBoardNameContainer .followerCount, .BoardHeader .belowBoardNameContainer .pinCount, .BoardInfoBar .pinsAndFollowerCount .value, .BoardInfoBar .pinsAndFollowerCount .label, .PinCreate .Pin.summary .pinMeta .TextField, .text-sm { font-size: 11px; letter-spacing: -0.05px; line-height: 12px; word-spacing: 0; } :lang(ja) .text-sm { font-size: 9.5px; } .text-m, .Button.boardSettingsButton .buttonText, .Modal .formFooter .Button.rounded:not(.primary) .buttonText, .ReactModal__Content .formFooter .Button.rounded:not(.primary) .buttonText, .news .pending .actions .Button.remove .buttonText, .boardEdit .Button .buttonText, .Button.userFollowingGridButton .buttonText, .InviteButtonEmail .Button.btn .buttonText, .Button.moreItems .buttonText, .formFooterButton.cancelButton .buttonText, .Button.CardFollow.GrayButton .buttonText, .Button.FollowButton .buttonText, .Button.UserFollowButton .buttonText, .Button.InterestFollowButton .buttonText, .Modal .formFooter .Button.primary .buttonText, .ReactModal__Content .formFooter .Button.primary .buttonText, .news .pending .actions .Button.primary .buttonText, .panelFooter .formFooterButtons .cancelButton .buttonText, .Button.searchToFollowButton .buttonText, .formFooterButton.confirmButton .buttonText, .Button.CardFollow.RedButton .buttonText, .Button.promoteYourPin .buttonText, .Button.userProfileMenu:not(.UnblockButton) .buttonText, .Button.editProfile .buttonText, .Button.groupBoardChat .buttonText, .boardDetail .pending .actions .Button.remove .buttonText, .boardDetail .pending .actions .Button.primary .buttonText, .BoardCollaboratorInviter .BoardInviteForm .inviteButton .buttonText, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton .buttonText, .InterestFeedPage .feedHeader .interestStats, .TopicFeedPage .feedHeader .interestStats, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .BoardHeader .description, .BoardInvite.news .boardName, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs .label, .UserProfileHeader.profileHeader .about .aboutText, .UserProfileHeader.profileHeader .about .iconsLinksEtc .locationWrapper, .UserProfileHeader.profileHeader .about .iconsLinksEtc .website, .UserProfileHeader.profileHeader .about .iconsLinksEtc .middot::after, .UpsellTip .footerButtons .cancelButton, .UpsellTip .footerButtons .submitButton, .text-md { font-size: 12px; letter-spacing: -0.1px; line-height: 14px; word-spacing: 0; } :lang(ja) .text-md { font-size: 10.3px; } .text-l, .User.gridItem .username, .Interest .interestWrapper .interestLabel h2, .ShopGridItem .productName, .Board .boardName .name, .Board .boardName.hasBoardContext .User.boardRepTitle .title, .Board .boardName.hasBoardContext .User.exploreTabTitle .title, .text-lg { font-size: 14px; letter-spacing: -0.15px; line-height: 16px; word-spacing: 0; } :lang(ja) .text-lg { font-size: 12px; } .text-xl, .standaloneErrorPage .name, .UserSettingsPage .sectionTitle h2 { font-size: 16px; letter-spacing: -0.2px; line-height: 18px; word-spacing: 0; } :lang(ja) .text-xl, :lang(ja) .standaloneErrorPage .name, .standaloneErrorPage :lang(ja) .name, :lang(ja) .UserSettingsPage .sectionTitle h2, .UserSettingsPage .sectionTitle :lang(ja) h2 { font-size: 13.8px; } .display-xs, .BoardInfoBar .smallBoardName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName { font-size: 18px; letter-spacing: -0.25px; line-height: 20px; word-spacing: 0; } :lang(ja) .display-xs, :lang(ja) .BoardInfoBar .smallBoardName, .BoardInfoBar :lang(ja) .smallBoardName, :lang(ja) .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage :lang(ja) .fixedHeaderName { font-size: 15.5px; } .display-s, .UserInfoBar.infoBar .tabs .value, .display-sm { font-size: 21px; letter-spacing: -0.3px; line-height: 23px; word-spacing: -1.3px; } :lang(ja) .display-sm { font-size: 18.1px; } .display-m, .InterestFeedPage .feedHeader .authLandingPageTitle .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .display-md { font-size: 24px; letter-spacing: -1px; line-height: 28px; word-spacing: -2px; } :lang(ja) .display-md { font-size: 20.6px; } .display-l, .FeedPage .feedName, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .display-lg { font-size: 36px; letter-spacing: -1.25px; line-height: 42px; word-spacing: -2.25px; } :lang(ja) .display-lg { font-size: 31px; } .display-xl { font-size: 48px; letter-spacing: -1.75px; line-height: 56px; word-spacing: -2.75px; } :lang(ja) .display-xl { font-size: 41.3px; } @media (min-width: 360px) { .text-xs, .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.primary span.buttonText, .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits .storyCredits .creditFooter, .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .creditItem, .Pin .creditFooter { font-size: 11px; letter-spacing: -0.05px; line-height: 12px; word-spacing: 0; } :lang(ja) .text-xs, :lang(ja) .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.remove :lang(ja) span.buttonText, :lang(ja) .news .pending .actions .Button.primary span.buttonText, .news .pending .actions .Button.primary :lang(ja) span.buttonText, :lang(ja) .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .Typeahead.typeaheadWithTitles li a.titleItem :lang(ja) .typeaheadName, :lang(ja) .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .storyCreditWrapper :lang(ja) .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits :lang(ja) .storyCredits > .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits .creditFooter, .ExploreStoryCredits .storyCredits :lang(ja) .creditFooter, :lang(ja) .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .pinCreditWrapper :lang(ja) .creditItem, :lang(ja) .Pin.summary .pinCredits > .creditItem, .Pin.summary :lang(ja) .pinCredits > .creditItem, :lang(ja) .Pin .creditFooter, .Pin :lang(ja) .creditFooter { font-size: 9.5px; } .text-s, .FirstPinCreate .Pin.summary .pinMeta .TextField, .Board .boardName .boardPinCount, .Board .boardName.hasBoardContext .User.boardRepTitle .fullname, .Board .boardName.hasBoardContext .User.exploreTabTitle .fullname, .BoardHeader .belowBoardNameContainer .followerCount, .BoardHeader .belowBoardNameContainer .pinCount, .BoardInfoBar .pinsAndFollowerCount .value, .BoardInfoBar .pinsAndFollowerCount .label, .PinCreate .Pin.summary .pinMeta .TextField, .text-sm { font-size: 12px; letter-spacing: -0.1px; line-height: 14px; word-spacing: 0; } :lang(ja) .text-sm { font-size: 10.3px; } .text-m, .Button.boardSettingsButton .buttonText, .Modal .formFooter .Button.rounded:not(.primary) .buttonText, .ReactModal__Content .formFooter .Button.rounded:not(.primary) .buttonText, .news .pending .actions .Button.remove .buttonText, .boardEdit .Button .buttonText, .Button.userFollowingGridButton .buttonText, .InviteButtonEmail .Button.btn .buttonText, .Button.moreItems .buttonText, .formFooterButton.cancelButton .buttonText, .Button.CardFollow.GrayButton .buttonText, .Button.FollowButton .buttonText, .Button.UserFollowButton .buttonText, .Button.InterestFollowButton .buttonText, .Modal .formFooter .Button.primary .buttonText, .ReactModal__Content .formFooter .Button.primary .buttonText, .news .pending .actions .Button.primary .buttonText, .panelFooter .formFooterButtons .cancelButton .buttonText, .Button.searchToFollowButton .buttonText, .formFooterButton.confirmButton .buttonText, .Button.CardFollow.RedButton .buttonText, .Button.promoteYourPin .buttonText, .Button.userProfileMenu:not(.UnblockButton) .buttonText, .Button.editProfile .buttonText, .Button.groupBoardChat .buttonText, .boardDetail .pending .actions .Button.remove .buttonText, .boardDetail .pending .actions .Button.primary .buttonText, .BoardCollaboratorInviter .BoardInviteForm .inviteButton .buttonText, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton .buttonText, .InterestFeedPage .feedHeader .interestStats, .TopicFeedPage .feedHeader .interestStats, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .BoardHeader .description, .BoardInvite.news .boardName, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs .label, .UserProfileHeader.profileHeader .about .aboutText, .UserProfileHeader.profileHeader .about .iconsLinksEtc .locationWrapper, .UserProfileHeader.profileHeader .about .iconsLinksEtc .website, .UserProfileHeader.profileHeader .about .iconsLinksEtc .middot::after, .UpsellTip .footerButtons .cancelButton, .UpsellTip .footerButtons .submitButton, .text-md { font-size: 14px; letter-spacing: -0.15px; line-height: 16px; word-spacing: 0; } :lang(ja) .text-md { font-size: 12px; } .text-l, .User.gridItem .username, .Interest .interestWrapper .interestLabel h2, .ShopGridItem .productName, .Board .boardName .name, .Board .boardName.hasBoardContext .User.boardRepTitle .title, .Board .boardName.hasBoardContext .User.exploreTabTitle .title, .text-lg { font-size: 16px; letter-spacing: -0.2px; line-height: 18px; word-spacing: 0; } :lang(ja) .text-lg { font-size: 13.8px; } .text-xl, .standaloneErrorPage .name, .UserSettingsPage .sectionTitle h2 { font-size: 18px; letter-spacing: -0.25px; line-height: 20px; word-spacing: 0; } :lang(ja) .text-xl, :lang(ja) .standaloneErrorPage .name, .standaloneErrorPage :lang(ja) .name, :lang(ja) .UserSettingsPage .sectionTitle h2, .UserSettingsPage .sectionTitle :lang(ja) h2 { font-size: 15.5px; } .display-xs, .BoardInfoBar .smallBoardName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName { font-size: 21px; letter-spacing: -0.3px; line-height: 23px; word-spacing: -1.3px; } :lang(ja) .display-xs, :lang(ja) .BoardInfoBar .smallBoardName, .BoardInfoBar :lang(ja) .smallBoardName, :lang(ja) .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage :lang(ja) .fixedHeaderName { font-size: 18.1px; } .display-s, .UserInfoBar.infoBar .tabs .value, .display-sm { font-size: 24px; letter-spacing: -1px; line-height: 28px; word-spacing: -2px; } :lang(ja) .display-sm { font-size: 20.6px; } .display-m, .InterestFeedPage .feedHeader .authLandingPageTitle .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .display-md { font-size: 36px; letter-spacing: -1.25px; line-height: 42px; word-spacing: -2.25px; } :lang(ja) .display-md { font-size: 31px; } .display-l, .FeedPage .feedName, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .display-lg { font-size: 48px; letter-spacing: -1.75px; line-height: 56px; word-spacing: -2.75px; } :lang(ja) .display-lg { font-size: 41.3px; } .display-xl { font-size: 64px; letter-spacing: -2.25px; line-height: 76px; word-spacing: -3.25px; } :lang(ja) .display-xl { font-size: 55px; } } @media (min-width: 1312px) { .text-xs, .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.primary span.buttonText, .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits .storyCredits .creditFooter, .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .creditItem, .Pin .creditFooter { font-size: 12px; letter-spacing: -0.1px; line-height: 14px; word-spacing: 0; } :lang(ja) .text-xs, :lang(ja) .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.remove :lang(ja) span.buttonText, :lang(ja) .news .pending .actions .Button.primary span.buttonText, .news .pending .actions .Button.primary :lang(ja) span.buttonText, :lang(ja) .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .Typeahead.typeaheadWithTitles li a.titleItem :lang(ja) .typeaheadName, :lang(ja) .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .storyCreditWrapper :lang(ja) .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits :lang(ja) .storyCredits > .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits .creditFooter, .ExploreStoryCredits .storyCredits :lang(ja) .creditFooter, :lang(ja) .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .pinCreditWrapper :lang(ja) .creditItem, :lang(ja) .Pin.summary .pinCredits > .creditItem, .Pin.summary :lang(ja) .pinCredits > .creditItem, :lang(ja) .Pin .creditFooter, .Pin :lang(ja) .creditFooter { font-size: 10.3px; } .text-s, .FirstPinCreate .Pin.summary .pinMeta .TextField, .Board .boardName .boardPinCount, .Board .boardName.hasBoardContext .User.boardRepTitle .fullname, .Board .boardName.hasBoardContext .User.exploreTabTitle .fullname, .BoardHeader .belowBoardNameContainer .followerCount, .BoardHeader .belowBoardNameContainer .pinCount, .BoardInfoBar .pinsAndFollowerCount .value, .BoardInfoBar .pinsAndFollowerCount .label, .PinCreate .Pin.summary .pinMeta .TextField, .text-sm { font-size: 14px; letter-spacing: -0.15px; line-height: 16px; word-spacing: 0; } :lang(ja) .text-sm { font-size: 12px; } .text-m, .Button.boardSettingsButton .buttonText, .Modal .formFooter .Button.rounded:not(.primary) .buttonText, .ReactModal__Content .formFooter .Button.rounded:not(.primary) .buttonText, .news .pending .actions .Button.remove .buttonText, .boardEdit .Button .buttonText, .Button.userFollowingGridButton .buttonText, .InviteButtonEmail .Button.btn .buttonText, .Button.moreItems .buttonText, .formFooterButton.cancelButton .buttonText, .Button.CardFollow.GrayButton .buttonText, .Button.FollowButton .buttonText, .Button.UserFollowButton .buttonText, .Button.InterestFollowButton .buttonText, .Modal .formFooter .Button.primary .buttonText, .ReactModal__Content .formFooter .Button.primary .buttonText, .news .pending .actions .Button.primary .buttonText, .panelFooter .formFooterButtons .cancelButton .buttonText, .Button.searchToFollowButton .buttonText, .formFooterButton.confirmButton .buttonText, .Button.CardFollow.RedButton .buttonText, .Button.promoteYourPin .buttonText, .Button.userProfileMenu:not(.UnblockButton) .buttonText, .Button.editProfile .buttonText, .Button.groupBoardChat .buttonText, .boardDetail .pending .actions .Button.remove .buttonText, .boardDetail .pending .actions .Button.primary .buttonText, .BoardCollaboratorInviter .BoardInviteForm .inviteButton .buttonText, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton .buttonText, .InterestFeedPage .feedHeader .interestStats, .TopicFeedPage .feedHeader .interestStats, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .BoardHeader .description, .BoardInvite.news .boardName, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs .label, .UserProfileHeader.profileHeader .about .aboutText, .UserProfileHeader.profileHeader .about .iconsLinksEtc .locationWrapper, .UserProfileHeader.profileHeader .about .iconsLinksEtc .website, .UserProfileHeader.profileHeader .about .iconsLinksEtc .middot::after, .UpsellTip .footerButtons .cancelButton, .UpsellTip .footerButtons .submitButton, .text-md { font-size: 16px; letter-spacing: -0.2px; line-height: 18px; word-spacing: 0; } :lang(ja) .text-md { font-size: 13.8px; } .text-l, .User.gridItem .username, .Interest .interestWrapper .interestLabel h2, .ShopGridItem .productName, .Board .boardName .name, .Board .boardName.hasBoardContext .User.boardRepTitle .title, .Board .boardName.hasBoardContext .User.exploreTabTitle .title, .text-lg { font-size: 18px; letter-spacing: -0.25px; line-height: 20px; word-spacing: 0; } :lang(ja) .text-lg { font-size: 15.5px; } .text-xl, .standaloneErrorPage .name, .UserSettingsPage .sectionTitle h2 { font-size: 21px; letter-spacing: -0.3px; line-height: 23px; word-spacing: -1.3px; } :lang(ja) .text-xl, :lang(ja) .standaloneErrorPage .name, .standaloneErrorPage :lang(ja) .name, :lang(ja) .UserSettingsPage .sectionTitle h2, .UserSettingsPage .sectionTitle :lang(ja) h2 { font-size: 18.1px; } .display-xs, .BoardInfoBar .smallBoardName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName { font-size: 24px; letter-spacing: -1px; line-height: 28px; word-spacing: -2px; } :lang(ja) .display-xs, :lang(ja) .BoardInfoBar .smallBoardName, .BoardInfoBar :lang(ja) .smallBoardName, :lang(ja) .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage :lang(ja) .fixedHeaderName { font-size: 20.6px; } .display-s, .UserInfoBar.infoBar .tabs .value, .display-sm { font-size: 36px; letter-spacing: -1.25px; line-height: 42px; word-spacing: -2.25px; } :lang(ja) .display-sm { font-size: 31px; } .display-m, .InterestFeedPage .feedHeader .authLandingPageTitle .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .display-md { font-size: 48px; letter-spacing: -1.75px; line-height: 56px; word-spacing: -2.75px; } :lang(ja) .display-md { font-size: 41.3px; } .display-l, .FeedPage .feedName, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .display-lg { font-size: 64px; letter-spacing: -2.25px; line-height: 76px; word-spacing: -3.25px; } :lang(ja) .display-lg { font-size: 55px; } .display-xl { font-size: 96px; letter-spacing: -3.25px; line-height: 114px; word-spacing: -4.25px; } :lang(ja) .display-xl { font-size: 82.6px; } } .m0 { margin: 0; } .mt0 { margin-top: 0; } .mr0 { margin-right: 0; } .mb0 { margin-bottom: 0; } .ml0 { margin-left: 0; } .p0 { padding: 0; } .px0 { padding-left: 0; padding-right: 0; } .py0 { padding-bottom: 0; padding-top: 0; } .m1 { margin: 3px; } .mt1, .Board .boardName .boardPinCount .PinCount, .Board .boardName.hasBoardContext, .BoardHeader .description { margin-top: 3px; } .mr1, .TypeaheadField.guided.buttonOnRight::before, .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem, .Board .boardName > .secretIcon, .Board .boardName .User.boardRepTitle.hasText.thumb, .Board .boardName .User.exploreTabTitle.hasText.thumb, .BoardInfoBar .boardButtons > *, .UserSettingsPage .formInlineCheckedSet label > input { margin-right: 3px; } .mb1 { margin-bottom: 3px; } .ml1, .TokenizedInput.guided .tokensWrapper .tokenizedItem { margin-left: 3px; } .mn1 { margin: -3px; } .mtn1 { margin-top: -3px; } .mbn1 { margin-bottom: -3px; } .mln1 { margin-left: -3px; } .mrn1, .mxn1, .UserInfoBar.infoBar .tabs { margin-right: -3px; } .mxn1, .UserInfoBar.infoBar .tabs { margin-left: -3px; } .myn1 { margin-bottom: -3px; margin-top: -3px; } .p1 { padding: 3px; } .px1, .standaloneErrorPage .name, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .ExploreStoryCredits .storyCredits > .creditItem, .ShopGridItem .productName, .Board .boardName, .BoardInfoBar .pinsAndFollowerCount > ul > li, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs li a { padding-left: 3px; padding-right: 3px; } .py1, .UserInfoBar.infoBar .tabs ul { padding-bottom: 3px; padding-top: 3px; } .m2 { margin: 6px; } .mt2 { margin-top: 6px; } .mr2, .FeedPage .RelatedInterestsSection > ul > li, .InterestFeedPage .RelatedInterestsSection > ul > li, .TopicFeedPage .RelatedInterestsSection > ul > li, .Board .boardName .name, .UserProfileHeader.profileHeader .profileImage::after { margin-right: 6px; } .mb2, .Interest.storyView .interestWrapper, .FirstPinCreate .Pin.summary .pinMeta .TextField, .PinCreate .Pin.summary .pinMeta .TextField { margin-bottom: 6px; } .ml2, .TypeaheadField.guided.buttonOnRight::before, .UserProfileHeader.profileHeader .profileImage::after { margin-left: 6px; } .mn2 { margin: -6px; } .mtn2 { margin-top: -6px; } .mbn2 { margin-bottom: -6px; } .mln2 { margin-left: -6px; } .mrn2, .mxn2 { margin-right: -6px; } .mxn2 { margin-left: -6px; } .myn2 { margin-bottom: -6px; margin-top: -6px; } .p2 { padding: 6px; } .px2, .SearchForm.guided, .BoardHeader .boardHeaderWrapper, .BoardInfoBar .infoBarWrapper, .BulkEditBar .boardBulkEditBar, .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar { padding-left: 6px; padding-right: 6px; } .py2, .standaloneErrorPage .name, .User.gridItem .username, .ShopGridItem .productName, .Board .boardName { padding-bottom: 6px; padding-top: 6px; } .m3 { margin: 9px; } .mt3, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage { margin-top: 9px; } .mr3, .FeedPage .RelatedInterestsSection > ul, .User.thumb.boardRepTitle .title, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul { margin-right: 9px; } .mb3, .BoardHeader .boardHeaderWrapper { margin-bottom: 9px; } .ml3, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul { margin-left: 9px; } .mn3 { margin: -9px; } .mtn3 { margin-top: -9px; } .mbn3 { margin-bottom: -9px; } .mln3 { margin-left: -9px; } .mrn3, .mxn3 { margin-right: -9px; } .mxn3 { margin-left: -9px; } .myn3 { margin-bottom: -9px; margin-top: -9px; } .p3 { padding: 9px; } .px3, .FeedPage .feedName, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .UserInfoBar { padding-left: 9px; padding-right: 9px; } .py3, .FeedPage .feedName, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .TopicFeedPage .RelatedInterestsSection > ul, .BoardInfoBar .infoBarWrapper, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar { padding-bottom: 9px; padding-top: 9px; } .m4 { margin: 12px; } .mt4, .FeedPage .feedName { margin-top: 12px; } .mr4 { margin-right: 12px; } .mb4, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .NagSearch .message { margin-bottom: 12px; } .ml4 { margin-left: 12px; } .mn4 { margin: -12px; } .mtn4 { margin-top: -12px; } .mbn4 { margin-bottom: -12px; } .mln4 { margin-left: -12px; } .mrn4, .mxn4 { margin-right: -12px; } .mxn4 { margin-left: -12px; } .myn4 { margin-bottom: -12px; margin-top: -12px; } .p4 { padding: 12px; } .px4 { padding-left: 12px; padding-right: 12px; } .py4 { padding-bottom: 12px; padding-top: 12px; } .m5 { margin: 15px; } .mt5 { margin-top: 15px; } .mr5 { margin-right: 15px; } .mb5 { margin-bottom: 15px; } .ml5 { margin-left: 15px; } .mn5 { margin: -15px; } .mtn5 { margin-top: -15px; } .mbn5 { margin-bottom: -15px; } .mln5 { margin-left: -15px; } .mrn5, .mxn5 { margin-right: -15px; } .mxn5 { margin-left: -15px; } .myn5 { margin-bottom: -15px; margin-top: -15px; } .p5 { padding: 15px; } .px5 { padding-left: 15px; padding-right: 15px; } .py5 { padding-bottom: 15px; padding-top: 15px; } .m6 { margin: 18px; } .mt6 { margin-top: 18px; } .mr6 { margin-right: 18px; } .mb6 { margin-bottom: 18px; } .ml6 { margin-left: 18px; } .mn6 { margin: -18px; } .mtn6 { margin-top: -18px; } .mbn6 { margin-bottom: -18px; } .mln6 { margin-left: -18px; } .mrn6, .mxn6 { margin-right: -18px; } .mxn6 { margin-left: -18px; } .myn6 { margin-bottom: -18px; margin-top: -18px; } .p6 { padding: 18px; } .px6 { padding-left: 18px; padding-right: 18px; } .py6 { padding-bottom: 18px; padding-top: 18px; } @media (min-width: 360px) { .m1 { margin: 4px; } .mt1, .Board .boardName .boardPinCount .PinCount, .Board .boardName.hasBoardContext, .BoardHeader .description { margin-top: 4px; } .mr1, .TypeaheadField.guided.buttonOnRight::before, .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem, .Board .boardName > .secretIcon, .Board .boardName .User.boardRepTitle.hasText.thumb, .Board .boardName .User.exploreTabTitle.hasText.thumb, .BoardInfoBar .boardButtons > *, .UserSettingsPage .formInlineCheckedSet label > input { margin-right: 4px; } .mb1 { margin-bottom: 4px; } .ml1, .TokenizedInput.guided .tokensWrapper .tokenizedItem { margin-left: 4px; } .mn1 { margin: -4px; } .mtn1 { margin-top: -4px; } .mbn1 { margin-bottom: -4px; } .mln1 { margin-left: -4px; } .mrn1, .mxn1, .UserInfoBar.infoBar .tabs { margin-right: -4px; } .mxn1, .UserInfoBar.infoBar .tabs { margin-left: -4px; } .myn1 { margin-bottom: -4px; margin-top: -4px; } .p1 { padding: 4px; } .px1, .standaloneErrorPage .name, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .ExploreStoryCredits .storyCredits > .creditItem, .ShopGridItem .productName, .Board .boardName, .BoardInfoBar .pinsAndFollowerCount > ul > li, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs li a { padding-left: 4px; padding-right: 4px; } .py1, .UserInfoBar.infoBar .tabs ul { padding-bottom: 4px; padding-top: 4px; } .m2 { margin: 8px; } .mt2 { margin-top: 8px; } .mr2, .FeedPage .RelatedInterestsSection > ul > li, .InterestFeedPage .RelatedInterestsSection > ul > li, .TopicFeedPage .RelatedInterestsSection > ul > li, .Board .boardName .name, .UserProfileHeader.profileHeader .profileImage::after { margin-right: 8px; } .mb2, .Interest.storyView .interestWrapper, .FirstPinCreate .Pin.summary .pinMeta .TextField, .PinCreate .Pin.summary .pinMeta .TextField { margin-bottom: 8px; } .ml2, .TypeaheadField.guided.buttonOnRight::before, .UserProfileHeader.profileHeader .profileImage::after { margin-left: 8px; } .mn2 { margin: -8px; } .mtn2 { margin-top: -8px; } .mbn2 { margin-bottom: -8px; } .mln2 { margin-left: -8px; } .mrn2, .mxn2 { margin-right: -8px; } .mxn2 { margin-left: -8px; } .myn2 { margin-bottom: -8px; margin-top: -8px; } .p2 { padding: 8px; } .px2, .SearchForm.guided, .BoardHeader .boardHeaderWrapper, .BoardInfoBar .infoBarWrapper, .BulkEditBar .boardBulkEditBar, .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar { padding-left: 8px; padding-right: 8px; } .py2, .standaloneErrorPage .name, .User.gridItem .username, .ShopGridItem .productName, .Board .boardName { padding-bottom: 8px; padding-top: 8px; } .m3 { margin: 12px; } .mt3, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage { margin-top: 12px; } .mr3, .FeedPage .RelatedInterestsSection > ul, .User.thumb.boardRepTitle .title, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul { margin-right: 12px; } .mb3, .BoardHeader .boardHeaderWrapper { margin-bottom: 12px; } .ml3, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul { margin-left: 12px; } .mn3 { margin: -12px; } .mtn3 { margin-top: -12px; } .mbn3 { margin-bottom: -12px; } .mln3 { margin-left: -12px; } .mrn3, .mxn3 { margin-right: -12px; } .mxn3 { margin-left: -12px; } .myn3 { margin-bottom: -12px; margin-top: -12px; } .p3 { padding: 12px; } .px3, .FeedPage .feedName, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .UserInfoBar { padding-left: 12px; padding-right: 12px; } .py3, .FeedPage .feedName, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .TopicFeedPage .RelatedInterestsSection > ul, .BoardInfoBar .infoBarWrapper, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar { padding-bottom: 12px; padding-top: 12px; } .m4 { margin: 16px; } .mt4, .FeedPage .feedName { margin-top: 16px; } .mr4 { margin-right: 16px; } .mb4, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .NagSearch .message { margin-bottom: 16px; } .ml4 { margin-left: 16px; } .mn4 { margin: -16px; } .mtn4 { margin-top: -16px; } .mbn4 { margin-bottom: -16px; } .mln4 { margin-left: -16px; } .mrn4, .mxn4 { margin-right: -16px; } .mxn4 { margin-left: -16px; } .myn4 { margin-bottom: -16px; margin-top: -16px; } .p4 { padding: 16px; } .px4 { padding-left: 16px; padding-right: 16px; } .py4 { padding-bottom: 16px; padding-top: 16px; } .m5 { margin: 20px; } .mt5 { margin-top: 20px; } .mr5 { margin-right: 20px; } .mb5 { margin-bottom: 20px; } .ml5 { margin-left: 20px; } .mn5 { margin: -20px; } .mtn5 { margin-top: -20px; } .mbn5 { margin-bottom: -20px; } .mln5 { margin-left: -20px; } .mrn5, .mxn5 { margin-right: -20px; } .mxn5 { margin-left: -20px; } .myn5 { margin-bottom: -20px; margin-top: -20px; } .p5 { padding: 20px; } .px5 { padding-left: 20px; padding-right: 20px; } .py5 { padding-bottom: 20px; padding-top: 20px; } .m6 { margin: 24px; } .mt6 { margin-top: 24px; } .mr6 { margin-right: 24px; } .mb6 { margin-bottom: 24px; } .ml6 { margin-left: 24px; } .mn6 { margin: -24px; } .mtn6 { margin-top: -24px; } .mbn6 { margin-bottom: -24px; } .mln6 { margin-left: -24px; } .mrn6, .mxn6 { margin-right: -24px; } .mxn6 { margin-left: -24px; } .myn6 { margin-bottom: -24px; margin-top: -24px; } .p6 { padding: 24px; } .px6 { padding-left: 24px; padding-right: 24px; } .py6 { padding-bottom: 24px; padding-top: 24px; } } @media (min-width: 800px) { .m1 { margin: 6px 8px; } .mt1, .Board .boardName .boardPinCount .PinCount, .Board .boardName.hasBoardContext, .BoardHeader .description { margin-top: 6px; } .mr1, .TypeaheadField.guided.buttonOnRight::before, .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem, .Board .boardName > .secretIcon, .Board .boardName .User.boardRepTitle.hasText.thumb, .Board .boardName .User.exploreTabTitle.hasText.thumb, .BoardInfoBar .boardButtons > *, .UserSettingsPage .formInlineCheckedSet label > input { margin-right: 8px; } .mb1 { margin-bottom: 6px; } .ml1, .TokenizedInput.guided .tokensWrapper .tokenizedItem { margin-left: 8px; } .mn1 { margin: -6px -8px; } .mtn1 { margin-top: -6px; } .mbn1 { margin-bottom: -6px; } .mln1 { margin-left: -8px; } .mrn1, .mxn1, .UserInfoBar.infoBar .tabs { margin-right: -8px; } .mxn1, .UserInfoBar.infoBar .tabs { margin-left: -8px; } .myn1 { margin-bottom: -6px; margin-top: -6px; } .p1 { padding: 6px 8px; } .px1, .standaloneErrorPage .name, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .ExploreStoryCredits .storyCredits > .creditItem, .ShopGridItem .productName, .Board .boardName, .BoardInfoBar .pinsAndFollowerCount > ul > li, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs li a { padding-left: 8px; padding-right: 8px; } .py1, .UserInfoBar.infoBar .tabs ul { padding-bottom: 6px; padding-top: 6px; } .m2 { margin: 12px 16px; } .mt2 { margin-top: 12px; } .mr2, .FeedPage .RelatedInterestsSection > ul > li, .InterestFeedPage .RelatedInterestsSection > ul > li, .TopicFeedPage .RelatedInterestsSection > ul > li, .Board .boardName .name, .UserProfileHeader.profileHeader .profileImage::after { margin-right: 16px; } .mb2, .Interest.storyView .interestWrapper, .FirstPinCreate .Pin.summary .pinMeta .TextField, .PinCreate .Pin.summary .pinMeta .TextField { margin-bottom: 12px; } .ml2, .TypeaheadField.guided.buttonOnRight::before, .UserProfileHeader.profileHeader .profileImage::after { margin-left: 16px; } .mn2 { margin: -12px -16px; } .mtn2 { margin-top: -12px; } .mbn2 { margin-bottom: -12px; } .mln2 { margin-left: -16px; } .mrn2, .mxn2 { margin-right: -16px; } .mxn2 { margin-left: -16px; } .myn2 { margin-bottom: -12px; margin-top: -12px; } .p2 { padding: 12px 16px; } .px2, .SearchForm.guided, .BoardHeader .boardHeaderWrapper, .BoardInfoBar .infoBarWrapper, .BulkEditBar .boardBulkEditBar, .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar { padding-left: 16px; padding-right: 16px; } .py2, .standaloneErrorPage .name, .User.gridItem .username, .ShopGridItem .productName, .Board .boardName { padding-bottom: 12px; padding-top: 12px; } .m3 { margin: 18px 24px; } .mt3, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage { margin-top: 18px; } .mr3, .FeedPage .RelatedInterestsSection > ul, .User.thumb.boardRepTitle .title, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul { margin-right: 24px; } .mb3, .BoardHeader .boardHeaderWrapper { margin-bottom: 18px; } .ml3, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul { margin-left: 24px; } .mn3 { margin: -18px -24px; } .mtn3 { margin-top: -18px; } .mbn3 { margin-bottom: -18px; } .mln3 { margin-left: -24px; } .mrn3, .mxn3 { margin-right: -24px; } .mxn3 { margin-left: -24px; } .myn3 { margin-bottom: -18px; margin-top: -18px; } .p3 { padding: 18px 24px; } .px3, .FeedPage .feedName, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .UserInfoBar { padding-left: 24px; padding-right: 24px; } .py3, .FeedPage .feedName, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .TopicFeedPage .RelatedInterestsSection > ul, .BoardInfoBar .infoBarWrapper, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar { padding-bottom: 18px; padding-top: 18px; } .m4 { margin: 24px 32px; } .mt4, .FeedPage .feedName { margin-top: 24px; } .mr4 { margin-right: 32px; } .mb4, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .NagSearch .message { margin-bottom: 24px; } .ml4 { margin-left: 32px; } .mn4 { margin: -24px -32px; } .mtn4 { margin-top: -24px; } .mbn4 { margin-bottom: -24px; } .mln4 { margin-left: -32px; } .mrn4, .mxn4 { margin-right: -32px; } .mxn4 { margin-left: -32px; } .myn4 { margin-bottom: -24px; margin-top: -24px; } .p4 { padding: 24px 32px; } .px4 { padding-left: 32px; padding-right: 32px; } .py4 { padding-bottom: 24px; padding-top: 24px; } .m5 { margin: 30px 40px; } .mt5 { margin-top: 30px; } .mr5 { margin-right: 40px; } .mb5 { margin-bottom: 30px; } .ml5 { margin-left: 40px; } .mn5 { margin: -30px -40px; } .mtn5 { margin-top: -30px; } .mbn5 { margin-bottom: -30px; } .mln5 { margin-left: -40px; } .mrn5, .mxn5 { margin-right: -40px; } .mxn5 { margin-left: -40px; } .myn5 { margin-bottom: -30px; margin-top: -30px; } .p5 { padding: 30px 40px; } .px5 { padding-left: 40px; padding-right: 40px; } .py5 { padding-bottom: 30px; padding-top: 30px; } .m6 { margin: 36px 48px; } .mt6 { margin-top: 36px; } .mr6 { margin-right: 48px; } .mb6 { margin-bottom: 36px; } .ml6 { margin-left: 48px; } .mn6 { margin: -36px -48px; } .mtn6 { margin-top: -36px; } .mbn6 { margin-bottom: -36px; } .mln6 { margin-left: -48px; } .mrn6, .mxn6 { margin-right: -48px; } .mxn6 { margin-left: -48px; } .myn6 { margin-bottom: -36px; margin-top: -36px; } .p6 { padding: 36px 48px; } .px6 { padding-left: 48px; padding-right: 48px; } .py6 { padding-bottom: 36px; padding-top: 36px; } } @media (min-width: 1312px) { .m1 { margin: 6px 8px; } .mt1, .Board .boardName .boardPinCount .PinCount, .Board .boardName.hasBoardContext, .BoardHeader .description { margin-top: 6px; } .mr1, .TypeaheadField.guided.buttonOnRight::before, .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem, .Board .boardName > .secretIcon, .Board .boardName .User.boardRepTitle.hasText.thumb, .Board .boardName .User.exploreTabTitle.hasText.thumb, .BoardInfoBar .boardButtons > *, .UserSettingsPage .formInlineCheckedSet label > input { margin-right: 8px; } .mb1 { margin-bottom: 6px; } .ml1, .TokenizedInput.guided .tokensWrapper .tokenizedItem { margin-left: 8px; } .mn1 { margin: -6px -8px; } .mtn1 { margin-top: -6px; } .mbn1 { margin-bottom: -6px; } .mln1 { margin-left: -8px; } .mrn1, .mxn1, .UserInfoBar.infoBar .tabs { margin-right: -8px; } .mxn1, .UserInfoBar.infoBar .tabs { margin-left: -8px; } .myn1 { margin-bottom: -6px; margin-top: -6px; } .p1 { padding: 6px 8px; } .px1, .standaloneErrorPage .name, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .ExploreStoryCredits .storyCredits > .creditItem, .ShopGridItem .productName, .Board .boardName, .BoardInfoBar .pinsAndFollowerCount > ul > li, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs li a { padding-left: 8px; padding-right: 8px; } .py1, .UserInfoBar.infoBar .tabs ul { padding-bottom: 6px; padding-top: 6px; } .m2 { margin: 12px 16px; } .mt2 { margin-top: 12px; } .mr2, .FeedPage .RelatedInterestsSection > ul > li, .InterestFeedPage .RelatedInterestsSection > ul > li, .TopicFeedPage .RelatedInterestsSection > ul > li, .Board .boardName .name, .UserProfileHeader.profileHeader .profileImage::after { margin-right: 16px; } .mb2, .Interest.storyView .interestWrapper, .FirstPinCreate .Pin.summary .pinMeta .TextField, .PinCreate .Pin.summary .pinMeta .TextField { margin-bottom: 12px; } .ml2, .TypeaheadField.guided.buttonOnRight::before, .UserProfileHeader.profileHeader .profileImage::after { margin-left: 16px; } .mn2 { margin: -12px -16px; } .mtn2 { margin-top: -12px; } .mbn2 { margin-bottom: -12px; } .mln2 { margin-left: -16px; } .mrn2, .mxn2 { margin-right: -16px; } .mxn2 { margin-left: -16px; } .myn2 { margin-bottom: -12px; margin-top: -12px; } .p2 { padding: 12px 16px; } .px2, .SearchForm.guided, .BoardHeader .boardHeaderWrapper, .BoardInfoBar .infoBarWrapper, .BulkEditBar .boardBulkEditBar, .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar { padding-left: 16px; padding-right: 16px; } .py2, .standaloneErrorPage .name, .User.gridItem .username, .ShopGridItem .productName, .Board .boardName { padding-bottom: 12px; padding-top: 12px; } .m3 { margin: 18px 24px; } .mt3, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage { margin-top: 18px; } .mr3, .FeedPage .RelatedInterestsSection > ul, .User.thumb.boardRepTitle .title, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul { margin-right: 24px; } .mb3, .BoardHeader .boardHeaderWrapper { margin-bottom: 18px; } .ml3, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul { margin-left: 24px; } .mn3 { margin: -18px -24px; } .mtn3 { margin-top: -18px; } .mbn3 { margin-bottom: -18px; } .mln3 { margin-left: -24px; } .mrn3, .mxn3 { margin-right: -24px; } .mxn3 { margin-left: -24px; } .myn3 { margin-bottom: -18px; margin-top: -18px; } .p3 { padding: 18px 24px; } .px3, .FeedPage .feedName, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .UserInfoBar { padding-left: 24px; padding-right: 24px; } .py3, .FeedPage .feedName, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .TopicFeedPage .RelatedInterestsSection > ul, .BoardInfoBar .infoBarWrapper, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar { padding-bottom: 18px; padding-top: 18px; } .m4 { margin: 24px 32px; } .mt4, .FeedPage .feedName { margin-top: 24px; } .mr4 { margin-right: 32px; } .mb4, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .NagSearch .message { margin-bottom: 24px; } .ml4 { margin-left: 32px; } .mn4 { margin: -24px -32px; } .mtn4 { margin-top: -24px; } .mbn4 { margin-bottom: -24px; } .mln4 { margin-left: -32px; } .mrn4, .mxn4 { margin-right: -32px; } .mxn4 { margin-left: -32px; } .myn4 { margin-bottom: -24px; margin-top: -24px; } .p4 { padding: 24px 32px; } .px4 { padding-left: 32px; padding-right: 32px; } .py4 { padding-bottom: 24px; padding-top: 24px; } .m5 { margin: 30px 40px; } .mt5 { margin-top: 30px; } .mr5 { margin-right: 40px; } .mb5 { margin-bottom: 30px; } .ml5 { margin-left: 40px; } .mn5 { margin: -30px -40px; } .mtn5 { margin-top: -30px; } .mbn5 { margin-bottom: -30px; } .mln5 { margin-left: -40px; } .mrn5, .mxn5 { margin-right: -40px; } .mxn5 { margin-left: -40px; } .myn5 { margin-bottom: -30px; margin-top: -30px; } .p5 { padding: 30px 40px; } .px5 { padding-left: 40px; padding-right: 40px; } .py5 { padding-bottom: 30px; padding-top: 30px; } .m6 { margin: 36px 48px; } .mt6 { margin-top: 36px; } .mr6 { margin-right: 48px; } .mb6 { margin-bottom: 36px; } .ml6 { margin-left: 48px; } .mn6 { margin: -36px -48px; } .mtn6 { margin-top: -36px; } .mbn6 { margin-bottom: -36px; } .mln6 { margin-left: -48px; } .mrn6, .mxn6 { margin-right: -48px; } .mxn6 { margin-left: -48px; } .myn6 { margin-bottom: -36px; margin-top: -36px; } .p6 { padding: 36px 48px; } .px6 { padding-left: 48px; padding-right: 48px; } .py6 { padding-bottom: 36px; padding-top: 36px; } } @-webkit-keyframes scrollBgGrid { from { -webkit-transform: translateY(0px); transform: translateY(0px); } to { -webkit-transform: translateY(-300px); transform: translateY(-300px); } } @keyframes scrollBgGrid { from { -webkit-transform: translateY(0px); transform: translateY(0px); } to { -webkit-transform: translateY(-300px); transform: translateY(-300px); } } /* From https://github.com/daneden/animate.css */ @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.02); transform: scale(1.02); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.02); transform: scale(1.02); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes rotateCircle { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotateCircle { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeOutUpAndHide { 0% { display: block; opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 99% { display: block; opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { display: none; opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUpAndHide { 0% { display: block; opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 99% { display: block; opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { display: none; opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @-webkit-keyframes fadeOutToTransparentFromEightyPercent { 0% { opacity: 0.8; } 100% { opacity: 0; } } @keyframes fadeOutToTransparentFromEightyPercent { 0% { opacity: 0.8; } 100% { opacity: 0; } } @-webkit-keyframes fadeOutToTransparent { 100% { opacity: 0; } } @keyframes fadeOutToTransparent { 100% { opacity: 0; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; display: block; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; display: block; } 100% { opacity: 1; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeOutAndHide { 0% { opacity: 1; display: block; } 99% { opacity: 0; display: block; } 100% { opacity: 0; display: none; } } @keyframes fadeOutAndHide { 0% { opacity: 1; display: block; } 99% { opacity: 0; display: block; } 100% { opacity: 0; display: none; } } @-webkit-keyframes fadeInAndShow { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInAndShow { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes rotater { 0% { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); } 50% { -webkit-transform: rotate(360deg) scale(2); transform: rotate(360deg) scale(2); } 100% { -webkit-transform: rotate(720deg) scale(1); transform: rotate(720deg) scale(1); } } @keyframes rotater { 0% { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); } 50% { -webkit-transform: rotate(360deg) scale(2); transform: rotate(360deg) scale(2); } 100% { -webkit-transform: rotate(720deg) scale(1); transform: rotate(720deg) scale(1); } } .rotate { -webkit-animation-name: rotater; animation-name: rotater; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes heroParallax { from { -webkit-transform: translateX(0px); transform: translateX(0px); } to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes heroParallax { from { -webkit-transform: translateX(0px); transform: translateX(0px); } to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @-webkit-keyframes heroBalloon { from { -webkit-transform: translateY(20px); transform: translateY(20px); } to { -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes heroBalloon { from { -webkit-transform: translateY(20px); transform: translateY(20px); } to { -webkit-transform: translateY(0px); transform: translateY(0px); } } @-webkit-keyframes conversationListItemSlideOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-500px, 0, 0); transform: translate3d(-500px, 0, 0); } } @keyframes conversationListItemSlideOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-500px, 0, 0); transform: translate3d(-500px, 0, 0); } } @-webkit-keyframes popBadge { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 75% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes popBadge { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 75% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes scrollBgGridLinks { from { -webkit-transform: translateY(0px); transform: translateY(0px); } to { -webkit-transform: translateY(-330px); transform: translateY(-330px); } } @keyframes scrollBgGridLinks { from { -webkit-transform: translateY(0px); transform: translateY(0px); } to { -webkit-transform: translateY(-330px); transform: translateY(-330px); } } @-webkit-keyframes scrollFooterWithBgGrid { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 91% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @keyframes scrollFooterWithBgGrid { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 91% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @-webkit-keyframes anchored-card-slide-up { from { -webkit-transform: translateY(130%) rotate(15deg); transform: translateY(130%) rotate(15deg); opacity: 0; } to { -webkit-transform: translateY(6%) rotate(0deg); transform: translateY(6%) rotate(0deg); opacity: 1; } } @keyframes anchored-card-slide-up { from { -webkit-transform: translateY(130%) rotate(15deg); transform: translateY(130%) rotate(15deg); opacity: 0; } to { -webkit-transform: translateY(6%) rotate(0deg); transform: translateY(6%) rotate(0deg); opacity: 1; } } @-webkit-keyframes move-up-down { 0% { -webkit-transform: translateY(6%); transform: translateY(6%); } 50% { -webkit-transform: translateY(-6%); transform: translateY(-6%); } 100% { -webkit-transform: translateY(6%); transform: translateY(6%); } } @keyframes move-up-down { 0% { -webkit-transform: translateY(6%); transform: translateY(6%); } 50% { -webkit-transform: translateY(-6%); transform: translateY(-6%); } 100% { -webkit-transform: translateY(6%); transform: translateY(6%); } } @-webkit-keyframes hide-card { from { opacity: 1; } to { opacity: 0; -webkit-transform: translateY(40%) rotate(3deg); transform: translateY(40%) rotate(3deg); } } @keyframes hide-card { from { opacity: 1; } to { opacity: 0; -webkit-transform: translateY(40%) rotate(3deg); transform: translateY(40%) rotate(3deg); } } @-webkit-keyframes menu-fade-in { from { display: block; opacity: 0; -webkit-transform: translateY(0px) scale(0.9); transform: translateY(0px) scale(0.9); } to { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } } @keyframes menu-fade-in { from { display: block; opacity: 0; -webkit-transform: translateY(0px) scale(0.9); transform: translateY(0px) scale(0.9); } to { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } } @-webkit-keyframes shimmer { 0% { opacity: 0; } 50% { opacity: 1; } 70% { opacity: 0.65; } 80% { opacity: 0.65; } 100% { opacity: 1; } } @keyframes shimmer { 0% { opacity: 0; } 50% { opacity: 1; } 70% { opacity: 0.65; } 80% { opacity: 0.65; } 100% { opacity: 1; } } @-webkit-keyframes menu-slide-in-up { from { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes menu-slide-in-up { from { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes pinSlideIn { from { opacity: 0; -webkit-transform: translateY(80px); transform: translateY(80px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes pinSlideIn { from { opacity: 0; -webkit-transform: translateY(80px); transform: translateY(80px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes pinFadeIn { 0% { opacity: 0; -webkit-transform: scale(0.93); transform: scale(0.93); } 39% { opacity: 0; -webkit-transform: scale(0.93); transform: scale(0.93); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes pinFadeIn { 0% { opacity: 0; -webkit-transform: scale(0.93); transform: scale(0.93); } 39% { opacity: 0; -webkit-transform: scale(0.93); transform: scale(0.93); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes trigger-card-slide-up { from { -webkit-transform: translateY(200%) rotate(-15deg); transform: translateY(200%) rotate(-15deg); opacity: 1; } to { -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); opacity: 1; } } @keyframes trigger-card-slide-up { from { -webkit-transform: translateY(200%) rotate(-15deg); transform: translateY(200%) rotate(-15deg); opacity: 1; } to { -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); opacity: 1; } } @-webkit-keyframes trigger-card-slide-down { from { -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); opacity: 1; } to { -webkit-transform: translateY(200%) rotate(-15deg); transform: translateY(200%) rotate(-15deg); opacity: 1; } } @keyframes trigger-card-slide-down { from { -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); opacity: 1; } to { -webkit-transform: translateY(200%) rotate(-15deg); transform: translateY(200%) rotate(-15deg); opacity: 1; } } @-webkit-keyframes pop-button-scale { 0% { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); opacity: 1; } 10% { -webkit-transform: translateY(-8px) scale(0.7); transform: translateY(-8px) scale(0.7); opacity: 1; } 100% { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); opacity: 1; } } @keyframes pop-button-scale { 0% { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); opacity: 1; } 10% { -webkit-transform: translateY(-8px) scale(0.7); transform: translateY(-8px) scale(0.7); opacity: 1; } 100% { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); opacity: 1; } } @-webkit-keyframes zoomInAndFade { 0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 1%, 29% { opacity: 1; } 30%, 100% { opacity: 0; -webkit-transform: scale(1.15); transform: scale(1.15); } } @keyframes zoomInAndFade { 0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 1%, 29% { opacity: 1; } 30%, 100% { opacity: 0; -webkit-transform: scale(1.15); transform: scale(1.15); } } @-webkit-keyframes zoomOutAndFade { 0% { opacity: 0; -webkit-transform: scale(1.15); transform: scale(1.15); } 1%, 29% { opacity: 1; } 30%, 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @keyframes zoomOutAndFade { 0% { opacity: 0; -webkit-transform: scale(1.15); transform: scale(1.15); } 1%, 29% { opacity: 1; } 30%, 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes fadeInAndOut { 0% { opacity: 0; z-index: 801; } 1%, 24% { opacity: 1; z-index: 801; } 25%, 100% { opacity: 0; z-index: 1; } } @keyframes fadeInAndOut { 0% { opacity: 0; z-index: 801; } 1%, 24% { opacity: 1; z-index: 801; } 25%, 100% { opacity: 0; z-index: 1; } } @-webkit-keyframes slideLeftIn { from { -webkit-transform: translateX(100%); transform: translateX(100%); } to { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideLeftIn { from { -webkit-transform: translateX(100%); transform: translateX(100%); } to { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes slideRightOut { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes slideRightOut { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes tapAnimation { 0% { opacity: 0; -webkit-transform: scale(0.96); transform: scale(0.96); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes tapAnimation { 0% { opacity: 0; -webkit-transform: scale(0.96); transform: scale(0.96); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .standardForm { margin: 0 auto 70px; max-width: 734px; } .inModal .standardForm, .modalStyle .standardForm { background-color: #fff; border-radius: 6px; margin-bottom: 0; width: auto; } .standardForm .formFieldMessage { color: #bd081c; margin: 10px 0 0; } .standardForm > h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; font-size: 35px; margin: 25px 0 0; } .inModal .standardForm > h1, .modalStyle .standardForm > h1 { border-bottom: 1px solid #e7e7e7; color: #333; font-size: 20px; margin: 0; min-height: 20px; padding: 17px 18px 13px 18px; position: relative; } .modalHasClose .standardForm > h1 { padding-right: 50px; } .standardForm .formTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; font-size: 35px; margin: 25px 0 0; } .inModal .standardForm .formTitle, .modalStyle .standardForm .formTitle { border-bottom: 1px solid #e7e7e7; color: #333; font-size: 20px; margin: 0; min-height: 20px; padding: 17px 18px 13px 18px; position: relative; } .modalHasClose .standardForm .formTitle { padding-right: 50px; } .standardForm > h2, .standardForm .formSectionHeading { font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-weight: bold; color: #333; font-size: 20px; margin: 40px 0 10px; } .standardForm > ul, .standardForm .formSection { background: #fff; border-radius: 6px; margin: 0; } .standardForm > ul > li, .standardForm .formSection > li { overflow: hidden; border-top: 1px solid #dfdfdf; padding: 15px 21px 15px 27px; } .standardForm > ul > li:first-child, .standardForm .formSection > li:first-child { border: 0; } .inModal .standardForm > ul > li, .modalStyle .standardForm > ul > li, .inModal .standardForm .formSection > li, .modalStyle .standardForm .formSection > li { padding-left: 18px; padding-right: 21px; } .standardForm .formItem { overflow: hidden; border-top: 1px solid #dfdfdf; padding: 15px 21px 15px 27px; } .standardForm .formItem:first-child { border: 0; } .inModal .standardForm .formItem, .modalStyle .standardForm .formItem { padding-left: 18px; padding-right: 21px; } .standardForm > ul > li > h3, .standardForm .formSection > li > h3 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #555; float: left; font-size: 13px; font-weight: bold; padding: 4px 10px 0 0; width: 216px; } .standardForm > ul > li > h3 .hasError, .standardForm .formSection > li > h3 .hasError { color: #bd081c; } .inModal .standardForm > ul > li > h3, .modalStyle .standardForm > ul > li > h3, .inModal .standardForm .formSection > li > h3, .modalStyle .standardForm .formSection > li > h3 { width: 130px; } .standardForm > ul > li > h3.optional, .standardForm .formSection > li > h3.optional { font-style: italic; font-weight: normal; } .standardForm .formItem > h3 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #555; float: left; font-size: 13px; font-weight: bold; padding: 4px 10px 0 0; width: 216px; } .standardForm .formItem > h3 .hasError { color: #bd081c; } .inModal .standardForm .formItem > h3, .modalStyle .standardForm .formItem > h3 { width: 130px; } .standardForm .formItem > h3.optional { font-style: italic; font-weight: normal; } .standardForm .formItemHeading { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #555; float: left; font-size: 13px; font-weight: bold; padding: 4px 10px 0 0; width: 216px; } .standardForm .formItemHeading .hasError { color: #bd081c; } .inModal .standardForm .formItemHeading, .modalStyle .standardForm .formItemHeading { width: 130px; } .standardForm .formItemHeading.optional { font-style: italic; font-weight: normal; } .standardForm > ul > li > div, .standardForm .formSection > li > div { margin-left: 226px; } .inModal .standardForm > ul > li > div, .modalStyle .standardForm > ul > li > div, .inModal .standardForm .formSection > li > div, .modalStyle .standardForm .formSection > li > div { margin-left: 140px; } .standardForm .formItem > div { margin-left: 226px; } .inModal .standardForm .formItem > div, .modalStyle .standardForm .formItem > div { margin-left: 140px; } .standardForm .formRightColumn { margin-left: 226px; } .inModal .standardForm .formRightColumn, .modalStyle .standardForm .formRightColumn { margin-left: 140px; } .standardForm .learnMore { float: right; font-size: 11px; } .standardForm input[type="email"], .standardForm input[type="number"], .standardForm input[type="password"], .standardForm input[type="text"], .standardForm input[type="url"], .standardForm textarea { background-color: #f3f3f3; background: -webkit-linear-gradient(#f0f0f0, #f5f5f5); background: linear-gradient(#f0f0f0, #f5f5f5); box-sizing: border-box; width: 100%; border: 1px solid #d6d3ce; border-radius: 3px; color: #333; font-size: 14px; padding: 7px; } .standardForm input[type="email"]:focus, .standardForm input[type="number"]:focus, .standardForm input[type="password"]:focus, .standardForm input[type="text"]:focus, .standardForm input[type="url"]:focus, .standardForm textarea:focus { background: #fff; } .standardForm input[type="email"].hasError, .standardForm input[type="email"].hasWarning, .standardForm input[type="number"].hasError, .standardForm input[type="number"].hasWarning, .standardForm input[type="password"].hasError, .standardForm input[type="password"].hasWarning, .standardForm input[type="text"].hasError, .standardForm input[type="text"].hasWarning, .standardForm input[type="url"].hasError, .standardForm input[type="url"].hasWarning, .standardForm textarea.hasError, .standardForm textarea.hasWarning { background: #e6abad; border-color: #bd081c; } .standardForm input[type="email"].disabled, .standardForm input[type="number"].disabled, .standardForm input[type="password"].disabled, .standardForm input[type="text"].disabled, .standardForm input[type="url"].disabled, .standardForm textarea.disabled { background-color: #f8f8f8; background: -webkit-linear-gradient(#f5f5f5, #fafafa); background: linear-gradient(#f5f5f5, #fafafa); border-color: #dcdcdc; color: #999; cursor: default; } .safari .standardForm input[type="email"].disabled, .safari .standardForm input[type="number"].disabled, .safari .standardForm input[type="password"].disabled, .safari .standardForm input[type="text"].disabled, .safari .standardForm input[type="url"].disabled, .safari .standardForm textarea.disabled { background-color: #f8f8f8; } .standardForm textarea { height: 85px; line-height: 20px; resize: vertical; } .standardForm select { box-sizing: border-box; width: 100%; background-color: #f5f5f5; border-radius: 6px; border: 1px solid #cfcfcf; color: #333; cursor: pointer; font-weight: bold; height: 28px; padding: 4px 4px 4px 14px; } .standardForm .learnMore { margin: 7px 0 0 10px; } .formFooter { background: #f0f0f0; border-radius: 0 0 6px 6px; border-top: 1px solid #dadada; clear: both; padding: 10px 20px; } .formFooter::after { clear: both; content: ""; display: table; } .formFooter a:active { color: #bd081c; } .formFooter .formFooterDelete { float: left; } .formFooter .formFooterButtons { float: right; } .formFooter .helpText { color: #444; float: left; font-size: 11px; line-height: 15px; margin: 0; } .formFooter .helpText a { color: #bd081c; font-weight: bold; } .formFooter .helpText a:hover { text-decoration: underline; } .formFooter .helpText a:active { color: #bd081c; } .formFooter .btn.Button { margin-left: 8px; padding-left: 15px; padding-right: 15px; } .formFooter .btn.Button.deleteButton { margin-left: 0; } .formCheckedSet li { margin-top: 10px; } .formCheckedSet li:first-child { margin: 0; } .formCheckedSet label { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; color: #555; cursor: pointer; } .formCheckedSet label .fancyToggle { float: left; margin-right: 8px; } .formCheckedSet label > input { margin-right: 3px; } .formCheckedSet label > span { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 13px; font-weight: bold; vertical-align: middle; } .formCheckedSetItem { margin-top: 10px; } .formCheckedSetItem:first-child { margin: 0; } .formInlineCheckedSet { padding-top: 6px; } .formInlineCheckedSet li { display: inline-block; margin-right: 25px; } .formInlineCheckedSet label { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; color: #555; cursor: pointer; } .formInlineCheckedSet label .fancyToggle { float: left; margin-right: 8px; } .formInlineCheckedSet label > input { margin-right: 3px; } .formInlineCheckedSet label > span { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 13px; font-weight: bold; vertical-align: middle; } .formInlineCheckedSet label.hasError span { color: #bd081c; } .formInlineCheckedSet .formFieldMessage { display: none; } .formInlineCheckedSet .formHelpMessage { display: none; } .formInlineCheckedSetItem { display: inline-block; margin-right: 25px; } .formInlineLabel { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; color: #555; cursor: pointer; } .formInlineLabel .fancyToggle { float: left; margin-right: 8px; } .formInlineLabel > input { margin-right: 3px; } .formInlineLabel > span { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 13px; font-weight: bold; vertical-align: middle; } .formFieldMessage { font-size: 13px; } label { cursor: pointer; } .formFooter .formFooterDelete { margin-right: 10px; } .standardForm--login { max-width: 470px; padding-top: 20px; } .standardForm--login > ul > li, .standardForm--login .formSection > li { border: none; padding: 5px 40px; position: relative; } .standardForm--login .formItem { border: none; padding: 5px 40px; position: relative; } .standardForm--login > h1 { color: #525252; font-size: 23px; margin: 10px 40px 15px; } .standardForm--login .formTitle { color: #525252; font-size: 23px; margin: 10px 40px 15px; } .standardForm--login > ul, .standardForm--login .formSection { margin-bottom: 20px; overflow: hidden; } .standardForm--login select { font-size: 16px; font-weight: normal; height: 36px; } .standardForm--login .formFooter { font-size: 14px; padding: 20px 40px; } .standardForm--login .formFooter a:hover { color: #bd081c; } .standardForm--login .formHelpMessage { color: #008000; position: absolute; right: 57px; top: 16px; } .standardForm--login input[type="email"], .standardForm--login input[type="number"], .standardForm--login input[type="password"], .standardForm--login input[type="text"], .standardForm--login input[type="url"], .standardForm--login textarea { border-radius: 3px; font-size: 20px; padding: 15px; } .standardForm--login .helpText { line-height: 40px; font-size: 15px; } .standardForm--login .email.hasError { padding-right: 130px; } .standardForm--login .formFieldMessage { position: absolute; right: 57px; top: 16px; } .standardForm--login input.hasError { background: transparent !important; border-color: #bd081c !important; box-shadow: 0 0 6px rgba(255, 0, 0, 0.35); } .standardForm--trademark { margin: 14px auto; } .standardForm--trademark > ul, .standardForm--trademark .formSection { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; margin: 14px auto; } .standardForm--trademark .formCheckedSet li { padding: 1px; } @media (min-width: 0) and (max-width: 999px) { .centeredWithinWrapper { width: 750px; } .centeredWithinWrapper.gridWidth { width: 736px; } } .centeredWith3Columns { width: 750px; margin: auto; } .centeredWith3Columns.gridWidth { width: 736px; } @media (min-width: 1000px) and (max-width: 1249px) { .centeredWithinWrapper { width: 1000px; } .centeredWithinWrapper.gridWidth { width: 986px; } } .centeredWith4Columns { width: 1000px; margin: auto; } .centeredWith4Columns.gridWidth { width: 986px; } @media (min-width: 1250px) and (max-width: 1499px) { .centeredWithinWrapper { width: 1250px; } .centeredWithinWrapper.gridWidth { width: 1236px; } } .centeredWith5Columns { width: 1250px; margin: auto; } .centeredWith5Columns.gridWidth { width: 1236px; } @media (min-width: 1500px) and (max-width: 1749px) { .centeredWithinWrapper { width: 1500px; } .centeredWithinWrapper.gridWidth { width: 1486px; } } .centeredWith6Columns { width: 1500px; margin: auto; } .centeredWith6Columns.gridWidth { width: 1486px; } @media (min-width: 1750px) and (max-width: 1999px) { .centeredWithinWrapper { width: 1750px; } .centeredWithinWrapper.gridWidth { width: 1736px; } } .centeredWith7Columns { width: 1750px; margin: auto; } .centeredWith7Columns.gridWidth { width: 1736px; } @media (min-width: 2000px) and (max-width: 2249px) { .centeredWithinWrapper { width: 2000px; } .centeredWithinWrapper.gridWidth { width: 1986px; } } .centeredWith8Columns { width: 2000px; margin: auto; } .centeredWith8Columns.gridWidth { width: 1986px; } @media (min-width: 2250px) and (max-width: 2499px) { .centeredWithinWrapper { width: 2250px; } .centeredWithinWrapper.gridWidth { width: 2236px; } } .centeredWith9Columns { width: 2250px; margin: auto; } .centeredWith9Columns.gridWidth { width: 2236px; } @media (min-width: 2500px) and (max-width: 2749px) { .centeredWithinWrapper { width: 2500px; } .centeredWithinWrapper.gridWidth { width: 2486px; } } .centeredWith10Columns { width: 2500px; margin: auto; } .centeredWith10Columns.gridWidth { width: 2486px; } html, body { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; color: #211922; font-size: 12px; } html { height: 100%; } body { min-height: 100%; overflow-y: scroll; position: relative; } body.newUserBastilleStepsTutorial, body.newUserExtensionStepsTutorial { background-color: #fff; } input::-ms-clear { display: none; } .noScroll, .ReactModal__Body--open { overflow: hidden; } ul { margin: 0; padding: 0; } ul li { list-style: none; padding: 0; } :focus { outline: #d1d1d1 auto 1px; } .dangerouslyDisableFocusStyle:focus { outline: none; } .centeredWithinWrapper { margin: 0 auto; } .hidden { display: none; } .errorMessage { -webkit-animation: bounceIn .5s; animation: bounceIn .5s; color: #444; font-size: 21px; font-weight: bold; line-height: 30px; margin: 0 auto; max-width: 738px; padding-top: 130px; text-align: center; } .errorMessage .back, .errorMessage .retry { font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-weight: bold; color: #d62229; display: block; } .errorMessage .retry { margin-top: 13px; } .errorMessage .errorInternal { margin: 0 auto 32px; background: url(https://s.pinimg.com/webapp/style/images/502_tools-1x-675419bc.png) no-repeat; background-size: contain; height: 222px; width: 303px; } .errorMessage .suggestionText { color: #777; } .inlineError { color: #bd081c; font-size: 13px; font-weight: bold; margin-bottom: 1em; margin-top: 0; text-align: center; } a { color: #717171; font-weight: bold; text-decoration: none; /* Only apply focus style for non Gestalt classes */ } a:not([class*="_"]):focus, a:not([class*="_"]):hover { color: #8a8a8a; } .transitionMask { bottom: 0; left: 0; position: fixed; right: 0; top: 0; } .placeholder { color: #aaa !important; } .bottomDrawer { background: rgba(200, 200, 200, 0.6); border-top: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15) inset, 0 -1px 0 rgba(255, 255, 255, 0.18); clear: both; margin-top: 25px; padding-bottom: 40px; } .sectionTitle { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-weight: bold; color: #444; font-size: 13px; margin-bottom: 7px; margin-top: 28px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); } .tutorialHighlight { -webkit-animation: fadeIn .2s linear; animation: fadeIn .2s linear; border-radius: 6px; overflow: hidden; position: fixed !important; z-index: 999999998 !important; } .tutorialHighlightMask { position: fixed !important; z-index: 999999999 !important; } .tutorialHighlightBackground { background: #fff; margin-left: -2px; margin-top: -2px; padding: 2px; position: fixed !important; z-index: 999999997 !important; } .tutorialHighlightBackground.categoriesDropdownButtonBg { border-radius: 0 8px 8px 0; } .tutorialHighlightBackground.footerButtonWrapperBg { background: #e9e9e9; border-radius: 18px; margin-left: -3px; margin-top: -3px; padding: 3px 2px 2px 3px; } .tutorialHighlightBackground.logoNavButtonBg { border-radius: 8px 0 0 8px; } .tutorialHighlightBackground.mainSearchTextboxBg { border-radius: 0; } .tutorialHighlightBackground.searchInputTokenBg { border-radius: 8px; margin: 0 0 0 -3px; padding: 0 0 0 2px; } .debugMacro { border: 2px solid #f00; overflow: auto; } .standaloneErrorPage .category { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; border: 0; box-shadow: none; display: inline-block; margin-bottom: 10px; padding: 10px; position: relative; vertical-align: top; width: 216px; } .standaloneErrorPage .categoryLinkWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .standaloneErrorPage .categoryImage { overflow: hidden; border-radius: 6px; /* stylelint-disable-next-line at-rule-no-unknown */ } .standaloneErrorPage .categoryImage.animals { background: url(https://s.pinimg.com/webapp/style/images/animals-1x-50ba8d38.jpg) no-repeat; background-size: contain; height: 145px; width: 216px; } .standaloneErrorPage .categoryImage.architecture { background: url(https://s.pinimg.com/webapp/style/images/architecture-1x-97b5b7b8.jpg) no-repeat; background-size: contain; height: 145px; width: 216px; } .standaloneErrorPage .categoryImage.travel { background: url(https://s.pinimg.com/webapp/style/images/travel-1x-d0640cf1.jpg) no-repeat; background-size: contain; height: 145px; width: 216px; } .standaloneErrorPage .categoryImage.food_drink { background: url(https://s.pinimg.com/webapp/style/images/food_drink-1x-5975e611.jpg) no-repeat; background-size: contain; height: 145px; width: 216px; } .standaloneErrorPage .categoryImage.photography { background: url(https://s.pinimg.com/webapp/style/images/photography-1x-3030c6e9.jpg) no-repeat; background-size: contain; height: 145px; width: 216px; } .standaloneErrorPage .categoryImage.film_music_books { background: url(https://s.pinimg.com/webapp/style/images/film_music_books-1x-8a7bbd9b.jpg) no-repeat; background-size: contain; height: 145px; width: 216px; } .standaloneErrorPage .name { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ color: #555; max-width: 100%; -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .panelBase { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; } .panelBase .panelBody { overflow: hidden; } .panelBase .panelHeading { border-bottom: 1px solid transparent; border-top-radius: 5px; padding: 22px; } .panelBase .panelHeading > .dropdown .dropdown-toggle { color: inherit; } .panelBase .panelTitle { color: inherit; font-size: 20px; margin-top: 0; margin-bottom: 5px; } .panelBase .panelTitle > a { color: inherit; } .panelBase .panelSubtitle { color: #808080; font-size: 16px; margin-top: 0; margin-bottom: 0; } .panelBase .panelFooter { background-color: #f5f5f5; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top: 1px solid #ccc; color: #999; padding: 14px; overflow: hidden; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, ul { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; } html { font-size: 100%; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } a:hover, a:active { outline: 0; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { /* Responsive images (ensure images don't scale beyond their parents) */ max-width: 100%; /* Part 1: Set a maxium relative to the parent */ width: auto\9; /* IE7-8 need help adjusting responsive images */ height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */ vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } #map_canvas img { max-width: none; } fieldset { border: 0; margin: 0; padding: 0; } button, input, select, textarea { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; font-size: 100%; margin: 0; vertical-align: middle; } button, input { line-height: normal; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } input[type="search"] { -webkit-appearance: textfield; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -moz-appearance: none; -webkit-appearance: none; appearance: none; margin: 0; } textarea { overflow: auto; vertical-align: top; } body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } .Module.fadeIn { -webkit-animation: fadeIn 0.3s; animation: fadeIn 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .Module.fadeOut { -webkit-animation: fadeOut 0.3s; animation: fadeOut 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .Module.slideIn { -webkit-animation: menu-slide-in-up 0.3s; animation: menu-slide-in-up 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .Module.hideModule { opacity: 0; } .Module.error { opacity: 1; visibility: visible; } .Module .moduleMask { background: #fff; opacity: 0.9; position: absolute; z-index: 660; } .Spinner { height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 659; } .Spinner.hidden { display: none; } .Spinner .spinnerSmall { background: url(https://s.pinimg.com/webapp/style/images/spinner-small-1x-b897d25e.gif) no-repeat; background-size: contain; height: 16px; width: 16px; display: inline-block; opacity: .5; left: 50%; margin-left: -8px; margin-top: -8px; position: absolute; top: 50%; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Spinner .spinnerSmall { background-image: url(https://s.pinimg.com/webapp/style/images/spinner-small-2x-dbb1334f.gif); } } .Spinner .spinnerMedium { background: url(https://s.pinimg.com/webapp/style/images/spinner-medium-1x-dbb1334f.gif) no-repeat; background-size: contain; height: 32px; width: 32px; display: inline-block; opacity: .5; left: 50%; margin-left: -16px; margin-top: -16px; position: absolute; top: 50%; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Spinner .spinnerMedium { background-image: url(https://s.pinimg.com/webapp/style/images/spinner-medium-2x-3ffcb44b.gif); } } .Spinner .whiteSpinnerSmall { background: url(https://s.pinimg.com/webapp/style/images/white-spinner-small-1x-e0121c37.gif) no-repeat; background-size: contain; height: 16px; width: 16px; display: inline-block; opacity: .5; left: 50%; margin-left: -8px; margin-top: -8px; position: absolute; top: 50%; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Spinner .whiteSpinnerSmall { background-image: url(https://s.pinimg.com/webapp/style/images/white-spinner-small-2x-0b36bec0.gif); } } .Spinner .whiteSpinnerMedium { background: url(https://s.pinimg.com/webapp/style/images/white-spinner-medium-1x-0b36bec0.gif) no-repeat; background-size: contain; height: 32px; width: 32px; display: inline-block; opacity: .5; left: 50%; margin-left: -16px; margin-top: -16px; position: absolute; top: 50%; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Spinner .whiteSpinnerMedium { background-image: url(https://s.pinimg.com/webapp/style/images/white-spinner-medium-2x-d8c7106a.gif); } } .Spinner .redSpinnerSmall { -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; border-radius: 50%; border-right: 2px solid transparent; border-top: 2px solid #bd081c; content: ''; height: 16px; width: 16px; left: 50%; margin-left: -8px; margin-top: -8px; position: absolute; top: 50%; } .newForm { /* label[class^="formCol-"] { position: relative; display: block; &.hasError { padding-top: 14px; } .formErrorMessage { position: absolute; left: 10px; top: 0; margin: 0; } } */ } .newForm label { color: #333; font-size: 14px; } .newForm input[type=text], .newForm input[type=password], .newForm input[type=button], .newForm button, .newForm select { box-sizing: border-box; color: #333; font-size: 14px; width: 100%; } .newForm input[type=text]:focus, .newForm input[type=password]:focus, .newForm input[type=button]:focus, .newForm button:focus, .newForm select:focus { border-color: #a6a6a6; } .newForm input[type=text], .newForm input[type=password] { border-radius: 6px; border: 1px solid #ccc; box-shadow: inset 0 1px 1px #f0ede7; color: #333; padding: 8px 10px; } .newForm input[type=text].hasError, .newForm input[type=password].hasError { border-color: #d7222a; } .newForm .formRow { padding: 4px 0; overflow: hidden; } .newForm .formCol-1 { width: 100%; } .newForm .formCol-2 { float: left; width: 49%; } .newForm .formCol-2:last-of-type { float: right; } .newForm .formCol-3 { float: left; width: 31%; } .newForm .formErrorMessage { font-size: 11px; font-weight: bold; color: #d7222a; margin: 2px 0; } .fixedsticky { position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; } /* When position: sticky is supported but native behavior is ignored */ .fixedsticky-withoutfixedfixed .fixedsticky-off, .fixed-supported .fixedsticky-off { position: static; } .fixedsticky-withoutfixedfixed .fixedsticky-on, .fixed-supported .fixedsticky-on { position: fixed; } .fixedsticky-dummy { display: none; } .fixedsticky-on + .fixedsticky-dummy { display: block; } /* Gestalt global CSS */ /* DEPRECATED - use Gestalt components instead */ /* Border lines */ .border { border: 1px solid #efefef; } .border-top { border-top: 1px solid #efefef; } .border-right { border-right: 1px solid #efefef; } .border-bottom { border-bottom: 1px solid #efefef; } .border-left { border-left: 1px solid #efefef; } .no-border { border: 0; } /* Border radii */ .square { border-radius: 0; } .circle { border-radius: 50%; } .rounded { border-radius: 8px; } .rounded-top { border-radius: 8px 8px 0 0; } .rounded-right { border-radius: 0 8px 8px 0; } .rounded-bottom { border-radius: 0 0 8px 8px; } .rounded-left { border-radius: 8px 0 0 8px; } /* blue */ .blue { color: #0084ff; } .blue-hover:hover { color: #0084ff; } .bg-blue { background-color: #0084ff; } /* dark-gray */ .dark-gray { color: #555; } .dark-gray-hover:hover { color: #555; } /* gray */ .gray { color: #b5b5b5; } .bg-gray { background-color: #b5b5b5; } /* red */ .red { color: #bd081c; } .bg-red { background-color: #bd081c; } .bg-red-active:active { background-color: #a3081a; } .bg-red-focus:focus { background-color: #ad081b; } .bg-red-hover:hover { background-color: #bd081c; } /* super-light-gray */ .bg-super-light-gray { background-color: #efefef; } /* white */ .white { color: #fff; } .bg-white { background-color: #fff; } /* yellow */ .yellow { color: #fab904; } .bg-yellow { background-color: #fab904; } /* olive */ .olive { color: #364a4c; } /* columns */ .col, .xs-col { display: inline-block; vertical-align: top; } .col-1, .xs-col-1 { width: 8.33333%; } .col-2, .xs-col-2 { width: 16.66667%; } .col-3, .xs-col-3 { width: 25%; } .col-4, .xs-col-4 { width: 33.33333%; } .col-5, .xs-col-5 { width: 41.66667%; } .col-6, .xs-col-6 { width: 50%; } .col-7, .xs-col-7 { width: 58.33333%; } .col-8, .xs-col-8 { width: 66.66667%; } .col-9, .xs-col-9 { width: 75%; } .col-10, .xs-col-10 { width: 83.33333%; } .col-11, .xs-col-11 { width: 91.66667%; } .col-12, .xs-col-12 { width: 100%; } @media (min-width: 360px) { .sm-col-1 { width: 8.33333%; } .sm-col-2 { width: 16.66667%; } .sm-col-3 { width: 25%; } .sm-col-4 { width: 33.33333%; } .sm-col-5 { width: 41.66667%; } .sm-col-6 { width: 50%; } .sm-col-7 { width: 58.33333%; } .sm-col-8 { width: 66.66667%; } .sm-col-9 { width: 75%; } .sm-col-10 { width: 83.33333%; } .sm-col-11 { width: 91.66667%; } .sm-col-12 { width: 100%; } } @media (min-width: 800px) { .md-col-1 { width: 8.33333%; } .md-col-2 { width: 16.66667%; } .md-col-3 { width: 25%; } .md-col-4 { width: 33.33333%; } .md-col-5 { width: 41.66667%; } .md-col-6 { width: 50%; } .md-col-7 { width: 58.33333%; } .md-col-8 { width: 66.66667%; } .md-col-9 { width: 75%; } .md-col-10 { width: 83.33333%; } .md-col-11 { width: 91.66667%; } .md-col-12 { width: 100%; } } @media (min-width: 1312px) { .lg-col-1 { width: 8.33333%; } .lg-col-2 { width: 16.66667%; } .lg-col-3 { width: 25%; } .lg-col-4 { width: 33.33333%; } .lg-col-5 { width: 41.66667%; } .lg-col-6 { width: 50%; } .lg-col-7 { width: 58.33333%; } .lg-col-8 { width: 66.66667%; } .lg-col-9 { width: 75%; } .lg-col-10 { width: 83.33333%; } .lg-col-11 { width: 91.66667%; } .lg-col-12 { width: 100%; } } /* cursor */ .pointer { cursor: pointer; } .zoom-in { cursor: zoom-in; } .zoom-out { cursor: zoom-out; } /* floats */ .pull-left { float: left; } .pull-right { float: right; } .clearfix::before, .clearfix::after { content: " "; display: table; } .clearfix::after { clear: both; } /* display */ .block { display: block; } .inline { display: inline; } .inline-block { display: inline-block; } .table { display: table; } .table-cell { display: table-cell; } /* overflow */ .overflow-hidden { overflow: hidden; } .overflow-scroll { overflow: scroll; } .overflow-auto { overflow: auto; } .fit { max-width: 100%; } /* position */ .relative { position: relative; } .fixed { position: fixed; } .absolute { position: absolute; } .top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } /* box model */ .border-box { box-sizing: border-box; } .flex { display: -webkit-box; display: -ms-flexbox; display: flex; } @media (min-width: 360px) { .sm-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media (min-width: 800px) { .md-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media (min-width: 1312px) { .lg-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } } .flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .items-start { -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; } .items-end { -webkit-box-align: end; -ms-flex-align: end; -ms-grid-row-align: flex-end; align-items: flex-end; } .items-center { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; -ms-grid-row-align: baseline; align-items: baseline; } .items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; } .self-start { -ms-flex-item-align: start; align-self: flex-start; } .self-end { -ms-flex-item-align: end; align-self: flex-end; } .self-center { -ms-flex-item-align: center; align-self: center; } .self-baseline { -ms-flex-item-align: baseline; align-self: baseline; } .self-stretch { -ms-flex-item-align: stretch; align-self: stretch; } .justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .justify-around { -ms-flex-pack: distribute; justify-content: space-around; } .content-start { -ms-flex-line-pack: start; align-content: flex-start; } .content-end { -ms-flex-line-pack: end; align-content: flex-end; } .content-center { -ms-flex-line-pack: center; align-content: center; } .content-between { -ms-flex-line-pack: justify; align-content: space-between; } .content-around { -ms-flex-line-pack: distribute; align-content: space-around; } .content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; } /* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */ .flex-auto { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; /* 1 */ min-width: 0; /* 1 */ } .flex-none { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .order-first { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .order-last { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } /* formatting */ .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } .bold { font-weight: bold; } .regular { font-style: normal; } .italic { font-style: italic; } .underline { text-decoration: underline; } /* lists */ .list-style-none { list-style: none; } /* text overflow */ .no-wrap { white-space: nowrap; } .break-word { -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; word-wrap: break-word; } .truncate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* styles */ .sans-serif { font-family: "Helvetica Neue", Helvetica, "\30D2\30E9\30AE\30CE\89D2\30B4 Pro W3", "Hiragino Kaku Gothic Pro", "\30E1\30A4\30EA\30AA", Meiryo, "\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF", arial, sans-serif; } .antialiased { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } /* scale */ .text-xs, .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.primary span.buttonText, .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits .storyCredits .creditFooter, .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .creditItem, .Pin .creditFooter { font-size: 10px; letter-spacing: -0.025px; line-height: 11px; word-spacing: 0; } :lang(ja) .text-xs, :lang(ja) .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.remove :lang(ja) span.buttonText, :lang(ja) .news .pending .actions .Button.primary span.buttonText, .news .pending .actions .Button.primary :lang(ja) span.buttonText, :lang(ja) .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .Typeahead.typeaheadWithTitles li a.titleItem :lang(ja) .typeaheadName, :lang(ja) .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .storyCreditWrapper :lang(ja) .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits :lang(ja) .storyCredits > .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits .creditFooter, .ExploreStoryCredits .storyCredits :lang(ja) .creditFooter, :lang(ja) .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .pinCreditWrapper :lang(ja) .creditItem, :lang(ja) .Pin.summary .pinCredits > .creditItem, .Pin.summary :lang(ja) .pinCredits > .creditItem, :lang(ja) .Pin .creditFooter, .Pin :lang(ja) .creditFooter { font-size: 8.6px; } .text-s, .FirstPinCreate .Pin.summary .pinMeta .TextField, .Board .boardName .boardPinCount, .Board .boardName.hasBoardContext .User.boardRepTitle .fullname, .Board .boardName.hasBoardContext .User.exploreTabTitle .fullname, .BoardHeader .belowBoardNameContainer .followerCount, .BoardHeader .belowBoardNameContainer .pinCount, .BoardInfoBar .pinsAndFollowerCount .value, .BoardInfoBar .pinsAndFollowerCount .label, .PinCreate .Pin.summary .pinMeta .TextField, .text-sm { font-size: 11px; letter-spacing: -0.05px; line-height: 12px; word-spacing: 0; } :lang(ja) .text-sm { font-size: 9.5px; } .text-m, .Button.boardSettingsButton .buttonText, .Modal .formFooter .Button.rounded:not(.primary) .buttonText, .ReactModal__Content .formFooter .Button.rounded:not(.primary) .buttonText, .news .pending .actions .Button.remove .buttonText, .boardEdit .Button .buttonText, .Button.userFollowingGridButton .buttonText, .InviteButtonEmail .Button.btn .buttonText, .Button.moreItems .buttonText, .formFooterButton.cancelButton .buttonText, .Button.CardFollow.GrayButton .buttonText, .Button.FollowButton .buttonText, .Button.UserFollowButton .buttonText, .Button.InterestFollowButton .buttonText, .Modal .formFooter .Button.primary .buttonText, .ReactModal__Content .formFooter .Button.primary .buttonText, .news .pending .actions .Button.primary .buttonText, .panelFooter .formFooterButtons .cancelButton .buttonText, .Button.searchToFollowButton .buttonText, .formFooterButton.confirmButton .buttonText, .Button.CardFollow.RedButton .buttonText, .Button.promoteYourPin .buttonText, .Button.userProfileMenu:not(.UnblockButton) .buttonText, .Button.editProfile .buttonText, .Button.groupBoardChat .buttonText, .boardDetail .pending .actions .Button.remove .buttonText, .boardDetail .pending .actions .Button.primary .buttonText, .BoardCollaboratorInviter .BoardInviteForm .inviteButton .buttonText, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton .buttonText, .InterestFeedPage .feedHeader .interestStats, .TopicFeedPage .feedHeader .interestStats, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .BoardHeader .description, .BoardInvite.news .boardName, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs .label, .UserProfileHeader.profileHeader .about .aboutText, .UserProfileHeader.profileHeader .about .iconsLinksEtc .locationWrapper, .UserProfileHeader.profileHeader .about .iconsLinksEtc .website, .UserProfileHeader.profileHeader .about .iconsLinksEtc .middot::after, .UpsellTip .footerButtons .cancelButton, .UpsellTip .footerButtons .submitButton, .text-md { font-size: 12px; letter-spacing: -0.1px; line-height: 14px; word-spacing: 0; } :lang(ja) .text-md { font-size: 10.3px; } .text-l, .User.gridItem .username, .Interest .interestWrapper .interestLabel h2, .ShopGridItem .productName, .Board .boardName .name, .Board .boardName.hasBoardContext .User.boardRepTitle .title, .Board .boardName.hasBoardContext .User.exploreTabTitle .title, .text-lg { font-size: 14px; letter-spacing: -0.15px; line-height: 16px; word-spacing: 0; } :lang(ja) .text-lg { font-size: 12px; } .text-xl, .standaloneErrorPage .name, .UserSettingsPage .sectionTitle h2 { font-size: 16px; letter-spacing: -0.2px; line-height: 18px; word-spacing: 0; } :lang(ja) .text-xl, :lang(ja) .standaloneErrorPage .name, .standaloneErrorPage :lang(ja) .name, :lang(ja) .UserSettingsPage .sectionTitle h2, .UserSettingsPage .sectionTitle :lang(ja) h2 { font-size: 13.8px; } .display-xs, .BoardInfoBar .smallBoardName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName { font-size: 18px; letter-spacing: -0.25px; line-height: 20px; word-spacing: 0; } :lang(ja) .display-xs, :lang(ja) .BoardInfoBar .smallBoardName, .BoardInfoBar :lang(ja) .smallBoardName, :lang(ja) .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage :lang(ja) .fixedHeaderName { font-size: 15.5px; } .display-s, .UserInfoBar.infoBar .tabs .value, .display-sm { font-size: 21px; letter-spacing: -0.3px; line-height: 23px; word-spacing: -1.3px; } :lang(ja) .display-sm { font-size: 18.1px; } .display-m, .InterestFeedPage .feedHeader .authLandingPageTitle .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .display-md { font-size: 24px; letter-spacing: -1px; line-height: 28px; word-spacing: -2px; } :lang(ja) .display-md { font-size: 20.6px; } .display-l, .FeedPage .feedName, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .display-lg { font-size: 36px; letter-spacing: -1.25px; line-height: 42px; word-spacing: -2.25px; } :lang(ja) .display-lg { font-size: 31px; } .display-xl { font-size: 48px; letter-spacing: -1.75px; line-height: 56px; word-spacing: -2.75px; } :lang(ja) .display-xl { font-size: 41.3px; } @media (min-width: 360px) { .text-xs, .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.primary span.buttonText, .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits .storyCredits .creditFooter, .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .creditItem, .Pin .creditFooter { font-size: 11px; letter-spacing: -0.05px; line-height: 12px; word-spacing: 0; } :lang(ja) .text-xs, :lang(ja) .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.remove :lang(ja) span.buttonText, :lang(ja) .news .pending .actions .Button.primary span.buttonText, .news .pending .actions .Button.primary :lang(ja) span.buttonText, :lang(ja) .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .Typeahead.typeaheadWithTitles li a.titleItem :lang(ja) .typeaheadName, :lang(ja) .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .storyCreditWrapper :lang(ja) .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits :lang(ja) .storyCredits > .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits .creditFooter, .ExploreStoryCredits .storyCredits :lang(ja) .creditFooter, :lang(ja) .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .pinCreditWrapper :lang(ja) .creditItem, :lang(ja) .Pin.summary .pinCredits > .creditItem, .Pin.summary :lang(ja) .pinCredits > .creditItem, :lang(ja) .Pin .creditFooter, .Pin :lang(ja) .creditFooter { font-size: 9.5px; } .text-s, .FirstPinCreate .Pin.summary .pinMeta .TextField, .Board .boardName .boardPinCount, .Board .boardName.hasBoardContext .User.boardRepTitle .fullname, .Board .boardName.hasBoardContext .User.exploreTabTitle .fullname, .BoardHeader .belowBoardNameContainer .followerCount, .BoardHeader .belowBoardNameContainer .pinCount, .BoardInfoBar .pinsAndFollowerCount .value, .BoardInfoBar .pinsAndFollowerCount .label, .PinCreate .Pin.summary .pinMeta .TextField, .text-sm { font-size: 12px; letter-spacing: -0.1px; line-height: 14px; word-spacing: 0; } :lang(ja) .text-sm { font-size: 10.3px; } .text-m, .Button.boardSettingsButton .buttonText, .Modal .formFooter .Button.rounded:not(.primary) .buttonText, .ReactModal__Content .formFooter .Button.rounded:not(.primary) .buttonText, .news .pending .actions .Button.remove .buttonText, .boardEdit .Button .buttonText, .Button.userFollowingGridButton .buttonText, .InviteButtonEmail .Button.btn .buttonText, .Button.moreItems .buttonText, .formFooterButton.cancelButton .buttonText, .Button.CardFollow.GrayButton .buttonText, .Button.FollowButton .buttonText, .Button.UserFollowButton .buttonText, .Button.InterestFollowButton .buttonText, .Modal .formFooter .Button.primary .buttonText, .ReactModal__Content .formFooter .Button.primary .buttonText, .news .pending .actions .Button.primary .buttonText, .panelFooter .formFooterButtons .cancelButton .buttonText, .Button.searchToFollowButton .buttonText, .formFooterButton.confirmButton .buttonText, .Button.CardFollow.RedButton .buttonText, .Button.promoteYourPin .buttonText, .Button.userProfileMenu:not(.UnblockButton) .buttonText, .Button.editProfile .buttonText, .Button.groupBoardChat .buttonText, .boardDetail .pending .actions .Button.remove .buttonText, .boardDetail .pending .actions .Button.primary .buttonText, .BoardCollaboratorInviter .BoardInviteForm .inviteButton .buttonText, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton .buttonText, .InterestFeedPage .feedHeader .interestStats, .TopicFeedPage .feedHeader .interestStats, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .BoardHeader .description, .BoardInvite.news .boardName, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs .label, .UserProfileHeader.profileHeader .about .aboutText, .UserProfileHeader.profileHeader .about .iconsLinksEtc .locationWrapper, .UserProfileHeader.profileHeader .about .iconsLinksEtc .website, .UserProfileHeader.profileHeader .about .iconsLinksEtc .middot::after, .UpsellTip .footerButtons .cancelButton, .UpsellTip .footerButtons .submitButton, .text-md { font-size: 14px; letter-spacing: -0.15px; line-height: 16px; word-spacing: 0; } :lang(ja) .text-md { font-size: 12px; } .text-l, .User.gridItem .username, .Interest .interestWrapper .interestLabel h2, .ShopGridItem .productName, .Board .boardName .name, .Board .boardName.hasBoardContext .User.boardRepTitle .title, .Board .boardName.hasBoardContext .User.exploreTabTitle .title, .text-lg { font-size: 16px; letter-spacing: -0.2px; line-height: 18px; word-spacing: 0; } :lang(ja) .text-lg { font-size: 13.8px; } .text-xl, .standaloneErrorPage .name, .UserSettingsPage .sectionTitle h2 { font-size: 18px; letter-spacing: -0.25px; line-height: 20px; word-spacing: 0; } :lang(ja) .text-xl, :lang(ja) .standaloneErrorPage .name, .standaloneErrorPage :lang(ja) .name, :lang(ja) .UserSettingsPage .sectionTitle h2, .UserSettingsPage .sectionTitle :lang(ja) h2 { font-size: 15.5px; } .display-xs, .BoardInfoBar .smallBoardName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName { font-size: 21px; letter-spacing: -0.3px; line-height: 23px; word-spacing: -1.3px; } :lang(ja) .display-xs, :lang(ja) .BoardInfoBar .smallBoardName, .BoardInfoBar :lang(ja) .smallBoardName, :lang(ja) .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage :lang(ja) .fixedHeaderName { font-size: 18.1px; } .display-s, .UserInfoBar.infoBar .tabs .value, .display-sm { font-size: 24px; letter-spacing: -1px; line-height: 28px; word-spacing: -2px; } :lang(ja) .display-sm { font-size: 20.6px; } .display-m, .InterestFeedPage .feedHeader .authLandingPageTitle .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .display-md { font-size: 36px; letter-spacing: -1.25px; line-height: 42px; word-spacing: -2.25px; } :lang(ja) .display-md { font-size: 31px; } .display-l, .FeedPage .feedName, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .display-lg { font-size: 48px; letter-spacing: -1.75px; line-height: 56px; word-spacing: -2.75px; } :lang(ja) .display-lg { font-size: 41.3px; } .display-xl { font-size: 64px; letter-spacing: -2.25px; line-height: 76px; word-spacing: -3.25px; } :lang(ja) .display-xl { font-size: 55px; } } @media (min-width: 1312px) { .text-xs, .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.primary span.buttonText, .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits .storyCredits .creditFooter, .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .creditItem, .Pin .creditFooter { font-size: 12px; letter-spacing: -0.1px; line-height: 14px; word-spacing: 0; } :lang(ja) .text-xs, :lang(ja) .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.remove :lang(ja) span.buttonText, :lang(ja) .news .pending .actions .Button.primary span.buttonText, .news .pending .actions .Button.primary :lang(ja) span.buttonText, :lang(ja) .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .Typeahead.typeaheadWithTitles li a.titleItem :lang(ja) .typeaheadName, :lang(ja) .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .storyCreditWrapper :lang(ja) .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits :lang(ja) .storyCredits > .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits .creditFooter, .ExploreStoryCredits .storyCredits :lang(ja) .creditFooter, :lang(ja) .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .pinCreditWrapper :lang(ja) .creditItem, :lang(ja) .Pin.summary .pinCredits > .creditItem, .Pin.summary :lang(ja) .pinCredits > .creditItem, :lang(ja) .Pin .creditFooter, .Pin :lang(ja) .creditFooter { font-size: 10.3px; } .text-s, .FirstPinCreate .Pin.summary .pinMeta .TextField, .Board .boardName .boardPinCount, .Board .boardName.hasBoardContext .User.boardRepTitle .fullname, .Board .boardName.hasBoardContext .User.exploreTabTitle .fullname, .BoardHeader .belowBoardNameContainer .followerCount, .BoardHeader .belowBoardNameContainer .pinCount, .BoardInfoBar .pinsAndFollowerCount .value, .BoardInfoBar .pinsAndFollowerCount .label, .PinCreate .Pin.summary .pinMeta .TextField, .text-sm { font-size: 14px; letter-spacing: -0.15px; line-height: 16px; word-spacing: 0; } :lang(ja) .text-sm { font-size: 12px; } .text-m, .Button.boardSettingsButton .buttonText, .Modal .formFooter .Button.rounded:not(.primary) .buttonText, .ReactModal__Content .formFooter .Button.rounded:not(.primary) .buttonText, .news .pending .actions .Button.remove .buttonText, .boardEdit .Button .buttonText, .Button.userFollowingGridButton .buttonText, .InviteButtonEmail .Button.btn .buttonText, .Button.moreItems .buttonText, .formFooterButton.cancelButton .buttonText, .Button.CardFollow.GrayButton .buttonText, .Button.FollowButton .buttonText, .Button.UserFollowButton .buttonText, .Button.InterestFollowButton .buttonText, .Modal .formFooter .Button.primary .buttonText, .ReactModal__Content .formFooter .Button.primary .buttonText, .news .pending .actions .Button.primary .buttonText, .panelFooter .formFooterButtons .cancelButton .buttonText, .Button.searchToFollowButton .buttonText, .formFooterButton.confirmButton .buttonText, .Button.CardFollow.RedButton .buttonText, .Button.promoteYourPin .buttonText, .Button.userProfileMenu:not(.UnblockButton) .buttonText, .Button.editProfile .buttonText, .Button.groupBoardChat .buttonText, .boardDetail .pending .actions .Button.remove .buttonText, .boardDetail .pending .actions .Button.primary .buttonText, .BoardCollaboratorInviter .BoardInviteForm .inviteButton .buttonText, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton .buttonText, .InterestFeedPage .feedHeader .interestStats, .TopicFeedPage .feedHeader .interestStats, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .BoardHeader .description, .BoardInvite.news .boardName, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs .label, .UserProfileHeader.profileHeader .about .aboutText, .UserProfileHeader.profileHeader .about .iconsLinksEtc .locationWrapper, .UserProfileHeader.profileHeader .about .iconsLinksEtc .website, .UserProfileHeader.profileHeader .about .iconsLinksEtc .middot::after, .UpsellTip .footerButtons .cancelButton, .UpsellTip .footerButtons .submitButton, .text-md { font-size: 16px; letter-spacing: -0.2px; line-height: 18px; word-spacing: 0; } :lang(ja) .text-md { font-size: 13.8px; } .text-l, .User.gridItem .username, .Interest .interestWrapper .interestLabel h2, .ShopGridItem .productName, .Board .boardName .name, .Board .boardName.hasBoardContext .User.boardRepTitle .title, .Board .boardName.hasBoardContext .User.exploreTabTitle .title, .text-lg { font-size: 18px; letter-spacing: -0.25px; line-height: 20px; word-spacing: 0; } :lang(ja) .text-lg { font-size: 15.5px; } .text-xl, .standaloneErrorPage .name, .UserSettingsPage .sectionTitle h2 { font-size: 21px; letter-spacing: -0.3px; line-height: 23px; word-spacing: -1.3px; } :lang(ja) .text-xl, :lang(ja) .standaloneErrorPage .name, .standaloneErrorPage :lang(ja) .name, :lang(ja) .UserSettingsPage .sectionTitle h2, .UserSettingsPage .sectionTitle :lang(ja) h2 { font-size: 18.1px; } .display-xs, .BoardInfoBar .smallBoardName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName { font-size: 24px; letter-spacing: -1px; line-height: 28px; word-spacing: -2px; } :lang(ja) .display-xs, :lang(ja) .BoardInfoBar .smallBoardName, .BoardInfoBar :lang(ja) .smallBoardName, :lang(ja) .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage :lang(ja) .fixedHeaderName { font-size: 20.6px; } .display-s, .UserInfoBar.infoBar .tabs .value, .display-sm { font-size: 36px; letter-spacing: -1.25px; line-height: 42px; word-spacing: -2.25px; } :lang(ja) .display-sm { font-size: 31px; } .display-m, .InterestFeedPage .feedHeader .authLandingPageTitle .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .display-md { font-size: 48px; letter-spacing: -1.75px; line-height: 56px; word-spacing: -2.75px; } :lang(ja) .display-md { font-size: 41.3px; } .display-l, .FeedPage .feedName, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .display-lg { font-size: 64px; letter-spacing: -2.25px; line-height: 76px; word-spacing: -3.25px; } :lang(ja) .display-lg { font-size: 55px; } .display-xl { font-size: 96px; letter-spacing: -3.25px; line-height: 114px; word-spacing: -4.25px; } :lang(ja) .display-xl { font-size: 82.6px; } } .m0 { margin: 0; } .mt0 { margin-top: 0; } .mr0 { margin-right: 0; } .mb0 { margin-bottom: 0; } .ml0 { margin-left: 0; } .p0 { padding: 0; } .px0 { padding-left: 0; padding-right: 0; } .py0 { padding-bottom: 0; padding-top: 0; } .m1 { margin: 3px; } .mt1, .Board .boardName .boardPinCount .PinCount, .Board .boardName.hasBoardContext, .BoardHeader .description { margin-top: 3px; } .mr1, .TypeaheadField.guided.buttonOnRight::before, .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem, .Board .boardName > .secretIcon, .Board .boardName .User.boardRepTitle.hasText.thumb, .Board .boardName .User.exploreTabTitle.hasText.thumb, .BoardInfoBar .boardButtons > *, .UserSettingsPage .formInlineCheckedSet label > input { margin-right: 3px; } .mb1 { margin-bottom: 3px; } .ml1, .TokenizedInput.guided .tokensWrapper .tokenizedItem { margin-left: 3px; } .mn1 { margin: -3px; } .mtn1 { margin-top: -3px; } .mbn1 { margin-bottom: -3px; } .mln1 { margin-left: -3px; } .mrn1, .mxn1, .UserInfoBar.infoBar .tabs { margin-right: -3px; } .mxn1, .UserInfoBar.infoBar .tabs { margin-left: -3px; } .myn1 { margin-bottom: -3px; margin-top: -3px; } .p1 { padding: 3px; } .px1, .standaloneErrorPage .name, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .ExploreStoryCredits .storyCredits > .creditItem, .ShopGridItem .productName, .Board .boardName, .BoardInfoBar .pinsAndFollowerCount > ul > li, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs li a { padding-left: 3px; padding-right: 3px; } .py1, .UserInfoBar.infoBar .tabs ul { padding-bottom: 3px; padding-top: 3px; } .m2 { margin: 6px; } .mt2 { margin-top: 6px; } .mr2, .FeedPage .RelatedInterestsSection > ul > li, .InterestFeedPage .RelatedInterestsSection > ul > li, .TopicFeedPage .RelatedInterestsSection > ul > li, .Board .boardName .name, .UserProfileHeader.profileHeader .profileImage::after { margin-right: 6px; } .mb2, .Interest.storyView .interestWrapper, .FirstPinCreate .Pin.summary .pinMeta .TextField, .PinCreate .Pin.summary .pinMeta .TextField { margin-bottom: 6px; } .ml2, .TypeaheadField.guided.buttonOnRight::before, .UserProfileHeader.profileHeader .profileImage::after { margin-left: 6px; } .mn2 { margin: -6px; } .mtn2 { margin-top: -6px; } .mbn2 { margin-bottom: -6px; } .mln2 { margin-left: -6px; } .mrn2, .mxn2 { margin-right: -6px; } .mxn2 { margin-left: -6px; } .myn2 { margin-bottom: -6px; margin-top: -6px; } .p2 { padding: 6px; } .px2, .SearchForm.guided, .BoardHeader .boardHeaderWrapper, .BoardInfoBar .infoBarWrapper, .BulkEditBar .boardBulkEditBar, .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar { padding-left: 6px; padding-right: 6px; } .py2, .standaloneErrorPage .name, .User.gridItem .username, .ShopGridItem .productName, .Board .boardName { padding-bottom: 6px; padding-top: 6px; } .m3 { margin: 9px; } .mt3, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage { margin-top: 9px; } .mr3, .FeedPage .RelatedInterestsSection > ul, .User.thumb.boardRepTitle .title, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul { margin-right: 9px; } .mb3, .BoardHeader .boardHeaderWrapper { margin-bottom: 9px; } .ml3, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul { margin-left: 9px; } .mn3 { margin: -9px; } .mtn3 { margin-top: -9px; } .mbn3 { margin-bottom: -9px; } .mln3 { margin-left: -9px; } .mrn3, .mxn3 { margin-right: -9px; } .mxn3 { margin-left: -9px; } .myn3 { margin-bottom: -9px; margin-top: -9px; } .p3 { padding: 9px; } .px3, .FeedPage .feedName, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .UserInfoBar { padding-left: 9px; padding-right: 9px; } .py3, .FeedPage .feedName, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .TopicFeedPage .RelatedInterestsSection > ul, .BoardInfoBar .infoBarWrapper, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar { padding-bottom: 9px; padding-top: 9px; } .m4 { margin: 12px; } .mt4, .FeedPage .feedName { margin-top: 12px; } .mr4 { margin-right: 12px; } .mb4, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .NagSearch .message { margin-bottom: 12px; } .ml4 { margin-left: 12px; } .mn4 { margin: -12px; } .mtn4 { margin-top: -12px; } .mbn4 { margin-bottom: -12px; } .mln4 { margin-left: -12px; } .mrn4, .mxn4 { margin-right: -12px; } .mxn4 { margin-left: -12px; } .myn4 { margin-bottom: -12px; margin-top: -12px; } .p4 { padding: 12px; } .px4 { padding-left: 12px; padding-right: 12px; } .py4 { padding-bottom: 12px; padding-top: 12px; } .m5 { margin: 15px; } .mt5 { margin-top: 15px; } .mr5 { margin-right: 15px; } .mb5 { margin-bottom: 15px; } .ml5 { margin-left: 15px; } .mn5 { margin: -15px; } .mtn5 { margin-top: -15px; } .mbn5 { margin-bottom: -15px; } .mln5 { margin-left: -15px; } .mrn5, .mxn5 { margin-right: -15px; } .mxn5 { margin-left: -15px; } .myn5 { margin-bottom: -15px; margin-top: -15px; } .p5 { padding: 15px; } .px5 { padding-left: 15px; padding-right: 15px; } .py5 { padding-bottom: 15px; padding-top: 15px; } .m6 { margin: 18px; } .mt6 { margin-top: 18px; } .mr6 { margin-right: 18px; } .mb6 { margin-bottom: 18px; } .ml6 { margin-left: 18px; } .mn6 { margin: -18px; } .mtn6 { margin-top: -18px; } .mbn6 { margin-bottom: -18px; } .mln6 { margin-left: -18px; } .mrn6, .mxn6 { margin-right: -18px; } .mxn6 { margin-left: -18px; } .myn6 { margin-bottom: -18px; margin-top: -18px; } .p6 { padding: 18px; } .px6 { padding-left: 18px; padding-right: 18px; } .py6 { padding-bottom: 18px; padding-top: 18px; } @media (min-width: 360px) { .m1 { margin: 4px; } .mt1, .Board .boardName .boardPinCount .PinCount, .Board .boardName.hasBoardContext, .BoardHeader .description { margin-top: 4px; } .mr1, .TypeaheadField.guided.buttonOnRight::before, .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem, .Board .boardName > .secretIcon, .Board .boardName .User.boardRepTitle.hasText.thumb, .Board .boardName .User.exploreTabTitle.hasText.thumb, .BoardInfoBar .boardButtons > *, .UserSettingsPage .formInlineCheckedSet label > input { margin-right: 4px; } .mb1 { margin-bottom: 4px; } .ml1, .TokenizedInput.guided .tokensWrapper .tokenizedItem { margin-left: 4px; } .mn1 { margin: -4px; } .mtn1 { margin-top: -4px; } .mbn1 { margin-bottom: -4px; } .mln1 { margin-left: -4px; } .mrn1, .mxn1, .UserInfoBar.infoBar .tabs { margin-right: -4px; } .mxn1, .UserInfoBar.infoBar .tabs { margin-left: -4px; } .myn1 { margin-bottom: -4px; margin-top: -4px; } .p1 { padding: 4px; } .px1, .standaloneErrorPage .name, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .ExploreStoryCredits .storyCredits > .creditItem, .ShopGridItem .productName, .Board .boardName, .BoardInfoBar .pinsAndFollowerCount > ul > li, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs li a { padding-left: 4px; padding-right: 4px; } .py1, .UserInfoBar.infoBar .tabs ul { padding-bottom: 4px; padding-top: 4px; } .m2 { margin: 8px; } .mt2 { margin-top: 8px; } .mr2, .FeedPage .RelatedInterestsSection > ul > li, .InterestFeedPage .RelatedInterestsSection > ul > li, .TopicFeedPage .RelatedInterestsSection > ul > li, .Board .boardName .name, .UserProfileHeader.profileHeader .profileImage::after { margin-right: 8px; } .mb2, .Interest.storyView .interestWrapper, .FirstPinCreate .Pin.summary .pinMeta .TextField, .PinCreate .Pin.summary .pinMeta .TextField { margin-bottom: 8px; } .ml2, .TypeaheadField.guided.buttonOnRight::before, .UserProfileHeader.profileHeader .profileImage::after { margin-left: 8px; } .mn2 { margin: -8px; } .mtn2 { margin-top: -8px; } .mbn2 { margin-bottom: -8px; } .mln2 { margin-left: -8px; } .mrn2, .mxn2 { margin-right: -8px; } .mxn2 { margin-left: -8px; } .myn2 { margin-bottom: -8px; margin-top: -8px; } .p2 { padding: 8px; } .px2, .SearchForm.guided, .BoardHeader .boardHeaderWrapper, .BoardInfoBar .infoBarWrapper, .BulkEditBar .boardBulkEditBar, .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar { padding-left: 8px; padding-right: 8px; } .py2, .standaloneErrorPage .name, .User.gridItem .username, .ShopGridItem .productName, .Board .boardName { padding-bottom: 8px; padding-top: 8px; } .m3 { margin: 12px; } .mt3, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage { margin-top: 12px; } .mr3, .FeedPage .RelatedInterestsSection > ul, .User.thumb.boardRepTitle .title, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul { margin-right: 12px; } .mb3, .BoardHeader .boardHeaderWrapper { margin-bottom: 12px; } .ml3, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul { margin-left: 12px; } .mn3 { margin: -12px; } .mtn3 { margin-top: -12px; } .mbn3 { margin-bottom: -12px; } .mln3 { margin-left: -12px; } .mrn3, .mxn3 { margin-right: -12px; } .mxn3 { margin-left: -12px; } .myn3 { margin-bottom: -12px; margin-top: -12px; } .p3 { padding: 12px; } .px3, .FeedPage .feedName, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .UserInfoBar { padding-left: 12px; padding-right: 12px; } .py3, .FeedPage .feedName, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .TopicFeedPage .RelatedInterestsSection > ul, .BoardInfoBar .infoBarWrapper, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar { padding-bottom: 12px; padding-top: 12px; } .m4 { margin: 16px; } .mt4, .FeedPage .feedName { margin-top: 16px; } .mr4 { margin-right: 16px; } .mb4, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .NagSearch .message { margin-bottom: 16px; } .ml4 { margin-left: 16px; } .mn4 { margin: -16px; } .mtn4 { margin-top: -16px; } .mbn4 { margin-bottom: -16px; } .mln4 { margin-left: -16px; } .mrn4, .mxn4 { margin-right: -16px; } .mxn4 { margin-left: -16px; } .myn4 { margin-bottom: -16px; margin-top: -16px; } .p4 { padding: 16px; } .px4 { padding-left: 16px; padding-right: 16px; } .py4 { padding-bottom: 16px; padding-top: 16px; } .m5 { margin: 20px; } .mt5 { margin-top: 20px; } .mr5 { margin-right: 20px; } .mb5 { margin-bottom: 20px; } .ml5 { margin-left: 20px; } .mn5 { margin: -20px; } .mtn5 { margin-top: -20px; } .mbn5 { margin-bottom: -20px; } .mln5 { margin-left: -20px; } .mrn5, .mxn5 { margin-right: -20px; } .mxn5 { margin-left: -20px; } .myn5 { margin-bottom: -20px; margin-top: -20px; } .p5 { padding: 20px; } .px5 { padding-left: 20px; padding-right: 20px; } .py5 { padding-bottom: 20px; padding-top: 20px; } .m6 { margin: 24px; } .mt6 { margin-top: 24px; } .mr6 { margin-right: 24px; } .mb6 { margin-bottom: 24px; } .ml6 { margin-left: 24px; } .mn6 { margin: -24px; } .mtn6 { margin-top: -24px; } .mbn6 { margin-bottom: -24px; } .mln6 { margin-left: -24px; } .mrn6, .mxn6 { margin-right: -24px; } .mxn6 { margin-left: -24px; } .myn6 { margin-bottom: -24px; margin-top: -24px; } .p6 { padding: 24px; } .px6 { padding-left: 24px; padding-right: 24px; } .py6 { padding-bottom: 24px; padding-top: 24px; } } @media (min-width: 800px) { .m1 { margin: 6px 8px; } .mt1, .Board .boardName .boardPinCount .PinCount, .Board .boardName.hasBoardContext, .BoardHeader .description { margin-top: 6px; } .mr1, .TypeaheadField.guided.buttonOnRight::before, .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem, .Board .boardName > .secretIcon, .Board .boardName .User.boardRepTitle.hasText.thumb, .Board .boardName .User.exploreTabTitle.hasText.thumb, .BoardInfoBar .boardButtons > *, .UserSettingsPage .formInlineCheckedSet label > input { margin-right: 8px; } .mb1 { margin-bottom: 6px; } .ml1, .TokenizedInput.guided .tokensWrapper .tokenizedItem { margin-left: 8px; } .mn1 { margin: -6px -8px; } .mtn1 { margin-top: -6px; } .mbn1 { margin-bottom: -6px; } .mln1 { margin-left: -8px; } .mrn1, .mxn1, .UserInfoBar.infoBar .tabs { margin-right: -8px; } .mxn1, .UserInfoBar.infoBar .tabs { margin-left: -8px; } .myn1 { margin-bottom: -6px; margin-top: -6px; } .p1 { padding: 6px 8px; } .px1, .standaloneErrorPage .name, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .ExploreStoryCredits .storyCredits > .creditItem, .ShopGridItem .productName, .Board .boardName, .BoardInfoBar .pinsAndFollowerCount > ul > li, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs li a { padding-left: 8px; padding-right: 8px; } .py1, .UserInfoBar.infoBar .tabs ul { padding-bottom: 6px; padding-top: 6px; } .m2 { margin: 12px 16px; } .mt2 { margin-top: 12px; } .mr2, .FeedPage .RelatedInterestsSection > ul > li, .InterestFeedPage .RelatedInterestsSection > ul > li, .TopicFeedPage .RelatedInterestsSection > ul > li, .Board .boardName .name, .UserProfileHeader.profileHeader .profileImage::after { margin-right: 16px; } .mb2, .Interest.storyView .interestWrapper, .FirstPinCreate .Pin.summary .pinMeta .TextField, .PinCreate .Pin.summary .pinMeta .TextField { margin-bottom: 12px; } .ml2, .TypeaheadField.guided.buttonOnRight::before, .UserProfileHeader.profileHeader .profileImage::after { margin-left: 16px; } .mn2 { margin: -12px -16px; } .mtn2 { margin-top: -12px; } .mbn2 { margin-bottom: -12px; } .mln2 { margin-left: -16px; } .mrn2, .mxn2 { margin-right: -16px; } .mxn2 { margin-left: -16px; } .myn2 { margin-bottom: -12px; margin-top: -12px; } .p2 { padding: 12px 16px; } .px2, .SearchForm.guided, .BoardHeader .boardHeaderWrapper, .BoardInfoBar .infoBarWrapper, .BulkEditBar .boardBulkEditBar, .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar { padding-left: 16px; padding-right: 16px; } .py2, .standaloneErrorPage .name, .User.gridItem .username, .ShopGridItem .productName, .Board .boardName { padding-bottom: 12px; padding-top: 12px; } .m3 { margin: 18px 24px; } .mt3, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage { margin-top: 18px; } .mr3, .FeedPage .RelatedInterestsSection > ul, .User.thumb.boardRepTitle .title, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul { margin-right: 24px; } .mb3, .BoardHeader .boardHeaderWrapper { margin-bottom: 18px; } .ml3, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul { margin-left: 24px; } .mn3 { margin: -18px -24px; } .mtn3 { margin-top: -18px; } .mbn3 { margin-bottom: -18px; } .mln3 { margin-left: -24px; } .mrn3, .mxn3 { margin-right: -24px; } .mxn3 { margin-left: -24px; } .myn3 { margin-bottom: -18px; margin-top: -18px; } .p3 { padding: 18px 24px; } .px3, .FeedPage .feedName, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .UserInfoBar { padding-left: 24px; padding-right: 24px; } .py3, .FeedPage .feedName, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .TopicFeedPage .RelatedInterestsSection > ul, .BoardInfoBar .infoBarWrapper, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar { padding-bottom: 18px; padding-top: 18px; } .m4 { margin: 24px 32px; } .mt4, .FeedPage .feedName { margin-top: 24px; } .mr4 { margin-right: 32px; } .mb4, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .NagSearch .message { margin-bottom: 24px; } .ml4 { margin-left: 32px; } .mn4 { margin: -24px -32px; } .mtn4 { margin-top: -24px; } .mbn4 { margin-bottom: -24px; } .mln4 { margin-left: -32px; } .mrn4, .mxn4 { margin-right: -32px; } .mxn4 { margin-left: -32px; } .myn4 { margin-bottom: -24px; margin-top: -24px; } .p4 { padding: 24px 32px; } .px4 { padding-left: 32px; padding-right: 32px; } .py4 { padding-bottom: 24px; padding-top: 24px; } .m5 { margin: 30px 40px; } .mt5 { margin-top: 30px; } .mr5 { margin-right: 40px; } .mb5 { margin-bottom: 30px; } .ml5 { margin-left: 40px; } .mn5 { margin: -30px -40px; } .mtn5 { margin-top: -30px; } .mbn5 { margin-bottom: -30px; } .mln5 { margin-left: -40px; } .mrn5, .mxn5 { margin-right: -40px; } .mxn5 { margin-left: -40px; } .myn5 { margin-bottom: -30px; margin-top: -30px; } .p5 { padding: 30px 40px; } .px5 { padding-left: 40px; padding-right: 40px; } .py5 { padding-bottom: 30px; padding-top: 30px; } .m6 { margin: 36px 48px; } .mt6 { margin-top: 36px; } .mr6 { margin-right: 48px; } .mb6 { margin-bottom: 36px; } .ml6 { margin-left: 48px; } .mn6 { margin: -36px -48px; } .mtn6 { margin-top: -36px; } .mbn6 { margin-bottom: -36px; } .mln6 { margin-left: -48px; } .mrn6, .mxn6 { margin-right: -48px; } .mxn6 { margin-left: -48px; } .myn6 { margin-bottom: -36px; margin-top: -36px; } .p6 { padding: 36px 48px; } .px6 { padding-left: 48px; padding-right: 48px; } .py6 { padding-bottom: 36px; padding-top: 36px; } } @media (min-width: 1312px) { .m1 { margin: 6px 8px; } .mt1, .Board .boardName .boardPinCount .PinCount, .Board .boardName.hasBoardContext, .BoardHeader .description { margin-top: 6px; } .mr1, .TypeaheadField.guided.buttonOnRight::before, .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem, .Board .boardName > .secretIcon, .Board .boardName .User.boardRepTitle.hasText.thumb, .Board .boardName .User.exploreTabTitle.hasText.thumb, .BoardInfoBar .boardButtons > *, .UserSettingsPage .formInlineCheckedSet label > input { margin-right: 8px; } .mb1 { margin-bottom: 6px; } .ml1, .TokenizedInput.guided .tokensWrapper .tokenizedItem { margin-left: 8px; } .mn1 { margin: -6px -8px; } .mtn1 { margin-top: -6px; } .mbn1 { margin-bottom: -6px; } .mln1 { margin-left: -8px; } .mrn1, .mxn1, .UserInfoBar.infoBar .tabs { margin-right: -8px; } .mxn1, .UserInfoBar.infoBar .tabs { margin-left: -8px; } .myn1 { margin-bottom: -6px; margin-top: -6px; } .p1 { padding: 6px 8px; } .px1, .standaloneErrorPage .name, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .ExploreStoryCredits .storyCredits > .creditItem, .ShopGridItem .productName, .Board .boardName, .BoardInfoBar .pinsAndFollowerCount > ul > li, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs li a { padding-left: 8px; padding-right: 8px; } .py1, .UserInfoBar.infoBar .tabs ul { padding-bottom: 6px; padding-top: 6px; } .m2 { margin: 12px 16px; } .mt2 { margin-top: 12px; } .mr2, .FeedPage .RelatedInterestsSection > ul > li, .InterestFeedPage .RelatedInterestsSection > ul > li, .TopicFeedPage .RelatedInterestsSection > ul > li, .Board .boardName .name, .UserProfileHeader.profileHeader .profileImage::after { margin-right: 16px; } .mb2, .Interest.storyView .interestWrapper, .FirstPinCreate .Pin.summary .pinMeta .TextField, .PinCreate .Pin.summary .pinMeta .TextField { margin-bottom: 12px; } .ml2, .TypeaheadField.guided.buttonOnRight::before, .UserProfileHeader.profileHeader .profileImage::after { margin-left: 16px; } .mn2 { margin: -12px -16px; } .mtn2 { margin-top: -12px; } .mbn2 { margin-bottom: -12px; } .mln2 { margin-left: -16px; } .mrn2, .mxn2 { margin-right: -16px; } .mxn2 { margin-left: -16px; } .myn2 { margin-bottom: -12px; margin-top: -12px; } .p2 { padding: 12px 16px; } .px2, .SearchForm.guided, .BoardHeader .boardHeaderWrapper, .BoardInfoBar .infoBarWrapper, .BulkEditBar .boardBulkEditBar, .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar { padding-left: 16px; padding-right: 16px; } .py2, .standaloneErrorPage .name, .User.gridItem .username, .ShopGridItem .productName, .Board .boardName { padding-bottom: 12px; padding-top: 12px; } .m3 { margin: 18px 24px; } .mt3, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage { margin-top: 18px; } .mr3, .FeedPage .RelatedInterestsSection > ul, .User.thumb.boardRepTitle .title, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul { margin-right: 24px; } .mb3, .BoardHeader .boardHeaderWrapper { margin-bottom: 18px; } .ml3, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul { margin-left: 24px; } .mn3 { margin: -18px -24px; } .mtn3 { margin-top: -18px; } .mbn3 { margin-bottom: -18px; } .mln3 { margin-left: -24px; } .mrn3, .mxn3 { margin-right: -24px; } .mxn3 { margin-left: -24px; } .myn3 { margin-bottom: -18px; margin-top: -18px; } .p3 { padding: 18px 24px; } .px3, .FeedPage .feedName, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .UserInfoBar { padding-left: 24px; padding-right: 24px; } .py3, .FeedPage .feedName, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .TopicFeedPage .RelatedInterestsSection > ul, .BoardInfoBar .infoBarWrapper, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar { padding-bottom: 18px; padding-top: 18px; } .m4 { margin: 24px 32px; } .mt4, .FeedPage .feedName { margin-top: 24px; } .mr4 { margin-right: 32px; } .mb4, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .NagSearch .message { margin-bottom: 24px; } .ml4 { margin-left: 32px; } .mn4 { margin: -24px -32px; } .mtn4 { margin-top: -24px; } .mbn4 { margin-bottom: -24px; } .mln4 { margin-left: -32px; } .mrn4, .mxn4 { margin-right: -32px; } .mxn4 { margin-left: -32px; } .myn4 { margin-bottom: -24px; margin-top: -24px; } .p4 { padding: 24px 32px; } .px4 { padding-left: 32px; padding-right: 32px; } .py4 { padding-bottom: 24px; padding-top: 24px; } .m5 { margin: 30px 40px; } .mt5 { margin-top: 30px; } .mr5 { margin-right: 40px; } .mb5 { margin-bottom: 30px; } .ml5 { margin-left: 40px; } .mn5 { margin: -30px -40px; } .mtn5 { margin-top: -30px; } .mbn5 { margin-bottom: -30px; } .mln5 { margin-left: -40px; } .mrn5, .mxn5 { margin-right: -40px; } .mxn5 { margin-left: -40px; } .myn5 { margin-bottom: -30px; margin-top: -30px; } .p5 { padding: 30px 40px; } .px5 { padding-left: 40px; padding-right: 40px; } .py5 { padding-bottom: 30px; padding-top: 30px; } .m6 { margin: 36px 48px; } .mt6 { margin-top: 36px; } .mr6 { margin-right: 48px; } .mb6 { margin-bottom: 36px; } .ml6 { margin-left: 48px; } .mn6 { margin: -36px -48px; } .mtn6 { margin-top: -36px; } .mbn6 { margin-bottom: -36px; } .mln6 { margin-left: -48px; } .mrn6, .mxn6 { margin-right: -48px; } .mxn6 { margin-left: -48px; } .myn6 { margin-bottom: -36px; margin-top: -36px; } .p6 { padding: 36px 48px; } .px6 { padding-left: 48px; padding-right: 48px; } .py6 { padding-bottom: 36px; padding-top: 36px; } } .AppealConfirmationPage .standardForm { font-size: 14px; line-height: 21px; margin: 20px auto 40px; } .AppealForm { overflow: hidden; } .AppealForm h1 { color: #333; color: rgba(21, 21, 21, 0.8); font-size: 47px; font-weight: bold; line-height: 52px; margin-left: auto; margin-right: auto; max-width: 736px; text-align: center; word-wrap: break-word; margin-bottom: 52px; } .AppealForm .formDescription { color: #555; font-weight: 500; } .AppealForm .standardForm { margin: 0 auto; } .AppealForm .standardForm ul { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; margin-bottom: 14px; } .AppealForm .standardForm ul li { overflow: hidden; } .AppealForm .standardForm ul li.empty { padding: 0; } .AppealForm .standardForm ul li div { float: left; margin-left: 0; width: 515px; } .AppealForm .standardForm ul li h2 { float: left; } .AppealForm .standardForm ul li h3 { color: #555; font-size: 13px; padding: 0; width: 170px; } .AppealForm .standardForm ul li h4 { float: left; font-size: 12px; font-weight: normal; margin-left: 20px; padding: 6px; width: 170px; } .AnchorLinks .links li { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-bottom: 3px solid #fff; cursor: pointer; display: inline-block; padding: 20px; } .AnchorLinks .links li span { color: #5f5f5f; font-size: 14px; } .AnchorLinks .links li:hover .link { color: #333; } .AnchorLinks .links li.selected { border-color: #bd081c; } .AnchorLinks .links li.selected span { color: #333; } .AnchorLinks .links span { font-weight: bold; text-decoration: none; } .BackgroundImage { height: 100%; overflow: hidden; position: absolute; width: 100%; z-index: -1; } .BackgroundImage .prefetch { display: none; } .BackgroundImage .background { background-size: cover; height: 100%; opacity: 0; position: absolute; -webkit-transition: opacity .5s; transition: opacity .5s; width: 100%; } .BackgroundImage .background.loaded { opacity: 1; } .BackgroundImage .homepageWallBackground { background-image: url(https://s.pinimg.com/webapp/style/images/pin_grid-7106f39b.jpg); height: 100%; margin: 0 auto; width: 90%; } .BoardPickerSpinnerBlock { cursor: progress !important; height: 82px; pointer-events: none; position: relative; } .BusinessTypeList > li > label { color: #444; font-size: 14px; font-weight: bold; line-height: 22px; } .BusinessTypeList > li > label input[type=radio] { float: left; height: 22px; } .BusinessTypeList .businessTypeLabel { margin-left: 8px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ /* stylelint-disable-next-line at-rule-no-unknown */ .Button { outline: none; position: relative; } .Button.borderless { background-color: transparent; border: 0; margin: 0; padding: 0; } .Button.btn { background-color: #f8f8f8; background: -webkit-linear-gradient(#fff, #f0f0f0); background: linear-gradient(#fff, #f0f0f0); border: 1px solid #ccc; color: #5f5f5f; cursor: pointer; font-weight: bold; text-shadow: 0 1px #fff; white-space: nowrap; background-color: #f0f0f0; padding: 7px 13px; } .Button.btn.rounded { border-radius: 3px; } .Button.btn:hover, .Button.btn:focus { border-color: #ccc #c2c2c2 #b8b8b8; } .Button.btn.primary, .Button.btn.primaryOnHover:hover, .Button.btn.primaryOnHover:focus, .Button.btn.primaryOnHover.active { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-image: -webkit-linear-gradient(#e3262e, #ab171e); background-image: linear-gradient(#e3262e, #ab171e); background-color: #ab171e; border-bottom-color: #820a0f; border-left-color: #9a1015; border-right-color: #9a1015; border-top-color: #af151b; border-style: solid; border-width: 1px; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.34); color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.11); } .Button.btn.primary:not(.noHoverActive):hover, .Button.btn.primary:not(.noHoverActive):focus, .Button.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Button.btn.primaryOnHover:hover:not(.noHoverActive):focus, .Button.btn.primaryOnHover:focus:not(.noHoverActive):hover, .Button.btn.primaryOnHover:focus:not(.noHoverActive):focus, .Button.btn.primaryOnHover.active:not(.noHoverActive):hover, .Button.btn.primaryOnHover.active:not(.noHoverActive):focus { background-image: -webkit-linear-gradient(#e63d44, #c11a22); background-image: linear-gradient(#e63d44, #c11a22); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border: 1px solid #920c12; } .Button.btn.primary:not(.noHoverActive):active, .Button.btn.primary:not(.noHoverActive).active, .Button.btn.primaryOnHover:hover:not(.noHoverActive):active, .Button.btn.primaryOnHover:hover:not(.noHoverActive).active, .Button.btn.primaryOnHover:focus:not(.noHoverActive):active, .Button.btn.primaryOnHover:focus:not(.noHoverActive).active, .Button.btn.primaryOnHover.active:not(.noHoverActive):active, .Button.btn.primaryOnHover.active:not(.noHoverActive).active { background-image: -webkit-linear-gradient(#bb1618, #e22123); background-image: linear-gradient(#bb1618, #e22123); box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.5) inset; background-color: #e22123; border-color: #99161b; text-shadow: 0 1px rgba(0, 0, 0, 0.6); } .Button.btn.dim { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #777; } .Button.btn.unAuthFacebookConnect, .Button.btn.unAuthGplusConnect, .Button.btn.unAuthTwitterConnect { height: 42px; position: relative; } .Button.btn.unAuthFacebookConnect em, .Button.btn.unAuthGplusConnect em, .Button.btn.unAuthTwitterConnect em { bottom: 0; box-shadow: 1px 0 0 rgba(0, 0, 0, 0.05); height: 39px; left: 0; padding: 0; position: absolute; top: 0; width: 41px; } .Button.btn.unAuthFacebookConnect span, .Button.btn.unAuthGplusConnect span, .Button.btn.unAuthTwitterConnect span { color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.25); } .Button.btn.unAuthFacebookConnect em { width: 42px; height: 42px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -215px -88px no-repeat; } .Button.btn.unAuthFacebookConnect.flat, .Button.btn.unAuthFacebookConnect.flat:hover, .Button.btn.unAuthFacebookConnect.flat:active { background: #3b5998; font-size: 16px; line-height: 19px; } .Button.btn.unAuthFacebookConnect.flat em, .Button.btn.unAuthFacebookConnect.flat:hover em, .Button.btn.unAuthFacebookConnect.flat:active em { width: 44px; height: 44px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -92px -296px no-repeat; border-right: 1px solid rgba(255, 255, 255, 0.3); height: 40px; width: 40px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.btn.unAuthFacebookConnect.flat em, .Button.btn.unAuthFacebookConnect.flat:hover em, .Button.btn.unAuthFacebookConnect.flat:active em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -45px -258px; background-size: 428px 427px; } } .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect, .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect:hover, .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect:active { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #3b5998; background-clip: padding-box; border: 5px solid #3b5998; border-radius: 4px; box-shadow: none; height: auto; padding-bottom: 12px; padding-top: 10px; } .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect em, .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect:hover em, .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect:active em { width: 24px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -28px -214px no-repeat; background-color: rgba(255, 255, 255, 0.04); margin-top: -2px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect em, .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect:hover em, .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect:active em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -27px -174px; background-size: 249px 231px; } } .UnauthBanner .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect em, .UnauthBanner .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect:hover em, .UnauthBanner .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect:active em { background-color: transparent; } .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect:active, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect:hover { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border: none; border-radius: 3px; height: 40px; width: 100%; } .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect em, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect:active em, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect:hover em { margin: 8px; } .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect.intButton, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect.intButton:active, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect.intButton:hover { float: left; margin-right: 16px; width: 126px; } .Button.btn.unauthHomeRegisterButton.unAuthemailSignup, .Button.btn.unauthHomeRegisterButton.unAuthemailSignup:hover { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-clip: padding-box; border: 3px solid rgba(51, 51, 51, 0.4); border-radius: 6px; color: #666; padding-bottom: 12px; padding-top: 10px; } .Button.btn.unauthHomeRegisterButton.unAuthemailSignup em, .Button.btn.unauthHomeRegisterButton.unAuthemailSignup:hover em { width: 50px; height: 42px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -171px -174px no-repeat; height: 40px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.btn.unauthHomeRegisterButton.unAuthemailSignup em, .Button.btn.unauthHomeRegisterButton.unAuthemailSignup:hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -291px -51px; background-size: 428px 427px; } } .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthemailSignup, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthemailSignup:active, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthemailSignup:hover { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-radius: 3px; height: 39px; width: 268px; } .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthemailSignup em, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthemailSignup:active em, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthemailSignup:hover em { height: 37px; margin-left: -6px; width: 40px; } .Button.btn.unAuthGplusConnect { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #4285f4; border: none; height: 40px; } .Button.btn.unAuthGplusConnect em { width: 38px; height: 38px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -160px -133px no-repeat; margin: 1px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.btn.unAuthGplusConnect em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -127px -96px; background-size: 249px 231px; } } .Button.btn.registerLoginButton em { left: 0; padding: 0; position: absolute; top: 0; } .Button.btn.registerLoginButton span { display: inline-block; margin-left: 42px; margin-top: -3px; } .Button.btn.registerLoginButton.multiStepRedesign span { margin-left: 42px; } .Button.btn.registerLoginButton.multiStepRedesign.intButton span { bottom: 6px; } .Button.btn[disabled], .Button.btn.disabled, .Button.btn.disabled:hover, .Button.btn.disabled:focus, .Button.btn.disabled:active { box-shadow: none !important; text-shadow: 0 0 0 !important; background: #ebebeb !important; border: 1px solid #ddd !important; color: #aaa !important; cursor: default; } .Button.btn[disabled].repinSmall em, .Button.btn.disabled.repinSmall em, .Button.btn.disabled:hover.repinSmall em, .Button.btn.disabled:focus.repinSmall em, .Button.btn.disabled:active.repinSmall em { width: 34px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -204px -176px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.btn[disabled].repinSmall em, .Button.btn.disabled.repinSmall em, .Button.btn.disabled:hover.repinSmall em, .Button.btn.disabled:focus.repinSmall em, .Button.btn.disabled:active.repinSmall em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -128px -78px; background-size: 249px 231px; } } .Button.btn.noSidePadding { padding-left: 0; padding-right: 0; } .Button.btn.buyButton { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #0084ff; border: 1px solid #0084ff; border-radius: 4px; color: #fff; font-size: 14px; height: 35px; text-shadow: none; } .Button.btn.buyButton.invalid { background: #ebebeb; border: 1px solid #ebebeb; color: #a6a6a6; } .Button.btn.buyButton:active { background: #0084ff; border: 1px solid #0084ff; } .Button.btn.buyButton:active.invalid { background: #ebebeb; border: 1px solid #ebebeb; color: #a6a6a6; } .Button.btn.shop { background: none; border: 0; } .Button.btn.shop:active { box-shadow: none; } .Button.btn.shop.tutorialHighlight { background-color: #fff; border-radius: 50%; color: #0084ff; height: 55px !important; margin: -19px 0 -9px; padding: 19px 9px; width: 55px !important; } .Button.btn.shop.tutorialHighlight .buttonText { font-size: 14px; } .Button.btn:active, .Button.btn.active { background-color: #f8f8f8; background: -webkit-linear-gradient(#f0f0f0, #fff); background: linear-gradient(#f0f0f0, #fff); border-color: #b8b8b8 #c2c2c2 #ccc; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; } .Button.btn.isBrioFlat { background-color: #efefef; background-image: none; border: 0; border-radius: 4px; box-shadow: none; color: #555; height: 36px; text-shadow: none; padding: 9px 12px; } .Button.btn.isBrioFlat:hover { background-color: #e3e3e3; border: 0; } .Button.btn.isBrioFlat:active, .Button.btn.isBrioFlat:focus, .Button.btn.isBrioFlat.active { background-color: #e3e3e3; background-image: none; border: 0; box-shadow: none; } .Button.btn.isBrioFlat.primary, .Button.btn.isBrioFlat.primary:active { background-color: #bd081c; border: 0; box-shadow: none; color: #efefef; text-shadow: none; } .Button.btn.isBrioFlat.primary.btn.primary:hover, .Button.btn.isBrioFlat.primary.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Button.btn.isBrioFlat.primary:focus, .Button.btn.isBrioFlat.primary:active, .Button.btn.isBrioFlat.primary.active .Button.btn.isBrioFlat.primary:not(.noHoverActive):active, .Button.btn.isBrioFlat.primary:not(.noHoverActive):focus, .Button.btn.isBrioFlat.primary:active.btn.primary:hover, .Button.btn.isBrioFlat.primary:active.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Button.btn.isBrioFlat.primary:active:focus, .Button.btn.isBrioFlat.primary:active:active, .Button.btn.isBrioFlat.primary:active.active .Button.btn.isBrioFlat.primary:not(.noHoverActive):active, .Button.btn.isBrioFlat.primary:active:not(.noHoverActive):focus, .Button.btn.isBrioFlat.primary.active .Button.btn.isBrioFlat.primary:active:not(.noHoverActive):active, .Button.btn.isBrioFlat.primary:active.active .Button.btn.isBrioFlat.primary:active:not(.noHoverActive):active { /* the above is for css specificity, will be better after the experiments are shipped to all users */ background: #b7071b; border: 0; box-shadow: none; text-shadow: none; } .Button.btn.isBrioFlat.white, .Button.btn.isBrioFlat.white:active { background-color: white; } .Button.btn.isBrioFlat.white:hover { background-color: #efefef; } .Button.btn.isBrioFlat.hasText.hasIcon span { margin-left: 4px; } .Button.btn.isBrioFlat.hasText.unlike span { margin-left: 0; } .Button.btn.didItImageUpload { background: #fff; height: inherit; padding: 0; text-align: left; } .Button.btn.didItImageUpload > em { width: 20px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -88px -353px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.btn.didItImageUpload > em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -105px -347px; background-size: 399px 382px; } } .Button.btn.didItImageUpload:hover { background: #fff; } .Button.btn.didItImageUpload.disabled { background: #fff !important; border: 0 !important; } .Button.btn.boardInviteBlockButton { background: transparent; height: inherit; padding: 0; } .Button.btn.boardInviteBlockButton:focus, .Button.btn.boardInviteBlockButton:hover { background: transparent; } .Button.btn.boardInviteBlockButton em { width: 10px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -120px -442px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.btn.boardInviteBlockButton em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px -16px; background-size: 428px 427px; } } .Button.btn.toastUndoButton { background: transparent; border: 1px solid #fff; color: #fff; } .Button.btn.toastUndoButton:hover { background: #fff; border: 1px solid #fff; color: #0a0e13; } .Button.btn.contactRequestsCount { width: 100%; } .Button.btn.contactRequestsCount.contactRequestView { background: transparent; } .Button.btn.contactRequestsCount.contactRequestView:hover { background: transparent; } .Button.didIt em { width: 17px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -290px -325px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.didIt em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -246px -320px; background-size: 399px 382px; } } .Button.didIt.done em { width: 17px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -309px -325px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.didIt.done em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -343px -292px; background-size: 399px 382px; } } .Button.didIt.square { padding: 0 0 2px 0; width: 36px; } .Button.didItFeedAction { background: none; border: 0; height: 20px; padding: 0; width: 20px; } .Button.didItFeedAction:active, .Button.didItFeedAction.active { background: none; box-shadow: none; } .Button.didItFeedAction.didItEdit { background: none !important; } .Button.didItFeedAction.didItEdit em { width: 20px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -198px -353px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.didItFeedAction.didItEdit em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -210px -347px; background-size: 399px 382px; } } .Button.didItFeedAction.didItSeeMore em { width: 20px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -132px -353px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.didItFeedAction.didItSeeMore em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -147px -347px; background-size: 399px 382px; } } .Button.loading { min-height: 0; min-height: 0; } .Button.loading .buttonText, .Button.loading em { visibility: hidden; } .Button.loading .buttonText, .Button.loading em { visibility: hidden; } .Button.gridItem { bottom: 10px; display: block; left: 10px; width: 216px; } .Button .buttonHoverMask { bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 100; } .Button .buttonBadge { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; font-size: 11px; font-weight: 700; min-width: 8px; position: relative; -webkit-transition: opacity .3s linear, margin-right .3s ease-out; transition: opacity .3s linear, margin-right .3s ease-out; vertical-align: middle; } .Button .buttonBadge.leftBadge { background-color: #bd081c; border-radius: 50%; color: #fff; display: inline-block; height: 14px; margin-left: 0; margin-right: 5px; opacity: 0; padding: 0 3px; text-align: center; top: -1px; } .Button.badged .buttonBadge { -webkit-animation: popBadge .5s ease-out; animation: popBadge .5s ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; margin-right: 0; opacity: 1; } .Button em { display: inline-block; outline: none; position: relative; vertical-align: middle; } .Button .accessibilityText { font: 0 / 0 serif; text-shadow: none; color: transparent; position: absolute; } .Button.seeMoreButton { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: rgba(0, 0, 0, 0.2); background-image: none; border: 0; border-radius: 4px; box-shadow: none; color: #fff; height: 36px; text-shadow: none; font-size: 14px; height: 36px; letter-spacing: -.3px; width: 98px; } .Button.seeMoreButton:hover { background-color: rgba(0, 0, 0, 0.3); border: 0; } .Button.seeMoreButton:active, .Button.seeMoreButton:focus, .Button.seeMoreButton.active { background-color: rgba(0, 0, 0, 0.3); background-image: none; border: 0; box-shadow: none; } .Button.seeMoreButton.primary, .Button.seeMoreButton.primary:active { background-color: #bd081c; border: 0; box-shadow: none; color: rgba(0, 0, 0, 0.2); text-shadow: none; } .Button.seeMoreButton.primary.btn.primary:hover, .Button.seeMoreButton.primary.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Button.seeMoreButton.primary:focus, .Button.seeMoreButton.primary:active, .Button.seeMoreButton.primary.active .Button.seeMoreButton.primary:not(.noHoverActive):active, .Button.seeMoreButton.primary:not(.noHoverActive):focus, .Button.seeMoreButton.primary:active.btn.primary:hover, .Button.seeMoreButton.primary:active.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Button.seeMoreButton.primary:active:focus, .Button.seeMoreButton.primary:active:active, .Button.seeMoreButton.primary:active.active .Button.seeMoreButton.primary:not(.noHoverActive):active, .Button.seeMoreButton.primary:active:not(.noHoverActive):focus, .Button.seeMoreButton.primary.active .Button.seeMoreButton.primary:active:not(.noHoverActive):active, .Button.seeMoreButton.primary:active.active .Button.seeMoreButton.primary:active:not(.noHoverActive):active { /* the above is for css specificity, will be better after the experiments are shipped to all users */ background: #b7071b; border: 0; box-shadow: none; text-shadow: none; } .Button.seeMoreButton.white, .Button.seeMoreButton.white:active { background-color: white; } .Button.seeMoreButton.white:hover { background-color: rgba(0, 0, 0, 0.2); } .Button.opaqueGrayButton { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: rgba(0, 0, 0, 0.1); background-image: none; border: 0; border-radius: 4px; box-shadow: none; color: #fff; height: 36px; text-shadow: none; font-size: 14px; height: 31px; letter-spacing: -.3px; line-height: 1.1; } .Button.opaqueGrayButton:hover { background-color: rgba(0, 0, 0, 0.7); border: 0; } .Button.opaqueGrayButton:active, .Button.opaqueGrayButton:focus, .Button.opaqueGrayButton.active { background-color: rgba(0, 0, 0, 0.7); background-image: none; border: 0; box-shadow: none; } .Button.opaqueGrayButton.primary, .Button.opaqueGrayButton.primary:active { background-color: #bd081c; border: 0; box-shadow: none; color: rgba(0, 0, 0, 0.1); text-shadow: none; } .Button.opaqueGrayButton.primary.btn.primary:hover, .Button.opaqueGrayButton.primary.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Button.opaqueGrayButton.primary:focus, .Button.opaqueGrayButton.primary:active, .Button.opaqueGrayButton.primary.active .Button.opaqueGrayButton.primary:not(.noHoverActive):active, .Button.opaqueGrayButton.primary:not(.noHoverActive):focus, .Button.opaqueGrayButton.primary:active.btn.primary:hover, .Button.opaqueGrayButton.primary:active.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Button.opaqueGrayButton.primary:active:focus, .Button.opaqueGrayButton.primary:active:active, .Button.opaqueGrayButton.primary:active.active .Button.opaqueGrayButton.primary:not(.noHoverActive):active, .Button.opaqueGrayButton.primary:active:not(.noHoverActive):focus, .Button.opaqueGrayButton.primary.active .Button.opaqueGrayButton.primary:active:not(.noHoverActive):active, .Button.opaqueGrayButton.primary:active.active .Button.opaqueGrayButton.primary:active:not(.noHoverActive):active { /* the above is for css specificity, will be better after the experiments are shipped to all users */ background: #b7071b; border: 0; box-shadow: none; text-shadow: none; } .Button.opaqueGrayButton.white, .Button.opaqueGrayButton.white:active { background-color: white; } .Button.opaqueGrayButton.white:hover { background-color: rgba(0, 0, 0, 0.1); } .Button.storyTitle { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: none; border-style: none; color: #555; font-size: 48px; font-weight: bold; letter-spacing: -2.2px; margin-top: 4px; } .Button.storyTitle:active { background: none; box-shadow: none; } .Button .hasText em { margin-right: 6px; } .Button.website em { width: 18px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -100px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.website em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px -112px; background-size: 399px 382px; } } .Button.website:hover em, .Button.website:focus em { width: 18px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -138px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.website:hover em, .Button.website:focus em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px -76px; background-size: 399px 382px; } } .Button.website:active em { width: 18px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -119px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.website:active em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px -94px; background-size: 399px 382px; } } .Button.crop em { width: 17px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -171px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.crop em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -138px -201px; background-size: 249px 231px; } } .Button.buy em { margin-top: -2px; width: 18px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -130px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.buy em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -100px -201px; background-size: 249px 231px; } } .Button.buy:hover em { width: 18px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -111px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.buy:hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -119px -201px; background-size: 249px 231px; } } .Button.buy:active em { width: 18px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -92px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.buy:active em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -188px -60px; background-size: 249px 231px; } } .Button.moreInfo { max-width: 250px; width: auto; } .Button.moreInfo em { width: 14px; height: 14px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -263px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.moreInfo em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -207px -201px; background-size: 249px 231px; } } .Button.addPinButton span { color: #333; font-weight: bold; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .Button.addPinButton em { display: block; margin: 0 auto; } .Button.addPinButton.addPinUpload em { width: 72px; height: 77px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) 0 -97px no-repeat; margin-bottom: 43px; } .Button.addPinButton.addPinURL em { width: 84px; height: 84px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -129px 0 no-repeat; margin-bottom: 36px; } .Button.xlarge { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22); font-size: 14px; margin-bottom: 4px; padding-bottom: 11px; padding-top: 12px; } .Button.unAuthLogin { color: #333; margin-left: 5px; white-space: normal; } .Button.loginText { background: none; border: 0; color: #000; font-weight: bold; margin-bottom: 2px; padding: 0; } .Button.annotationButton .buttonText { color: #454545; font-size: 14px; font-weight: bold; } .Button.annotationButton:hover .buttonText { color: #666; } .Button.annotationButton.active .buttonText { color: #878787; } .Button.unauthNagButton, .Button.appInstallButton { font-size: 14px; padding: 6px 12px 7px; } .Button.medium { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-shadow: 1px -1px 1px rgba(255, 255, 255, 0.98) inset, -1px 0 1px rgba(255, 255, 255, 0.98) inset; font-size: 14px; height: 36px; padding-bottom: 7px; padding-top: 8px; } .Button.rightRounded { border-radius: 0 6px 6px 0; } .Button.leftRounded { border-radius: 6px 0 0 6px; } .Button.repin em { width: 10px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -18px no-repeat; margin: 0; position: relative; top: 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.repin em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -190px; background-size: 428px 427px; } } .Button.repin:active em { width: 10px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -18px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.repin:active em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -190px; background-size: 428px 427px; } } .ja .Button.repin { height: 36px; } .ja .Button.repin em, .ja .Button.repin:active em { width: 10px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -18px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ja .Button.repin em, .ja .Button.repin:active em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -190px; background-size: 428px 427px; } } .Button.repinSmall { height: 33px; padding-top: 7px; } .Button.repinSmall em { width: 10px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -18px no-repeat; position: relative; top: 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.repinSmall em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -190px; background-size: 428px 427px; } } .Button.repinSmall.repinSmall.matchDenzel em { /* hack to make react save button match denzel */ margin-right: 4px; } .Button.gear em { width: 28px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -334px -248px no-repeat; } .Button.embed em { width: 17px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -70px -442px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.embed em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -208px -375px; background-size: 428px 427px; } } .Button.pinEdit em { width: 15px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -349px -418px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.pinEdit em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -141px; background-size: 428px 427px; } } .Button.editPin { margin-left: 5px; padding: 7px 8px 7px 9px; } .Button.editPin em { width: 15px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -255px -325px no-repeat; } .Button.editPin:hover { color: #191919; } .Button.editPin.isBrioFlat { margin: 0; padding: 9px 10px; } .Button.editPin.isBrioFlat em { width: 16px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -291px no-repeat; top: -1px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.editPin.isBrioFlat em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px -257px; background-size: 399px 382px; } } .Button.pinAnalyticsButton:hover { color: #191919; } .Button.pinAnalyticsButton.isBrioFlat { padding: 9px 10px; } .Button.editProfile em { width: 15px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -349px -418px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.editProfile em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -141px; background-size: 428px 427px; } } .Button.languageButton { padding-right: 40px; } .Button.languageButton::before, .Button.languageButton::after { border-left: 4px solid transparent; border-right: 4px solid transparent; content: ""; height: 0; margin-left: -4px; position: absolute; right: 0; width: 0; } .Button.languageButton::before { border-top: 4px solid #5f5f5f; top: 18px; } .Button.languageButton::after { border-bottom: 4px solid #5f5f5f; top: 10px; } .Button.export { padding: 6px 2px; } .Button.export .buttonText { margin-left: -7px; } .Button.export em { width: 8px; height: 8px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -42px -373px no-repeat; float: right; margin-right: 7px; margin-top: 5px; } .Button.pinFlag em { width: 12px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -137px no-repeat; } .Button.share em { width: 17px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -377px -342px no-repeat; position: relative; top: -1px; } .Button.flagBase { display: inline-block; } .Button > .downArrow { width: 7px; height: 6px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px -97px no-repeat; display: inline-block; float: right; margin-left: 10px; margin-top: 5px; } .Button.unAuthemailSignup { color: #333; white-space: normal; } .Button.unAuthemailSignup em { width: 42px; height: 42px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -215px -44px no-repeat; border-right: 1px solid #ccc; box-shadow: -1px 0 0 #fff inset; height: 100%; left: 1px; width: 40px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.unAuthemailSignup em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: 0 -96px; background-size: 249px 231px; } } .Button.email em { width: 16px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -89px -442px no-repeat; top: -2px; } .Button.facebook em { width: 16px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -313px -418px no-repeat; left: -1px; top: -1px; } .Button.facebookShare em { width: 17px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -320px -342px no-repeat; left: -1px; top: -1px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.facebookShare em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -265px -234px; background-size: 428px 427px; } } .Button.facebookConnect, .Button.emailSignup { font-size: 17px; font-weight: 500; padding: 0 14px 0 0; } .Button.facebookConnect em, .Button.emailSignup em { margin-right: 15px; } .Button.moreItems { text-align: center; } .Button.closeIcon { float: right; height: 14px; width: 14px; } .Button.closeIcon em { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -261px -242px no-repeat; } .Button.closeModal, .Button.closeDialog { margin: -6px; padding: 6px; position: absolute; right: 18px; top: 22px; } @media (max-width: 475px) { .Button.closeModal, .Button.closeDialog { top: 12px; } } .Button.closeModal em, .Button.closeDialog em { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -261px -242px no-repeat; } .Button.closeModal.closeOnMask { margin: 24px 24px 0 0; position: fixed; right: 22px; top: 9px; } .Button.closeModal.closeOnMask em { background: url(https://s.pinimg.com/webapp/style/images/modal_cancel-1x-04ae52d3.png) no-repeat; background-size: contain; height: 16px; width: 16px; } .Button.closeModal.closeOnMask.variantPickerModal { top: 0; } .Button.closeModal.closeOnMask.variantPickerModal em { width: 16px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -309px no-repeat; } .Button.close { background-color: whitesmoke; background: -webkit-linear-gradient(#fff, #ebebeb); background: linear-gradient(#fff, #ebebeb); border-radius: 0 0 6px 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.34), 1px 0 0 rgba(255, 255, 255, 0.9) inset; cursor: pointer; display: block; height: 44px; right: 14px; -webkit-transform: translateY(-60px); transform: translateY(-60px); -webkit-transition-delay: .3s; transition-delay: .3s; -webkit-transition-duration: .35s; transition-duration: .35s; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } .Button.close.visible { -webkit-transform: translateY(0); transform: translateY(0); } .Button.close em { width: 16px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -309px no-repeat; margin: 10px; } .Button.close:hover { background-color: #c11d24; background: -webkit-linear-gradient(#d62229, #ab171e); background: linear-gradient(#d62229, #ab171e); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.74); -webkit-transition-delay: 0; transition-delay: 0; -webkit-transition-duration: 0; transition-duration: 0; } .Button.close:hover em { width: 16px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -236px no-repeat; position: relative; top: -1px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.close:hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px -187px; background-size: 399px 382px; } } .Button.close .buttonText { display: block; height: 20px; line-height: 6px; } .Button.pinCreateClose em, .Button.twoPaneClose em { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -107px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.pinCreateClose em, .Button.twoPaneClose em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -321px -271px; background-size: 399px 382px; } } .Button.pinCreateClose:hover em, .Button.twoPaneClose:hover em { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -65px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.pinCreateClose:hover em, .Button.twoPaneClose:hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -357px -269px; background-size: 399px 382px; } } .Button.nuxPickerInterestButton { font-size: 13px; min-width: 122px; } .Button.pinActionBarButton { overflow: hidden; float: left; height: 34px; margin-right: 6px; } .Button.pinActionBarButton.webResult { height: 35px; } .Button.pinActionBarButton.webResult em { width: 16px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -228px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.pinActionBarButton.webResult em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -190px -201px; background-size: 249px 231px; } } .Button.pinActionBarButton.showMoreButton { background-color: #fff; margin-right: 0; padding: 9px 10px; } .Button.pinActionBarButton.showMoreButton em { width: 20px; height: 6px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -153px -100px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.pinActionBarButton.showMoreButton em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -237px -224px; background-size: 399px 382px; } } .Button.pinActionBarButton.showMoreButton:active, .Button.pinActionBarButton.showMoreButton:focus, .Button.pinActionBarButton.showMoreButton:hover { background-color: #fff; border: 0; } .Button.dark:active, .Button.dark.active { background-color: #fbfbfb; background-color: rgba(251, 251, 251, 0.29); background: -webkit-linear-gradient(rgba(240, 240, 240, 0.07), rgba(255, 255, 255, 0.51)); background: linear-gradient(rgba(240, 240, 240, 0.07), rgba(255, 255, 255, 0.51)); border-color: #939393 #a2a2a2 #acacac; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13) inset; } .Button.large { font-size: 15px; padding: 10px 18px; } .Button.btn.shopBag { background-color: #fafafa; background: -webkit-linear-gradient(#fff, #f5f5f5); background: linear-gradient(#fff, #f5f5f5); border-color: #d4d4d4; border-radius: 0; border-right: 0; padding: 2px 0 0; position: relative; z-index: 104; } .Button.btn.shopBag .buttonBadge { color: #fff; left: 0; margin: 0; position: absolute; right: 0; text-shadow: none; } .Button.btn.shopBag.user.tutorialHighlight { height: 34px !important; padding: 0; } .Button.btn.shopBag.user:focus, .Button.btn.shopBag.user:hover { background: -webkit-linear-gradient(#fff, #eee); background: linear-gradient(#fff, #eee); border-color: #c0c0c0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07); z-index: 105; } .Button.btn.shopBag.user:active, .Button.btn.shopBag.user.active { background: #e9e9e9; border-color: #cfcfcf; box-shadow: none; } .Button.btn.shopBag.user.emptyBag em { width: 18px; height: 22px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -282px -186px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.btn.shopBag.user.emptyBag em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -278px -183px; background-size: 399px 382px; } } .Button.btn.shopBag.user em { width: 18px; height: 22px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -220px -124px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.btn.shopBag.user em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -217px -122px; background-size: 399px 382px; } } .Button.btn.shopBag.user .buttonBadge { top: 11px; } .Button.btn.shopBag.partner em { background: #0084ff; border-radius: 50%; height: 28px; width: 28px; } .Button.btn.shopBag.partner .buttonBadge { font-size: 16px; top: 4px; } .Button.flat.hasText { background: #fff; border-color: #c7c7c7; color: #333; font-size: 14px; line-height: 16px; outline: 0; padding: 7px 10px; } .Button.flat.hasText.borderless { border: 0; color: #5f5f5f; font-size: 12px; } .Button.flat.hasText.primary.rounded { background: #bd081c; border-color: #bd081c; color: #fff; } .Button.flat.hasText.primary.rounded:hover { background: #b0071a; background-image: none; border: 1px solid #b0071a; box-shadow: none; text-shadow: none; } .Button.flat.hasText.primary.rounded:active { background: #930616; border: 1px solid #930616; box-shadow: none; text-shadow: none; } .Button.flat.hasText.rounded { border-radius: 4px; box-shadow: none; } .Button.flat.hasText:hover, .Button.flat.hasText.active:hover { background: #eee; text-shadow: none; } .Button.flat.hasText:active, .Button.flat.hasText.active { background: #c7c7c7; border: 1px solid #c7c7c7; box-shadow: none; text-shadow: none; } .Button.flat.hasText.active { background: #fff; } .Button.flat.hasText:disabled, .Button.flat.hasText:disabled:hover { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #fff !important; border: 1px solid #e7e7e7; color: #d7d7d7; } .Button.flat.hasText:disabled em, .Button.flat.hasText:disabled:hover em { opacity: .22; } .Button.flat.hasText.messageDraft { padding: 12px; width: 100%; } .Button.flat.hasText.messageDraft .buttonText { font-size: 14px; line-height: 16px; } .Button.basicRed, .Button.basicGray, .Button.basicLightGray { border: 0; border-radius: 5px !important; color: #fff; font-size: 18px; height: 45px; margin: 0 auto; padding: 0 30px; text-shadow: none; } .Button.basicRed.small, .Button.basicGray.small, .Button.basicLightGray.small { font-size: 15px; height: 35px; padding: 0 15px; } .Button.basicRed { background: #bc232c; } .Button.basicRed:hover { background: #7f0513; } .Button.basicGray { background: #aaa; font-size: 14px !important; } .Button.basicLightGray { background: #efefef; padding: 0 24px; } .Button.basicLightGray .buttonText { color: #555 !important; } .Button.unauthBrioRedBorder { background: #fff; border: 1px solid #bd081c; border-radius: 4px !important; padding: 7px 20px; } .Button.unauthBrioRedBorder .buttonText { font-size: 14px; } .Button.datePickerButton.flat.hasText { font-size: 13px; } .Button.reportPinButton { display: none; } .Button.notificationActionButton { display: inline-block; text-align: center; } .Button.sterlingNuxPrimary { width: 98px; } .Button.toolTipCancelButton { background-color: #4dd3f5; background-image: none; border: 3px solid #fff; color: #fff; font-size: 14px; font-weight: normal; height: 40px; text-shadow: none; width: 125px; } .Button.toolTipCancelButton:hover { border-color: #fff; } .Button.toolTipActionButton { background-color: #fff; background-image: none; border: 1px solid #fff; color: #4dd3f5; font-size: 14px; font-weight: normal; height: 40px; text-shadow: none; width: 125px; } .Button.toolTipActionButton:hover { border-color: #fff; } .Button.fullWidth { width: 100%; } .Button.unauthSignup { display: block; text-align: center; } .Button.btn.brio { border-radius: 8px; padding-left: 20px; padding-right: 20px; } .Button.btn.brio.primary { background: #bd081c; border: 0; } .Button.btn.brio.primary:hover, .Button.btn.brio.primaryOnHover:hover:not(.noHoverActive):hover, .Button.btn.brio:focus, .Button.btn.brio:active, .Button.btn.brio.active, .Button.btn.brio:not(.noHoverActive):active, .Button.btn.brio:not(.noHoverActive):focus { background: #d50c22; border: 0; } .Button.btn.brio.flat { font-size: 14px; height: 35px; margin-top: 0; } .Button.btn.brio.flat:hover, .Button.btn.brio.flat.dim:hover { background: #bd081c; border: 1px solid #bd081c; } .Button.btn.brio.flat:hover .buttonText, .Button.btn.brio.flat.dim:hover .buttonText { color: #fff; } .Button.btn.brio.flat:active, .Button.btn.brio.flat:focus, .Button.btn.brio.flat.dim:active, .Button.btn.brio.flat.dim:focus { background: #970616; border: 1px solid #970616; } .Button.btn.brio.flat.dim { border: 1px solid #b5b5b5; } .Button.btn.brio.flat.dim .buttonText { color: #b5b5b5; } .Button.inlineHover { background: none; border: 0; padding: 0; } .Button.createConversationTab { color: #5f5f5f; font-weight: bold; height: 36px; vertical-align: middle; width: 100%; } .Button.createConversationTab:focus, .Button.createConversationTab:hover { background-color: #f1f1f1 !important; color: #333; } .Button.createConversationTab:active { color: #bd081c; } .Button.exportModalQuickSelectButton { border: none; font-weight: normal; } .Button.exportModalQuickSelectButton.flat { font-size: 16px; } .Button.exportModalQuickSelectButton.flat:hover, .Button.exportModalQuickSelectButton.flat:active { background-color: #fff; border: none; font-weight: bold; } .Button.exportModalAttributionWindowDropdown { border: none; } .Button.exportModalAttributionWindowDropdown.flat.hasText { background: #efefef; border: none; color: #555; font-size: 16px; } .Button.exportModalAttributionWindowDropdown.flat.hasText:hover, .Button.exportModalAttributionWindowDropdown.flat.hasText:active { background: #efefef; } .Button.exportModalAttributionWindowDropdown.flat.hasText .active { border: none; } .Button.cancelNewMessageView .buttonText { color: rgba(0, 0, 0, 0.3); font-size: 14px; font-weight: bold; } .Button.sendNewMessageButton .buttonText { color: #bd081c; font-size: 14px; font-weight: bold; } a.Button { box-sizing: border-box; } /* desktop.scss */ /* stylelint-disable at-rule-no-unknown */ .Button.btn.addToMap { color: #666; padding-left: 12px; padding-right: 12px; } .Button.btn.bulkEditCheckbox { background: none; position: absolute; right: 16px; top: 16px; z-index: 101; } .Button.btn.bulkEditCheckbox em { width: 31px; height: 31px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -72px -176px no-repeat; opacity: .9; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.btn.bulkEditCheckbox em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -68px -139px; background-size: 249px 231px; } } .Button.btn.bulkEditCheckbox.selected em { width: 31px; height: 31px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -105px -176px no-repeat; opacity: 1; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.btn.bulkEditCheckbox.selected em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -100px -139px; background-size: 249px 231px; } } .Button.btn.bulkEditCheckbox.rounded { border: 0; border-radius: 6px; padding: 0; } .Button.followerCount em { display: none; } .Button.followerCount .buttonText { line-height: 14px; } .Button.faded { background-color: #e0dfde; background: -webkit-linear-gradient(#e5e4e3, #dad9d9); background: linear-gradient(#e5e4e3, #dad9d9); border-color: #b7b7b7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36); color: #999; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); } .Button.faded:hover { background-color: #e7e6e6; background: -webkit-linear-gradient(#ececeb, #e2e1e1); background: linear-gradient(#ececeb, #e2e1e1); border-color: #b7b7b7; } .Button.userSelect { text-align: center; } .Button.toastButton, .Button.toastButton:focus { background-color: #0f0f0f; background-image: -webkit-linear-gradient(#0f0f0f, #000); background-image: linear-gradient(#0f0f0f, #000); border-color: #000; border-radius: 5px; box-shadow: 0 0 2px rgba(255, 255, 255, 0.13) inset; color: #fff; padding: 4px 6px; } .Button.toastButton:hover, .Button.toastButton:focus:hover { background-color: ligthen(#0f0f0f, 2%); background-image: -webkit-linear-gradient(#141414, #050505); background-image: linear-gradient(#141414, #050505); border-color: #000; box-shadow: 0 0 2px rgba(255, 255, 255, 0.2) inset; } .Button.toastButton:active, .Button.toastButton:focus:active { background-color: #0a0a0a; background-image: -webkit-linear-gradient(#0a0a0a, #000); background-image: linear-gradient(#0a0a0a, #000); box-shadow: 0 0 2px rgba(255, 255, 255, 0.1) inset; } .Button.toastButton span, .Button.toastButton:focus span { font-size: 13px; text-shadow: none; } .Button.conversationHeadClose { background-color: #efefef !important; border-radius: 10px !important; height: 20px !important; width: 20px !important; } .Button.conversationHeadClose em { width: 8px; height: 8px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -363px -226px no-repeat; top: -1px !important; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.conversationHeadClose em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -389px -101px; background-size: 399px 382px; } } .Button.conversationClose em { width: 13px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -301px no-repeat; height: 14px; width: 14px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.conversationClose em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -26px -400px; background-size: 428px 427px; } } .Button.createConversationTab em { width: 18px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -178px -418px no-repeat; margin-right: 5px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.createConversationTab em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -318px -303px; background-size: 428px 427px; } } .Button.createConversationTab:hover em { width: 18px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -198px -418px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.createConversationTab:hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -280px -303px; background-size: 428px 427px; } } .Button.createConversationTab:active em, .Button.createConversationTab.active em { width: 18px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -218px -418px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.createConversationTab:active em, .Button.createConversationTab.active em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -299px -303px; background-size: 428px 427px; } } .Button.contactRequestView { color: #555; font-size: 14px; font-weight: bold; letter-spacing: -.4px; line-height: 1; } .Button.contactRequestView em { width: 10px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -316px no-repeat; float: left; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.contactRequestView em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px 0; background-size: 428px 427px; } } .Button.reportMsgButton em { width: 10px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -120px -442px no-repeat; margin-right: 10px; opacity: 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.reportMsgButton em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px -16px; background-size: 428px 427px; } } .Button.footerIcon { border-radius: 50%; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.04); } .Button.footerIcon.borderless { background-color: #fff; padding: 8px; } .Button.footerIcon.rounded { border-radius: 50%; } .Button.footerIcon:hover { background-color: #f5f5f5; } .Button.footerIcon:active, .Button.footerIcon.active { background-color: #e9e9e9; } .Button.footerIcon.moreFooter.triggerActive { background-color: #24cefd; } .Button.addPinFooter { padding: 12.5px !important; } .Button.addPinFooter em { width: 14px; height: 14px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -16px -375px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.addPinFooter em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: 0 -368px; background-size: 399px 382px; } } .Button.addPinFooter:not(.disabled):hover em { width: 14px; height: 14px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -16px -375px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.addPinFooter:not(.disabled):hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: 0 -368px; background-size: 399px 382px; } } .Button.moreFooter { padding: 12.5px !important; } .Button.moreFooter em { width: 10px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -20px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.moreFooter em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -357px -253px; background-size: 399px 382px; } } .Button.moreFooter:not(.disabled):hover em { width: 10px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -20px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.moreFooter:not(.disabled):hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -357px -253px; background-size: 399px 382px; } } .Button.moreFooter.triggerActive em { width: 10px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -20px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.moreFooter.triggerActive em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -357px -253px; background-size: 399px 382px; } } .Button.adminFooter em { width: 23px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -201px -260px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.adminFooter em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -220px -256px; background-size: 399px 382px; } } .Button.adminFooter.inAdmin em { width: 23px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -276px -260px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.adminFooter.inAdmin em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -268px -256px; background-size: 399px 382px; } } .Button.userProfileMenu { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07); padding: 7px 8px; position: absolute; right: 15px; top: 15px; } .Button.userProfileMenu.rounded { border-radius: 6px; } .Button.userProfileMenu em { width: 28px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -124px -152px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.userProfileMenu em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -198px -292px; background-size: 399px 382px; } } .Button.userProfileMenu.other em { width: 28px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -124px -152px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.userProfileMenu.other em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -198px -292px; background-size: 399px 382px; } } .Button.userProfileMenu:focus, .Button.userProfileMenu:hover { background: -webkit-linear-gradient(#fff, #f0f0f0); background: linear-gradient(#fff, #f0f0f0); border-color: #acacac; border-radius: 6px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); } .Button.userProfileMenu:focus em, .Button.userProfileMenu:hover em { width: 28px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -207px -296px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.userProfileMenu:focus em, .Button.userProfileMenu:hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -122px -150px; background-size: 399px 382px; } } .Button.userProfileMenu:focus.other em, .Button.userProfileMenu:hover.other em { width: 28px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -207px -296px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.userProfileMenu:focus.other em, .Button.userProfileMenu:hover.other em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -122px -150px; background-size: 399px 382px; } } .Button.userProfileMenu:active, .Button.userProfileMenu.active { background: #e9e9e9; border-color: #cfcfcf; border-radius: 6px; box-shadow: none; } .Button.userProfileMenu:active em, .Button.userProfileMenu.active em { width: 28px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -207px -296px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.userProfileMenu:active em, .Button.userProfileMenu.active em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -122px -150px; background-size: 399px 382px; } } .Button.userProfileMenu:active.other em, .Button.userProfileMenu.active.other em { width: 28px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -207px -296px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.userProfileMenu:active.other em, .Button.userProfileMenu.active.other em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -122px -150px; background-size: 399px 382px; } } .Button.boardSettingsButton em { width: 19px; height: 5px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -207px -315px no-repeat; height: 6px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.boardSettingsButton em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -258px -224px; background-size: 399px 382px; } } .Button.pinMarker { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .Button.pinMarker em { width: 23px; height: 30px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px -372px no-repeat; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.pinMarker em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -349px -342px; background-size: 428px 427px; } } .Button.pinMarker:hover em, .Button.pinMarker:active em, .Button.pinMarker.highlighted em { width: 23px; height: 30px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -223px -174px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.pinMarker:hover em, .Button.pinMarker:active em, .Button.pinMarker.highlighted em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -378px 0; background-size: 428px 427px; } } .Button.createGroup em { width: 20px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -257px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.createGroup em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -223px -234px; background-size: 428px 427px; } } .Button.createGroup.selected em { width: 20px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -279px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.createGroup.selected em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -244px -234px; background-size: 428px 427px; } } .Button.notifSettingsButton em { width: 17px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -258px -418px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.notifSettingsButton em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -34px -375px; background-size: 428px 427px; } } .Button.createConversation { height: 19px; margin-bottom: 5px; } .Button.createConversation .Spinner { display: none; } .Button.createConversation.loading .Spinner { display: block; left: -9px; top: -4px; } .Button.createConversation.loading em { display: none; } .Button.createConversation em { width: 18px; height: 19px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -237px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.createConversation em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -320px -229px; background-size: 428px 427px; } } .Button.createGroupClose em { width: 13px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -301px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.createGroupClose em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -26px -400px; background-size: 428px 427px; } } .Button.userSelectMessage { padding-left: 11px; padding-right: 11px; } .Button.userSelectMessage em { width: 14px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -186px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.userSelectMessage em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -302px; background-size: 428px 427px; } } .Button.userSelectMessage:hover em { width: 14px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -155px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.userSelectMessage:hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -316px; background-size: 428px 427px; } } .Button.addPlace em { width: 15px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -434px -418px no-repeat; margin-right: 5px; margin-top: -6px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.addPlace em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -125px; background-size: 428px 427px; } } .Button.addPlace span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow: hidden; color: #999; display: inline-block; font-size: 13px; max-width: 525px; position: relative; } .Button.addAPlace, .Button.addPinToMapClose, .Button.toggleView { background: rgba(255, 255, 255, 0.95); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); } .Button.addAPlace:hover, .Button.addPinToMapClose:hover, .Button.toggleView:hover { background-color: #f2f2f1; background: -webkit-linear-gradient(#f2f2f1, #f1f1f0); background: linear-gradient(#f2f2f1, #f1f1f0); } .Button.addAPlace:active, .Button.addPinToMapClose:active, .Button.toggleView:active { background-color: #f0f0ef; background: -webkit-linear-gradient(#eee, #f1f1f0); background: linear-gradient(#eee, #f1f1f0); } .Button.addAPlace span, .Button.addPinToMapClose span { color: #777; font-size: 13px; position: relative; top: 1px; } .Button.addAPlace:hover span, .Button.addAPlace:active span, .Button.addPinToMapClose:hover span, .Button.addPinToMapClose:active span { color: #333; } .Button.addAPlace { padding: 8px 14px 7px; } .Button.addAPlace em { width: 15px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -442px no-repeat; margin-right: 4px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.addAPlace em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px 0; background-size: 428px 427px; } } .Button.addAPlace:hover em { width: 15px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -17px -442px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.addAPlace:hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -21px; background-size: 428px 427px; } } .Button.addPinToMapClose { padding: 9px 11px 10px; } .Button.addPinToMapClose span { margin-right: 5px; top: 0; } .Button.addPinToMapClose em { width: 11px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -461px -404px no-repeat; margin: 0 6px 2px 4px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.addPinToMapClose em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -24px -416px; background-size: 428px 427px; } } .Button.toggleView { padding: 8px 10px; } .Button.toggleView em { width: 15px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -366px -418px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.toggleView em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -77px; background-size: 428px 427px; } } .Button.toggleView:hover em { width: 15px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -383px -418px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.toggleView:hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -109px; background-size: 428px 427px; } } .Button.userSelectConnect { background: #fff; padding: 10px 14px; width: 100%; } .Button.userSelectConnect:hover { background: #e5e5e5; } .Button.userSelectConnect:active { background: #ddd; } .Button.userSelectConnect em { float: left; height: 38px; margin-right: 12px; width: 38px; } .Button.userSelectConnect span { float: left; font-size: 13px; font-weight: 500; margin-top: 11px; } .Button.userSelectEmailConnect em { width: 38px; height: 38px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -365px -209px no-repeat; overflow: hidden; border-radius: 2px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.userSelectEmailConnect em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -299px -258px; background-size: 428px 427px; } } .Button.userSelectFacebookConnect em { width: 40px; height: 40px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -342px no-repeat; } .Button.userSelectGmailConnect em { width: 38px; height: 38px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -365px -89px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.userSelectGmailConnect em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -252px -162px; background-size: 428px 427px; } } .Button.userSelectYahooConnect em { width: 38px; height: 38px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -365px -49px no-repeat; } .Button.userSelectGplusConnect em { width: 38px; height: 38px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -365px -129px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.userSelectGplusConnect em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -252px -123px; background-size: 428px 427px; } } .Button.categories { height: 30px; padding: 3px 0 0; width: 36px; } .Button.categories em { width: 16px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -295px -418px no-repeat; left: 9px; top: 2px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.categories em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -106px -375px; background-size: 428px 427px; } } .Button.categories:hover em, .Button.categories.active em, .Button.categories.primary em { width: 16px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -277px -418px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.categories:hover em, .Button.categories.active em, .Button.categories.primary em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -123px -375px; background-size: 428px 427px; } } .Button.showMoreCategories em { width: 7px; height: 6px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px -97px no-repeat; } .expand .Button.showLessCategories em { width: 7px; height: 6px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -396px -342px no-repeat; } .Button.unauthHomePageDismissButton { display: none; } .inModal .Button.unauthHomePageDismissButton { border-bottom: 1px dotted #333; color: #333; display: inline; font-weight: bold; margin: 20px; margin-right: 25px; position: absolute; right: 0; z-index: 683; } .inModal .Button.unauthHomePageDismissButton:hover { border-bottom: 0; } .Button.interest { padding: 4px 0 4px 6px; } .Button.interest em { width: 20px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -24px -418px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.interest em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -378px -174px; background-size: 428px 427px; } } .Button.interest:hover em, .Button.interest.active em { width: 20px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -90px -418px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.interest:hover em, .Button.interest.active em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -378px -321px; background-size: 428px 427px; } } .Button .addButtonWrapper { visibility: hidden; } .Button.interestFollow.btn { margin: 11px 0 18px; padding: 8px 18px 7px; } .Button.removePlaceButton { color: #999; } .Button.removePlaceButton:hover { color: #bd081c; } .Button.page { font-size: 12px; margin-right: -1px; padding: 7px 0; width: 35px; } .Button.page.current { background-color: #6d6d6d; background: -webkit-linear-gradient(#7f7f7f, #5a5a5a); background: linear-gradient(#7f7f7f, #5a5a5a); border-color: #404040; color: #fff; position: relative; text-shadow: none; z-index: 1; } .Button.page:first-child { border-bottom-left-radius: 6px; border-top-left-radius: 6px; } .Button.page:last-child { /** Last child doesn't work for ie8 and less, but neither is border radius. */ border-bottom-right-radius: 6px; border-top-right-radius: 6px; } .Button.page.prev em, .Button.page.next em { margin-top: -1px; } .Button.page.prev em { width: 6px; height: 8px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px -77px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.page.prev em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -45px -222px; background-size: 249px 231px; } } .Button.page.next em { width: 6px; height: 8px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px -87px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.page.next em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -59px -222px; background-size: 249px 231px; } } .Button.nagActionButton { font-size: 12px; position: absolute; right: 8px; top: 8px; } .Button.appUpsellButton em { width: 14px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -349px -138px no-repeat; margin-right: 14px; position: relative; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.appUpsellButton em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: 0 -375px; background-size: 428px 427px; } } .Button.menuItem .buttonText { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .Button.item .buttonText { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .Button.mainSiteNavMenu { color: #818181; font-size: 16px; } .Button.mainSiteNavMenu.onCampbellSiteMenu { color: #333; } .Button.mainSiteNavMenu:hover, .Button.mainSiteNavMenu:focus, .Button.mainSiteNavMenu:active, .Button.mainSiteNavMenu.active { color: #333; } .Button.flashlightIcon em { width: 35px; height: 35px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px 0 no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.flashlightIcon em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px 0; background-size: 428px 427px; } } .Button.userRegisterButton.flat { font-size: 16px; line-height: 19px; } .Button.contactRequestsCount { border-radius: 8px; font-size: 14px; letter-spacing: -.2px; line-height: 1.3; } .Button.homefeedBuilderBackButton em { width: 17px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px 0 no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.homefeedBuilderBackButton em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -188px -35px; background-size: 249px 231px; } } .Button.boardSettingsButton .buttonText, .Modal .formFooter .Button.rounded:not(.primary) .buttonText, .ReactModal__Content .formFooter .Button.rounded:not(.primary) .buttonText, .news .pending .actions .Button.remove .buttonText, .boardEdit .Button .buttonText, .Button.userFollowingGridButton .buttonText, .InviteButtonEmail .Button.btn .buttonText, .Button.moreItems .buttonText, .formFooterButton.cancelButton .buttonText, .Button.CardFollow.GrayButton .buttonText, .Button.FollowButton .buttonText, .Button.UserFollowButton .buttonText, .Button.InterestFollowButton .buttonText, .Modal .formFooter .Button.primary .buttonText, .ReactModal__Content .formFooter .Button.primary .buttonText, .news .pending .actions .Button.primary .buttonText, .panelFooter .formFooterButtons .cancelButton .buttonText, .Button.searchToFollowButton .buttonText, .formFooterButton.confirmButton .buttonText, .Button.CardFollow.RedButton .buttonText, .Button.promoteYourPin .buttonText, .Button.userProfileMenu:not(.UnblockButton) .buttonText, .Button.editProfile .buttonText, .Button.groupBoardChat .buttonText, .boardDetail .pending .actions .Button.remove .buttonText, .boardDetail .pending .actions .Button.primary .buttonText, .BoardCollaboratorInviter .BoardInviteForm .inviteButton .buttonText, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton .buttonText { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: bold; } .Button.boardSettingsButton, .Button.UserFollowButton.followed, .Button.InterestFollowButton.followed, .Modal .formFooter .Button.rounded:not(.primary), .ReactModal__Content .formFooter .Button.rounded:not(.primary), .news .pending .actions .Button.remove, .boardEdit .Button, .Button.userFollowingGridButton, .InviteButtonEmail .Button.btn, .Button.moreItems, .formFooterButton.cancelButton, .Button.CardFollow.GrayButton, .Button.FollowButton, .Button.UserFollowButton, .Button.InterestFollowButton, .Modal .formFooter .Button.primary, .ReactModal__Content .formFooter .Button.primary, .news .pending .actions .Button.primary, .panelFooter .formFooterButtons .cancelButton, .Button.searchToFollowButton, .formFooterButton.confirmButton, .Button.CardFollow.RedButton, .Button.promoteYourPin, .Button.userProfileMenu:not(.UnblockButton), .Button.editProfile, .Button.groupBoardChat, .boardDetail .pending .actions .Button.remove, .boardDetail .pending .actions .Button.primary, .BoardCollaboratorInviter .BoardInviteForm .inviteButton, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton { background-image: none !important; border: none !important; border-radius: 4px !important; box-shadow: none !important; padding: 10px 14px !important; position: relative !important; text-shadow: none !important; } .Button.boardSettingsButton, .Button.UserFollowButton.followed, .Button.InterestFollowButton.followed, .Modal .formFooter .Button.rounded:not(.primary), .ReactModal__Content .formFooter .Button.rounded:not(.primary), .news .pending .actions .Button.remove, .boardEdit .Button, .Button.userFollowingGridButton, .InviteButtonEmail .Button.btn, .Button.moreItems, .formFooterButton.cancelButton, .Button.CardFollow.GrayButton, .Button.FollowButton, .Button.UserFollowButton, .Button.InterestFollowButton, .Modal .formFooter .Button.primary, .ReactModal__Content .formFooter .Button.primary, .news .pending .actions .Button.primary, .panelFooter .formFooterButtons .cancelButton, .Button.searchToFollowButton, .formFooterButton.confirmButton, .Button.CardFollow.RedButton, .Button.promoteYourPin, .Button.userProfileMenu:not(.UnblockButton), .Button.editProfile, .Button.groupBoardChat, .boardDetail .pending .actions .Button.remove, .boardDetail .pending .actions .Button.primary, .BoardCollaboratorInviter .BoardInviteForm .inviteButton, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton, .btn.btn.disabled.disabled.Button.boardSettingsButton, .Modal .formFooter .btn.btn.disabled.disabled.Button.rounded:not(.primary), .ReactModal__Content .formFooter .btn.btn.disabled.disabled.Button.rounded:not(.primary), .news .pending .actions .btn.btn.disabled.disabled.Button.remove, .boardEdit .btn.btn.disabled.disabled.Button, .btn.btn.disabled.disabled.Button.userFollowingGridButton, .InviteButtonEmail .btn.btn.disabled.disabled.Button, .btn.btn.disabled.disabled.Button.moreItems, .btn.btn.disabled.disabled.formFooterButton.cancelButton, .btn.btn.disabled.disabled.Button.CardFollow.GrayButton, .btn.btn.disabled.disabled.Button.FollowButton, .btn.btn.disabled.disabled.Button.UserFollowButton, .btn.btn.disabled.disabled.Button.InterestFollowButton, .Modal .formFooter .btn.btn.disabled.disabled.Button.primary, .ReactModal__Content .formFooter .btn.btn.disabled.disabled.Button.primary, .news .pending .actions .btn.btn.disabled.disabled.Button.primary, .panelFooter .formFooterButtons .btn.btn.disabled.disabled.cancelButton, .btn.btn.disabled.disabled.Button.searchToFollowButton, .btn.btn.disabled.disabled.formFooterButton.confirmButton, .btn.btn.disabled.disabled.Button.CardFollow.RedButton, .btn.btn.disabled.disabled.Button.promoteYourPin, .btn.btn.disabled.disabled.Button.userProfileMenu:not(.UnblockButton), .btn.btn.disabled.disabled.Button.editProfile, .btn.btn.disabled.disabled.Button.groupBoardChat, .boardDetail .pending .actions .btn.btn.disabled.disabled.Button.remove, .boardDetail .pending .actions .btn.btn.disabled.disabled.Button.primary, .BoardCollaboratorInviter .BoardInviteForm .btn.btn.disabled.disabled.inviteButton, .boardCollaboratorsWrapper .BoardInviteForm .btn.btn.disabled.disabled.inviteButton { border: none !important; } .btn.btn.disabled.disabled.Button.boardSettingsButton .buttonText, .Modal .formFooter .btn.btn.disabled.disabled.Button.rounded:not(.primary) .buttonText, .ReactModal__Content .formFooter .btn.btn.disabled.disabled.Button.rounded:not(.primary) .buttonText, .news .pending .actions .btn.btn.disabled.disabled.Button.remove .buttonText, .boardEdit .btn.btn.disabled.disabled.Button .buttonText, .btn.btn.disabled.disabled.Button.userFollowingGridButton .buttonText, .InviteButtonEmail .btn.btn.disabled.disabled.Button .buttonText, .btn.btn.disabled.disabled.Button.moreItems .buttonText, .btn.btn.disabled.disabled.formFooterButton.cancelButton .buttonText, .btn.btn.disabled.disabled.Button.CardFollow.GrayButton .buttonText, .btn.btn.disabled.disabled.Button.FollowButton .buttonText, .btn.btn.disabled.disabled.Button.UserFollowButton .buttonText, .btn.btn.disabled.disabled.Button.InterestFollowButton .buttonText, .Modal .formFooter .btn.btn.disabled.disabled.Button.primary .buttonText, .ReactModal__Content .formFooter .btn.btn.disabled.disabled.Button.primary .buttonText, .news .pending .actions .btn.btn.disabled.disabled.Button.primary .buttonText, .panelFooter .formFooterButtons .btn.btn.disabled.disabled.cancelButton .buttonText, .btn.btn.disabled.disabled.Button.searchToFollowButton .buttonText, .btn.btn.disabled.disabled.formFooterButton.confirmButton .buttonText, .btn.btn.disabled.disabled.Button.CardFollow.RedButton .buttonText, .btn.btn.disabled.disabled.Button.promoteYourPin .buttonText, .btn.btn.disabled.disabled.Button.userProfileMenu:not(.UnblockButton) .buttonText, .btn.btn.disabled.disabled.Button.editProfile .buttonText, .btn.btn.disabled.disabled.Button.groupBoardChat .buttonText, .boardDetail .pending .actions .btn.btn.disabled.disabled.Button.remove .buttonText, .boardDetail .pending .actions .btn.btn.disabled.disabled.Button.primary .buttonText, .BoardCollaboratorInviter .BoardInviteForm .btn.btn.disabled.disabled.inviteButton .buttonText, .boardCollaboratorsWrapper .BoardInviteForm .btn.btn.disabled.disabled.inviteButton .buttonText { color: #b5b5b5 !important; } .Button.boardSettingsButton, .Button.UserFollowButton.followed, .Button.InterestFollowButton.followed, .Modal .formFooter .Button.rounded:not(.primary), .ReactModal__Content .formFooter .Button.rounded:not(.primary), .news .pending .actions .Button.remove, .boardEdit .Button, .Button.userFollowingGridButton, .InviteButtonEmail .Button.btn, .Button.moreItems, .formFooterButton.cancelButton, .Button.CardFollow.GrayButton { background-color: #efefef !important; } .Button.boardSettingsButton .buttonText, .Button.UserFollowButton.followed .buttonText, .Button.InterestFollowButton.followed .buttonText, .Modal .formFooter .Button.rounded:not(.primary) .buttonText, .ReactModal__Content .formFooter .Button.rounded:not(.primary) .buttonText, .news .pending .actions .Button.remove .buttonText, .boardEdit .Button .buttonText, .Button.userFollowingGridButton .buttonText, .InviteButtonEmail .Button.btn .buttonText, .Button.moreItems .buttonText, .formFooterButton.cancelButton .buttonText, .Button.CardFollow.GrayButton .buttonText { color: #555 !important; } .Button.FollowButton, .Button.UserFollowButton, .Button.InterestFollowButton, .Modal .formFooter .Button.primary, .ReactModal__Content .formFooter .Button.primary, .news .pending .actions .Button.primary, .panelFooter .formFooterButtons .cancelButton, .Button.searchToFollowButton, .formFooterButton.confirmButton, .Button.CardFollow.RedButton, .Button.promoteYourPin { background-color: #bd081c !important; } .Button.FollowButton .buttonText, .Button.UserFollowButton .buttonText, .Button.InterestFollowButton .buttonText, .Modal .formFooter .Button.primary .buttonText, .ReactModal__Content .formFooter .Button.primary .buttonText, .news .pending .actions .Button.primary .buttonText, .panelFooter .formFooterButtons .cancelButton .buttonText, .Button.searchToFollowButton .buttonText, .formFooterButton.confirmButton .buttonText, .Button.CardFollow.RedButton .buttonText, .Button.promoteYourPin .buttonText { color: #fff !important; } .Button.userProfileMenu:not(.UnblockButton), .Button.editProfile, .Button.groupBoardChat { background: transparent !important; } .Button.userProfileMenu:not(.UnblockButton) .buttonText, .Button.editProfile .buttonText, .Button.groupBoardChat .buttonText { color: #555 !important; } .Button.boardSettingsButton:not(.disabled):hover, .Button.UserFollowButton.followed:not(.disabled):hover, .Button.InterestFollowButton.followed:not(.disabled):hover, .Modal .formFooter .Button.rounded:not(.disabled):hover:not(.primary), .ReactModal__Content .formFooter .Button.rounded:not(.disabled):hover:not(.primary), .news .pending .actions .Button.remove:not(.disabled):hover, .boardEdit .Button:not(.disabled):hover, .Button.userFollowingGridButton:not(.disabled):hover, .InviteButtonEmail .Button.btn:not(.disabled):hover, .Button.moreItems:not(.disabled):hover, .formFooterButton.cancelButton:not(.disabled):hover, .Button.CardFollow.GrayButton:not(.disabled):hover, .Button.boardSettingsButton:not(.disabled):active, .Button.UserFollowButton.followed:not(.disabled):active, .Button.InterestFollowButton.followed:not(.disabled):active, .Modal .formFooter .Button.rounded:not(.disabled):active:not(.primary), .ReactModal__Content .formFooter .Button.rounded:not(.disabled):active:not(.primary), .news .pending .actions .Button.remove:not(.disabled):active, .boardEdit .Button:not(.disabled):active, .Button.userFollowingGridButton:not(.disabled):active, .InviteButtonEmail .Button.btn:not(.disabled):active, .Button.moreItems:not(.disabled):active, .formFooterButton.cancelButton:not(.disabled):active, .Button.CardFollow.GrayButton:not(.disabled):active, .Button.boardSettingsButton:not(.disabled).active, .Button.UserFollowButton.followed:not(.disabled).active, .Button.InterestFollowButton.followed:not(.disabled).active, .Modal .formFooter .Button.rounded:not(.disabled).active:not(.primary), .ReactModal__Content .formFooter .Button.rounded:not(.disabled).active:not(.primary), .news .pending .actions .Button.remove:not(.disabled).active, .boardEdit .Button:not(.disabled).active, .Button.userFollowingGridButton:not(.disabled).active, .InviteButtonEmail .Button.btn:not(.disabled).active, .Button.moreItems:not(.disabled).active, .formFooterButton.cancelButton:not(.disabled).active, .Button.CardFollow.GrayButton:not(.disabled).active, .Button.FollowButton:not(.disabled):hover, .Button.UserFollowButton:not(.disabled):hover, .Button.InterestFollowButton:not(.disabled):hover, .Modal .formFooter .Button.primary:not(.disabled):hover, .ReactModal__Content .formFooter .Button.primary:not(.disabled):hover, .news .pending .actions .Button.primary:not(.disabled):hover, .panelFooter .formFooterButtons .cancelButton:not(.disabled):hover, .Button.searchToFollowButton:not(.disabled):hover, .formFooterButton.confirmButton:not(.disabled):hover, .Button.CardFollow.RedButton:not(.disabled):hover, .Button.promoteYourPin:not(.disabled):hover, .Button.FollowButton:not(.disabled):active, .Button.UserFollowButton:not(.disabled):active, .Button.InterestFollowButton:not(.disabled):active, .Modal .formFooter .Button.primary:not(.disabled):active, .ReactModal__Content .formFooter .Button.primary:not(.disabled):active, .news .pending .actions .Button.primary:not(.disabled):active, .panelFooter .formFooterButtons .cancelButton:not(.disabled):active, .Button.searchToFollowButton:not(.disabled):active, .formFooterButton.confirmButton:not(.disabled):active, .Button.CardFollow.RedButton:not(.disabled):active, .Button.promoteYourPin:not(.disabled):active, .Button.FollowButton:not(.disabled).active, .Button.UserFollowButton:not(.disabled).active, .Button.InterestFollowButton:not(.disabled).active, .Modal .formFooter .Button.primary:not(.disabled).active, .ReactModal__Content .formFooter .Button.primary:not(.disabled).active, .news .pending .actions .Button.primary:not(.disabled).active, .panelFooter .formFooterButtons .cancelButton:not(.disabled).active, .Button.searchToFollowButton:not(.disabled).active, .formFooterButton.confirmButton:not(.disabled).active, .Button.CardFollow.RedButton:not(.disabled).active, .Button.promoteYourPin:not(.disabled).active, .Button.userProfileMenu:not(.disabled):hover:not(.UnblockButton), .Button.editProfile:not(.disabled):hover, .Button.groupBoardChat:not(.disabled):hover, .Button.userProfileMenu:not(.disabled):active:not(.UnblockButton), .Button.editProfile:not(.disabled):active, .Button.groupBoardChat:not(.disabled):active, .Button.userProfileMenu:not(.disabled).active:not(.UnblockButton), .Button.editProfile:not(.disabled).active, .Button.groupBoardChat:not(.disabled).active { box-shadow: none !important; } .Button.boardSettingsButton:not(.disabled):hover::after, .Button.UserFollowButton.followed:not(.disabled):hover::after, .Button.InterestFollowButton.followed:not(.disabled):hover::after, .Modal .formFooter .Button.rounded:not(.primary):not(.disabled):hover::after, .ReactModal__Content .formFooter .Button.rounded:not(.primary):not(.disabled):hover::after, .news .pending .actions .Button.remove:not(.disabled):hover::after, .boardEdit .Button:not(.disabled):hover::after, .Button.userFollowingGridButton:not(.disabled):hover::after, .InviteButtonEmail .Button.btn:not(.disabled):hover::after, .Button.moreItems:not(.disabled):hover::after, .formFooterButton.cancelButton:not(.disabled):hover::after, .Button.CardFollow.GrayButton:not(.disabled):hover::after, .Button.boardSettingsButton:not(.disabled):active::after, .Button.UserFollowButton.followed:not(.disabled):active::after, .Button.InterestFollowButton.followed:not(.disabled):active::after, .Modal .formFooter .Button.rounded:not(.primary):not(.disabled):active::after, .ReactModal__Content .formFooter .Button.rounded:not(.primary):not(.disabled):active::after, .news .pending .actions .Button.remove:not(.disabled):active::after, .boardEdit .Button:not(.disabled):active::after, .Button.userFollowingGridButton:not(.disabled):active::after, .InviteButtonEmail .Button.btn:not(.disabled):active::after, .Button.moreItems:not(.disabled):active::after, .formFooterButton.cancelButton:not(.disabled):active::after, .Button.CardFollow.GrayButton:not(.disabled):active::after, .Button.boardSettingsButton:not(.disabled).active::after, .Button.UserFollowButton.followed:not(.disabled).active::after, .Button.InterestFollowButton.followed:not(.disabled).active::after, .Modal .formFooter .Button.rounded:not(.primary):not(.disabled).active::after, .ReactModal__Content .formFooter .Button.rounded:not(.primary):not(.disabled).active::after, .news .pending .actions .Button.remove:not(.disabled).active::after, .boardEdit .Button:not(.disabled).active::after, .Button.userFollowingGridButton:not(.disabled).active::after, .InviteButtonEmail .Button.btn:not(.disabled).active::after, .Button.moreItems:not(.disabled).active::after, .formFooterButton.cancelButton:not(.disabled).active::after, .Button.CardFollow.GrayButton:not(.disabled).active::after, .Button.FollowButton:not(.disabled):hover::after, .Button.UserFollowButton:not(.disabled):hover::after, .Button.InterestFollowButton:not(.disabled):hover::after, .Modal .formFooter .Button.primary:not(.disabled):hover::after, .ReactModal__Content .formFooter .Button.primary:not(.disabled):hover::after, .news .pending .actions .Button.primary:not(.disabled):hover::after, .panelFooter .formFooterButtons .cancelButton:not(.disabled):hover::after, .Button.searchToFollowButton:not(.disabled):hover::after, .formFooterButton.confirmButton:not(.disabled):hover::after, .Button.CardFollow.RedButton:not(.disabled):hover::after, .Button.promoteYourPin:not(.disabled):hover::after, .Button.FollowButton:not(.disabled):active::after, .Button.UserFollowButton:not(.disabled):active::after, .Button.InterestFollowButton:not(.disabled):active::after, .Modal .formFooter .Button.primary:not(.disabled):active::after, .ReactModal__Content .formFooter .Button.primary:not(.disabled):active::after, .news .pending .actions .Button.primary:not(.disabled):active::after, .panelFooter .formFooterButtons .cancelButton:not(.disabled):active::after, .Button.searchToFollowButton:not(.disabled):active::after, .formFooterButton.confirmButton:not(.disabled):active::after, .Button.CardFollow.RedButton:not(.disabled):active::after, .Button.promoteYourPin:not(.disabled):active::after, .Button.FollowButton:not(.disabled).active::after, .Button.UserFollowButton:not(.disabled).active::after, .Button.InterestFollowButton:not(.disabled).active::after, .Modal .formFooter .Button.primary:not(.disabled).active::after, .ReactModal__Content .formFooter .Button.primary:not(.disabled).active::after, .news .pending .actions .Button.primary:not(.disabled).active::after, .panelFooter .formFooterButtons .cancelButton:not(.disabled).active::after, .Button.searchToFollowButton:not(.disabled).active::after, .formFooterButton.confirmButton:not(.disabled).active::after, .Button.CardFollow.RedButton:not(.disabled).active::after, .Button.promoteYourPin:not(.disabled).active::after, .Button.userProfileMenu:not(.UnblockButton):not(.disabled):hover::after, .Button.editProfile:not(.disabled):hover::after, .Button.groupBoardChat:not(.disabled):hover::after, .Button.userProfileMenu:not(.UnblockButton):not(.disabled):active::after, .Button.editProfile:not(.disabled):active::after, .Button.groupBoardChat:not(.disabled):active::after, .Button.userProfileMenu:not(.UnblockButton):not(.disabled).active::after, .Button.editProfile:not(.disabled).active::after, .Button.groupBoardChat:not(.disabled).active::after { background: rgba(0, 0, 0, 0.06); border-radius: 4px !important; content: " "; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 100; } .Button.boardSettingsButton:not(.disabled):active, .Button.UserFollowButton.followed:not(.disabled):active, .Button.InterestFollowButton.followed:not(.disabled):active, .Modal .formFooter .Button.rounded:not(.disabled):active:not(.primary), .ReactModal__Content .formFooter .Button.rounded:not(.disabled):active:not(.primary), .news .pending .actions .Button.remove:not(.disabled):active, .boardEdit .Button:not(.disabled):active, .Button.userFollowingGridButton:not(.disabled):active, .InviteButtonEmail .Button.btn:not(.disabled):active, .Button.moreItems:not(.disabled):active, .formFooterButton.cancelButton:not(.disabled):active, .Button.CardFollow.GrayButton:not(.disabled):active, .Button.FollowButton:not(.disabled):active, .Button.UserFollowButton:not(.disabled):active, .Button.InterestFollowButton:not(.disabled):active, .Modal .formFooter .Button.primary:not(.disabled):active, .ReactModal__Content .formFooter .Button.primary:not(.disabled):active, .news .pending .actions .Button.primary:not(.disabled):active, .panelFooter .formFooterButtons .cancelButton:not(.disabled):active, .Button.searchToFollowButton:not(.disabled):active, .formFooterButton.confirmButton:not(.disabled):active, .Button.CardFollow.RedButton:not(.disabled):active, .Button.promoteYourPin:not(.disabled):active, .Button.userProfileMenu:not(.disabled):active:not(.UnblockButton), .Button.editProfile:not(.disabled):active, .Button.groupBoardChat:not(.disabled):active { box-shadow: none !important; } .Button.boardSettingsButton:not(.disabled):active::after, .Button.UserFollowButton.followed:not(.disabled):active::after, .Button.InterestFollowButton.followed:not(.disabled):active::after, .Modal .formFooter .Button.rounded:not(.primary):not(.disabled):active::after, .ReactModal__Content .formFooter .Button.rounded:not(.primary):not(.disabled):active::after, .news .pending .actions .Button.remove:not(.disabled):active::after, .boardEdit .Button:not(.disabled):active::after, .Button.userFollowingGridButton:not(.disabled):active::after, .InviteButtonEmail .Button.btn:not(.disabled):active::after, .Button.moreItems:not(.disabled):active::after, .formFooterButton.cancelButton:not(.disabled):active::after, .Button.CardFollow.GrayButton:not(.disabled):active::after, .Button.FollowButton:not(.disabled):active::after, .Button.UserFollowButton:not(.disabled):active::after, .Button.InterestFollowButton:not(.disabled):active::after, .Modal .formFooter .Button.primary:not(.disabled):active::after, .ReactModal__Content .formFooter .Button.primary:not(.disabled):active::after, .news .pending .actions .Button.primary:not(.disabled):active::after, .panelFooter .formFooterButtons .cancelButton:not(.disabled):active::after, .Button.searchToFollowButton:not(.disabled):active::after, .formFooterButton.confirmButton:not(.disabled):active::after, .Button.CardFollow.RedButton:not(.disabled):active::after, .Button.promoteYourPin:not(.disabled):active::after, .Button.userProfileMenu:not(.UnblockButton):not(.disabled):active::after, .Button.editProfile:not(.disabled):active::after, .Button.groupBoardChat:not(.disabled):active::after { background: rgba(0, 0, 0, 0.1); } .Button.userProfileMenu:not(.UnblockButton), .Button.editProfile { padding: 10px 0 !important; } .Button.gridItem { left: 0; width: 236px; } /* Modal Buttons */ /* Board invite buttons in notifications */ .news .pending .actions .Button.remove { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-right: 4px; } .news .pending .actions .Button.primary { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } /* Board invite buttons on board */ .boardDetail .pending .actions .Button.remove { background: #88a5ab; border: 2px solid #fff !important; color: #fff; margin-right: 4px; padding: 6px 40px !important; } .boardDetail .pending .actions .Button.primary { background: #fff; border: 2px solid #fff !important; color: #88a5ab; padding: 6px 40px !important; } /* Board invite buttons on board edit */ .BoardCollaboratorInviter .BoardInviteForm .inviteButton { background: #555 !important; border-radius: 0 !important; color: #fff !important; padding: 0 18px !important; position: absolute !important; } /* BoardCollaboratorInviter */ .Button.pinCreateClose em, .Button.twoPaneClose em { width: 17px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.pinCreateClose em, .Button.twoPaneClose em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -88px -375px; background-size: 428px 427px; } } .Button.pinCreateClose:hover em, .Button.twoPaneClose:hover em { width: 17px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -339px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.pinCreateClose:hover em, .Button.twoPaneClose:hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -70px -375px; background-size: 428px 427px; } } .Button.shopBag.emptyBag em { width: 20px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -185px -296px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.shopBag.emptyBag em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -156px -292px; background-size: 399px 382px; } } .Button.shopBag.emptyBag:hover em { width: 20px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -141px -296px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.shopBag.emptyBag:hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -135px -292px; background-size: 399px 382px; } } .Button.shopBag em { width: 22px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -23px -296px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.shopBag em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -91px -292px; background-size: 399px 382px; } } .Button.groupBoardChat { top: 2px !important; } .Button.groupBoardChat:not(.disabled).active::after, .Button.groupBoardChat:not(.disabled):focus::after, .Button.groupBoardChat:not(.disabled):hover::after { border-radius: 50% !important; height: 48px !important; top: -2px !important; width: 48px !important; } .Button.groupBoardChat em { width: 22px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -95px -296px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Button.groupBoardChat em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -22px -292px; background-size: 399px 382px; } } .InviteButtonEmail .Button.btn { margin: 0 !important; padding: 10px 65px !important; width: inherit !important; } .Button.campbellCategories { margin-top: 4px; } .Button.CardFollow { width: 100%; } .Checkbox { display: inline-block; } .Checkbox.fancyToggle input, .Checkbox.flatToggle input, .Checkbox.fancyCheckbox input { border: 0; height: 0; margin: 0; opacity: 0; padding: 0; width: 0; } .Checkbox.styledToggle { border-radius: 3px; cursor: pointer; height: 28px; position: relative; width: 80px; } .Checkbox.styledToggle .slider, .Checkbox.styledToggle .onText, .Checkbox.styledToggle .offText { position: absolute; } .Checkbox.styledToggle .slider { background-color: #fff; border-radius: 3px; display: inline-block; width: 40%; } .Checkbox.styledToggle.on .slider { left: auto; } .Checkbox.styledToggle.on .offText { visibility: hidden; } .Checkbox.styledToggle.on .onText { right: auto; visibility: visible; } .Checkbox.styledToggle.disabled { opacity: .33; } .Checkbox.styledToggle .onText { visibility: hidden; } .Checkbox.styledToggle .status { margin: 0; position: absolute; } .Checkbox.flatToggle { background: #fff; border: 1px solid #c7c7c7; border-radius: 4px; box-sizing: border-box; } .Checkbox.flatToggle .slider { background: #fff; border: 0; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); height: 26px; left: 0; top: 0; width: 30px; } .Checkbox.flatToggle.on { background: #bd081c; border-color: #bd081c; } .Checkbox.flatToggle.on .slider { right: 0; } .Checkbox.flatToggle.on .onText { left: 13px; } .Checkbox.flatToggle.on .status { color: #fff; } .Checkbox.flatToggle .status { color: #333; font-size: 14px; font-weight: bold; right: 14px; text-shadow: none; top: 4px; } .Checkbox.fancyToggle { background: #e3e3e3; } .Checkbox.fancyToggle .slider { background: #fff; border: 1px solid #ececec; height: 22px; left: 2px; top: 2px; } .Checkbox.fancyToggle.on { background: #bd081c; } .Checkbox.fancyToggle.on .slider { right: 2px; } .Checkbox.fancyToggle.on .onText { left: 10px; } .Checkbox.fancyToggle.on .status { color: #fff; } .Checkbox.fancyToggle .status { color: #555; font-size: 12px; font-weight: bold; right: 13px; top: 7px; } .Checkbox.fancyCheckbox .visibleCheck { width: 21px; height: 21px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) 0 -242px no-repeat; display: inline-block; vertical-align: middle; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Checkbox.fancyCheckbox .visibleCheck { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -208px -136px; background-size: 249px 231px; } } .Checkbox.fancyCheckbox:hover .visibleCheck { width: 21px; height: 21px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -92px -242px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Checkbox.fancyCheckbox:hover .visibleCheck { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -208px -158px; background-size: 249px 231px; } } .Checkbox.fancyCheckbox.on .visibleCheck { width: 21px; height: 21px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -191px -97px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Checkbox.fancyCheckbox.on .visibleCheck { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -208px -92px; background-size: 249px 231px; } } .Checkbox.fancyCheckbox.facebook .visibleCheck { width: 25px; height: 23px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -162px -214px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Checkbox.fancyCheckbox.facebook .visibleCheck { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -208px 0; background-size: 249px 231px; } } .Checkbox.fancyCheckbox.facebook:hover .visibleCheck { width: 25px; height: 23px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -216px -214px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Checkbox.fancyCheckbox.facebook:hover .visibleCheck { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -104px -174px; background-size: 249px 231px; } } .Checkbox.fancyCheckbox.facebook.on .visibleCheck { width: 25px; height: 23px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -189px -214px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Checkbox.fancyCheckbox.facebook.on .visibleCheck { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -208px -24px; background-size: 249px 231px; } } .Checkbox.fancyCheckbox.facebook.on:hover .visibleCheck { width: 25px; height: 23px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -243px -214px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Checkbox.fancyCheckbox.facebook.on:hover .visibleCheck { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -130px -174px; background-size: 249px 231px; } } .Checkbox.fancyCheckbox.twitter .visibleCheck { width: 25px; height: 23px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -108px -214px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Checkbox.fancyCheckbox.twitter .visibleCheck { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -182px -174px; background-size: 249px 231px; } } .Checkbox.fancyCheckbox.twitter:hover .visibleCheck { width: 25px; height: 23px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -81px -214px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Checkbox.fancyCheckbox.twitter:hover .visibleCheck { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -52px -174px; background-size: 249px 231px; } } .Checkbox.fancyCheckbox.twitter.on .visibleCheck { width: 25px; height: 23px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -135px -214px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Checkbox.fancyCheckbox.twitter.on .visibleCheck { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -156px -174px; background-size: 249px 231px; } } .Checkbox.fancyCheckbox.twitter.on:hover .visibleCheck { width: 25px; height: 23px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -54px -214px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Checkbox.fancyCheckbox.twitter.on:hover .visibleCheck { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -78px -174px; background-size: 249px 231px; } } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .Collage { display: -webkit-box; display: -ms-flexbox; display: flex; } .Collage .item { position: relative; } .Collage .item::after { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background: rgba(0, 0, 0, 0.02); content: ""; display: block; } .Collage .item { box-sizing: border-box; overflow: hidden; position: relative; } .Collage .item img { -o-object-fit: cover; object-fit: cover; } .Collage.tiles { -ms-flex-flow: column wrap; flex-flow: column wrap; height: 188px; } .Collage.tiles img, .Collage.tiles .item { height: 92px; width: 92px; } .Collage.tiles .item { margin: 1px; } .Collage.tiles.fiveItems .item:nth-child(1) { height: 187px; } .Collage.tiles.fiveItems .item:nth-child(1) img { height: 100%; } .Collage.tiles.sixItems .item:nth-child(1) { height: 135px; } .Collage.tiles.sixItems .item:nth-child(1) img { height: auto; min-height: 100%; min-width: 100%; width: auto; } .Collage.tiles.sixItems .item:nth-child(2) { height: 49px; } .Collage.landscape { -ms-flex-line-pack: justify; align-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .Collage.landscape.fourItems { -webkit-box-flex: 0; -ms-flex: 0 0 374px; flex: 0 0 374px; } .Collage.landscape.fourItems img, .Collage.landscape.fourItems .item { height: 99px; width: 186px; } .Collage.landscape.twoItems img { height: 99px; width: 280px; } .Collage .stepNumber { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: rgba(0, 0, 0, 0.75); border-radius: 50%; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 18px; font-weight: bold; height: 40px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40px; left: 50%; margin-left: -20px; margin-top: -20px; position: absolute; top: 50%; } .Collage.showMore:last-child .item { position: relative; } .Collage.showMore:last-child .more { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 18px; font-weight: bold; padding-top: 34px; text-align: center; } .Collage.showMore:last-child .more::before { width: 6px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px -32px no-repeat; content: ""; display: inline-block; margin-right: 2px; vertical-align: -1px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Collage.showMore:last-child .more::before { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -196px -139px; background-size: 249px 231px; } } .Collage.gatorFeed .item img, .Collage.gatorFeed .item.placeholder { background: #efefef; border-radius: 4px; } /* desktop.scss */ .Collage.gatorFeed.tiles { height: 240px; } .Collage.gatorFeed.tiles img, .Collage.gatorFeed.tiles .item { height: 118px; width: 118px; } .Collage.gatorFeed.tiles .item { margin: 0 4px 4px 0; } .Collage.gatorFeed.tiles .item:nth-child(even) { margin-bottom: 0; } .Collage.gatorFeed.tiles .item:nth-last-child(1), .Collage.gatorFeed.tiles .item:nth-last-child(2) { margin-right: 0; } .ConfirmDialog { width: 380px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { .ConfirmDialog { width: 100%; } } .ConfirmDialog .body { color: #555; font-size: 14px; line-height: 21px; padding: 21px; } .ConfirmDialog p { margin: 0; } .ConfirmDialog p.text { margin-bottom: 1em; } .ConfirmDialog .standardForm h1 { white-space: normal; } .ConfirmDialog .standardForm a.confirm { display: inline-block; } .ConfirmDialog .searchPrivacyForm .body a { text-decoration: underline; } .ConfirmDialog .switchDialog .dialogTitle, .ConfirmDialog .switchDialog .body { font-weight: normal; } .ConfirmDialog .switchDialog .dialogLearnMore, .ConfirmDialog .switchDialog .dialogNoThanks { line-height: 32px; position: relative; vertical-align: middle; } .ConfirmDialog.fluid { width: auto; } .ConfirmDialog.wide { width: 700px; } .ConfirmDialog.mediumWide { width: 550px; } .ConfirmDialog.reportBug a { color: #bd081c; } .ConfirmDialog.reportBug a:hover { text-decoration: underline; } .ConfirmDialog .apiSecret { background: #eee; border: 1px solid #ddd; border-radius: 2px; /* stylelint-disable-next-line property-blacklist */ font-family: monospace; margin-top: 7px; padding: 3px; text-align: center; } .ConfirmDialog .messageError h1 { font-size: 18px; } .ConfirmDialog .messageError ul { margin-top: 10px; } .ConfirmDialog .messageError ul li { color: #717171; font-weight: bold; } .ConfirmDialog .modalActionDescription { color: #999; display: table; font-size: 13px; height: 360px; width: 550px; } .ConfirmDialog .modalActionDescription > span { display: table-cell; padding: 0 18px; text-align: center; vertical-align: middle; } .ConfirmDialog .modalActionTitle { width: 514px; } .ConfirmDialog .standardForm.boldForm > h1 { padding-top: 40px; } .ConfirmDialog .standardForm.boldForm > h1, .ConfirmDialog .standardForm.boldForm .formFooter { border: none; } .ReactModal__Overlay { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: rgba(226, 228, 228, 0.9); bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; left: 0; overflow-y: scroll; padding: 20px; position: fixed; right: 0; top: 0; z-index: 751; } .ReactModal__Content { border-radius: 6px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); margin: auto; max-height: 200%; position: relative; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .Dropdown { cursor: default; text-align: left; } .Dropdown.active .dropdownContainer { display: block; } .Dropdown .dropdownTitle { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 13px; font-weight: bold; margin: 10px 0 5px; padding: 0 15px; } .Dropdown .dropdownText { color: #555; font-weight: 500; margin: 5px 0 10px; max-width: 175px; padding: 0 15px; } .Dropdown .dropdownText b { color: #333; } .Dropdown.activeConversationDropdown { bottom: 21px !important; margin-left: 14px !important; margin-top: 10px; max-height: 460px; top: auto !important; z-index: 700 !important; } .Dropdown.activeConversationDropdown .positionModuleCaret.lightGrayConversationsCaretStyle.lightGray { width: 17px; height: 31px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -341px -90px no-repeat; left: -17px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Dropdown.activeConversationDropdown .positionModuleCaret.lightGrayConversationsCaretStyle.lightGray { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -378px -79px; background-size: 428px 427px; } } .Dropdown.gridShare.isEmpty { height: 460px !important; } .Dropdown.gridShare.isEmptyWithoutFriends { height: 362px !important; } .Dropdown.conversationsDropdown.isEmpty { max-height: 371px !important; } .Dropdown.conversationsDropdown.isEmptyWithoutFriends { max-height: 273px !important; } .Dropdown.geoFeatureDropdown { margin-left: -6px; width: 276px; } .Dropdown.geoFeatureDropdown .positionModuleCaret { left: 14px !important; } .Dropdown.geoFeatureDropdown li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #e5e5e5; color: #000; cursor: pointer; font-size: 13px; padding: 2px 14px; } .Dropdown.geoFeatureDropdown li:first-child { margin-top: 5px; padding-top: 0; } .Dropdown.geoFeatureDropdown li:last-child { border-bottom: 0; margin-bottom: 5px; padding-bottom: 0; } .Dropdown.geoFeatureDropdown li:hover { background: #f4f4f4; } .Dropdown.geoFeatureDropdown li .geoFeature { left: 1px; position: relative; top: 1px; } .Dropdown.large .dropdownText { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 14px; font-weight: normal; margin: 10px 0; max-width: 500px; } .Dropdown.large .dropdownText em { color: #bd081c; font-style: normal; font-weight: bold; } .Dropdown.userDropdown { margin-left: 1px; } .Dropdown.positionModuleElement.active { min-height: 0; } .Dropdown.sterlingUserDropdown.positionModuleElement span.positionModuleCaret { width: 15px; height: 6px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -384px -329px no-repeat; left: 213px !important; top: -6px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Dropdown.sterlingUserDropdown.positionModuleElement span.positionModuleCaret { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -393px; background-size: 428px 427px; } } .Dropdown.sterlingContentDropdown.positionModuleElement { z-index: 669; } .Dropdown.sterlingHeaderDropdown { z-index: 669; } .Dropdown.sterlingPaginatedTableDropdown.positionModuleElement { z-index: 1; } .Dropdown.fake .dropdownContainer { opacity: .7; z-index: 900; } .Dropdown.underneathHeader { z-index: 669; } .Dropdown.tutorial { background-color: #fff; bottom: auto; opacity: .98; z-index: 999999999; } .Dropdown.tutorial .dropdownContainer { box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.44); } .Dropdown.aboveModal { z-index: 751; } .Dropdown.strongBorder { background-color: #fbfbfb; border: 1px solid #b6b6b6; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); } .Dropdown.boardPicker { margin-left: -7px; margin-top: -77px; } .Dropdown.autoFollowMemo .dropdownTitle { line-height: 50px; margin: 0; } .Dropdown.tooltip { text-align: center; } .Dropdown.tooltip.active { min-height: 0; padding-bottom: 7px; padding-top: 7px; } .Dropdown.tooltip.active .dropdownText { margin: 0; } .Dropdown.pinContainer.positionModuleElement { background-color: #f5f5f5; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 8px 0 rgba(0, 0, 0, 0.06); margin-left: -62px; margin-top: -140px; padding: 15px; z-index: 668; } .Dropdown.pinContainer.positionModuleElement span.positionModuleCaret { width: 17px; height: 9px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -365px -329px no-repeat; right: 15px !important; top: -7px; width: 18px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Dropdown.pinContainer.positionModuleElement span.positionModuleCaret { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -226px -375px; background-size: 428px 427px; } } .Dropdown.advertiserCountryDropdown { width: 400px; } .Dropdown.exploreSendPinDropdown { z-index: 801; } .Dropdown.sterlingPinnerListDropdown { width: 550px; } .Dropdown.sterlingPinnerListDropdown.positionModuleElement { z-index: 751; } .Dropdown.sterlingPinnerListDropdown .paginatedTableControl { max-height: 124px; } .Dropdown.sterlingPinnerListDropdownCountry { width: 124px; } .Dropdown.sterlingPinnerListDropdownCountry.positionModuleElement { z-index: 751; } .Dropdown.sterlingPinnerListDropdownCountry .paginatedTableControl { max-height: 124px; } .Dropdown.sterlingPinnerListDropdownPercentage { width: 200px; } .Dropdown.sterlingPinnerListDropdownPercentage.positionModuleElement { z-index: 751; } .Dropdown.sterlingPinnerListDropdownPercentage .paginatedTableControl { max-height: 124px; } .Dropdown.sterlingExportModalDropdown.positionModuleElement { z-index: 751; } .Dropdown.sterlingExportModalDropdown.positionModuleElement ul { min-width: 120px; } .Dropdown.sterlingExportModalDropdown.positionModuleElement ul.constrainHeight { height: 260px; overflow-y: scroll; } .Dropdown.sterlingPreviewDropdown.hide:not(.slideIn) { display: none; } /* desktop.scss */ .Dropdown.helpDropdown { width: 200px; } .Dropdown.userDropdown { width: 185px; } .Dropdown.userDropdown.compact { width: 156px; } .Dropdown2 { -webkit-transform: translateZ(0); background: #fbfbfb; border: 1px solid #b6b6b6; border-radius: 3px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); display: none; margin-left: -6px; position: absolute; top: 23px; z-index: 752; } .Dropdown2.visible { display: block; } .DropdownButton { display: inline-block; position: relative; } .DropdownButton em { width: 10px; height: 7px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -162px -200px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .DropdownButton em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -143px -162px; background-size: 249px 231px; } } .DropdownButton.embed em { width: 17px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px -404px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .DropdownButton.embed em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -378px -362px; background-size: 428px 427px; } } .DropdownButton.inContextDropdownButton { background: none; border: 0; color: inherit; font: inherit; margin: 0; padding: 0; } .DropdownButton.caret em { width: 10px; height: 7px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -162px -200px no-repeat; opacity: .5; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .DropdownButton.caret em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -143px -162px; background-size: 249px 231px; } } .DropdownButton.flat .buttonText { float: left; } .DropdownButton.flat em { background: url(https://s.pinimg.com/webapp/style/images/arrow_down-1x-f80d10cd.png) no-repeat; background-size: contain; height: 6px; width: 10px; float: right; margin: 6px 0 0 8px; opacity: 1; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .DropdownButton.flat em { background-image: url(https://s.pinimg.com/webapp/style/images/arrow_down-2x-f08d1bc4.png); } } .DropdownButton.metricsGraph .buttonText { font-size: 14px; } .DropdownButton.metricsGraph.cpe .buttonText { color: #a24e8c; } .DropdownButton.metricsGraph.cpc .buttonText { color: #c5a807; } .DropdownButton.metricsGraph.cpm .buttonText { color: #417505; } .DropdownButton.metricsGraph.cpa .buttonText { color: #ec7a70; } .DropdownButton.metricsGraph.bcpm .buttonText { color: #685cae; } .DropdownButton.sterling .downArrow { background: url(https://s.pinimg.com/webapp/style/images/arrow_down-1x-f80d10cd.png) no-repeat; background-size: contain; height: 6px; width: 10px; display: block; float: right; margin: 6px 0; opacity: 1; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .DropdownButton.sterling .downArrow { background-image: url(https://s.pinimg.com/webapp/style/images/arrow_down-2x-f08d1bc4.png); } } .DropdownButton.campbellAddPin em { width: 40px; height: 40px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -124px -110px no-repeat; background-position: -130px -116px; border-radius: 50%; height: 28px; width: 28px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .DropdownButton.campbellAddPin em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -122px -109px; background-size: 399px 382px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .DropdownButton.campbellAddPin:hover em, .DropdownButton.campbellAddPin:focus em, .DropdownButton.campbellAddPin.active em, .DropdownButton.campbellAddPin:active em, .DropdownButton.campbellAddPin em { background-position: -128px -115px; } } .DropdownButton.campbellCategories { background: none; border: 0; padding: 0; } .DropdownButton.campbellCategories.active, .DropdownButton.campbellCategories:active, .DropdownButton.campbellCategories:focus, .DropdownButton.campbellCategories:hover { background: none; box-shadow: none; } .DropdownButton.campbellCategories.active em, .DropdownButton.campbellCategories:active em, .DropdownButton.campbellCategories:focus em, .DropdownButton.campbellCategories:hover em { width: 32px; height: 14px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-partners-1x-9f7312af.png) -34px -60px no-repeat; background-color: none; border: 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .DropdownButton.campbellCategories.active em, .DropdownButton.campbellCategories:active em, .DropdownButton.campbellCategories:focus em, .DropdownButton.campbellCategories:hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-partners-2x-19664238.png); background-position: -33px -58px; background-size: 86px 72px; } } .DropdownButton.campbellCategories em { width: 32px; height: 14px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-partners-1x-9f7312af.png) 0 -60px no-repeat; display: inline-block; height: 14px; margin: -4px 6px 0 8px; vertical-align: middle; width: 32px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .DropdownButton.campbellCategories em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-partners-2x-19664238.png); background-position: 0 -58px; background-size: 86px 72px; } } .DropdownButton.wideDropdownButton { width: 100%; } .Field { cursor: text; font-size: 13px; position: relative; } .Field .content { background: #f0f0f0; border: 1px solid #d1d1d1; box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07); box-sizing: border-box; color: #333; display: block; margin: 0; } .Field .content.detailed { background: #efefef; border: 0; height: 40px; } .Field .content.detailed:focus { background: #efefef; outline: 0; } .Field .content:focus { background-color: #fafafa; border: 1px solid #c3c3c3; color: #333; } .Field .content:active { border-color: #bcbcbc; } .Field .currencySymbol { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #777; } .Field.withCurrencySymbol { width: 152px; } .Field.withCurrencySymbol .inputWrapper { display: block; overflow: hidden; } .Field.withCurrencySymbol .inputWrapper input { height: 30px; } .Field.withCurrencySymbol .currencySymbol { background: #fff; border: 1px solid #dfdfdf; border-bottom-left-radius: 3px; border-right: 0; border-top-left-radius: 3px; color: #999; float: left; height: 28px; line-height: 28px; padding: 0 10px; text-align: center; width: 10px; } .Field.flat.withCurrencySymbol .currencySymbol { background: #c7c7c7; border-bottom-left-radius: 4px; border-color: #c7c7c7; border-top-left-radius: 4px; color: #fff; font-weight: bold; } .Field.noRightBorder input { border-bottom-right-radius: 0; border-right: 0; border-top-right-radius: 0; } .FollowButton:not(.primary):not(.followed):not(.disabled) .buttonText { color: #bd081c; } .FollowButton.exploreTabFollowButton.btn, .FollowButton.exploreTabFollowButton.btn.primary, .FollowButton.exploreTabFollowButton.btn.followed { background: rgba(255, 255, 255, 0.5); border-color: #eaeaea; border-radius: 4px; font-size: 14px; margin-top: 0; text-shadow: none; width: 100%; } .FollowButton.exploreTabFollowButton.btn:hover, .FollowButton.exploreTabFollowButton.btn.primary:hover, .FollowButton.exploreTabFollowButton.btn.followed:hover { background: #bd081c; border-color: #bd081c; box-shadow: none; } .FollowButton.exploreTabFollowButton.btn:hover .buttonText, .FollowButton.exploreTabFollowButton.btn.primary:hover .buttonText, .FollowButton.exploreTabFollowButton.btn.followed:hover .buttonText { color: #fff; } .FollowButton.exploreTabFollowButton.btn:active .buttonHoverMask, .FollowButton.exploreTabFollowButton.btn.primary:active .buttonHoverMask, .FollowButton.exploreTabFollowButton.btn.followed:active .buttonHoverMask { background-color: rgba(0, 0, 0, 0.2); } .FollowButton.exploreTabFollowButton.btn:focus, .FollowButton.exploreTabFollowButton.btn.primary:focus, .FollowButton.exploreTabFollowButton.btn.followed:focus { outline: none; } .FollowButton.homefeedBuilderFollowButton.btn, .FollowButton.homefeedBuilderFollowButton.btn.primary, .FollowButton.homefeedBuilderFollowButton.btn.followed { background: none; } .FollowButton.homefeedBuilderFollowButton.btn.followed, .FollowButton.exploreTabFollowButton.btn { color: #b5b5b5; } .FollowButton.homefeedBuilderFollowButton.btn, .FollowButton.exploreTabFollowButton.btn { color: #bd081c; } .FollowButton.gatorFollowButton.btn { background: #fff; border: 1px solid #e7e7e7; font-size: 14px; height: 35px; } .FollowButton.gatorFollowButton.btn .buttonText { line-height: 16px !important; } .FollowButton.gatorFollowButton.btn:hover, .FollowButton.gatorFollowButton.btn:focus, .FollowButton.gatorFollowButton.btn:active { background: #bd081c; border: 1px solid #bd081c; } .FollowButton.gatorFollowButton.btn:hover .buttonText, .FollowButton.gatorFollowButton.btn:focus .buttonText, .FollowButton.gatorFollowButton.btn:active .buttonText { color: #fff; } .FollowButton.gatorFollowButton.btn.followed { color: #b5b5b5; } .FollowButton.isBrioFlat { height: 35px; } .FollowButton.isBrioFlat.btn.hasText { background: #fff; border: 1px solid; border-color: #c7c7c7; color: #b5b5b5; font-size: 14px; line-height: 16px; margin-top: 0; outline: 0; } .FollowButton.isBrioFlat.btn.hasText:hover, .FollowButton.isBrioFlat.btn.hasText.dim:hover { background: #bd081c; border: 1px solid #bd081c; } .FollowButton.isBrioFlat.btn.hasText:hover .buttonText, .FollowButton.isBrioFlat.btn.hasText.dim:hover .buttonText { color: #fff; } .FollowButton.isBrioFlat.rounded { border-radius: 4px; } .Dropdown .FormItemGroup { min-width: 200px; } .Dropdown .FormItemGroup li { border-top: 1px solid #eee; } .Dropdown .FormItemGroup li:first-child { border-top: 0; } .Dropdown .FormItemGroup li label { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #333; display: block; font-size: 14px; font-weight: bold; padding: 14px 28px 14px 14px; } .Dropdown .FormItemGroup li .labelContent { display: inline-block; margin-left: 7px; vertical-align: middle; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .Grid { margin: 0 auto 14px; position: relative; } .Grid .seeMoreButtonWrapper { text-align: center; } .Grid.hasError { padding-bottom: 120px; } .Grid.hasFooter { padding-bottom: 22.5px; } .Grid.hasFooter.hasError { padding-bottom: 142.5px; } .Grid .navigator { display: none; } .Grid.rowLayout { margin: 0; } .Grid.rowLayout .gridContainer { -webkit-overflow-scrolling: touch; overflow-x: scroll; overflow-y: hidden; pointer-events: none; position: relative; } .Grid.rowLayout .gridContainer .item { pointer-events: auto; } .Grid.rowLayout .navigator { height: 100%; position: absolute; top: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; width: 100px; } .Grid.rowLayout .navigator em { cursor: pointer; display: inline-block; position: absolute; top: 50%; } .Grid.rowLayout .navigator.left { background-image: -webkit-linear-gradient(right, rgba(233, 233, 233, 0) 0%, #e9e9e9 95%); background-image: linear-gradient(to left, rgba(233, 233, 233, 0) 0%, #e9e9e9 95%); left: 0; } .Grid.rowLayout .navigator.left em { width: 22px; height: 31px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -302px -261px no-repeat; left: 0; margin-top: -15.5px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Grid.rowLayout .navigator.left em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -298px -258px; background-size: 399px 382px; } } .Grid.rowLayout .navigator.left em:hover { width: 22px; height: 31px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -339px -226px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Grid.rowLayout .navigator.left em:hover { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -334px -221px; background-size: 399px 382px; } } .Grid.rowLayout .navigator.right { background-image: -webkit-linear-gradient(left, rgba(233, 233, 233, 0) 0%, #e9e9e9 95%); background-image: linear-gradient(to right, rgba(233, 233, 233, 0) 0%, #e9e9e9 95%); right: 0; text-align: right; } .Grid.rowLayout .navigator.right em { width: 22px; height: 31px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -339px -259px no-repeat; margin-top: -15.5px; right: 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Grid.rowLayout .navigator.right em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -334px -253px; background-size: 399px 382px; } } .Grid.rowLayout .navigator.right em:hover { width: 22px; height: 31px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -153px -67px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Grid.rowLayout .navigator.right em:hover { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -151px -66px; background-size: 399px 382px; } } .Grid.rowLayout .navigator.right.loading { display: inline !important; } .Grid.rowLayout .navigator.right.loading em { width: 24px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -193px -234px no-repeat; -webkit-animation: rotateCircle 500ms infinite; animation: rotateCircle 500ms infinite; cursor: default; margin-top: -12px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Grid.rowLayout .navigator.right.loading em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -189px -231px; background-size: 399px 382px; } } /* desktop.scss */ /* stylelint-disable at-rule-no-unknown */ @media (min-width: 260px) and (max-width: 519px) { .Grid .centeredWithinWrapper { width: 260px; } .Grid .centeredWithinWrapper.gridWidth { width: 236px; } } @media (min-width: 520px) and (max-width: 779px) { .Grid .centeredWithinWrapper { width: 520px; } .Grid .centeredWithinWrapper.gridWidth { width: 496px; } } @media (min-width: 780px) and (max-width: 1039px) { .Grid .centeredWithinWrapper { width: 780px; } .Grid .centeredWithinWrapper.gridWidth { width: 756px; } } @media (min-width: 1040px) and (max-width: 1299px) { .Grid .centeredWithinWrapper { width: 1040px; } .Grid .centeredWithinWrapper.gridWidth { width: 1016px; } } @media (min-width: 1300px) and (max-width: 1559px) { .Grid .centeredWithinWrapper { width: 1300px; } .Grid .centeredWithinWrapper.gridWidth { width: 1276px; } } @media (min-width: 1560px) and (max-width: 1819px) { .Grid .centeredWithinWrapper { width: 1560px; } .Grid .centeredWithinWrapper.gridWidth { width: 1536px; } } @media (min-width: 1820px) and (max-width: 2079px) { .Grid .centeredWithinWrapper { width: 1820px; } .Grid .centeredWithinWrapper.gridWidth { width: 1796px; } } @media (min-width: 2080px) and (max-width: 2339px) { .Grid .centeredWithinWrapper { width: 2080px; } .Grid .centeredWithinWrapper.gridWidth { width: 2056px; } } @media (min-width: 2340px) and (max-width: 2599px) { .Grid .centeredWithinWrapper { width: 2340px; } .Grid .centeredWithinWrapper.gridWidth { width: 2316px; } } @media (min-width: 2600px) and (max-width: 2859px) { .Grid .centeredWithinWrapper { width: 2600px; } .Grid .centeredWithinWrapper.gridWidth { width: 2576px; } } .GridFooter { display: none; margin-top: 31px; /* TODO cvuerings - remove from actual DOM instead of hiding in CSS */ } .GridFooter.visible { display: block; } .GridFooter hr { display: none; } .GridFooter .gridError { border-top: #ccc dashed 2px; bottom: 0; display: none; left: 0; right: 0; text-align: center; } .GridFooter .gridError::after { clear: both; content: ""; display: table; } .GridFooter .gridError .btn { margin: 20px auto 50px; } .GridFooter .gridError .btn span { font-weight: normal; } .GridFooter .gridLoadingWrapper { position: relative; z-index: -2; } .GridFooter .gridLoading { background: #fff; display: inline-block; left: 50%; margin-left: -24.5px; padding: 20px 10px; position: absolute; text-align: center; top: -26.5px; width: 29px; } .GridFooter .gridLoading .gridFooterLogoIcon { width: 29px; height: 31px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -339px -163px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .GridFooter .gridLoading .gridFooterLogoIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -334px -160px; background-size: 399px 382px; } } .GridFooter .gridLoading .gridFooterSpinner { background: url(https://s.pinimg.com/webapp/style/images/spinner-medium-1x-dbb1334f.gif) no-repeat; background-size: contain; height: 32px; width: 32px; display: inline-block; opacity: .5; display: none; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .GridFooter .gridLoading .gridFooterSpinner { background-image: url(https://s.pinimg.com/webapp/style/images/spinner-medium-2x-3ffcb44b.gif); } } .GridFooter.showGridLoading .gridFooterLogoIcon { display: none; } .GridFooter.showGridLoading .gridFooterSpinner { display: block; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .GridItems { margin: 0 auto 14px; position: relative; } .GridItems.max-columns-3 { max-width: 750px; } .GridItems.max-columns-4 { max-width: 1000px; } .GridItems.max-columns-5 { max-width: 1250px; } .GridItems.max-columns-6 { max-width: 1500px; } .GridItems.max-columns-7 { max-width: 1750px; } .GridItems.max-columns-8 { max-width: 2000px; } .GridItems.max-columns-9 { max-width: 2250px; } .GridItems.max-columns-10 { max-width: 2500px; } .GridItems.centeredWithinWrapper { margin-bottom: 14px; padding-bottom: 4px; } .GridItems.loading { min-height: 100px; } .GridItems.animated .item { -webkit-transition: -webkit-transform .2s ease-out; transition: -webkit-transform .2s ease-out; transition: transform .2s ease-out; transition: transform .2s ease-out, -webkit-transform .2s ease-out; } .GridItems .item.slideIn { -webkit-animation: pinFadeIn .33s forwards; animation: pinFadeIn .33s forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; display: block; } .GridItems .item { -webkit-transform: translateZ(0); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .GridItems .item .itemClickMask { background-color: rgba(0, 0, 0, 0.5); border-radius: 6px; bottom: 0; color: #fff; cursor: pointer; font-size: 20px; font-weight: bold; left: 0; opacity: 0; position: absolute; right: 0; text-align: center; top: 0; z-index: 200; } .GridItems .item .itemClickMask .selectItemIconWrapper { left: 50%; position: absolute; top: 50%; } .GridItems .item .itemClickMask .selectItemIcon { width: 40px; height: 40px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -274px -296px no-repeat; left: -16px; position: absolute; top: -45px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .GridItems .item .itemClickMask .selectItemIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -178px -258px; background-size: 428px 427px; } } .GridItems .item .itemClickMask .selectItemTextWrapper { position: relative; top: 14px; } .GridItems .item .itemClickMask::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .GridItems .item .itemClickMask:hover { opacity: 1; } .GridItems .item .sideHighlight { border-left: 2px solid #bd081c; height: 70%; left: 0; opacity: 0; position: absolute; top: 15%; -webkit-transition-duration: .23s; transition-duration: .23s; -webkit-transition-property: opacity; transition-property: opacity; } .GridItems .item.dropPreview { z-index: 2; } .GridItems .item.dropPreview .sideHighlight { opacity: 1; } .GridItems.variableHeightLayout > .item { position: absolute; visibility: hidden; } .GridItems.fixedHeightLayout { padding-bottom: 2px; } .GridItems.fixedHeightLayout::after { clear: both; content: ""; display: table; } .GridItems.fixedHeightLayout > .item { float: left; } .GridItems.padItems > .item { margin: 14px 7px 0 7px; width: 236px; } .GridItems.rowLayout { margin: 14px 0 0; } .GridItems.rowLayout > .item { float: left; padding: 0 7px; } .GridItems.rowLayout.padItems > .item { margin: 0; padding: 14px 7px 0 7px; } .GridItems.exploreExp { min-width: 1000px; } .GridItems .quickPromoteTutorial { z-index: 1; } .GridItems .quickPromoteTutorialSubsequent { z-index: 0; } /* desktop.scss */ .GridItems { /* stylelint-disable-next-line at-rule-no-unknown */ } @media (min-width: 260px) and (max-width: 519px) { .GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+1) { float: left; position: static; visibility: visible; } } .GridItems.max-columns-1 { /* stylelint-disable-next-line at-rule-no-unknown */ } .GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(2) { position: absolute; visibility: hidden; } .GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(3) { position: absolute; visibility: hidden; } .GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(4) { position: absolute; visibility: hidden; } .GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(5) { position: absolute; visibility: hidden; } .GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(6) { position: absolute; visibility: hidden; } .GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(7) { position: absolute; visibility: hidden; } .GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(8) { position: absolute; visibility: hidden; } .GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(9) { position: absolute; visibility: hidden; } .GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(10) { position: absolute; visibility: hidden; } @media (min-width: 520px) and (max-width: 779px) { .GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+2) { float: left; position: static; visibility: visible; } } .GridItems.max-columns-2 { /* stylelint-disable-next-line at-rule-no-unknown */ } .GridItems.max-columns-2.variableHeightLayout.loadingItems > .item:nth-child(3) { position: absolute; visibility: hidden; } .GridItems.max-columns-2.variableHeightLayout.loadingItems > .item:nth-child(4) { position: absolute; visibility: hidden; } .GridItems.max-columns-2.variableHeightLayout.loadingItems > .item:nth-child(5) { position: absolute; visibility: hidden; } .GridItems.max-columns-2.variableHeightLayout.loadingItems > .item:nth-child(6) { position: absolute; visibility: hidden; } .GridItems.max-columns-2.variableHeightLayout.loadingItems > .item:nth-child(7) { position: absolute; visibility: hidden; } .GridItems.max-columns-2.variableHeightLayout.loadingItems > .item:nth-child(8) { position: absolute; visibility: hidden; } .GridItems.max-columns-2.variableHeightLayout.loadingItems > .item:nth-child(9) { position: absolute; visibility: hidden; } .GridItems.max-columns-2.variableHeightLayout.loadingItems > .item:nth-child(10) { position: absolute; visibility: hidden; } @media (min-width: 780px) and (max-width: 1039px) { .GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+3) { float: left; position: static; visibility: visible; } } .GridItems.max-columns-3 { /* stylelint-disable-next-line at-rule-no-unknown */ } .GridItems.max-columns-3.variableHeightLayout.loadingItems > .item:nth-child(4) { position: absolute; visibility: hidden; } .GridItems.max-columns-3.variableHeightLayout.loadingItems > .item:nth-child(5) { position: absolute; visibility: hidden; } .GridItems.max-columns-3.variableHeightLayout.loadingItems > .item:nth-child(6) { position: absolute; visibility: hidden; } .GridItems.max-columns-3.variableHeightLayout.loadingItems > .item:nth-child(7) { position: absolute; visibility: hidden; } .GridItems.max-columns-3.variableHeightLayout.loadingItems > .item:nth-child(8) { position: absolute; visibility: hidden; } .GridItems.max-columns-3.variableHeightLayout.loadingItems > .item:nth-child(9) { position: absolute; visibility: hidden; } .GridItems.max-columns-3.variableHeightLayout.loadingItems > .item:nth-child(10) { position: absolute; visibility: hidden; } @media (min-width: 1040px) and (max-width: 1299px) { .GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+4) { float: left; position: static; visibility: visible; } } .GridItems.max-columns-4 { /* stylelint-disable-next-line at-rule-no-unknown */ } .GridItems.max-columns-4.variableHeightLayout.loadingItems > .item:nth-child(5) { position: absolute; visibility: hidden; } .GridItems.max-columns-4.variableHeightLayout.loadingItems > .item:nth-child(6) { position: absolute; visibility: hidden; } .GridItems.max-columns-4.variableHeightLayout.loadingItems > .item:nth-child(7) { position: absolute; visibility: hidden; } .GridItems.max-columns-4.variableHeightLayout.loadingItems > .item:nth-child(8) { position: absolute; visibility: hidden; } .GridItems.max-columns-4.variableHeightLayout.loadingItems > .item:nth-child(9) { position: absolute; visibility: hidden; } .GridItems.max-columns-4.variableHeightLayout.loadingItems > .item:nth-child(10) { position: absolute; visibility: hidden; } @media (min-width: 1300px) and (max-width: 1559px) { .GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+5) { float: left; position: static; visibility: visible; } } .GridItems.max-columns-5 { /* stylelint-disable-next-line at-rule-no-unknown */ } .GridItems.max-columns-5.variableHeightLayout.loadingItems > .item:nth-child(6) { position: absolute; visibility: hidden; } .GridItems.max-columns-5.variableHeightLayout.loadingItems > .item:nth-child(7) { position: absolute; visibility: hidden; } .GridItems.max-columns-5.variableHeightLayout.loadingItems > .item:nth-child(8) { position: absolute; visibility: hidden; } .GridItems.max-columns-5.variableHeightLayout.loadingItems > .item:nth-child(9) { position: absolute; visibility: hidden; } .GridItems.max-columns-5.variableHeightLayout.loadingItems > .item:nth-child(10) { position: absolute; visibility: hidden; } @media (min-width: 1560px) and (max-width: 1819px) { .GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+6) { float: left; position: static; visibility: visible; } } .GridItems.max-columns-6 { /* stylelint-disable-next-line at-rule-no-unknown */ } .GridItems.max-columns-6.variableHeightLayout.loadingItems > .item:nth-child(7) { position: absolute; visibility: hidden; } .GridItems.max-columns-6.variableHeightLayout.loadingItems > .item:nth-child(8) { position: absolute; visibility: hidden; } .GridItems.max-columns-6.variableHeightLayout.loadingItems > .item:nth-child(9) { position: absolute; visibility: hidden; } .GridItems.max-columns-6.variableHeightLayout.loadingItems > .item:nth-child(10) { position: absolute; visibility: hidden; } @media (min-width: 1820px) and (max-width: 2079px) { .GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+7) { float: left; position: static; visibility: visible; } } .GridItems.max-columns-7 { /* stylelint-disable-next-line at-rule-no-unknown */ } .GridItems.max-columns-7.variableHeightLayout.loadingItems > .item:nth-child(8) { position: absolute; visibility: hidden; } .GridItems.max-columns-7.variableHeightLayout.loadingItems > .item:nth-child(9) { position: absolute; visibility: hidden; } .GridItems.max-columns-7.variableHeightLayout.loadingItems > .item:nth-child(10) { position: absolute; visibility: hidden; } @media (min-width: 2080px) and (max-width: 2339px) { .GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+8) { float: left; position: static; visibility: visible; } } .GridItems.max-columns-8 { /* stylelint-disable-next-line at-rule-no-unknown */ } .GridItems.max-columns-8.variableHeightLayout.loadingItems > .item:nth-child(9) { position: absolute; visibility: hidden; } .GridItems.max-columns-8.variableHeightLayout.loadingItems > .item:nth-child(10) { position: absolute; visibility: hidden; } @media (min-width: 2340px) and (max-width: 2599px) { .GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+9) { float: left; position: static; visibility: visible; } } .GridItems.max-columns-9 { /* stylelint-disable-next-line at-rule-no-unknown */ } .GridItems.max-columns-9.variableHeightLayout.loadingItems > .item:nth-child(10) { position: absolute; visibility: hidden; } @media (min-width: 2600px) and (max-width: 2859px) { .GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+10) { float: left; position: static; visibility: visible; } } .GridItems.max-columns-10 { /* stylelint-disable-next-line at-rule-no-unknown */ } .GridItems.max-columns-10.variableHeightLayout.loadingItems > .item:nth-child(11) { position: absolute; visibility: hidden; } .GridItems.max-columns-10.variableHeightLayout.loadingItems > .item:nth-child(10) { position: absolute; visibility: hidden; } .GridItems.padItems.variableHeightLayout > .item, .GridItems.padItems.fixedHeightLayout > .item { margin: 0; padding: 24px 12px; width: 236px; } .GridItems.variableHeightLayout > .item, .GridItemsfixedHeightLayout > .item { margin: 0; padding-top: 10px; width: 236px; } .GridItems.imageOnlyWeb.padItems.variableHeightLayout > .item, .GridItems.imageOnlyWeb.padItems.fixedHeightLayout > .item { padding: 12px !important; } .HelpMenu li { overflow: hidden; color: #777; display: block; font-size: 12px; } .HelpMenu li:first-child { padding-top: 5px; } .HelpMenu li:last-child { padding-bottom: 5px; } .HelpMenu li a { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-weight: bold; color: #777; cursor: pointer; display: block; padding: 9px 14px; } .HelpMenu li a:hover { background: #f1f1f1; color: #333; } .HelpMenu li a:active { background: #eaeaea; } .HelpMenu li a { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; color: #595959; font-size: 13px; font-weight: 600; padding: 7px 18px; } .HelpMenu li a:hover { background-color: #f2f2f2; color: #333; } .HelpMenu li a:active { background-color: #cb2027; color: #fff; } .HelpMenu li:first-child { border-radius: 6px 6px 0 0; padding-top: 0; } .HelpMenu li:first-child a { padding-top: 10px; } .HelpMenu li:last-child { border-radius: 0 0 6px 6px; padding-bottom: 0; } .HelpMenu li:last-child a { padding-bottom: 10px; } .Image { max-width: 100%; position: relative; } .Image > .heightContainer > img { height: 100%; position: absolute; width: 100%; } .Image.unknownImage > .heightContainer > img { position: static; } .Image.gatorUserProfileIcon { border-radius: 50%; height: 40px; overflow: hidden; width: 40px; } .Image.gatorFeed { max-width: 564px; } .Image.gatorFeed img { border-radius: 8px; position: relative; } .Image.gatorFeedInlineHeader { border-radius: 4px; height: 35px; overflow: hidden; width: 35px; } .Image.activityPreviewUserProfile { border: 2px solid #fff; border-radius: 50%; height: 24px; overflow: hidden; width: 24px; } .Image.activityPreviewUserProfile .heightContainer img { position: absolute; } .Image.activityPreview { border-radius: 8px; height: 100px; overflow: hidden; width: 100px; } .Image.activityPreview .heightContainer { display: -webkit-box; display: -ms-flexbox; display: flex; } .Image.activityPreview .heightContainer img { -o-object-fit: cover; object-fit: cover; width: inherit; } .Image.didItPinRepIcon { border-radius: 8px; height: 40px; overflow: hidden; width: 40px; } .Image.didItUserContent { border-radius: 8px; overflow: hidden; } .Image.didItUserContent.profile { width: 480px; } .Image.brioBorderRadius img { border-radius: 8px; } .Image.boardMessageRep { height: 50px; width: 50px; } .Image.boardMessageRep img { border-radius: 8px; } .Image.boardMessageRep.normal { height: 60px; width: 60px; } .ImageBlock .left, .ImageBlock .right { display: table-cell; vertical-align: top; } .ImageBlock.selectable.selected > .left { border: 2px solid #bd081c; } .ImageBlock.selectable.selected > .left img, .ImageBlock.selectable.selected > .left .icon { border: 2px solid #fff; margin-left: 1px; } .ImageBlock .left { float: left; margin-right: 10px; overflow: hidden; } .ImageBlock .left.smooth { border-radius: 6px; } .ImageBlock .left.smooth img { border-radius: 6px; } .ImageBlock .left.circle { border: 2px solid transparent; border-radius: 50%; -webkit-transition: border .15s ease-out; transition: border .15s ease-out; } .ImageBlock .left.circle img, .ImageBlock .left.circle .icon { border: 0; border-radius: 50%; box-sizing: border-box; -webkit-transition: border .15s ease-out; transition: border .15s ease-out; } .ImageBlock .left.imageSize_small { margin-right: 5px; } .ImageBlock .left.imageSize_small img, .ImageBlock .left.imageSize_small .icon { font-size: 18px; height: 32px; line-height: 32px; width: 32px; } .ImageBlock .left.imageSize_sendShare { margin-right: 12px; } .ImageBlock .left.imageSize_sendShare img, .ImageBlock .left.imageSize_sendShare .icon { font-size: 18px; height: 32px; line-height: 32px; width: 32px; } .ImageBlock .left.imageSize_sendShareBrio { margin-right: 12px; } .ImageBlock .left.imageSize_sendShareBrio img, .ImageBlock .left.imageSize_sendShareBrio .icon { font-size: 18px; height: 44px; line-height: 44px; width: 44px; } .ImageBlock .left.imageSize_medium { margin-right: 8px; } .ImageBlock .left.imageSize_medium img, .ImageBlock .left.imageSize_medium .icon { font-size: 28px; height: 50px; line-height: 50px; width: 50px; } .ImageBlock .left.imageSize_large { margin-right: 10px; } .ImageBlock .left.imageSize_large img, .ImageBlock .left.imageSize_large .icon { font-size: 36px; height: 75px; line-height: 75px; width: 75px; } .ImageBlock .left .icon { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; background-color: #999; color: #fff; display: block; font-weight: bold; text-align: center; } .ImageBlock .left .icon.primary { background-color: #bd081c; } .ImageBlock .right .imageBlockContentTitle { color: #211922; font-size: 12px; font-weight: bold; } .ImageBlock .right .imageBlockContentBody { font-weight: normal; margin-top: 4px; } .ImageBlock.imageBlockDemo .left em { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -38px -176px no-repeat; display: block; height: 32px; width: 32px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ImageBlock.imageBlockDemo .left em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -35px -139px; background-size: 249px 231px; } } .ImageBlock.sendShareUserContact { display: table-row; height: 32px; } .ImageBlock.sendShareUserContact .left { min-width: 34px; } .ImageBlock.sendShareUserContact .right { height: 32px; vertical-align: middle; width: 100%; } .ImageBlock.sendShareUserContact .right .imageBlockContentTitle { color: #666; font-size: 13px; } .ImageBlock.sendShareUserContact .right .imageBlockContentBody { color: #666; } .ImageBlock.sendShareBrioUserContact { height: 44px; padding: 4px 0; } .ImageBlock.sendShareBrioUserContact .right { height: 44px; vertical-align: middle; } .ImageBlock.sendShareBrioUserContact .right .imageBlockContentTitle { color: #555; font-size: 18px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; width: 235px; } .ImageBlock.sendShareBrioUserContact .right .imageBlockContentBody { color: #b5b5b5; } .ImageCrop .holder { overflow: hidden; height: 300px; margin: 15px; position: relative; } .ImageCrop .spinner { background: url(https://s.pinimg.com/webapp/style/images/spinner-a8ae820b.gif) no-repeat center; bottom: 5px; display: none; height: 30px; left: 0; position: absolute; right: 0; } .ImageCrop .frame { box-shadow: 0 2px 3px rgba(34, 25, 25, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.3); position: absolute; } .ImageCrop .mask { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .ImageCrop .mask span { background: #fcf9f9; opacity: .9; position: absolute; } .ImageCrop .bg { overflow: hidden; left: 0; position: absolute; top: 0; } .ImageCrop .bg img { max-width: none; opacity: .01; -webkit-transition-duration: .4s; transition-duration: .4s; -webkit-transition-property: opacity; transition-property: opacity; } .ImageCrop .bg img.in { opacity: 1; } .ImageCrop .help { left: 0; padding-top: 20px; position: absolute; right: 0; text-align: center; top: 0; } .ImageCrop .drag { background: #fff; bottom: 0; cursor: move; left: 0; opacity: 0; position: absolute; right: 0; top: 0; z-index: 0; } .ImageUploader { background-color: #f3f3f3; background: -webkit-linear-gradient(#ededed, #f9f9f9); background: linear-gradient(#ededed, #f9f9f9); border-radius: 0 0 6px 6px; overflow: hidden; padding: 15px 20px; position: relative; } .ImageUploader.reportBug { background: #fff; padding: 0; } .ImageUploader.loading { min-height: 0; } .ImageUploader .disabled input { display: none; } .ImageUploader.selected { background: #f00; } .ImageUploader .Button.large { float: left; font-size: 13px; margin: -1px; padding: 6px 12px 7px; position: relative; } .ImageUploader div.Button { box-sizing: border-box; text-align: center; } .ImageUploader .hasUploadedImage { cursor: pointer; } .ImageUploader .uploaderProgress { overflow: hidden; border-radius: 0 6px 6px 0; box-shadow: 0 0 4px rgba(0, 0, 0, 0.31) inset; height: 31px; position: relative; top: -1px; } .ImageUploader .uploaderProgress span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; display: block; float: left; font-size: 14px; margin-left: 7px; margin-top: 4px; padding: 3px; } .ImageUploader.didIt { background: none; padding: 0; } .ImageUploader.didIt .uploaderProgress { box-shadow: none; height: inherit; position: absolute; right: 0; } .ImageUploader.didIt .uploaderProgress span { float: none; margin: 0; text-align: center; } .ImageUploader.nextToGestaltmdButton { padding: 3px 0; } .ImportantImage { display: inline-block; height: 136px; margin: 0; width: 136px; } .ImportantImage.newUserFindFriends { margin: 0 7px 40px; } .ImportantImage.nuxModalFindFriends { margin: 0; } .IncrementingNavigateButton.hidden { display: none; } .InlineHoverButton { cursor: pointer; position: absolute; z-index: 3; } .InlineHoverButton.deleteComment, .InlineHoverButton.flagComment { right: 18px; top: 16px; } .InlineHoverButton .buttonText { display: none; } .InlineHoverButton .flagComment > em { width: 13px; height: 14px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -170px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .InlineHoverButton .flagComment > em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -330px; background-size: 428px 427px; } } .InlineHoverButton .flagComment:focus em, .InlineHoverButton .flagComment:active em { width: 13px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -120px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .InlineHoverButton .flagComment:focus em, .InlineHoverButton .flagComment:active em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -286px; background-size: 428px 427px; } } .InlineHoverButton .flagComment em { display: none; } .InlineHoverButton .deleteComment > em { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -347px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .InlineHoverButton .deleteComment > em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -67px -400px; background-size: 428px 427px; } } .InlineHoverButton .deleteComment:focus em, .InlineHoverButton .deleteComment:active em { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -375px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .InlineHoverButton .deleteComment:focus em, .InlineHoverButton .deleteComment:active em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -54px -400px; background-size: 428px 427px; } } .InlineHoverButton .deleteComment em { display: none; } .Input { overflow: hidden; border-top: 1px solid #dfdfdf; padding: 15px 21px 15px 27px; background-color: #f3f3f3; background: -webkit-linear-gradient(#f0f0f0, #f5f5f5); background: linear-gradient(#f0f0f0, #f5f5f5); box-sizing: border-box; width: 100%; border: 1px solid #d6d3ce; border-radius: 3px; color: #333; font-size: 14px; padding: 7px; } .Input:first-child { border: 0; } .Input:focus { background: #fff; } .Input.hasError, .Input.hasWarning { background: #e6abad; border-color: #bd081c; } .Input.disabled { background-color: #f8f8f8; background: -webkit-linear-gradient(#f5f5f5, #fafafa); background: linear-gradient(#f5f5f5, #fafafa); border-color: #dcdcdc; color: #999; cursor: default; } .safari .Input.disabled { background-color: #f8f8f8; } .Input.flat { background: #fff; border: 1px solid #c7c7c7; border-radius: 4px; box-shadow: none; color: #333; font-size: 14px; padding: 7px; } .Input.flat:focus { border-color: #12afe3; outline: none; } .Input.flat:disabled { background-color: #f5f5f5; color: #b9b9b9; } .withCurrencySymbol .Input { border-bottom-left-radius: 0; border-top-left-radius: 0; } .Input.searchInput { padding-right: 30px; } .Input.bottomBorder { border: 0; border-bottom: 1px solid #e3e3e3; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .Input.bottomBorder:focus { border-color: #e3e3e3; } .Input.noBorder { border: 0; } .Input.searchInputRight { padding-left: 30px; } .Input.targetingValueList { border-bottom-left-radius: 0; border-bottom-right-radius: 0; height: 40px; } .Label.ellipsis { overflow: hidden; text-overflow: ellipsis; } .Label .subheading { color: #555; font-size: smaller; font-weight: normal; } .LegacyVideo { max-width: 100%; position: relative; } .LegacyVideo video { border-radius: 8px; display: block; margin: auto; } .MockInterestFollowButton:not(.primary):not(.followed):not(.disabled) .buttonText { color: #bd081c; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .Modal { position: fixed; top: 0; z-index: 751; } .Modal.hide { opacity: 0; } .Modal .modalMask { bottom: 0; left: 0; right: 0; top: 0; background-color: #e2e4e4; opacity: 0.9; position: fixed; } .Modal .modalMask.dark { background-color: #000; opacity: .5; } .Modal .modalMask.shadow { background-color: #000; opacity: .8; } .Modal .modalMask.transparent { background-color: transparent; } .Modal .modalScroller { -webkit-overflow-scrolling: touch; overflow-y: scroll; bottom: 0; left: 0; right: 0; top: 0; position: fixed; } .Modal.absoluteCenter .modalScroller { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; } .Modal .modalContainer { min-height: 0; position: relative; text-align: center; } .Modal.fullScreen .modalContainer { height: 100%; } .Modal.fullScreen .modalContent { display: block; height: 100%; margin-bottom: 0; margin-top: 0; } .Modal.fullScreen .modalModule { height: 100%; } .Modal.fullScreen .modalModule > * { height: 100%; width: 100%; } .Modal.panel .modalContent { background: transparent; box-shadow: none; opacity: 1; } .Modal.panel .modalModule { -webkit-transform: translateZ(0); overflow: hidden; border-radius: 0 5px 5px 0; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); } .Modal.panel .modalContainer { -webkit-transform: translateZ(0); background: transparent; border-radius: 0 5px 5px 0; bottom: 0; box-shadow: none; left: 0; position: fixed; top: 0; visibility: hidden; } .Modal.panel .modalContainer.show { visibility: visible; } .Modal.panel .modalScroller { overflow: hidden; } .Modal.panel .modalMask { opacity: 0; -webkit-transition: opacity .3s; transition: opacity .3s; } .Modal.panel .modalMask.show { opacity: 1; } .Modal.panel.panelRight .modalContainer { left: auto; right: 0; } .Modal .fastFollowModalContainer .closeModal { right: 10px; top: 10px; } .Modal .closeModal { -webkit-transform: translateZ(0); display: none; } .Modal .closeModal.show { display: block; } .Modal .positionModuleElement.modalContainer { display: block; padding-bottom: 0; position: fixed; } .Modal .positionModuleElement.modalContainer .modalContent { margin: 0; } .Modal .mobileModal { margin: auto 3%; } .Modal .modalContent { -webkit-transform: translateZ(0); background: #fff; border-radius: 6px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); display: inline-block; margin: 20px auto; opacity: 0; position: relative; text-align: left; } .Modal .modalContent.addPinToMapWrapper { background: rgba(255, 255, 255, 0.82); } .Modal .modalContent.transparent { background: transparent; box-shadow: none; } .Modal.show .modalContent { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .Modal.registerNux { height: 100%; position: absolute; width: 100%; } .Modal.registerNux .modalMask { background-color: #efefef; opacity: 1; position: absolute; width: 100%; } .Modal.registerNux .modalScroller { position: absolute; width: 100%; } .Modal.registerNux .modalContent { box-shadow: none; width: 100% !important; } .Modal.registerNux .modalContainer { margin: 0 !important; } .Modal.webNewContentNewRepin .modalMask { background-color: #0a0e13; } .Modal.webNewContentNewRepin .modalMask.animateOut { -webkit-transform: translateZ(0); -webkit-animation: fadeOutToTransparentFromEightyPercent .2s ease-out; animation: fadeOutToTransparentFromEightyPercent .2s ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .Modal.webNewContentNewRepin .modalContent { background: transparent; box-shadow: 0 0 12px rgba(0, 0, 0, 0.6); } .Modal.webNewContentNewRepin .modalContent::after { clear: both; content: ""; display: table; } .Modal.webNewContentNewRepin .closeModal { display: none; } .Modal.sterlingPinEditModal .modalContainer { display: -webkit-box; display: -ms-flexbox; display: flex; height: 450px; } .Modal.flashlightModal .modalContainer { width: 100%; } .Modal.flashlightModal .modalMask { background-color: #f6f6f6; opacity: .98; } .Modal.flashlightModal .modalContent { background: transparent; bottom: 0; box-shadow: none; display: block; left: 0; margin: 0; position: absolute; right: 0; top: 0; -webkit-transform: none; transform: none; } .Modal.flashlightModal .closeModal { margin-right: 21px; margin-top: 10px; position: fixed; } .Modal.flashlightModal .closeModal em { width: 17px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Modal.flashlightModal .closeModal em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -88px -375px; background-size: 428px 427px; } } .Modal.flashlightModal .closeModal:hover em, .Modal.flashlightModal .closeModal:active em, .Modal.flashlightModal .closeModal:focus em { width: 17px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -339px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Modal.flashlightModal .closeModal:hover em, .Modal.flashlightModal .closeModal:active em, .Modal.flashlightModal .closeModal:focus em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -70px -375px; background-size: 428px 427px; } } .Modal.flashlightModal .modalScroller { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: initial; flex-direction: initial; } .Modal.homefeedBuilderModal .closeModal { height: 24px; right: 40px; top: 40px; width: 24px; z-index: 11; } .Modal.homefeedBuilderModal .closeModal em { width: 17px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Modal.homefeedBuilderModal .closeModal em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -88px -375px; background-size: 428px 427px; } } .Modal.homefeedBuilderModal .closeModal:hover em, .Modal.homefeedBuilderModal .closeModal:active em, .Modal.homefeedBuilderModal .closeModal:focus em { width: 17px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -339px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Modal.homefeedBuilderModal .closeModal:hover em, .Modal.homefeedBuilderModal .closeModal:active em, .Modal.homefeedBuilderModal .closeModal:focus em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -70px -375px; background-size: 428px 427px; } } .Modal.exploreTabStoryModal .modalContent { border-radius: 16px; } .Modal.exploreTabStoryModal .closeModal { height: 24px; right: 40px; top: 40px; width: 24px; } .Modal.exploreTabStoryModal .closeModal em { width: 17px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Modal.exploreTabStoryModal .closeModal em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -88px -375px; background-size: 428px 427px; } } .Modal.exploreTabStoryModal .closeModal:hover em, .Modal.exploreTabStoryModal .closeModal:active em, .Modal.exploreTabStoryModal .closeModal:focus em { width: 17px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -339px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Modal.exploreTabStoryModal .closeModal:hover em, .Modal.exploreTabStoryModal .closeModal:active em, .Modal.exploreTabStoryModal .closeModal:focus em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -70px -375px; background-size: 428px 427px; } } .Modal.appUpsellModal .closeModal { height: 18px; right: 30px; top: 20px; width: 18px; } .Modal.appUpsellModal .closeModal em { width: 17px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Modal.appUpsellModal .closeModal em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -88px -375px; background-size: 428px 427px; } } .Modal.appUpsellModal .closeModal:hover em, .Modal.appUpsellModal .closeModal:active em, .Modal.appUpsellModal .closeModal:focus em { width: 17px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -339px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Modal.appUpsellModal .closeModal:hover em, .Modal.appUpsellModal .closeModal:active em, .Modal.appUpsellModal .closeModal:focus em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -70px -375px; background-size: 428px 427px; } } .Modal.appUpsellModal .modalMask { top: 64px; } .Modal.appUpsellModal .modalScroller { top: 64px; } .Modal.fullScreenWhiteModal .modalMask { background-color: #fff; } .Modal.fullScreenWhiteModal .modalScroller { overflow-x: auto; overflow-y: hidden; } .Modal.fullScreenWhiteModal .closeModal { position: fixed; right: 14px; top: 18px; z-index: 1000; } .Modal.fullScreenWhiteModal .closeModal em { width: 17px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Modal.fullScreenWhiteModal .closeModal em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -88px -375px; background-size: 428px 427px; } } .Modal.fullScreenWhiteModal .closeModal:hover em, .Modal.fullScreenWhiteModal .closeModal:active em, .Modal.fullScreenWhiteModal .closeModal:focus em { width: 17px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -339px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Modal.fullScreenWhiteModal .closeModal:hover em, .Modal.fullScreenWhiteModal .closeModal:active em, .Modal.fullScreenWhiteModal .closeModal:focus em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -70px -375px; background-size: 428px 427px; } } .Modal.confirmDialogModal { z-index: 1001; } /* desktop.scss */ .Modal .modalMask, .Modal.webNewContentNewRepin .modalMask, .ReactModal__Overlay { background-color: rgba(0, 0, 0, 0.6); opacity: 1; } .Modal.flashlightModal .modalMask { background: #fff; } .Modal .modalContent, .Modal.webNewContentNewRepin .modalContent { border-radius: 8px; box-shadow: none; } .Modal .formFooter, .ReactModal__Content .formFooter { background: #fff; } .Modal.fullScreenWhiteModal .modalMask { background: #fff; } .ModuleCycler .navigation { opacity: 0; position: absolute; -webkit-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; width: 236px; z-index: 101; } .ModuleCycler .navigation .navigator { position: absolute; } .ModuleCycler .navigation .navigator em { cursor: pointer; display: inline-block; margin-top: -24px; } .ModuleCycler .navigation .navigator.disabled { display: none; } .ModuleCycler .navigation .navigator.leftArrow { left: 0; } .ModuleCycler .navigation .navigator.leftArrow em { width: 35px; height: 85px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -339px 0 no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ModuleCycler .navigation .navigator.leftArrow em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -334px 0; background-size: 399px 382px; } } .ModuleCycler .navigation .navigator.rightArrow { right: 0; text-align: right; } .ModuleCycler .navigation .navigator.rightArrow em { width: 35px; height: 85px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -302px 0 no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ModuleCycler .navigation .navigator.rightArrow em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -298px 0; background-size: 399px 382px; } } .MultipleSelectButton { display: inline-block; vertical-align: baseline; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .NavigateButton.linkModuleActionButton.btn.hasText { font-size: 14px; height: 34px; margin-top: 0; } .NavigateButton.inlineBlock { display: inline-block; } .NavigateButton .accessibilityText { font: 0 / 0 serif; text-shadow: none; color: transparent; position: absolute; } /* desktop.scss */ .NavigateButton.borderless.homeUnauthTertiary, .NavigateButton.borderless.homeUnauthTertiaryHorizontal { background: rgba(0, 0, 0, 0.4); border-radius: 6px; bottom: 15px; color: #fff; display: block; font-size: 11px; font-weight: bold; margin-bottom: 6px; max-width: 135px; padding: 4px 7px; text-align: center; } .NavigateButton.borderless.homeUnauthTertiary span, .NavigateButton.borderless.homeUnauthTertiaryHorizontal span { overflow: hidden; text-overflow: ellipsis; display: block; } .NavigateButton.borderless.homeUnauthTertiary:hover, .NavigateButton.borderless.homeUnauthTertiaryHorizontal:hover { background: rgba(0, 0, 0, 0.6); } .UnauthHomePage.inModal .NavigateButton.borderless.homeUnauthTertiary { background: transparent; bottom: 0; color: #333; display: inline; margin-bottom: 0; max-width: 100%; padding-left: 10px; padding-right: 10px; padding-top: 0; } .UnauthHomePage.inModal .NavigateButton.borderless.homeUnauthTertiary span { display: inline; } .UnauthHomePage.inModal .NavigateButton.borderless.homeUnauthTertiary:hover { text-decoration: underline; } .NavigateButton.borderless.homeUnauthTertiaryHorizontal { background: none; display: inline; } .NavigateButton.borderless.homeUnauthTertiaryHorizontal a, .NavigateButton.borderless.homeUnauthTertiaryHorizontal span { display: inline; } .NavigateButton.borderless.homeUnauthTertiaryHorizontal:hover { background: none; } .NavigateButton.loginButton { background: #555; border: 0; color: #fff; display: inline-block; font-size: 14px; font-weight: bold; padding: 10px 20px; text-shadow: none; } .NavigateButton.exploreButton { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #fafafa; background: -webkit-linear-gradient(#fff, #f5f5f5); background: linear-gradient(#fff, #f5f5f5); background-color: #f5f5f5; border: 1px solid #d4d4d4; border-radius: 6px 0 0 6px; box-sizing: border-box; color: #818181; cursor: pointer; display: inline-block; outline: none; position: relative; text-align: left; z-index: 104; background: transparent; border: none; margin-right: 0; vertical-align: middle; } .NavigateButton.exploreButton::after { clear: both; content: ""; display: table; } .NavigateButton.exploreButton:focus, .NavigateButton.exploreButton:hover { background: -webkit-linear-gradient(#fff, #eee); background: linear-gradient(#fff, #eee); border-color: #c0c0c0; border-radius: 6px 0 0 6px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07); z-index: 105; } .NavigateButton.exploreButton:focus .buttonText, .NavigateButton.exploreButton:hover .buttonText { color: #818181; text-shadow: none; } .NavigateButton.exploreButton em { width: 25px; height: 25px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -147px -260px no-repeat; float: left; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NavigateButton.exploreButton em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -144px -256px; background-size: 399px 382px; } } .NavigateButton.exploreButton:hover, .NavigateButton.exploreButton:focus { background: none; box-shadow: none; } .NavigateButton.exploreButton:hover > em { width: 25px; height: 25px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -174px -260px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NavigateButton.exploreButton:hover > em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -170px -256px; background-size: 399px 382px; } } .NavigateButton.labeledNavbarButton { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 4px 0 0; width: 80px; } .NavigateButton.labeledNavbarButton .buttonText { color: #b3b3b3; font-size: 12px; text-align: center; text-shadow: none; } .NavigateButton.labeledNavbarButton em { margin: auto; margin-bottom: 2px; } .NavigateButton.labeledNavbarButton.exploreButton em { margin-bottom: 1px; } .NavigateButton.labeledNavbarButton .accessibilityText { font: 0 / 0 serif; text-shadow: none; color: transparent; position: absolute; } .NavigateButton.labeledNavbarButton:hover svg, .NavigateButton.labeledNavbarButton.active svg { color: #555; } .NavigateButton.labeledNavbarButton:hover .buttonText, .NavigateButton.labeledNavbarButton.active .buttonText { color: #555; } .PagedCollection .moreItemsContainer { text-align: center; } .PagedCollection .moreItemsContainer.loading { position: relative; } .PagedCollection .moreItemsContainer.loading .Button { visibility: hidden; } .PagedCollection .moreItemsContainer.hidden { display: none; } .PagedGrid.forceVerticalScroll::-webkit-scrollbar { height: auto; width: 11px; -webkit-appearance: none; } .PagedGrid.forceVerticalScroll::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.5); border: 2px solid #fff; border-radius: 8px; -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); } .PagedGrid.forceVerticalScroll .fixedHeightLayout { overflow-x: hidden; } .PagedGrid .Grid { margin: 0; } .PagedGrid .moreItems { margin-top: 10px; width: 100%; } .PagedGrid .moreItems.hide { display: none; } .PagedGrid.padItems .moreItemsContainer { margin-left: 7px; margin-right: 7px; } .Picker .createButton { float: right; } .Picker .nameWrapper { overflow: hidden; padding-right: 10px; } .Picker .nameWrapper.withoutCreate { padding-right: 0; } .Picker .name { width: 100%; } .Picker .top { overflow: hidden; margin-bottom: 9px; } .Picker .selectionBody { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; overflow-y: auto; padding-bottom: 7px; } .Picker .itemSection { background: #fff6c4; border-radius: 6px; color: #615e4b; margin-bottom: 3px; padding: 6px 13px; } .Picker .itemSection h2 { font-size: 13px; } .Picker .item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 6px; color: #555; cursor: pointer; padding: 6px 13px; } .Picker .item:hover { background-color: #f7f7f7; } .Picker .selected { background: #bd081c; color: #fff; } .Picker .normalItem, .Picker .createItem .createName, .Picker .createSuggestionItem { font-weight: bold; } .PickerItemCreate .createLabel { font-weight: normal; } .PickerItemCreate.normal .icon { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -38px -176px no-repeat; border-radius: 3px; display: inline-block; margin-right: 10px; vertical-align: middle; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PickerItemCreate.normal .icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -35px -139px; background-size: 249px 231px; } } .PickerItemCreate.pinCreate { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border: 0; color: #555; cursor: pointer; font-size: 16px; font-weight: bold; letter-spacing: -.25px; line-height: 35px; } .PickerItemCreate.pinCreate .icon { width: 36px; height: 36px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) 0 -176px no-repeat; display: block; float: left; margin-right: 12px; vertical-align: middle; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PickerItemCreate.pinCreate .icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -166px -96px; background-size: 249px 231px; } } .PickerItemCreate.pinCreate.createSuggestion { color: #b5b5b5; overflow: hidden; padding: 0 22px; text-overflow: ellipsis; } .PickerItemCreate.pinCreate.createSuggestion:hover { color: #555; } .PickerItemCreate.pinCreate.createSuggestion:hover .icon { width: 20px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -342px -219px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PickerItemCreate.pinCreate.createSuggestion:hover .icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -378px -237px; background-size: 428px 427px; } } .PickerItemCreate.pinCreate.createSuggestion .icon { width: 20px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -68px -418px no-repeat; margin: 9px 20px 9px 9px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PickerItemCreate.pinCreate.createSuggestion .icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -378px -300px; background-size: 428px 427px; } } /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ .PositionModule > .Module { display: none; } .modalPinIntro .positionModuleElement.defaultCaret.positionLeft { z-index: 999999999; } .positionModuleElement { -webkit-transform: translateZ(0); background: #fff; border-radius: 6px; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.07); display: none; position: absolute; z-index: 685; } .positionModuleElement.defaultCaret.positionBottom { margin-top: 11px; } .positionModuleElement.defaultCaret.positionBottom .positionModuleCaret { width: 20px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -135px -265px no-repeat; top: -11px; } .positionModuleElement.defaultCaret.positionLeft { margin-left: -11px; } .positionModuleElement.defaultCaret.positionLeft .positionModuleCaret { width: 11px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -258px -132px no-repeat; right: -10px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .positionModuleElement.defaultCaret.positionLeft .positionModuleCaret { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -234px -37px; background-size: 249px 231px; } } .positionModuleElement.defaultCaret.positionRight { margin-left: 11px; } .positionModuleElement.defaultCaret.positionRight .positionModuleCaret { width: 11px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px -222px no-repeat; left: -10px; } .positionModuleElement.defaultCaret.positionTop { margin-top: -9px; } .positionModuleElement.defaultCaret.positionTop .positionModuleCaret { width: 18px; height: 9px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -149px -86px no-repeat; bottom: -8px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .positionModuleElement.defaultCaret.positionTop .positionModuleCaret { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -19px -222px; background-size: 249px 231px; } } .positionModuleElement.bigCaret.positionBottom { margin-top: 13px; } .positionModuleElement.bigCaret.positionBottom .positionModuleCaret { width: 27px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) 0 -265px no-repeat; top: -13px; } .positionModuleElement.bigCaret.positionLeft { margin-left: -13px; } .positionModuleElement.bigCaret.positionLeft .positionModuleCaret { width: 13px; height: 27px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px -113px no-repeat; right: -12px; } .positionModuleElement.bigCaret.positionRight { margin-left: 13px; } .positionModuleElement.bigCaret.positionRight .positionModuleCaret { width: 13px; height: 27px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px -55px no-repeat; left: -12px; } .positionModuleElement.bigCaret.positionTop { margin-top: -13px; } .positionModuleElement.bigCaret.positionTop .positionModuleCaret { width: 27px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -29px -265px no-repeat; bottom: -12px; } .positionModuleElement.defaultCaret.positionBottom .positionModuleCaret.lightGrayCaretStyle { width: 18px; height: 9px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -189px -86px no-repeat; } .positionModuleElement.defaultCaret.positionLeft .positionModuleCaret.lightGrayCaretStyle { width: 11px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -259px -44px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .positionModuleElement.defaultCaret.positionLeft .positionModuleCaret.lightGrayCaretStyle { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -234px -58px; background-size: 249px 231px; } } .positionModuleElement.defaultCaret.positionRight .positionModuleCaret.lightGrayCaretStyle { width: 9px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px 0 no-repeat; } .positionModuleElement.defaultCaret.positionTop .positionModuleCaret.lightGrayCaretStyle { width: 18px; height: 9px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -169px -86px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .positionModuleElement.defaultCaret.positionTop .positionModuleCaret.lightGrayCaretStyle { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -184px -78px; background-size: 249px 231px; } } .positionModuleElement.bigCaret.positionBottom .positionModuleCaret.lightGrayCaretStyle { width: 27px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -240px -176px no-repeat; } .positionModuleElement.bigCaret.positionLeft .positionModuleCaret.lightGrayCaretStyle { width: 13px; height: 27px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px -26px no-repeat; } .positionModuleElement.bigCaret.positionRight .positionModuleCaret.lightGrayCaretStyle { width: 13px; height: 27px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px -171px no-repeat; } .positionModuleElement.bigCaret.positionTop .positionModuleCaret.lightGrayCaretStyle { width: 27px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -58px -265px no-repeat; } .positionModuleElement.defaultCaret.positionBottom .positionModuleCaret.userEdBlueCaretStyle { width: 36px; height: 22px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -138px -176px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .positionModuleElement.defaultCaret.positionBottom .positionModuleCaret.userEdBlueCaretStyle { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -132px -139px; background-size: 249px 231px; } } .positionModuleElement.defaultCaret.positionLeft .positionModuleCaret.userEdBlueCaretStyle { width: 13px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -40px no-repeat; } .positionModuleElement.defaultCaret.positionRight .positionModuleCaret.userEdBlueCaretStyle { width: 13px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -66px no-repeat; } .positionModuleElement.defaultCaret.positionTop .positionModuleCaret.userEdBlueCaretStyle { width: 24px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -87px -265px no-repeat; } .positionModuleElement.defaultCaret.positionBottom .positionModuleCaret.whiteWashCaretStyle { width: 20px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -113px -265px no-repeat; } .positionModuleElement.defaultCaret.positionLeft .positionModuleCaret.whiteWashCaretStyle { width: 11px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px -200px no-repeat; } .positionModuleElement.defaultCaret.positionRight .positionModuleCaret.whiteWashCaretStyle { width: 11px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -259px -66px no-repeat; } .positionModuleElement.defaultCaret.positionTop .positionModuleCaret.whiteWashCaretStyle { width: 18px; height: 9px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -129px -86px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .positionModuleElement.defaultCaret.positionTop .positionModuleCaret.whiteWashCaretStyle { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: 0 -222px; background-size: 249px 231px; } } .positionModuleElement.bigCaret.positionBottom .positionModuleCaret.whiteWashCaretStyle { width: 27px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -232px -242px no-repeat; } .positionModuleElement.bigCaret.positionLeft .positionModuleCaret.whiteWashCaretStyle { width: 13px; height: 27px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px -84px no-repeat; } .positionModuleElement.bigCaret.positionRight .positionModuleCaret.whiteWashCaretStyle { width: 13px; height: 27px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px -142px no-repeat; } .positionModuleElement.bigCaret.positionTop .positionModuleCaret.whiteWashCaretStyle { width: 27px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -203px -242px no-repeat; } .positionModuleElement.defaultCaret.positionBottom .positionModuleCaret.fpxBlueCaretStyle { width: 20px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -191px -120px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .positionModuleElement.defaultCaret.positionBottom .positionModuleCaret.fpxBlueCaretStyle { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -163px -78px; background-size: 249px 231px; } } .positionModuleElement.defaultCaret.positionLeft .positionModuleCaret.fpxBlueCaretStyle { width: 11px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -259px -88px no-repeat; } .positionModuleElement.defaultCaret.positionRight .positionModuleCaret.fpxBlueCaretStyle { width: 11px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -259px -110px no-repeat; } .positionModuleElement.defaultCaret.positionTop .positionModuleCaret.fpxBlueCaretStyle { width: 20px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -157px -265px no-repeat; } .positionModuleElement.active { display: block; min-height: 50px; min-width: 50px; } .positionModuleElement.positionModuleFixed { position: fixed; z-index: 686; } .positionModuleElement.positionModuleFixed .positionModuleCaret { z-index: 687; } .positionModuleElement.large { min-height: 0; } .positionModuleElement.aboveModal.positionModuleFixed { z-index: 752; } .positionModuleElement.aboveModal.positionModuleFixed .positionModuleCaret { z-index: 753; } .positionModuleElement .positionModuleCaret { position: absolute; z-index: 686; } .positionModuleElement .positionModuleCaret.gsHeaderIntroLastStepCaretStyle { left: 20px !important; } .positionModuleElement > .Module { display: block; } .positionModuleElement.defaultCaret.positionBottom .positionModuleCaret { width: 29px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -237px -296px no-repeat; height: 11px !important; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .positionModuleElement.defaultCaret.positionBottom .positionModuleCaret { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -227px -292px; background-size: 399px 382px; } } .Progress { overflow: hidden; } .Progress li { float: left; margin-right: 4px; } .Progress.hidden { display: none; } .Progress.round li { background: #cfcfcf; border-radius: 8px; font-size: 0; height: 8px; overflow: hidden; text-indent: -9999em; width: 8px; } .Progress.numerical li, .Progress.numericalCheck li { border-radius: 3px; font-weight: bold; height: 24px; line-height: 24px; text-align: center; width: 24px; } .Progress li.active { background: #cd1d1f; color: #fff; } .Progress li.leftRounded { border-radius: 3px 0 0; } .Progress li.rightRounded { border-radius: 0 3px 0 0; } .Progress.numericalCheck li { background-color: #fff; border: 1px solid #ccc; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset; color: #777; height: 28px; line-height: 28px; margin: 0 0 0 7px; position: relative; width: 28px; } .Progress.numericalCheck li .completed { width: 13px; height: 10px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -427px no-repeat; display: none; left: 8px; position: absolute; top: 9px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Progress.numericalCheck li .completed { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -149px -400px; background-size: 428px 427px; } } .Progress.numericalCheck li.active { font: 0 / 0 serif; text-shadow: none; color: transparent; } .Progress.numericalCheck li.active .completed { display: block; } .Progress.bar li { float: left; font-size: 0; height: 10px; margin-right: 0; overflow: hidden; text-align: center; text-indent: -9999em; width: 0; } .Progress.bar li .dot { border-radius: 3px; display: inline-block; height: 3px; margin-top: 3px; width: 3px; } .Progress.bar li.first { border-radius: 3px 0 0; } .Progress.bar li.last { border-radius: 0 3px 0 0; } .Progress.bar li.interest, .Progress.bar li.extension, .Progress.bar li.building_homefeed { background-color: #d9d9d9; } .Progress.bar li.interest .dot, .Progress.bar li.extension .dot, .Progress.bar li.building_homefeed .dot { background-color: #a3a3a3; } .Progress.bar li.interest.active, .Progress.bar li.extension.active, .Progress.bar li.building_homefeed.active { background-color: #cb2027; } .Progress.bar li.interest.active .dot, .Progress.bar li.extension.active .dot, .Progress.bar li.building_homefeed.active .dot { background-color: #7a1317; } .Progress.bar li.facebook { background-color: #b2b2b2; } .Progress.bar li.facebook .dot { background-color: #fff; } .Progress.bar li.facebook.active { background-color: #3c5b9b; } .Progress.bar li.facebook.active .dot { background-color: #fff; } .Progress.bar li.twitter { background-color: #b2b2b2; } .Progress.bar li.twitter .dot { background-color: #fff; } .Progress.bar li.twitter.active { background-color: #5fa9dd; } .Progress.bar li.twitter.active .dot { background-color: #fff; } .ProgressMinistep { float: left; } .RadioButton { display: inline-block; vertical-align: middle; } .RadioButton.fancy { width: 21px; height: 21px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -69px -242px no-repeat; position: relative; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .RadioButton.fancy { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -208px -70px; background-size: 249px 231px; } } .RadioButton.fancy.fancySelected { width: 21px; height: 21px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -23px -242px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .RadioButton.fancy.fancySelected { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -208px -48px; background-size: 249px 231px; } } .RadioButton.fancy input { height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; } .Dropdown .RadioGroup { min-width: 0; } .Dropdown .RadioGroup li:first-child { border-radius: 6px 6px 0 0; } .Dropdown .RadioGroup li:last-child { border-radius: 0 0 6px 6px; } .Dropdown .RadioGroup li:hover { background-color: #eee; } .RadioGroup.noRadioButtons li label { padding: 15px 30px 15px 10px; } .RadioGroup.noRadioButtons li label .labelContent { margin-left: 0; } .RadioGroup.noRadioButtons .RadioButton { display: none; } .RadioGroup.paginatedTableControl { max-height: 264px; overflow-y: scroll; } .SearchForm { position: relative; text-align: left; width: 194px; } .SearchForm.guided { /* stylelint-disable-next-line at-rule-no-unknown */ /* Fix for Chrome 44 bug: https://code.google.com/p/chromium/issues/detail?id=506893 */ box-sizing: border-box; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; height: auto; min-height: 0; /* 1 */ min-width: 0; /* 1 */ width: auto; } .SearchForm.guided.buttonOnRight { margin-right: 0; } .SearchForm.guided.buttonOnRight.tutorialHighlight { border-left: 1px solid #d4d4d4; border-radius: 0; border-right: 1px solid #d4d4d4; height: 34px !important; margin: 0 !important; } .SearchForm.guided.openSearch { display: block; height: auto; margin-left: 10px; margin-top: 0; overflow: visible; width: 194px; } .SearchForm.fit { max-width: auto; } .SearchForm.fit .TypeaheadField { width: 100%; } .SearchForm.gigantic { width: 100%; } .SearchForm.gigantic .TypeaheadField { width: 92%; } .SearchForm.gigantic .submit { width: 30px; height: 30px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -202px -384px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; right: 10px; top: 12px; z-index: 667; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SearchForm.gigantic .submit { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -318px -342px; background-size: 428px 427px; } } .SearchForm.gigantic .submit:hover { width: 30px; height: 30px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -234px -384px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SearchForm.gigantic .submit:hover { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -287px -342px; background-size: 428px 427px; } } .SearchForm.gigantic.ignition { color: #151515; font-size: 21px; margin: 0 auto; width: 736px; } .SearchForm.gigantic.ignition .TypeaheadField { width: 100%; } .SearchForm.gigantic.ignition input { padding-left: 50px; } .SearchForm.gigantic.ignition .submit { width: 27px; height: 26px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px -344px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; left: 12px; top: 15px; z-index: 667; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SearchForm.gigantic.ignition .submit { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -216px -201px; background-size: 428px 427px; } } .SearchForm .TypeaheadField { float: left; width: 194px; } .SearchForm .TypeaheadField.guided { display: block; float: none; width: 100%; } .SearchForm .submit { width: 16px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -190px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; background-color: transparent; border: 0; position: absolute; right: 9px; top: 7px; z-index: 671; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SearchForm .submit { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -173px -201px; background-size: 249px 231px; } } .SearchForm .submit.newSearchForm { display: none; } .SearchForm .submit:hover { width: 16px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -209px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SearchForm .submit:hover { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -156px -201px; background-size: 249px 231px; } } .SearchForm.drawerNav { box-sizing: border-box; height: 34px; } .SearchForm.drawerNav .tokenizedInputWrapper { background-color: #f0f0f0; border-color: #d9d9d9; } .SearchForm.drawerNav .TypeaheadField.drawerNav { width: 100%; } .SelectButton { display: inline-block; vertical-align: baseline; } .SelectList { -webkit-overflow-scrolling: touch; overflow-y: scroll; position: relative; } .SelectList .hidden { display: none; } .SelectList.compact:focus { background-color: rgba(255, 255, 255, 0.4); } .SelectList.compact .sectionHeading { background: #fff6c4; border-radius: 6px; color: #615e4b; margin-bottom: 3px; padding: 6px 13px; } .SelectList.compact .item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 3px; color: #333; cursor: pointer; font-weight: bold; padding: 6px 13px; } .SelectList.compact .item:hover { background-color: #ebe8e8; } .SelectList.compact .item.selected { background: #bd081c; color: #fff; } .SelectList.normal .sections { background: #fff; border-radius: 3px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18); margin: 10px; } .SelectList.normal li { border-bottom: 1px solid #e3e3e3; } .SelectList.normal .sectionHeading { color: #717171; font-weight: normal; padding: 10px; } .SelectList.normal .item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 6px; color: #333; cursor: pointer; font-weight: bold; padding: 10px; } .SelectList.normal .item:hover { background-color: #ebe8e8; } .SelectList.normal .item.selected { background: #bd081c; } .SelectList.normal.sterlingList { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; font-size: 14px; width: 300px; } .SelectList.normal.sterlingList.halfSizePicker { width: 146px; } .SelectList.normal.sterlingList.adGroupList { width: 356px; } .SelectList.normal.sterlingList.sterlingListNoFilter { border-radius: 6px; } .SelectList.normal.sterlingList.sterlingListNoFilter .sectionItems li.item { font-weight: bold; } .SelectList.normal.sterlingList .sectionItems { box-shadow: none; } .SelectList.normal.sterlingList .sectionItems li.item { border-bottom: 0; border-radius: 0; border-top: 1px solid #eee; font-weight: normal; padding: 8.5px 10px; } .SelectList.normal.sterlingList .sectionItems li.item.selected { background: #ddd; color: #333; } .SelectList.normal.sterlingList .sections { margin: 0; } .SelectList.normal.sterlingList .section:not(:first-child) li.item { padding: 16.5px 10px; } .SelectList.normal.sterlingList .sectionItems .item { background-color: #fff; font-weight: normal; } .SocialTypeaheadField.socialSearchDemo { width: 300px; } .SocialTypeaheadField.sendShare, .SocialTypeaheadField.sendShareBrio { display: block; } .SocialTypeaheadField.sendShare.flex, .SocialTypeaheadField.sendShareBrio.flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; } .SocialTypeaheadField.sendShare.compact .searchIconInputWrapper, .SocialTypeaheadField.sendShareBrio.compact .searchIconInputWrapper { padding: 4px 8px; } .SocialTypeaheadField.sendShare.compact .searchIconInputWrapper > input, .SocialTypeaheadField.sendShareBrio.compact .searchIconInputWrapper > input { border-radius: 3px; padding-bottom: 8px; padding-top: 8px; } .SocialTypeaheadField.sendShare.compact .searchIcon, .SocialTypeaheadField.sendShareBrio.compact .searchIcon { margin: 7px; } .SocialTypeaheadField.sendShare input, .SocialTypeaheadField.sendShareBrio input { background: #efefef; border-bottom: 0; border-radius: 3px; font-size: 18px; font-weight: bold; } .SocialTypeaheadField.sendShare input:focus, .SocialTypeaheadField.sendShareBrio input:focus { background: #efefef; outline: none; } .SocialTypeaheadField.sendShare input { padding-left: 44px; } .SocialTypeaheadField.sendShare .searchIconInputWrapper { border-bottom: 1px solid #ddd; padding: 10px; } .SocialTypeaheadField.sendShare .searchIcon { width: 18px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -238px -418px no-repeat; margin: 12px; position: absolute; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialTypeaheadField.sendShare .searchIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -15px -375px; background-size: 428px 427px; } } .SocialTypeaheadField.sendShareBrio input { padding-left: 56px; } .SocialTypeaheadField.sendShareBrio .searchIconInputWrapper { padding: 20px 20px 16px; } .SocialTypeaheadField.sendShareBrio .searchIcon { width: 18px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -238px -418px no-repeat; margin: 11px 13px; position: absolute; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialTypeaheadField.sendShareBrio .searchIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -15px -375px; background-size: 428px 427px; } } .SocialTypeaheadField.sendShareBrio .userCircleAvatar .left, .SocialTypeaheadField.sendShareBrio .connectCta .left { margin-right: 12px; } .SocialTypeaheadField.sendShareBrio .userCircleAvatar .right, .SocialTypeaheadField.sendShareBrio .connectCta .right { padding-top: 5px; } .SocialTypeaheadField.sendShareBrio .userCircleAvatar .right .title, .SocialTypeaheadField.sendShareBrio .connectCta .right .title { color: #555; font-size: 18px; line-height: 20px; } .SocialTypeaheadField.sendShareBrio .userCircleAvatar img, .SocialTypeaheadField.sendShareBrio .connectCta img { width: 44px; } .Tabs .header { display: table; table-layout: fixed; text-align: center; } .Tabs .header li { cursor: pointer; display: table-cell; width: 1%; } .Tabs.default .header { background-color: #ececec; background: -webkit-linear-gradient(#f3f3f3, #e5e5e5); background: linear-gradient(#f3f3f3, #e5e5e5); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); clear: both; color: #333; height: 44px; line-height: 44px; margin-bottom: 2px; max-width: 10000px; position: relative; } .Tabs.default .header .headerText { color: #555; font-size: 16px; font-weight: normal; padding: 0 26px 0 13px; } .Tabs.default .header li:not(:first-child) { border-left: 1px solid #cdcdcd; } .Tabs.default .header .tabName { box-shadow: 0 0 1px rgba(255, 255, 255, 0.9) inset; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); color: #777; display: block; font-weight: bold; padding: 1px 20px 0 0; } .Tabs.default .header .tabName:not(.disabled):focus, .Tabs.default .header .tabName:not(.disabled):hover, .Tabs.default .header .tabName.active { background-color: #fafafa; background: -webkit-linear-gradient(#fff, #f4f4f4); background: linear-gradient(#fff, #f4f4f4); color: #333; } .Tabs.default .header .tabName:active { background: url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowLeftSide-5cbf77e0.png) repeat-y left top, url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowRightSide-96a21610.png) repeat-y right top, -webkit-linear-gradient(#fff, #f4f4f4); background: url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowLeftSide-5cbf77e0.png) repeat-y left top, url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowRightSide-96a21610.png) repeat-y right top, linear-gradient(#fff, #f4f4f4); color: #000; } .Tabs.vertical .header { background-color: #ececec; background: -webkit-linear-gradient(#f3f3f3, #e5e5e5); background: linear-gradient(#f3f3f3, #e5e5e5); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); clear: both; color: #333; height: 44px; line-height: 44px; margin-bottom: 2px; max-width: 10000px; position: relative; float: left; margin-right: 24px; } .Tabs.vertical .header .headerText { color: #555; font-size: 16px; font-weight: normal; padding: 0 26px 0 13px; } .Tabs.vertical .header li { display: table-row; } .Tabs.vertical .header li:hover { border-left: 2px solid #cdcdcd; } .Tabs.vertical .header .tabName { box-shadow: 0 0 1px rgba(255, 255, 255, 0.9) inset; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); color: #777; display: block; font-weight: bold; padding: 0 20px; } .Tabs.vertical .header .tabName:not(.disabled):focus, .Tabs.vertical .header .tabName:not(.disabled):hover, .Tabs.vertical .header .tabName.active { background-color: #fafafa; background: -webkit-linear-gradient(#fff, #f4f4f4); background: linear-gradient(#fff, #f4f4f4); color: #333; } .Tabs.vertical .header .tabName:active { background: url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowLeftSide-5cbf77e0.png) repeat-y left top, url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowRightSide-96a21610.png) repeat-y right top, -webkit-linear-gradient(#fff, #f4f4f4); background: url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowLeftSide-5cbf77e0.png) repeat-y left top, url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowRightSide-96a21610.png) repeat-y right top, linear-gradient(#fff, #f4f4f4); color: #000; } .Tabs.vertical .content { display: inline-block; } .Tabs.inviterTabs .header { background-color: #ececec; background: -webkit-linear-gradient(#f3f3f3, #e5e5e5); background: linear-gradient(#f3f3f3, #e5e5e5); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); clear: both; color: #333; height: 44px; line-height: 44px; margin-bottom: 2px; max-width: 10000px; position: relative; } .Tabs.inviterTabs .header .headerText { color: #555; font-size: 16px; font-weight: normal; padding: 0 26px 0 13px; } .Tabs.inviterTabs .header li:not(:first-child) { border-left: 1px solid #cdcdcd; } .Tabs.inviterTabs .header .tabName { box-shadow: 0 0 1px rgba(255, 255, 255, 0.9) inset; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); color: #777; display: block; font-weight: bold; } .Tabs.inviterTabs .header .tabName:not(.disabled):focus, .Tabs.inviterTabs .header .tabName:not(.disabled):hover, .Tabs.inviterTabs .header .tabName.active { background-color: #fafafa; background: -webkit-linear-gradient(#fff, #f4f4f4); background: linear-gradient(#fff, #f4f4f4); color: #333; } .Tabs.inviterTabs .header .tabName:active { background: url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowLeftSide-5cbf77e0.png) repeat-y left top, url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowRightSide-96a21610.png) repeat-y right top, -webkit-linear-gradient(#fff, #f4f4f4); background: url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowLeftSide-5cbf77e0.png) repeat-y left top, url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowRightSide-96a21610.png) repeat-y right top, linear-gradient(#fff, #f4f4f4); color: #000; } .Tabs.colored { border: 1px solid #eee; border-radius: 3px; } .Tabs.colored .tabName { background: #fbfbfb; border-bottom: 1px solid #eee; border-right: 1px solid #eee; border-top: 3px solid transparent; color: #666; font-weight: bold; height: 56px; line-height: 56px; } .Tabs.colored .tabName.active { background: #fff; border-bottom-color: transparent; border-top-color: inherit; border-top-left-radius: 3px; border-top-right-radius: 3px; color: inherit; } .Tabs.colored .tab:last-child .tabName { border-right: 0; } .TextContainer { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; margin: 15px; } .TextContainer.textHeader { font-size: 16px; font-weight: bold; margin: 0; } .TextContainer.textHeader > p { word-wrap: break-word; } .TextField textarea.detailed, .TextField textarea.detailed:focus { border: 0; box-shadow: none; color: #555; } .TextField textarea.detailed.content, .TextField textarea.detailed:focus.content { padding: 10px; } .TextField .content { border-radius: 3px; min-height: 1em; padding: 8px; width: 100%; word-wrap: break-word; } .TextField .content.flat { background: #fff; border: 1px solid #c7c7c7; border-radius: 4px; box-shadow: none; color: #333; font-size: 14px; padding: 7px; } .TextField .content.pinCreateDescription { padding: 0; } .TextField .content.autogrow { overflow: hidden; } .TextField .content.autogrow.maxheight { overflow-y: scroll; } .TextField .content.brioFlat { background: #efefef; border: 0; border-radius: 4px; box-shadow: none; min-height: 90px; outline: none; resize: vertical; } .TextField .content.brioFlat:focus { background: #fff; border: 1px solid #efefef; } .TextField .invisibleElemContainer { bottom: -1000px; height: 0; position: fixed; right: -1000px; width: 0; } .TextField .invisibleElemContainer .invisibleElem { overflow: hidden; position: absolute; visibility: hidden; } .TextField.error .content { background: #e6abad; border: 1px solid #bd081c; } .TextField.hasValue .brioFlat { background: #fff; border: 1px solid #efefef; font-weight: bold; } /* Code for the at-who lib */ .at-view { -webkit-transform: translateZ(0); z-index: 802; } .at-view ul { background: #fff; border-radius: 3px; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25); cursor: pointer; list-style-type: none; max-width: 300px; } .at-view ul li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #777; font-size: 13px; font-weight: normal; padding: 4px; white-space: nowrap; } .at-view ul li img { border-radius: 3px; height: 30px; margin-right: 2px; width: 30px; } .at-view ul li .username { color: #000; font-weight: 500; } .at-view ul li.cur { background-color: #eee; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .TwoPaneModal { background: #d9d9d9; border-radius: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } .TwoPaneModal::after { clear: both; content: ""; display: table; } .TwoPaneModal .twoPaneClose { padding: 10px; position: absolute; z-index: 2; } .TwoPaneModal .pane { height: inherit; overflow: hidden; } .TwoPaneModal .pane .animateIn { -webkit-animation: slideLeftIn 150ms ease-out forwards; animation: slideLeftIn 150ms ease-out forwards; } .TwoPaneModal .pane .animateOut { -webkit-animation: slideRightOut 150ms ease-out forwards; animation: slideRightOut 150ms ease-out forwards; } .TwoPaneModal .pane.right { position: relative; } /* desktop.scss */ .TwoPaneModal { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; max-height: 660px; min-height: 490px; width: 660px; } .TwoPaneModal .twoPaneClose { padding: 10px; right: 14px; top: 18px; } .TwoPaneModal .pane { bottom: 0; top: 0; width: 50%; } .TwoPaneModal .left.pane { border-radius: 6px 0 0 6px; } .TwoPaneModal .right.pane { background-color: #fff; border-radius: 0 6px 6px 0; } .Typeahead { background: #fff; border-radius: 6px; display: none; left: 0; right: 0; -webkit-transition: opacity .25s linear; transition: opacity .25s linear; z-index: -1; } .Typeahead li:first-child { padding-top: 10px !important; } .Typeahead.flexible { overflow-y: auto; z-index: 0; } .Typeahead.typeaheadWithTitles { padding-bottom: 5px; } .Typeahead.typeaheadWithTitles li a { color: #4a4a4a; font-size: 16px; padding: 6px 15px; } .Typeahead.typeaheadWithTitles li a:hover { color: #4a4a4a; } .Typeahead.typeaheadWithTitles li a.titleItem { color: #999; font-size: 10px; line-height: 12px; margin-top: 5px; } .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName { /* stylelint-disable-next-line at-rule-no-unknown */ color: #555; font-weight: normal; } .Typeahead.typeaheadWithTitles li a.clearRecentItem { color: #ddd; font-size: 12px; } .Typeahead.typeaheadWithTitles li a.clearRecentItem:hover { color: #777; } .Typeahead.typeaheadWithTitles li a.trending-1 { color: #555; } .Typeahead.typeaheadWithTitles li a.trending-2 { color: #666; } .Typeahead.typeaheadWithTitles li a.trending-3 { color: #757575; } .Typeahead.typeaheadWithTitles li a.trending-4 { color: #838383; } .Typeahead.typeaheadWithTitles li a.trending-5 { color: #909090; } .Typeahead.typeaheadWithTitles li a.trending-6 { color: #9f9f9f; } .Typeahead.typeaheadWithTitles li a.trending-7 { color: #acacac; } .Typeahead.typeaheadWithTitles .chevron { width: 9px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -268px no-repeat; float: right; margin: 3px 0 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead.typeaheadWithTitles .chevron { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -389px -14px; background-size: 399px 382px; } } .Typeahead.open { -webkit-animation: fadeIn .2s ease-out; animation: fadeIn .2s ease-out; display: block; opacity: 1; } .Typeahead.expanded { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: transparent; border: 0; box-shadow: none; max-width: 1000px; } .Typeahead.expanded .results ul { float: left; width: 33.3%; } .Typeahead.expanded .cancelButton { color: #fff; font-size: 32px; font-weight: 400; position: absolute; right: 20px; top: 30px; } .Typeahead.expanded.open { -webkit-animation: none; animation: none; } .Typeahead.expanded.showRecentQueries .recentQueriesHeader { display: block; } .Typeahead.expanded .recentQueriesHeader { display: none; padding-top: 20px; } .Typeahead.expanded .recentQueriesHeader .title { color: #fff; font-size: 18px; font-weight: 500; padding-left: 10px; } .Typeahead.expanded .recentQueriesHeader hr { background-color: rgba(255, 255, 255, 0.18); height: 1px; margin-top: 25px; } .Typeahead.expanded li:first-child, .Typeahead.expanded li:last-child { padding: 0; } .Typeahead.expanded li a { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; border-radius: 6px; color: #b9b9b9; font-size: 16px; font-weight: 500; padding: 15px 10px; } .Typeahead.expanded li a.recentQuery, .Typeahead.expanded li a.searchMore { padding: 20px 10px; } .Typeahead.expanded li a.searchMore { font-size: 18px; } .Typeahead.expanded li a .typeaheadSearchIcon em { width: 14px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px 0 no-repeat; float: left; margin-right: 10px; margin-top: 4px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead.expanded li a .typeaheadSearchIcon em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -173px; background-size: 428px 427px; } } .Typeahead.expanded li a .typeaheadScope { color: #fff; } .Typeahead.expanded li.highlighted a, .Typeahead.expanded li a:hover { background-color: #262626; color: #fff; font-size: 16px; font-weight: 500; padding: 15px 10px; } .Typeahead.expanded li.highlighted a.recentQuery, .Typeahead.expanded li.highlighted a.searchMore, .Typeahead.expanded li a:hover.recentQuery, .Typeahead.expanded li a:hover.searchMore { padding: 20px 10px; } .Typeahead.expanded li.highlighted a.searchMore, .Typeahead.expanded li a:hover.searchMore { font-size: 18px; } .Typeahead.expanded li hr { background-color: rgba(255, 255, 255, 0.18); height: 1px; margin: 5px; } .Typeahead li { overflow: hidden; color: #777; display: block; font-size: 12px; position: relative; } .Typeahead li:first-child { padding-top: 5px; } .Typeahead li:last-child { padding-bottom: 5px; } .Typeahead li a { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-weight: bold; color: #777; cursor: pointer; display: block; padding: 9px 14px; } .Typeahead li a:hover { background: #f1f1f1; color: #333; } .Typeahead li a:active { background: #eaeaea; } .Typeahead li a { overflow: hidden; padding: 6px 10px; white-space: nowrap; } .Typeahead li.highlighted a { background: rgba(0, 0, 0, 0.08); color: #333; } .Typeahead li:hover .remove { display: inline; } .Typeahead li .user, .Typeahead li .board { text-overflow: ellipsis; } .Typeahead li .user .typeaheadName, .Typeahead li .board .typeaheadName { box-sizing: border-box; margin-left: -43px; padding-left: 43px; } .Typeahead li .user .sublabel, .Typeahead li .user .label, .Typeahead li .board .sublabel, .Typeahead li .board .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .Typeahead li .user .subLabel, .Typeahead li .board .subLabel { color: #999; font-size: 10px; font-weight: normal; } .Typeahead.advanced li:first-child { padding-top: 0; } .Typeahead .results li:first-child .breakLine { border-top: 0; } .Typeahead .results .sectionHeader { background: #f1f1f1; cursor: default; } .Typeahead .typeaheadImg { position: relative; display: inline-block; margin-right: 5px; vertical-align: middle; width: 38px; } .Typeahead .typeaheadImg::after { border-radius: 2px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.9) inset; content: " "; height: 38px; left: 0; position: absolute; top: 0; width: 38px; } .Typeahead .typeaheadImg img { border-radius: 2px; height: 38px; width: 38px; } .Typeahead .myPins { color: #bd081c; } .Typeahead .remove { width: 8px; height: 8px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px -47px no-repeat; font: 0 / 0 serif; text-shadow: none; color: transparent; border: 0; cursor: pointer; display: none; float: right; margin-top: 4px; padding: 0; position: absolute; right: 15px; top: 8px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead .remove { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -222px -201px; background-size: 249px 231px; } } .Typeahead.gigantic li { font-size: 16px; } .Typeahead.gigantic li a { font-weight: normal; } .Typeahead .hintWrapper { border-bottom: 1px solid #eee; font-size: 13px; padding-left: 12px; padding-right: 12px; } .Typeahead .hintWrapper .hint { color: #333; } .Typeahead .hintWrapper .highlighted { color: #bd081c; } .Typeahead.addPlaceToPinForm { margin-bottom: 14px; } .Typeahead.addPlaceToPinForm li:first-child { padding-top: 0; } .Typeahead.addPlaceToPinForm li:last-child { padding-bottom: 0; } .Typeahead.addPlaceToPinForm li a { border-bottom: 1px solid #eaeaea; padding-bottom: 14px; padding-top: 14px; } .Typeahead.addPlaceToPinForm li .addToMap { float: right; visibility: hidden; } .Typeahead.addPlaceToPinForm li .addToMap p { margin: 0; } .Typeahead.addPlaceToPinForm li.highlighted .addToMap, .Typeahead.addPlaceToPinForm li:hover .addToMap { visibility: visible; } .Typeahead.addPlaceToPinForm li.highlighted a, .Typeahead.addPlaceToPinForm li a:hover { background: #f1f1f1 !important; } .Typeahead.addPlaceToPinForm li:focus { background: #fff; } .Typeahead.addPlaceToPinForm li .typeaheadResultMetaData { clear: both; color: #999; float: left; font-size: 13px; font-weight: normal; margin: 1px 0 0; } .Typeahead.addPlaceToPinForm li .typeaheadResultMetaData:first-child { margin-top: 13px; } .Typeahead.addPlaceToPinForm li .typeaheadResultMetaData, .Typeahead.addPlaceToPinForm li .typeaheadResultEmphasized { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 336px; } .Typeahead.addPlaceToPinForm li .typeaheadResultEmphasized { color: #666; float: left; font-size: 13px; } .Typeahead.userSelect { background: #fff; border-radius: 0 0 6px 6px; border-top: 1px solid #ccc; box-shadow: none; margin: 0; position: absolute; text-align: left; } .Typeahead.userSelect .highlighted a, .Typeahead.userSelect a:hover, .Typeahead.userSelect .socialConnectItem:hover { background: #f1f1f1; } .Typeahead.userSelect a:active { background: #eaeaea; } .Typeahead.userSelect .useEmail .typeaheadImg { position: relative; } .Typeahead.userSelect .useEmail .typeaheadImg::after { border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3) inset; content: " "; height: 38px; left: 0; position: absolute; top: 0; width: 38px; } .Typeahead.userSelect .useEmail .typeaheadImg img { border-radius: 3px; height: 38px; width: 38px; } .Typeahead.userSelect li { border-bottom: 1px solid #e5e5e5; } .Typeahead.userSelect li:first-child, .Typeahead.userSelect li:last-child { padding-bottom: 0; padding-top: 0; } .Typeahead.userSelect li:last-child { border-bottom: 0; } .Typeahead.userSelect li a, .Typeahead.userSelect li .socialConnectItem { padding: 10px 14px; } .Typeahead.userSelect .typeaheadImg { float: left; margin-right: 12px; } .Typeahead.userSelect p { margin: 0; } .Typeahead.userSelect .typeaheadName { color: #000; font-size: 13px; margin-bottom: 2px; margin-top: 6px; } .Typeahead.userSelect .titleWrapper { font-size: 11px; } .Typeahead.userSelect .titleWrapper .title { display: inline-block; margin-left: 5px; } .Typeahead.userSelect .titleIcon { width: 11px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -107px -442px no-repeat; display: inline-block; float: left; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead.userSelect .titleIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: 0 -416px; background-size: 428px 427px; } } .Typeahead.userSelect .titleIcon.isPinner { width: 11px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -439px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead.userSelect .titleIcon.isPinner { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -12px -416px; background-size: 428px 427px; } } .Typeahead.userSelect .titleIcon.isFacebook { width: 10px; height: 10px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -223px -206px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead.userSelect .titleIcon.isFacebook { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px -39px; background-size: 428px 427px; } } .Typeahead.userSelect .titleIcon.isGplus { width: 10px; height: 10px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -452px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead.userSelect .titleIcon.isGplus { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px -28px; background-size: 428px 427px; } } .Typeahead.userSelect .title { font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; color: #666; font-weight: normal; margin-left: 16px; position: relative; top: -1px; } .Typeahead.userSelect .collaboratorInviterTypeahead { padding: 7px; width: 100%; } .Typeahead.userSelect .collaboratorInviterTypeaheadCustom { height: 230px; } .Typeahead.addPinToMap.hidden { display: none; } .Typeahead.addPinToMap li:first-child { padding-top: 0; } .Typeahead.addPinToMap li:last-child { padding-bottom: 0; } .Typeahead.addPinToMap li a { border-bottom: 1px solid #eaeaea; padding-bottom: 21px; padding-top: 21px; } .Typeahead.addPinToMap li .addToMap { float: right; visibility: hidden; } .Typeahead.addPinToMap li .addToMap p { margin: 0; padding-left: 14px; padding-right: 14px; width: auto; } .Typeahead.addPinToMap li.highlighted .addToMap, .Typeahead.addPinToMap li:hover .addToMap { visibility: visible; } .Typeahead.addPinToMap li.highlighted a, .Typeahead.addPinToMap li a:hover { background: #f1f1f1 !important; } .Typeahead.addPinToMap li:focus { background: #fff; } .Typeahead.addPinToMap li .typeaheadResultMetaData { clear: both; color: #9a9a9a; float: left; font-size: 13px; margin: 0; margin-bottom: 0; margin-top: -10px; } .Typeahead.addPinToMap li .typeaheadResultMetaData:first-child { margin-top: 13px; } .Typeahead.addPinToMap li .typeaheadResultMetaData, .Typeahead.addPinToMap li .typeaheadResultEmphasized { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 390px; } .Typeahead.addPinToMap li .typeaheadResultEmphasized { color: #333; float: left; font-size: 16px; } .Typeahead.interestsTypeaheadItem .typeaheadImg { float: left; } .Typeahead.interestsTypeaheadItem .typeaheadSummary { float: left; margin-top: 3px; } .Typeahead.interestsTypeaheadItem .typeaheadSummary .typeaheadName { color: #000; font-size: 15px; font-weight: bold; margin-bottom: 2px; } .Typeahead.interestsTypeaheadItem .typeaheadSummary .typeaheadStats .numPinnersIcon { width: 14px; height: 10px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -403px no-repeat; float: left; margin-right: 3px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead.interestsTypeaheadItem .typeaheadSummary .typeaheadStats .numPinnersIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -134px -400px; background-size: 428px 427px; } } .Typeahead.interestsTypeaheadItem .typeaheadSummary .typeaheadStats .numPinnersStat { float: left; font-size: 11px; font-weight: normal; } .Typeahead.interestsTypeaheadItem .plusIcon { width: 16px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -331px -418px no-repeat; float: right; margin-top: 10px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead.interestsTypeaheadItem .plusIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -140px -375px; background-size: 428px 427px; } } .Typeahead.userCircleSelect.compact > ul > li { border-bottom: 0; } .Typeahead.userCircleSelect.compact > ul > li a { padding: 4px 8px; } .Typeahead.userCircleSelect li { border-bottom: 1px solid #e7e7e7; } .Typeahead.userCircleSelect li:last-child { border-bottom: 0; } .Typeahead.userCircleSelect li a { padding: 10px; } .Typeahead.userCircleSelect li.highlighted a { background-color: #eeeeee; } .Typeahead.userCircleSelect li.selected .userCircleAvatar .left { border: 2px solid #bd081c; } .Typeahead.userCircleSelect li.selected .userCircleAvatar .left img { border: 2px solid #fff; } .Typeahead.sendShareUserCircleSelect li { border: 0; padding: 0; } .Typeahead.sendShareUserCircleSelect li a { padding: 4px 20px; } .Typeahead.sendShareUserCircleSelect li.highlighted a { background-color: #eeeeee; } .Typeahead .userCircleAvatar, .Typeahead .sendToEmail, .Typeahead .connectCta, .Typeahead .socialConnect { display: table; width: 100%; } .Typeahead .userCircleAvatar .left, .Typeahead .sendToEmail .left, .Typeahead .connectCta .left, .Typeahead .socialConnect .left { display: table-cell; } .Typeahead .userCircleAvatar .right, .Typeahead .sendToEmail .right, .Typeahead .connectCta .right, .Typeahead .socialConnect .right { display: table-cell; vertical-align: middle; width: 100%; } .Typeahead .userCircleAvatar .left { border: 2px solid transparent; border-radius: 50%; min-width: 34px; -webkit-transition: border .15s ease-out; transition: border .15s ease-out; } .Typeahead .userCircleAvatar .left img { border: 0; box-sizing: border-box; -webkit-transition: border .15s ease-out; transition: border .15s ease-out; } .Typeahead .userCircleAvatar .right { padding-left: 10px; } .Typeahead .userCircleAvatar .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; font-weight: bold; margin: 1px 0; } .Typeahead .userCircleAvatar .subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #b7b7b7; font-weight: normal; margin: 2px 0 0; } .Typeahead .userCircleAvatar img { border-radius: 50%; width: 34px; } .Typeahead .sendToEmail.unclickable a { cursor: default; } .Typeahead .sendToEmail .left { padding-right: 10px; } .Typeahead .sendToEmail .left .icon { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; background-color: #999; border-radius: 50%; color: #fff; font-size: 20px; font-weight: bold; height: 33px; line-height: 33px; margin-top: 1px; text-align: center; width: 33px; } .Typeahead .sendToEmail .left .icon.typingEmail em { width: 33px; height: 33px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -146px no-repeat; display: block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead .sendToEmail .left .icon.typingEmail em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -142px; background-size: 428px 427px; } } .Typeahead .sendToEmail .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; font-weight: bold; margin: 1px 0; } .Typeahead .sendToEmail .subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #b7b7b7; font-weight: normal; margin: 2px 0 0; } .Typeahead .socialConnect .left { padding-right: 10px; } .Typeahead .socialConnect .left .icon { height: 32px; width: 32px; } .Typeahead .socialConnect .left .icon em { display: block; } .Typeahead .socialConnect .left .icon.socialConnect-facebook em { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -284px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead .socialConnect .left .icon.socialConnect-facebook em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -33px -342px; background-size: 428px 427px; } } .Typeahead .socialConnect .left .icon.socialConnect-gplus em { width: 33px; height: 33px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -181px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead .socialConnect .left .icon.socialConnect-gplus em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -176px; background-size: 428px 427px; } } .Typeahead .socialConnect .left .icon.socialConnect-twitter em { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -68px -384px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead .socialConnect .left .icon.socialConnect-twitter em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -276px; background-size: 428px 427px; } } .Typeahead .socialConnect .left .icon.socialConnect-yahoo em { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -384px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead .socialConnect .left .icon.socialConnect-yahoo em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -99px -342px; background-size: 428px 427px; } } .Typeahead .socialConnect .title { color: #211922; font-weight: bold; line-height: 32px; } .Typeahead .connectCta .left { padding-right: 10px; } .Typeahead .connectCta .left .socialConnectCta { display: block; } .Typeahead .connectCta .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; font-weight: bold; margin: 1px 0; } .Typeahead .connectCta .subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #b7b7b7; font-weight: normal; margin: 2px 0 0; } .Typeahead.sendShare .userCircleAvatar .right, .Typeahead.sendShare .sendToEmail .right, .Typeahead.sendShare .connectCta .right { height: 32px; } .Typeahead.sendShare .sendToEmail .icon { height: 32px; line-height: 32px; width: 32px; } .Typeahead.sendShare .sendToEmail .icon.typingEmail em { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -250px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead.sendShare .sendToEmail .icon.typingEmail em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: 0 -342px; background-size: 428px 427px; } } .Typeahead.sendShare .icon.typingEmail { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -250px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead.sendShare .icon.typingEmail { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: 0 -342px; background-size: 428px 427px; } } .Typeahead.sendShare .icon.socialConnectCta { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -34px -384px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead.sendShare .icon.socialConnectCta { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -243px; background-size: 428px 427px; } } .Typeahead.sendShare .connectCta .socialConnectCta { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -34px -384px no-repeat; height: 32px; width: 32px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead.sendShare .connectCta .socialConnectCta { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -243px; background-size: 428px 427px; } } .Typeahead.sendShare .title { white-space: normal; width: 258px; } .Typeahead.sendShareBrio .userCircleAvatar .right, .Typeahead.sendShareBrio .sendToEmail .right, .Typeahead.sendShareBrio .connectCta .right { height: 44px; } .Typeahead.sendShareBrio .sendToEmail .left { margin-right: 12px; } .Typeahead.sendShareBrio .sendToEmail .left .icon { height: 44px; line-height: 44px; width: 44px; } .Typeahead.sendShareBrio .sendToEmail .left .icon.typingEmail em { width: 44px; height: 44px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -138px -296px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead.sendShareBrio .sendToEmail .left .icon.typingEmail em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -90px -258px; background-size: 428px 427px; } } .Typeahead.sendShareBrio .sendToEmail .right { padding-top: 5px; } .Typeahead.sendShareBrio .sendToEmail .right .title { color: #555; font-size: 18px; line-height: 20px; } .Typeahead.sendShareBrio .sendToEmail img { width: 44px; } .Typeahead.sendShareBrio .connectCta .socialConnectCta { width: 44px; height: 44px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -184px -296px no-repeat; height: 44px; margin-top: 0; width: 44px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead.sendShareBrio .connectCta .socialConnectCta { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -291px -184px; background-size: 428px 427px; } } .Typeahead .lightText { color: #999; } .Typeahead .board .typeaheadImg::after { border-radius: none; box-shadow: none; } .Typeahead .board .typeaheadImg img { border-radius: 6px; } .Typeahead .typeaheadName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; width: 100%; } .Typeahead .typeaheadName.hasImage { width: 273px; } .Typeahead .verifiedIdentifyIcon { width: 11px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -204px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Typeahead .verifiedIdentifyIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -69px -368px; background-size: 399px 382px; } } .Typeahead .footer { height: 105px; } .TypeaheadField { display: inline-block; position: relative; } .TypeaheadField .tokenizedInputWrapper { background-color: #efefef; border: none; border-radius: 4px; height: 40px; } .TypeaheadField.guided .tokenizedInputWrapper { box-sizing: border-box; height: 40px; position: relative; z-index: 670; } .TypeaheadField.guided.buttonOnRight .tokenizedInputWrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; padding-left: 36px; } @media (min-width: 800px) { .TypeaheadField.guided.buttonOnRight .tokenizedInputWrapper { padding-left: 44px; } } .TypeaheadField.guided.buttonOnRight::before { width: 20px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -176px -353px no-repeat; content: " "; margin-top: 10px; position: absolute; z-index: 999999999; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .TypeaheadField.guided.buttonOnRight::before { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -189px -347px; background-size: 399px 382px; } } .TypeaheadField.guided.openSearch .tokenizedInputWrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: 36px; } .TypeaheadField.guided.openSearch .tokenizedInputWrapper .tokensWrapper { margin-top: 0; } .TypeaheadField.guided.openHome { position: relative; z-index: 501; } .TypeaheadField.guided.openHome .tokenizedInputWrapper { margin: 1px; } .TypeaheadField.guided.openHome .tokenizedInputWrapper.focused { border: 1px solid #555; margin: 0; } .TypeaheadField.guided.openHome .tokenizedInputWrapper > em { background: url(https://s.pinimg.com/webapp/style/images/search-1x-cdb3ad08.png) no-repeat; background-size: contain; height: 20px; width: 20px; float: left; margin: 16px 0 0 16px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .TypeaheadField.guided.openHome .tokenizedInputWrapper > em { background-image: url(https://s.pinimg.com/webapp/style/images/search-2x-3fbd7faf.png); } } .TypeaheadField.drawerNav .tokenizedInputWrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: 670; } .TypeaheadField.search .field { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #faf9f7; border: 1px solid #ccc; border-radius: 3px; box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07); box-sizing: border-box; color: #717171; font-size: 13px; font-weight: bold; margin: 0; padding: 6px 30px 6px 9px; position: relative; width: 100%; z-index: 670; } .TypeaheadField.search .field:active { border-color: #bcbcbc; } .TypeaheadField.search .field:focus { background-color: #fafafa; border-color: #aaa; color: #333; } .TypeaheadField .typeaheadCaret { width: 20px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -135px -265px no-repeat; display: none; position: absolute; } .TypeaheadField .typeaheadCaret.visible { display: block; } .TypeaheadField.gigantic .field { box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07), 0 1px 1px #eee; font-size: 20px; font-weight: normal; padding: 15px 30px 15px 15px; z-index: 667; } .TypeaheadField.gigantic .Typeahead { position: absolute; top: auto; z-index: 669; } .TypeaheadField.userSelect { width: 100%; } .TypeaheadField.userSelect input { background: #fff; border: 1px solid #dadada; position: relative; width: 308px; z-index: 3; } .TypeaheadField.boardPickerTypeahead .field { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border: 1px solid #ccc; border-radius: 6px; box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07); box-sizing: border-box; color: #717171; font-size: 13px; font-weight: bold; margin: 0; position: relative; width: 100%; } .TypeaheadField.addPinToMapField .field { border: 1px solid #c6c6c5; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset; font-size: 13px; padding: 14px; } .UserEducationGuideDropdown { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-animation: slide-in-up 0.7s cubic-bezier(0, 1, 0.5, 1); animation: slide-in-up 0.7s cubic-bezier(0, 1, 0.5, 1); background-color: #fff; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 6px 0 rgba(0, 0, 0, 0.2); overflow: hidden; /* So backgrounds on guides don't spill out of the menu */ padding: 22px 26px; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 170px; /* ### FOOTER ### */ } .UserEducationGuideDropdown .helpCenterText { color: #4d4d4d; font-size: 13px; font-weight: 500; line-height: 17px; margin-bottom: 18px; } .UserEducationGuideDropdown .footer { background-color: rgba(0, 0, 0, 0.06); border-top: 1px solid rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.6); cursor: pointer; display: block; font-size: 11px; font-weight: normal; line-height: 11px; padding: 15px 18px 16px; /* Pad the top less so the text is optically centred */ } .UserEducationGuideDropdown .footer:hover { background-color: rgba(0, 0, 0, 0.1); } .UserEducationGuideDropdown .footer:active { background-color: rgba(0, 0, 0, 0.15); } .UserEducationGuideDropdown .footer:hover strong { color: rgba(0, 0, 0, 0.8); } .UserSearchResult { box-sizing: border-box; height: 69px; padding: 7px 15px; width: 100%; } .UserSearchResult .sendButton { float: right; opacity: 0; top: 12px; -webkit-transition: visibility .2s linear, opacity .2s linear; transition: visibility .2s linear, opacity .2s linear; visibility: hidden; z-index: 999999999; } .UserSearchResult .userProfilePic { border-radius: 100%; float: left; margin-right: 10px; width: 55px; } .UserSearchResult .userFullName { font-family: HelveticaNeue-Bold, 'Helvetica', arial; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 325px; padding-bottom: 1px; white-space: nowrap; } .UserSearchResult .userNameEmailContainer { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; position: relative; top: 13px; } .UserSearchResult:hover .sendButton { opacity: 1; visibility: visible; } .UserSearchResult .clearfix { clear: both; } .Video { max-width: 100%; padding: 16px 40px; position: relative; } .Video:-webkit-full-screen { cursor: pointer; padding: 0; width: 100%; } .Video:-moz-full-screen { cursor: pointer; padding: 0; width: 100%; } .Video:-ms-fullscreen { cursor: pointer; padding: 0; width: 100%; } .Video:fullscreen { cursor: pointer; padding: 0; width: 100%; } .Video:-webkit-full-screen .videoBox video { border-radius: 0; } .Video:-moz-full-screen .videoBox video { border-radius: 0; } .Video:-ms-fullscreen .videoBox video { border-radius: 0; } .Video:fullscreen .videoBox video { border-radius: 0; } .Video:-webkit-full-screen .videoBox .videoOverlay .videoFade { border-radius: 0; } .Video:-moz-full-screen .videoBox .videoOverlay .videoFade { border-radius: 0; } .Video:-ms-fullscreen .videoBox .videoOverlay .videoFade { border-radius: 0; } .Video:fullscreen .videoBox .videoOverlay .videoFade { border-radius: 0; } .Video button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: none; padding: 0; } .Video button:focus { outline: none; } .Video .videoBox { cursor: pointer; height: 100%; position: relative; width: 100%; /* These weird width / height settings are for cross browser support When updating the code below, please test in Firefox / Safari and Chrome */ } .Video .videoBox video { background-color: #efefef; border-radius: 8px; display: block; height: auto; max-height: 100vh; max-width: 100%; min-height: 100%; min-width: 100%; -o-object-fit: contain; object-fit: contain; width: auto; } .Video .videoBox .videoOverlay:hover, .Video .videoBox .videoOverlay.forceShow { opacity: 1; -webkit-transition: opacity .32s ease-out; transition: opacity .32s ease-out; } .Video .videoBox .videoOverlay { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; -webkit-transition: opacity .88s ease .24s; transition: opacity .88s ease .24s; width: 100%; } .Video .videoBox .videoOverlay .videoFade { background-image: -webkit-linear-gradient(top, rgba(215, 215, 215, 0) 0%, #000 100%); background-image: linear-gradient(-180deg, rgba(215, 215, 215, 0) 0%, #000 100%); border-radius: 8px; bottom: 0; height: 180px; left: 0; opacity: .31; position: absolute; width: 100%; } .Video .videoBox .videoOverlay .videoControls { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-item-align: end; align-self: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; height: 20px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 16px; position: relative; width: 100%; } .Video .videoBox .videoOverlay .videoControls div, .Video .videoBox .videoOverlay .videoControls button { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-right: 16px; width: 24px; } .Video .videoBox .videoOverlay .videoControls *:last-child { margin-right: 0; } .Video .videoBox .videoOverlay .videoControls .playhead { display: block; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 2px; padding-bottom: 22px; } .Video .videoBox .videoOverlay .videoControls .playheadBar { background-color: rgba(255, 255, 255, 0.41); border-radius: 2px; cursor: pointer; height: 2px; margin: 11px 0; position: relative; width: 100%; } .Video .videoBox .videoOverlay .videoControls .playheadProgress { background-color: #fff; border-radius: 2px; display: block; height: 2px; left: 0; position: absolute; top: 0; } .Video .videoBox .videoOverlay .videoControls .playheadPosition { background-color: #fff; border-radius: 100px; height: 18px; left: 0%; margin: -20.5px -10px; pointer-events: none; position: relative; top: 0; width: 18px; } .Video .videoBox .videoOverlay .videoControls .currentPlayTime { color: rgba(255, 255, 255, 0.41); font-size: 12px; font-weight: 800; letter-spacing: -.11px; margin-top: -1px; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .Video .videoBox .videoOverlay .videoControls .endPlayTime { color: rgba(255, 255, 255, 0.41); font-size: 12px; font-weight: 800; letter-spacing: -.11px; margin-top: -1px; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .Video .videoBox .videoOverlay .videoControls .playPauseButton { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 18px; } @-webkit-keyframes spinVideoLoadingIndicator { to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @keyframes spinVideoLoadingIndicator { to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } .Video .videoBox .videoOverlay .videoControls .loadingIndicator { -webkit-animation: spinVideoLoadingIndicator 1s infinite linear; animation: spinVideoLoadingIndicator 1s infinite linear; } .Video .videoBox:focus { outline: none; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .App > .moduleMask { bottom: 0; left: 0; position: fixed; right: 0; top: 0; } .App .appendedContainer > .Module:not(.reactCloseupContainer) { -webkit-overflow-scrolling: touch; overflow-y: scroll; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 680; } .App > .Spinner { position: fixed; } .App .fbAd { display: none; } .App .inspiredWallOverlay { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: rgba(0, 0, 0, 0.7); bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 0; opacity: 1; position: fixed; right: 0; top: 0; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; z-index: 1000; } .App .inspiredWallOverlay.doNotShow { opacity: 0; pointer-events: none; } .App .typeaheadOverlay { background-color: rgba(0, 0, 0, 0.4); bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 500; } .underlineLink:focus, .underlineLink:hover { text-decoration: underline; } .visuallyHidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyHiddenFocusable:active, .visuallyHiddenFocusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* desktop.scss */ .App .draggable-dragging { opacity: .6; position: absolute; -webkit-transform-origin: top left; transform-origin: top left; z-index: 999999999 !important; } .App .appContent > .Module.loading { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .App .appContent > .Module.error { border: 0; display: block; margin: 100px auto; width: 300px; } .App.full .appContent.hasKLPBar { margin-top: 44px; } .App.full .appContent.hasSpellCheck { margin-top: 24px; } .App.full.unauth .appContent { padding-top: 64px; } .App.hasInterstitialHeader .appContent { left: 0; position: absolute; right: 0; top: 100%; } .App.hasInterstitialHeader .Header { display: none; } .App .footerButtons { bottom: 14px; position: fixed; right: 14px; -webkit-transform: translateZ(0); transform: translateZ(0); z-index: 660; } .App .footerButtons.visible .buttonInoutWrapper { opacity: 1; position: relative; text-align: center; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-duration: .85s; transition-duration: .85s; -webkit-transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1); transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1); } .App .footerButtons.tutorialHighlight .buttonInoutWrapper { -webkit-animation: none; animation: none; -webkit-animation-timing-function: none; animation-timing-function: none; opacity: 1; -webkit-transform: none; transform: none; } .App .footerButtons.aboveChatheads { bottom: 110px; } .App .footerButtons .buttonInoutWrapper { opacity: 0; position: relative; -webkit-transform: translateY(200px); transform: translateY(200px); } .App .footerButtons .buttonInoutWrapper.appUpsellButtonWrapper { -webkit-animation-delay: 100ms; animation-delay: 100ms; margin-bottom: 8px; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .App .footerButtons .buttonInoutWrapper.addButtonWrapper { -webkit-animation-delay: 100ms; animation-delay: 100ms; margin-bottom: 8px; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .App .footerButtons .buttonInoutWrapper.helpButtonWrapper { -webkit-animation-delay: 100ms; animation-delay: 100ms; margin-bottom: 15px; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .App .footerButtons .buttonInoutWrapper.privacyPolicyWrapper { -webkit-animation-delay: 100ms; animation-delay: 100ms; margin-top: 8px; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .App .footerButtons .appUpsellFooter { background: #fff; border: none; padding: 10.5px 14px !important; } .App .footerButtons .appUpsellFooter em { width: 12px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px 0 no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .App .footerButtons .appUpsellFooter em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -357px -221px; background-size: 399px 382px; } } .App .footerButtons .appUpsellFooter:not(.disabled):hover em { width: 12px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px 0 no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .App .footerButtons .appUpsellFooter:not(.disabled):hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -357px -221px; background-size: 399px 382px; } } .App .footerButtons .appUpsellFooter.triggerActive em { width: 12px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px 0 no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .App .footerButtons .appUpsellFooter.triggerActive em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -357px -221px; background-size: 399px 382px; } } .App .footerButtons .appUpsellFooterIcon { padding: 12px 12.5px !important; } .App .footerButtons .appUpsellFooterIcon em { width: 16px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -273px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .App .footerButtons .appUpsellFooterIcon em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px -325px; background-size: 399px 382px; } } .App .footerButtons .appUpsellFooterIcon:not(.disabled):hover em { width: 16px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -273px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .App .footerButtons .appUpsellFooterIcon:not(.disabled):hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px -325px; background-size: 399px 382px; } } .App .footerButtons .appUpsellFooterIcon.triggerActive em { width: 16px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -273px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .App .footerButtons .appUpsellFooterIcon.triggerActive em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px -325px; background-size: 399px 382px; } } .App .footerButtons .nonEuPrivacyPolicy { font-family: HelveticaNeue-Bold, 'Helvetica', arial; background-color: #fff; border-radius: 4px; bottom: 15px; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.04); color: #555; font-size: 12px; font-weight: normal; padding: 2px 5px 3px; z-index: 100; } .App .footerButtons .nonEuPrivacyPolicy:hover { background-color: #f5f5f5; } .App .footerButtons .nonEuPrivacyPolicy:active, .App .footerButtons .nonEuPrivacyPolicy.active { background-color: #e9e9e9; } .App .footerButtons.hide { -webkit-transform: translateY(22px); transform: translateY(22px); -webkit-transition-duration: .85s; transition-duration: .85s; -webkit-transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1); transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1); } .App .footerButtons.hide .privacyPolicyWrapper { opacity: 0; } .App .footerButtons.show { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-duration: .85s; transition-duration: .85s; -webkit-transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1); transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1); } .App .footerButtons.shiftedLeft { right: 310px; } .AppBase { margin-top: -1px; min-width: 320px; padding-top: 1px; } .AuthHomePage .buttons .btn { display: inline-block; font-size: 13px; margin: -2px; min-width: 135px; padding: 6px auto; } .AuthHomePage .buttons .btn:last-of-type { border-radius: 0 6px 6px 0; } .AuthHomePage .buttons .btn:first-of-type { border-radius: 6px 0 0 6px; } .AuthHomePage .buttons .btn.active { background-color: #fbfbfb; background: -webkit-linear-gradient(#fff, #f7f7f7); background: linear-gradient(#fff, #f7f7f7); border-color: #b7b7b7; box-shadow: none; color: #222; } .AuthHomePage .nonEuPrivacyPolicy { -webkit-animation: trigger-card-slide-up .8s forwards; animation: trigger-card-slide-up .8s forwards; -webkit-animation-timing-function: cubic-bezier(0.21, 1.4, 0.37, 1); animation-timing-function: cubic-bezier(0.21, 1.4, 0.37, 1); bottom: 15px; color: #fff; font-size: 13px; font-weight: normal; margin-left: 20px; position: fixed; text-shadow: 0 1px 4px #000; -webkit-transition-delay: 200ms; transition-delay: 200ms; -webkit-transition-duration: .85s; transition-duration: .85s; -webkit-transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1); transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1); z-index: 100; } .AuthHomePage .nonEuPrivacyPolicy:hover { text-decoration: underline; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .FeedPage .categoryHeader { padding: 45px; } .FeedPage .categoryHeader .feedName { color: #fff; margin-top: 5px; } .FeedPage .categoryHeader .categoryStats { height: 15px; margin: 0 auto 18px; text-align: center; } .FeedPage .categoryHeader .categoryStats .categoryStatsInner { display: inline-block; } .FeedPage .categoryHeader .categoryStats .categoryStatsInner .categoryStat { float: left; line-height: 12px; } .FeedPage .categoryHeader .categoryStats .categoryStatsInner .categoryStat .categoryStatIcon { float: left; margin-right: 5px; margin-top: 12px; } .FeedPage .categoryHeader .categoryStats .categoryStatsInner .categoryStat .pins { color: #fff; float: left; font-size: 12px; font-weight: bold; margin-right: 10px; opacity: .7; text-align: center; } .FeedPage .categoryHeader .categoryStats .categoryStatsInner .pins .categoryStatIcon { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -333px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .FeedPage .categoryHeader .categoryStats .categoryStatsInner .pins .categoryStatIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -93px -400px; background-size: 428px 427px; } } .ja .FeedPage .feedName { font-size: 36px; } .FeedPage .RelatedInterestsSection { margin: 16px 0; } /* desktop.scss */ /* stylelint-disable at-rule-no-unknown */ .FeedPage .feedName, .FeedPage > .centeredWithinWrapper { box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 744px; min-width: auto; text-align: left; } .FeedPage .feedName { box-sizing: border-box; color: #555; } /* Related interests */ .FeedPage .RelatedInterestsSection { margin: 0; } .FeedPage .RelatedInterestsSection > ul { text-align: left; } @media (min-width: 800px) { .FeedPage .RelatedInterestsSection > ul { max-width: 645px; } } .FeedPage .RelatedInterestsSection > ul > li { margin-left: 0; } .FeedPage .RelatedInterestsSection .title { display: none; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .Header .fillWidth { width: 100%; } .Header .fillWidth > .DenzelReactBridge { width: 100%; } .Header .homefeedIndicatorReactWrapper { -webkit-box-ordinal-group: 99999; -ms-flex-order: 99998; order: 99998; } /* desktop.scss */ .Header { position: fixed; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; z-index: 671; } .Header.unfixedHeader { position: absolute; } .Header.unfixedHeader .headerContainer { position: absolute; } .Header.disableHeader { z-index: 0; } .Header.hasSpellCheck, .Header.showHeaderMessage { height: 88px; /* Deals with boint spacing for appContent */ } @media (min-width: 360px) { .Header.hasSpellCheck, .Header.showHeaderMessage { height: 88px; } } @media (min-width: 800px) { .Header.hasSpellCheck, .Header.showHeaderMessage { height: 88px; } } .Header.hasSpellCheck .SearchAutocorrect, .Header.showHeaderMessage .SearchAutocorrect { display: block; margin-top: 0; } .Header .TypeaheadField .Typeahead { margin: 40px 0 0; padding-top: 0; position: absolute; top: 0; z-index: 669; } .Header.alt .SearchForm { display: none; } .Header .interest, .Header .categories { float: left; margin-right: 6px; } .Header .UserMenu .profileName { padding-right: 9px; } .Header .rightHeaderContent .NotificationsConversationsButton { float: right; } .Header .logo { left: 50%; margin-left: -52px; margin-top: 16px; position: absolute; top: -7px; } .Header .userDropdown .Button { border-color: #c1c1c1; border-left: 0; border-radius: 0 6px 6px 0; height: 30px; width: 36px; } .Header .unauthActions { float: right; } .Header .unauthActions .LanguageMenu { float: left; } .es .Header .unauthActions .LanguageMenu .languageButton, .ms .Header .unauthActions .LanguageMenu .languageButton, .pt .Header .unauthActions .LanguageMenu .languageButton { font-size: 10px; padding-right: 20px; } .Header .unauthActions .LoginButton, .Header .unauthActions .SignupButton { float: left; font-size: 12px; margin: 1px 0 0 8px; } .es .Header .unauthActions .LoginButton, .ms .Header .unauthActions .LoginButton, .pt .Header .unauthActions .LoginButton, .es .Header .unauthActions .SignupButton, .ms .Header .unauthActions .SignupButton, .pt .Header .unauthActions .SignupButton { font-size: 10px; } .Header .categoriesMenuContainer { display: none; } .Header.invisible { opacity: 0; } .HeaderBase.hidden { display: none; } .PopularSearchesBar { height: 40px; line-height: 40px; overflow: hidden; text-align: center; } .PopularSearchesBar .popularSearchesList { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .PopularSearchesBar .popularSearchItem { border-radius: 4px; cursor: pointer; display: inline; float: left; height: 40px; margin-right: 9px; } .PopularSearchesBar .popularSearchItem.red { background-color: #c99e92; color: inherit; } .PopularSearchesBar .popularSearchItem.yellow { background-color: #cfbfa4; color: inherit; } .PopularSearchesBar .popularSearchItem.green { background-color: #aeb7a4; } .PopularSearchesBar .popularSearchItem.blue { background-color: #b1bdc0; color: inherit; } .PopularSearchesBar .popularSearchItem.purple { background-color: #bfb8ca; } .PopularSearchesBar .popularSearchItem.grey { background-color: #bebbaf; } .PopularSearchesBar .popularSearchItem:hover { opacity: .8; } .PopularSearchesBar .popularTopicText { color: #fff; font-size: 14px; font-weight: bold; height: 17px; letter-spacing: -.2px; line-height: 40px; margin-left: 12px; margin-right: 12px; vertical-align: middle; } .RightHeader { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; width: 100%; } .RightHeader .userMenuWrapper { margin-right: 42px; overflow: visible; } .RightHeader > .DenzelReactBridge { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .User.exploreStoryHeaderView img, .User.exploreStoryHeaderView .hoverMask { border-radius: 50%; height: 60px; } .User.exploreStoryHeaderView .userPhoto { display: block; margin: 0 auto; width: 60px; } .User.exploreStoryHeaderView .thumbImageWrapper { position: relative; } .User.exploreStoryHeaderView .thumbImageWrapper:hover .hoverMask { background: rgba(0, 0, 0, 0.15); } .User.exploreStoryHeaderView .thumbImageWrapper:active .hoverMask { background: rgba(0, 0, 0, 0.25); } .User.exploreStoryHeaderView .thumbImageWrapper .hoverMask { bottom: 0; left: 0; position: absolute; right: 0; top: 0; box-shadow: none; z-index: 100; } .User.exploreStoryHeaderView .userFullName { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #555; display: inline-block; font-size: 16px; font-weight: bold; letter-spacing: -.2px; margin: 8px auto; } .User.exploreStoryHeaderView .userFullName .verifiedIdentifyIcon { width: 11px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -204px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; height: 12px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .User.exploreStoryHeaderView .userFullName .verifiedIdentifyIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -69px -368px; background-size: 399px 382px; } } .User.exploreStoryHeaderView .userFollowerCount { color: #555; font-size: 12px; letter-spacing: -.1px; margin-top: 4px; } .User.exploreTabView { margin: 0 17px 34px; width: 218px; } .User.exploreTabView img, .User.exploreTabView .homefeedBuilderHoverMask { height: 218px; width: 218px; } .User.exploreTabView .userFullName { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #555; font-size: 21px; line-height: 23px; margin-top: 15px; } .User.exploreTabView .homefeedBuilderHoverMask { margin: 0 17px; } .User.homefeedBuilderView { margin: 0 7px 30px; width: 172px; } .User.homefeedBuilderView img, .User.homefeedBuilderView .homefeedBuilderHoverMask { height: 172px; width: 172px; } .User.homefeedBuilderView .userFullName { color: #444; font-size: 14px; line-height: 18px; margin-bottom: 8px; margin-top: 10px; } .User.homefeedBuilderView .userFullName .verifiedIdentifyIcon { height: 12px; } .User.homefeedBuilderView .homefeedBuilderHoverMask { margin: 0 7px; } .User.homefeedBuilderView .userFullName, .User.exploreTabView .userFullName { font-weight: bold; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .User.homefeedBuilderView .userFullName .verifiedIdentifyIcon, .User.exploreTabView .userFullName .verifiedIdentifyIcon { width: 11px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -204px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .User.homefeedBuilderView .userFullName .verifiedIdentifyIcon, .User.exploreTabView .userFullName .verifiedIdentifyIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -69px -368px; background-size: 399px 382px; } } .User.homefeedBuilderView .thumbImageWrapper:hover .homefeedBuilderHoverMask, .User.exploreTabView .thumbImageWrapper:hover .homefeedBuilderHoverMask { background: rgba(0, 0, 0, 0.15); } .User.homefeedBuilderView .thumbImageWrapper:active .homefeedBuilderHoverMask, .User.exploreTabView .thumbImageWrapper:active .homefeedBuilderHoverMask { background: rgba(0, 0, 0, 0.25); } .User.homefeedBuilderView .thumbImageWrapper .homefeedBuilderHoverMask, .User.exploreTabView .thumbImageWrapper .homefeedBuilderHoverMask { bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 100; } .User.homefeedBuilderView .thumbImageWrapper img, .User.homefeedBuilderView .thumbImageWrapper .homefeedBuilderHoverMask, .User.exploreTabView .thumbImageWrapper img, .User.exploreTabView .thumbImageWrapper .homefeedBuilderHoverMask { border-radius: 50%; } .User.homefeedBuilderView .userFollowers, .User.exploreTabView .userFollowers { color: #555; font-size: 14px; letter-spacing: -.2px; line-height: 16px; margin-bottom: 6px; margin-top: 4px; text-align: center; } .User.homefeedBuilderView .followMask, .User.exploreTabView .followMask { background-color: rgba(0, 0, 0, 0.7); border-radius: 50%; height: 172px; opacity: 0; position: absolute; -webkit-transition: visibility 0s .2s, opacity .2s linear; transition: visibility 0s .2s, opacity .2s linear; visibility: hidden; width: 172px; } .User.homefeedBuilderView .followMask .followMaskIcon, .User.exploreTabView .followMask .followMaskIcon { width: 59px; height: 42px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -215px 0 no-repeat; display: inline-block; margin-left: 57px; margin-top: 65px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .User.homefeedBuilderView .followMask .followMaskIcon, .User.exploreTabView .followMask .followMaskIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -128px -35px; background-size: 249px 231px; } } .User.homefeedBuilderView .followMask.visible, .User.exploreTabView .followMask.visible { opacity: 1; -webkit-transition: opacity .2s linear; transition: opacity .2s linear; visibility: visible; } .User.linkModule { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .User.linkModule.thumb.domainOwner .thumbImageWrapper { margin-right: 8px; } .User.linkModule .profileSource { display: -webkit-box; display: -ms-flexbox; display: flex; } .User.linkModule .profileSource .profileSourceAttributionContent { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 3px; } .User.linkModule .profileSource .profileSourceAttributionContent .title, .User.linkModule .profileSource .profileSourceAttributionContent .fullname { color: #444; max-width: 414px; } .User.linkModule .profileSource .profileSourceAttributionContent .title { margin-top: 0; } .User.linkModule .profileSource .thumbImageWrapper { float: none; margin-right: 8px; } .User.linkModule .profileSource .thumbImageWrapper, .User.linkModule .profileSource .thumbImageWrapper img, .User.linkModule .profileSource .thumbImageWrapper::after { height: 40px; width: 40px; } .User.linkModule.User.thumb.domainOwner.hasText .thumbImageWrapper { margin-left: 0; } .User .hoverMask { bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: background 0.04s linear; transition: background 0.04s linear; border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; z-index: 100; } .User .userWrapper:hover .hoverMask { background: rgba(255, 255, 255, 0.08); } .User .userWrapper:active .hoverMask { background: rgba(255, 255, 255, 0.08); } .User.gridItem { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; } .User.gridItem .userThumbs { overflow: hidden; } .User.thumb.small .title, .User.thumb.small .subtitle, .User.thumb.small .location, .User.thumb.small .fullname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; line-height: 14px; margin-bottom: 1px; margin-top: 1px; } .User.thumb .title, .User.thumb .subtitle, .User.thumb .location { font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-weight: bold; color: #808080; } .User.thumb.hasText .thumbImageWrapper { margin-right: 8px; } .User.dim { opacity: 0.5; } .User .focusThumbContainer { position: relative; background: #eee; height: 106px; float: left; width: 106px; } .User .focusThumbContainer::after { border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 106px; left: 0; position: absolute; top: 0; width: 106px; } .User .focusThumbContainer img { border-radius: 3px; height: 106px; width: 106px; } .User .thumbContainer { position: relative; background-color: #eee; float: left; margin: 0 3px 3px 0; } .User .thumbContainer::after { border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 51px; left: 0; position: absolute; top: 0; width: 51px; } .User .thumbContainer img { border-radius: 3px; height: 51px; width: 51px; } .User .thumbContainer.rightWrap { margin-right: 0; } .User .userFocusImage { display: block; height: 106px; width: 106px; float: left; margin: 0 3px 3px 0; } .User .userPin { display: block; height: 51px; width: 51px; max-width: none; } .User.inline { display: inline-block; margin: 0 2px; vertical-align: middle; } .User.inline a { display: inline-block; } .User.large .thumbImageWrapper { position: relative; width: 100px; } .User.large .thumbImageWrapper::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 100px; left: 0; position: absolute; top: 0; width: 100px; } .User.large .thumbImageWrapper img { border-radius: 50%; height: 100px; width: 100px; } .User.medium .thumbImageWrapper { position: relative; width: 50px; } .User.medium .thumbImageWrapper::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 50px; left: 0; position: absolute; top: 0; width: 50px; } .User.medium .thumbImageWrapper img { border-radius: 50%; height: 50px; width: 50px; } .User.smallerMedium .thumbImageWrapper { position: relative; width: 40px; } .User.smallerMedium .thumbImageWrapper::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 40px; left: 0; position: absolute; top: 0; width: 40px; } .User.smallerMedium .thumbImageWrapper img { border-radius: 50%; height: 40px; width: 40px; } .User.smallerMedium.brio .title { font-weight: normal !important; margin-bottom: 0; } .User.smallerMedium.brio .title, .User.smallerMedium.brio .fullname { color: #555; font-size: 14px; } .User.smallerMedium.brio .fullname { margin-top: 2px; } .User.largerMedium .thumbImageWrapper { position: relative; width: 60px; } .User.largerMedium .thumbImageWrapper::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 60px; left: 0; position: absolute; top: 0; width: 60px; } .User.largerMedium .thumbImageWrapper img { border-radius: 50%; height: 60px; width: 60px; } .User.small { line-height: 30px; } .User.small .thumbImageWrapper { position: relative; height: 30px; width: 30px; } .User.small .thumbImageWrapper::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 30px; left: 0; position: absolute; top: 0; width: 30px; } .User.small .thumbImageWrapper img { border-radius: 50%; height: 30px; width: 30px; } .User.small .thumbImageWrapper img { vertical-align: top; } .User.small .thumbImageWrapper .icon { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; background-color: #999; border: 0; border-radius: 50%; box-sizing: border-box; color: #fff; display: block; font-size: 18px; font-weight: bold; height: 32px; line-height: 32px; text-align: center; width: 32px; } .User.interests .thumbImageWrapper img { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; height: 65px; width: 65px; } .User.userSelectFollow { display: inline-block; padding: 0 0 30px 13px; position: relative; vertical-align: top; width: 85px; } .User.userSelectFollow .UserFollowButton { background: transparent; border: 0; border-radius: 50%; font-size: 0; height: 85px; left: 13px; position: absolute; top: 0; -webkit-transition: background .1s ease-in, opacity .1s ease-in, box-shadow .1s ease-in, -webkit-transform .1s ease-in; transition: background .1s ease-in, opacity .1s ease-in, box-shadow .1s ease-in, -webkit-transform .1s ease-in; transition: background .1s ease-in, opacity .1s ease-in, box-shadow .1s ease-in, transform .1s ease-in; transition: background .1s ease-in, opacity .1s ease-in, box-shadow .1s ease-in, transform .1s ease-in, -webkit-transform .1s ease-in; width: 85px; z-index: 100; } .User.userSelectFollow .UserFollowButton:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } .User.userSelectFollow .UserFollowButton.dim { background: url(https://s.pinimg.com/webapp/style/images/follow-friends-checkmark-1x-5bfb33da.png) no-repeat; background-size: contain; height: 85px; width: 85px; } .User.userSelectFollow .profileImage { border-radius: 50%; height: 85px; -webkit-transition: -webkit-transform .1s ease-in; transition: -webkit-transform .1s ease-in; transition: transform .1s ease-in; transition: transform .1s ease-in, -webkit-transform .1s ease-in; width: 85px; } .User.userSelectFollow p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; font: bold 15px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; text-align: center; } .User.userSelectFollow .profileLink:hover, .User.userSelectFollow .profileLink:active, .User.userSelectFollow .profileLink:focus { text-decoration: underline; } .User.userSelectFollow .firstName { margin-top: 12px; } .User.userSelectFollow .numPins { color: #999; font-size: 11px; font-weight: normal; } .User.gridItem { position: relative; width: 236px; } .User.gridItem .userDismiss { width: 18px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px 0 no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; cursor: pointer; float: right; margin: 10px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .User.gridItem .userDismiss { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -62px -201px; background-size: 249px 231px; } } .User.gridItem .verifiedDomainIcon { width: 18px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -80px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; float: right; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .User.gridItem .verifiedDomainIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -351px -347px; background-size: 399px 382px; } } .User.gridItem .verifiedIdentifyIcon { width: 11px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -204px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .User.gridItem .verifiedIdentifyIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -69px -368px; background-size: 399px 382px; } } .User.gridItem .followersCount { background-color: #000; background-color: rgba(68, 68, 68, 0.7); border-radius: 2px; bottom: 3px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.3); color: #fff; padding: 3px 6px; position: absolute; right: 3px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7); } .User.gridItem .username { margin-bottom: 0; } .User.gridItem .userStats { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow: hidden; color: #777; line-height: 14px; margin: 2px 0 10px 3px; } .ja .User.gridItem .userStats { font-size: 10px; } .User.debugWrapper { padding: 2px; } .User.storyView { box-shadow: None; } .User .focusThumbContainer { margin-right: 3px; } .User .fullname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; display: block; font-size: 15px; line-height: 17px; } .User h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; height: 18px; } .User .userThumbs { margin-bottom: 7px; } .User .userWrapper { display: block; padding: 10px; bottom: 0; left: 0; right: 0; top: 0; } .User .userWrapper .debugMacro { color: #000; font-weight: normal; margin: 10px -10px 0; } .User.userSelect { cursor: pointer; position: relative; } .User.userSelect .hoverMask { bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: background 0.04s linear; transition: background 0.04s linear; border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; z-index: 100; } .User.userSelect .userSelectImageWrapper:hover .hoverMask { background: rgba(255, 255, 255, 0.08); } .User.userSelect .userSelectImageWrapper:active .hoverMask { background: rgba(255, 255, 255, 0.08); } .User.userSelect .userWrapper { padding: 0; } .User.userSelect .moduleMask { background: #f5f5f5; } .User.userSelect .userSelectImageWrapper { position: relative; overflow: hidden; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); display: block; height: 68px; width: 68px; } .User.userSelect .userSelectImageWrapper::after { border-radius: 50%; box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.75), inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.16); content: " "; height: 68px; left: 0; position: absolute; top: 0; width: 68px; } .User.userSelect .userSelectImageWrapper img { border-radius: 50%; height: 68px; width: 68px; } .User.userSelect.fakeUser { cursor: default; } .User.userSelect .userName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; clear: both; color: #000; font-size: 13px; font-weight: 600; margin: 9px 0 0; max-width: 68px; text-align: center; } .User.userSelect:active { -webkit-transform: scale(0.98); transform: scale(0.98); -webkit-transition: scale .1s ease-in-out; transition: scale .1s ease-in-out; } .User.userSelect:active.fakeUser { -webkit-transform: scale(1); transform: scale(1); } .User.userCheckableSelectView { display: inline-block; padding-bottom: 50px; position: relative; text-align: center; vertical-align: top; width: 136px; } .User.userCheckableSelectView.noPadding { padding-bottom: 0; } .User.userCheckableSelectView .selectCheck { width: 21px; height: 21px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) 0 -242px no-repeat; position: absolute; right: 25px; top: 5px; z-index: 101; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .User.userCheckableSelectView .selectCheck { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -208px -136px; background-size: 249px 231px; } } .User.userCheckableSelectView .selectCheck.checked { width: 21px; height: 21px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -191px -97px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .User.userCheckableSelectView .selectCheck.checked { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -208px -92px; background-size: 249px 231px; } } .User.userCheckableSelectView .profileImage { border-radius: 50%; cursor: pointer; height: 116px; -webkit-transition: -webkit-transform .1s ease-in; transition: -webkit-transform .1s ease-in; transition: transform .1s ease-in; transition: transform .1s ease-in, -webkit-transform .1s ease-in; width: 116px; } .User.userCheckableSelectView .profileName { font-size: 15px; margin-top: 8px; } .User.userCheckableSelectView p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; font: bold 15px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; text-align: center; } .User.userCheckableSelectView .numPins { color: #999; font-size: 12px; font-weight: normal; } .User.imageOnlyThumb { display: inline-block; position: relative; text-align: center; vertical-align: top; width: 136px; } .User.imageOnlyThumb .overflowMask { background: #bd081c; border-radius: 50%; height: 136px; position: absolute; -webkit-transition: -webkit-transform .1s ease-in; transition: -webkit-transform .1s ease-in; transition: transform .1s ease-in; transition: transform .1s ease-in, -webkit-transform .1s ease-in; width: 136px; z-index: 103; } .User.imageOnlyThumb .overflowMask .mask { display: table; height: 100%; width: 100%; } .User.imageOnlyThumb .overflowMask .text { color: #fff; display: table-cell; font-size: 24px; font-weight: bold; line-height: 29px; padding: 8px; text-align: center; vertical-align: middle; } .User.imageOnlyThumb .profileImage { border-radius: 50%; cursor: pointer; height: 136px; -webkit-transition: -webkit-transform .1s ease-in; transition: -webkit-transform .1s ease-in; transition: transform .1s ease-in; transition: transform .1s ease-in, -webkit-transform .1s ease-in; width: 136px; } .User.thumb, .User.thumbUserInfo { overflow: hidden; position: relative; } .User.thumb.has_via:first-child, .User.thumbUserInfo.has_via:first-child { border-right: 1px solid #e3e3e3; } .User.thumb .thumbImageWrapper, .User.thumb .profileSourceAttributionContent, .User.thumbUserInfo .thumbImageWrapper, .User.thumbUserInfo .profileSourceAttributionContent { float: left; } .User.thumb .fullname, .User.thumbUserInfo .fullname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-weight: bold; color: #333; display: block; } .User.thumb .Button, .User.thumbUserInfo .Button { float: right; font-size: 12px; margin-top: 10px; padding-left: 15px; padding-right: 15px; } .User.thumb.small .title, .User.thumb.small .subtitle, .User.thumb.small .location, .User.thumb.small .fullname, .User.thumbUserInfo.small .title, .User.thumbUserInfo.small .subtitle, .User.thumbUserInfo.small .location, .User.thumbUserInfo.small .fullname { line-height: 14px; } .User.thumb.small.inline .fullname, .User.thumbUserInfo.small.inline .fullname { display: inline-block; } .User.thumb.notification, .User.thumbUserInfo.notification { line-height: 33px; } .User.thumb.notification .thumbImageWrapper, .User.thumbUserInfo.notification .thumbImageWrapper { position: relative; height: 33px; width: 33px; } .User.thumb.notification .thumbImageWrapper::after, .User.thumbUserInfo.notification .thumbImageWrapper::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 33px; left: 0; position: absolute; top: 0; width: 33px; } .User.thumb.notification .thumbImageWrapper img, .User.thumbUserInfo.notification .thumbImageWrapper img { border-radius: 50%; height: 33px; width: 33px; } .User.thumb.notification .thumbImageWrapper img, .User.thumbUserInfo.notification .thumbImageWrapper img { vertical-align: top; } .User.thumb.notification .title, .User.thumb.notification .subtitle, .User.thumb.notification .location, .User.thumb.notification .fullname, .User.thumbUserInfo.notification .title, .User.thumbUserInfo.notification .subtitle, .User.thumbUserInfo.notification .location, .User.thumbUserInfo.notification .fullname { font-size: 11px; line-height: 14px; margin-bottom: 1px; margin-top: 1px; } .BoardInfoBar .User.thumb.notification .fullname, .BoardInfoBar .User.thumbUserInfo.notification .fullname { color: #444; font-size: 13px; margin-top: 9px; } .User.thumb.homefeedBuilderTitle .thumbImageWrapper, .User.thumb.exploreTabTitle .thumbImageWrapper, .User.thumbUserInfo.homefeedBuilderTitle .thumbImageWrapper, .User.thumbUserInfo.exploreTabTitle .thumbImageWrapper { position: relative; margin-right: 9px; width: 38px; } .User.thumb.homefeedBuilderTitle .thumbImageWrapper::after, .User.thumb.exploreTabTitle .thumbImageWrapper::after, .User.thumbUserInfo.homefeedBuilderTitle .thumbImageWrapper::after, .User.thumbUserInfo.exploreTabTitle .thumbImageWrapper::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 38px; left: 0; position: absolute; top: 0; width: 38px; } .User.thumb.homefeedBuilderTitle .thumbImageWrapper img, .User.thumb.exploreTabTitle .thumbImageWrapper img, .User.thumbUserInfo.homefeedBuilderTitle .thumbImageWrapper img, .User.thumbUserInfo.exploreTabTitle .thumbImageWrapper img { border-radius: 50%; height: 38px; width: 38px; } .User.thumb.homefeedBuilderTitle .title, .User.thumb.homefeedBuilderTitle .fullname, .User.thumb.exploreTabTitle .title, .User.thumb.exploreTabTitle .fullname, .User.thumbUserInfo.homefeedBuilderTitle .title, .User.thumbUserInfo.homefeedBuilderTitle .fullname, .User.thumbUserInfo.exploreTabTitle .title, .User.thumbUserInfo.exploreTabTitle .fullname { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #444; max-width: 100%; } .User.thumb.homefeedBuilderTitle .title, .User.thumb.exploreTabTitle .title, .User.thumbUserInfo.homefeedBuilderTitle .title, .User.thumbUserInfo.exploreTabTitle .title { font-size: 14px; letter-spacing: -.2px; line-height: 16px; padding: 2px 0; } .User.thumb.homefeedBuilderTitle .fullname, .User.thumb.exploreTabTitle .fullname, .User.thumbUserInfo.homefeedBuilderTitle .fullname, .User.thumbUserInfo.exploreTabTitle .fullname { font-size: 12px; font-weight: normal; letter-spacing: -.1px; } .User.thumb.boardRepTitle .thumbImageWrapper, .User.thumbUserInfo.boardRepTitle .thumbImageWrapper { position: relative; margin-right: 9px; width: 38px; } .User.thumb.boardRepTitle .thumbImageWrapper::after, .User.thumbUserInfo.boardRepTitle .thumbImageWrapper::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 38px; left: 0; position: absolute; top: 0; width: 38px; } .User.thumb.boardRepTitle .thumbImageWrapper img, .User.thumbUserInfo.boardRepTitle .thumbImageWrapper img { border-radius: 50%; height: 38px; width: 38px; } .User.thumb.boardRepTitle .title, .User.thumb.boardRepTitle .fullname, .User.thumbUserInfo.boardRepTitle .title, .User.thumbUserInfo.boardRepTitle .fullname { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .User.thumb.boardRepTitle .title, .User.thumbUserInfo.boardRepTitle .title { color: #333; font-size: 15px; line-height: 15px; padding: 2px 0; } .User.thumb.boardRepTitle .fullname, .User.thumbUserInfo.boardRepTitle .fullname { color: #8e8e8e; font-size: 13px; } .User.thumb.medium .title, .User.thumb.medium .subtitle, .User.thumb.medium .location, .User.thumb.medium .fullname, .User.thumbUserInfo.medium .title, .User.thumbUserInfo.medium .subtitle, .User.thumbUserInfo.medium .location, .User.thumbUserInfo.medium .fullname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; margin-top: 6px; } .User.thumb.medium .title, .User.thumb.medium .subtitle, .User.thumb.medium .location, .User.thumbUserInfo.medium .title, .User.thumbUserInfo.medium .subtitle, .User.thumbUserInfo.medium .location { font-size: 13px; } .User.thumb.medium .location, .User.thumbUserInfo.medium .location { margin-top: 0; } .User.thumb.medium .fullname, .User.thumbUserInfo.medium .fullname { font-size: 16px; margin-bottom: 1px; margin-top: 8px; } .User.thumb.medium.boardCollaborator.noLocation .fullname, .User.thumbUserInfo.medium.boardCollaborator.noLocation .fullname { line-height: 34px; } .User.thumb.medium.boardFollower .fullname, .User.thumbUserInfo.medium.boardFollower .fullname { line-height: 34px; } .User.thumb.pinner .thumbImageWrapper, .User.thumbUserInfo.pinner .thumbImageWrapper { margin-right: 15px; } .User.thumb.pinner .title, .User.thumbUserInfo.pinner .title { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #999; font-size: 13px; font-weight: bold; line-height: 13px; height: auto; margin: 6.5px 0 7px; } .User.thumb.pinner .fullname, .User.thumbUserInfo.pinner .fullname { color: #333; font-size: 16px; font-weight: bold; line-height: 17px; } .User.thumb.domainOwner .thumbImageWrapper, .User.thumbUserInfo.domainOwner .thumbImageWrapper { margin-right: 4px; } .User.thumb.domainOwner .fullname, .User.thumbUserInfo.domainOwner .fullname { color: #555; font-size: 14px; font-weight: bold; } .User.thumb.domainOwner .title, .User.thumbUserInfo.domainOwner .title { color: #555; font-size: 14px; font-weight: normal; margin-top: 2px; } .User.thumbUserInfo .fullname { margin-left: 10px; } .User.news { margin: 7px 14px; width: 208px; } .User.news.small .UserFollowButton { margin-top: 0; } .User.followFriendsItem { font-size: 11px; line-height: 1.2em; padding: 5px 14px; position: relative; } .User.followFriendsItem::after { clear: both; content: ""; display: table; } .User.followFriendsItem.loading { min-height: 0; } .User.followFriendsItem:hover { background: #f3f3f3; } .User.followFriendsItem .thumbImageWrapper { position: relative; float: left; height: 30px; width: 30px; } .User.followFriendsItem .thumbImageWrapper::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 30px; left: 0; position: absolute; top: 0; width: 30px; } .User.followFriendsItem .thumbImageWrapper img { border-radius: 50%; height: 30px; width: 30px; } .User.followFriendsItem .thumbImageWrapper img { border-radius: 50%; height: 30px; width: 30px; } .User.followFriendsItem .contactUser { margin-left: 35px; } .User.followFriendsItem .contactUsername { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #717171; font-weight: 700; } .User.followFriendsItem:hover .dismiss { width: 9px; height: 10px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -235px -206px no-repeat; cursor: pointer; margin-right: 14px; position: absolute; right: 0; top: 40%; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .User.followFriendsItem:hover .dismiss { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px -89px; background-size: 428px 427px; } } .User.followFriendsItem .contactConfirmation { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-color: #ffa; bottom: 0; display: none; left: 0; padding: 10px; position: absolute; right: 0; top: 0; } .User.followFriendsItem.contactConfirmed .contactConfirmation { display: block; } .User.followFriendsItem .UserFollowButton { color: #bd081c; } .User.followFriendsItem .UserFollowButton:hover { text-decoration: none; } .User.followFriendsItem .UserFollowButton.disabled { color: #717171; } .User.followFriendsItem .UserFollowButton.disabled:hover { cursor: default; text-decoration: none; } .User.thumbHomefeedBuilder { width: 172px; } .User.thumbHomefeedBuilder .thumbImageWrapper { bottom: 38px; left: 12px; position: absolute; width: auto; width: initial; z-index: 101; } .User.thumbHomefeedBuilder .thumbImageWrapper img { border: 2px solid #fff; border-radius: 50%; display: inline-block; float: none; height: 30px; width: 30px; } .User.thumbHomefeedBuilder .thumbImageWrapper img:nth-child(1) { border-radius: 50%; } .User.thumbHomefeedBuilder .thumbImageWrapper::after { box-shadow: none; height: 30px; width: 30px; } .User.thumbHomefeedBuilder .title { color: #444; letter-spacing: -.2px; line-height: 18px; padding-top: 12px; size: 16px; } .User.thumbHomefeedBuilder .fullname { color: #444; font-weight: normal; letter-spacing: -1px; size: 12px; } .User.contactRequestListItem { margin: 0 10px; } .User.communityItem .profileSource { display: -webkit-box; display: -ms-flexbox; display: flex; } .User.communityItem .fullname { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 0 !important; } /* desktop.scss */ .User a.profileSource { display: block; } .User .focusThumbContainer { background: none; height: 236px; margin-right: 0; width: 236px; } .User .focusThumbContainer img { border-radius: 50%; height: 236px; width: 236px; } .User .focusThumbContainer::after { background: rgba(0, 0, 0, 0.02); border-radius: 50%; box-shadow: none; height: 236px; width: 236px; } .User.thumbUserInfo.small .fullname { color: #333; font-size: 13px; line-height: 30px; max-width: 150px; } .User.exploreTabView .homefeedBuilderHoverMask { margin: 10px 17px; } .User.gridItem { background: none; box-shadow: none; cursor: pointer; margin: -10px; padding: 10px; width: 236px; } .User.gridItem .username { height: 20px; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ } .User.gridItem .userThumbs { margin-bottom: 0; } .User.gridItem::before { background: rgba(0, 0, 0, 0.05); border-radius: 8px; content: " " !important; height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; -webkit-transform: scale(0.96); transform: scale(0.96); width: 100%; z-index: 3; } .User.gridItem:not(.userWrapperDisableHover):hover::before { -webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; } .User.storyView::before { display: none; } .User .hoverMask { border-radius: none; box-shadow: none; } .User .thumbImageWrapper::after { box-shadow: none !important; } .User .userFocusImage { margin: 0; } .User .userWrapper { padding: 0; } .User .Button.gridItem { bottom: auto; width: 236px; } .User .homefeedBuilderHoverMask { margin-top: 10px; } .User.thumb.boardRepTitle .title { /* stylelint-disable-next-line at-rule-no-unknown */ } .UserCardWrapper { margin: 0 7px 30px; width: 172px; } .UserMenu { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #f8f8f8; background: -webkit-linear-gradient(#fff, #f0f0f0); background: linear-gradient(#fff, #f0f0f0); -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 3px; color: #888; cursor: pointer; font-size: 13px; font-weight: bold; margin-right: 7px; position: relative; } .UserMenu::after { clear: both; content: ""; display: table; } .UserMenu.full { margin-right: 0; } .UserMenu.merged, .UserMenu.merged:hover, .UserMenu.merged.active { border-bottom-left-radius: 3px; border-bottom-right-radius: 0 0; border-right: 0; border-top-right-radius: 0 0; margin-right: 0; } .UserMenu:hover, .UserMenu.active { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #c11d24; background: -webkit-linear-gradient(#d62229, #ab171e); background: linear-gradient(#d62229, #ab171e); background-color: #d62229; border: 1px solid #b3171e; border-radius: 3px 3px 0 0; } .UserMenu:hover .caret, .UserMenu.active .caret { width: 10px; height: 7px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -138px -200px no-repeat; opacity: 1; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserMenu:hover .caret, .UserMenu.active .caret { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -132px -162px; background-size: 249px 231px; } } .UserMenu:hover .profileImage, .UserMenu.active .profileImage { box-shadow: 0 0 2px #590b0e inset; } .UserMenu:hover .profileName, .UserMenu.active .profileName { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.11); } .UserMenu .usernameLink { float: left; width: 100%; } .UserMenu .profileImage { background-size: cover; border-radius: 3px 0 0 3px; box-shadow: 0 0 2px #616161 inset; float: left; height: 30px; margin: -1px; width: 30px; } .UserMenu .profileName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; height: 21px; padding: 6px 0 1px 10px; } .UserMenu .caret { width: 10px; height: 7px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -162px -200px no-repeat; opacity: .5; position: absolute; right: 5px; top: 11px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserMenu .caret { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -143px -162px; background-size: 249px 231px; } } .UserMenu .caret + .usernameLink .profileName { padding-right: 20px; } .AboutLinks { padding: 10px 15px; } .AboutLinks li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding: 0 3px; } .AboutLinks li:last-child a::after { content: ""; } .AboutLinks li a { font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; color: #999; display: inline-block; padding: 0 !important; } .AboutLinks li a.smallFont, .AboutLinks li a.normalFont { color: #949494; font-weight: normal; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8); } .AboutLinks li a.smallFont { font-size: 11px; } .AboutLinks li a.normalFont { font-size: 12px; } .AboutLinks li a:hover { color: #333; } .AboutLinks li a::after { content: "."; position: relative; right: -4px; top: -3px; } .AboutLinks.aboutLinksReact li { padding: 0 6px; } .AboutLinks.aboutLinksReact li a::after { right: -6px; } .AboutLinks.helpCenterButton { border-bottom: 1px solid #ebebeb; margin-bottom: 10px; padding: 0 0 10px; } .AboutLinks.helpCenterButton li { display: block; padding: 3px; text-align: left; } .AboutLinks.helpCenterButton li:last-child a::after { content: ""; } .AboutLinks.helpCenterButton li a { font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; color: #717171; } .AboutLinks.helpCenterButton li a.smallFont, .AboutLinks.helpCenterButton li a.normalFont { color: #717171; font-weight: bold; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8); } .AboutLinks.helpCenterButton li a.smallFont { font-size: 12px; } .AboutLinks.helpCenterButton li a.normalFont { font-size: 14px; } .AboutLinks.helpCenterButton li a:hover { color: #333; } .AboutLinks.helpCenterButton li a::after { content: " "; } .CategoriesMenu { -webkit-overflow-scrolling: touch; overflow-y: auto; border-radius: 6px; height: 100%; text-align: left; width: 496px; } .CategoriesMenu .categoriesWrapper { overflow-x: hidden; -webkit-overflow-scrolling: touch; overflow-y: auto; display: -webkit-box; display: -ms-flexbox; display: flex; height: auto; -ms-flex-pack: distribute; justify-content: space-around; margin: 0; padding: 30px 24px 16px; } .CategoriesMenu .categoriesWrapper.iPad { position: static; } .CategoriesMenu ul { margin: 0; padding: 0; width: 201px; } .CategoriesMenu li { margin-bottom: 3px; } .CategoriesMenu .item { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-radius: 6px; color: #838383; display: inline-block; font-size: 14px; font-weight: 600; padding: 0; position: relative; } .CategoriesMenu .item.shop { color: #0084ff; margin-bottom: 3px; } .CategoriesMenu .item.shop:hover { color: #0084ff; } .CategoriesMenu .item:active, .CategoriesMenu .item.selected { color: #000; } .CategoriesMenu .item.highlight span { color: #bd081c; } .CategoriesMenu .item:focus { outline: none; } .CategoriesMenu .item:focus, .CategoriesMenu .item:hover { background-color: #ededed; background: -webkit-linear-gradient(#f1f1f1, #e8e8e8); background: linear-gradient(#f1f1f1, #e8e8e8); background: none; background-color: transparent; color: #cb2027; } .CategoriesMenu .AboutLinks { border-top: 1px solid #ebebeb; } .CategoriesMenu .AboutLinks ul { width: 100%; } .CategoriesPage .categoriesSep { border-bottom: 1px solid #ccc; box-shadow: 0 1px 0 #eee; margin: 50px 0 40px; text-align: center; } .CategoriesPage .categoriesSep h2 { background-color: #e9e9e9; color: #8d8d8d; font-size: 14px; margin: 0 auto -8px; text-shadow: 0 1px 0 #eee; width: 220px; } .Category { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; padding: 10px; position: relative; width: 216px; } .Category .hoverMask { bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: background 0.04s linear; transition: background 0.04s linear; border-radius: 3px; box-shadow: none; z-index: 100; } .Category .imageWrapper:hover .hoverMask { background: rgba(255, 255, 255, 0.08); } .Category .imageWrapper:active .hoverMask { background: rgba(255, 255, 255, 0.08); } .Category .name { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555; display: block; font-size: 14px; font-weight: bold; height: 18px; line-height: 18px; margin: 0 3px 6px; position: relative; } .Category .imageWrapper { position: relative; } .Category .imageWrapper::after { border-radius: 6px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 120px; left: 0; position: absolute; top: 0; width: 216px; } .Category .imageWrapper .categoryImage { border-radius: 6px; height: 120px; width: 216px; } .Category .imageWrapper .categoryImage { height: 120px; overflow: hidden; } .FeedUsers { overflow: hidden; width: 236px; } .FeedUsers .User { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; margin-bottom: 14px; } .FeedUsers .User:last-child { margin-bottom: 0; } .Domain .domainWrapper { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; cursor: pointer; padding: 10px; width: 216px; } .Domain .domainWrapper .hoverMask { bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: background 0.04s linear; transition: background 0.04s linear; border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; z-index: 100; } .Domain .domainWrapper .domainLinkWrapper:hover .hoverMask { background: rgba(255, 255, 255, 0.08); } .Domain .domainWrapper .domainLinkWrapper:active .hoverMask { background: rgba(255, 255, 255, 0.08); } .Domain .thumbRow { padding-bottom: 3px; } .Domain .thumbRow::after { clear: both; content: ""; display: table; } .Domain .domainLinkWrapper { display: block; } .Domain .domainName { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555; display: block; font-size: 14px; font-weight: bold; height: 18px; line-height: 18px; margin: 0 3px 6px; position: relative; } .Domain .domainSubtitle { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #8e8e8e; font-size: 12px; margin-left: 3px; } .Domain .thumb { position: relative; overflow: hidden; background-color: #eee; border-radius: 6px; float: left; margin-left: 3px; width: 70px; } .Domain .thumb::after { border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 70px; left: 0; position: absolute; top: 0; width: 70px; } .Domain .thumb .thumbImage { border-radius: 3px; height: 70px; width: 70px; } .Domain .thumb img { display: block; } .Domain .thumb:first-child { margin: 0; } .DomainFeedPage .feedName { color: #333; color: rgba(21, 21, 21, 0.8); font-size: 47px; font-weight: bold; line-height: 52px; margin-left: auto; margin-right: auto; max-width: 736px; text-align: center; word-wrap: break-word; margin-bottom: 21px; margin-top: 33px; } .DomainFeedPage .pinsFrom { color: #999; font-size: 13px; font-weight: normal; padding-bottom: 7px; padding-top: 25px; text-align: center; } .DomainFeedPage .noData { color: #333; text-align: center; display: none; margin-top: 100px; } .DomainFeedPage .noData p { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 17px; margin: 0 0 1em; } .DomainFeedPage .noData .emptyIcon { background: url(https://s.pinimg.com/webapp/style/images/empty_user_pins-1x-977b487f.png) no-repeat; background-size: contain; height: 166px; width: 100px; display: inline-block; margin-bottom: 16px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .DomainFeedPage .noData .emptyIcon { background-image: url(https://s.pinimg.com/webapp/style/images/empty_user_pins-2x-ec575230.png); } } .ExploreTabPage { background: #fff; min-width: 1270px; } .ExploreTabPage.tablet { display: none; } .ExploreTabStory { margin: 0 auto; padding: 45px; width: 1180px; } .ExploreTabStory .exploreTabStoryWrapper { border-radius: 16px; } .ExploreTabStory .exploreTabStoryWrapper.curated { padding: 48px 0; } .ExploreTabStory .exploreTabStoryWrapper .explore_tab_search, .ExploreTabStory .exploreTabStoryWrapper .explore_tab_board, .ExploreTabStory .exploreTabStoryWrapper .explore_tab_user { margin: 0 auto; width: 1008px; } .ExploreTabStory .exploreTabStoryWrapper .explore_tab_pin { margin: 0 auto 20px; width: 1014px; } .ExploreTabStory .seeMoreWrapper { text-align: center; } .ExploreTabStoryHeader { margin-bottom: 20px; text-align: center; } .ExploreTabStoryHeader .bubbleWrapper { display: inline-block; height: 32px; position: relative; width: 80px; } .ExploreTabStoryHeader .bubble { width: 79px; height: 34px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -74px -97px no-repeat; display: inline-block; left: -2px; position: absolute; top: -1px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ExploreTabStoryHeader .bubble { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -128px 0; background-size: 249px 231px; } } .ExploreTabStoryHeader .bubble.boards { background-color: #93b6c1; } .ExploreTabStoryHeader .bubble.users { background-color: #a9ba97; } .ExploreTabStoryHeader .bubble.pins { background-color: #a9ba97; } .ExploreTabStoryHeader .bubble.searches { background-color: #e8bcaf; } .ExploreTabStoryHeader .categoryTitle { color: #fff; font-size: 12px; letter-spacing: -.1px; padding-top: 8px; } .ExploreTabStoryHeader .storyTitle { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #555; font-size: 38px; font-weight: bold; letter-spacing: -2.2px; margin-top: 4px; } .ExploreTabStoryHeader .storyTitle .buttonText:hover { color: #5f5f5f; } .ExploreTabStoryHeader .storySubtitle { color: #555; font-size: 16px; letter-spacing: 0.2px; margin: 4px auto 0; opacity: .5; width: 930px; } .ExploreTabStoryHeader .shareStoryButtonWrapper { float: right; margin-right: 20px; } .ExploreTabStoryHeader .shareStoryButtonWrapper .btn { background-color: rgba(0, 0, 0, 0.1); background-image: none; border: 0; border-radius: 4px; box-shadow: none; color: rgba(0, 0, 0, 0.7); height: 36px; text-shadow: none; height: 31px; opacity: 0.8; padding: 0 16px; } .ExploreTabStoryHeader .shareStoryButtonWrapper .btn:hover { background-color: rgba(0, 0, 0, 0.2); border: 0; } .ExploreTabStoryHeader .shareStoryButtonWrapper .btn:active, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn:focus, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.active { background-color: rgba(0, 0, 0, 0.2); background-image: none; border: 0; box-shadow: none; } .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active { background-color: #bd081c; border: 0; box-shadow: none; color: rgba(0, 0, 0, 0.1); text-shadow: none; } .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary.btn.primary:hover, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary.btn.primaryOnHover:hover:not(.noHoverActive):hover, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:focus, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary.active .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:not(.noHoverActive):active, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:not(.noHoverActive):focus, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active.btn.primary:hover, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active.btn.primaryOnHover:hover:not(.noHoverActive):hover, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active:focus, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active:active, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active.active .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:not(.noHoverActive):active, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active:not(.noHoverActive):focus, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary.active .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active:not(.noHoverActive):active, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active.active .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active:not(.noHoverActive):active { /* the above is for css specificity, will be better after the experiments are shipped to all users */ background: #b7071b; border: 0; box-shadow: none; text-shadow: none; } .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.white, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.white:active { background-color: white; } .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.white:hover { background-color: rgba(0, 0, 0, 0.1); } .ExploreTabStoryHeader.articleHeader .buttonText:hover { color: #555; } .ExploreTabStoryHeader.articleHeader .bubbleWrapper { display: block; margin: 0 auto; } .ExploreTabStoryHeader.articleHeader.flat .storySubtitle { margin-bottom: 30px; } .ExploreTabStorySeeMore { border-radius: 16px; height: auto; margin: 20px auto 0; padding-top: 20px; width: 1100px; } .ExploreTabStorySeeMore.defaultLoaded { background-color: #fff; } .ExploreTabStorySeeMore.exploreTabStorySeeMoreModal { height: 800px; } .ExploreTabStorySeeMore.exploreTabStorySeeMoreModal .contentContainer { height: 640px; overflow-y: auto; position: relative; top: 160px; } .ExploreTabStorySeeMore.exploreTabStorySeeMoreModal .contentContainer.curated { height: 500px; top: 300px; } .ExploreTabStorySeeMoreBlock { padding-bottom: 60px; } .ExploreTabStorySeeMoreBlock .blockTitle { color: #555; font-size: 20px; font-weight: 500; text-align: center; } .ExploreTabStorySeeMoreBlock .blockSubtitle { color: #555; font-size: 16px; letter-spacing: 0.2px; line-height: 1.4; opacity: .5; padding-bottom: 30px; text-align: center; } .ExploreTabStorySeeMoreBlock .blockContent .explore_tab_search, .ExploreTabStorySeeMoreBlock .blockContent .explore_tab_board { width: 1008px; } .ExploreTabStorySeeMoreBlock .blockContent .explore_tab_pin { margin-bottom: 20px; width: 1014px; } .ExploreTabStorySeeMoreBlock .blockContent .explore_tab_user { width: 756px; } .FlashlightEnabledImage { max-width: 100%; position: relative; } .FlashlightEnabledImage > .heightContainer > img { height: 100%; position: absolute; width: 100%; } .FlashlightEnabledImage.unknownImage > .heightContainer > img { position: static; } .FlashlightEnabledImage .flashlightContainer { position: absolute; right: 10px; top: 10px; z-index: 6; } .FlashlightEnabledImage .visualSearchObjectOverlay { height: 0; left: 50%; position: absolute; width: 0; z-index: 6; } .FlashlightEnabledImage .visualLiveSearchOverlayOuterWrapper { display: none; height: 100%; left: 0; position: absolute; width: 100%; z-index: 6; } .FlashlightEnabledImage .visualLiveSearchOverlay { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 6; } .FlashlightEnabledImage .visualLiveSearchOverlayInnerWrapper { display: block; } .FlashlightEnabledImage .visualLiveSearchOverlayInnerWrapper .jcrop-holder { background-color: transparent !important; } .FlashlightEnabledImage .visualLiveSearchOverlayInnerWrapper .jcrop-handle { background-color: transparent; border: 0; height: 20px; width: 20px; } .FlashlightEnabledImage .visualLiveSearchOverlayInnerWrapper .ord-nw { opacity: 100 !important; border-top: 6px solid white; border-left: 6px solid white; margin: 0 !important; } .FlashlightEnabledImage .visualLiveSearchOverlayInnerWrapper .ord-ne { opacity: 100 !important; border-top: 6px solid white; border-right: 6px solid white; margin: 0 !important; } .FlashlightEnabledImage .visualLiveSearchOverlayInnerWrapper .ord-sw { opacity: 100 !important; border-bottom: 6px solid white; border-left: 6px solid white; margin: 0 !important; } .FlashlightEnabledImage .visualLiveSearchOverlayInnerWrapper .ord-se { opacity: 100 !important; border-bottom: 6px solid white; border-right: 6px solid white; margin: 0 !important; } .FlashlightEnabledImage .flashlightAnimationContainer { height: 100%; position: absolute; width: 100%; z-index: 6; } .FlashlightEnabledImage .flashlightAnimationContainer .flashlightAnimationOverlay { background-color: #000; height: 100%; opacity: .4; position: relative; width: 100%; } .FlashlightEnabledImage .flashlightAnimationContainer .flashlightAnimationWrapper { height: 5px; position: absolute; right: 10px; top: 10px; width: 5px; z-index: 7; } .FlashlightEnabledImage .flashlightAnimationContainer .flashlightAnimationWrapper .topRightHandle { opacity: 100 !important; border-top: 6px solid white; border-right: 6px solid white; margin: 0 !important; right: 0; top: 0; } .FlashlightEnabledImage .flashlightAnimationContainer .flashlightAnimationWrapper .topLeftHandle { opacity: 100 !important; border-top: 6px solid white; border-left: 6px solid white; margin: 0 !important; left: 0; top: 0; } .FlashlightEnabledImage .flashlightAnimationContainer .flashlightAnimationWrapper .bottomRightHandle { opacity: 100 !important; border-bottom: 6px solid white; border-right: 6px solid white; margin: 0 !important; bottom: 0; right: 0; } .FlashlightEnabledImage .flashlightAnimationContainer .flashlightAnimationWrapper .bottomLeftHandle { opacity: 100 !important; border-bottom: 6px solid white; border-left: 6px solid white; margin: 0 !important; bottom: 0; left: 0; } .FlashlightEnabledImage .flashlightAnimationContainer .flashlightAnimationWrapper .handle { height: 20px; position: absolute; width: 20px; z-index: 7; } .FlashlightEnabledImage .noDisplay { display: none; } .FlashlightEnabledImage .visible { visibility: visible; } .FlashlightEnabledImage .hidden { visibility: hidden; } .FlashlightEnabledImage .stlDot { background-color: #0084ff; border-radius: 50%; cursor: pointer; height: 24px; opacity: .6; position: absolute; -webkit-transition: .1s; transition: .1s; width: 24px; z-index: 7; } .FlashlightEnabledImage .stlDot.active { -webkit-animation: dotPop .55s; animation: dotPop .55s; } @-webkit-keyframes dotPop { 0% { height: 24px; margin: 0; width: 24px; } 50% { height: 28px; margin: -4px; width: 28px; } 100% { height: 24px; margin: 0; width: 24px; } } @keyframes dotPop { 0% { height: 24px; margin: 0; width: 24px; } 50% { height: 28px; margin: -4px; width: 28px; } 100% { height: 24px; margin: 0; width: 24px; } } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .FindMoreButton { border: 1px solid #efefef; border-radius: 4px; box-sizing: border-box; cursor: pointer; margin: 0 8px; position: relative; width: 172px; } .FindMoreButton.findMoreTopics { height: 214px; margin-bottom: 28px; } .FindMoreButton.findMoreBoards { height: 258px; margin-bottom: 26px; } .FindMoreButton.findMorePinners { height: 241px; margin-bottom: 30px; } .FindMoreButton .findMoreButtonWrapper { left: 50%; position: absolute; text-align: center; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .FindMoreButton .findMoreButtonWrapper .findMoreButtonIcon { width: 41px; height: 42px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -215px -132px no-repeat; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .FindMoreButton .findMoreButtonWrapper .findMoreButtonIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -43px -96px; background-size: 249px 231px; } } .FindMoreButton .findMoreButtonWrapper .findMoreButtonText { color: #b5b5b5; font-size: 21px; font-weight: bold; letter-spacing: -.3px; line-height: 23px; margin-top: 12px; width: 132px; } /* desktop.scss */ .FindMoreButton.findMoreBoards { height: 269px; margin-bottom: 27px; margin-top: 16px; } .FindMoreButton.findMorePinners { height: 245px; } .HomefeedBuilder { height: 802px; padding-top: 20px; width: 1004px; } .HomefeedBuilder .contentContainer { height: 802px; overflow-x: hidden; overflow-y: auto; position: relative; z-index: 11; } .HomefeedBuilderButton { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; cursor: pointer; margin-bottom: 10px; overflow: hidden; padding: 12px 16px; position: relative; } .HomefeedBuilderButton .textContainer { float: left; width: 150px; } .HomefeedBuilderButton .textContainer .titleText { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #555; font-size: 15px; font-weight: bold; line-height: 18px; } .HomefeedBuilderButton .textContainer .subtitleText { color: #b6b6b6; font-size: 12px; line-height: 14px; padding-top: 2px; } .HomefeedBuilderButton .builderIcon { width: 26px; height: 26px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) 0 -214px no-repeat; display: inline-block; float: left; height: 27px; margin: 4px 8px 0 0; width: 27px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .HomefeedBuilderButton .builderIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: 0 -174px; background-size: 249px 231px; } } .HomefeedBuilderButton .arrow { width: 9px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -268px no-repeat; float: right; margin: 0 0 0; position: absolute; right: 16px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .HomefeedBuilderButton .arrow { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -389px -14px; background-size: 399px 382px; } } .HomefeedBuilderContent { height: 565px; padding-top: 237px; position: relative; } .HomefeedBuilderContent .topics, .HomefeedBuilderContent .pinners, .HomefeedBuilderContent .boards, .HomefeedBuilderContent .pins { width: 940px; } .HomefeedBuilderContent .topics .centeredWithinWrapper, .HomefeedBuilderContent .pinners .centeredWithinWrapper, .HomefeedBuilderContent .boards .centeredWithinWrapper, .HomefeedBuilderContent .pins .centeredWithinWrapper { width: 940px; } .HomefeedBuilderContent .pins .centeredWithinWrapper { width: 780px; } .HomefeedBuilderContent.fadeOutUp { -webkit-animation: fadeOutUpAndHide .3s; animation: fadeOutUpAndHide .3s; } .HomefeedBuilderContent.notVisible { opacity: 0; } .HomefeedBuilderGrid .emptyText { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #b5b5b5; font-size: 18px; letter-spacing: -.2px; line-height: 20px; margin: 0 auto 44px; text-align: center; } .HomefeedBuilderGrid .gridWrapper.fadeInUp { -webkit-animation: menu-slide-in-up .3s; animation: menu-slide-in-up .3s; } .HomefeedBuilderHeader { background-image: -webkit-linear-gradient(top, #fff, rgba(255, 255, 255, 0.95)); background-image: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.95)); border-radius: 6px; padding: 40px 0 24px; position: fixed; text-align: center; top: 0; width: 1004px; z-index: 10; } .HomefeedBuilderHeader .titleText { color: #555; font-size: 48px; font-weight: bold; letter-spacing: -1.8px; margin-bottom: 4px; } .HomefeedBuilderHeader .subText { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #b5b5b5; font-size: 18px; letter-spacing: -.2px; line-height: 20px; margin-bottom: 28px; } .HomefeedBuilderHeader .homefeedBuilderBackButton { left: 40px; position: absolute; } .HomefeedBuilderNavBar .navigateBar { text-align: center; } .HomefeedBuilderNavBar .navigateScope { background-color: rgba(0, 0, 0, 0.06); border-radius: 5px; display: inline-block; padding: 2px; text-align: left; } .HomefeedBuilderNavBar .navScopeBtn { background: none; border: 0; color: #b5b5b5; display: inline-block; font-size: 16px; font-weight: bold; height: 37px; margin-right: -4px; min-width: 115px; text-align: center; text-shadow: none; width: 136px; } .HomefeedBuilderNavBar .navScopeBtn.selected { background: #fff; border-radius: 5px; box-shadow: none; color: #141414; text-shadow: none; } .HomefeedBuilderNavBar .navScopeBtn:hover { color: #141414; } .HomefeedBuilderNavBar .navScopeBtn:active { background: #e6e6e6; border-radius: 5px; box-shadow: none; } .navigateBar .HomefeedBuilderNavBar .navScopeBtn:active { background: #000; } .navigateBar .HomefeedBuilderNavBar .navScopeBtn:active .selected { background: #efefef; color: #141414; } .HomefeedBuilderNavBar:active.selected { background: #efefef; color: #141414; } .HomefeedBuilderNavBar .buttonText { font-size: 16px; } .HomefeedBuilderSearchBar { padding: 0 40px; } .HomefeedBuilderSearchBar .searchBar { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; } .HomefeedBuilderSearchBar .searchBar .searchIcon { width: 21px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -115px -242px no-repeat; display: inline-block; left: 20px; position: absolute; top: 12px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .HomefeedBuilderSearchBar .searchBar .searchIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -208px -180px; background-size: 249px 231px; } } .HomefeedBuilderSearchBar .searchBar .searchIcon:focus { visibility: hidden; } .HomefeedBuilderSearchBar .searchBar .loadingIcon { display: inline-block; position: absolute; right: 24px; top: 20px; } .HomefeedBuilderSearchBar .searchBar .search { background: #eee; border: 0; border-radius: 4px; box-shadow: none; color: #9b9b9b; font-size: 16px; letter-spacing: -.2px; outline: none; padding: 12px 0 12px 12px; } .HomefeedBuilderSearchBar .searchBar .search:focus::-webkit-input-placeholder { color: transparent; } .HomefeedBuilderSearchBar .searchBar .search:focus::-moz-placeholder { color: transparent; } .HomefeedBuilderSearchBar .searchBar .search:focus:-ms-input-placeholder { color: transparent; } .HomefeedBuilderSearchBar .searchBar .search:focus::placeholder { color: transparent; } .HomefeedBuilderSearchBar .searchBar .search.searchIconShow { padding: 12px 0 12px 52px; } .SeeMoreButton.btn { background: #efefef; border: 0; border-radius: 4px; color: #555; font-size: 14px; font-weight: bold; height: 33px; text-shadow: none; width: 91px; } .SeeMoreButton.btn:hover, .SeeMoreButton.btn:active { background: #e3e3e3; box-shadow: none; } .SeeMoreButton.hideModule { display: none; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .Interest { height: 136px; position: relative; width: 136px; } .Interest.authLandingPageView { height: 36px; width: auto; } .Interest.authLandingPageView .pillWrapper { border-radius: 4px; } .Interest.authLandingPageView .labelText { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; display: inline-block; font-size: 14px; font-weight: bold; padding: 10px 14px; } .Interest.authLandingPageView span:hover { background: rgba(0, 0, 0, 0.05); } .Interest.homefeedSetupView { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; height: 176px; } .Interest.homefeedSetupView .MockInterestFollowButton.btn { margin: 4px; width: 128px; } .Interest.homefeedSetupView .interestWrapper { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; height: 136px; } .Interest.homefeedSetupView .interestWrapper .interestImage { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .Interest.homefeedSetupView .mask { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .Interest.homefeedSetupViewNoFollowButton { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; height: 136px; } .Interest.homefeedSetupViewNoFollowButton .interestWrapper { box-shadow: none; height: 136px; } .Interest.homefeedBuilderView .interestWrapper:active, .Interest.storyView .interestWrapper:active { -webkit-transform: none; transform: none; } .Interest.homefeedBuilderView .interestWrapper .hoverMask, .Interest.storyView .interestWrapper .hoverMask { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background: transparent; background: -webkit-linear-gradient(transparent, transparent 50%, rgba(51, 51, 51, 0.5) 95%); background: linear-gradient(transparent, transparent 50%, rgba(51, 51, 51, 0.5) 95%); z-index: 100; } .Interest.homefeedBuilderView .interestWrapper .interestLabel, .Interest.storyView .interestWrapper .interestLabel { margin-bottom: 15px; margin-left: 15px; width: auto; width: initial; } .Interest.homefeedBuilderView .interestWrapper .interestLabel h2, .Interest.storyView .interestWrapper .interestLabel h2 { font-size: 16px; font-weight: bold; letter-spacing: -.2px; line-height: 18px; padding: 0; text-shadow: none; } .Interest.homefeedBuilderView .interestWrapper .interestLabel .followerCount, .Interest.storyView .interestWrapper .interestLabel .followerCount { color: #fff; font-size: 12px; letter-spacing: -.3px; line-height: 16px; } .Interest.homefeedBuilderView .interestWrapper .interestLabel .followerCountFollowers, .Interest.storyView .interestWrapper .interestLabel .followerCountFollowers { font-weight: normal; } .Interest.homefeedBuilderView { height: 210px; margin-bottom: 32px; padding: 0 8px; position: relative; width: 172px; } .Interest.homefeedBuilderView .followMask { background-color: rgba(0, 0, 0, 0.7); border-radius: 4px; height: 100%; opacity: 0; position: absolute; -webkit-transition: visibility 0s .2s, opacity .2s linear; transition: visibility 0s .2s, opacity .2s linear; visibility: hidden; width: 100%; z-index: 1; } .Interest.homefeedBuilderView .followMask .followMaskIcon { width: 59px; height: 42px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -215px 0 no-repeat; display: inline-block; margin-left: 57px; margin-top: 65px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Interest.homefeedBuilderView .followMask .followMaskIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -128px -35px; background-size: 249px 231px; } } .Interest.homefeedBuilderView .followMask.visible { opacity: 1; -webkit-transition: opacity .2s linear; transition: opacity .2s linear; visibility: visible; } .Interest.homefeedBuilderView .interestWrapper { border-radius: 4px; height: 172px; margin-bottom: 8px; width: 172px; } .Interest.homefeedBuilderView .interestWrapper:hover .hoverMask { background: rgba(0, 0, 0, 0.15); } .Interest.homefeedBuilderView .interestWrapper:active .hoverMask { background: rgba(0, 0, 0, 0.25); } .Interest.homefeedBuilderView .interestWrapper:hover > .interestImage { background: #fff center; background-size: cover; opacity: .8; } .Interest.storyView { height: auto; height: initial; width: 236px; } .Interest.storyView .interestMaskAndWrapper { display: block; padding: 10px; bottom: 0; left: 0; right: 0; top: 0; } .Interest.storyView .interestWrapper { border-radius: 3px; height: 216px; width: 216px; } .Interest.storyView .Button { margin: 0 10px 10px; width: 216px; } .Interest .selectCheck { width: 21px; height: 21px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) 0 -242px no-repeat; position: absolute; right: 10px; top: 10px; z-index: 101; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Interest .selectCheck { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -208px -136px; background-size: 249px 231px; } } .Interest .selectCheck.checked { width: 21px; height: 21px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -191px -97px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Interest .selectCheck.checked { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -208px -92px; background-size: 249px 231px; } } .Interest .wholeInterestMask { cursor: pointer; position: absolute; z-index: 101; } .Interest .wholeInterestMask .check { width: 35px; height: 35px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -37px no-repeat; background-repeat: no-repeat; margin: 47px; position: absolute; z-index: 102; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Interest .wholeInterestMask .check { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -36px; background-size: 428px 427px; } } .Interest .wholeInterestMask .mask { background-color: #000; border-radius: 6px; height: 136px; opacity: .5; position: absolute; top: 0; width: 136px; } .Interest .overflowMask { background-color: #f0f0f1; border-radius: 6px; height: 100%; position: absolute; width: 100%; z-index: 103; } .Interest .overflowMask.briofy { background-color: #bd081c; } .Interest .overflowMask .mask { display: table; height: 100%; width: 100%; } .Interest .overflowMask .text { color: #a6a8ab; display: table-cell; font-size: 18px; font-weight: bold; padding: 8px; text-align: center; vertical-align: middle; } .Interest .overflowMask .text.briofy { color: #fff; font-size: 24px; line-height: 29px; } .Interest .interestWrapper { overflow: hidden; border-radius: 6px; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25); display: block; height: 136px; position: relative; -webkit-transition: -webkit-transform .1s ease-in-out; transition: -webkit-transform .1s ease-in-out; transition: transform .1s ease-in-out; transition: transform .1s ease-in-out, -webkit-transform .1s ease-in-out; width: 136px; } .Interest .interestWrapper:active { -webkit-transform: scale(0.95); transform: scale(0.95); } .Interest .interestWrapper:active > .interestImage { overflow: hidden; background-color: #000; opacity: .5; } .Interest .interestWrapper .interestImage { background: #fff center; background-size: cover; border-radius: 6px; display: block; height: 100%; opacity: .8; position: relative; -webkit-transition: opacity .1s ease-in-out; transition: opacity .1s ease-in-out; width: 100%; } .Interest .interestWrapper .interestLabel { bottom: 0; position: absolute; width: 100%; z-index: 102; } .Interest .interestWrapper .interestLabel h2 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* stylelint-disable-next-line at-rule-no-unknown */ color: #fff; overflow: hidden; padding: 8px; text-overflow: ellipsis; white-space: normal; } .Interest .interestWrapper img { max-width: 100%; } .Interest.small { height: 110px; width: 110px; } .Interest.small .interestWrapper { height: 110px; width: 110px; } .Interest.microsmall { height: 100px; width: 100px; } .Interest.microsmall .interestWrapper { height: 100px; width: 100px; } .Interest.followingView, .Interest.followingOneClickView, .Interest.followingOneClickHoverView { height: 236px; width: 236px; } .Interest.followingOneClickHoverView .interestFollowButton.btn, .Interest.followingOneClickHoverView .wideInterestFollowButton.btn { display: none; } .Interest.followingOneClickHoverView:hover .interestFollowButton.btn, .Interest.followingOneClickHoverView:hover .wideInterestFollowButton.btn { display: inline-block; } .Interest.followingOneClickView .interestFollowButton.btn, .Interest.followingOneClickHoverView .interestFollowButton.btn { padding: 8px 0 7px; width: 70px; } .Interest.followingOneClickView .interestFollowButton.btn, .Interest.followingOneClickView .wideInterestFollowButton.btn, .Interest.followingOneClickHoverView .interestFollowButton.btn, .Interest.followingOneClickHoverView .wideInterestFollowButton.btn { margin: 10px 10px 0 0; position: absolute; right: 0; top: 0; } /* desktop.scss */ .Interest .interestWrapper { box-shadow: none; cursor: pointer; } .Interest .interestWrapper:focus > .interestImage, .Interest .interestWrapper:hover > .interestImage { overflow: hidden; opacity: 1; } .Interest.large { height: 285px; width: 285px; } .Interest.interestMenuGridItem { height: 90px; width: 90px; } .Interest.storyView { background: none; box-shadow: none; cursor: pointer; margin: -10px; padding: 10px; width: 236px; } .Interest.storyView .interestWrapper { border-radius: 8px; height: 236px; width: 236px; /* stylelint-disable-next-line at-rule-no-unknown */ } .Interest.storyView .interestMaskAndWrapper { padding: 0; } .Interest.storyView .Button { margin: 0; width: 236px; } .InterestCardWrapper { height: 213px; margin-bottom: 28px; margin-left: 8px; margin-right: 8px; width: 172px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .InterestFeedPage { position: relative; } .InterestFeedPage .interestName { color: #333; color: rgba(21, 21, 21, 0.8); font-size: 40px; font-weight: bold; line-height: 45px; margin-left: auto; margin-right: auto; max-width: 736px; text-align: center; word-wrap: break-word; margin-bottom: 10px; margin-top: 20px; } .ja .InterestFeedPage .interestName { font-size: 29px; } .InterestFeedPage .feedHeader { position: relative; text-align: center; z-index: 3; } .InterestFeedPage .feedHeader .feedMainHeader { position: relative; } .InterestFeedPage .feedHeader .authLandingPageTitle { padding: 30px 0; } .InterestFeedPage .feedHeader .interestName { /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ color: #555; margin-top: 0; padding-top: 25px; word-wrap: normal; } .InterestFeedPage .feedHeader .FollowButton { margin-bottom: 20px; } .InterestFeedPage .feedHeader .interestStats { height: 15px; margin: 0 auto 18px; text-align: center; } .InterestFeedPage .feedHeader .interestStats .interestStatsInner { display: inline-block; } .InterestFeedPage .feedHeader .interestStats .interestStatsInner .interestStat { float: left; line-height: 12px; } .InterestFeedPage .feedHeader .interestStats .interestStatsInner .interestStatValue { color: #fff; float: left; font-size: 12px; font-weight: bold; opacity: .7; } .InterestFeedPage .feedHeader .interestStats .interestStatsInner .followCount { margin-right: 15px; } .InterestFeedPage .feedHeader .RelatedInterestsSection { margin: 16px 0; } .InterestFeedPage .feedHeader hr { border-bottom: 0; border-left: 0; border-right: 0; border-top-color: #fff; opacity: .2; width: 240px; } .InterestFeedPage.showOpenNav { background-color: #fff; } .InterestFeedPage.showOpenNav .openNavContainer { min-height: 100vh; } .InterestFeedPage.showOpenNav .openNavContent { background-color: #fff; margin-left: 246px; } @media (min-width: 0px) and (max-width: 999px) { .InterestFeedPage.showOpenNav .openNavContent { margin-left: 0; } } .InterestFeedPage.showOpenNav .openNavSubtitle { color: #555; font-size: 14px; padding-left: 8px; } .InterestFeedPage.showOpenNav .klpTitle { padding-bottom: 32px; padding-left: 5px; padding-top: 32px; } .InterestFeedPage.showOpenNav .RelatedInterestsSection { margin-bottom: 24px; margin-top: 14px; } /* desktop.scss */ .InterestFeedPage .feedHeader { box-sizing: border-box; margin: 0 auto; max-width: 744px; min-width: auto; text-align: left; } .InterestFeedPage .feedHeader .authLandingPageTitle .interestName { /* stylelint-disable-next-line at-rule-no-unknown */ margin: 0; padding: 0; width: 50%; } .InterestFeedPage .feedButtonWrapper { /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ box-sizing: border-box; height: auto; margin: 0 auto; overflow: hidden; } .InterestFeedPage .feedHeader .FollowButton { float: right; margin-bottom: 0; } .InterestFeedPage .feedHeader .interestNameStats { /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ box-sizing: border-box; } .InterestFeedPage .feedHeader .interestName { color: #555; margin-left: 0; margin-right: 0; max-width: 100%; padding-top: 0; text-align: left; } .InterestFeedPage .feedHeader .interestStats { color: #555; font-weight: bold; height: auto; margin-bottom: 0; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* stylelint-disable-next-line at-rule-no-unknown */ } .InterestFeedPage .feedHeader .interestStats .interestStatsValue { font-weight: normal; } .InterestFeedPage .feedHeader .RelatedInterestsSection { margin: 0; } .InterestFeedPage .RelatedInterestsSection > ul { text-align: left; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ } @media (min-width: 800px) { .InterestFeedPage .RelatedInterestsSection > ul { max-width: 645px; } } .InterestFeedPage .RelatedInterestsSection > ul > li { margin-left: 0; /* stylelint-disable-next-line at-rule-no-unknown */ } .InterestFeedPage .RelatedInterestsSection .title { display: none; } .RelatedInterestsSection .title { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #9a9a9a; font-size: 13px; margin: 16px 0; opacity: .6; text-align: center; text-transform: uppercase; } .RelatedInterestsSection.hideTitle { margin-top: 30px; } .RelatedInterestsSection.hideTitle .title { display: none; } .RelatedInterestsSection.highConverting .List { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; height: auto; width: 732px; } .RelatedInterestsSection.highConverting .List .interestLabel { text-align: left; } .RelatedInterestsSection.highConverting .List .interestImage { opacity: .75; } .RelatedInterestsSection > ul { height: 110px; margin: auto; overflow: hidden; overflow-y: hidden; text-align: center; white-space: nowrap; } .RelatedInterestsSection > ul > li { display: inline-block; margin: 0 6px 10px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .TopicFeedPage { position: relative; } .TopicFeedPage .interestName { color: #333; color: rgba(21, 21, 21, 0.8); font-size: 40px; font-weight: bold; line-height: 45px; margin-left: auto; margin-right: auto; max-width: 736px; text-align: center; word-wrap: break-word; margin-bottom: 10px; margin-top: 20px; } .ja .TopicFeedPage .interestName { font-size: 29px; } .TopicFeedPage .feedHeader { /* height: $interestExtendedHeaderHeight; */ position: relative; text-align: center; z-index: 3; } .TopicFeedPage .feedHeader .feedMainHeader { position: relative; } .TopicFeedPage .feedHeader .interestName { /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ margin: 0 auto 20px; padding-top: 25px; word-wrap: normal; } .TopicFeedPage .feedHeader .FollowButton { margin-bottom: 20px; } .TopicFeedPage .feedHeader .interestStats { height: 15px; margin: 0 auto 18px; text-align: center; } .TopicFeedPage .feedHeader .interestStats .interestStatsInner { display: inline-block; } .TopicFeedPage .feedHeader .interestStats .interestStatsInner .interestStat { float: left; line-height: 12px; } .TopicFeedPage .feedHeader .interestStats .interestStatsInner .interestStatValue { color: #fff; float: left; font-size: 12px; font-weight: bold; opacity: .7; } .TopicFeedPage .feedHeader .interestStats .interestStatsInner .followCount { margin-right: 15px; } .TopicFeedPage .feedHeader .RelatedInterestsSection { margin: 16px 0; } .TopicFeedPage .feedHeader hr { border-bottom: 0; border-left: 0; border-right: 0; border-top-color: #fff; opacity: .2; width: 240px; } /* desktop.scss */ .TopicFeedPage .feedHeader { box-sizing: border-box; margin: 0 auto; max-width: 744px; min-width: auto; text-align: left; } .TopicFeedPage .feedButtonWrapper { /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ box-sizing: border-box; height: auto; margin: 0 auto; overflow: hidden; } .TopicFeedPage .feedHeader .FollowButton { float: right; margin-bottom: 0; } .TopicFeedPage .feedHeader .interestNameStats { /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ box-sizing: border-box; } .TopicFeedPage .feedHeader .interestName { color: #555; margin-left: 0; margin-right: 0; max-width: 100%; padding-top: 0; text-align: left; } .TopicFeedPage .feedHeader .interestStats { color: #555; font-weight: bold; height: auto; margin-bottom: 0; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* stylelint-disable-next-line at-rule-no-unknown */ } .TopicFeedPage .feedHeader .interestStats .interestStatsValue { font-weight: normal; } .TopicFeedPage .feedHeader .RelatedInterestsSection { margin: 0; } .TopicFeedPage .RelatedInterestsSection > ul { text-align: left; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ } @media (min-width: 800px) { .TopicFeedPage .RelatedInterestsSection > ul { max-width: 645px; } } .TopicFeedPage .RelatedInterestsSection > ul > li { margin-left: 0; /* stylelint-disable-next-line at-rule-no-unknown */ } .TopicFeedPage .RelatedInterestsSection .title { display: none; } .PinFeedbackConfirmation a, .PinFeedbackConfirmation a:visited { color: #fff; } .PinFeedbackDialog { color: #333; font-size: 14px; width: 558px; } .PinFeedbackDialog .radioOption { border-bottom: solid 1px #ddd; cursor: pointer; padding: 25px; } .PinFeedbackDialog .radioOption input { margin-right: 25px; } .PinFeedbackDialog .radioOption.selected, .PinFeedbackDialog .radioOption:hover { background-color: #f4f4f4; } .PinFeedbackDialog .learnPolicies { float: left; font-size: 12px; margin-top: 7px; } .PinFeedbackDialog .learnPolicies a { color: #bd081c; } .RelatedPinInfo { max-width: 227px; } .RelatedPinInfo .stopShowing { overflow: hidden; } .RelatedPinInfo .action { padding: 17px 14px; } .RemovePinDialog { background-color: #ddd; border: solid 1px #d1d1d1; border-radius: 6px; color: #585858; font-size: 12px; padding: 10px; width: 216px; } .RemovePinDialog .askForFeedback { padding: 4px; } .RemovePinDialog .askForFeedback .openPinFeedback { cursor: pointer; } .RemovePinDialog .feedbackGiven { display: none; padding: 4px; } .RemovePinDialog.submitted .askForFeedback { display: none; } .RemovePinDialog.submitted .feedbackGiven { padding: 4px; display: block; } .RemovePinDialog .askForFeedback { margin-top: 2px; } .RemovePinDialog .feedbackGiven { margin-top: 9px; } .RemovePinDialog .acknowledgement { height: 100%; line-height: 40px; } .RelatedBoards { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; background-color: #fff; width: 236px; } .RelatedBoards h2 { border-bottom: 1px solid #dfdfdf; color: #5f5f5f; font: 14px; padding: 10px 15px; } .RelatedBoards li { clear: both; height: 30px; padding: 5px 15px; } .RelatedBoards li .thumbImageWrapper, .RelatedBoards li .itemTitle { display: inline-block; float: left; } .RelatedBoards li .thumbImageWrapper { position: relative; height: 30px; margin-right: 10px; width: 30px; } .RelatedBoards li .thumbImageWrapper::after { border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 30px; left: 0; position: absolute; top: 0; width: 30px; } .RelatedBoards li .thumbImageWrapper img { border-radius: 3px; height: 30px; width: 30px; } .RelatedBoards li .thumbImageWrapper img { vertical-align: top; } .RelatedBoards li .itemTitle { margin-top: 7px; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; width: 166px; } .RelatedBoards li:first-child { padding-top: 15px; } .RelatedBoards li:last-child { padding-bottom: 15px; } .ContextualSearch { height: 216px; position: relative; width: 216px; } .ContextualSearch .searchImage { height: 100%; width: 100%; background-color: #98958c; background-size: cover; border-radius: 4px; position: relative; } .ContextualSearch .searchImage::after { height: 100%; width: 100%; background: rgba(0, 0, 0, 0.2); border-radius: 4px; content: "\A"; position: absolute; } .ContextualSearch .searchImage:hover::after { background: rgba(0, 0, 0, 0.3); } .ContextualSearch .searchLabel { bottom: 0; margin: 18px; position: absolute; z-index: 102; } .ContextualSearch .searchLabel h2 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; font-size: 20px; letter-spacing: -.2px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); white-space: normal; } .ContextualSearch.exploreTabView { margin: 0 17px 34px; } .SearchGuidesBar { position: relative; z-index: 101; } .SearchGuidesBar .guidesWrapper { height: 85px; overflow: hidden; } .SearchGuidesBar .guidesWrapper .guidesSlider { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 120px; overflow-x: scroll; overflow-y: hidden; } .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer { height: 85px; overflow: hidden; padding: 0 7px; position: relative; } .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer li { float: left; margin: 15px 0; width: 125px; } .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer { cursor: pointer; min-width: 111px; } .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideImgMask { border-radius: 6px; box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.33); height: 55px; position: absolute; width: 111px; } .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideImgMask:hover { background-color: rgba(255, 255, 255, 0.08); } .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideImg { border-radius: 6px; height: 55px; min-width: 111px; } .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText { /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ box-sizing: border-box; color: #fff; display: inline-block; font-weight: bold; margin-left: -112px; max-width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; width: 107px; } .SearchGuidesBar .guidesWrapper .navigator { display: none; height: 85px; position: absolute; top: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; width: 210px; } .SearchGuidesBar .guidesWrapper .navigator.left { background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 0%, #fff 90%); background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 90%); left: 0; } .SearchGuidesBar .guidesWrapper .navigator.left em { width: 35px; height: 85px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -339px 0 no-repeat; cursor: pointer; display: inline-block; opacity: .5; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SearchGuidesBar .guidesWrapper .navigator.left em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -334px 0; background-size: 399px 382px; } } .SearchGuidesBar .guidesWrapper .navigator.left em:hover { opacity: 1; } .SearchGuidesBar .guidesWrapper .navigator.right { background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #fff 90%); background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 90%); right: 0; text-align: right; } .SearchGuidesBar .guidesWrapper .navigator.right em { width: 35px; height: 85px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -302px 0 no-repeat; cursor: pointer; display: inline-block; opacity: .5; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SearchGuidesBar .guidesWrapper .navigator.right em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -298px 0; background-size: 399px 382px; } } .SearchGuidesBar .guidesWrapper .navigator.right em:hover { opacity: 1; } .SearchGuidesBar.tutorialHighlight { height: 85px !important; } .SearchInputToken { float: none; height: auto; } .SearchInputToken.tokenSelected .tokenContainer { background-color: #cb2027 !important; } .SearchInputToken .tokenContainer { border-radius: 6px; color: #fff; cursor: pointer; float: left; font-size: 13px; font-weight: 600; height: 26px; letter-spacing: -.01em; margin: 0; } .SearchInputToken .tokenContainer span { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-radius: 6px 0 0 6px; box-sizing: border-box; float: left; height: 26px; padding: 4px 8px 6px; } .SearchInputToken .tokenContainer span:hover { background-color: rgba(0, 0, 0, 0.06); } .SearchInputToken .tokenContainer span.remove { border-left: 1px solid rgba(255, 255, 255, 0.18); border-radius: 0 6px 6px 0; float: left; padding: 9px 6px 6px 5px; } .SearchInputToken .tokenContainer span.remove em { width: 8px; height: 8px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -363px -246px no-repeat; display: block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SearchInputToken .tokenContainer span.remove em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -389px -83px; background-size: 399px 382px; } } .SearchInputToken.tutorialHighlight { height: 32px !important; } .SearchPage { /* For the carousel transition */ /* For the transition between the texts */ } .SearchPage .debugMacro { margin: 10px; padding: 5px; } .SearchPage .oneBoxContainer { margin-left: auto; margin-right: auto; position: relative; } .SearchPage .placeBoardSearch { color: #333; font-size: 13px; margin-bottom: -7px; margin-top: 14px; padding-left: 14px; } .SearchPage .placeBoardSearch a { color: #333; } .SearchPage .customizationCarousel { height: 240px; margin-bottom: 10px; overflow: hidden; -webkit-transition: height .7s, margin-bottom .7s; transition: height .7s, margin-bottom .7s; -webkit-transition-delay: .3s; transition-delay: .3s; } .SearchPage .customizationCarouselCollapsed { height: 0; margin-bottom: 0; overflow: hidden; } .SearchPage .customizationText { height: 40px; margin-left: 6px; margin-top: 14.5px; position: relative; width: 1000px; } .SearchPage .customizationInstructions { margin-top: 4px; } .SearchPage .customizationWelcome, .SearchPage .customizationInstructions { opacity: 1; position: absolute; -webkit-transition: all .3s; transition: all .3s; -webkit-transition-delay: .3s; transition-delay: .3s; } .SearchPage .customizationTransparent { opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s; } .SearchPageContent .searchTerm { font-weight: bold; } .SearchPageContent .boardSearchTypeSelector { margin-top: 14px; text-align: center; } .SearchPageContent .boardSearchTypeSelector .searchTypeSelectorItem { border: 1px solid #ccc; display: inline-block; padding: 7px 14px; } .SearchPageContent .boardSearchTypeSelector .searchTypeSelectorItem.allBoards { border-radius: 6px 0 0 6px; } .SearchPageContent .boardSearchTypeSelector .searchTypeSelectorItem.placeBoards { border-radius: 0 6px 6px 0; margin-left: -4px; } .SearchPageContent .boardSearchTypeSelector .searchTypeSelectorItem:hover { background: #fff; } .SearchPageContent .boardSearchTypeSelector .searchTypeSelectorItem:active, .SearchPageContent .boardSearchTypeSelector .searchTypeSelectorItem.active { background: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3) inset; } .SearchPageContent .emptyQuery, .SearchPageContent .noResults { font-size: 18px; font-weight: normal; margin: 54px auto; text-align: center; width: 50%; } .SearchPageContent .blankRow { height: 334px; } .SearchPageContent .blankRow .placeholder { background: #efefef; } .SearchPageContent .blankRow .placeholder.big { height: 308px; } .SearchPageContent .blankRow .placeholder.small { height: 263px; } .SearchPageContent .autocorrectContainer { box-sizing: border-box; font-size: 18px; padding-left: 7px; padding-top: 7px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .openHome .TokenizedInput.guided.openHome { margin-left: 48px; } .TokenizedInput.guided.openHome .tokensWrapper .tokenizedItem.inputToken { height: 52px; } .TokenizedInput.guided.openHome .tokensWrapper .tokenizedItem.inputToken .field { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: HelveticaNeue-Bold, 'Helvetica', arial; color: #b5b5b5; font-size: 24px; letter-spacing: -1px; line-height: 1.2; margin: 10px 0; } .TokenizedInput.guided.openHome .tokensWrapper .tokenizedItem.inputToken .field:focus { color: #555; } .TokenizedInput.guided { margin-left: 3px; margin-right: 30px; overflow: hidden; } .TokenizedInput.guided .tokensWrapper { left: 0; overflow: visible; position: relative; -webkit-transition-duration: .25s; transition-duration: .25s; -webkit-transition-property: left; transition-property: left; } .TokenizedInput.guided .tokensWrapper .tokenizedItem { height: 32px; margin: 0; padding-left: 8px; vertical-align: middle; } .TokenizedInput.guided .tokensWrapper .tokenizedItem.inputToken { width: 100%; } .TokenizedInput.guided .tokensWrapper .tokenizedItem.inputToken .field { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #a7a7a7; font-size: 16px; font-weight: 600; height: 32px; line-height: 20px; padding: 6px 0 6px 4px; } .TokenizedInput.guided .tokensWrapper .tokenizedItem.inputToken .field:focus { color: #333; } .TokenizedInput.guided.typeaheadWithTitles { margin-left: 12px; } .TokenizedInput.guided .removeAll { border-radius: 0 6px 6px 0; cursor: pointer; display: inline-block; margin-top: -6px; position: absolute; right: 10px; top: 50%; -webkit-transition: display 1s linear; transition: display 1s linear; } .TokenizedInput.guided .removeAll.hidden { display: none; } .TokenizedInput.guided .removeAll em { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -149px no-repeat; float: left; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .TokenizedInput.guided .removeAll em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -357px -240px; background-size: 399px 382px; } } .TokenizedInput.guided .removeAll:hover em { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -79px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .TokenizedInput.guided .removeAll:hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -163px -109px; background-size: 399px 382px; } } .TokenizedInput.guided .removeAll:active em, .TokenizedInput.guided .removeAll.active em { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -93px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .TokenizedInput.guided .removeAll:active em, .TokenizedInput.guided .removeAll.active em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -321px -258px; background-size: 399px 382px; } } .TokenizedInput.drawerNav { margin-left: 3px; margin-right: 30px; overflow: hidden; width: 100%; } .TokenizedInput.drawerNav .tokensWrapper { left: 0; overflow: visible; position: relative; -webkit-transition-duration: .25s; transition-duration: .25s; -webkit-transition-property: left; transition-property: left; } .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem { height: 32px; vertical-align: middle; } .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem.inputToken { width: 100%; } .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem.inputToken .field { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #a7a7a7; font-size: 16px; font-weight: 600; height: 32px; line-height: 20px; padding: 6px 0 6px 4px; } .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem.inputToken .field:focus { color: #333; } .TokenizedInput.drawerNav.typeaheadWithTitles { margin-left: 12px; } .TokenizedInput.drawerNav .removeAll { border-radius: 0 6px 6px 0; cursor: pointer; display: none; padding: 10px; position: absolute; right: 0; top: 0; -webkit-transition: display 1s linear; transition: display 1s linear; } .TokenizedInput.drawerNav .removeAll em { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -149px no-repeat; float: left; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .TokenizedInput.drawerNav .removeAll em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -357px -240px; background-size: 399px 382px; } } .TokenizedInput.drawerNav .removeAll:hover em { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -79px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .TokenizedInput.drawerNav .removeAll:hover em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -163px -109px; background-size: 399px 382px; } } .TokenizedInput.drawerNav .removeAll:active em, .TokenizedInput.drawerNav .removeAll.active em { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -93px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .TokenizedInput.drawerNav .removeAll:active em, .TokenizedInput.drawerNav .removeAll.active em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -321px -258px; background-size: 399px 382px; } } .TokenizedInput .tokensWrapper { -webkit-overflow-scrolling: touch; overflow-x: auto; overflow-y: hidden; cursor: text; float: left; min-height: 1px; white-space: nowrap; width: 100%; } .InternalModuleCatalog .TokenizedInput .tokensWrapper { border: 1px solid #ff0; } .InternalModuleCatalog .TokenizedInput .tokensWrapper input { background: #0f0; border: 1px solid #f00; } .InternalModuleCatalog .TokenizedInput .tokensWrapper input.tokenSelected { background: none; border-color: #333; } .TokenizedInput .tokensWrapper input { background: transparent; border: 0; box-shadow: none; font-size: 14px; } .TokenizedInput .tokensWrapper input:focus { outline: none; } .TokenizedInput.userCircleSelect { width: 100%; } .TokenizedInput.userCircleSelect .tokenizedItem.inputToken { width: 100%; } .TokenizedInput .tokenizedItem { overflow: hidden; color: #000; display: inline-block; height: auto; margin: 3px; white-space: nowrap; } .TokenizedInput .scrollWrapper { overflow: hidden; } /* desktop.scss */ .TokenizedInput.guided { width: 100%; } .TokenizedInput.guided.typeaheadWithTitles { margin-left: 0; } .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem { height: auto; /* stylelint-disable-next-line at-rule-no-unknown */ } .TokenizedInput.guided .tokensWrapper .tokenizedItem.inputToken .field { height: auto; line-height: auto; padding: 0; } .TokenizedInput.guided .tokensWrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .TokenizedInput.guided .tokensWrapper .tokenizedItem { -webkit-box-flex: 0; -ms-flex: none; flex: none; height: auto; /* stylelint-disable-next-line at-rule-no-unknown */ } .TokenizedInput.guided .tokensWrapper .tokenizedItem.inputToken { /* Fix for Chrome 44 bug: https://code.google.com/p/chromium/issues/detail?id=506893 */ -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; /* 1 */ min-width: 0; /* 1 */ width: auto; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .ExploreStory { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; background-color: transparent; box-shadow: none; display: inline-block; width: 236px; } /* desktop.scss */ .ExploreStory .storyWrapper { cursor: zoom-in; margin: -10px; padding: 10px; position: relative; } .ExploreStory .storyWrapper::before { background: rgba(0, 0, 0, 0.05); border-radius: 8px; content: " "; height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; -webkit-transform: scale(0.96); transform: scale(0.96); width: 100%; z-index: 3; } .ExploreStory .storyWrapper:not(.storyWrapperDisableHover):hover::before { -webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; } .ExploreStory .storyWrapper .creditItem:hover { background: inherit; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .ExploreStoryCredits { -webkit-backface-visibility: hidden; backface-visibility: hidden; background: #fff; border-radius: 6px; } .ExploreStoryCredits .creditItem { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; border-radius: 0 0 6px 6px; display: block; line-height: 14px; padding: 5px 14px; z-index: 3; } .ExploreStoryCredits .creditItem .creditImg { position: relative; border-radius: 2px; float: left; height: 30px; margin-right: 5px; width: 30px; } .ExploreStoryCredits .creditItem .creditImg::after { border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 30px; left: 0; position: absolute; top: 0; width: 30px; } .ExploreStoryCredits .creditItem .creditImg img { border-radius: 3px; height: 30px; width: 30px; } .ExploreStoryCredits .creditItem .creditImg.user { position: relative; border-radius: 50%; } .ExploreStoryCredits .creditItem .creditImg.user::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 30px; left: 0; position: absolute; top: 0; width: 30px; } .ExploreStoryCredits .creditItem .creditImg.user img { border-radius: 50%; height: 30px; width: 30px; } .ExploreStoryCredits .creditItem .creditName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #999; display: block; } .ExploreStoryCredits .creditItem .creditName h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; } .ExploreStoryCredits .creditItem .creditTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #717171; } .ExploreStoryCredits .creditItem:active .creditTitle { color: #717171; } .ExploreStoryCredits .creditItem:active .creditName { color: #999; } .ExploreStoryCredits .creditItem .span { vertical-align: middle; } .ExploreStoryCredits .pinCredits { font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-weight: bold; border-top: 1px solid #e7e7e7; color: #777; } .ExploreStoryCredits .pinCredits.userBoardCondensed .creditName { margin-top: 2px; } .ExploreStoryCredits .pinCredits button { z-index: 3; } .ExploreStoryCredits .creditItem { line-height: 15px; padding: 10px; position: relative; } .ExploreStoryCredits .creditItem .creditTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow: hidden; color: #555; display: block; font-weight: normal; } .ExploreStoryCredits .creditItem .creditName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555; font-weight: bold; } .ExploreStoryCredits .storyCreditWrapper { border-radius: 0 0 6px 6px; border-top: 1px solid #e7e7e7; position: relative; } .ExploreStoryCredits .storyCreditWrapper .creditTitle, .ExploreStoryCredits .storyCreditWrapper .creditName { width: 151px; } .ExploreStoryCredits .storyCreditWrapper:hover { background-color: #f1f1f1; } .ExploreStoryCredits .creditFooter { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-top: 1px solid #e7e7e7; color: #555; font-size: 11px; font-weight: bold; overflow: hidden; padding: 9px 12px; text-overflow: ellipsis; white-space: nowrap; } .ExploreStoryCredits .storyCredits { font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-weight: bold; color: #777; font-size: 11px; } /* desktop.scss */ .ExploreStoryCredits .storyCredits { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .ExploreStoryCredits .storyCredits > .storyCreditWrapper { /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: none; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } .ExploreStoryCredits .storyCredits > .storyCreditWrapper::before { background: rgba(0, 0, 0, 0.05); border-radius: 4px; content: " "; height: calc(100% + 10px); left: 0; opacity: 0; pointer-events: none; position: absolute; top: -5px; -webkit-transform: scale(0.96); transform: scale(0.96); width: 100%; z-index: 3; } .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem { /* Fix for Chrome 44 bug: https://code.google.com/p/chromium/issues/detail?id=506893 */ border-radius: 4px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; max-width: 100%; min-height: 0; /* 1 */ min-width: 0; /* 1 */ overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: nowrap; /* stylelint-disable-next-line at-rule-no-unknown */ } .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem:hover { color: #555; } .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem > a { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditName, .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditTitle { color: #555; width: 125px; } .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditName { font-weight: bold; } .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditTitle { font-weight: normal; } .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditImg.user::after { display: none; } .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditImg, .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditImg img { height: 36px; width: 36px; } .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditImg { background-color: #efefef; -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-right: 8px; } .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditImg::after { display: none; } .ExploreStoryCredits .storyCredits > .storyCreditWrapper:hover { background: transparent; } .ExploreStoryCredits .storyCredits > .storyCreditWrapper:hover::before { -webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; } .ExploreStoryCredits .storyCredits > .creditItem { border-radius: 4px; max-width: 100%; overflow: hidden; padding-bottom: 0; padding-top: 0; text-overflow: ellipsis; white-space: nowrap; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ } .ExploreStoryCredits .storyCredits > .creditItem:hover { background-color: #efefef; } .ExploreStoryCredits .storyCredits > .creditItem > a { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .ExploreStoryCredits .storyCredits > .creditItem .creditName, .ExploreStoryCredits .storyCredits > .creditItem .creditTitle { color: #b5b5b5; max-width: 160px; } .ExploreStoryCredits .storyCredits > .creditItem .creditName { font-weight: normal; } .ExploreStoryCredits .storyCredits > .creditItem .creditTitle { font-weight: bold; } .ExploreStoryCredits .storyCredits .creditFooter { border-top: none; padding: 10px 0 0; /* stylelint-disable-next-line at-rule-no-unknown */ } /* stylelint-disable-next-line at-rule-no-unknown */ .Snackbox { background-color: #fff; cursor: pointer; padding-bottom: 12px; position: absolute; visibility: hidden; width: 236px; } .Snackbox.insertedSnackbox { position: static; visibility: visible; } .Snackbox.insertedSnackbox.animated .item.normal:nth-child(2) { -webkit-animation: pinSlideIn .2s forwards ease-out; animation: pinSlideIn .2s forwards ease-out; -webkit-animation-delay: .25s; animation-delay: .25s; opacity: 0; } .Snackbox.insertedSnackbox.animated .item.normal:nth-child(3) { -webkit-animation: pinSlideIn .2s forwards ease-out; animation: pinSlideIn .2s forwards ease-out; -webkit-animation-delay: .18s; animation-delay: .18s; opacity: 0; } .Snackbox.insertedSnackbox.animated .item.normal:nth-child(4) { -webkit-animation: pinSlideIn .2s forwards ease-out; animation: pinSlideIn .2s forwards ease-out; -webkit-animation-delay: .32s; animation-delay: .32s; opacity: 0; } .Snackbox.insertedSnackbox.animated .item.normal:nth-child(5) { -webkit-animation: pinSlideIn .2s forwards ease-out; animation: pinSlideIn .2s forwards ease-out; -webkit-animation-delay: .36s; animation-delay: .36s; opacity: 0; } .Snackbox.insertedSnackbox.animated .item.small:nth-child(2), .Snackbox.insertedSnackbox.animated .item.large:nth-child(2) { -webkit-animation: pinSlideIn .2s forwards ease-out; animation: pinSlideIn .2s forwards ease-out; -webkit-animation-delay: .18s; animation-delay: .18s; opacity: 0; } .Snackbox.insertedSnackbox.animated .item.small:nth-child(3), .Snackbox.insertedSnackbox.animated .item.large:nth-child(3) { -webkit-animation: pinSlideIn .2s forwards ease-out; animation: pinSlideIn .2s forwards ease-out; -webkit-animation-delay: .25s; animation-delay: .25s; opacity: 0; } .Snackbox.insertedSnackbox.animated .item.small:nth-child(4), .Snackbox.insertedSnackbox.animated .item.large:nth-child(4) { -webkit-animation: pinSlideIn .2s forwards ease-out; animation: pinSlideIn .2s forwards ease-out; -webkit-animation-delay: .32s; animation-delay: .32s; opacity: 0; } .Snackbox .snackboxTitle { color: #b5b5b5; font-size: 13px; height: 14px; letter-spacing: -.4px; padding-bottom: 8px; } .Snackbox .snackboxImagesWrapper { -ms-flex-line-pack: start; align-content: flex-start; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column wrap; flex-flow: column wrap; margin: 0 auto; width: 236px; } .Snackbox .item { background-position: center; background-size: cover; border-radius: 8px; box-sizing: border-box; display: inline-block; margin: 2px; overflow: hidden; width: 114px; } .Snackbox .item.large:nth-child(1) { background-size: 100% 100%; } .Snackbox.itemsHidden .item:nth-child(1) { visibility: hidden; } .Snackbox.itemsHidden .item:nth-child(2) { visibility: hidden; } .Snackbox.itemsHidden .item:nth-child(3) { visibility: hidden; } .Snackbox.itemsHidden .item:nth-child(4) { visibility: hidden; } .Snackbox.itemsHidden .item:nth-child(5) { visibility: hidden; } .Snackbox.showSnackbox { position: static; position: initial; visibility: visible; } .Snackbox.showSnackbox .item.normal:nth-child(1) { visibility: visible; } .Snackbox.showSnackbox .item.normal:nth-child(2) { -webkit-animation: u1409122d 0.25s forwards; animation: u1409122d 0.25s forwards; -webkit-animation-timing-function: ease; animation-timing-function: ease; } @-webkit-keyframes u1409122d { 0% { opacity: 0; -webkit-transform: translate(-10px, 10px); transform: translate(-10px, 10px); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } @keyframes u1409122d { 0% { opacity: 0; -webkit-transform: translate(-10px, 10px); transform: translate(-10px, 10px); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } .Snackbox.showSnackbox .item.normal:nth-child(3) { -webkit-animation: u4b306172 0.25s forwards; animation: u4b306172 0.25s forwards; -webkit-animation-timing-function: ease; animation-timing-function: ease; } @-webkit-keyframes u4b306172 { 0% { opacity: 0; -webkit-transform: translate(10px, -10px); transform: translate(10px, -10px); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } @keyframes u4b306172 { 0% { opacity: 0; -webkit-transform: translate(10px, -10px); transform: translate(10px, -10px); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } .Snackbox.showSnackbox .item.normal:nth-child(4) { -webkit-animation: ufee7f1dc 0.25s forwards; animation: ufee7f1dc 0.25s forwards; -webkit-animation-timing-function: ease; animation-timing-function: ease; } @-webkit-keyframes ufee7f1dc { 0% { opacity: 0; -webkit-transform: translate(10px, 0); transform: translate(10px, 0); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } @keyframes ufee7f1dc { 0% { opacity: 0; -webkit-transform: translate(10px, 0); transform: translate(10px, 0); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } .Snackbox.showSnackbox .item.normal:nth-child(5) { -webkit-animation: uf1cad8a5 0.25s forwards; animation: uf1cad8a5 0.25s forwards; -webkit-animation-timing-function: ease; animation-timing-function: ease; } @-webkit-keyframes uf1cad8a5 { 0% { opacity: 0; -webkit-transform: translate(10px, 10px); transform: translate(10px, 10px); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } @keyframes uf1cad8a5 { 0% { opacity: 0; -webkit-transform: translate(10px, 10px); transform: translate(10px, 10px); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } .Snackbox.showSnackbox .item.large:nth-child(1) { visibility: visible; } .Snackbox.showSnackbox .item.large:nth-child(2) { -webkit-animation: ub63f37cd 0.25s forwards; animation: ub63f37cd 0.25s forwards; -webkit-animation-timing-function: ease; animation-timing-function: ease; } @-webkit-keyframes ub63f37cd { 0% { opacity: 0; -webkit-transform: translate(10px, -10px); transform: translate(10px, -10px); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } @keyframes ub63f37cd { 0% { opacity: 0; -webkit-transform: translate(10px, -10px); transform: translate(10px, -10px); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } .Snackbox.showSnackbox .item.large:nth-child(3) { -webkit-animation: u5eb7ae19 0.25s forwards; animation: u5eb7ae19 0.25s forwards; -webkit-animation-timing-function: ease; animation-timing-function: ease; } @-webkit-keyframes u5eb7ae19 { 0% { opacity: 0; -webkit-transform: translate(10px, 0); transform: translate(10px, 0); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } @keyframes u5eb7ae19 { 0% { opacity: 0; -webkit-transform: translate(10px, 0); transform: translate(10px, 0); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } .Snackbox.showSnackbox .item.large:nth-child(4) { -webkit-animation: uf3e7f3ab 0.25s forwards; animation: uf3e7f3ab 0.25s forwards; -webkit-animation-timing-function: ease; animation-timing-function: ease; } @-webkit-keyframes uf3e7f3ab { 0% { opacity: 0; -webkit-transform: translate(10px, 10px); transform: translate(10px, 10px); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } @keyframes uf3e7f3ab { 0% { opacity: 0; -webkit-transform: translate(10px, 10px); transform: translate(10px, 10px); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } .Snackbox.showSnackbox .item.small:nth-child(1) { visibility: visible; } .Snackbox.showSnackbox .item.small:nth-child(2) { -webkit-animation: ub83a8bce 0.25s forwards; animation: ub83a8bce 0.25s forwards; -webkit-animation-timing-function: ease; animation-timing-function: ease; } @-webkit-keyframes ub83a8bce { 0% { opacity: 0; -webkit-transform: translate(-10px, 10px); transform: translate(-10px, 10px); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } @keyframes ub83a8bce { 0% { opacity: 0; -webkit-transform: translate(-10px, 10px); transform: translate(-10px, 10px); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } .Snackbox.showSnackbox .item.small:nth-child(3) { -webkit-animation: u0a7e1702 0.25s forwards; animation: u0a7e1702 0.25s forwards; -webkit-animation-timing-function: ease; animation-timing-function: ease; } @-webkit-keyframes u0a7e1702 { 0% { opacity: 0; -webkit-transform: translate(10px, -10px); transform: translate(10px, -10px); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } @keyframes u0a7e1702 { 0% { opacity: 0; -webkit-transform: translate(10px, -10px); transform: translate(10px, -10px); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } .Snackbox.showSnackbox .item.small:nth-child(4) { -webkit-animation: u2cf0e41c 0.25s forwards; animation: u2cf0e41c 0.25s forwards; -webkit-animation-timing-function: ease; animation-timing-function: ease; } @-webkit-keyframes u2cf0e41c { 0% { opacity: 0; -webkit-transform: translate(10px, 10px); transform: translate(10px, 10px); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } @keyframes u2cf0e41c { 0% { opacity: 0; -webkit-transform: translate(10px, 10px); transform: translate(10px, 10px); visibility: visible; } 100% { opacity: 1; -webkit-transform: translate(0); transform: translate(0); visibility: visible; } } .Snackbox.showFirstPin { position: static; position: initial; visibility: visible; } .Snackbox.showFirstPin .item:nth-child(1) { visibility: visible; } /* stylelint-disable-next-line at-rule-no-unknown */ .SnackboxResults { background-color: #fff; padding-left: 24px; position: relative; } .SnackboxResults .snackboxTitle { width: 2198px; /* stylelint-disable-next-line at-rule-no-unknown */ background-color: #fff; color: #555; font-size: 28px; font-weight: bold; left: 0; letter-spacing: -.8px; margin: 0 auto; padding: 54px 16px 32px; position: absolute; right: 0; z-index: 670; } @media (min-width: 250px) and (max-width: 499px) { .SnackboxResults .snackboxTitle { width: 216px; } } @media (min-width: 500px) and (max-width: 749px) { .SnackboxResults .snackboxTitle { width: 476px; } } @media (min-width: 0) and (max-width: 999px) { .SnackboxResults .snackboxTitle { width: 736px; } } @media (min-width: 1000px) and (max-width: 1249px) { .SnackboxResults .snackboxTitle { width: 996px; } } @media (min-width: 1250px) and (max-width: 1499px) { .SnackboxResults .snackboxTitle { width: 1256px; } } @media (min-width: 1500px) and (max-width: 1749px) { .SnackboxResults .snackboxTitle { width: 1516px; } } @media (min-width: 1750px) and (max-width: 1999px) { .SnackboxResults .snackboxTitle { width: 1776px; } } @media (min-width: 2000px) and (max-width: 2249px) { .SnackboxResults .snackboxTitle { width: 2036px; } } @media (min-width: 2250px) and (max-width: 2499px) { .SnackboxResults .snackboxTitle { width: 2296px; } } @media (min-width: 2500px) and (max-width: 2749px) { .SnackboxResults .snackboxTitle { width: 2556px; } } @media (min-width: 2750px) and (max-width: 2999px) { .SnackboxResults .snackboxTitle { width: 2816px; } } .SnackboxResults .contentContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 90px; } .SnackboxResults .contentContainer .snackboxImage { height: calc(100vh - 138px); margin-top: 40px; padding-right: 10px; width: 236px; } .SnackboxResults .contentContainer .snackboxResults { width: 2000px; /* stylelint-disable-next-line at-rule-no-unknown */ height: calc(100vh - 108px); padding-top: 10px; } @media (min-width: 250px) and (max-width: 499px) { .SnackboxResults .contentContainer .snackboxResults { width: 20px; } } @media (min-width: 500px) and (max-width: 749px) { .SnackboxResults .contentContainer .snackboxResults { width: 280px; } } @media (min-width: 0) and (max-width: 999px) { .SnackboxResults .contentContainer .snackboxResults { width: 540px; } } @media (min-width: 1000px) and (max-width: 1249px) { .SnackboxResults .contentContainer .snackboxResults { width: 800px; } } @media (min-width: 1250px) and (max-width: 1499px) { .SnackboxResults .contentContainer .snackboxResults { width: 1060px; } } @media (min-width: 1500px) and (max-width: 1749px) { .SnackboxResults .contentContainer .snackboxResults { width: 1320px; } } @media (min-width: 1750px) and (max-width: 1999px) { .SnackboxResults .contentContainer .snackboxResults { width: 1580px; } } @media (min-width: 2000px) and (max-width: 2249px) { .SnackboxResults .contentContainer .snackboxResults { width: 1840px; } } @media (min-width: 2250px) and (max-width: 2499px) { .SnackboxResults .contentContainer .snackboxResults { width: 2100px; } } @media (min-width: 2500px) and (max-width: 2749px) { .SnackboxResults .contentContainer .snackboxResults { width: 2360px; } } @media (min-width: 2750px) and (max-width: 2999px) { .SnackboxResults .contentContainer .snackboxResults { width: 2620px; } } .SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper { width: 2000px; /* stylelint-disable-next-line at-rule-no-unknown */ } @media (min-width: 250px) and (max-width: 499px) { .SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper { width: 20px; } } @media (min-width: 500px) and (max-width: 749px) { .SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper { width: 280px; } } @media (min-width: 0) and (max-width: 999px) { .SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper { width: 540px; } } @media (min-width: 1000px) and (max-width: 1249px) { .SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper { width: 800px; } } @media (min-width: 1250px) and (max-width: 1499px) { .SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper { width: 1060px; } } @media (min-width: 1500px) and (max-width: 1749px) { .SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper { width: 1320px; } } @media (min-width: 1750px) and (max-width: 1999px) { .SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper { width: 1580px; } } @media (min-width: 2000px) and (max-width: 2249px) { .SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper { width: 1840px; } } @media (min-width: 2250px) and (max-width: 2499px) { .SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper { width: 2100px; } } @media (min-width: 2500px) and (max-width: 2749px) { .SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper { width: 2360px; } } @media (min-width: 2750px) and (max-width: 2999px) { .SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper { width: 2620px; } } .TopicStoryWrapper { display: block; min-height: 236px; position: relative; } .SuggestedBoardsDropdown { max-width: 300px; padding: 10px 0; } .SuggestedBoardsDropdown .Board .dismiss { display: none; } .SuggestedBoardsDropdown .Board .followBoardItem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .SuggestedBoardsDropdown .Board .followConfirmation { padding: 14px; } .SuggestedBoardsDropdown h3 { color: #5f5f5f; margin: 0 14px 5px; margin-bottom: 5px; } .SuggestedUsersDropdown { max-width: 300px; padding: 10px 0; } .SuggestedUsersDropdown .User .dismiss { display: none; } .SuggestedUsersDropdown .User .contactUser { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .SuggestedUsersDropdown .User .contactConfirmation { padding: 14px; } .SuggestedUsersDropdown h3 { color: #5f5f5f; margin: 0 14px 5px; margin-bottom: 5px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .AggregatedCloseupCard .hr { margin-top: 16px; } .AggregatedCloseupCard .pinActivityContainer { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 14px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .AggregatedCloseupCard .pinActivityContainer .pinActivity { display: -webkit-box; display: -ms-flexbox; display: flex; } .AggregatedCloseupCard .pinActivityContainer .pinActivity .userActivity { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 15px; } .AggregatedCloseupCard .pinActivityContainer .pinActivity .userActivity a { color: #444; } .AggregatedCloseupCard .pinActivityContainer .pinActivity .userActivity a.blue { color: #004b91; font-weight: normal; } .AggregatedCloseupCard .pinActivityContainer .pinActivity .userActivity .userNote { line-height: normal; line-height: initial; margin: 0; word-break: break-word; word-wrap: break-word; } .AggregatedCloseupCard .pinActivityContainer .pinActivity .userActivity.native { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .AggregatedCloseupCard .pinActivityContainer .activityTimeSince { color: #b9b9b9; } .AggregatedCloseupCard .pinActivityContainer.center .userActivity, .AggregatedCloseupCard .pinActivityContainer.center .activityTimeSince { padding-top: 8px; } .AggregatedCloseupCard .previewContainer { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px 8px; } .AggregatedCloseupCard .repinsLikesActivityIcon { margin-right: 8px; } .AggregatedCloseupCard .repinsLikesActivityIcon em { width: 42px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -119px -234px no-repeat; cursor: pointer; display: block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AggregatedCloseupCard .repinsLikesActivityIcon em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -117px -231px; background-size: 399px 382px; } } .AggregatedCloseupCard .savedByHeader { cursor: pointer; padding-left: 8px; } .AggregatedCloseupCard .savedByHeader .feedPreview { display: -webkit-box; display: -ms-flexbox; display: flex; } .AggregatedCloseupCard .userProfile { margin-right: 16px; position: relative; } .AggregatedCloseupCard .boardCountHeader { color: #444; font-size: 18px; font-weight: normal; padding-bottom: 8px; } .AggregatedCloseupCard .boardCountHeader .count { font-weight: bold; } /* desktop.scss */ .AggregatedCloseupCard { padding: 16px 32px 32px; } .AggregatedCloseupCard .pinActivityContainer { padding: 0 8px; } .DidItActionDropdown li { padding: 2px 0; } .DidItActionDropdown li .didItActionDropdownButton { background: #fff; border: 0; border-radius: 2px; color: #5f5f5f; font-size: 14px; font-weight: bold; outline: 0; padding: 8px 16px; text-align: left; width: 100%; } .DidItActionDropdown li .didItActionDropdownButton:hover { background: #f1f1f1; } .DidItActivitySummary .previewContainer { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px 40px; } .DidItActivitySummary .activityRepContainer { padding-bottom: 8px; position: relative; } .DidItActivitySummary .savedByContainer { padding-left: 16px; width: 364px; } .DidItActivitySummary .savedByHeader { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .DidItActivitySummary .activitySummary { color: #444; font-size: 15px; font-weight: normal; line-height: 40px; padding-right: 16px; } .DidItActivitySummary .activitySummary .count { font-weight: bold; } .DidItActivitySummary .feedPreview { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px 0 12px; } .DidItUserFeed { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 14px 0; } .DidItUserFeed .activityItem { background: #fff; border-radius: 8px; margin-bottom: 8px; padding: 32px; } .DidItUserFeed .feedLoading { background: url(https://s.pinimg.com/webapp/style/images/spinner-medium-1x-dbb1334f.gif) no-repeat; background-size: contain; height: 32px; width: 32px; display: inline-block; opacity: .5; display: none; margin: 32px auto; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .DidItUserFeed .feedLoading { background-image: url(https://s.pinimg.com/webapp/style/images/spinner-medium-2x-3ffcb44b.gif); } } .DidItUserFeed .feedLoading.displayed { display: -webkit-box; display: -ms-flexbox; display: flex; } .FlagDidIt .modalDescription { color: #999; display: table; font-size: 13px; height: 360px; width: 600px; } .FlagDidIt .modalDescription > div { display: table-cell; padding: 0 85px; text-align: center; vertical-align: middle; } .FlagDidIt .modalDescription .fileButton { display: inline-block; margin: 20px auto 0; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ /* stylelint-disable-next-line at-rule-blacklist */ /* jquery.Jcrop.css v0.9.12 - MIT License */ /* The outer-most container in a typical Jcrop instance If you are having difficulty with formatting related to styles on a parent element, place any fixes here or in a like selector You can also style this element if you want to add a border, etc A better method for styling can be seen below with .jcrop-light (Add a class to the holder and style elements for that extended class) */ .jcrop-holder { position: absolute; top: 0; direction: ltr; text-align: left; /* IE10 touch compatibility */ -ms-touch-action: none; } /* Selection Border */ .jcrop-vline, .jcrop-hline { font-size: 0; position: absolute; } .jcrop-vline { height: 100%; width: 1px !important; } .jcrop-vline.right { right: 0; } .jcrop-hline { height: 1px !important; width: 100%; } .jcrop-hline.bottom { bottom: 0; } /* Invisible click targets */ .jcrop-tracker { height: 100%; width: 100%; /* "turn off" link highlight */ -webkit-tap-highlight-color: transparent; /* disable callout, image save panel */ -webkit-touch-callout: none; /* disable cut copy paste */ -webkit-user-select: none; } /* Selection Handles */ .jcrop-handle { background-color: #333333; border: 1px #eeeeee solid; width: 7px; height: 7px; font-size: 1px; } .jcrop-handle.ord-n { left: 50%; margin-left: -4px; margin-top: -4px; top: 0; } .jcrop-handle.ord-s { bottom: 0; left: 50%; margin-bottom: -4px; margin-left: -4px; } .jcrop-handle.ord-e { margin-right: -4px; margin-top: -4px; right: 0; top: 50%; } .jcrop-handle.ord-w { left: 0; margin-left: -4px; margin-top: -4px; top: 50%; } .jcrop-handle.ord-nw { left: 0; margin-left: -4px; margin-top: -4px; top: 0; } .jcrop-handle.ord-ne { margin-right: -4px; margin-top: -4px; right: 0; top: 0; } .jcrop-handle.ord-se { bottom: 0; margin-bottom: -4px; margin-right: -4px; right: 0; } .jcrop-handle.ord-sw { bottom: 0; left: 0; margin-bottom: -4px; margin-left: -4px; } /* Dragbars */ .jcrop-dragbar.ord-n, .jcrop-dragbar.ord-s { height: 7px; width: 100%; } .jcrop-dragbar.ord-e, .jcrop-dragbar.ord-w { height: 100%; width: 7px; } .jcrop-dragbar.ord-n { margin-top: -4px; } .jcrop-dragbar.ord-s { bottom: 0; margin-bottom: -4px; } .jcrop-dragbar.ord-e { margin-right: -4px; right: 0; } .jcrop-dragbar.ord-w { margin-left: -4px; } /* The "jcrop-light" class/extension */ .jcrop-light .jcrop-vline, .jcrop-light .jcrop-hline { background: #ffffff; filter: alpha(opacity=70) !important; opacity: 0.7 !important; } .jcrop-light .jcrop-handle { -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #000000; border-color: #ffffff; border-radius: 3px; } /* The "jcrop-dark" class/extension */ .jcrop-dark .jcrop-vline, .jcrop-dark .jcrop-hline { background: #000000; filter: alpha(opacity=70) !important; opacity: 0.7 !important; } .jcrop-dark .jcrop-handle { -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #ffffff; border-color: #000000; border-radius: 3px; } /* Simple macro to turn off the antlines */ .solid-line .jcrop-vline, .solid-line .jcrop-hline { background: #ffffff; } /* Fix for twitter bootstrap et al. */ .jcrop-holder img, img.jcrop-preview { max-width: none; } .Closeup { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* stylelint-disable-next-line at-rule-no-unknown */ } .Closeup .sticky { border-radius: 8px; position: -webkit-sticky; position: sticky; top: 65px; will-change: transform; z-index: 101; } @media (min-width: 800px) { .Closeup .sticky { top: 65px; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .Closeup .sticky { position: relative; top: 0; } } .Closeup .showInModal .sticky { top: 0; } .Closeup .showInModal .flashlightSticky { top: 84px; } .Closeup .PinFeedbackConfirmation.show { width: 100%; z-index: 101; } .Closeup .flashlightSticky { display: block; float: right; position: relative; position: -webkit-sticky; position: sticky; top: 149px; z-index: 99; } @media (min-width: 800px) { .Closeup .flashlightSticky { top: 149px; } } .Closeup .transitionImage { background: #fff; border-radius: 0 0 8px 8px; margin: 0 auto; padding-bottom: 72px; position: absolute; text-align: center; width: 628px; } .Closeup .transitionImage + .CloseupContent .CloseupTitleCard { display: none; } .Closeup .transitionImage.isEmbeddedVideo { padding-top: 0 !important; /* hacky because the image is rendered with inline CSS */ } .Closeup .transitionImage.isEmbeddedVideo .videoTransition { background: #000 !important; /* hacky because the image is rendered with inline CSS */ margin: 0 32px; } .Closeup .transitionImage.isEmbeddedVideo.isVine .videoTransition { height: 564px; } .Closeup .transitionImage .pinImg { border-radius: 8px; } .Closeup .closeupActionBarContainer { margin: 0 auto; position: relative; width: 628px; z-index: 101; } .Closeup .closeupActionBarContainer.relatedPinsByCloseup { float: left; left: 54%; margin-left: -628px; position: relative; top: 30px; } .Closeup .closeupActionBarContainer.relatedPinsByCloseup.noTop { top: 0; } .Closeup .close { -webkit-transform: translateZ(0); background: none; box-shadow: none; margin-right: 24px; margin-top: 24px; position: fixed; z-index: 652; } .Closeup .close em { width: 17px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Closeup .close em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -88px -375px; background-size: 428px 427px; } } .Closeup .close:hover em, .Closeup .close:active em, .Closeup .close:focus em { width: 17px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -339px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Closeup .close:hover em, .Closeup .close:active em, .Closeup .close:focus em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -70px -375px; background-size: 428px 427px; } } .Closeup .close:hover { background: none; box-shadow: none; } .Closeup .closeupContainer { margin: 32px auto; max-width: 628px; width: 100%; } .Closeup .closeupContainer::after { clear: both; content: ""; display: table; } .Closeup .closeupContainer:focus { outline: 0; } .Closeup .closeupContainer.relatedPinsByCloseup { float: left; left: 54%; margin-left: -628px; position: relative; } .Closeup .closeupBottom .denzelRelatedPins { margin: 0 auto; } .Closeup .closeupBottom.relatedPinsByCloseup { float: right; margin-right: -528px; position: relative; right: 46%; top: 30px; } .Closeup .pinCarousel { background-color: #fff; border-bottom: 1px solid #ccc; height: 200px; margin-bottom: 15px; padding: 15px 0 15px 15px; } .Closeup .pinsCarouselBoardTitle { color: #5c554b; font-size: 16px; font-weight: bold; margin-bottom: 5px; } .Closeup.canClose { background-color: rgba(239, 239, 239, 0.96); cursor: zoom-out; overflow-x: hidden; } .Closeup.canClose .closeupContainer, .Closeup.canClose .closeupBottom { cursor: auto; } .Closeup.canClose .closeupBottom { -webkit-transform: translateZ(0); } .Closeup.canClose .sticky.relatedPinsByCloseup { left: 54%; margin-left: -636px; } @media (max-width: 1285px) { .Closeup.canClose .sticky.relatedPinsByCloseup { left: 0; margin-left: 58px; } } @media (min-width: 0) and (max-width: 999px) { .Closeup .closeupBottom { width: 628px; } .Closeup .arrow-nav { display: none; } } .Closeup.relatedPinsByCloseup { min-width: 1285px; } .Closeup.relatedPinsByCloseup .closeupBottom.relatedPinsByCloseup { width: 514px; } .Closeup .sticky.relatedPinsByCloseup { left: 54%; margin-left: -628px; } @media (max-width: 1285px) { .Closeup .sticky.relatedPinsByCloseup { left: 0; margin-left: 66px; } } @media only screen and (max-device-width: 600px) { .Closeup .closeupContainer { margin: 10px auto; } .Closeup .sticky { top: 0; } } /* desktop.scss */ .Closeup .closeupBottom .denzelRelatedPins { max-width: 1050px; } .CloseupBottom .relatedPinsWrapper { visibility: hidden; } .CloseupBottom .sectionTitle { color: #444; font-size: 18px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); } .CloseupBottom .gridContainer { clear: both; } .CloseupBottom .CloseupRelatedPins { margin-top: 20px; } .CloseupBottom .spinner { background: url(https://s.pinimg.com/webapp/style/images/spinner-a8ae820b.gif) no-repeat center; display: block; height: 30px; left: 0; position: absolute; right: 0; top: 300px; } .CloseupContent .arrow-nav > div { background: transparent; border-radius: 0; height: 100px; position: fixed; top: 350px; width: 100px; } .CloseupContent .arrow-nav > div::before, .CloseupContent .arrow-nav > div::after { border-bottom: solid 10px transparent; border-radius: 5px; border-top: solid 10px transparent; content: ""; display: block; left: 50%; position: absolute; top: 50%; } .CloseupContent .arrow-nav > div.left-arrow { left: 0; } .CloseupContent .arrow-nav > div.left-arrow::before { border-right: solid 10px #a0a0a0; margin: -10px 0 0 -8px; } .CloseupContent .arrow-nav > div.left-arrow::after { border-right: solid 10px rgba(239, 239, 239, 0.96); margin: -10px 0 0 -3px; } .CloseupContent .arrow-nav > div.right-arrow { right: 0; } .CloseupContent .arrow-nav > div.right-arrow::before { border-left: solid 10px #a0a0a0; margin: -10px 0 0 -3px; } .CloseupContent .arrow-nav > div.right-arrow::after { border-left: solid 10px rgba(239, 239, 239, 0.96); margin: -10px 0 0 -8px; } .CloseupContent .arrow-nav > div:hover { cursor: pointer; } .CloseupContent .arrow-nav > div:hover.left-arrow::before { border-right: solid 10px #555; } .CloseupContent .arrow-nav > div:hover.right-arrow::before { border-left: solid 10px #555; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .CloseupFollowModule { background-color: #efefef; border-radius: 8px; padding: 16px; } .CloseupFollowModule .followContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .CloseupFollowModule .followArrow { margin: -24px 0 0 5px; position: absolute; } .CloseupFollowModule .followArrow em { width: 14px; height: 8px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -46px -393px no-repeat; display: block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .CloseupFollowModule .followArrow em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -151px -98px; background-size: 399px 382px; } } .CloseupFollowModule .followText { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 18px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 454px; } /* desktop.scss */ .CloseupFollowModule { margin: 0 32px 16px; } .CloseupLinkModule { padding: 16px 40px; } .CloseupLinkModule .User a.profileSource { display: -webkit-box; display: -ms-flexbox; display: flex; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .CloseupRelatedPins.fullWidthRelatedPins .relatedPinsAnnotationTitleWrapper { margin: 32px auto; max-width: 628px; width: 100%; } .CloseupRelatedPins.fullWidthRelatedPins .relatedPinsAnnotationTitleWrapper .sectionTitle { font-size: 24px; } .CloseupRelatedPins .relatedPinsAnnotationTitleWrapper { margin: 0 7px; } .CloseupRelatedPins .annotations, .CloseupRelatedPins .annotationHeader { font-size: 14px; font-weight: bold; } .CloseupRelatedPins .active { color: #878787; } .CloseupRelatedPins .annotations { float: right; } .CloseupRelatedPins .annotations .annotationHeader { color: #333; float: left; margin-right: 4px; position: relative; top: 2px; } .CloseupRelatedPins .annotationList { list-style: none; padding-top: 2px; text-align: right; } .CloseupRelatedPins .annotationList li { display: inline; margin-right: 1px; } .CloseupRelatedPins .sectionTitle { float: left; margin-top: 0; visibility: visible; } .CloseupRelatedPins.slides { margin: 15px 7px; } .CloseupRelatedPins.slides .relatedPinsTop { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; height: 33px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 10px; } .CloseupRelatedPins.slides .relatedPinsText { color: #666; font-size: 16px; font-weight: bold; } .CloseupRelatedPins.slides .relatedPinSet { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .CloseupRelatedPins.slides .relatedPinSet.hidden { display: none; } .CloseupRelatedPins.slides .moreRelatedPins { background-color: #fff; border-radius: 6px; color: #666; cursor: pointer; font-size: 14px; font-weight: bold; padding: 8px 20px; } .CloseupRelatedPins.slides .relatedPinsBottom { height: 292px; overflow: hidden; z-index: 10; } .CloseupRelatedPins.slides .relatedPinItem { background-color: #fff; border-radius: 6px; cursor: zoom-in; display: inline-block; height: 292px; opacity: 1; overflow: hidden; position: relative; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; width: 236px; } .CloseupRelatedPins.slides .relatedPinItem.invisible { opacity: 0; } .CloseupRelatedPins.slides .hoverMask { background-color: #fff; height: 100%; opacity: 0; position: absolute; width: 100%; z-index: 20; } .CloseupRelatedPins.slides .hoverMask:hover { opacity: .1; } .CloseupRelatedPins.slides .relatedPinBottom { background-color: #fff; bottom: 0; padding: 10px; position: absolute; width: 216px; } .CloseupRelatedPins.slides .relatedPinProfileImage { border-radius: 50%; display: inline-block; float: left; margin-right: 5px; overflow: hidden; vertical-align: middle; } .CloseupRelatedPins.slides .relatedPinPinner { color: #999; } .CloseupRelatedPins.slides .relatedPinBoard { color: #717171; } .CloseupRelatedPins.slides .relatedPinPinner, .CloseupRelatedPins.slides .relatedPinBoard { display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .CloseupRelatedPins.slides .profilePicture { height: 30px; width: 30px; } .CloseupRelatedPins.relatedPinsGrid { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; display: block; padding: 10px; background: #fff; margin-bottom: 14px; max-height: 552px; max-width: 236px; } .CloseupRelatedPins.relatedPinsGrid .pinGridWrapper { overflow-x: hidden; -webkit-overflow-scrolling: touch; overflow-y: scroll; max-height: 459px; position: relative; top: -2px; } .CloseupRelatedPins.relatedPinsGrid .pinGridWrapper .Grid { margin: 0; width: 216px; } .CloseupRelatedPins.relatedPinsGrid .pinGridWrapper .Grid.loading { height: 459px; } .CloseupRelatedPins.relatedPinsGrid .pinGridWrapper .item { margin: 0 3px 3px 0; opacity: 0.5; } .CloseupRelatedPins.relatedPinsGrid .pinGridWrapper .item:hover, .CloseupRelatedPins.relatedPinsGrid .pinGridWrapper .item.activeItem { opacity: 1; } .CloseupRelatedPins.relatedPinsGrid .pinGridWrapper .item:hover .hoverMask, .CloseupRelatedPins.relatedPinsGrid .pinGridWrapper .item.activeItem .hoverMask { box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; -webkit-transition-property: box-shadow; transition-property: box-shadow; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } .CloseupRelatedPins.relatedPinsGrid.short .pinGridWrapper { max-height: 229.5px; } .CloseupRelatedPins.relatedPinsGrid.short .pinGridWrapper .Grid.loading { height: 229.5px; } .CloseupRelatedPins.relatedPinsGrid .pinGridWrapper { background: url(https://s.pinimg.com/webapp/style/images/boardPinsGridShadowBottom-a1fc902f.png) repeat-x left bottom; } .CloseupRelatedPins.relatedPinsGrid .relatedPinsButton { margin-top: 4px; width: 100%; } .CloseupRelatedPins.relatedPinsGrid .titleContainer { margin-bottom: 11px; overflow: hidden; } .CloseupRelatedPins.relatedPinsGrid .titleContainer h3.title { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #333; font-size: 15px; line-height: 38px; } .CloseupRelatedPins.relatedPinsGrid .titleContainer .thumbImageWrapper { border-radius: 3px; float: left; height: 38px; margin-right: 9px; overflow: hidden; width: 38px; } .CloseupRelatedPins.sentPin .titleContainer { margin: 0 18px; } .CloseupRelatedPins.sentPin .titleContainer h3.title { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: HelveticaNeue-Bold, 'Helvetica', arial; color: #333; font-size: 23px; letter-spacing: -1px; line-height: 1.2em; width: 310px; } /* desktop.scss */ .CloseupRelatedPins .relatedPinsAnnotationTitleWrapper .sectionTitle { margin-left: 16px; } .CloseupSidebar { float: right; position: relative; width: 236px; z-index: 102; } .CloseupSidebar .Domain, .CloseupSidebar .VisuallySimilar { margin-bottom: 14px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .PinActionBar { -webkit-transform: translateZ(0); background-color: rgba(255, 255, 255, 0.9); border-radius: 8px 8px 0 0; box-sizing: border-box; cursor: default; font-size: 14px; margin: 0; padding: 16px 32px; position: absolute; top: 0; -webkit-transition: 0.2s padding ease; transition: 0.2s padding ease; width: 628px; } .PinActionBar::after { clear: both; content: ""; display: table; } .PinActionBar.canClose { margin-top: 0; top: 32px; } .PinActionBar.canClose.showAOPrompts { top: 216px; } .promptsMultilineEducation .PinActionBar.canClose.showAOPrompts:not(.sticky) { top: 272px; } .PinActionBar.showAOPrompts { top: 184px; } .promptsMultilineEducation .PinActionBar.showAOPrompts { top: 240px; } .PinActionBar.sticky { -webkit-transform: translateZ(0); background-color: #fff; padding: 10px 32px; position: fixed; top: 54px; } .PinActionBar.sticky.showAOPrompts, .PinActionBar.sticky.hasUnauthOpenHeader { top: 64px; } .hasKLPBar .PinActionBar.sticky { top: 98px; } .hasColorfulKLPBar .PinActionBar.sticky { top: 134px; } .PinActionBar.sticky.canClose { top: 0; } .PinActionBar.absolute { box-shadow: none; } .PinActionBar.absolute.below { border-radius: 0 0 8px 8px; margin-top: -68px; } .PinActionBar .repinLike { float: left; } .PinActionBar .shareGear { float: left; } .PinActionBar .likeButtonWrapper { display: inline-block; float: left; } .PinActionBar .repinsAndLikes { color: #b9b9b9; float: right; padding-right: 10px; } .PinActionBar .repinsAndLikes a { color: #b9b9b9; } .PinActionBar .repinsAndLikes .repinCountContainer { float: left; } .PinActionBar .repinsAndLikes .repinCountContainer em { width: 13px; height: 14px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -32px -375px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PinActionBar .repinsAndLikes .repinCountContainer em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -15px -368px; background-size: 399px 382px; } } .PinActionBar .repinsAndLikes .repinCountContainer:hover em, .PinActionBar .repinsAndLikes .repinCountContainer:active em, .PinActionBar .repinsAndLikes .repinCountContainer:focus em { width: 13px; height: 14px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -47px -375px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PinActionBar .repinsAndLikes .repinCountContainer:hover em, .PinActionBar .repinsAndLikes .repinCountContainer:active em, .PinActionBar .repinsAndLikes .repinCountContainer:focus em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -29px -368px; background-size: 399px 382px; } } .PinActionBar .repinsAndLikes .repinCountContainer em { float: left; margin-top: 8px; } .PinActionBar .repinsAndLikes .repinCount, .PinActionBar .repinsAndLikes .likeCount { display: inline-block; font-weight: bold; margin: 6px 0 0 2px; } .PinActionBar .repinsAndLikes .repinCount:hover, .PinActionBar .repinsAndLikes .likeCount:hover { color: #afafaf; } .PinActionBar .repinsAndLikes .noStats { display: none; } .PinActionBar .repinsAndLikes .noHover a { cursor: default; } .PinActionBar .DidItCloseup.float-fix { display: inline-block; float: left; margin-right: 6px; } /* desktop.scss */ .PinActionBar.sticky { top: 65px; } @media (min-width: 800px) { .PinActionBar.sticky { top: 65px; } } .PinActionBar .primary { float: right; } .PinActionBar .repinLike { width: 100%; } .UnauthCloseup .moreFromBoard { font-size: 18px; font-weight: bold; margin: 35px 0 0 7px; } .ActiveProductsOnlyButton { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 31px; } .ActiveProductsOnlyButton:not(.primary):not(.toggled):not(.disabled) .buttonText { color: #bd081c; } .BuyableSearchUpsell { border-radius: 6px; overflow: hidden; position: relative; } .BuyableSearchUpsell .shopTitle { display: -webkit-box; max-height: 56px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #fff; font-size: 28px; line-height: 28px; margin-bottom: 12px; } .BuyableSearchUpsell .labels { bottom: 0; left: 0; padding: 18px; position: absolute; } .CloseupBuyablePriceInfo.grayCTA .buyButton { background: #ebebeb; border: 1px solid #ebebeb; color: #555; } .CloseupBuyablePriceInfo.fadedBlueCTA .buyButton { background: #5b9dba; border: 1px solid #5b9dba; } .CloseupBuyablePriceInfo .productInfo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 16px 40px; } .CloseupBuyablePriceInfo .priceContainer { margin-right: 10px; } .CloseupBuyablePriceInfo .priceInfo { font-size: 22px; font-weight: bold; line-height: 22px; text-align: left; } .CloseupBuyablePriceInfo .activePrice { color: #555; } .CloseupBuyablePriceInfo .activePrice.isAvailable { color: #0084ff; } .CloseupBuyablePriceInfo .originalPrice { color: #b5b5b5; margin-left: 5px; opacity: .5; } .CloseupBuyablePriceInfo .strikeout { position: relative; } .CloseupBuyablePriceInfo .strikeout::after { border-bottom: 2px solid #555; content: ""; left: 0; position: absolute; right: 0; top: 50%; } .CloseupBuyablePriceInfo .additionalInformation { color: #555; font-size: 14px; } .CloseupBuyablePriceInfo .merchantLink { padding: 0 0 16px 40px; } .CloseupBuyableProductCarousel .pinLink { display: block; width: 628px; } .CloseupBuyableProductCarousel .FlashlightEnabledImage { margin: auto; } .CloseupBuyableProductCarousel .galleryContainer { position: absolute; right: -117px; top: 0; } .CloseupBuyableProductInfo { overflow: hidden; } .CloseupBuyableProductInfo.grayCTA .links { color: #555; } .CloseupBuyableProductInfo.grayCTA .links a { color: #555; } .CloseupBuyableProductInfo.fadedBlueCTA .links { color: #5b9dba; } .CloseupBuyableProductInfo.fadedBlueCTA .links a { color: #5b9dba; } .CloseupBuyableProductInfo .hidden { display: none; } .CloseupBuyableProductInfo .productDescription { color: #555; font-size: 18px; line-height: 22px; padding: 16px 40px; width: 459px; word-wrap: break-word; } .CloseupBuyableProductInfo .productDescription .ellipsis { display: -webkit-box; max-height: 44px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .CloseupBuyableProductInfo .productDescription p { margin: 0; } .CloseupBuyableProductInfo .showMore { color: #b5b5b5; cursor: pointer; font-size: 14px; margin-top: -11px; padding: 0 0 16px 40px; } .CloseupBuyableProductInfo .links { color: #0084ff; font-size: 14px; max-width: 455px; overflow: hidden; padding: 0 0 16px 40px; text-overflow: ellipsis; white-space: nowrap; } .CloseupBuyableProductInfo .links a { color: #0084ff; } .CloseupBuyableProductInfo .links .slash { color: #b5b5b5; } .ItemAddedSuccessToast { background-image: -webkit-linear-gradient(rgba(10, 14, 19, 0.85), #0a0e13); background-image: linear-gradient(rgba(10, 14, 19, 0.85), #0a0e13); border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.4) 0 0 20px 0; color: #fff; margin-top: 10px; padding: 10px; -webkit-transition: opacity .1s ease-in-out; transition: opacity .1s ease-in-out; visibility: hidden; width: 410px; } .ItemAddedSuccessToast.visible { visibility: visible; } .ItemAddedSuccessToast .toastWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } .ItemAddedSuccessToast img { background: #333; border-radius: 4px; height: 40px; margin-right: 10px; overflow: hidden; width: 40px; } .ItemAddedSuccessToast .message { color: #fff; font-size: 13px; line-height: 40px; } .ItemAddedSuccessToast .icon { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #bd081c; border-radius: 4px; color: #fff; cursor: pointer; height: 16px; padding: 7px; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .MerchantPageHeader { background: #fff; color: #333; margin-top: 8px; } .MerchantPageHeader::after { clear: both; content: ""; display: table; } .MerchantPageHeader .fixedHeader { background: #fff; height: 70px; left: 0; margin-bottom: -70px; overflow: hidden; right: 0; top: 64px; z-index: 103; } @media (max-width: 764px) { .MerchantPageHeader .fixedHeader { width: 764px; } } .MerchantPageHeader .fixedHeader.fixed { position: fixed; } .MerchantPageHeader .fixedHeader.shadow { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); } .MerchantPageHeader .profileImage { margin: 0 auto -87px; padding-top: 18px; position: relative; width: 60px; z-index: 104; } .MerchantPageHeader .profileImage img { border-radius: 100%; box-shadow: inset 0 0 0 -2px rgba(255, 255, 255, 0.48), 0 0 0 1px rgba(0, 0, 0, 0.14), 0 0 0 8px white; height: 60px; width: 60px; } .MerchantPageHeader .titleBar { height: 32px; margin: 18px auto; position: relative; } .MerchantPageHeader .fixedHeaderNameAndImage { -webkit-backface-visibility: hidden; position: absolute; top: -52px; } .MerchantPageHeader .fixedHeaderNameAndImage.showName { -webkit-transform: translate(0, 52px); transform: translate(0, 52px); -webkit-transition-duration: .2s; transition-duration: .2s; } .MerchantPageHeader .fixedHeaderNameAndImage.hideName { -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-duration: .2s; transition-duration: .2s; } .MerchantPageHeader .fixedHeaderNameAndImage .fixedHeaderImage { display: inline; } .MerchantPageHeader .fixedHeaderNameAndImage .fixedHeaderImage img { border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 100%; height: 32px; width: 32px; } .MerchantPageHeader .fixedHeaderNameAndImage .fixedHeaderName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; display: inline-block; font-size: 21px; font-weight: bold; padding-left: 7px; vertical-align: middle; width: 528px; } .MerchantPageHeader .merchantInfo { /* stylelint-disable-next-line at-rule-no-unknown */ color: #333; margin: 100px auto 0; overflow: hidden; text-align: center; } @media (min-width: 0) and (max-width: 999px) { .MerchantPageHeader .merchantInfo { /* stylelint-disable-next-line at-rule-no-unknown */ width: 420px; } } @media (min-width: 1000px) and (max-width: 1249px) { .MerchantPageHeader .merchantInfo { /* stylelint-disable-next-line at-rule-no-unknown */ width: 505px; } } @media (min-width: 1250px) and (max-width: 1499px) { .MerchantPageHeader .merchantInfo { /* stylelint-disable-next-line at-rule-no-unknown */ width: 620px; } } @media (min-width: 1500px) and (max-width: 1749px) { .MerchantPageHeader .merchantInfo { /* stylelint-disable-next-line at-rule-no-unknown */ width: 620px; } } @media (min-width: 1750px) and (max-width: 1999px) { .MerchantPageHeader .merchantInfo { /* stylelint-disable-next-line at-rule-no-unknown */ width: 620px; } } @media (min-width: 2000px) and (max-width: 2249px) { .MerchantPageHeader .merchantInfo { /* stylelint-disable-next-line at-rule-no-unknown */ width: 620px; } } @media (min-width: 2250px) and (max-width: 2499px) { .MerchantPageHeader .merchantInfo { /* stylelint-disable-next-line at-rule-no-unknown */ width: 620px; } } @media (min-width: 2500px) and (max-width: 2749px) { .MerchantPageHeader .merchantInfo { /* stylelint-disable-next-line at-rule-no-unknown */ width: 620px; } } @media (min-width: 2750px) and (max-width: 2999px) { .MerchantPageHeader .merchantInfo { /* stylelint-disable-next-line at-rule-no-unknown */ width: 620px; } } .MerchantPageHeader .merchantInfo .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* stylelint-disable-next-line at-rule-no-unknown */ font-size: 33px; margin: 4px auto 12px; max-width: 520px; } @media (min-width: 0) and (max-width: 999px) { .MerchantPageHeader .merchantInfo .name { /* stylelint-disable-next-line at-rule-no-unknown */ max-width: 290px; } } @media (min-width: 1000px) and (max-width: 1249px) { .MerchantPageHeader .merchantInfo .name { /* stylelint-disable-next-line at-rule-no-unknown */ max-width: 470px; } } @media (min-width: 1250px) and (max-width: 1499px) { .MerchantPageHeader .merchantInfo .name { /* stylelint-disable-next-line at-rule-no-unknown */ max-width: 490px; } } @media (min-width: 1500px) and (max-width: 1749px) { .MerchantPageHeader .merchantInfo .name { /* stylelint-disable-next-line at-rule-no-unknown */ max-width: 490px; } } @media (min-width: 1750px) and (max-width: 1999px) { .MerchantPageHeader .merchantInfo .name { /* stylelint-disable-next-line at-rule-no-unknown */ max-width: 490px; } } @media (min-width: 2000px) and (max-width: 2249px) { .MerchantPageHeader .merchantInfo .name { /* stylelint-disable-next-line at-rule-no-unknown */ max-width: 490px; } } @media (min-width: 2250px) and (max-width: 2499px) { .MerchantPageHeader .merchantInfo .name { /* stylelint-disable-next-line at-rule-no-unknown */ max-width: 490px; } } @media (min-width: 2500px) and (max-width: 2749px) { .MerchantPageHeader .merchantInfo .name { /* stylelint-disable-next-line at-rule-no-unknown */ max-width: 490px; } } @media (min-width: 2750px) and (max-width: 2999px) { .MerchantPageHeader .merchantInfo .name { /* stylelint-disable-next-line at-rule-no-unknown */ max-width: 490px; } } .MerchantPageHeader .merchantInfo .description { font-size: 14px; margin-bottom: 30px; } .MerchantPageHeader .merchantInfo .description .merchantDescription { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 19px; margin-bottom: 34px; overflow: hidden; } .MerchantPageHeader .merchantInfo .description .seeProfile { color: #5f5f5f; font-weight: normal; } .MultiVariantPickers { margin: 0 57px; } .MultiVariantPickers .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-weight: bold; color: #555; font-size: 14px; font-weight: bold; margin: 10px 0; } .MultiVariantPickers .title .selectedValue { color: #555; font-weight: 100; margin-left: 10px; } .MultiVariantPickers .swatchVariant { border-radius: 50%; box-shadow: 0 0 1px #ccc; cursor: pointer; display: inline-block; height: 40px; margin-bottom: 5px; margin-right: 7px; overflow: hidden; position: relative; width: 40px; } .MultiVariantPickers .swatchVariant.unavailable .frame, .MultiVariantPickers .swatchVariant.selected .frame { border: 2px solid #fff; border-radius: 50%; height: 32px; left: 0; position: absolute; top: 0; width: 32px; z-index: 1; } .MultiVariantPickers .swatchVariant.unavailable { background-color: #fff; border: 2px solid #b5b5b5; height: 36px; position: relative; width: 36px; } .MultiVariantPickers .swatchVariant.unavailable::after { border-bottom: 2px solid #b5b5b5; content: ""; left: 0; position: absolute; right: 0; top: 50%; -webkit-transform: rotate(135deg); transform: rotate(135deg); z-index: 2; } .MultiVariantPickers .swatchVariant.selected { background-color: #fff; border: 2px solid #0084ff; height: 36px; width: 36px; } .MultiVariantPickers .swatchVariant img { border-radius: 50%; box-sizing: border-box; height: 40px; left: 0; position: absolute; top: 0; width: 40px; } .MultiVariantPickers .labelVariant { color: #b5b5b5; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; line-height: 25px; margin-right: 15px; white-space: nowrap; } .MultiVariantPickers .labelVariant.unavailable { color: #f1f1f1; position: relative; } .MultiVariantPickers .labelVariant.unavailable::after { border-bottom: 1px solid #f1f1f1; content: ""; left: 0; position: absolute; right: 0; top: 50%; } .MultiVariantPickers .labelVariant.selected { border-bottom: 3px solid #0084ff; color: #555; margin-bottom: -3px; } .OrderHistory { background-color: #fff; color: #555; overflow: hidden; } .OrderHistory .verticalCenter { display: inline-block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .OrderHistory .orderHistoryTitle { font-size: 33px; font-weight: bold; margin: 75px auto 40px; text-align: center; width: 628px; } .PriceFilter.search .priceFilterContainer { position: absolute; } .PriceFilter .priceFilterContainer { position: fixed; right: 32px; top: 70px; z-index: 104; } .PriceFilter .priceFilterContainer .priceFilterButton { background-color: #0084ff; border-radius: 16px; clear: both; color: #fff; cursor: pointer; display: block; float: right; font-size: 14px; padding: 8px 12px; } .PriceFilter .priceFilterContainer .priceFilter { background-color: rgba(0, 132, 255, 0.8); border-radius: 8px; height: 0; overflow: hidden; position: absolute; right: 0; top: 0; -webkit-transition: width .2s ease-in-out, height .2s ease-in-out; transition: width .2s ease-in-out, height .2s ease-in-out; width: 0; z-index: 104; } .PriceFilter .priceFilterContainer .priceFilter.active { display: block; height: 400px; width: 300px; } .PriceFilter .priceFilterContainer .priceFilter.active .filterPriceSlider { -webkit-animation: bounce .3s; animation: bounce .3s; -webkit-animation-delay: .6s; animation-delay: .6s; } .PriceFilter .priceFilterContainer .priceFilter .filterPriceContent { height: 100%; position: relative; text-align: left; width: 100%; } .PriceFilter .priceFilterContainer .priceFilter .filterPriceSlider { color: #fff; cursor: pointer; padding: 5px 20px; position: absolute; top: 293px; } .PriceFilter .priceFilterContainer .priceFilter .filterPriceSlider label { display: block; font-size: 20px; font-weight: 100; width: 130px; } .PriceFilter .priceFilterContainer .priceFilter .filterPriceSlider .filterValueIcon { width: 260px; } .PriceFilter .priceFilterContainer .priceFilter .filterPriceSlider .filterPriceValue { font-size: 40px; font-weight: 600; } .PriceFilter .priceFilterContainer .priceFilter .filterPriceSlider.active .filterPriceIcon span:first-child { top: -15px; } .PriceFilter .priceFilterContainer .priceFilter .filterPriceSlider.active .filterPriceIcon span:last-child { bottom: -15px; } .PriceFilter .priceFilterContainer .priceFilter .filterPriceIcon { border: 2px solid #fff; border-radius: 100%; float: right; height: 35px; position: relative; width: 35px; } .PriceFilter .priceFilterContainer .priceFilter .filterPriceIcon span { border-left: 5px solid transparent; border-right: 5px solid transparent; height: 0; left: 13px; position: absolute; width: 0; } .PriceFilter .priceFilterContainer .priceFilter .filterPriceIcon span:first-child { border-bottom: 7px solid #fff; top: 7px; -webkit-transition: top .1s ease-in-out; transition: top .1s ease-in-out; } .PriceFilter .priceFilterContainer .priceFilter .filterPriceIcon span:last-child { border-top: 7px solid #fff; bottom: 7px; -webkit-transition: bottom .1s ease-in-out; transition: bottom .1s ease-in-out; } @-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 60% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounce { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 60% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .Product { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; height: 320px; padding: 10px; position: relative; width: 216px; } .Product .hoverMask { bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: background 0.04s linear; transition: background 0.04s linear; border-radius: 3px; box-shadow: none; z-index: 100; } .Product .imageWrapper:hover .hoverMask { background: rgba(255, 255, 255, 0.08); } .Product .imageWrapper:active .hoverMask { background: rgba(255, 255, 255, 0.08); } .Product .name { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555; display: block; font-size: 14px; font-weight: bold; height: 18px; line-height: 18px; margin: 0 3px 6px; position: relative; } .Product .imageWrapper { position: relative; } .Product .imageWrapper::after { border-radius: 6px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 260px; left: 0; position: absolute; top: 0; width: 216px; } .Product .imageWrapper .categoryImage { border-radius: 6px; height: 260px; width: 216px; } .Product .imageWrapper .categoryImage { height: 260px; overflow: hidden; } .Product img { vertical-align: middle; } .Product .price { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555; display: block; font-size: 14px; font-weight: bold; height: 18px; line-height: 18px; margin: 0 3px 6px; position: relative; text-align: center; } .ProductDetailsPage { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; } .ProductDetailsPage .productImages { float: left; width: 440px; } .ProductDetailsPage .productImages .mainImage { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; border-radius: 6px; margin: 10px; } .ProductDetailsPage .productImages .mainImage img { display: block; margin: auto; max-width: 400px; padding: 10px; } .ProductDetailsPage .productImages .otherImages img { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; margin-bottom: 10px; margin-left: 10px; max-width: 182.5px; padding: 10px; } .ProductDetailsPage .productDetails { margin-left: 430px; } .ProductDetailsPage .productDetailsContainer { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; margin: 10px; } .ProductDetailsPage .productTitle { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555; display: block; font-size: 14px; font-weight: bold; height: 18px; line-height: 18px; margin: 0 3px 6px; position: relative; padding: 10px; } .ProductDetailsPage .productGroupId { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #8e8e8e; font-size: 12px; margin-left: 3px; } .ProductDetailsPage .productApprovalForm { padding: 10px; } .ProductDetailsPage .productApprovalForm input { width: 40%; } .ProductDetailsPage .productLink { display: block; padding: 10px; } .ProductDetailsPage .productDescription { padding: 10px; } .ProductDetailsPage .productPrice { padding: 10px; } .ProductDetailsPage .productApprovalStatus, .ProductDetailsPage .productApprovalStatusRationale { padding: 10px; } .ProductDetailsPage h3 { padding: 10px; } .ProductDetailsPage table { background-color: transparent; } .ProductDetailsPage caption { color: #777; padding-bottom: 8px; padding-top: 8px; text-align: left; } .ProductDetailsPage th { text-align: left; } .ProductDetailsPage .table { margin-bottom: 20px; max-width: 100%; width: 100%; } .ProductDetailsPage .table > thead > tr > th, .ProductDetailsPage .table > tbody > tr > th, .ProductDetailsPage .table > tfoot > tr > th, .ProductDetailsPage .table > thead > tr > td, .ProductDetailsPage .table > tbody > tr > td, .ProductDetailsPage .table > tfoot > tr > td { border-top: 1px solid #ddd; line-height: 1.42857143; padding: 8px; vertical-align: top; } .ProductDetailsPage .table > thead > tr > th { border-bottom: 2px solid #ddd; vertical-align: bottom; } .ProductDetailsPage .table > tbody + tbody { border-top: 2px solid #ddd; } .ProductDetailsPage .table .table { background-color: #fff; } .ProductDetailsPage td, .ProductDetailsPage th { padding: 0; } .ProductGallery { margin-top: -12px; } .ProductGallery .container { height: 380px; overflow: hidden; } .ProductGallery .catalogItem { cursor: pointer; height: 80px; margin: 12px; overflow: hidden; position: relative; width: 80px; } .ProductGallery .catalogItem.selected { background-color: #fff; border: 2px solid #ccc; border-radius: 4px; height: 76px; width: 76px; } .ProductGallery .catalogItem.selected .frame { border: 2px solid #fff; height: 72px; left: 0; position: absolute; top: 0; width: 72px; z-index: 10; } .ProductGallery .catalogItem.selected img { left: -2px; min-height: 80px; min-width: 80px; top: -2px; } .ProductGallery .catalogItem img { border-radius: 4px; left: 0; position: absolute; top: 0; } .ProductGallery .controll { background-color: rgba(0, 0, 0, 0.2); border-radius: 4px; height: 30px; margin: 0 12px; text-align: center; width: 80px; } .ProductGallery .controll .icons { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: 30px; margin: auto; } .ProductGallery .controll .scrollIcon { -webkit-animation: fadeIn .2s ease-out; animation: fadeIn .2s ease-out; overflow: hidden; padding: 8px; } .ProductGallery .controll .scrollIcon.hide { display: none; } .ProductGallery .controll .scrollIcon em { cursor: pointer; display: inline-block; vertical-align: middle; } .ProductGallery .controll .scrollIcon em.up { width: 12px; height: 8px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -307px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ProductGallery .controll .scrollIcon em.up { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -132px -368px; background-size: 399px 382px; } } .ProductGallery .controll .scrollIcon em.down { width: 12px; height: 8px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -297px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ProductGallery .controll .scrollIcon em.down { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -145px -368px; background-size: 399px 382px; } } .ProductsPage .returnedCountsDisplay { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; margin: 10px; padding: 10px; } .ProductsPageHeader { background-color: #fff; padding-bottom: 24px; padding-left: 25%; padding-right: 25%; position: relative; text-align: center; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; width: auto; z-index: 670; } .ProductsPageHeader .search { padding: 20px; text-align: right; } .ProductsPageHeader .searchBar { display: -webkit-box; display: -ms-flexbox; display: flex; } .ProductsPageHeader .searchBar form { width: 80%; } .ProductsPageHeader .searchBar form .submitButton { float: right; } .ProductsPageHeader .searchBar form .field { width: 85%; } .ProductsPageHeader h1 { color: #333; color: rgba(21, 21, 21, 0.8); font-size: 47px; font-weight: bold; line-height: 52px; margin-left: auto; margin-right: auto; max-width: 736px; text-align: center; word-wrap: break-word; margin: 34px auto 20px; } .ja .ProductsPageHeader h1 { font-size: 36px; } .ProductsPageHeader .boardName { color: #333; color: rgba(21, 21, 21, 0.8); font-size: 36px; line-height: 32px; margin-top: 0; padding-top: 34px; text-align: center; } .ProductsPageHeader .description { color: #444; font-size: 15px; line-height: 20px; margin: 10px auto 5px; text-align: center; text-shadow: none; width: 750px; } .ProductsPageHeader .divider { margin-top: 31px; } .ProductsPageHeader .divider hr { background: #eee; border: 0; height: 1px; margin: 0; width: 100%; } .ShopBoardPage::after { clear: both; content: ""; display: table; } .ShopBoardPage .boardCollectionView { color: #333; } .ShopBoardPage .boardCollectionView .header { background-color: #fff; } .ShopBoardPage .boardCollectionView .fixedHeader { height: 64px; left: 0; margin-bottom: -64px; overflow: hidden; right: 0; top: 64px; z-index: 103; } .ShopBoardPage .boardCollectionView .fixedHeader.canSeeFixedHeader { position: fixed; } .ShopBoardPage .boardCollectionView .fixedHeader.shadow { background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); } .ShopBoardPage .boardCollectionView .titleBar { margin: 20px auto; position: relative; } .ShopBoardPage .boardCollectionView .fixedHeaderNameAndImage { -webkit-backface-visibility: hidden; font-size: 21px; font-weight: bold; position: absolute; top: -48px; } .ShopBoardPage .boardCollectionView .fixedHeaderNameAndImage.showName { -webkit-transform: translate(0, 48px); transform: translate(0, 48px); -webkit-transition-duration: .2s; transition-duration: .2s; } .ShopBoardPage .boardCollectionView .fixedHeaderNameAndImage.hideName { -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-duration: .2s; transition-duration: .2s; } .ShopBoardPage .boardCollectionView .boardInfo { padding: 34px; position: relative; text-align: center; } .ShopBoardPage .boardCollectionView .boardInfo .backToShop { display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .ShopBoardPage .boardCollectionView .boardInfo .backToShop .backToShopLink { color: #b5b5b5; cursor: pointer; font-size: 14px; font-weight: normal; margin-left: 7px; } .ShopBoardPage .boardCollectionView .boardInfo .backToShop em { width: 10px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -316px no-repeat; cursor: pointer; display: inline-block; vertical-align: top; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ShopBoardPage .boardCollectionView .boardInfo .backToShop em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px 0; background-size: 428px 427px; } } .ShopBoardPage .boardCollectionView .boardInfo .name { font-size: 33px; } .ShopBoardPage .boardCollectionView .boardInfo .merchantDescription { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 14px; margin-bottom: 0; } .ShopCollectionHoverMask { -webkit-animation: fadeIn .2s ease-out; animation: fadeIn .2s ease-out; display: none; } .ShopCollectionHoverMask .mask.hover.link { background-color: rgba(255, 255, 255, 0.9); display: -webkit-box; display: -ms-flexbox; display: flex; left: 0; top: 0; } .ShopCollectionHoverMask .mask.hover.link.square { height: 236px; margin: 0; position: absolute; width: 236px; } .ShopCollectionHoverMask .mask.hover.link.rectangle { height: 236px; margin: 0; position: absolute; width: 486px; } .ShopCollectionHoverMask .images { border-radius: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 18px; overflow: hidden; width: 200px; } .ShopCollectionHoverMask .thumbnailImage { background-repeat: no-repeat; background-size: cover; opacity: 0; width: 99px; } .ShopCollectionHoverMask .thumbnailImage.size0 { height: 95px; margin-bottom: 1px; margin-right: 1px; } .ShopCollectionHoverMask .thumbnailImage.size1 { height: 103px; margin-right: 1px; margin-top: 1px; } .ShopCollectionHoverMask .thumbnailImage.size1.appear { -webkit-animation-delay: .05s; animation-delay: .05s; } .ShopCollectionHoverMask .thumbnailImage.size2 { height: 110px; margin-bottom: 1px; margin-left: 1px; } .ShopCollectionHoverMask .thumbnailImage.size2.appear { -webkit-animation-delay: .03s; animation-delay: .03s; } .ShopCollectionHoverMask .thumbnailImage.size3 { height: 88px; margin-left: 1px; margin-top: 1px; } .ShopCollectionHoverMask .thumbnailImage.size3.appear { -webkit-animation-delay: .1s; animation-delay: .1s; } .ShopCollectionHoverMask .thumbnailImage.appear { -webkit-animation: appear .3s; animation: appear .3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .ShopCollectionHoverMask .collectionInfo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 230px; } .ShopCollectionHoverMask .collectionInfo .collectionTitle { color: #555; font-size: 14px; font-weight: bold; line-height: 30px; } .ShopCollectionHoverMask .collectionInfo .collectionDescription { color: #555; font-size: 14px; font-weight: 300; line-height: 18px; margin-bottom: 11px; } .ShopCollectionHoverMask .collectionInfo .buyButton { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #0084ff; border-radius: 4px; color: #fff; font-size: 14px; margin-top: 11px; padding: 8px 0; text-align: center; width: 97px; } @-webkit-keyframes appear { 0% { opacity: .1; -webkit-transform: translateY(4px); transform: translateY(4px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes appear { 0% { opacity: .1; -webkit-transform: translateY(4px); transform: translateY(4px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } .ShopCollectionsView { background-color: #fff; position: relative; } .ShopCollectionsView .loadingMask { height: 100vh; width: 100%; } .ShopCollectionsView .loadingSpinner { background: url(https://s.pinimg.com/webapp/style/images/spinner-medium-1x-dbb1334f.gif) no-repeat; background-size: contain; height: 32px; width: 32px; display: inline-block; opacity: .5; display: block; left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ShopCollectionsView .loadingSpinner { background-image: url(https://s.pinimg.com/webapp/style/images/spinner-medium-2x-3ffcb44b.gif); } } .ShopCollectionsView .titleBox { margin: 0 auto 43px; padding-top: 43px; text-align: center; width: 485px; } .ShopCollectionsView .titleBox .onPinterest { color: #555; font-size: 47px; margin-bottom: 10px; } .ShopCollectionsView .titleBox .subTitle { color: #555; font-size: 14px; line-height: 20px; } .ShopCollectionsView .shopGrid { background-color: #fff; margin: auto; padding-bottom: 104px; position: relative; } .ShopCollectionsView .shopGrid.threeColumn { width: 750px; } .ShopCollectionsView .shopGrid.fourColumn { width: 1000px; } .ShopCollectionsView .shopGrid .topGrid { display: -webkit-box; display: -ms-flexbox; display: flex; } .ShopCollectionsView .shopGrid .row { display: -webkit-box; display: -ms-flexbox; display: flex; } .ShopCollectionsView .shopGrid .collection { margin: 6px; position: relative; } .ShopCollectionsView .shopGrid .collection:hover label { display: none; } .ShopCollectionsView .shopGrid .collection .image { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 6px; } .ShopCollectionsView .shopGrid .collection label { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; bottom: 12px; color: #fff; font-size: 24px; left: 20px; position: absolute; width: 196px; } .ShopCollectionsView .shopGrid .rectangle { height: 236px; width: 486px; } .ShopCollectionsView .shopGrid .rectangle .image { height: 236px; width: 486px; } .ShopCollectionsView .shopGrid .square { height: 236px; width: 236px; } .ShopCollectionsView .shopGrid .square .image { height: 236px; width: 236px; } .ShopCollectionsView .shopGrid .topShops { border: 1px solid #efefef; border-radius: 6px; height: 482px; margin: 6px; width: 236px; } .ShopCollectionsView .shopGrid .topShops h3 { font-size: 14px; margin: 12px 12px 15px; } .ShopCollectionsView .shopGrid .topShops .topShop { display: -webkit-box; display: -ms-flexbox; display: flex; height: 38px; margin: 10px 10px 0; position: relative; vertical-align: top; } .ShopCollectionsView .shopGrid .topShops .topShop .shopTitle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 13px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 180px; } .ShopCollectionsView .shopGrid .topShops .topShop .shopTitle:hover { color: #bd081c; } .ShopCollectionsView .shopGrid .topShops .topShop img { border-radius: 100%; margin-right: 10px; width: 38px; } .ShopGridItem { background: #fff; height: 316px; overflow: hidden; } @media (min-width: 360px) { .ShopGridItem { height: 316px; } } @media (min-width: 800px) { .ShopGridItem { height: 326px; } } @media (min-width: 1312px) { .ShopGridItem { height: 332px; } } .ShopGridItem .productLinkWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .ShopGridItem .productLinkWrapper:hover { opacity: .9; } .ShopGridItem .productName { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ } .ShopGridItem .productName .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ShopGridItem .productImagesWrapper { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .ShopGridItem .productCoverWrapper { background-color: #fff; border-radius: 8px 8px 0 0; clear: both; height: 111px; overflow: hidden; position: relative; } .ShopGridItem .productCoverWrapper img { position: absolute; top: -50%; width: 100%; } .ShopGridItem .productThumbs { display: -webkit-box; display: -ms-flexbox; display: flex; height: 111px; margin-bottom: 0; margin-top: 2px; } .ShopGridItem .productThumbs li { height: auto; margin-left: 2px; overflow: hidden; width: auto; } .ShopGridItem .productThumbs li .thumb { height: auto; width: auto; } .ShopGridItem .productThumbs li:first-child { border-bottom-left-radius: 8px; margin-left: 0; } .ShopGridItem .productThumbs li:nth-child(2) { border-bottom-right-radius: 8px; } .ShopGridItem .productThumbs li:nth-child(3) { display: none; } .ShopGridItem .productThumbs li::after { display: none; } .ShopGridItem .shopButton { cursor: pointer; text-align: center; white-space: nowrap; } .ShopSpace .comingSoon { color: #555; font-size: 30px; margin: 30px auto; width: 200px; } .ShopSpace .morePins { margin-top: 40px; } .ShopSpace .relatedPinsAnnotationTitleWrapper { height: 25px; } .ShopSpace .relatedPinsAnnotationTitleWrapper .sectionTitle { float: left; font-size: 18px; height: 25px; margin: 0 8px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); visibility: visible; } .VariantPicker .labelVariants { display: -ms-inline-grid; display: inline-grid; padding: 16px 40px 0; } .VariantPicker .swatchVariants { padding: 16px 40px 0; } .VariantPicker .swatchVariant { border-radius: 50%; box-shadow: 0 0 1px #ccc; cursor: pointer; display: inline-block; height: 40px; margin-bottom: 5px; margin-right: 7px; overflow: hidden; position: relative; width: 40px; } .VariantPicker .swatchVariant.selected { background-color: #fff; border: 2px solid #0084ff; height: 36px; width: 36px; } .VariantPicker .swatchVariant.selected .frame { border: 2px solid #fff; border-radius: 50%; height: 32px; left: 0; position: absolute; top: 0; width: 32px; z-index: 10; } .VariantPicker .swatchVariant img { border-radius: 50%; box-sizing: border-box; height: 40px; left: 0; position: absolute; top: 0; width: 40px; } .VariantPicker .labelVariant { color: #b5b5b5; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; line-height: 25px; margin-right: 15px; white-space: nowrap; } .VariantPicker .labelVariant.selected { border-bottom: 3px solid #0084ff; color: #555; margin-bottom: -3px; } .VariantPickerModal { width: 632px; } .VariantPickerModal .product { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 49px auto 20px; overflow: hidden; width: 510px; } .VariantPickerModal .price { color: #0084ff; font-size: 18px; font-weight: bold; line-height: 18px; } .VariantPickerModal .productInfo { padding-left: 25px; width: 294px; } .VariantPickerModal .productInfo .productTitle { color: #5f5f5f; font-size: 18px; margin: 12px 0; } .VariantPickerModal .productInfo .additionalInformation { color: #5f5f5f; font-size: 13px; margin-top: 5px; } .VariantPickerModal .productInfo .merchantLink { padding: 0; } .VariantPickerModal .productInfo .merchantLink .thumbImageWrapper { height: 52px; width: 52px; } .VariantPickerModal .productInfo .merchantLink .thumbImageWrapper img { height: 52px; width: 52px; } .VariantPickerModal .productInfo .merchantLink .thumbImageWrapper::after { height: 52px; width: 52px; } .VariantPickerModal .productInfo .merchantLink .profileSourceAttributionContent { margin-top: 7px; width: 190px; } .VariantPickerModal .productInfo .merchantLink .profileSourceAttributionContent .title { font-size: 12px; line-height: 20px; } .VariantPickerModal .productInfo .merchantLink .profileSource { outline: none; } .VariantPickerModal .productImage img { height: 236px; max-width: 236px; width: 236px; } .VariantPickerModal .icon { background-color: #555; border-radius: 50%; color: #fff; cursor: pointer; display: inline-block; font-size: 20px; height: 23px; line-height: 20px; margin: 5px; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; width: 23px; } .VariantPickerModal .minusIcon { margin-left: 0; } .VariantPickerModal .quantity { background-color: #efefef; border: 1px solid #efefef; border-radius: 4px; font-size: 14px; height: 30px; text-align: center; width: 45px; } .VariantPickerModal .total { margin: 0 57px 57px; } .VariantPickerModal .total .quantityInput { display: inline-block; } .VariantPickerModal .total .price { display: inline-block; float: right; padding: 8px; } .VariantPickerModal .quantityTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-weight: bold; color: #555; font-size: 14px; font-weight: bold; margin: 10px 57px; } .VariantPickerModal .buyButton { display: inline-block; float: right; } .ConversationHead { cursor: pointer; -webkit-transition: opacity .3s ease, -webkit-filter .3s ease; transition: opacity .3s ease, -webkit-filter .3s ease; transition: filter .3s ease, opacity .3s ease; transition: filter .3s ease, opacity .3s ease, -webkit-filter .3s ease; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ } .ConversationHead.normal { -webkit-transform: translateZ(0); height: 59px; width: 59px; } .ConversationHead.normal .headWrapper { overflow: hidden; background: #fff; border-radius: 50%; display: inline-block; height: 59px; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); mask-image: radial-gradient(#fff, #000); position: relative; width: 59px; } .ConversationHead.normal .headWrapper div.head { font-size: 18px; line-height: 59px; } .ConversationHead.normal .headWrapper .noDrag { bottom: 0; left: 0; right: 0; top: 0; position: absolute; } .ConversationHead.normal .headWrapper.groupBoardWrapper { border-radius: 4px; } .ConversationHead.normal .halfWrapper { position: absolute; width: 59px; } .ConversationHead.normal .halfWrapper .head { font-size: 14.75px; } .ConversationHead.normal .leftWrapper.halfWrapper { clip: rect(0, 30px, 59px, 0); left: -1px; right: auto; } .ConversationHead.normal .leftWrapper.halfWrapper div.head { font-size: 24px; line-height: 59px; } .ConversationHead.normal .leftWrapper.halfWrapper img, .ConversationHead.normal .leftWrapper.halfWrapper div.head { font-size: 14.75px; height: 59px; left: -12px; position: absolute; top: 0; width: 59px; } .ConversationHead.normal .rightWrapper div.head { font-size: 24px; line-height: 59px; } .ConversationHead.normal .rightWrapper.isWholeHalf { clip: rect(0, 59px, 59px, 30px); right: 0; } .ConversationHead.normal .rightWrapper.isWholeHalf img, .ConversationHead.normal .rightWrapper.isWholeHalf div.head { font-size: 14.75px; position: relative; right: -12px; } .ConversationHead.normal .rightWrapper.smallImage { clip: rect(0, 30px, 30px, 0); right: -1px; width: 30px; } .ConversationHead.normal .rightWrapper.smallImage div.head { font-size: 9px; line-height: 30px; } .ConversationHead.normal .rightWrapper.smallImage.top { top: -1px; } .ConversationHead.normal .rightWrapper.smallImage.bottom { bottom: -1px; } .ConversationHead.normal .rightWrapper.smallImage.top div.head, .ConversationHead.normal .rightWrapper.smallImage.bottom div.head { font-size: 11.8px; padding-left: 7px; text-align: left; } .ConversationHead.normal.opening .headWrapper { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); } .ConversationHead.small .headWrapper { overflow: hidden; background: #fff; border-radius: 50%; display: inline-block; height: 33px; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); mask-image: radial-gradient(#fff, #000); position: relative; width: 33px; } .ConversationHead.small .headWrapper div.head { font-size: 10px; line-height: 33px; } .ConversationHead.small .headWrapper .noDrag { bottom: 0; left: 0; right: 0; top: 0; position: absolute; } .ConversationHead.small .headWrapper.groupBoardWrapper { border-radius: 4px; } .ConversationHead.small .halfWrapper { position: absolute; width: 33px; } .ConversationHead.small .halfWrapper .head { font-size: 8.25px; } .ConversationHead.small .leftWrapper.halfWrapper { clip: rect(0, 17px, 33px, 0); left: -1px; right: auto; } .ConversationHead.small .leftWrapper.halfWrapper div.head { font-size: 13px; line-height: 33px; } .ConversationHead.small .leftWrapper.halfWrapper img, .ConversationHead.small .leftWrapper.halfWrapper div.head { font-size: 8.25px; height: 33px; left: -7px; position: absolute; top: 0; width: 33px; } .ConversationHead.small .rightWrapper div.head { font-size: 13px; line-height: 33px; } .ConversationHead.small .rightWrapper.isWholeHalf { clip: rect(0, 33px, 33px, 17px); right: 0; } .ConversationHead.small .rightWrapper.isWholeHalf img, .ConversationHead.small .rightWrapper.isWholeHalf div.head { font-size: 8.25px; position: relative; right: -7px; } .ConversationHead.small .rightWrapper.smallImage { clip: rect(0, 17px, 17px, 0); right: -1px; width: 17px; } .ConversationHead.small .rightWrapper.smallImage div.head { font-size: 5px; line-height: 17px; } .ConversationHead.small .rightWrapper.smallImage.top { top: -1px; } .ConversationHead.small .rightWrapper.smallImage.bottom { bottom: -1px; } .ConversationHead.small .rightWrapper.smallImage.top div.head, .ConversationHead.small .rightWrapper.smallImage.bottom div.head { font-size: 6.6px; padding-left: 7px; text-align: left; } .ConversationHead.small .headWrapper div.head { font-size: 11px; } .ConversationHead.small .contentContainer { height: 33px; width: 33px; } .ConversationHead.medium { height: 50px; width: 50px; } .ConversationHead.medium .headWrapper { overflow: hidden; background: #fff; border-radius: 50%; display: inline-block; height: 50px; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); mask-image: radial-gradient(#fff, #000); position: relative; width: 50px; } .ConversationHead.medium .headWrapper div.head { font-size: 15px; line-height: 50px; } .ConversationHead.medium .headWrapper .noDrag { bottom: 0; left: 0; right: 0; top: 0; position: absolute; } .ConversationHead.medium .headWrapper.groupBoardWrapper { border-radius: 4px; } .ConversationHead.medium .halfWrapper { position: absolute; width: 50px; } .ConversationHead.medium .halfWrapper .head { font-size: 12.5px; } .ConversationHead.medium .leftWrapper.halfWrapper { clip: rect(0, 25px, 50px, 0); left: -1px; right: auto; } .ConversationHead.medium .leftWrapper.halfWrapper div.head { font-size: 20px; line-height: 50px; } .ConversationHead.medium .leftWrapper.halfWrapper img, .ConversationHead.medium .leftWrapper.halfWrapper div.head { font-size: 12.5px; height: 50px; left: -10px; position: absolute; top: 0; width: 50px; } .ConversationHead.medium .rightWrapper div.head { font-size: 20px; line-height: 50px; } .ConversationHead.medium .rightWrapper.isWholeHalf { clip: rect(0, 50px, 50px, 25px); right: 0; } .ConversationHead.medium .rightWrapper.isWholeHalf img, .ConversationHead.medium .rightWrapper.isWholeHalf div.head { font-size: 12.5px; position: relative; right: -10px; } .ConversationHead.medium .rightWrapper.smallImage { clip: rect(0, 25px, 25px, 0); right: 0px; width: 25px; } .ConversationHead.medium .rightWrapper.smallImage div.head { font-size: 8px; line-height: 25px; } .ConversationHead.medium .rightWrapper.smallImage.top { top: -1px; } .ConversationHead.medium .rightWrapper.smallImage.bottom { bottom: 0px; } .ConversationHead.medium .rightWrapper.smallImage.top div.head, .ConversationHead.medium .rightWrapper.smallImage.bottom div.head { font-size: 10px; padding-left: 7px; text-align: left; } .ConversationHead.messageDraft { height: 44px; width: 44px; } .ConversationHead.messageDraft .headWrapper { overflow: hidden; background: #fff; border-radius: 50%; display: inline-block; height: 44px; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); mask-image: radial-gradient(#fff, #000); position: relative; width: 44px; } .ConversationHead.messageDraft .headWrapper div.head { font-size: 13px; line-height: 44px; } .ConversationHead.messageDraft .headWrapper .noDrag { bottom: 0; left: 0; right: 0; top: 0; position: absolute; } .ConversationHead.messageDraft .headWrapper.groupBoardWrapper { border-radius: 4px; } .ConversationHead.messageDraft .halfWrapper { position: absolute; width: 44px; } .ConversationHead.messageDraft .halfWrapper .head { font-size: 11px; } .ConversationHead.messageDraft .leftWrapper.halfWrapper { clip: rect(0, 22px, 44px, 0); left: -1px; right: auto; } .ConversationHead.messageDraft .leftWrapper.halfWrapper div.head { font-size: 18px; line-height: 44px; } .ConversationHead.messageDraft .leftWrapper.halfWrapper img, .ConversationHead.messageDraft .leftWrapper.halfWrapper div.head { font-size: 11px; height: 44px; left: -9px; position: absolute; top: 0; width: 44px; } .ConversationHead.messageDraft .rightWrapper div.head { font-size: 18px; line-height: 44px; } .ConversationHead.messageDraft .rightWrapper.isWholeHalf { clip: rect(0, 44px, 44px, 22px); right: 0; } .ConversationHead.messageDraft .rightWrapper.isWholeHalf img, .ConversationHead.messageDraft .rightWrapper.isWholeHalf div.head { font-size: 11px; position: relative; right: -9px; } .ConversationHead.messageDraft .rightWrapper.smallImage { clip: rect(0, 22px, 22px, 0); right: 0px; width: 22px; } .ConversationHead.messageDraft .rightWrapper.smallImage div.head { font-size: 7px; line-height: 22px; } .ConversationHead.messageDraft .rightWrapper.smallImage.top { top: -1px; } .ConversationHead.messageDraft .rightWrapper.smallImage.bottom { bottom: 0px; } .ConversationHead.messageDraft .rightWrapper.smallImage.top div.head, .ConversationHead.messageDraft .rightWrapper.smallImage.bottom div.head { font-size: 8.8px; padding-left: 7px; text-align: left; } .ConversationHead.messageDraft .headWrapper div.head { font-size: 14.66667px; } .ConversationHead:hover .conversationHeadClose { visibility: visible; } .ConversationHead.inactive { filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: brightness(65%); filter: brightness(65%); opacity: .9; } .ConversationHead.cloned { position: absolute; z-index: 999999999; } .ConversationHead img { width: 100%; } .ConversationHead div.head { background-color: #bd081c; color: #fff; display: inline-block; height: 100%; text-align: center; width: 100%; } .ConversationHead .head.email { background-color: #999; } .ConversationHead .contentContainer { position: relative; } .ConversationHead a { padding: 0 !important; } .ConversationHead .badge { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #bd081c; border-radius: 20px; color: #fff; font-size: 10px; font-weight: bold; height: 16px; line-height: 11px; padding: 1px 5px 2px; position: absolute; right: -1px; top: 0; } .ConversationHead .badge span { color: #fff; } .ConversationHead .nameText { color: #999; margin-top: 3px; text-align: center; } .ConversationHead .conversationHeadClose { left: -1px; position: absolute; top: -2px; visibility: hidden; z-index: 701; } .ConversationHead.touch .conversationHeadClose { visibility: visible; } .ConversationListItem { overflow: hidden; color: #666; cursor: pointer; height: 35px; padding: 10px; position: relative; } .ConversationListItem.hasTimestamp { height: 50px; } .ConversationListItem .left { float: left; margin-right: 10px; } .ConversationListItem .left .ConversationHead { -webkit-transform: translateZ(0); margin-top: 1px; } .ConversationListItem.animatingOut { -webkit-animation: conversationListItemSlideOut .2s ease-in-out; animation: conversationListItemSlideOut .2s ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .ConversationListItem.animatingOut.animatedOut { border: 0; height: 0; padding: 0; } .ConversationListItem.hideable:hover .hideableButton { display: block; position: absolute; right: 8px; top: 5px; } .ConversationListItem.hideable:hover .hideableButton:hover .buttonText { color: #666; } .ConversationListItem.hideable:hover .unreadMark { display: none; } .ConversationListItem .hideableButton { color: #999; display: none; float: right; margin: 1px 0 0 3px; position: relative; top: -5px; } .ConversationListItem .hideableButton .buttonText { font-size: 18px; font-weight: bold; } .ConversationListItem .timeStamp { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #acacac; font-size: 11px; font-weight: bold; margin: 2px 0 3px 3px; } .ConversationListItem .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #666; margin-bottom: 2px; } .ConversationListItem .title a { display: inline; line-height: 12px; padding: 0; } .ConversationListItem .title a:hover { color: #bd081c; } .ConversationListItem.showingLastMessageObjectPreview .title { max-width: 180px; } .ConversationListItem.showingLastMessageObjectPreview:hover .title { max-width: 129px; } .ConversationListItem.showingLastMessageObjectPreview .subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .ConversationListItem.hasSelectedStateAvailable .title { max-width: 205px; } .ConversationListItem .lastObjectSent { position: relative; overflow: hidden; border-radius: 3px; position: absolute; right: 10px; -webkit-transition: -webkit-transform .1s ease-in-out; transition: -webkit-transform .1s ease-in-out; transition: transform .1s ease-in-out; transition: transform .1s ease-in-out, -webkit-transform .1s ease-in-out; } .ConversationListItem .lastObjectSent::after { border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 51; left: 0; position: absolute; top: 0; width: 51; } .ConversationListItem .lastObjectSent .lastMessageSentImage { border-radius: 3px; height: 51; width: 51; } .ConversationListItem.active .selectedState { width: 34px; height: 34px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -74px no-repeat; border: 0; border-radius: 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ConversationListItem.active .selectedState { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -72px; background-size: 428px 427px; } } .ConversationListItem .titleSubtitleWrapper { float: left; margin-top: 1px; } .ConversationListItem .selectedState { background: #fff; border: 1px solid #eee; border-radius: 50px; float: right; height: 34px; width: 34px; } .ConversationListItem.hideSubtitle { padding-bottom: 6px; padding-top: 6px; } .ConversationListItem.hideSubtitle .title { margin-top: 7px; } .ConversationListItem .subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #666; line-height: 14px; margin: 0 0 2px; } .ConversationListItem .subtitle.sentObject { font-style: italic; } .ConversationListItem:hover { background-color: #eeeeee; } .ConversationListItem:hover .lastObjectSent { -webkit-transform: translateX(-20px) translateZ(0); transform: translateX(-20px) translateZ(0); } .ConversationListItem.unread .title, .ConversationListItem.unread .title a, .ConversationListItem.unread .subtitle { color: #333; } .ConversationListItem .comma { margin-left: -3px; } .ConversationListItem.collabGroupBoardView { background: #fff; /* TODO: better specificity once exp gating taken out */ } .ConversationListItem.collabGroupBoardView.unread { background: #fff; /* TODO: better specificity once exp gating taken out */ } .ConversationListItem.collabGroupBoardView.unread .lastMessageContent .subtitle { color: #555; font-weight: bold; } .ConversationListItem.collabGroupBoardView.unread .timeStamp { color: #555; font-weight: bold; } .ConversationListItem.collabGroupBoardView .title a, .ConversationListItem.collabGroupBoardView .title a:hover { color: #555; font-size: 14px; } .ConversationListItem.collabGroupBoardView .lastMessageContent .subtitle { color: #b5b5b5; font-weight: normal; } .ConversationListItem.collabGroupBoardView .timeStamp { color: #b5b5b5; font-weight: normal; } .ConversationListItem.collabGroupBoardView:hover { background: #f1f1f1; } .ConversationListItem .unreadMark { background: #bd081c; border-radius: 50%; height: 5px; position: absolute; right: 15px; top: 15px; width: 5px; } .EmptyConversations { background: #fff; } .EmptyConversations .intro { color: #999; font-size: 13px; margin: 20px auto 24px; text-align: center; width: 210px; } .EmptyConversations .intro strong { color: #666; letter-spacing: .1px; line-height: 20px; } .EmptyConversations .icon { background: url(https://s.pinimg.com/webapp/style/images/messages-blank-combined-1x-546e543f.png) no-repeat; background-size: contain; height: 238px; width: 280px; margin: 30px auto 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .EmptyConversations .icon { background-image: url(https://s.pinimg.com/webapp/style/images/messages-blank-combined-2x-18885d27.png); } } .EmptyConversations .headsContainer { margin-left: auto; margin-right: auto; padding: 25px; width: 225px; } .EmptyConversations .headsContainer::after { clear: both; content: ""; display: table; } .EmptyConversations .headsContainer .ConversationHead { float: left; margin-right: 24px; } .EmptyConversations .headsContainer .ConversationHead:last-child { margin-right: 0; } .CardSourceAttribution { padding: 0 8px 16px; } .CardSourceAttribution .attributionLink { display: inline-block; } .CardSourceAttribution .attributionLink h4 { color: #444; font-size: 14px; } .CardSourceAttribution .attributionLink h4.title { font-weight: normal; height: 18px; } .CardSourceDescriptionText .descriptionSection { margin: 0; padding: 0 8px 16px; width: 470px; } .CloseupMakeCard { margin-bottom: 40px; min-height: 246px; position: relative; } .CloseupMakeCard .hero { position: relative; } .CloseupMakeCard .hero::after { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background: rgba(0, 0, 0, 0.02); content: ""; display: block; } .CloseupMakeCard .hoverMask { bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: background 0.04s linear; transition: background 0.04s linear; border-radius: 8px; box-shadow: none; z-index: 100; } .CloseupMakeCard .images:hover .hoverMask { background: rgba(0, 0, 0, 0.6); } .CloseupMakeCard .images:active .hoverMask { background: rgba(0, 0, 0, 0.6); } .CloseupMakeCard .hoverMask { background: transparent; } .CloseupMakeCard .hoverMask .moreText { color: #fff; display: none; font-size: 18px; font-weight: bold; margin-top: 82px; text-align: center; } .CloseupMakeCard .hoverMask:hover { background: rgba(0, 0, 0, 0.6); cursor: pointer; } .CloseupMakeCard .hoverMask:hover .moreText { display: block; } .CloseupMakeCard h1 { font-size: 24px; margin: 16px 8px; } .CloseupMakeCard h1.mainHeader:not(.displayed) { -webkit-animation: fadeOutAndHide 0.1s cubic-bezier(0.21, 0, 0.21, 1) forwards; animation: fadeOutAndHide 0.1s cubic-bezier(0.21, 0, 0.21, 1) forwards; display: none; } .CloseupMakeCard h1.mainHeader .stats { color: #b5b5b5; display: inline-block; float: right; font-size: 12px; font-weight: normal; margin-top: 14px; } .CloseupMakeCard.amplified { min-height: 276px; } .CloseupMakeCard .amplifiedExpandedHeader { display: none; } .CloseupMakeCard .amplifiedExpandedHeader.displayed { -webkit-animation: fadeIn 0.4s cubic-bezier(0.31, 0, 0.31, 1) forwards; animation: fadeIn 0.4s cubic-bezier(0.31, 0, 0.31, 1) forwards; display: block; } .CloseupMakeCard .amplifiedExpandedHeader .amplifiedHeaderText { display: inline-block; } .CloseupMakeCard .amplifiedExpandedHeader .amplifiedHeaderText h1 { margin-bottom: 0; max-width: 454px; } .CloseupMakeCard .amplifiedExpandedHeader .amplifiedHeaderText .attribution { margin-bottom: 24px; margin-top: 8px; } .CloseupMakeCard .amplifiedExpandedHeader .thumb { float: right; margin-top: 16px; } .CloseupMakeCard .attribution { font-size: 14px; margin: 16px 8px; } .CloseupMakeCard .attribution a { color: #444; font-weight: normal; } .CloseupMakeCard .hero { border-left: 2px solid #fff; width: 100%; } .CloseupMakeCard .hero img { height: 200px; -o-object-fit: cover; object-fit: cover; width: 100%; } .CloseupMakeCard .collapsed { position: absolute; } .CloseupMakeCard .collapsed .images { border-radius: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; position: relative; width: 100%; } .CloseupMakeCard .collapsed:not(.displayed) { -webkit-animation: fadeOutAndHide 0.1s cubic-bezier(0.21, 0, 0.21, 1) forwards; animation: fadeOutAndHide 0.1s cubic-bezier(0.21, 0, 0.21, 1) forwards; } .CloseupMakeCard .expanded { clear: both; display: none; } .CloseupMakeCard .expanded.displayed { -webkit-animation: fadeIn 0.4s cubic-bezier(0.31, 0, 0.31, 1) forwards; animation: fadeIn 0.4s cubic-bezier(0.31, 0, 0.31, 1) forwards; display: block; } .CloseupMakeCard .expanded p, .CloseupMakeCard .expanded h2, .CloseupMakeCard .expanded h3, .CloseupMakeCard .expanded ul, .CloseupMakeCard .expanded .thumb { margin: 0 8px; } .CloseupMakeCard .expanded h2 { font-size: 18px; line-height: 24pt; margin-top: 32px; } .CloseupMakeCard .expanded h3 { color: #b5b5b5; font-size: 12px; font-weight: normal; line-height: 15pt; } .CloseupMakeCard .expanded p { font-size: 18px; letter-spacing: -.23px; max-width: 454px; } .CloseupMakeCard .expanded .hero { margin-top: 32px; } .CloseupMakeCard .expanded .suppliesList { border-spacing: 0 4px; font-size: 16px; line-height: 24px; margin: 16px 8px 64px; } .CloseupMakeCard .expanded .suppliesList .amount { color: #555; font-weight: bold; } .CloseupMakeCard .expanded .suppliesList .amount .amountBlock { display: inline-block; padding-right: 16px; width: 54px; } .CloseupMakeCard .expanded .suppliesList td { padding-bottom: 4px; vertical-align: top; } .CloseupMakeCard .expanded img { border-radius: 8px; width: 564px; } .CloseupMakeCard .expanded .instructions .instruction { display: inline-block; } .CloseupMakeCard .expanded .instructions .instruction .overlayMask { position: relative; } .CloseupMakeCard .expanded .instructions .instruction .overlayMask::after { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background: rgba(0, 0, 0, 0.02); content: ""; display: block; border-radius: 8px; } .CloseupMakeCard .expanded .instructions .instruction h2 { margin-top: 0; } .CloseupMakeCard .expanded .instructions .instruction .stepNumber { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: rgba(0, 0, 0, 0.75); border-radius: 50%; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 18px; font-weight: bold; height: 40px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40px; margin: 16px 8px; } .CloseupMakeCard .expanded .instructions .instruction .overlayMask { margin-bottom: 16px; } .CloseupMakeCard .expanded .instructions .instruction:not(:last-of-type) p { margin: 0 8px 64px; } .CloseupMakeCard .expanded .instructions .instruction:last-of-type p { margin: 0 8px 16px; } .CloseupSourceDescription { color: #444; padding: 0 32px; } .CloseupSourceDescription .hr.cardDivider { margin: 0; } .CloseupSourceDescription .richPinInformation { overflow: hidden; /* need to consult with design on proper width */ /* this is also random */ clear: both; font-size: 18px; position: relative; /* side padding because the map module should not have any side padding */ /* amplified layout */ /* recipe */ /* description sections, for any rich pin types */ } .CloseupSourceDescription .richPinInformation .sourceAttribution { padding: 16px 8px 0; } .CloseupSourceDescription .richPinInformation .richPinArticleSummary, .CloseupSourceDescription .richPinInformation .recipesIngredientsHeader, .CloseupSourceDescription .richPinInformation .pinDescriptionListTotal, .CloseupSourceDescription .richPinInformation .richPinPhotoAttribution { padding: 0 8px 16px; } .CloseupSourceDescription .richPinInformation .richPinArticleSummary { font-size: 18px; line-height: 20px; width: 470px; } .CloseupSourceDescription .richPinInformation .richPinArticleAttribution, .CloseupSourceDescription .richPinInformation .richPinPhotoAttribution { font-size: 15px; padding: 0 0 16px 8px; } .CloseupSourceDescription .richPinInformation .richPinArticleAttribution { float: left; width: 192px; } .CloseupSourceDescription .richPinInformation .richPinArticleAttribution .richPinArticleAuthor { font-weight: bold; } .inAOPromptsGroup .CloseupSourceDescription .richPinInformation .richPinArticleAttribution { display: none; } .CloseupSourceDescription .richPinInformation.noRichData .richPinPhotoAttribution { padding-top: 0; } .CloseupSourceDescription .richPinInformation .richPinPhotoAttribution { clear: both; float: none; } .CloseupSourceDescription .richPinInformation .richPinPhotoAttribution.inArticle { clear: right; float: left; width: 298px; } .CloseupSourceDescription .richPinInformation .richPinPhotoAttribution a, .CloseupSourceDescription .richPinInformation .richPinPhotoAttribution a:hover { color: inherit; font-weight: bold; } .CloseupSourceDescription .richPinInformation .recipeIngredientSection { padding-bottom: 10px; } .CloseupSourceDescription .richPinInformation .recipeIngredientSection:last-child { padding-bottom: 0; } .CloseupSourceDescription .richPinInformation .hr + .recipesIngredientsHeader, .CloseupSourceDescription .richPinInformation .hr + .pinDescriptionListTotal { padding-top: 16px; } .CloseupSourceDescription .richPinInformation .recipesIngredientsHeader { padding-bottom: 20px; } .CloseupSourceDescription .richPinInformation .recipesIngredientsHeader .ingredientsTitle { font-size: 21px; } .CloseupSourceDescription .richPinInformation .recipesIngredientsHeader .recipeDiet { color: #b5b5b5; font-size: 14px; margin: 5px 0; } .CloseupSourceDescription .richPinInformation .pinDescriptionListTotal { display: -webkit-box; display: -ms-flexbox; display: flex; } .CloseupSourceDescription .richPinInformation .pinDescriptionListTotal .pinDescriptionListSection { padding-right: 30px; width: 250px; } .CloseupSourceDescription .richPinInformation .pinDescriptionListTotal .pinDescriptionListSection .pinDescriptionItemHeading, .CloseupSourceDescription .richPinInformation .pinDescriptionListTotal .pinDescriptionListSection .pinDescriptionItemName { font-size: 16px; padding-bottom: 5px; } .CloseupSourceDescription .richPinInformation .pinDescriptionListTotal .pinDescriptionListSection .pinDescriptionItemName { display: block; -webkit-box-pack: inherit; -ms-flex-pack: inherit; justify-content: inherit; } .CloseupTitleCard { color: #444; font-weight: bold; } .CloseupTitleCard .richPinInformation { padding: 0 40px 16px; padding-top: 0; width: 470px; /* 80% of closeup width */ } .CloseupTitleCard a { color: #444; } .CloseupTitleCard a:hover, .CloseupTitleCard a:active { color: #444; } .CloseupTitleCard .richPinSourceWrapper { font-size: 14px; padding-bottom: 4px; } .CloseupTitleCard .richPinTitle, .CloseupTitleCard .richPinSecondTitleWrapper { font-size: 30px; line-height: 30px; } .CloseupTitleCard .outOfStock { color: #b9b9b9; font-size: 14px; font-weight: normal; margin-left: -3px; } .MessageDraft { padding: 20px; } .MessageDraft .messageForm { font-size: 18px; font-weight: bold; } .MessageDraft .selectedUser { padding-bottom: 10px; position: relative; } .MessageDraft .headIcon { float: left; margin-right: 12px; } .MessageDraft .userInfo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float: left; } .MessageDraft .userInfo .displayName { color: #555; font-weight: bold; overflow: hidden; text-overflow: ellipsis; } .MessageDraft .cancel { cursor: pointer; display: none; margin-top: -17px; position: absolute; right: 0; top: 50%; } .MessageDraft .cancel em { width: 17px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat; float: left; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MessageDraft .cancel em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -88px -375px; background-size: 428px 427px; } } .MessageDraft .selectedUser:hover .cancel { display: inline-block; } .MessageDraft .messageField { background: #eee; border-bottom: 0; border-radius: 3px; height: 4.25em; margin-bottom: 8px; resize: none; } .MessageDraft .messageField:focus { outline: 1px solid #eee !important; } .MessageDraft.sendShare .selectedUser { height: 32px; } .MessageDraft.sendShare .userInfo { /* TODO(rshih): Look into how to avoid setting an explicit width here. */ width: 200px; } .MessageDraft.sendShare .userInfo .displayName { color: #666; display: table-cell; font-size: 13px; height: 32px; vertical-align: middle; } .MessageDraft.sendShare .messageField { width: 260px; } .MessageDraft.sendShareBrio .selectedUser { height: 44px; } .MessageDraft.sendShareBrio .userInfo { /* TODO(rshih): Look into how to avoid setting an explicit width here. */ width: 230px; } .MessageDraft.sendShareBrio .userInfo .displayName { color: #555; display: table-cell; font-size: 18px; height: 44px; vertical-align: middle; } .MessageDraft.sendShareBrio .messageField { width: 290px; } .SendInvitationEmail .sendInvitationEmail { cursor: pointer; } .SendInvitationEmail .sendInvitationEmail a { border-bottom: 1px solid #ccc; display: block; padding: 10px; } .SendInvitationEmail .sendInvitationEmail a.unclickable { cursor: default; } .SendInvitationEmail .sendInvitationEmail a:hover { background-color: #eeeeee; } .SendInvitationEmail .sendInvitationEmail p { margin: 0; } .SendInvitationEmail .sendInvitationEmail .leftBlock { float: left; margin-right: 10px; } .SendInvitationEmail .sendInvitationEmail .leftBlock .icon { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; background-color: #999; border-radius: 50%; color: #fff; font-size: 20px; font-weight: bold; height: 33px; line-height: 33px; margin-top: 1px; text-align: center; width: 33px; } .SendInvitationEmail .sendInvitationEmail .leftBlock .icon.typingEmail em { width: 33px; height: 33px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -146px no-repeat; display: block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SendInvitationEmail .sendInvitationEmail .leftBlock .icon.typingEmail em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -142px; background-size: 428px 427px; } } .SendInvitationEmail .sendInvitationEmail .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; font-weight: bold; margin: 1px 0; } .SendInvitationEmail .sendInvitationEmail .subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #b7b7b7; font-weight: normal; margin: 2px 0 0; } .SendObjectBase { overflow-y: hidden; background-color: #fff; border-radius: 3px; overflow: hidden; position: relative; width: 320px; z-index: 1; } .SendObjectBase.fullWidth { width: 100%; } .isEmpty .SendObjectBase .ConversationsList { overflow: visible; } .SendObjectBase .convosTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; font-size: 16px; font-weight: 500; height: 1em; margin-top: -.5em; max-width: 285px; padding-left: 4px; position: absolute; top: 50%; } .SendObjectBase input { background: #f8f8f8; border: 0; border-bottom: 1px solid #ddd; border-radius: 0; box-shadow: none; display: block; font-size: 13px; margin-top: 0; padding: 10px; width: 100%; } .SendObjectBase input:focus { background: #fff; box-shadow: none; } .SendObjectBase .searchBox { border-top-left-radius: 0; border-top-right-radius: 0; overflow-y: auto; width: 100%; } .SendObjectBase .searchBox input { border-bottom: 1px solid #ddd; } .SendObjectBase .spinner { background: url(https://s.pinimg.com/webapp/style/images/spinner-small-1x-b897d25e.gif) no-repeat; background-size: contain; height: 16px; width: 16px; display: inline-block; opacity: .5; display: none; right: 10px; top: 64px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SendObjectBase .spinner { background-image: url(https://s.pinimg.com/webapp/style/images/spinner-small-2x-dbb1334f.gif); } } .SendObjectBase .spinner.visible { display: block; position: absolute; } .SendObjectBase .Typeahead { -webkit-animation: none; animation: none; box-shadow: none; height: 288px; } .SendObjectBase .ConversationsList { background-color: #fff; height: 288px; overflow-y: auto; } .SendObjectBase .title { font-size: 13px; font-weight: 700; } .SendObjectBase.sendShare, .SendObjectBase.sendShareBrio { /* TODO(kathy): short term first for now, but this breaks encapsulation */ } .SendObjectBase.sendShare .sendShareSearchContacts.fixedHeight, .SendObjectBase.sendShareBrio .sendShareSearchContacts.fixedHeight { height: 337px; } .SendObjectBase.sendShare.compact .spinner, .SendObjectBase.sendShareBrio.compact .spinner { top: 13px; } .SendObjectBase.sendShare .spinner, .SendObjectBase.sendShareBrio .spinner { position: absolute; top: 23px; } .SendObjectBase.sendShare.flex, .SendObjectBase.sendShareBrio.flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .SendObjectBase.sendShare.flex .sendShareSearch, .SendObjectBase.sendShareBrio.flex .sendShareSearch { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .SendObjectBase.sendShare .ContactsList, .SendObjectBase.sendShare .Typeahead, .SendObjectBase.sendShareBrio .ContactsList, .SendObjectBase.sendShareBrio .Typeahead { height: 275px; overflow-x: hidden; overflow-y: scroll; } .SendObjectBase.sendShare .bottomFade, .SendObjectBase.sendShareBrio .bottomFade { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: white; background-color: rgba(255, 255, 255, 0.5); background: -webkit-linear-gradient(rgba(255, 255, 255, 0), white); background: linear-gradient(rgba(255, 255, 255, 0), white); bottom: 84px; height: 30px; position: absolute; width: 100%; } .SendObjectBase.sendShare .SocialTypeaheadField, .SendObjectBase.sendShareBrio .SocialTypeaheadField { -ms-flex-negative: 1; flex-shrink: 1; } .SendObjectBase.sendShare .MessageDraft, .SendObjectBase.sendShareBrio .MessageDraft { display: none; } .SendObjectBase.sendShare .spinner { right: 20px; } .SendObjectBase.sendShareBrio { width: 350px; } .SendObjectBase.sendShareBrio .spinner { right: 30px; } .SendObjectBase.sendSocial { width: 240px; } .SendObjectBase .repinShareUpsellFixedHeight .ContactsList { height: 205px; } .SendObjectBase.flippedSharing { box-shadow: 5px 5px 40px -10px; } .SendObjectBase.flippedSharing .sendShare h4 { font-size: 18px !important; } .SendObjectBase.flippedSharing .sendShare .imageBlockContentBody { display: none; } .SendObjectBase.flippedSharing.sendShare .ContactsList, .SendObjectBase.flippedSharing.sendShare .Typeahead, .SendObjectBase.flippedSharing.sendShareBrio .ContactsList, .SendObjectBase.flippedSharing.sendShareBrio .Typeahead { height: 275px; } .SendObjectBase.flippedSharing.sendShare .sendShareSearchContacts.fixedHeight, .SendObjectBase.flippedSharing.sendShareBrio .sendShareSearchContacts.fixedHeight { height: 384px; } .SendObjectBase.flippedSharing.sendShare .sendShareSearchContacts .searchIconInputWrapper, .SendObjectBase.flippedSharing.sendShareBrio .sendShareSearchContacts .searchIconInputWrapper { border-bottom: 0; padding: 0 20px 10px; } .SendObjectBase.flippedSharing.sendShare .sendShareSearchContacts .Typeahead.userCircleAvatar, .SendObjectBase.flippedSharing.sendShareBrio .sendShareSearchContacts .Typeahead.userCircleAvatar { padding-left: 20px; } .SendObjectBase.flippedSharing.sendShare .sendShareSearchContacts .Typeahead.userCircleSelect li, .SendObjectBase.flippedSharing.sendShareBrio .sendShareSearchContacts .Typeahead.userCircleSelect li { border: 0; } .SendObjectBase.flippedSharing.sendShare .sendShareSearchContacts .Typeahead.userCircleSelect li a, .SendObjectBase.flippedSharing.sendShareBrio .sendShareSearchContacts .Typeahead.userCircleSelect li a { padding: 10px 20px; } .SendPin .shareUpsell { color: #5f5f5f; -ms-flex-negative: 0; flex-shrink: 0; font-size: 18px; padding: 15px 20px 5px; } .SharePinBar { background-color: #eee; border-radius: 0 0 6px 6px; padding: 15px 20px; } .SharePinBar .sharePrompt { color: #555; font-size: 14px; line-height: 16px; padding-bottom: 8px; } .SharePinBar .shareOptions .option { float: left; margin-right: 8px; } .SharePinBar .shareOptions .facebook { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -284px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SharePinBar .shareOptions .facebook { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -33px -342px; background-size: 428px 427px; } } .SharePinBar .shareOptions .twitter { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -68px -384px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SharePinBar .shareOptions .twitter { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -276px; background-size: 428px 427px; } } .SharePinBar .shareOptions .fbMessenger { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -318px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SharePinBar .shareOptions .fbMessenger { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -66px -342px; background-size: 428px 427px; } } .SharePinBar .shareOptions .link { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -216px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SharePinBar .shareOptions .link { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -210px; background-size: 428px 427px; } } .SharePinBar .linkWrapper { display: none; } .SharePinBar .linkWrapper .link { display: table; height: 32px; position: relative; width: 100%; } .SharePinBar .linkWrapper .link .icon { width: 17px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -301px -342px no-repeat; left: 10px; position: absolute; top: 8px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SharePinBar .linkWrapper .link .icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -52px -375px; background-size: 428px 427px; } } .SharePinBar .linkWrapper .link .linkField { background: #fff; border-radius: 3px; display: table-cell; height: 32px; outline: none; padding: 5px 10px 5px 35px; } .SharePinBar .linkWrapper .link .cancelLink { display: table-cell; padding-left: 10px; vertical-align: middle; width: 17px; } .SharePinBar .linkWrapper .link .cancelLink .cancelIcon { width: 17px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SharePinBar .linkWrapper .link .cancelLink .cancelIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -88px -375px; background-size: 428px 427px; } } .flippedSharing .SharePinBar { background-color: transparent; border-bottom: 1px solid #ddd; border-radius: 0; padding: 12px; } .flippedSharing .SharePinBar .linkWrapper .link { height: 44px; } .flippedSharing .SharePinBar .linkWrapper .link .linkField { background: #efefef; } .flippedSharing .SharePinBar .linkWrapper .link .cancelLink { vertical-align: inherit; } .flippedSharing .SharePinBar .sharePrompt { padding-bottom: 16px; } .SocialConnectPanel { border-radius: 3px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow-y: auto; } .SocialConnectPanel .backNav { cursor: pointer; padding: 20px 20px 0; } .SocialConnectPanel .backNav .icon { width: 10px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -316px no-repeat; float: left; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialConnectPanel .backNav .icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px 0; background-size: 428px 427px; } } .SocialConnectPanel .backNav .label { color: #555; font-size: 14px; margin-left: 10px; } .SocialConnectPanel .prompt { color: #555; font-size: 18px; font-weight: bold; padding: 20px; } .SocialConnectPanel .socialConnectOptions { overflow-y: auto; } .SocialConnectPanel .socialConnectOptions .socialConnectWrapper .socialConnect .left { float: left; } .SocialConnectPanel .socialConnectOptions .socialConnectWrapper .socialConnect .left .icon em { display: block; } .SocialConnectPanel .socialConnectOptions li { overflow: hidden; color: #777; display: block; font-size: 12px; position: relative; } .SocialConnectPanel .socialConnectOptions li:first-child { padding-top: 5px; } .SocialConnectPanel .socialConnectOptions li:last-child { padding-bottom: 5px; } .SocialConnectPanel .socialConnectOptions li a { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-weight: bold; color: #777; cursor: pointer; display: block; padding: 9px 14px; } .SocialConnectPanel .socialConnectOptions li a:hover { background: #f1f1f1; color: #333; } .SocialConnectPanel .socialConnectOptions li a:active { background: #eaeaea; } .SocialConnectPanel .socialConnectOptions li a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .SocialConnectPanel .socialConnectOptions li.highlighted a { background-color: #eeeeee; color: #333; } .SocialConnectPanel .socialConnectOptions li:first-child { padding-top: 0; } .SocialConnectPanel .socialConnectOptions li:last-child { border-bottom: 0; padding-bottom: 0; } .SocialConnectPanel .socialConnectOptions li:hover .remove { display: inline; } .SocialConnectPanel.sendShare.compact .prompt { font-size: 15.5px; } .SocialConnectPanel.sendShare.compact .socialConnectOptions > li > a { padding: 4px 10px; } .SocialConnectPanel.sendShare .socialConnectOptions { border-top: 1px solid #eee; } .SocialConnectPanel.sendShare .socialConnectOptions .socialConnectWrapper .socialConnect .left { margin-right: 10px; } .SocialConnectPanel.sendShare .socialConnectOptions .socialConnectWrapper .socialConnect .left .icon { height: 32px; width: 32px; } .SocialConnectPanel.sendShare .socialConnectOptions .socialConnectWrapper .socialConnect .right { display: table-cell; float: none; height: 32px; vertical-align: middle; } .SocialConnectPanel.sendShare .socialConnectOptions .socialConnectWrapper .socialConnect .right .title { color: #666; font-size: 13px; } .SocialConnectPanel.sendShare .socialConnectOptions .socialConnectWrapper .socialConnect .right .subtitle { color: #666; font-size: 12px; font-weight: normal; } .SocialConnectPanel.sendShare .socialConnectOptions li { border-bottom: 1px solid #eee; } .SocialConnectPanel.sendShare .socialConnectOptions li a { padding: 10px; } .SocialConnectPanel.sendShare .socialConnectOptions li.socialConnectFacebook em { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -284px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialConnectPanel.sendShare .socialConnectOptions li.socialConnectFacebook em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -33px -342px; background-size: 428px 427px; } } .SocialConnectPanel.sendShare .socialConnectOptions li.socialConnectGplus em { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -102px -384px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialConnectPanel.sendShare .socialConnectOptions li.socialConnectGplus em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -252px -201px; background-size: 428px 427px; } } .SocialConnectPanel.sendShare .socialConnectOptions li.socialConnectTwitter em { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -68px -384px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialConnectPanel.sendShare .socialConnectOptions li.socialConnectTwitter em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -276px; background-size: 428px 427px; } } .SocialConnectPanel.sendShare .socialConnectOptions li.socialConnectYahoo em { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -384px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialConnectPanel.sendShare .socialConnectOptions li.socialConnectYahoo em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -99px -342px; background-size: 428px 427px; } } .SocialConnectPanel.sendShareBrio { padding-bottom: 16px; } .SocialConnectPanel.sendShareBrio .socialConnectOptions .socialConnectWrapper .socialConnect .left { margin-right: 12px; } .SocialConnectPanel.sendShareBrio .socialConnectOptions .socialConnectWrapper .socialConnect .left .icon { height: 44px; width: 44px; } .SocialConnectPanel.sendShareBrio .socialConnectOptions .socialConnectWrapper .socialConnect .right { display: table-cell; float: none; height: 44px; vertical-align: middle; } .SocialConnectPanel.sendShareBrio .socialConnectOptions .socialConnectWrapper .socialConnect .right .title { color: #555; font-size: 18px; line-height: 20px; } .SocialConnectPanel.sendShareBrio .socialConnectOptions .socialConnectWrapper .socialConnect .right .subtitle { color: #b5b5b5; font-size: 12px; font-weight: normal; } .SocialConnectPanel.sendShareBrio .socialConnectOptions li { border-bottom: 0; } .SocialConnectPanel.sendShareBrio .socialConnectOptions li a { padding: 4px 20px; } .SocialConnectPanel.sendShareBrio .socialConnectOptions li.socialConnectFacebook em { width: 44px; height: 44px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -92px -296px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialConnectPanel.sendShareBrio .socialConnectOptions li.socialConnectFacebook em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -45px -258px; background-size: 428px 427px; } } .SocialConnectPanel.sendShareBrio .socialConnectOptions li.socialConnectGplus em { width: 44px; height: 44px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -46px -296px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialConnectPanel.sendShareBrio .socialConnectOptions li.socialConnectGplus em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -291px -139px; background-size: 428px 427px; } } .SocialConnectPanel.sendShareBrio .socialConnectOptions li.socialConnectTwitter em { width: 44px; height: 44px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -296px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialConnectPanel.sendShareBrio .socialConnectOptions li.socialConnectTwitter em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: 0 -258px; background-size: 428px 427px; } } .SocialConnectPanel.sendShareBrio .socialConnectOptions li.socialConnectYahoo em { width: 45px; height: 44px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -287px -248px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialConnectPanel.sendShareBrio .socialConnectOptions li.socialConnectYahoo em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -291px -94px; background-size: 428px 427px; } } .InternalExperimentsConfig div { margin: 16px 32px; } .InternalExperimentsConfig h1 { margin-left: 32px; } .InternalExperimentsConfig h2 { margin-left: 32px; margin-top: 20px; } .InternalExperimentsConfig h3 { margin-bottom: -10px; } .InternalExperimentsConfig i { margin-left: 5px; } .InternalExperimentsConfig input[type=button] { height: 25px; width: 150px; } .InternalExperimentsConfig .actionContainer { overflow: auto; } .InternalExperimentsConfig .left { float: left; } .InternalExperimentsConfig .right { float: right; } .InternalExperimentsConfig .saveButton { bottom: 20px; left: 45%; position: fixed; z-index: 999999999; } .InternalExperimentsConfig .separator { border-bottom: #dedede 1px solid; margin: 20px auto; width: 100%; } .OAuthAuthorizationPage { margin: auto; } .OAuthAuthorizationPage .formHeader { border-bottom: 1px solid #e7e7e7; padding: 15px; } .OAuthAuthorizationPage .logo { width: 104px; height: 26px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -253px -166px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; display: block; margin: auto; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .OAuthAuthorizationPage .logo { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -111px -201px; background-size: 428px 427px; } } .OAuthAuthorizationPage .errorMessage { background: #ffebe8; border: 1px solid #bd081c; font-size: 16px; margin-top: 20px; padding-top: 0; } .OAuthDialog { background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); margin: 100px auto 0; position: relative; max-width: 640px; z-index: 682; } .OAuthPage { width: 670px; } .OAuthPage .header { background-color: #fff; height: 34px; padding: 10px; } .OAuthPage .header .pinterestLogo { width: 104px; height: 26px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -253px -166px no-repeat; display: block; float: left; margin-left: 20px; margin-top: 8px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .OAuthPage .header .pinterestLogo { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -111px -201px; background-size: 428px 427px; } } .OAuthPage .header .joinButton { float: right; margin-right: 20px; } .OAuthPage h2 { padding: 20px 20px 10px; } .OAuthPage .mainContent { margin: 0 20px; max-height: 315px; min-height: 300px; position: relative; width: 630px; } .OAuthPage .mainContent .authUserInfo { text-align: center; } .OAuthPage .mainContent .authUserInfo img { margin: 20px 102.5px 10px; } .OAuthPage .mainContent .userInfo { border-right: 1px solid #ccc; float: left; height: 260px; width: 345px; } .OAuthPage .mainContent .userInfo .standardForm { margin: 0; width: 345px; } .OAuthPage .mainContent .userInfo .loginError { margin: 0 0 0 20px; } .OAuthPage .mainContent .userInfo .authorize { border-bottom-left-radius: 6px; border-right: 1px solid #ccc; bottom: 0; max-height: 65px; min-height: 30px; padding: 20px; position: absolute; text-align: left; width: 305px; } .OAuthPage .mainContent .userInfo .authorize span { float: left; } .OAuthPage .mainContent .userInfo .authorize .authorizeApp { float: right; } .OAuthPage .mainContent .consumerScopes { float: right; height: 290px; width: 284px; } .OAuthPage .mainContent .consumerScopes .consumerScopesWrapper { margin: 20px; } .OAuthPage .mainContent .consumerScopes .consumerScopesWrapper .scopeHeading, .OAuthPage .mainContent .consumerScopes .consumerScopesWrapper .facebookScopes { margin-top: 10px; } .OAuthPage .mainContent .consumerScopes .consumerScopesWrapper li { margin-bottom: 10px; } .OAuthPage .mainContent .consumerScopes .consumerScopesWrapper .websiteInfo { height: 14px; width: 14px; } .OAuthPageBase { color: #777; font-size: 13px; } .OAuthPageBase h1.authorizeHeading { color: #000; font-size: 24px; padding: 20px; } .OAuthPageBase h2.loginHeading { color: #000; font-size: 23px; } .OAuthPageBase .mainContent { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; } .OAuthPageBase .mainContent .standardForm { padding: 0; } .OAuthPageBase .mainContent .standardForm ul { padding: 0; } .OAuthPageBase .mainContent .standardForm ul li { padding: 5px 20px; } .OAuthPageBase .mainContent .standardForm ul input.hasError { background: transparent !important; } .OAuthPageBase .mainContent .standardForm ul .formErrorMessage { position: absolute; right: 34px; top: 16px; } .OAuthPageBase .mainContent .loginError { color: #bd081c; display: none; font-size: 12px; } .OAuthPageBase .mainContent .authorize { background-color: #f0f0f0; } .OAuthPageBase .mainContent .authorize a { font-weight: bold; } .OAuthPageBase .mainContent .consumerScopes img { margin-right: 5px; } .OAuthPageBase .mainContent .consumerScopes .scopeHeading, .OAuthPageBase .mainContent .consumerScopes strong { font-weight: bold; } .OAuthPageBase .mainContent .consumerScopes .moreInfo { margin-bottom: 10px; } .OAuthPageBase .finePrint { font-size: 12px; line-height: 1.5em; margin: 20px; } .OAuthPageBase .finePrint a { font-weight: bold; } .OAuthPageBase .loading { display: none; } .OAuthPageBase .loading .spinner { background: url(https://s.pinimg.com/webapp/style/images/spinning_pin-1x-de64e754.gif) no-repeat; background-size: contain; height: 48px; width: 48px; display: block; margin: 40px auto 0; opacity: .1; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .OAuthPageBase .loading .spinner { background-image: url(https://s.pinimg.com/webapp/style/images/spinning_pin-2x-c17a7c3c.gif); } } .OAuthPageBase .loading h2 { text-align: center; } .AppInstallButtons { margin: 0 auto; text-align: center; top: 450px; width: 100%; /* stylelint-disable-next-line at-rule-no-unknown */ } .AppInstallButtons .left, .AppInstallButtons .right { display: inline-block; float: none; text-align: center; } .AppInstallButtons .left { margin-left: -4px; padding-left: 15px; padding-right: 10px; } .AppInstallButtons .right { padding-left: 10px; padding-right: 15px; } .AppInstallButtons .buttonBorder { border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 5px; } .AppInstallButtons .androidButton { background: url(https://s.pinimg.com/webapp/style/images/EN-1x-193adbd5.png) no-repeat; background-size: contain; height: 50px; width: 152px; display: inline-block; outline: none; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton { background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-ea0db06a.png); } } .AppInstallButtons .iosButton { background: url(https://s.pinimg.com/webapp/style/images/EN-1x-6f0f8e76.png) no-repeat; background-size: contain; height: 50px; width: 167px; display: inline-block; outline: none; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton { background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-1bfaab3e.png); } } .AppInstallButtons .androidButton.CS { background: url(https://s.pinimg.com/webapp/style/images/CS-1x-aa88f4fd.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.CS { background-image: url(https://s.pinimg.com/webapp/style/images/CS-2x-1f99325c.png); } } .AppInstallButtons .iosButton.CS { background: url(https://s.pinimg.com/webapp/style/images/CS-1x-57b27437.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.CS { background-image: url(https://s.pinimg.com/webapp/style/images/CS-2x-387b6b84.png); } } .AppInstallButtons .androidButton.DA { background: url(https://s.pinimg.com/webapp/style/images/DA-1x-b3212f93.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.DA { background-image: url(https://s.pinimg.com/webapp/style/images/DA-2x-881f535b.png); } } .AppInstallButtons .iosButton.DA { background: url(https://s.pinimg.com/webapp/style/images/DA-1x-73095d1e.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.DA { background-image: url(https://s.pinimg.com/webapp/style/images/DA-2x-f75e4549.png); } } .AppInstallButtons .androidButton.DE { background: url(https://s.pinimg.com/webapp/style/images/DE-1x-195f2284.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.DE { background-image: url(https://s.pinimg.com/webapp/style/images/DE-2x-73bba6d5.png); } } .AppInstallButtons .iosButton.DE { background: url(https://s.pinimg.com/webapp/style/images/DE-1x-9a33f8c5.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.DE { background-image: url(https://s.pinimg.com/webapp/style/images/DE-2x-81d4e358.png); } } .AppInstallButtons .androidButton.EL { background: url(https://s.pinimg.com/webapp/style/images/EL-1x-d5e9cffb.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.EL { background-image: url(https://s.pinimg.com/webapp/style/images/EL-2x-75dbffaf.png); } } .AppInstallButtons .iosButton.EL { background: url(https://s.pinimg.com/webapp/style/images/EL-1x-c47b5f4b.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.EL { background-image: url(https://s.pinimg.com/webapp/style/images/EL-2x-f94ceee4.png); } } .AppInstallButtons .androidButton.EN { background: url(https://s.pinimg.com/webapp/style/images/EN-1x-193adbd5.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.EN { background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-ea0db06a.png); } } .AppInstallButtons .iosButton.EN { background: url(https://s.pinimg.com/webapp/style/images/EN-1x-6f0f8e76.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.EN { background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-1bfaab3e.png); } } .AppInstallButtons .androidButton.ES { background: url(https://s.pinimg.com/webapp/style/images/ES-1x-5d4df5f0.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.ES { background-image: url(https://s.pinimg.com/webapp/style/images/ES-2x-4b31e0d2.png); } } .AppInstallButtons .iosButton.ES { background: url(https://s.pinimg.com/webapp/style/images/ES-1x-43d3ab96.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.ES { background-image: url(https://s.pinimg.com/webapp/style/images/ES-2x-a31d918b.png); } } .AppInstallButtons .androidButton.FI { background: url(https://s.pinimg.com/webapp/style/images/FI-1x-df009e22.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.FI { background-image: url(https://s.pinimg.com/webapp/style/images/FI-2x-93552fb9.png); } } .AppInstallButtons .iosButton.FI { background: url(https://s.pinimg.com/webapp/style/images/FI-1x-99cb37da.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.FI { background-image: url(https://s.pinimg.com/webapp/style/images/FI-2x-6cd4e75f.png); } } .AppInstallButtons .androidButton.FR { background: url(https://s.pinimg.com/webapp/style/images/FR-1x-76258add.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.FR { background-image: url(https://s.pinimg.com/webapp/style/images/FR-2x-892d382a.png); } } .AppInstallButtons .iosButton.FR { background: url(https://s.pinimg.com/webapp/style/images/FR-1x-a1b11f36.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.FR { background-image: url(https://s.pinimg.com/webapp/style/images/FR-2x-60ddb3dc.png); } } .AppInstallButtons .androidButton.HU { background: url(https://s.pinimg.com/webapp/style/images/HU-1x-f5a33374.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.HU { background-image: url(https://s.pinimg.com/webapp/style/images/HU-2x-3cf19ccb.png); } } .AppInstallButtons .iosButton.HU { background: url(https://s.pinimg.com/webapp/style/images/HU-1x-ecfb98ab.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.HU { background-image: url(https://s.pinimg.com/webapp/style/images/HU-2x-801f2f76.png); } } .AppInstallButtons .androidButton.ID { background: url(https://s.pinimg.com/webapp/style/images/ID-1x-fc856302.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.ID { background-image: url(https://s.pinimg.com/webapp/style/images/ID-2x-60763725.png); } } .AppInstallButtons .iosButton.ID { background: url(https://s.pinimg.com/webapp/style/images/ID-1x-7723e800.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.ID { background-image: url(https://s.pinimg.com/webapp/style/images/ID-2x-511fb06d.png); } } .AppInstallButtons .androidButton.IT { background: url(https://s.pinimg.com/webapp/style/images/IT-1x-78215d79.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.IT { background-image: url(https://s.pinimg.com/webapp/style/images/IT-2x-f06d21d3.png); } } .AppInstallButtons .iosButton.IT { background: url(https://s.pinimg.com/webapp/style/images/IT-1x-eb49e52c.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.IT { background-image: url(https://s.pinimg.com/webapp/style/images/IT-2x-4e1ebffc.png); } } .AppInstallButtons .androidButton.JA { background: url(https://s.pinimg.com/webapp/style/images/JA-1x-e4d2e103.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.JA { background-image: url(https://s.pinimg.com/webapp/style/images/JA-2x-613b7a1c.png); } } .AppInstallButtons .iosButton.JA { background: url(https://s.pinimg.com/webapp/style/images/JA-1x-e9625ac6.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.JA { background-image: url(https://s.pinimg.com/webapp/style/images/JA-2x-e4949c87.png); } } .AppInstallButtons .androidButton.KO { background: url(https://s.pinimg.com/webapp/style/images/KO-1x-d08dd546.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.KO { background-image: url(https://s.pinimg.com/webapp/style/images/KO-2x-82063d73.png); } } .AppInstallButtons .iosButton.KO { background: url(https://s.pinimg.com/webapp/style/images/KO-1x-3699e0ab.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.KO { background-image: url(https://s.pinimg.com/webapp/style/images/KO-2x-ddc06527.png); } } .AppInstallButtons .androidButton.ML { background: url(https://s.pinimg.com/webapp/style/images/ML-1x-0069db8e.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.ML { background-image: url(https://s.pinimg.com/webapp/style/images/ML-2x-85c22418.png); } } .AppInstallButtons .iosButton.ML { background: url(https://s.pinimg.com/webapp/style/images/ML-1x-cfe4f86a.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.ML { background-image: url(https://s.pinimg.com/webapp/style/images/ML-2x-482d4428.png); } } .AppInstallButtons .androidButton.NL { background: url(https://s.pinimg.com/webapp/style/images/NL-1x-ff73753a.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.NL { background-image: url(https://s.pinimg.com/webapp/style/images/NL-2x-8c8e0858.png); } } .AppInstallButtons .iosButton.NL { background: url(https://s.pinimg.com/webapp/style/images/NL-1x-3926d2dd.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.NL { background-image: url(https://s.pinimg.com/webapp/style/images/NL-2x-ffcdfef9.png); } } .AppInstallButtons .androidButton.NN { background: url(https://s.pinimg.com/webapp/style/images/NN-1x-a9972684.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.NN { background-image: url(https://s.pinimg.com/webapp/style/images/NN-2x-85d7db2a.png); } } .AppInstallButtons .iosButton.NN { background: url(https://s.pinimg.com/webapp/style/images/NN-1x-6e36a313.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.NN { background-image: url(https://s.pinimg.com/webapp/style/images/NN-2x-fd2478e8.png); } } .AppInstallButtons .androidButton.PL { background: url(https://s.pinimg.com/webapp/style/images/PL-1x-dc76138d.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.PL { background-image: url(https://s.pinimg.com/webapp/style/images/PL-2x-56d0226f.png); } } .AppInstallButtons .iosButton.PL { background: url(https://s.pinimg.com/webapp/style/images/PL-1x-3a5b9eb6.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.PL { background-image: url(https://s.pinimg.com/webapp/style/images/PL-2x-3cc909a8.png); } } .AppInstallButtons .androidButton.PT { background: url(https://s.pinimg.com/webapp/style/images/PT-1x-61d44f78.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.PT { background-image: url(https://s.pinimg.com/webapp/style/images/PT-2x-91f7acfc.png); } } .AppInstallButtons .iosButton.PT { background: url(https://s.pinimg.com/webapp/style/images/PT-1x-fc9e1aa2.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.PT { background-image: url(https://s.pinimg.com/webapp/style/images/PT-2x-e272dbd6.png); } } .AppInstallButtons .androidButton.RO { background: url(https://s.pinimg.com/webapp/style/images/RO-1x-fda1c018.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.RO { background-image: url(https://s.pinimg.com/webapp/style/images/RO-2x-d48881c4.png); } } .AppInstallButtons .iosButton.RO { background: url(https://s.pinimg.com/webapp/style/images/RO-1x-18736a64.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.RO { background-image: url(https://s.pinimg.com/webapp/style/images/RO-2x-c762cab0.png); } } .AppInstallButtons .androidButton.RU { background: url(https://s.pinimg.com/webapp/style/images/RU-1x-65d3a95b.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.RU { background-image: url(https://s.pinimg.com/webapp/style/images/RU-2x-0ce2c757.png); } } .AppInstallButtons .iosButton.RU { background: url(https://s.pinimg.com/webapp/style/images/RU-1x-ce1d81a3.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.RU { background-image: url(https://s.pinimg.com/webapp/style/images/RU-2x-b89abd86.png); } } .AppInstallButtons .androidButton.SK { background: url(https://s.pinimg.com/webapp/style/images/SK-1x-66e29846.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.SK { background-image: url(https://s.pinimg.com/webapp/style/images/SK-2x-16880fe3.png); } } .AppInstallButtons .iosButton.SK { background: url(https://s.pinimg.com/webapp/style/images/SK-1x-ac41a55d.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.SK { background-image: url(https://s.pinimg.com/webapp/style/images/SK-2x-20b58101.png); } } .AppInstallButtons .androidButton.SV { background: url(https://s.pinimg.com/webapp/style/images/SV-1x-2bad06b4.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.SV { background-image: url(https://s.pinimg.com/webapp/style/images/SV-2x-502a5a32.png); } } .AppInstallButtons .iosButton.SV { background: url(https://s.pinimg.com/webapp/style/images/SV-1x-b3f99f27.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.SV { background-image: url(https://s.pinimg.com/webapp/style/images/SV-2x-b1271639.png); } } .AppInstallButtons .androidButton.TH { background: url(https://s.pinimg.com/webapp/style/images/TH-1x-66e29846.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.TH { background-image: url(https://s.pinimg.com/webapp/style/images/TH-2x-16880fe3.png); } } .AppInstallButtons .iosButton.TH { background: url(https://s.pinimg.com/webapp/style/images/TH-1x-afac524b.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.TH { background-image: url(https://s.pinimg.com/webapp/style/images/TH-2x-7ecf42ba.png); } } .AppInstallButtons .androidButton.TL { background: url(https://s.pinimg.com/webapp/style/images/TL-1x-a001709a.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.TL { background-image: url(https://s.pinimg.com/webapp/style/images/TL-2x-58021b84.png); } } .AppInstallButtons .iosButton.TL { background: url(https://s.pinimg.com/webapp/style/images/TL-1x-31d0bc83.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.TL { background-image: url(https://s.pinimg.com/webapp/style/images/TL-2x-3187e1aa.png); } } .AppInstallButtons .androidButton.TR { background: url(https://s.pinimg.com/webapp/style/images/TR-1x-f7dc0333.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.TR { background-image: url(https://s.pinimg.com/webapp/style/images/TR-2x-4585987c.png); } } .AppInstallButtons .iosButton.TR { background: url(https://s.pinimg.com/webapp/style/images/TR-1x-6f0f8e76.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.TR { background-image: url(https://s.pinimg.com/webapp/style/images/TR-2x-1bfaab3e.png); } } .AppInstallButtons .androidButton.UK { background: url(https://s.pinimg.com/webapp/style/images/UK-1x-9ecb075c.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.UK { background-image: url(https://s.pinimg.com/webapp/style/images/UK-2x-25a04f9a.png); } } .AppInstallButtons .iosButton.UK { background: url(https://s.pinimg.com/webapp/style/images/UK-1x-6f0f8e76.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.UK { background-image: url(https://s.pinimg.com/webapp/style/images/UK-2x-1bfaab3e.png); } } .AppInstallButtons .androidButton.VI { background: url(https://s.pinimg.com/webapp/style/images/VI-1x-aba34925.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .androidButton.VI { background-image: url(https://s.pinimg.com/webapp/style/images/VI-2x-f245f353.png); } } .AppInstallButtons .iosButton.VI { background: url(https://s.pinimg.com/webapp/style/images/VI-1x-474f64a4.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallButtons .iosButton.VI { background-image: url(https://s.pinimg.com/webapp/style/images/VI-2x-119d560d.png); } } .AppInstallModal { height: 420px; overflow: hidden; position: relative; width: 560px; } .AppInstallModal .appUpsell { display: none; } .AppInstallModal .appUpsell .instructions { background: url(https://s.pinimg.com/webapp/style/images/app_install_modal_bg-4c5ea0e5.jpg) no-repeat; background-size: contain; height: 598px; width: 1134px; background-size: cover; } .AppInstallModal .leftArrowPadding { left: 5px; } .AppInstallModal .leftArrowPadding .leftArrow { background: url(https://s.pinimg.com/webapp/style/images/arrow-left-1x-eba0f7d2.png) no-repeat; background-size: contain; height: 13px; width: 10px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallModal .leftArrowPadding .leftArrow { background-image: url(https://s.pinimg.com/webapp/style/images/arrow-left-2x-24a50dd5.png); } } .AppInstallModal .rightArrowPadding { right: 5px; } .AppInstallModal .rightArrowPadding .rightArrow { background: url(https://s.pinimg.com/webapp/style/images/arrow-right-1x-c52743d2.png) no-repeat; background-size: contain; height: 13px; width: 10px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallModal .rightArrowPadding .rightArrow { background-image: url(https://s.pinimg.com/webapp/style/images/arrow-right-2x-8c2a867b.png); } } .AppInstallModal .leftArrowPadding, .AppInstallModal .rightArrowPadding { cursor: pointer; padding: 20px; position: absolute; top: 43%; z-index: 1; } .AppInstallModal .container { height: 420px; width: 1680px; } .AppInstallModal .container .left { left: 0; } .AppInstallModal .container .left .playStoreScreenshot { background: url(https://s.pinimg.com/webapp/style/images/googleplay-1x-ba4f9f8f.png) no-repeat; background-size: contain; height: 200px; width: 447px; margin: 0 auto; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallModal .container .left .playStoreScreenshot { background-image: url(https://s.pinimg.com/webapp/style/images/googleplay-2x-36863106.png); } } .AppInstallModal .container .right { right: 0; } .AppInstallModal .container .right .appStoreScreenshot { background: url(https://s.pinimg.com/webapp/style/images/itunes-1x-bae52a58.png) no-repeat; background-size: contain; height: 200px; width: 446px; margin: 0 auto; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallModal .container .right .appStoreScreenshot { background-image: url(https://s.pinimg.com/webapp/style/images/itunes-2x-36c672cb.png); } } .AppInstallModal .container .middle { left: 560px; } .AppInstallModal .container .middle .leftHalf { float: left; } .AppInstallModal .container .middle .leftHalf .android { background: url(https://s.pinimg.com/webapp/style/images/android-1x-15bc6e21.png) no-repeat; background-size: contain; height: 260px; width: 132px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallModal .container .middle .leftHalf .android { background-image: url(https://s.pinimg.com/webapp/style/images/android-2x-59805d32.png); } } .AppInstallModal .container .middle .rightHalf { display: inline-block; } .AppInstallModal .container .middle .rightHalf .iPhone { background: url(https://s.pinimg.com/webapp/style/images/iphone-1x-3da1ed51.png) no-repeat; background-size: contain; height: 260px; width: 130px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallModal .container .middle .rightHalf .iPhone { background-image: url(https://s.pinimg.com/webapp/style/images/iphone-2x-5213c644.png); } } .AppInstallModal .container .middle .leftHalf, .AppInstallModal .container .middle .rightHalf { cursor: pointer; height: 300px; position: relative; width: 50%; } .AppInstallModal .container .middle .footer { cursor: pointer; } .AppInstallModal .container .middle .footer .leftFooter { float: left; } .AppInstallModal .container .middle .footer .rightFooter { float: right; } .AppInstallModal .container .middle .footer .leftFooter, .AppInstallModal .container .middle .footer .rightFooter { height: 50px; position: relative; text-align: center; vertical-align: middle; width: 50%; } .AppInstallModal .container .left, .AppInstallModal .container .right, .AppInstallModal .container .middle { height: 420px; position: absolute; width: 560px; } .AppInstallModal .header { border-bottom: 1px solid #e0e0e0; height: 66px; text-align: center; } .AppInstallModal .header .title { font-size: 18px; font-weight: bold; padding-top: 22px; } .AppInstallModal .instructions { height: 302px; } .AppInstallModal .instructions .text { font-size: 18px; padding: 29px 10px; text-align: center; } .AppInstallModal .footer { background-color: #f0f0f0; border-radius: 0 0 6px 6px; border-top: 1px solid #e0e0e0; font-size: 18px; font-weight: bold; height: 50px; position: relative; } .AppInstallModal .completedPanel { background-color: #fff; border-radius: 6px; display: none; position: absolute; width: 560px; z-index: 2; } .AppInstallModal .completedPanel .bothDevices { background: url(https://s.pinimg.com/webapp/style/images/iphone_android-1x-4946ffb9.png) no-repeat; background-size: contain; height: 200px; width: 302px; margin: 0 auto; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInstallModal .completedPanel .bothDevices { background-image: url(https://s.pinimg.com/webapp/style/images/iphone_android-2x-64af62d6.png); } } .AppInstallModal .center, .AppInstallModal .GplusConnectButton { left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .AppInstallModal .dynamicButton { font-size: 14px; margin-right: 16px; padding-left: 25px; padding-right: 25px; } .AppInstallModalStatic { color: #555; height: auto; overflow: auto; position: relative; width: auto; } .AppInstallModalStatic .appInstallDescription { font-size: 36px; font-weight: bold; letter-spacing: -1.2px; line-height: 1.2; padding-left: 88px; padding-right: 88px; padding-top: 58px; position: relative; text-align: center; width: 372px; } .AppInstallModalStatic .appButtonsContainer { padding-top: 50px; } .AppInstallModalStatic .appInstallMobileBrowserText { font-size: 16px; padding-bottom: 48px; padding-top: 25px; text-align: center; } .AppInstallModalStatic .pinItText { color: #bd081c; } .AppInterstitial { font-size: 12px; min-height: 300px; min-width: 300px; position: fixed; } .AppInterstitial.pageHeader { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .AppInterstitial.pageHeader .buttonText { font-size: 18px; } @media screen and (orientation: portrait) and (min-height: 600px), screen and (orientation: landscape) and (min-width: 600px) { .AppInterstitial { font-size: 14px; } } .AppInterstitial .halfPage { border-radius: 10px 10px 0 0; height: 50%; left: 5%; top: 15px; width: 90%; } .AppInterstitial .defaultBackground { background-image: url(https://s.pinimg.com/webapp/style/images/bg_travel_grid-59b782c4.jpg); background-size: cover; height: 50%; opacity: 1; position: absolute; width: 100%; z-index: 0; } .AppInterstitial .background { filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: blur(18px); filter: blur(18px); height: 100%; opacity: 0; position: absolute; -webkit-transition: opacity .5s; transition: opacity .5s; width: 100%; z-index: -2; } .AppInterstitial .background.loaded { opacity: .3; } .AppInterstitial .returnBackground { background-size: cover; min-height: 100%; min-width: 100%; -o-object-fit: cover; object-fit: cover; opacity: 0; overflow: hidden; position: absolute; z-index: -2; } .AppInterstitial .returnBackground.loaded { opacity: .5; } .AppInterstitial .returnBackgroundV2 { background-size: cover; min-height: 80%; min-width: 100%; -o-object-fit: cover; object-fit: cover; opacity: 0; overflow: hidden; position: absolute; z-index: -2; } .AppInterstitial .returnBackgroundV2.loaded { opacity: .5; } .AppInterstitial .pinImgContainer { left: 20px; position: absolute; top: 20px; width: 140px; } .AppInterstitial .pinImg { border-radius: 10px 10px 0 0; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); opacity: 0; -webkit-transition: opacity .5s; transition: opacity .5s; width: 140px; } .AppInterstitial .pinImg.loaded { opacity: 1; } .AppInterstitial .imgBottom { background-color: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); height: 150px; } .AppInterstitial .pinDescription { color: #333; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 150px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 180px; position: absolute; vertical-align: middle; } .AppInterstitial .pinDescriptionReturn { color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 20px; position: absolute; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); vertical-align: middle; } .AppInterstitial .pinDescriptionReturnV2 { color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 30px; position: relative; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); top: 160px; vertical-align: middle; } .AppInterstitial .title { font-size: 1.1em; font-weight: bold; } .AppInterstitial .overlay { background-color: #fff; bottom: 0; box-shadow: 0 -10px 15px rgba(0, 0, 0, 0.2); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; left: 0; padding-bottom: 50px; position: absolute; right: 0; top: 150px; } .AppInterstitial .overlay .pinDescription { display: none; } .AppInterstitial .overlayFull { background-color: #fff; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; left: 0; padding-bottom: 50px; position: absolute; right: 0; top: 0; } .AppInterstitial .overlayTransparent { bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; left: 0; padding: 20px; position: absolute; right: 0; top: 180px; } .AppInterstitial .overlayBottom { bottom: 0; left: 0; position: absolute; right: 0; } .AppInterstitial .overlayBottomWhite { background-color: #fff; bottom: 0; left: 0; padding: 20px 0; position: absolute; right: 0; } .AppInterstitial .overlayTop { background-color: #fff; } .AppInterstitial .overlayTop, .AppInterstitial .buttonContainer { padding: 20px; } .AppInterstitial .overlayTitle { color: #555; font-size: 2em; font-weight: bold; padding-bottom: 15px; } .AppInterstitial .overlayReturnTitle { font-size: 2em; font-weight: bold; padding-top: 20px; } .AppInterstitial .interestCarousel { overflow-x: scroll; overflow-y: hidden; padding-left: 20px; padding-right: 19px; white-space: nowrap; width: auto; } .AppInterstitial .interestContainer { border-radius: 6px; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25); display: inline-block; height: 100%; overflow: hidden; padding-right: 1px; position: relative; } .AppInterstitial .interestImage { background: #fff center; background-size: cover; border-radius: 6px; display: block; height: 90px; overflow: hidden; padding: 2px; -webkit-transition: opacity .1s ease-in-out; transition: opacity .1s ease-in-out; width: 90px; } .AppInterstitial .interestLabel { -ms-flex-item-align: center; align-self: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; width: 100%; z-index: 4; } .AppInterstitial .interestLabel h2 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; font-size: 1.3em; line-height: 1.1; padding: 4px; text-align: center; text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.3); white-space: normal; } .AppInterstitial .appInfoText { color: #555; display: inline-block; line-height: 17px; margin: 5px; vertical-align: top; } .AppInterstitial .appInfoText .title { font-weight: bold; } .AppInterstitial .stars { background: url(https://s.pinimg.com/webapp/style/images/stars-1x-9978bc13.png) no-repeat; background-size: contain; height: 10px; width: 66px; margin: 2px 0 3px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInterstitial .stars { background-image: url(https://s.pinimg.com/webapp/style/images/stars-2x-86e578df.png); } } .AppInterstitial .icon { display: inline-block; } .AppInterstitial .icon.iOS { background: url(https://s.pinimg.com/webapp/style/images/ios-icon-1x-80955526.png) no-repeat; background-size: contain; height: 55px; width: 55px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInterstitial .icon.iOS { background-image: url(https://s.pinimg.com/webapp/style/images/ios-icon-2x-5fcc8369.png); } } .AppInterstitial .icon.android { background: url(https://s.pinimg.com/webapp/style/images/android-icon-1x-c02a3e12.png) no-repeat; background-size: contain; height: 55px; width: 55px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInterstitial .icon.android { background-image: url(https://s.pinimg.com/webapp/style/images/android-icon-2x-b9798906.png); } } .AppInterstitial .icon.transparent { background: url(https://s.pinimg.com/webapp/style/images/circlep-1x-1a174050.png) no-repeat; background-size: contain; height: 60px; width: 61px; } .AppInterstitial .buttonInnerContainer { vertical-align: middle; } .AppInterstitial .Button { background: #bc232c; border: 0; border-radius: 4px !important; box-shadow: none; color: #fff; height: 45px; margin: 0 auto; text-shadow: none; -webkit-transition: -webkit-transform .1s ease-in-out; transition: -webkit-transform .1s ease-in-out; transition: transform .1s ease-in-out; transition: transform .1s ease-in-out, -webkit-transform .1s ease-in-out; width: 100%; } .AppInterstitial .Button:active { background: #bc232c !important; -webkit-transform: scale(0.9); transform: scale(0.9); } .AppInterstitial .stayInBrowserLink, .AppInterstitial .interstitialHeaderLoginWithBrowserLink, .AppInterstitial .scrollDownText { color: #999; margin-top: 10px; padding: 10px; text-align: center; } .AppInterstitial .loginBrowserLink { color: #999; margin-top: 20px; text-align: center; } .AppInterstitial .continueBrowserLink { color: #999; margin-top: 20px; text-align: center; } .AppInterstitial .popularInterestsText { color: #999; display: inline-block; line-height: 17px; margin: 5px 0; padding-left: 20px; vertical-align: top; } .AppInterstitial .whiteText { color: #fff; } @media screen and (orientation: portrait) { .AppInterstitial .overlayContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .AppInterstitial .buttonContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (orientation: landscape) { .AppInterstitial .pinDescription { height: 80px; } .AppInterstitial .pinDescriptionReturnV2 { display: none; } .AppInterstitial .overlay { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; top: 80px; } .AppInterstitial .overlayBottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .AppInterstitial .overlayBottomWhite { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 2px; } .AppInterstitial .overlayTop, .AppInterstitial .buttonContainer { width: 50%; } .AppInterstitial .overlayTitle { font-size: 1.8em; } .AppInterstitial .overlayTransparent { top: 30px; } .AppInterstitial .buttonContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .AppInterstitial .carousel { display: none; } } .AppInterstitial.iPad, .AppInterstitial.androidTablet { font-size: 14px; } .AppInterstitial.iPad img.background, .AppInterstitial.androidTablet img.background { max-width: none; } .AppInterstitial.iPad .defaultBackground, .AppInterstitial.androidTablet .defaultBackground { background-image: url(https://s.pinimg.com/webapp/style/images/tablet_default_background-ec3da0cb.jpg); height: 100%; } .AppInterstitial.iPad .pinImgContainer, .AppInterstitial.androidTablet .pinImgContainer { height: 300px; left: 50px; overflow: hidden; padding: 2px; top: 50px; width: 225px; } .AppInterstitial.iPad .pinImg, .AppInterstitial.androidTablet .pinImg { width: 225px; } .AppInterstitial.iPad .title, .AppInterstitial.androidTablet .title { font-size: 1.2em; } .AppInterstitial.iPad .pinDescription, .AppInterstitial.androidTablet .pinDescription { height: 240px; left: 300px; } .AppInterstitial.iPad .overlayTop, .AppInterstitial.iPad .buttonContainer, .AppInterstitial.androidTablet .overlayTop, .AppInterstitial.androidTablet .buttonContainer { padding: 45px; } .AppInterstitial.iPad .overlayTitle, .AppInterstitial.androidTablet .overlayTitle { font-size: 4em; } .AppInterstitial.iPad .appInfoText, .AppInterstitial.androidTablet .appInfoText { line-height: 20px; } .AppInterstitial.iPad .appInfoText .title, .AppInterstitial.androidTablet .appInfoText .title { font-size: 1.3em; } .AppInterstitial.iPad .Button, .AppInterstitial.androidTablet .Button { display: block; font-size: 1.6em; height: 60px; margin: 0 auto; max-width: 500px; } .AppInterstitial.iPad .buttonContainer, .AppInterstitial.androidTablet .buttonContainer { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .AppInterstitial.iPad .stayInBrowserLink, .AppInterstitial.iPad .interstitialHeaderLoginWithBrowserLink, .AppInterstitial.iPad .scrollDownText, .AppInterstitial.androidTablet .stayInBrowserLink, .AppInterstitial.androidTablet .interstitialHeaderLoginWithBrowserLink, .AppInterstitial.androidTablet .scrollDownText { color: #333; font-size: 1.2em; font-weight: bold; margin-top: 30px; } .AppInterstitial.iPad .pinDescription { height: 240px; } .AppInterstitial.iPad .overlay { background-color: transparent; box-shadow: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; top: 240px; } .AppInterstitial.iPad .overlayTop { box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2); } .AppInterstitial.iPad .overlayTop, .AppInterstitial.iPad .buttonContainer { width: auto; } @media screen and (orientation: portrait) { .AppInterstitial.iPad .overlayTop { padding: 100px 45px; } } @media screen and (orientation: landscape) { .AppInterstitial.iPad .appInfo { display: none; } } .AppInterstitial.androidTablet .pinDescription { height: 190px; } .AppInterstitial.androidTablet .overlay { padding-bottom: 100px; top: 190px; } .AppInterstitial.androidTablet .overlayTitle { font-size: 3em; } @media screen and (orientation: portrait) and (max-device-height: 480px) { .AppInterstitial .appInfo { display: none; } } .AppInterstitial.inlineInterstitial { bottom: 0; top: 50%; width: 100%; } .AppInterstitial.inlineInterstitial .appInfo { text-align: center; width: 100%; } .AppInterstitial.inlineInterstitial .appInfoText { text-align: left; } .AppInterstitial.inlineInterstitial .buttonContainer { -webkit-box-flex: inherit; -ms-flex-positive: inherit; flex-grow: inherit; padding: 0 7% 30px; width: inherit; } .AppInterstitial.inlineInterstitial .Button.openInApp .buttonText { font-size: 16px; margin-bottom: 5px; } .AppInterstitial.inlineInterstitial .icon { background: url(https://s.pinimg.com/webapp/style/images/app-store-logo-1x-0056d508.png) no-repeat; background-size: contain; height: 48px; width: 48px; margin-top: 5px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInterstitial.inlineInterstitial .icon { background-image: url(https://s.pinimg.com/webapp/style/images/app-store-logo-2x-a421f3ed.png); } } .AppInterstitial.inlineInterstitial .overlay { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; padding: 0; top: 0%; } .AppInterstitial.inlineInterstitial .overlayTitle { font-size: 1.5em; padding: 0 7%; text-align: center; } .AppInterstitial.inlineInterstitial .overlayTop { padding: 30px 0 0; width: 100%; } .AppInterstitial.blackBanner .appInfoText, .AppInterstitial.blackBanner .overlayTitle, .AppInterstitial.blackBanner .title { color: #fff; } .AppInterstitial.blackBanner .overlay { background: rgba(0, 0, 0, 0.75); } .AppInterstitial.blackBanner .overlayTop { background: transparent; } .AppInterstitial.slideShow { background-color: #000; } .AppInterstitial.slideShow .overlay { padding-bottom: 0; top: 45%; } .AppInterstitial.slideShow .overlay .pinDescription { display: block; } .AppInterstitial.slideShow .pinDescription { color: #fff; display: none; left: 10%; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); top: -45px; } .AppInterstitial.slideShow .background, .AppInterstitial.slideShow .pinImgContainer { display: none; } .AppInterstitial .mobileHomepageBackground { background-image: url(https://s.pinimg.com/webapp/style/images/pin_grid-7106f39b.jpg); height: 50%; opacity: 1; } .AppInterstitial .detail2 { display: none; } .AppInterstitial.defaultHeader .stayInBrowserLink, .AppInterstitial.defaultHeader .interstitialHeaderLoginWithBrowserLink, .AppInterstitial.defaultHeader .scrollDownText { color: #fff; font-size: 1.2em; font-weight: bold; margin-top: 30px; } .AppInterstitial.previewInterstitial { background-color: #fff; padding: 10px 20px; } .AppInterstitial.previewInterstitial.defaultBackground { padding: 0; } .AppInterstitial.previewInterstitial.explorePage .pageSubtitle { display: none; } .AppInterstitial.previewInterstitial.explorePage .miniGridContainer { height: 33vh; } .AppInterstitial.previewInterstitial .pinterestLogo { background: url(https://s.pinimg.com/webapp/style/images/pinterest-logo-1x-7eae5bb2.png) no-repeat; background-size: contain; height: 44px; width: 44px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AppInterstitial.previewInterstitial .pinterestLogo { background-image: url(https://s.pinimg.com/webapp/style/images/pinterest-logo-2x-c59465af.png); } } .AppInterstitial.previewInterstitial .pageTitle { color: #686868; font-size: 24px; font-weight: bold; line-height: 26px; max-height: 52px; min-height: 29px; overflow: hidden; } .AppInterstitial.previewInterstitial .pageSubtitle { color: #b9b9b9; font-weight: bold; height: 17px; } .AppInterstitial.previewInterstitial .miniGridContainer { border-radius: 8px; height: 30vh; margin-top: 10px; -webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%); mask-image: radial-gradient(circle, #fff 100%, #000 100%); overflow: hidden; } .AppInterstitial.previewInterstitial .overlay { bottom: 0; box-shadow: none; height: 250px; padding-bottom: 0; top: auto; } .AppInterstitial.previewInterstitial .overlayTop { padding: 0 20px; } .AppInterstitial.previewInterstitial .overlayTitle { border-bottom: 1px solid #eee; line-height: 1; padding-bottom: 10px; } .AppInterstitial.previewInterstitial .appInfo { padding-top: 10px; } .AppInterstitial.previewInterstitial .buttonContainer { padding: 0 20px; } @media screen and (orientation: landscape) { .AppInterstitial.previewInterstitial .pinterestLogo { display: none; } .AppInterstitial.previewInterstitial .miniGridContainer { display: inline-block; height: 50vh; vertical-align: top; width: 50%; } .AppInterstitial.previewInterstitial .overlay { display: inline-block; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: auto; left: auto; padding-bottom: 0; position: relative; width: 49%; } .AppInterstitial.previewInterstitial .overlayTop { padding-top: 0; width: 80%; } .AppInterstitial.previewInterstitial .overlayTitle { font-size: 1.5em; margin-top: 10px; } .AppInterstitial.previewInterstitial .buttonContainer { width: 80%; } } .denzelAppInterstitial { background-color: #fff; bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 900; } .BlueAppBanner { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #4a97f1; display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: bold; height: 60px; opacity: .95; width: 100%; z-index: 500; } .BlueAppBanner .bannerRight { -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; margin-left: 25px; } .BlueAppBanner .bannerText { color: #fff; } .BlueAppBanner .bannerText .bannerTitle { font-size: 17px; font-weight: bold; } .BlueAppBanner .bannerText .bannerSubtitle { font-size: 13px; } .BlueAppBanner .installButton { background-color: #fff; border-radius: 5px; -webkit-box-flex: 2; -ms-flex: 2 0 0; flex: 2 0 0; margin: 0 25px; padding: 12px 15px; text-align: center; } .BlueAppBanner .installText { color: #4a97f1; font-size: 13px; font-weight: bold; } .BlueAppBanner.bottom { bottom: 0; position: fixed; } .LogoutAppUpsell .getPinterestVideo { background-color: #000; background-image: url(https://s.pinimg.com/webapp/style/images/get_pinterest_mobile-630d9b70.jpg); background-size: cover; bottom: 0; left: 0; overflow: hidden; position: fixed; right: 0; top: 0; } .LogoutAppUpsell .getPinterestVideo video, .LogoutAppUpsell .getPinterestVideo img { height: 100%; left: 50%; -o-object-fit: cover; object-fit: cover; -o-object-position: top 75%; object-position: top 75%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; } @media screen and (min-aspect-ratio: 16 / 9) { .LogoutAppUpsell .getPinterestVideo video, .LogoutAppUpsell .getPinterestVideo img { height: auto; width: 100% !important; } } .LogoutAppUpsell .contents { background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); margin: 100px auto 0; position: relative; max-width: 470px; z-index: 682; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: none; box-shadow: none; color: #fff; margin-top: 0; min-width: 650px; text-align: left; white-space: nowrap; } .LogoutAppUpsell .contents .logoContainer { text-align: center; width: 100%; } .LogoutAppUpsell .contents .logo { width: 251px; height: 85px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -87px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; margin-bottom: 132px; margin-top: 50px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .LogoutAppUpsell .contents .logo { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: 0 -86px; background-size: 428px 427px; } } .LogoutAppUpsell .contents .title { font-size: 52px; font-weight: bold; margin-bottom: 35px; } .LogoutAppUpsell .contents .subtitle, .LogoutAppUpsell .contents .dialogSuccess { font-size: 22px; font-weight: bold; margin-bottom: 20px; } .LogoutAppUpsell .contents .footer { font-size: 14px; margin-top: 20px; } .LogoutAppUpsell .contents .footerLink { color: #fff; text-decoration: underline; } .LogoutAppUpsell .contents .standardForm { margin: 0; } .LogoutAppUpsell .contents .getAppDialog { -webkit-transition: all 1s; transition: all 1s; } .LogoutAppUpsell .contents .getAppDialog .dialogSuccess { display: none; } .LogoutAppUpsell .contents .emailOrPhoneNumber { font-size: 21px; padding-bottom: 11px; padding-left: 10px; padding-top: 11px; width: 360px; } .LogoutAppUpsell .contents .sendAppButton { box-shadow: none; font-size: 21px; margin-left: 15px; padding-bottom: 11px; padding-top: 11px; } .LogoutAppUpsell .contents .formErrorMessage { color: #ffdfdf; } .LogoutAppUpsell .header { font-size: 15px; font-weight: bold; } .LogoutAppUpsell .message { color: #555; line-height: 15px; margin-bottom: 20px; margin-top: 5px; } .App.full .LogoutAppUpsell .contents { z-index: 1; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .MobileLandingPage { background-color: #fff; /* stylelint-disable-next-line property-blacklist */ font-family: sans-serif; /* stylelint-disable-next-line at-rule-no-unknown */ } .MobileLandingPage .topBackground { background-image: url(https://s.pinimg.com/webapp/style/images/background-2eee85f9.jpg); background-size: cover; } .MobileLandingPage .topBackground .topContainer { color: #fff; } .MobileLandingPage .topBackground .topContainer .logo { background: url(https://s.pinimg.com/webapp/style/images/white-pinterest-logo-1x-b5e851a6.png) no-repeat; background-size: contain; height: 26px; width: 99px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .topBackground .topContainer .logo { background-image: url(https://s.pinimg.com/webapp/style/images/white-pinterest-logo-2x-4a56380e.png); } } .MobileLandingPage .androidButton { background: url(https://s.pinimg.com/webapp/style/images/EN-1x-193adbd5.png) no-repeat; background-size: contain; height: 50px; width: 152px; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton { background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-ea0db06a.png); } } .MobileLandingPage .iosButton { background: url(https://s.pinimg.com/webapp/style/images/EN-1x-6f0f8e76.png) no-repeat; background-size: contain; height: 50px; width: 167px; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton { background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-1bfaab3e.png); } } .MobileLandingPage .androidButton.CS { background: url(https://s.pinimg.com/webapp/style/images/CS-1x-aa88f4fd.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.CS { background-image: url(https://s.pinimg.com/webapp/style/images/CS-2x-1f99325c.png); } } .MobileLandingPage .iosButton.CS { background: url(https://s.pinimg.com/webapp/style/images/CS-1x-57b27437.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.CS { background-image: url(https://s.pinimg.com/webapp/style/images/CS-2x-387b6b84.png); } } .MobileLandingPage .androidButton.DA { background: url(https://s.pinimg.com/webapp/style/images/DA-1x-b3212f93.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.DA { background-image: url(https://s.pinimg.com/webapp/style/images/DA-2x-881f535b.png); } } .MobileLandingPage .iosButton.DA { background: url(https://s.pinimg.com/webapp/style/images/DA-1x-73095d1e.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.DA { background-image: url(https://s.pinimg.com/webapp/style/images/DA-2x-f75e4549.png); } } .MobileLandingPage .androidButton.DE { background: url(https://s.pinimg.com/webapp/style/images/DE-1x-195f2284.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.DE { background-image: url(https://s.pinimg.com/webapp/style/images/DE-2x-73bba6d5.png); } } .MobileLandingPage .iosButton.DE { background: url(https://s.pinimg.com/webapp/style/images/DE-1x-9a33f8c5.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.DE { background-image: url(https://s.pinimg.com/webapp/style/images/DE-2x-81d4e358.png); } } .MobileLandingPage .androidButton.EL { background: url(https://s.pinimg.com/webapp/style/images/EL-1x-d5e9cffb.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.EL { background-image: url(https://s.pinimg.com/webapp/style/images/EL-2x-75dbffaf.png); } } .MobileLandingPage .iosButton.EL { background: url(https://s.pinimg.com/webapp/style/images/EL-1x-c47b5f4b.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.EL { background-image: url(https://s.pinimg.com/webapp/style/images/EL-2x-f94ceee4.png); } } .MobileLandingPage .androidButton.EN { background: url(https://s.pinimg.com/webapp/style/images/EN-1x-193adbd5.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.EN { background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-ea0db06a.png); } } .MobileLandingPage .iosButton.EN { background: url(https://s.pinimg.com/webapp/style/images/EN-1x-6f0f8e76.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.EN { background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-1bfaab3e.png); } } .MobileLandingPage .androidButton.ES { background: url(https://s.pinimg.com/webapp/style/images/ES-1x-5d4df5f0.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.ES { background-image: url(https://s.pinimg.com/webapp/style/images/ES-2x-4b31e0d2.png); } } .MobileLandingPage .iosButton.ES { background: url(https://s.pinimg.com/webapp/style/images/ES-1x-43d3ab96.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.ES { background-image: url(https://s.pinimg.com/webapp/style/images/ES-2x-a31d918b.png); } } .MobileLandingPage .androidButton.FI { background: url(https://s.pinimg.com/webapp/style/images/FI-1x-df009e22.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.FI { background-image: url(https://s.pinimg.com/webapp/style/images/FI-2x-93552fb9.png); } } .MobileLandingPage .iosButton.FI { background: url(https://s.pinimg.com/webapp/style/images/FI-1x-99cb37da.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.FI { background-image: url(https://s.pinimg.com/webapp/style/images/FI-2x-6cd4e75f.png); } } .MobileLandingPage .androidButton.FR { background: url(https://s.pinimg.com/webapp/style/images/FR-1x-76258add.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.FR { background-image: url(https://s.pinimg.com/webapp/style/images/FR-2x-892d382a.png); } } .MobileLandingPage .iosButton.FR { background: url(https://s.pinimg.com/webapp/style/images/FR-1x-a1b11f36.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.FR { background-image: url(https://s.pinimg.com/webapp/style/images/FR-2x-60ddb3dc.png); } } .MobileLandingPage .androidButton.HU { background: url(https://s.pinimg.com/webapp/style/images/HU-1x-f5a33374.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.HU { background-image: url(https://s.pinimg.com/webapp/style/images/HU-2x-3cf19ccb.png); } } .MobileLandingPage .iosButton.HU { background: url(https://s.pinimg.com/webapp/style/images/HU-1x-ecfb98ab.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.HU { background-image: url(https://s.pinimg.com/webapp/style/images/HU-2x-801f2f76.png); } } .MobileLandingPage .androidButton.ID { background: url(https://s.pinimg.com/webapp/style/images/ID-1x-fc856302.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.ID { background-image: url(https://s.pinimg.com/webapp/style/images/ID-2x-60763725.png); } } .MobileLandingPage .iosButton.ID { background: url(https://s.pinimg.com/webapp/style/images/ID-1x-7723e800.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.ID { background-image: url(https://s.pinimg.com/webapp/style/images/ID-2x-511fb06d.png); } } .MobileLandingPage .androidButton.IT { background: url(https://s.pinimg.com/webapp/style/images/IT-1x-78215d79.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.IT { background-image: url(https://s.pinimg.com/webapp/style/images/IT-2x-f06d21d3.png); } } .MobileLandingPage .iosButton.IT { background: url(https://s.pinimg.com/webapp/style/images/IT-1x-eb49e52c.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.IT { background-image: url(https://s.pinimg.com/webapp/style/images/IT-2x-4e1ebffc.png); } } .MobileLandingPage .androidButton.JA { background: url(https://s.pinimg.com/webapp/style/images/JA-1x-e4d2e103.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.JA { background-image: url(https://s.pinimg.com/webapp/style/images/JA-2x-613b7a1c.png); } } .MobileLandingPage .iosButton.JA { background: url(https://s.pinimg.com/webapp/style/images/JA-1x-e9625ac6.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.JA { background-image: url(https://s.pinimg.com/webapp/style/images/JA-2x-e4949c87.png); } } .MobileLandingPage .androidButton.KO { background: url(https://s.pinimg.com/webapp/style/images/KO-1x-d08dd546.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.KO { background-image: url(https://s.pinimg.com/webapp/style/images/KO-2x-82063d73.png); } } .MobileLandingPage .iosButton.KO { background: url(https://s.pinimg.com/webapp/style/images/KO-1x-3699e0ab.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.KO { background-image: url(https://s.pinimg.com/webapp/style/images/KO-2x-ddc06527.png); } } .MobileLandingPage .androidButton.ML { background: url(https://s.pinimg.com/webapp/style/images/ML-1x-0069db8e.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.ML { background-image: url(https://s.pinimg.com/webapp/style/images/ML-2x-85c22418.png); } } .MobileLandingPage .iosButton.ML { background: url(https://s.pinimg.com/webapp/style/images/ML-1x-cfe4f86a.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.ML { background-image: url(https://s.pinimg.com/webapp/style/images/ML-2x-482d4428.png); } } .MobileLandingPage .androidButton.NL { background: url(https://s.pinimg.com/webapp/style/images/NL-1x-ff73753a.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.NL { background-image: url(https://s.pinimg.com/webapp/style/images/NL-2x-8c8e0858.png); } } .MobileLandingPage .iosButton.NL { background: url(https://s.pinimg.com/webapp/style/images/NL-1x-3926d2dd.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.NL { background-image: url(https://s.pinimg.com/webapp/style/images/NL-2x-ffcdfef9.png); } } .MobileLandingPage .androidButton.NN { background: url(https://s.pinimg.com/webapp/style/images/NN-1x-a9972684.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.NN { background-image: url(https://s.pinimg.com/webapp/style/images/NN-2x-85d7db2a.png); } } .MobileLandingPage .iosButton.NN { background: url(https://s.pinimg.com/webapp/style/images/NN-1x-6e36a313.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.NN { background-image: url(https://s.pinimg.com/webapp/style/images/NN-2x-fd2478e8.png); } } .MobileLandingPage .androidButton.PL { background: url(https://s.pinimg.com/webapp/style/images/PL-1x-dc76138d.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.PL { background-image: url(https://s.pinimg.com/webapp/style/images/PL-2x-56d0226f.png); } } .MobileLandingPage .iosButton.PL { background: url(https://s.pinimg.com/webapp/style/images/PL-1x-3a5b9eb6.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.PL { background-image: url(https://s.pinimg.com/webapp/style/images/PL-2x-3cc909a8.png); } } .MobileLandingPage .androidButton.PT { background: url(https://s.pinimg.com/webapp/style/images/PT-1x-61d44f78.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.PT { background-image: url(https://s.pinimg.com/webapp/style/images/PT-2x-91f7acfc.png); } } .MobileLandingPage .iosButton.PT { background: url(https://s.pinimg.com/webapp/style/images/PT-1x-fc9e1aa2.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.PT { background-image: url(https://s.pinimg.com/webapp/style/images/PT-2x-e272dbd6.png); } } .MobileLandingPage .androidButton.RO { background: url(https://s.pinimg.com/webapp/style/images/RO-1x-fda1c018.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.RO { background-image: url(https://s.pinimg.com/webapp/style/images/RO-2x-d48881c4.png); } } .MobileLandingPage .iosButton.RO { background: url(https://s.pinimg.com/webapp/style/images/RO-1x-18736a64.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.RO { background-image: url(https://s.pinimg.com/webapp/style/images/RO-2x-c762cab0.png); } } .MobileLandingPage .androidButton.RU { background: url(https://s.pinimg.com/webapp/style/images/RU-1x-65d3a95b.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.RU { background-image: url(https://s.pinimg.com/webapp/style/images/RU-2x-0ce2c757.png); } } .MobileLandingPage .iosButton.RU { background: url(https://s.pinimg.com/webapp/style/images/RU-1x-ce1d81a3.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.RU { background-image: url(https://s.pinimg.com/webapp/style/images/RU-2x-b89abd86.png); } } .MobileLandingPage .androidButton.SK { background: url(https://s.pinimg.com/webapp/style/images/SK-1x-66e29846.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.SK { background-image: url(https://s.pinimg.com/webapp/style/images/SK-2x-16880fe3.png); } } .MobileLandingPage .iosButton.SK { background: url(https://s.pinimg.com/webapp/style/images/SK-1x-ac41a55d.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.SK { background-image: url(https://s.pinimg.com/webapp/style/images/SK-2x-20b58101.png); } } .MobileLandingPage .androidButton.SV { background: url(https://s.pinimg.com/webapp/style/images/SV-1x-2bad06b4.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.SV { background-image: url(https://s.pinimg.com/webapp/style/images/SV-2x-502a5a32.png); } } .MobileLandingPage .iosButton.SV { background: url(https://s.pinimg.com/webapp/style/images/SV-1x-b3f99f27.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.SV { background-image: url(https://s.pinimg.com/webapp/style/images/SV-2x-b1271639.png); } } .MobileLandingPage .androidButton.TH { background: url(https://s.pinimg.com/webapp/style/images/TH-1x-66e29846.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.TH { background-image: url(https://s.pinimg.com/webapp/style/images/TH-2x-16880fe3.png); } } .MobileLandingPage .iosButton.TH { background: url(https://s.pinimg.com/webapp/style/images/TH-1x-afac524b.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.TH { background-image: url(https://s.pinimg.com/webapp/style/images/TH-2x-7ecf42ba.png); } } .MobileLandingPage .androidButton.TL { background: url(https://s.pinimg.com/webapp/style/images/TL-1x-a001709a.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.TL { background-image: url(https://s.pinimg.com/webapp/style/images/TL-2x-58021b84.png); } } .MobileLandingPage .iosButton.TL { background: url(https://s.pinimg.com/webapp/style/images/TL-1x-31d0bc83.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.TL { background-image: url(https://s.pinimg.com/webapp/style/images/TL-2x-3187e1aa.png); } } .MobileLandingPage .androidButton.TR { background: url(https://s.pinimg.com/webapp/style/images/TR-1x-f7dc0333.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.TR { background-image: url(https://s.pinimg.com/webapp/style/images/TR-2x-4585987c.png); } } .MobileLandingPage .iosButton.TR { background: url(https://s.pinimg.com/webapp/style/images/TR-1x-6f0f8e76.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.TR { background-image: url(https://s.pinimg.com/webapp/style/images/TR-2x-1bfaab3e.png); } } .MobileLandingPage .androidButton.UK { background: url(https://s.pinimg.com/webapp/style/images/UK-1x-9ecb075c.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.UK { background-image: url(https://s.pinimg.com/webapp/style/images/UK-2x-25a04f9a.png); } } .MobileLandingPage .iosButton.UK { background: url(https://s.pinimg.com/webapp/style/images/UK-1x-6f0f8e76.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.UK { background-image: url(https://s.pinimg.com/webapp/style/images/UK-2x-1bfaab3e.png); } } .MobileLandingPage .androidButton.VI { background: url(https://s.pinimg.com/webapp/style/images/VI-1x-aba34925.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .androidButton.VI { background-image: url(https://s.pinimg.com/webapp/style/images/VI-2x-f245f353.png); } } .MobileLandingPage .iosButton.VI { background: url(https://s.pinimg.com/webapp/style/images/VI-1x-474f64a4.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .iosButton.VI { background-image: url(https://s.pinimg.com/webapp/style/images/VI-2x-119d560d.png); } } .MobileLandingPage .bottom .textSection { color: #333; } .MobileLandingPage .bottom .textSection .sectionTitle { font-size: 24px; line-height: 1.125; } .MobileLandingPage .bottom .textSection .sectionContent { font-size: 14px; line-height: 1.5; } .MobileLandingPage .bottomNav { border-top: 1px solid #e3e3e3; font-size: 14px; } .MobileLandingPage .bottomNav .bottomLink a { font-weight: normal; } .MobileLandingPage .bottomNav .bottomLink .badge { background: url(https://s.pinimg.com/webapp/style/images/badge-1x-4c987eec.png) no-repeat; background-size: contain; height: 21px; width: 21px; display: inline-block; padding-bottom: 4px; vertical-align: middle; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .bottomNav .bottomLink .badge { background-image: url(https://s.pinimg.com/webapp/style/images/badge-2x-85ba0fac.png); } } /* desktop.scss */ .MobileLandingPage { bottom: 0; position: absolute; top: 0; width: 100%; } .MobileLandingPage .topBackground { height: 450px; } .MobileLandingPage .topBackground .topContainer { margin: 0 auto; padding: 95px 0 40px; position: relative; width: 950px; } .MobileLandingPage .topBackground .topContainer .title { font-size: 60px; line-height: 65px; margin-top: 10px; width: 450px; } .MobileLandingPage .topBackground .topContainer .subtitle { font-size: 18px; margin-top: 33px; } .MobileLandingPage .topBackground .topContainer .buttons { margin-top: 17px; } .MobileLandingPage .topBackground .topContainer .buttons .appStoreButton { margin-right: 15px; } .MobileLandingPage .topBackground .topContainer .shortUrlText { font-size: 14px; margin: 15px 0 40px; } .MobileLandingPage .topBackground .topContainer .shortUrlText a { color: #fff; text-decoration: underline; } .MobileLandingPage .topBackground .topContainer .topImage { position: absolute; top: 35px; } .MobileLandingPage .topBackground .topContainer .topImage.iOS { background: url(https://s.pinimg.com/webapp/style/images/ios-1x-f2d643f4.png) no-repeat; background-size: contain; height: 468px; width: 382px; left: 520px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .topBackground .topContainer .topImage.iOS { background-image: url(https://s.pinimg.com/webapp/style/images/ios-2x-93c02442.png); } } .MobileLandingPage .topBackground .topContainer .topImage.android { background: url(https://s.pinimg.com/webapp/style/images/android-1x-0a553f36.png) no-repeat; background-size: contain; height: 469px; width: 306px; left: 550px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .topBackground .topContainer .topImage.android { background-image: url(https://s.pinimg.com/webapp/style/images/android-2x-64f466a6.png); } } .MobileLandingPage .topBackground .topContainer .topImage.multi { background: url(https://s.pinimg.com/webapp/style/images/multi-1x-afebd48e.png) no-repeat; background-size: contain; height: 464px; width: 423px; left: 500px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPage .topBackground .topContainer .topImage.multi { background-image: url(https://s.pinimg.com/webapp/style/images/multi-2x-367ec694.png); } } .MobileLandingPage .bottom { margin: 0 auto; overflow: hidden; padding-top: 50px; width: 950px; } .MobileLandingPage .bottom .textSection { float: left; height: 100px; width: 475px; } .MobileLandingPage .bottom .textSection .sectionContent { width: 360px; } .MobileLandingPage .bottomNav { background-color: #fff; line-height: 50px; margin: 20px auto 0; width: 950px; } .MobileLandingPage .bottomNav .bottomLink { display: inline-block; margin-right: 40px; } .MobileLandingPage .bottomNav .bottomLink:first-child { margin-right: 330px; } .RelatedItemsCarousel { background-color: #fff; height: 100%; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); mask-image: radial-gradient(#fff, #000); overflow: hidden; position: absolute; width: 100%; } .RelatedItemsCarousel .imageCarousel { overflow-x: scroll; overflow-y: hidden; padding-left: 20px; padding-right: 19px; white-space: nowrap; width: auto; } .RelatedItemsCarousel .carouselImage { background: #fff; background-size: cover; border-radius: 6px; display: block; height: auto; min-height: 100%; min-width: 100%; overflow: hidden; padding: 2px; -webkit-transition: opacity .1s ease-in-out; transition: opacity .1s ease-in-out; width: auto; } .RelatedItemsCarousel .imageContainer { border-radius: 6px; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25); display: inline-block; height: 200px; overflow: hidden; padding-right: 1px; position: relative; width: 200px; } .BasicSignupModule { background-color: #fff; border-radius: 6px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); height: 460px; margin: 14px 7px 0; } .BasicSignupModule .contentContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .BasicSignupModule .title { font-size: 30px; font-weight: bold; margin: 0 auto 20px; text-align: center; width: 400px; } .BoardFooter { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-top: 1px solid #efefef; visibility: hidden; width: 100%; } .BoardFooter .tipLabel { color: #555; display: inline; font-size: 24px; font-weight: bold; } .BoardFooter .tipLabel .tipRed { color: #bd081c; } .BoardFooter .tipWrapper { margin: 24px 0; } .BottomBanner .bannerContainer { font-family: HelveticaNeue-Bold, 'Helvetica', arial; background: #2ab6dd; bottom: 0; color: #fff; font-size: 28px; line-height: 35px; max-height: 100vh; opacity: .95; padding-bottom: 15px; padding-top: 15px; position: fixed; text-align: center; width: 100%; z-index: 101; } .BottomBanner .bannerContainer .bannerClose { width: 16px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -236px no-repeat; cursor: pointer; position: absolute; top: 20px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .BottomBanner .bannerContainer .bannerClose { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px -187px; background-size: 399px 382px; } } .BottomBanner .bannerContainer .bannerText { display: inline-block; padding-left: 100px; padding-right: 100px; } .BottomBanner .bannerContainer .bannerText.hidden { display: none; } .BottomBanner .bannerContainer .bannerText.fadeOut { -webkit-animation: fadeOutUp .3s; animation: fadeOutUp .3s; } .BottomBanner .bannerContainer .bannerText a, .BottomBanner .bannerContainer .bannerText a:hover, .BottomBanner .bannerContainer .bannerText a:focus { color: #fff; } .BottomBanner .bannerContainer .transitionBannerContainer .transitionText { display: inline-block; padding-left: 40px; padding-right: 40px; } .BottomBanner .bannerContainer .transitionBannerContainer.hidden { display: none; } .BottomBanner .bannerContainer .transitionBannerContainer.fadeIn { -webkit-animation: fadeInUp .3s; animation: fadeInUp .3s; } .BottomBanner .bannerContainer .buttonWrapper { display: inline; } .BottomBanner .bannerContainer .buttonWrapper .nextBannerButton { background: #fff; border: 1px solid #fff; color: #5bd543; font-size: 24px; height: 38px; margin-left: 20px; padding: 2px 6px; width: 130px; } .BottomBanner .bannerContainer .buttonWrapper .transitionBannerButton { background: #fff; border: none; border-radius: 4px; height: 36px; } .BottomBanner .bannerContainer .buttonWrapper .transitionBannerButton .buttonText { color: #2ab6dd; display: block; font-size: 14px; font-weight: bold; letter-spacing: -.3px; line-height: 1.1; } .BottomBanner .bannerContainer.done { background: #5bd543; } .BottomBanner .heartIcon { width: 23px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -22px -325px no-repeat; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .BottomBanner .heartIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -21px -320px; background-size: 399px 382px; } } .Breadcrumbs { border-bottom: 1px solid #dadada; position: relative; } .Breadcrumbs .breadcrumbsWrapper { font-size: 18px; padding: 10px 0; } .Breadcrumbs .breadcrumbsWrapper li { color: #555; font-weight: bold; } .Breadcrumbs .breadcrumbsWrapper li .breadcrumbArrow { display: inline; margin: 0 15px 0 5px; } .Breadcrumbs .breadcrumbsWrapper li .breadcrumbArrow em { width: 7px; height: 10px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -362px no-repeat; pointer-events: auto; position: absolute; top: 50%; -webkit-transform: translateY(-3px); transform: translateY(-3px); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Breadcrumbs .breadcrumbsWrapper li .breadcrumbArrow em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -389px -60px; background-size: 399px 382px; } } .Breadcrumbs .breadcrumbsWrapper ol { list-style-type: none; margin: 0; padding: 0; } .Breadcrumbs .breadcrumbsWrapper ol li { display: inline; } .Breadcrumbs .breadcrumbsWrapper ol li a { color: #555; font-size: 15px; } .Breadcrumbs .breadcrumbsWrapper ol li a .last { color: #999; } .Breadcrumbs .breadcrumbsWrapper ol li a .showMoreTitleButton { cursor: pointer; font-size: 12px; } .FacebookConnectLink { cursor: pointer; display: inline-block; } .FacebookConnectLink .facebookIcon { background: url(https://s.pinimg.com/webapp/style/images/fb-icon-1x-bf894c29.png) no-repeat; background-size: contain; height: 16px; width: 16px; display: inline-block; vertical-align: bottom; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .FacebookConnectLink .facebookIcon { background-image: url(https://s.pinimg.com/webapp/style/images/fb-icon-2x-0484932b.png); } } .FacebookConnectLink .facebookText { color: #3b5998; display: inline-block; font-size: 15px; font-weight: bold; vertical-align: middle; } .FacebookConnectLink .facebookText:hover { color: #466bb7; } .FacebookConnectLink.facebookSignup { background: #3b5998; border: 0; border-radius: 3px; display: inline-block; padding: 10px 20px; text-align: center; text-shadow: none; } .FacebookConnectLink.facebookSignup .facebookText { color: #fff; font-size: 14px; font-weight: bold; } .FacebookContact { border-bottom: 1px solid #ccc; cursor: pointer; padding: 10px 10px 10px 15px; position: relative; } .FacebookContact .facebookWrapper { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float: left; height: 20px; margin-left: 5px; margin-top: 6px; width: 306px; } .FacebookContact .name { font-size: 15px; } .FacebookContact .image { display: inline-block; float: left; margin-right: 5px; position: relative; vertical-align: middle; width: 30px; } .ContactsList li, .ContactsList > a { border-top: 1px solid #eaeaea; cursor: pointer; padding: 12px; } .ContactsList li:first-of-type, .ContactsList > a:first-of-type { border-top: 0; } .ContactsList a { display: list-item; list-style: none; } .ContactsList .ContactsListItem, .ContactsList .socialConnectItem { border-top: 1px solid #eaeaea; padding: 12px; } .ContactsList .ContactsListItemFirst { border-top: 0; } .ContactsList .userContact .imageBlockContentBody { color: #999; } .ContactsList .socialConnectFacebook .imageBlockContentTitle, .ContactsList .socialConnectTwitter .imageBlockContentTitle, .ContactsList .socialConnectGplus .imageBlockContentTitle, .ContactsList .socialConnectYahoo .imageBlockContentTitle { line-height: 32px; } .ContactsList .socialConnectFacebook .imageBlockContentBody, .ContactsList .socialConnectTwitter .imageBlockContentBody, .ContactsList .socialConnectGplus .imageBlockContentBody, .ContactsList .socialConnectYahoo .imageBlockContentBody { display: none; } .ContactsList .socialConnectFacebook .left em, .ContactsList .socialConnectTwitter .left em, .ContactsList .socialConnectGplus .left em, .ContactsList .socialConnectYahoo .left em { display: block; } .ContactsList .socialConnectFacebook em { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -284px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ContactsList .socialConnectFacebook em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -33px -342px; background-size: 428px 427px; } } .ContactsList .socialConnect-facebook em { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -284px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ContactsList .socialConnect-facebook em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -33px -342px; background-size: 428px 427px; } } .ContactsList .socialConnectGplus em { width: 33px; height: 33px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -181px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ContactsList .socialConnectGplus em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -176px; background-size: 428px 427px; } } .ContactsList .socialConnect-gplus em { width: 33px; height: 33px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -181px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ContactsList .socialConnect-gplus em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -176px; background-size: 428px 427px; } } .ContactsList .socialConnectTwitter em { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -68px -384px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ContactsList .socialConnectTwitter em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -276px; background-size: 428px 427px; } } .ContactsList .socialConnect-twitter em { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -68px -384px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ContactsList .socialConnect-twitter em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -276px; background-size: 428px 427px; } } .ContactsList .socialConnectYahoo em { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -384px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ContactsList .socialConnectYahoo em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -99px -342px; background-size: 428px 427px; } } .ContactsList .socialConnect-yahoo em { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -384px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ContactsList .socialConnect-yahoo em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -99px -342px; background-size: 428px 427px; } } .ContactsList.compact li { border-top: 0; padding: 4px 8px; } .ContactsList.sendShare li, .ContactsList.sendShare a { overflow: hidden; } .ContactsList.sendShare li:hover { background: rgba(0, 0, 0, 0.08); } .ContactsList.sendShare .socialConnectCta { height: 32px; } .ContactsList.sendShare .socialConnectCta .left em { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -34px -384px no-repeat; display: block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ContactsList.sendShare .socialConnectCta .left em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -243px; background-size: 428px 427px; } } .ContactsList.sendShare .socialConnectCta .right { height: 32px; vertical-align: middle; } .ContactsList.sendShare .socialConnectCta .right .imageBlockContentTitle { color: #666; font-size: 13px; } .ContactsList.sendShare .socialConnectCta .right .imageBlockContentBody { color: #666; } .ContactsList.sendShareBrio { overflow-y: scroll; } .ContactsList.sendShareBrio li { border-top: 0; padding: 0 20px; } .ContactsList.sendShareBrio li:hover { background: rgba(0, 0, 0, 0.08); } .ContactsList.sendShareBrio .socialConnectCta { height: 44px; padding: 4px 0; } .ContactsList.sendShareBrio .socialConnectCta .left em { width: 44px; height: 44px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -184px -296px no-repeat; display: block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ContactsList.sendShareBrio .socialConnectCta .left em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -291px -184px; background-size: 428px 427px; } } .ContactsList.sendShareBrio .socialConnectCta .right { height: 44px; vertical-align: middle; } .ContactsList.sendShareBrio .socialConnectCta .right .imageBlockContentTitle { color: #555; font-size: 18px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; width: 235px; } .ContactsList.sendShareBrio .socialConnectCta .right .imageBlockContentBody { color: #b5b5b5; } .ContactsList .socialConnect:first-of-type { border-top: 1px solid #eaeaea; } .ContactsList .sendToEmail.unclickable a { cursor: default; } .ContactsList .sendToEmail .selectableEmailItem { display: -webkit-box; display: -ms-flexbox; display: flex; } .ContactsList .sendToEmail .left { margin-right: 12px; } .ContactsList .sendToEmail .icon { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; background-color: #999; border-radius: 50%; color: #fff; font-size: 20px; font-weight: bold; height: 32px; line-height: 32px; text-align: center; width: 32px; } .ContactsList .sendToEmail .icon.typingEmail em { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -250px no-repeat; display: block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ContactsList .sendToEmail .icon.typingEmail em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: 0 -342px; background-size: 428px 427px; } } .ContactsList .sendToEmail .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; font-weight: bold; margin: 1px 0; } .ContactsList .sendToEmail .subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #b7b7b7; font-weight: normal; margin: 2px 0 0; } .ContactsList .socialConnect .left { float: left; padding-right: 10px; } .ContactsList .socialConnect .icon { height: 32px; width: 32px; } .ContactsList .socialConnect .icon em { display: block; } .ContactsList .socialConnect .title { color: #211922; font-weight: bold; line-height: 32px; } .DescriptiveH1Title .pinPageHeaderTitle, .DescriptiveH1Title .pinPageHeaderTitleSmall { color: #555; font-size: 48px; font-weight: bold; padding-top: 20px; } .DescriptiveH1Title .pinPageHeaderTitleSmall { font-size: 36px; } .EmailContact { border-bottom: 1px solid #ccc; cursor: pointer; padding: 20px; position: relative; } .EmailContact .check { position: absolute; right: 20px; top: 25px; } .EmailContact .email { color: #808080; font-size: 12px; margin-left: 5px; } .EmailContact .emailWrapper { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 20px; width: 380px; } .EmailContact .name { font-size: 15px; } .EmailContact.disabled { opacity: .4; } .FirstBoardCreate .BoardLabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border: 0; cursor: pointer; } .FirstBoardCreate .BoardLabel .nameAndIcons .name { font-size: 15px; line-height: 30px; } .FirstBoardCreate .BoardLabel .repinBtn { display: none; float: right; margin-left: 7px; margin-top: 1px; position: relative; z-index: 1; } .FirstBoardCreate .BoardLabel .BoardIcons, .FirstBoardCreate .BoardLabel .icon { display: none; } .FirstBoardCreate .SelectList:focus { outline: none; } .FirstPinCreate { border-radius: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; } .FirstPinCreate::after { clear: both; content: ""; display: table; } .FirstPinCreate .spacer { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .FirstPinCreate .stackedContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .FirstPinCreate .pinCreateContainer { margin: auto; max-height: 100vh; width: 660px; } .FirstPinCreate .mainContainer { background-color: #fff; border-radius: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin: 0 auto; max-height: 535px; min-height: 490px; overflow: auto; position: relative; width: 660px; } .FirstPinCreate .mainContainer .leftContainer { border-right: 1px solid #efefef; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .FirstPinCreate .mainContainer .rightContainer { background-color: #fff; border-bottom-right-radius: 6px; border-top-right-radius: 6px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; overflow-x: hidden; overflow-y: scroll; padding-bottom: 25px; } .FirstPinCreate.pinning { pointer-events: none; } .FirstPinCreate .Pin { margin-left: auto; margin-right: auto; overflow: hidden; } .FirstPinCreate .Pin .pinImg { opacity: 1; } .FirstPinCreate .Pin.summary .pinMeta .pinDescription { max-width: 165px; } .FirstPinCreate .Pin.summary .pinMeta .TextField { /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ } .FirstPinCreate .pinContainer { display: table; height: 100%; left: 0; width: 330px; } .FirstPinCreate .pinContainer .pinModuleHolder { display: table-cell; vertical-align: middle; } .FirstPinCreate .pinContainer .pinWrapper .pinHolder .Image { max-height: 320px; overflow: hidden; } .FirstPinCreate .pinContainer .pinWrapper .pinHolder .Image img { height: auto; } .FirstPinCreate .cancelButton.pinCreateClose { margin: 20px; position: absolute; right: 0; z-index: 2; } .FirstPinCreate .seoNuxHeaderText { font-family: HelveticaNeue-Bold, 'Helvetica', arial; color: #fff; font-size: 28px; margin-bottom: 10px; text-align: center; z-index: 2; } .FirstPinCreate .seoNuxBannerText { font-family: HelveticaNeue-Bold, 'Helvetica', arial; background: #2ab6dd; bottom: 0; color: #fff; font-size: 28px; opacity: .95; padding: 15px 40px; position: fixed; text-align: center; width: 100vw; z-index: 2; } .FirstPinCreate .seoNuxBannerText.success { background: #42d321; } .BoardSuggestionSummary { color: #999; font-size: 13px; font-weight: normal; margin: 0 14px; text-align: center; } .BoardSuggestionSummary .boardName { font-weight: bolder; height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .EmailInviteMerchandising .container { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; overflow: hidden; position: relative; } .EmailInviteMerchandising .content { height: 232px; padding: 14px; } .EmailInviteMerchandising .empty { padding: 14px; } .EmailInviteMerchandising .empty h2 { font-size: 14px; } .EmailInviteMerchandising h2 { color: #5f5f5f; font-size: 16px; font-weight: bolder; } .EmailInviteMerchandising .arrow { width: 9px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -268px no-repeat; float: right; margin: 3px 0 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .EmailInviteMerchandising .arrow { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -389px -14px; background-size: 399px 382px; } } .EmailInviteMerchandising .upsell { background: inherit; height: 232px; margin-left: 100%; padding: 14px; position: absolute; top: 0; -webkit-transition: all .5s ease-in; transition: all .5s ease-in; width: 208px; } .EmailInviteMerchandising .upsell.slideIn { margin-left: 0; } .EmailInviteMerchandising .upsell.list { overflow: scroll; } .EmailInviteMerchandising .hidden { visibility: hidden; } .EmailInviteMerchandising .list { height: 156px; margin: 7px 0; overflow: hidden; width: 100%; } .EmailInviteMerchandising .footer { border-top: 1px solid #e0e0e0; } .EmailInviteMerchandising .footer .seeAllFriends { color: #5f5f5f; cursor: pointer; display: inline-block; margin-top: 14px; width: 100%; } .EmailInviteMerchandising .footer.legal { border: 0; color: #999; font-size: .85em; margin-top: 7px; } .EmailInviteMerchandising.loading > .loadingContent { display: block; } .EmailInviteMerchandising.loading > .Spinner .spinnerMedium { margin-top: -28px; } .EmailInviteMerchandising .loadingContent { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 659; display: none; margin-top: 14px; } .EmailInviteMerchandising .loadingContent .caption { box-sizing: border-box; color: #999; font-size: 14px; font-weight: bold; padding: 0 14px; position: absolute; text-align: center; top: 50%; width: 100%; } .FindFriendsContent .connectNetwork { color: #333; text-align: center; margin: 99px auto 0; width: 550px; } .FindFriendsContent .connectNetwork p { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 17px; margin: 0 0 1em; } .FindFriendsContent .connectNetwork .bold { font-weight: bold; } .FindFriendsContent.showInNuxModal { width: 656px; } .FindFriendsContent .facebookNotConnected, .FindFriendsContent .twitterNotConnected { margin: 0 auto 18px; } .FindFriendsContent .facebookNotConnected { background: url(https://s.pinimg.com/webapp/style/images/empty_find_friends_facebook_logo-1x-327d9a91.png) no-repeat; background-size: contain; height: 81px; width: 81px; } .FindFriendsContent .twitterNotConnected { background: url(https://s.pinimg.com/webapp/style/images/empty_find_friends_twitter_logo-1x-a3ce64c5.png) no-repeat; background-size: contain; height: 81px; width: 81px; } .FindFriendsContent.showInBrioNuxModal .connectNetwork { margin: 60px auto 0; width: 800px; } .FindFriendsContent.showInBrioNuxModal .connectNetwork .findFriendsFacebookConnect, .FindFriendsContent.showInBrioNuxModal .connectNetwork .findFriendsTwitterConnect { border: 0; border-radius: 6px; color: #fff; font-size: 22px; font-weight: bold; height: 70px; line-height: 27px; margin-top: 30px; min-width: 324px; } .FindFriendsContent.showInBrioNuxModal .connectNetwork .findFriendsFacebookConnect { background: #3b5998; } .FindFriendsContent.showInBrioNuxModal .connectNetwork .findFriendsTwitterConnect { background: #55acee; } .FindFriendsContent.showInBrioNuxModal .connectNetwork .connectToNetworkText { color: #555; font-size: 26px; font-weight: bold; line-height: 32px; margin: 0 auto; width: 572.5px; } .FriendBoardRecommendationTile .boardRepTitle { padding: 0; } .FriendBoardRecommendationTiles.cyclerTimed { background-color: #fff; border-radius: 6px; height: 100%; } .FriendCenterMerchandising { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; height: 100%; overflow: hidden; position: relative; text-align: center; width: 236px; } .FriendCenterMerchandising h1, .FriendCenterMerchandising h2, .FriendCenterMerchandising .header { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; color: #555; display: block; font-weight: 700; margin: auto; padding: 10px 7px; width: 222px; } .FriendCenterMerchandising h1 a, .FriendCenterMerchandising h2 a, .FriendCenterMerchandising .header a { color: inherit; } .FriendCenterMerchandising h1:hover, .FriendCenterMerchandising h2:hover, .FriendCenterMerchandising .header:hover { color: #555; } .FriendCenterMerchandising h1 { font-size: 18px; } .FriendCenterMerchandising h2 { font-size: 14px; } .FriendCenterMerchandising .fallbackContent { position: absolute; text-align: left; } .FriendCenterMerchandising .suggestionContent { background-color: #fff; border-radius: 6px; cursor: pointer; position: absolute; text-align: left; } .FriendCenterMerchandising .centered { left: 50%; margin: 0 7px; right: 50%; } .FriendCenterMerchandising .sampleImage { background: url(https://s.pinimg.com/webapp/style/images/friend-center-merch-sample-1x-00f6789b.jpg) no-repeat; background-size: contain; height: 215px; width: 213px; margin-left: 5px; margin-top: 20px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .FriendCenterMerchandising .sampleImage { background-image: url(https://s.pinimg.com/webapp/style/images/friend-center-merch-sample-2x-3db3782e.jpg); } } .FriendCenterMerchandising.fixedHeight { height: 346px; } .FriendCenterMerchandising.fixedHeight .buttonContainer { padding: 0 14px; } .FriendCenterMerchandising .promoteContainer { height: 322px; text-align: left; } .FriendCenterMerchandising .promoteContainer .footer { padding: 0; } .FriendCenterMerchandising .networkConnectContainer { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; box-sizing: border-box; height: 100%; margin-left: 236px; margin-top: -322px; position: relative; text-align: left; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-property: margin-left; transition-property: margin-left; width: 100%; } .FriendCenterMerchandising .networkConnectContainer .header { font-size: 12px; padding: 0 14px 14px; } .FriendCenterMerchandising .networkConnectContainer .findFriendLink { display: block; } .FriendCenterMerchandising .networkConnectContainer ul { padding: 0 14px; } .FriendCenterMerchandising .networkConnectContainer.slideIn { margin-left: 0; } .FriendCenterMerchandising .footer { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; bottom: 10px; box-sizing: border-box; display: table-row; padding: 0 14px; position: absolute; text-align: left; width: 100%; } .FriendCenterMerchandising .footer .btn.gridItem { bottom: 0; } .FriendCenterMerchandising .footer .seeAllFriends { color: #5f5f5f; cursor: pointer; display: inline-block; font-size: 12px; margin-top: 14px; width: 100%; } .FriendCenterMerchandising .footer .seeAllFriends .arrow { width: 9px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -268px no-repeat; float: right; margin: 0 0 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .FriendCenterMerchandising .footer .seeAllFriends .arrow { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -389px -14px; background-size: 399px 382px; } } .FriendCenterMerchandising.loading > .loadingContent { display: block; } .FriendCenterMerchandising.loading > .Spinner .spinnerMedium { margin-top: -28px; } .FriendCenterMerchandising .loadingContent { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 659; display: none; margin-top: 14px; } .FriendCenterMerchandising .loadingContent .caption { box-sizing: border-box; color: #999; font-size: 14px; font-weight: bold; padding: 0 14px; position: absolute; text-align: center; top: 50%; width: 100%; } .InviteContact { cursor: pointer; display: table; margin-left: 0; opacity: 1; padding: 7px 0; position: relative; table-layout: fixed; -webkit-transition: all .5s ease-out; transition: all .5s ease-out; width: 100%; } .InviteContact.disabled { margin-left: 100%; opacity: 0; } .InviteContact.invited .addIcon { width: 38px; height: 38px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -365px -169px no-repeat; background-color: #58b216; border-radius: 50%; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .InviteContact.invited .addIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -260px -258px; background-size: 428px 427px; } } .InviteContact.invited .info { color: #58b216; } .InviteContact .addIcon { width: 37px; height: 38px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -365px -249px no-repeat; display: table-cell; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .InviteContact .addIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: 0 -303px; background-size: 428px 427px; } } .InviteContact .info { color: #5f5f5f; display: table-cell; overflow: hidden; padding: 0 10px; vertical-align: middle; width: 100%; } .InviteContact .singleLineText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .InviteContact .name { font-size: 13px; font-weight: bold; } .InviteContact .email { color: #717171; font-size: 11px; margin-top: 2px; } .InviteContact .dismiss { cursor: pointer; display: none; margin-top: -11px; padding: 5px; position: absolute; right: 0; top: 50%; } .InviteContact .dismiss .closeIcon { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -107px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .InviteContact .dismiss .closeIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -321px -271px; background-size: 399px 382px; } } .InviteContact:hover:not(.invited) .addIcon { width: 37px; height: 38px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -365px -289px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .InviteContact:hover:not(.invited) .addIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -38px -303px; background-size: 428px 427px; } } .InviteContact:hover:not(.invited) .info { color: #bd081c; } .InviteContact:hover .dismiss { display: block; } .SharedInterests { color: #999; font-size: 13px; font-weight: normal; margin: 3px 15px 5px 15px; text-align: center; } .HeroBasic { background-color: #d8d8d8; position: relative; } .HeroBasic.heroWithoutImage .heroImage { display: none; } .HeroBasic.heroWithoutImage .heroContainer { width: 500px; } .HeroBasic .hero { padding: 14px 0; } .HeroBasic .heroBackgroundImage { height: 100%; position: absolute; width: 100%; } .HeroBasic .heroContainer { background-color: #fff; border-radius: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; overflow: hidden; position: relative; width: 736px; } .HeroBasic .heroBody { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 14px; width: 472px; } .HeroBasic .heroDivider { background-color: #e7e7e7; height: 1px; margin-bottom: 14px; } .HeroBasic .heroContent { color: #333; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .HeroBasic .heroContent p { font-size: 14px; } .HeroBasic .heroImage { height: 100%; width: 236px; } .HeroBasic .heroButtons { text-align: right; } .HeroBasic.upsellHero { font-size: 24px; font-weight: bold; } .HeroBasic.upsellHero .bodyText { color: #fff; display: inline-block; margin-bottom: 10px; margin-left: 80px; margin-top: 10px; } .HeroBasic.upsellHero .heroContainer { background-color: transparent; width: auto; } .HeroBasic.upsellHero .iosButton { display: inline-block; height: 45px; outline: none; width: 151px; } .HeroBasic.upsellHero .androidButton { display: inline-block; height: 45px; margin-right: 10px; outline: none; width: 137px; } .HeroBasic.upsellHero .upsellTextButtons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 10px 0; width: 100%; } .HeroBasic.upsellHero .hero { padding: 0; } .HeroBasic.upsellHero .appButtons { display: inline-block; margin-right: 80px; margin-top: 2px; min-width: 300px; } .HeroFixEmail .heroSubtitle { color: #4a4747 !important; font-size: 15px !important; margin-top: 15px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .HeroHelperBase { -webkit-transition: scale 1s ease-in-out; transition: scale 1s ease-in-out; } .HeroHelperBase .heroContainer { background-color: #d8d8d8; box-shadow: 0 1px 3px 0 rgba(255, 255, 255, 0.66); padding-bottom: 14px; padding-top: 14px; } .HeroHelperBase .heroContent { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px #999; margin: 0 auto; min-height: 40px; padding-bottom: 9px; position: relative; width: 500px; } .HeroHelperBase .heroMessage { padding: 23px; } .HeroHelperBase .nagClose { width: 8px; height: 8px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px -47px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; cursor: pointer; position: absolute; right: 8px; top: 8px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .HeroHelperBase .nagClose { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -222px -201px; background-size: 249px 231px; } } .HeroHelperBase.heroWithBackground .heroContainer { height: 240px; padding-bottom: 0; padding-top: 0; position: relative; text-align: center; } .HeroHelperBase.heroWithBackground .heroContainer::after { content: ""; display: inline-block; height: 240px; vertical-align: middle; } .HeroHelperBase.heroWithBackground .heroContent { display: inline-block; text-align: left; vertical-align: middle; } .HeroHelperBase.heroWithBackground .heroMessage { padding-bottom: 9px; } .HeroHelperBase.heroWithBackground .heroMessage .heroHeader { color: #333; font-size: 18px; line-height: 1.2; margin-bottom: 7px; } .HeroHelperBase.heroWithBackground .heroSubtitle { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #333; font-size: 14px; font-weight: normal; padding-bottom: 15px; position: relative; } .HeroHelperBase.heroWithBackground .heroSubtitle .heroSeperator { background-color: #e7e7e7; bottom: 0; height: 1px; left: -23px; position: absolute; width: 500px; } .HeroHelperBase.heroWithBackground .heroButtonsContainer { overflow: hidden; padding-top: 15px; } .HeroHelperBase.heroWithBackground .heroButtonsContainer .heroButtonsLeft { float: left; } .HeroHelperBase.heroWithBackground .heroButtonsContainer .heroButtonsRight { float: right; } .HeroHelperBase.heroWithBackground .heroButtonsContainer .heroButtonsRight button:last-child { margin-left: 8px; } /* desktop.scss */ .HeroHelperBase.heroPushDown { padding-top: 66px; } .HeroPinFromEmail { display: none; font-size: 0; } .HeroPinFromEmail .heroButtonsContainer { margin-top: 21px; } .HeroPinFromEmail .heroButton { margin-right: 7px; } .HeroPinFromEmail .heroContent { height: 176px; padding-bottom: 0; width: 776px; } .HeroPinFromEmail .heroHeader { font-size: 20px; line-height: 1.2; margin-bottom: 7px; } .HeroPinFromEmail .heroImage { background: url(https://s.pinimg.com/webapp/style/images/hero_pin_from_email-1x-8e3c6642.jpg) no-repeat; background-size: contain; height: 176px; width: 297px; border-radius: 6px 0 0 6px; display: inline-block; margin-right: 20px; vertical-align: middle; } .HeroPinFromEmail .heroMessage { display: inline-block; padding: 0; vertical-align: middle; width: 459px; } .HeroPinFromEmail .heroSubtitle { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; font-weight: normal; } .HeroPinFromEmail .heroSubtitleLink { color: #0084ff; font-weight: bold; } .HeroPinItButton { display: none; font-size: 0; } body[data-pinterest-extension-installed="true"] .HeroPinItButton { display: none; } .HeroPinItButton .heroButtonsContainer { margin-top: 21px; } .HeroPinItButton .heroButton { margin-right: 7px; } .HeroPinItButton .heroContent { height: 160px; padding-bottom: 0; width: 736px; } .HeroPinItButton .heroHeader { font-size: 24px; line-height: 1.2; margin-bottom: 7px; } .HeroPinItButton .heroImage { background: url(https://s.pinimg.com/webapp/style/images/extension_graphic-1x-55a002fe.jpg) no-repeat; background-size: contain; height: 160px; width: 253px; border-radius: 6px 0 0 6px; display: inline-block; margin-right: 20px; vertical-align: middle; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .HeroPinItButton .heroImage { background-image: url(https://s.pinimg.com/webapp/style/images/extension_graphic-2x-40a234db.jpg); } } .HeroPinItButton .heroMessage { display: inline-block; padding: 0; vertical-align: middle; width: 463px; } .HeroPinItButton .heroSubtitle { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #777; font-size: 16px; font-weight: normal; } .HeroVerifyWebsite .heroButton { margin-top: 25px; } .HeroVerifyWebsite .heroButtonsContainer { float: left; margin-bottom: 14px; } .HeroVerifyWebsite .heroHeader { color: #211922; font-size: 24px; line-height: 1.35; margin-bottom: 4px; } .HeroVerifyWebsite .heroSubtitle { color: #211922; font-size: 16px; font-weight: normal; margin-top: 10px; } .EuCookieBar .cookieText { color: #b9b9b9; display: inline; margin-right: 10px; opacity: .85; } .EuCookieBar .learnMore { color: #fff; display: inline; margin-right: 5px; } .EuCookieBar .learnMore:hover { text-decoration: underline; } .EuCookieBar .cookieButton { border-radius: 3px; color: #fff; cursor: pointer; display: inline; margin-right: 10px; padding: 5px 13px; } .EuCookieBar .cookieButton:hover { background-color: #999; opacity: 1; } .EuCookieBar.unAuthCookieBar .outerBar { background-color: #1c232c; height: 36px; line-height: 36px; text-align: center; width: 100%; } .EuCookieBar.unAuthCookieBar.homePage .outerBar { background-color: transparent; } .EuCookieBar.unAuthCookieBar.homePage .outerBar .cookieText { color: #fff; margin-right: 2px; } .EuCookieBar.authCookieBar { -webkit-animation: fadeIn .5s; animation: fadeIn .5s; } .EuCookieBar.authCookieBar .blackCookieBar { font-family: HelveticaNeue-Bold, 'Helvetica', arial; background-color: #1c232c; bottom: 0; color: #fff; font-size: 12px; font-weight: normal; height: 36px; line-height: 36px; opacity: .8; position: fixed; width: 100%; z-index: 1000; } .EuCookieBar.authCookieBar .cookieBarText { bottom: 0; position: fixed; z-index: 1001; } .EuCookieBar.authCookieBar .cookieBarText .privacyPolicy { color: #fff; line-height: 36px; margin-left: 20px; text-shadow: 0 1px 4px #000; vertical-align: middle; } .EuCookieBar.authCookieBar .cookieBarText .privacyPolicy:hover { text-decoration: underline; } .EuCookieBar.authCookieBar .cookieBarText .rightAlign { bottom: 0; line-height: 36px; position: fixed; right: 0; vertical-align: middle; } .InternationalSubdomains h1 { color: #333; color: rgba(21, 21, 21, 0.8); font-size: 47px; font-weight: bold; line-height: 52px; margin-left: auto; margin-right: auto; max-width: 736px; text-align: center; word-wrap: break-word; margin: 34px auto; } .InternationalSubdomains a { font-size: 12px; line-height: 24px; } .InternationalSubdomains .table { display: table; margin: 28px 7px; width: 1200px; } .InternationalSubdomains .table__row { display: table-row; } .InternationalSubdomains .table__cell { display: table-cell; width: 350px; } .InternationalSubdomains .itemDirectory { margin-top: 14px; max-width: 1250px; min-width: 750px; } .InternationalSubdomains .GridFooter { display: block; } .LanguageDropdown li { overflow: hidden; color: #777; display: block; font-size: 12px; } .LanguageDropdown li:first-child { padding-top: 5px; } .LanguageDropdown li:last-child { padding-bottom: 5px; } .LanguageDropdown li a { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-weight: bold; color: #777; cursor: pointer; display: block; padding: 9px 14px; } .LanguageDropdown li a:hover { background: #f1f1f1; color: #333; } .LanguageDropdown li a:active { background: #eaeaea; } .InterstitialMiniGrid { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 4px; -moz-column-gap: 4px; column-gap: 4px; margin-top: -10px; } .InterstitialMiniGrid img { margin-bottom: 4px; } .ContactTile { -ms-flex-line-pack: center; align-content: center; box-sizing: border-box; display: inline-block; padding: 14px; position: relative; vertical-align: top; width: 100%; } .ContactTile.noBottomPadding { padding-bottom: 0; } .ContactTile .center { margin-left: auto; margin-right: auto; margin-top: 14px; position: relative; width: 46px; } .ContactTile .profileImage { background-color: #555; border-radius: 50%; color: #fff; display: table-cell; font-size: 14px; font-weight: bold; height: 46px; overflow: hidden; text-align: center; vertical-align: middle; width: 46px; } .ContactTile .profileImage .placeholderIcon { width: 14px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -426px -384px no-repeat; margin: auto; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ContactTile .profileImage .placeholderIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -42px; background-size: 428px 427px; } } .ContactTile .cta { width: 100%; } .ContactTile p { margin: 0; text-align: center; } .ContactTile .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #5f5f5f; font-size: 14px; font-weight: bold; height: 17px; margin: 7px 0; } .ContactTile .email { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #999; font-weight: normal; } .ContactTile .profileLink:hover, .ContactTile .profileLink:active, .ContactTile .profileLink:focus { text-decoration: underline; } .DiscoveryTile { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; -ms-flex-line-pack: center; align-content: center; border-radius: 4px; box-shadow: none; box-sizing: border-box; color: #5f5f5f; float: left; margin: 0; overflow: hidden; position: relative; vertical-align: top; width: 236px; } .DiscoveryTile.noContainer { box-shadow: none; margin: 0; } .DiscoveryTile.inviteTile { height: 179px; } .DiscoveryTile.double { width: 504px; } .DiscoveryTile.overflow { overflow: visible; } .DiscoveryTile .dismiss { background: #fff; border-radius: 50%; cursor: pointer; display: none; margin: 7px; padding: 7px; position: absolute; right: 0; top: 0; z-index: 10; } .DiscoveryTile .dismiss .closeIcon { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -107px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .DiscoveryTile .dismiss .closeIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -321px -271px; background-size: 399px 382px; } } .DiscoveryTile:hover .dismiss { display: block; } .InviteButtonEmail .btn { margin: 5px; width: 226px; } .InviteButtonEmail.inviteDisabled .btn { color: #ccc; } .InviteButtonEmail .buttonWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .InviteLanding .contents { background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); margin: 100px auto 0; position: relative; max-width: 640px; z-index: 682; } .InviteListBase .inviteToolbar { background-color: #f5f5f5; border-bottom: 1px solid #ccc; height: 50px; } .InviteListBase .inviteToolbar input[type="text"] { border: 1px solid #dadada; border-radius: 4px; font-size: 15px; margin-bottom: 14px; margin-top: 2px; padding: 4px 6px; width: 100%; } .InviteListBase .inviteToolbar input[type="text"]:focus { border-color: #ccc; } .InviteListBase .inviteToolbar .searchWrapper { float: left; margin-left: 15px; margin-top: 10px; position: relative; width: 200px; } .InviteListBase .inviteToolbar .searchWrapper .searchIcon { width: 16px; height: 17px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -190px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; position: absolute; right: -8px; top: 7px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .InviteListBase .inviteToolbar .searchWrapper .searchIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -173px -201px; background-size: 249px 231px; } } .InviteListBase .inviteToolbar .inviteAll { float: right; margin-right: 20px; margin-top: 15px; } .InviteListBase .inviteToolbar .inviteAllLabel { cursor: pointer; font-size: 15px; margin-right: 10px; vertical-align: middle; } .InviteListBase .inviteButton { float: right; } .InviteListBase .inviteContent { clear: both; height: 400px; overflow: auto; } .InviteListBase .inviteFooter { background-color: #f5f5f5; border-top: 1px solid #ccc; overflow: auto; padding: 10px; } .InviteListBase .inviteLegalFooter { color: #808080; } .InviteListBase .emptyResultsFooterContainer { display: none; } .InviteListEmail .emptyResultsFooterContainer .emptyResults { border-bottom: 1px solid #ccc; cursor: default; display: block; padding: 20px; } .InviteListFacebook .inviteToolbar .searchWrapper { width: 400px; } .InviteListFacebook .FacebookContact { overflow: auto; } .InviteListFacebook .FacebookContact .facebookWrapper { width: auto; } .InviteListFacebook .FacebookContact .inviteFacebookButton { float: right; margin-right: 5px; } .InviteListFacebook .emptyResultsFooterContainer .emptyResults { border-bottom: 1px solid #ccc; cursor: default; display: block; padding: 20px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .InviteModal { max-width: 596px; } .InviteModal .avatar img { border: 1px solid #345d79; border-radius: 50%; height: 75px; width: 75px; } .InviteModal .inviterHeader { background-color: #49a7d3; background-image: url(https://s.pinimg.com/webapp/style/images/inviter_blue_bg-ceccb10f.png); background-position: center; background-size: cover; margin-bottom: 55px; padding: 10px 0 50px; position: relative; text-align: center; z-index: 670; } .InviteModal .mailIcon { width: 127px; height: 95px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) 0 0 no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; bottom: -40px; left: 50%; margin-left: -64px; position: absolute; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .InviteModal .mailIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: 0 0; background-size: 249px 231px; } } .InviteModal .text { color: #fff; display: table; font-size: 24px; text-shadow: 0 1px 0 #000; } .InviteModal .text span { display: table-cell; padding: 0 15px; vertical-align: middle; } .InviteModal .buttonsView { padding-bottom: 30px; text-align: center; } /* desktop.scss */ .InviteModal .avatar { padding-top: 30px; } .InviteModal .text { font-size: 30px; margin: 20px 30px; } .InvitePanelEmail { border-top: 6px solid #d0021b; border-top-left-radius: 6px; border-top-right-radius: 6px; box-sizing: border-box; height: 179px; padding: 28px; text-align: center; } .InvitePanelEmail .addFriendIcon { width: 42px; height: 44px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -230px -296px no-repeat; margin: auto auto 21px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .InvitePanelEmail .addFriendIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -135px -258px; background-size: 428px 427px; } } .InvitePanelEmail .SocialTypeaheadField { position: relative; top: 14px; } .InvitePanelEmail .searchBox { text-align: left; width: 100%; z-index: 1; } .InvitePanelEmail h2 { text-align: center; } .SocialNetworkConnectButton { border-top: 6px solid; box-sizing: border-box; cursor: pointer; display: table-cell; vertical-align: middle; width: 236px; } .SocialNetworkConnectButton.tile { border-top: 6px solid; height: 179px; text-align: center; } .SocialNetworkConnectButton.tile em.icon { left: -6px; margin: auto; position: relative; } .SocialNetworkConnectButton.tile .networkInfo { display: none; } .SocialNetworkConnectButton.listItem.default { border-top: 1px solid #e0e0e0 !important; height: 56px; } .SocialNetworkConnectButton.listItem.default .networkInfo { display: none; } .SocialNetworkConnectButton.listItem.sendShare { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 0; box-sizing: content-box; height: 32px; width: 320px; } .SocialNetworkConnectButton.listItem.sendShare a { padding: 10px; } .SocialNetworkConnectButton.listItem.sendShare.facebook em.icon { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -284px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialNetworkConnectButton.listItem.sendShare.facebook em.icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -33px -342px; background-size: 428px 427px; } } .SocialNetworkConnectButton.listItem.sendShare.google em.icon { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -102px -384px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialNetworkConnectButton.listItem.sendShare.google em.icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -252px -201px; background-size: 428px 427px; } } .SocialNetworkConnectButton.listItem.sendShare.gplus em.icon { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -102px -384px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialNetworkConnectButton.listItem.sendShare.gplus em.icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -252px -201px; background-size: 428px 427px; } } .SocialNetworkConnectButton.listItem.sendShare.twitter em.icon { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -68px -384px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialNetworkConnectButton.listItem.sendShare.twitter em.icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -276px; background-size: 428px 427px; } } .SocialNetworkConnectButton.listItem.sendShare.yahoo em.icon { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -384px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialNetworkConnectButton.listItem.sendShare.yahoo em.icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -99px -342px; background-size: 428px 427px; } } .SocialNetworkConnectButton.listItem.sendShare .icon { float: left; height: 32px; margin-right: 10px; width: 32px; } .SocialNetworkConnectButton.listItem.sendShare .networkInfo { display: table-cell; height: 32px; vertical-align: middle; } .SocialNetworkConnectButton.listItem.sendShare .networkInfo .title { color: #666; font-size: 13px; } .SocialNetworkConnectButton.listItem.sendShare .networkInfo .subtitle { color: #666; font-size: #666; font-weight: normal; } .SocialNetworkConnectButton.listItem.sendShare.brio { height: 44px; } .SocialNetworkConnectButton.listItem.sendShare.brio a { padding: 4px 20px; } .SocialNetworkConnectButton.listItem.sendShare.brio.facebook em.icon { width: 44px; height: 44px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -92px -296px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialNetworkConnectButton.listItem.sendShare.brio.facebook em.icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -45px -258px; background-size: 428px 427px; } } .SocialNetworkConnectButton.listItem.sendShare.brio.google em.icon { width: 44px; height: 44px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -46px -296px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialNetworkConnectButton.listItem.sendShare.brio.google em.icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -291px -139px; background-size: 428px 427px; } } .SocialNetworkConnectButton.listItem.sendShare.brio.twitter em.icon { width: 44px; height: 44px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -296px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialNetworkConnectButton.listItem.sendShare.brio.twitter em.icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: 0 -258px; background-size: 428px 427px; } } .SocialNetworkConnectButton.listItem.sendShare.brio.yahoo em.icon { width: 45px; height: 44px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -287px -248px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialNetworkConnectButton.listItem.sendShare.brio.yahoo em.icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -291px -94px; background-size: 428px 427px; } } .SocialNetworkConnectButton.listItem.sendShare.brio .icon { height: 44px; margin-right: 12px; width: 44px; } .SocialNetworkConnectButton.listItem.sendShare.brio .networkInfo { height: 44px; } .SocialNetworkConnectButton.listItem.sendShare.brio .networkInfo .title { color: #555; font-size: 18px; line-height: 20px; } .SocialNetworkConnectButton.listItem.sendShare.brio .networkInfo .subtitle { color: #b5b5b5; font-size: 12px; } .SocialNetworkConnectButton em.icon { display: block; } .SocialNetworkConnectButton.facebook { border-top-color: #3959a7; } .SocialNetworkConnectButton.facebook em.icon { width: 47px; height: 29px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -42px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialNetworkConnectButton.facebook em.icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -76px -303px; background-size: 428px 427px; } } .SocialNetworkConnectButton.google { border-top-color: #d4412c; } .SocialNetworkConnectButton.google em.icon { width: 110px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -253px 0 no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialNetworkConnectButton.google em.icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: 0 -201px; background-size: 428px 427px; } } .SocialNetworkConnectButton.microsoft { border-top-color: #0072c3; } .SocialNetworkConnectButton.microsoft em.icon { width: 166px; height: 28px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -218px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialNetworkConnectButton.microsoft em.icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: 0 -172px; background-size: 428px 427px; } } .SocialNetworkConnectButton.yahoo { border-top-color: #270c81; } .SocialNetworkConnectButton.yahoo em.icon { width: 109px; height: 23px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -253px -194px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SocialNetworkConnectButton.yahoo em.icon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: 0 -234px; background-size: 428px 427px; } } .SocialNetworkConnectButton.loading > .loadingContent { display: block; } .SocialNetworkConnectButton.loading > .Spinner .spinnerMedium { margin-top: -28px; } .SocialNetworkConnectButton .loadingContent { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 659; display: none; margin-top: 14px; } .SocialNetworkConnectButton .loadingContent .caption { box-sizing: border-box; color: #999; font-size: 14px; font-weight: bold; padding: 0 14px; position: absolute; text-align: center; top: 50%; width: 100%; } .UserContact { font-size: 11px; line-height: 1.2em; padding: 5px 14px; position: relative; } .UserContact::after { clear: both; content: ""; display: table; } .UserContact.loading { min-height: 0; } .UserContact:hover { background: #f3f3f3; } .UserContact .thumbImageWrapper { position: relative; float: left; height: 30px; width: 30px; } .UserContact .thumbImageWrapper::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 30px; left: 0; position: absolute; top: 0; width: 30px; } .UserContact .thumbImageWrapper img { border-radius: 50%; height: 30px; width: 30px; } .UserContact .thumbImageWrapper img { border-radius: 50%; height: 30px; width: 30px; } .UserContact .contactUser { margin-left: 35px; } .UserContact .contactUsername { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #717171; font-weight: 700; } .UserContact:hover .dismiss { width: 9px; height: 10px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -235px -206px no-repeat; cursor: pointer; margin-right: 14px; position: absolute; right: 0; top: 40%; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserContact:hover .dismiss { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px -89px; background-size: 428px 427px; } } .UserContact .contactConfirmation { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-color: #ffa; bottom: 0; display: none; left: 0; padding: 10px; position: absolute; right: 0; top: 0; } .UserContact.contactConfirmed .contactConfirmation { display: block; } .UserContact .contactAction { color: #bd081c; } .UserContact .contactAction:hover { text-decoration: underline; } .UserContact .contactWrapper { cursor: pointer; height: 30px; width: 90%; } .KLPBar { display: none; } .KLPBar .klpBarContainer { background-color: #fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.1); left: 0; margin: auto; overflow: hidden; position: fixed; right: 0; text-align: left; top: 54px; z-index: 669; height: 44px; } .KLPBar .klpBarContainer .moreToExploreLabel { display: inline-block; font-size: 12px; margin: 15px 7px; } .KLPBar .klpBarContainer .interest { color: #5f5f5f; display: inline-block; float: none; margin-left: 5px; padding: 4px 10px 5px; position: relative; } .KLPBar .klpBarContainer .interest h2 { font-size: 12px; } .KLPBar .klpBarContainer .interest:first-child { margin-left: 0; } .KLPBar .klpBarContainer .interest:hover { color: #bd081c; text-decoration: none; } .KLPBar .klpBarContainer .interest.active, .KLPBar .klpBarContainer .interest.active:hover { color: #333; } .KLPBar .klpBarContainer.lowerKLPBar { top: 65px; } .KLPBar .klpBarContainer.unfixedHeader { position: absolute; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .Login.compact { display: inline-block; width: auto; } .Login.compact .formFooter { background: none; border: 0; padding: 0; } .Login.compact .standardForm, .Login.compact .socialLogin { display: inline-block; position: relative; width: auto; } .Login.compact .socialLogin { padding: 0; } .Login.compact .socialLogin .btn { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; float: none; margin-bottom: 9px; text-align: left; width: 100%; } .Login.compact .socialLogin .facebookTooltip { background: #fff; border-radius: 6px; bottom: 11px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.32); color: rgba(0, 0, 0, 0.7); display: none; font-weight: bolder; left: 282px; padding: 8px 14px; position: absolute; width: 215px; } .Login.compact .socialLogin .facebookTooltip::after { border-color: transparent #fff; border-style: solid; border-width: 8px 10px 8px 0; content: ""; display: block; margin: -8px -1px 0 0; position: absolute; right: 100%; top: 17px; width: 0; z-index: 1; } .Login.compact .standardForm { padding: 0; } .Login.compact .compactViewLogin { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; margin: 0; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); } .Login.compact .compactViewLogin a { color: #fff; font-weight: bold; margin-top: 0; vertical-align: inherit; } .Login.compact .compactViewLogin a:hover { color: #fff; text-decoration: underline; } .Login.compact.lite .compactViewLogin, .Login.compact.darkText .compactViewLogin { color: #000; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); } .Login.compact.lite .compactViewLogin a, .Login.compact.darkText .compactViewLogin a { color: #000; } .Login.compact.lite .compactViewLogin a:hover, .Login.compact.darkText .compactViewLogin a:hover { color: #000; } .Login.compact.darkText .standardForm { box-shadow: none; } .Login.compact.inlineButtons .socialLogin { text-align: left; } .Login.compact.inlineButtons .socialLogin .registerLoginButton { box-shadow: none; display: inline-block; width: 48%; } .Login.compact.inlineButtons .socialLogin .registerLoginButton .buttonText { font-size: 14px; margin-left: 33px; } .Login.compact.inlineButtons .socialLogin .registerLoginButton em { background-color: transparent !important; } .Login.compact.inlineButtons .socialLogin .registerLoginButton:hover { width: 48%; } .Login.compact.inlineButtons .socialLogin .unAuthGplusConnect { float: right; } /* desktop.scss */ .Login.textCenter { padding: 5px 0; text-align: center; } .Login .formFooter a { display: inline-block; margin-bottom: 11px; } .Login .formFooter a.alreadyAPinner { margin-top: 0; } .Login .loginUsername { padding-top: 10px; } .Login .loginUsername .email { padding-right: 25%; } .Login .pinterestLogo { border-bottom: 1px solid #dfdfdf; padding: 20px 0; text-align: center; } .Login .pinterestLogo h1 { width: 169px; height: 42px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -174px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } .Login.register .formFooter { text-align: center; } .Login .businessHint { padding-left: 40px; } .Login .businessSignupLink, .Login .signupLink { font-size: 14px; font-weight: normal; } .Login .passwordLink { display: none; font-size: 14px; font-weight: normal; } .Login .standardForm { max-width: auto; } .Login .unAuthemailSignup { width: 100%; } .LoginBase .socialLogin { border-radius: 6px 6px 0 0; padding: 15px 40px; } .LoginBase .socialLogin::after { clear: both; content: ""; display: table; } .LoginBase .standardForm { margin-bottom: 0; } .LoginBase .standardForm.popupStyle { background-color: transparent; box-shadow: none; } .LoginBase .standardForm.popupStyle .socialLogin .unAuthFacebookConnect span, .LoginBase .standardForm.popupStyle .socialLogin .unAuthFacebookConnect:hover span { color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.25); } .LoginBase .standardForm.newDesign input[view_type="newInputField"] { font-size: 16px; font-weight: 500; padding: 10px; } .LoginBase .standardForm.newDesign .formFieldMessage { top: 12px; } .LoginBase .unAuthFacebookConnect, .LoginBase .unAuthGplusConnect, .LoginBase .unAuthTwitterConnect { float: right; margin-bottom: 10px; margin-right: 0; text-align: left; width: 100%; } .LoginBase hr { border-color: #ccc; margin: 0 40px; width: 80%; } .LoginBase .businessHint { margin-bottom: 14px; } .LoginBase .logInButton { display: none; padding: 0 40px 30px; } .LoginBase .logInButton .primary { width: 100%; } .LoginBase .loginError { background-color: #ffebe9; border: 1px solid #bd081c; color: #333; display: none; margin: 0 40px 14px; padding: 5px; } .LoginBase .loginPassword { border: 0; padding-top: 10px; } .LoginBase .newLoginPassword { border: 0; display: none; padding-top: 10px; } .LoginBase .userLogin { margin-bottom: 10px; padding-top: 15px; } .LoginBase .passwordlessBubble { display: none; } .LoginBase .passwordlessTooltip { background: #fff; border-radius: 6px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.32); color: #000; cursor: pointer; display: none; font-style: normal; font-weight: normal; left: 95%; line-height: 150%; padding: 8px 14px; position: absolute; text-align: left; top: 55%; width: 215px; z-index: 1000; } .LoginBase .passwordlessTooltip::before, .LoginBase .passwordlessTooltip::after { border-style: solid; content: ""; display: block; margin-top: -8px; position: absolute; right: 100%; top: 17px; width: 0; } .LoginBase .passwordlessTooltip::before { border-color: transparent rgba(0, 0, 0, 0.48); border-width: 8px 10px 8px 0; z-index: 1; } .LoginBase .passwordlessTooltip::after { border-color: transparent #fff; border-width: 8px 10px 8px 0; margin-right: -1px; z-index: 1; } .LoginBase .passwordlessList { display: none; padding-bottom: 10px; padding-top: 15px; } .LoginBase .cantAccessButton, .LoginBase .resendEmailButton, .LoginBase .checkPasswordlessButton, .LoginBase .continueButton { margin: 0; width: 100%; } .LoginBase .continueLogin { display: none; } .LoginBase .cantAccessButton { padding-bottom: 10px; } .LoginBase .emailHint { color: #777; display: none; font-size: 14px; font-weight: bold; padding-left: 40px; } .LoginBase .passwordlessHeader { display: none; white-space: normal; } .LoginPage { overflow: hidden; padding: 10px; } .LoginPage .contents { background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); margin: 100px auto 0; position: relative; max-width: 470px; z-index: 682; max-width: 390px; } .App.full .LoginPage .contents { z-index: 1; } .NewBoardPreview { bottom: 0; position: absolute; top: 0; width: 50%; } .NewBoardPreview .gridWrapper { height: 232px; left: 0; margin: -115px auto 0; position: absolute; right: 0; top: 50%; width: 232px; } .NewBoardPreview .gridImage { background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); height: 115px; overflow: hidden; position: absolute; width: 115px; } .NewBoardPreview .topLeft { border-top-left-radius: 14px; left: 0; top: 0; } .NewBoardPreview .topRight { border-top-right-radius: 14px; right: 0; top: 0; } .NewBoardPreview .bottomLeft { border-bottom-left-radius: 14px; bottom: 0; left: 0; } .NewBoardPreview .bottomRight { border-bottom-right-radius: 14px; bottom: 0; right: 0; } .NotificationSettings .notificationHeadingDetails { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-bottom: 15px; } .NotificationSettings .emailDisabled > li { display: none; } .NotificationSettings .emailDisabled .sectionTitle, .NotificationSettings .emailDisabled .emailGlobalToggle { display: block; } .NotificationSettings label { vertical-align: middle; } .NotificationSettings ul.formSection > li.formItem > h3 { float: none; margin-bottom: 15px; } .NotificationSettings ul.formSection > li.formItem.emailFrequency { padding-bottom: 5px; } .NotificationSettings ul.formSection > li.formItem.emailFrequency h3 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #555; display: inline; font-size: 13px; font-weight: normal; margin-bottom: 0; } .NotificationSettings ul.formSection > li.formItem.emailFrequency .fieldsetWrapper { display: inline; } .NotificationSettings ul.formSection > li.formItem.emailFrequency .formInlineCheckedSet { display: inline; padding-left: 15px; padding-top: 0; } .NotificationSettings ul.formSection > li.formItem.emailFrequency .formInlineCheckedSet label > span { font-size: 13px; font-weight: normal; } .NotificationSettings ul.formSection > li.formItem.emailGlobalToggle > h3 { float: left; margin: 0; } .NotificationSettings ul.formSection > li.formItem.headlessSection { padding-top: 0; } .NotificationSettings ul.formSection > li.formItem.headlessSection > h3 { margin-top: 0; } .NotificationSettings .formSection > li:first-child { border-top: 1px solid #dfdfdf; } .PushNotificationSettings.modal { width: 480px; } .PushNotificationSettings .pushNotifSettings h2 { background: #fafafa; border-bottom: 1px solid #dadada; border-top: 1px solid #f0f0f0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); font-size: 15px; padding: 10px 20px; } .PushNotificationSettings .pushNotifSettings ul { padding: 5px 20px 15px; } .PushNotificationSettings .pushNotifSettings .pushSetting { padding: 8px 0; } .PushNotificationSettings .pushNotifSettings .pushSetting label { font-weight: bold; } .PushNotificationSettings .pushNotifSettings .pushSetting input { float: right; margin-top: 8px; } .PushNotificationSettings .pushNotifSettings .pushSetting .helpText { color: #777; font-size: 11px; padding-top: 2px; } .PushNotificationSettings .pushNotifSettings .pushSetting:last-of-type { border: 0; } .UserBoardInvites { background: #fff; } .UserBoardInvites:empty { border-bottom: 0; } .UserBoardInvites .PagedGrid .GridItems { margin: 0; padding-bottom: 0; } .UserBoardInvites .PagedGrid .GridItems .item { width: 100%; } .UserBoardInvites .PagedGrid .moreItems { background: #fff; border-left: 0; border-radius: 0; border-right: 0; border-top: 0; margin-top: 0; } .UserBoardInvites .PagedGrid .moreItems:hover, .UserBoardInvites .PagedGrid .moreItems:active { background: #f8f8f8; border-left: 0; border-radius: 0; border-right: 0; color: #555; } .UserNews { width: 236px; } .UserNews .promotion { min-height: 285px; } .UserNews .board_reminder { min-height: 400px; } .UserNewsReact { width: 236px; } .NuxProgressMweb { background-color: #d8d8d8; left: auto; margin-top: -64px; position: relative; right: 0; top: 0; width: 100%; z-index: auto; } .NuxProgressMweb .nuxProgress { display: none; } .NuxProgressMweb .headerMain { float: left; position: relative; width: 100%; } .NuxProgressMweb .headerContent { color: #333; height: 130px; margin: 0 auto; position: relative; width: 100%; } .NuxProgressMweb .headerContent .headerTitle1, .NuxProgressMweb .headerContent .headerTitle2 { line-height: 1.4em; text-align: center; } .NuxProgressMweb .headerContent .headerTitle1 { font-size: 20px; padding: 44px 20px 0; } .NuxProgressMweb .headerContent .headerTitle2 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 14px; font-weight: normal; padding: 4px 20px 0; } .NuxProgressMweb .progressFooterWrapper { background-color: #fff; bottom: 0; display: none; height: 69px; position: fixed; text-align: center; width: 100%; z-index: 150; } .NuxProgressMweb .progressFooterWrapper .progressFooter { display: inline-block; width: 100%; } .NuxProgressMweb .progressFooterWrapper .progressFooter .progress { background-color: #f2f2f2; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; height: 69px; } .NuxProgressMweb .progressFooterWrapper .progressFooter .progress .footerButtons { height: 25px; } .NuxProgressMweb .progressFooterWrapper .progressFooter .progress .footerButtons .progressButton { margin: 0 auto; width: 100%; } .NuxProgressMweb .interestFollowButton { border-radius: 5px; height: 35px; margin-top: 15px; width: 300px; } .NuxProgressMweb .nextStep { float: left; } .NuxProgressMweb .Progress { float: left; margin: 12px 3px; } @media screen and (min-width: 1300px) { .NuxProgressMweb.fixedPosition { left: 50%; margin-left: 450px; width: 280px; } } .NuxTutorial .BuildingHomeFeedSpinner { background-color: #e9e9e9; bottom: 0; left: 0; padding-top: 60px; position: fixed; right: 0; top: 161px; } .NuxAppUpsell .nuxAppUpsell__iphone { background: url(https://s.pinimg.com/webapp/style/images/iphone-1x-33b56513.png) no-repeat; background-size: contain; height: 615px; width: 294px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .nuxAppUpsell__iphone { background-image: url(https://s.pinimg.com/webapp/style/images/iphone-2x-e36af977.png); } } .NuxAppUpsell .nuxAppUpsell__android { background: url(https://s.pinimg.com/webapp/style/images/android-1x-d1a742e3.png) no-repeat; background-size: contain; height: 647px; width: 314px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .nuxAppUpsell__android { background-image: url(https://s.pinimg.com/webapp/style/images/android-2x-c1e837c2.png); } } .NuxAppUpsell .nuxAppUpsell__feed, .NuxAppUpsell .homefeedAppUpsell__feed { background: url(https://s.pinimg.com/webapp/style/images/gender-neutral-feed-1x-78b6a3d9.png) no-repeat; background-size: contain; height: 1213px; width: 282px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .nuxAppUpsell__feed, .NuxAppUpsell .homefeedAppUpsell__feed { background-image: url(https://s.pinimg.com/webapp/style/images/gender-neutral-feed-2x-5b624974.png); } } .NuxAppUpsell .nuxAppUpsell__maleFeed, .NuxAppUpsell .homefeedAppUpsell__maleFeed { background: url(https://s.pinimg.com/webapp/style/images/male-feed-1x-2fd2fdc5.png) no-repeat; background-size: contain; height: 1213px; width: 282px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .nuxAppUpsell__maleFeed, .NuxAppUpsell .homefeedAppUpsell__maleFeed { background-image: url(https://s.pinimg.com/webapp/style/images/male-feed-2x-f0e3019d.png); } } .NuxAppUpsell .nuxAppUpsell__femaleFeed, .NuxAppUpsell .homefeedAppUpsell__femaleFeed { background: url(https://s.pinimg.com/webapp/style/images/female-feed-1x-09c763a3.png) no-repeat; background-size: contain; height: 1240px; width: 282px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .nuxAppUpsell__femaleFeed, .NuxAppUpsell .homefeedAppUpsell__femaleFeed { background-image: url(https://s.pinimg.com/webapp/style/images/female-feed-2x-f57972d4.png); } } .NuxAppUpsell .nuxAppUpsell__feed, .NuxAppUpsell .nuxAppUpsell__maleFeed, .NuxAppUpsell .nuxAppUpsell__femaleFeed, .NuxAppUpsell .nuxAppUpsell_personalizedFeed { -webkit-animation: scrollFeed 25s linear 3s; animation: scrollFeed 25s linear 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .NuxAppUpsell .homefeedAppUpsell__feed, .NuxAppUpsell .homefeedAppUpsell__maleFeed, .NuxAppUpsell .homefeedAppUpsell__femaleFeed { -webkit-animation: homefeedScrollFeed 25s linear 3s; animation: homefeedScrollFeed 25s linear 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .NuxAppUpsell .homefeedAppUpsell__personalizedFeed { -webkit-animation: homefeedPersonalizedScrollFeed 25s linear 3s; animation: homefeedPersonalizedScrollFeed 25s linear 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes scrollFeed { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-800px); transform: translateY(-800px); } } @keyframes scrollFeed { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-800px); transform: translateY(-800px); } } @-webkit-keyframes homefeedScrollFeed { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-250px); transform: translateY(-250px); } } @keyframes homefeedScrollFeed { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-250px); transform: translateY(-250px); } } @-webkit-keyframes homefeedPersonalizedScrollFeed { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-120px); transform: translateY(-120px); } } @keyframes homefeedPersonalizedScrollFeed { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-120px); transform: translateY(-120px); } } .NuxAppUpsell .appInstallButton { margin: 0 auto; text-align: center; top: 450px; width: 100%; /* stylelint-disable-next-line at-rule-no-unknown */ } .NuxAppUpsell .appInstallButton .left, .NuxAppUpsell .appInstallButton .right { display: inline-block; float: none; text-align: center; } .NuxAppUpsell .appInstallButton .left { margin-left: -4px; padding-left: 15px; padding-right: 10px; } .NuxAppUpsell .appInstallButton .right { padding-left: 10px; padding-right: 15px; } .NuxAppUpsell .appInstallButton .buttonBorder { border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 5px; } .NuxAppUpsell .appInstallButton .androidButton { background: url(https://s.pinimg.com/webapp/style/images/EN-1x-193adbd5.png) no-repeat; background-size: contain; height: 50px; width: 152px; display: inline-block; outline: none; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton { background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-ea0db06a.png); } } .NuxAppUpsell .appInstallButton .iosButton { background: url(https://s.pinimg.com/webapp/style/images/EN-1x-6f0f8e76.png) no-repeat; background-size: contain; height: 50px; width: 167px; display: inline-block; outline: none; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton { background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-1bfaab3e.png); } } .NuxAppUpsell .appInstallButton .androidButton.CS { background: url(https://s.pinimg.com/webapp/style/images/CS-1x-aa88f4fd.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.CS { background-image: url(https://s.pinimg.com/webapp/style/images/CS-2x-1f99325c.png); } } .NuxAppUpsell .appInstallButton .iosButton.CS { background: url(https://s.pinimg.com/webapp/style/images/CS-1x-57b27437.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.CS { background-image: url(https://s.pinimg.com/webapp/style/images/CS-2x-387b6b84.png); } } .NuxAppUpsell .appInstallButton .androidButton.DA { background: url(https://s.pinimg.com/webapp/style/images/DA-1x-b3212f93.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.DA { background-image: url(https://s.pinimg.com/webapp/style/images/DA-2x-881f535b.png); } } .NuxAppUpsell .appInstallButton .iosButton.DA { background: url(https://s.pinimg.com/webapp/style/images/DA-1x-73095d1e.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.DA { background-image: url(https://s.pinimg.com/webapp/style/images/DA-2x-f75e4549.png); } } .NuxAppUpsell .appInstallButton .androidButton.DE { background: url(https://s.pinimg.com/webapp/style/images/DE-1x-195f2284.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.DE { background-image: url(https://s.pinimg.com/webapp/style/images/DE-2x-73bba6d5.png); } } .NuxAppUpsell .appInstallButton .iosButton.DE { background: url(https://s.pinimg.com/webapp/style/images/DE-1x-9a33f8c5.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.DE { background-image: url(https://s.pinimg.com/webapp/style/images/DE-2x-81d4e358.png); } } .NuxAppUpsell .appInstallButton .androidButton.EL { background: url(https://s.pinimg.com/webapp/style/images/EL-1x-d5e9cffb.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.EL { background-image: url(https://s.pinimg.com/webapp/style/images/EL-2x-75dbffaf.png); } } .NuxAppUpsell .appInstallButton .iosButton.EL { background: url(https://s.pinimg.com/webapp/style/images/EL-1x-c47b5f4b.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.EL { background-image: url(https://s.pinimg.com/webapp/style/images/EL-2x-f94ceee4.png); } } .NuxAppUpsell .appInstallButton .androidButton.EN { background: url(https://s.pinimg.com/webapp/style/images/EN-1x-193adbd5.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.EN { background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-ea0db06a.png); } } .NuxAppUpsell .appInstallButton .iosButton.EN { background: url(https://s.pinimg.com/webapp/style/images/EN-1x-6f0f8e76.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.EN { background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-1bfaab3e.png); } } .NuxAppUpsell .appInstallButton .androidButton.ES { background: url(https://s.pinimg.com/webapp/style/images/ES-1x-5d4df5f0.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.ES { background-image: url(https://s.pinimg.com/webapp/style/images/ES-2x-4b31e0d2.png); } } .NuxAppUpsell .appInstallButton .iosButton.ES { background: url(https://s.pinimg.com/webapp/style/images/ES-1x-43d3ab96.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.ES { background-image: url(https://s.pinimg.com/webapp/style/images/ES-2x-a31d918b.png); } } .NuxAppUpsell .appInstallButton .androidButton.FI { background: url(https://s.pinimg.com/webapp/style/images/FI-1x-df009e22.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.FI { background-image: url(https://s.pinimg.com/webapp/style/images/FI-2x-93552fb9.png); } } .NuxAppUpsell .appInstallButton .iosButton.FI { background: url(https://s.pinimg.com/webapp/style/images/FI-1x-99cb37da.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.FI { background-image: url(https://s.pinimg.com/webapp/style/images/FI-2x-6cd4e75f.png); } } .NuxAppUpsell .appInstallButton .androidButton.FR { background: url(https://s.pinimg.com/webapp/style/images/FR-1x-76258add.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.FR { background-image: url(https://s.pinimg.com/webapp/style/images/FR-2x-892d382a.png); } } .NuxAppUpsell .appInstallButton .iosButton.FR { background: url(https://s.pinimg.com/webapp/style/images/FR-1x-a1b11f36.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.FR { background-image: url(https://s.pinimg.com/webapp/style/images/FR-2x-60ddb3dc.png); } } .NuxAppUpsell .appInstallButton .androidButton.HU { background: url(https://s.pinimg.com/webapp/style/images/HU-1x-f5a33374.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.HU { background-image: url(https://s.pinimg.com/webapp/style/images/HU-2x-3cf19ccb.png); } } .NuxAppUpsell .appInstallButton .iosButton.HU { background: url(https://s.pinimg.com/webapp/style/images/HU-1x-ecfb98ab.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.HU { background-image: url(https://s.pinimg.com/webapp/style/images/HU-2x-801f2f76.png); } } .NuxAppUpsell .appInstallButton .androidButton.ID { background: url(https://s.pinimg.com/webapp/style/images/ID-1x-fc856302.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.ID { background-image: url(https://s.pinimg.com/webapp/style/images/ID-2x-60763725.png); } } .NuxAppUpsell .appInstallButton .iosButton.ID { background: url(https://s.pinimg.com/webapp/style/images/ID-1x-7723e800.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.ID { background-image: url(https://s.pinimg.com/webapp/style/images/ID-2x-511fb06d.png); } } .NuxAppUpsell .appInstallButton .androidButton.IT { background: url(https://s.pinimg.com/webapp/style/images/IT-1x-78215d79.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.IT { background-image: url(https://s.pinimg.com/webapp/style/images/IT-2x-f06d21d3.png); } } .NuxAppUpsell .appInstallButton .iosButton.IT { background: url(https://s.pinimg.com/webapp/style/images/IT-1x-eb49e52c.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.IT { background-image: url(https://s.pinimg.com/webapp/style/images/IT-2x-4e1ebffc.png); } } .NuxAppUpsell .appInstallButton .androidButton.JA { background: url(https://s.pinimg.com/webapp/style/images/JA-1x-e4d2e103.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.JA { background-image: url(https://s.pinimg.com/webapp/style/images/JA-2x-613b7a1c.png); } } .NuxAppUpsell .appInstallButton .iosButton.JA { background: url(https://s.pinimg.com/webapp/style/images/JA-1x-e9625ac6.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.JA { background-image: url(https://s.pinimg.com/webapp/style/images/JA-2x-e4949c87.png); } } .NuxAppUpsell .appInstallButton .androidButton.KO { background: url(https://s.pinimg.com/webapp/style/images/KO-1x-d08dd546.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.KO { background-image: url(https://s.pinimg.com/webapp/style/images/KO-2x-82063d73.png); } } .NuxAppUpsell .appInstallButton .iosButton.KO { background: url(https://s.pinimg.com/webapp/style/images/KO-1x-3699e0ab.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.KO { background-image: url(https://s.pinimg.com/webapp/style/images/KO-2x-ddc06527.png); } } .NuxAppUpsell .appInstallButton .androidButton.ML { background: url(https://s.pinimg.com/webapp/style/images/ML-1x-0069db8e.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.ML { background-image: url(https://s.pinimg.com/webapp/style/images/ML-2x-85c22418.png); } } .NuxAppUpsell .appInstallButton .iosButton.ML { background: url(https://s.pinimg.com/webapp/style/images/ML-1x-cfe4f86a.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.ML { background-image: url(https://s.pinimg.com/webapp/style/images/ML-2x-482d4428.png); } } .NuxAppUpsell .appInstallButton .androidButton.NL { background: url(https://s.pinimg.com/webapp/style/images/NL-1x-ff73753a.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.NL { background-image: url(https://s.pinimg.com/webapp/style/images/NL-2x-8c8e0858.png); } } .NuxAppUpsell .appInstallButton .iosButton.NL { background: url(https://s.pinimg.com/webapp/style/images/NL-1x-3926d2dd.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.NL { background-image: url(https://s.pinimg.com/webapp/style/images/NL-2x-ffcdfef9.png); } } .NuxAppUpsell .appInstallButton .androidButton.NN { background: url(https://s.pinimg.com/webapp/style/images/NN-1x-a9972684.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.NN { background-image: url(https://s.pinimg.com/webapp/style/images/NN-2x-85d7db2a.png); } } .NuxAppUpsell .appInstallButton .iosButton.NN { background: url(https://s.pinimg.com/webapp/style/images/NN-1x-6e36a313.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.NN { background-image: url(https://s.pinimg.com/webapp/style/images/NN-2x-fd2478e8.png); } } .NuxAppUpsell .appInstallButton .androidButton.PL { background: url(https://s.pinimg.com/webapp/style/images/PL-1x-dc76138d.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.PL { background-image: url(https://s.pinimg.com/webapp/style/images/PL-2x-56d0226f.png); } } .NuxAppUpsell .appInstallButton .iosButton.PL { background: url(https://s.pinimg.com/webapp/style/images/PL-1x-3a5b9eb6.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.PL { background-image: url(https://s.pinimg.com/webapp/style/images/PL-2x-3cc909a8.png); } } .NuxAppUpsell .appInstallButton .androidButton.PT { background: url(https://s.pinimg.com/webapp/style/images/PT-1x-61d44f78.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.PT { background-image: url(https://s.pinimg.com/webapp/style/images/PT-2x-91f7acfc.png); } } .NuxAppUpsell .appInstallButton .iosButton.PT { background: url(https://s.pinimg.com/webapp/style/images/PT-1x-fc9e1aa2.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.PT { background-image: url(https://s.pinimg.com/webapp/style/images/PT-2x-e272dbd6.png); } } .NuxAppUpsell .appInstallButton .androidButton.RO { background: url(https://s.pinimg.com/webapp/style/images/RO-1x-fda1c018.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.RO { background-image: url(https://s.pinimg.com/webapp/style/images/RO-2x-d48881c4.png); } } .NuxAppUpsell .appInstallButton .iosButton.RO { background: url(https://s.pinimg.com/webapp/style/images/RO-1x-18736a64.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.RO { background-image: url(https://s.pinimg.com/webapp/style/images/RO-2x-c762cab0.png); } } .NuxAppUpsell .appInstallButton .androidButton.RU { background: url(https://s.pinimg.com/webapp/style/images/RU-1x-65d3a95b.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.RU { background-image: url(https://s.pinimg.com/webapp/style/images/RU-2x-0ce2c757.png); } } .NuxAppUpsell .appInstallButton .iosButton.RU { background: url(https://s.pinimg.com/webapp/style/images/RU-1x-ce1d81a3.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.RU { background-image: url(https://s.pinimg.com/webapp/style/images/RU-2x-b89abd86.png); } } .NuxAppUpsell .appInstallButton .androidButton.SK { background: url(https://s.pinimg.com/webapp/style/images/SK-1x-66e29846.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.SK { background-image: url(https://s.pinimg.com/webapp/style/images/SK-2x-16880fe3.png); } } .NuxAppUpsell .appInstallButton .iosButton.SK { background: url(https://s.pinimg.com/webapp/style/images/SK-1x-ac41a55d.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.SK { background-image: url(https://s.pinimg.com/webapp/style/images/SK-2x-20b58101.png); } } .NuxAppUpsell .appInstallButton .androidButton.SV { background: url(https://s.pinimg.com/webapp/style/images/SV-1x-2bad06b4.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.SV { background-image: url(https://s.pinimg.com/webapp/style/images/SV-2x-502a5a32.png); } } .NuxAppUpsell .appInstallButton .iosButton.SV { background: url(https://s.pinimg.com/webapp/style/images/SV-1x-b3f99f27.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.SV { background-image: url(https://s.pinimg.com/webapp/style/images/SV-2x-b1271639.png); } } .NuxAppUpsell .appInstallButton .androidButton.TH { background: url(https://s.pinimg.com/webapp/style/images/TH-1x-66e29846.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.TH { background-image: url(https://s.pinimg.com/webapp/style/images/TH-2x-16880fe3.png); } } .NuxAppUpsell .appInstallButton .iosButton.TH { background: url(https://s.pinimg.com/webapp/style/images/TH-1x-afac524b.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.TH { background-image: url(https://s.pinimg.com/webapp/style/images/TH-2x-7ecf42ba.png); } } .NuxAppUpsell .appInstallButton .androidButton.TL { background: url(https://s.pinimg.com/webapp/style/images/TL-1x-a001709a.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.TL { background-image: url(https://s.pinimg.com/webapp/style/images/TL-2x-58021b84.png); } } .NuxAppUpsell .appInstallButton .iosButton.TL { background: url(https://s.pinimg.com/webapp/style/images/TL-1x-31d0bc83.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.TL { background-image: url(https://s.pinimg.com/webapp/style/images/TL-2x-3187e1aa.png); } } .NuxAppUpsell .appInstallButton .androidButton.TR { background: url(https://s.pinimg.com/webapp/style/images/TR-1x-f7dc0333.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.TR { background-image: url(https://s.pinimg.com/webapp/style/images/TR-2x-4585987c.png); } } .NuxAppUpsell .appInstallButton .iosButton.TR { background: url(https://s.pinimg.com/webapp/style/images/TR-1x-6f0f8e76.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.TR { background-image: url(https://s.pinimg.com/webapp/style/images/TR-2x-1bfaab3e.png); } } .NuxAppUpsell .appInstallButton .androidButton.UK { background: url(https://s.pinimg.com/webapp/style/images/UK-1x-9ecb075c.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.UK { background-image: url(https://s.pinimg.com/webapp/style/images/UK-2x-25a04f9a.png); } } .NuxAppUpsell .appInstallButton .iosButton.UK { background: url(https://s.pinimg.com/webapp/style/images/UK-1x-6f0f8e76.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.UK { background-image: url(https://s.pinimg.com/webapp/style/images/UK-2x-1bfaab3e.png); } } .NuxAppUpsell .appInstallButton .androidButton.VI { background: url(https://s.pinimg.com/webapp/style/images/VI-1x-aba34925.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .androidButton.VI { background-image: url(https://s.pinimg.com/webapp/style/images/VI-2x-f245f353.png); } } .NuxAppUpsell .appInstallButton .iosButton.VI { background: url(https://s.pinimg.com/webapp/style/images/VI-1x-474f64a4.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxAppUpsell .appInstallButton .iosButton.VI { background-image: url(https://s.pinimg.com/webapp/style/images/VI-2x-119d560d.png); } } .OpenBoardUserRep { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; -ms-flex-line-pack: center; align-content: center; box-sizing: border-box; color: #5f5f5f; float: left; margin: 7px; overflow: hidden; position: relative; vertical-align: top; width: 236px; } .OpenBoardUserRep.noContainer { box-shadow: none; margin: 0; } .OpenBoardUserRep.double { width: 486px; } .OpenBoardUserRep.overflow { overflow: visible; } .OpenBreadthSection .topicsFlexWrapper { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-flow: row wrap; flex-flow: row wrap; height: 136px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; text-align: left; width: 100%; } .OpenBreadthSection .item { padding-left: 7px; padding-right: 7px; } .OpenCTASection { padding-bottom: 56px; padding-top: 56px; width: 100%; } .OpenCTASection .openSectionTitle { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; color: #555; font-size: 28px; font-weight: bold; letter-spacing: -1px; margin-left: auto; margin-right: auto; padding-bottom: 24px; text-align: center; width: 400px; } .OpenCTASection .openSectionTitle.save, .OpenCTASection .openSectionTitle.plan { width: 450px; } .OpenCTASection .openSectionTitle.breadth { width: 301px; } .OpenCTASection .openSectionTitle.search { width: 550px; } .OpenCTASection .centerContainer { margin: auto; width: 100%; } .OpenCTASection .buttonWrapper { margin-left: auto; margin-right: auto; width: 250px; } .OpenCTASection .continueButton { font-size: 15px; width: 250px; } .OpenCTASection.grayBackground { background-color: rgba(239, 239, 239, 0.5); border-bottom: 1px solid #efefef; border-top: 1px solid #efefef; } .OpenGridWrapper .gridRow1 { min-height: 800px; } .OpenMultiVisitButton { background-color: #fff; border-radius: 20px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .OpenMultiVisitButton .image { background: url(https://s.pinimg.com/webapp/style/images/arrow_right-1x-9ebcbfed.png) no-repeat; background-size: contain; height: 14px; width: 15px; float: right; height: 13.3px; margin-bottom: 11.35px; margin-right: 16.7px; margin-top: 11.35px; width: 14.3px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .OpenMultiVisitButton .image { background-image: url(https://s.pinimg.com/webapp/style/images/arrow_right-2x-4e75f32b.png); } } .OpenMultiVisitButton .recommendationsText { color: #36494c; font-weight: bold; letter-spacing: -.2px; line-height: 1.1; overflow: hidden; padding: 11px 12px 5px 16px; } .OpenMultiVisitTray { background-color: rgba(54, 73, 76, 0.98); bottom: 0; color: #fff; cursor: pointer; display: block; height: auto; max-height: 0; min-width: 1000px; position: fixed; width: 100%; z-index: 680; } .OpenMultiVisitTray.showTray { max-height: 120px; -webkit-transition-delay: 2s; transition-delay: 2s; -webkit-transition-duration: 2s; transition-duration: 2s; -webkit-transition-property: max-height; transition-property: max-height; } .OpenMultiVisitTray.showTray.topicsView { max-height: 143px; } .OpenMultiVisitTray .centeredContent { padding-left: 40px; padding-right: 40px; } .OpenMultiVisitTray .leftContent { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; display: block; float: left; padding-bottom: 16px; padding-top: 16px; width: auto; } .OpenMultiVisitTray .rightContent { float: right; padding-bottom: 42px; padding-top: 42px; } .OpenMultiVisitTray .pinTopicThumbnailBar { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; text-align: left; width: auto; } .OpenMultiVisitTray.topicsView .rightContent { padding-bottom: 50px; padding-top: 50px; } .OpenMultiVisitTray.topicsView .OpenMultiVisitButton .image { margin-bottom: 13.7px; margin-right: 19.7px; margin-top: 16px; } .OpenMultiVisitTray.topicsView .recommendationsText { font-size: 16px; height: 18px; padding: 13px 16px 12px 20px; } .OpenMultiVisitTrayItem .thumbnail { border-radius: 8px; display: inline-block; margin-left: 8px; margin-right: 8px; overflow: hidden; position: relative; vertical-align: middle; } .OpenMultiVisitTrayItem .thumbnail .thumbnailImg { background: #fff; background-size: cover; height: 88px; width: 88px; } .OpenMultiVisitTrayItem .topic .thumbnailImg { background: #fff center; background-size: cover; height: 111px; width: 111px; } .OpenMultiVisitTrayItem .topic .topicThumbnailGradient { background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.25)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.25)); border-radius: 8px; bottom: 0; height: 100%; position: absolute; width: 100%; } .OpenMultiVisitTrayItem .topic .topicText { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; bottom: 0; color: #fff; font-size: 13px; font-weight: bold; height: auto; letter-spacing: -.1px; line-height: 1; overflow: hidden; padding-bottom: 8px; padding-left: 8px; padding-right: 16px; position: absolute; width: auto; } .OpenNavbar { float: left; margin-left: 14px; margin-top: 40px; min-height: 100vh; position: fixed; width: 236px; } @media (min-width: 0px) and (max-width: 999px) { .OpenNavbar { display: none; } } .OpenNavbar li { margin-bottom: 6px; } .OpenNavbar li a { font-family: HelveticaNeue-Bold, 'Helvetica', arial; color: #555; font-size: 18px; letter-spacing: -.25px; line-height: 20px; margin-bottom: 4px; opacity: .4; } .OpenNavbar li a.selected { opacity: 1; } .OpenNavbar li a:hover { opacity: .8; } .OpenPersonalizedSection h3.openSectionTitle { width: 340px; } .OpenPersonalizedSection .pinsSection { padding-bottom: 20px; } .OpenPersonalizedSection .recommendationsButton { font-size: 15px; padding-left: 40px !important; padding-right: 40px !important; width: auto; } .OpenPersonalizedSection .pinsFlexWrapper { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; text-align: left; width: 100%; } .OpenPersonalizedSection .item { padding-left: 7px; padding-right: 7px; } .OpenPersonalizedSection .creditFooter { border-top: 0 !important; } .OpenPlanProjectsSection .boardsFlexWrapper { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-flow: row wrap; flex-flow: row wrap; height: 345px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; text-align: left; width: 100%; } .OpenPlanProjectsSection .Board .boardName { display: none; } .OpenPlanProjectsSection .Board .boardDirectButton { background: #ebebeb; border: 0; border-radius: 4px; color: #444; font-size: 14px; line-height: 36px; padding: 0; text-align: center; text-shadow: none; } .OpenPlanProjectsSection .Board .boardDirectButton:hover, .OpenPlanProjectsSection .Board .boardDirectButton:focus { background: #f5f3f3; } .OpenPlanProjectsSection .boardRepTitle { padding: 10px 10px 0; } .OpenSaveSection .openSectionTitle .highlight { color: #bd081c; } .OpenSaveSection .boardsFlexWrapper { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-flow: row wrap; flex-flow: row wrap; height: 345px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; text-align: left; width: 100%; } .OpenSaveSection .Board .boardName { display: none; } .OpenSaveSection .Board .boardDirectButton { background: #ebebeb; border: 0; border-radius: 4px; color: #444; font-size: 14px; line-height: 36px; padding: 0; text-align: center; text-shadow: none; } .OpenSaveSection .Board .boardDirectButton:hover, .OpenSaveSection .Board .boardDirectButton:focus { background: #f5f3f3; } .OpenSaveSection .boardRepTitle { padding: 10px 10px 0; } .OpenSignupSection { background: white; border-radius: 0 !important; box-shadow: none !important; padding-bottom: 20px; padding-top: 20px; width: 100%; } .OpenSignupSection .tagline { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; color: #555; font-size: 28px; font-weight: bold; letter-spacing: -1px; margin-left: auto; margin-right: auto; padding-bottom: 30px; padding-top: 15px; text-align: center; width: 550px; } .OpenSignupSection .tagline.breadth { width: 600px; } .OpenSignupSection .tagline.personalize { width: 450px; } .OpenSignupSection .signupWrapper { text-align: center !important; } .OpenSignupSection .signupWrapper .step2 { width: 100%; } .OpenSignupSection.grayBackground { background-color: rgba(239, 239, 239, 0.5); border-bottom: 1px solid #efefef; border-top: 1px solid #efefef; } .OpenValueSection { padding-bottom: 40px; padding-top: 32px; width: 100%; } .OpenValueSection.save { min-height: 425px; } .OpenValueSection.personalize { min-height: 250px; } .OpenValueSection .openSectionTitle { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; color: #555; font-size: 28px; font-weight: bold; letter-spacing: -1.2px; margin-left: auto; margin-right: auto; padding-bottom: 32px; padding-top: 15px; text-align: center; width: 600px; } .OpenValueSection .openSectionTitle.search { width: 420px; } .OpenValueSection .centerContainer { display: table; margin: auto; width: auto; } .PromptPinEducation .pinEducation { left: -150px; padding-bottom: 54px; padding-top: 40px; position: relative; width: 928px; } .PromptPinEducation .pinEducation .pinEducationHeader { color: #555; font-size: 48px; font-weight: 700; letter-spacing: -1.8px; line-height: 1.17; margin-bottom: 10px; overflow: hidden; text-align: center; text-overflow: ellipsis; } .PromptPinEducation .pinEducation .pinEducationHeader .websiteLink { font-style: normal; text-overflow: ellipsis; white-space: nowrap; } .PromptPinEducation .pinEducation .pinEducationSubtitle { color: #4a4a4a; font-size: 20px; font-weight: 400; letter-spacing: -.3px; line-height: 1.1; text-align: center; } .PinFeedbackPage .sticky { border-radius: 8px; position: -webkit-sticky; position: sticky; top: 65px; will-change: transform; z-index: 101; } @-webkit-keyframes fadeoutandzoom { 0% { opacity: 1; -webkit-transform: scale(0.9); transform: scale(0.9); } 15% { opacity: 1; -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 0; -webkit-transform: scale(1.1); transform: scale(1.1); } } @keyframes fadeoutandzoom { 0% { opacity: 1; -webkit-transform: scale(0.9); transform: scale(0.9); } 15% { opacity: 1; -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 0; -webkit-transform: scale(1.1); transform: scale(1.1); } } .PinFeedbackPage .FeedbackAnimation .FeedbackAnimationIcon { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-name: fadeoutandzoom; animation-name: fadeoutandzoom; pointer-events: none; } .PinFeedbackPage .FeedbackAnimation .FeedbackAnimationIcon svg { -webkit-filter: drop-shadow(0 0 10vw rgba(0, 0, 0, 0.8)); filter: drop-shadow(0 0 10vw rgba(0, 0, 0, 0.8)); } .PinNextToGridCloseup .centeredWithinWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .PinNextToGridCloseup .mainPin { -ms-flex-negative: 0; flex-shrink: 0; margin: 14px 7px 0; width: 486px; } .PinNextToGridCloseup .mainPin .pinCanonicalDescription, .PinNextToGridCloseup .mainPin .pinDesc, .PinNextToGridCloseup .mainPin .descriptionSection { width: auto !important; } .PinNextToGridCloseup.pinOverlay .mainPin { margin: 0 auto; } .PinNextToGridCloseup.pinCloseupSmall .repinsAndLikes { font-size: 12px; padding-right: 0; padding-top: 2px; } .PinNextToGridCloseup.pinCloseupSmall .repinsAndLikes .countInfo { margin-top: 7px; } .PinNextToGridCloseup .rightSection { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; position: relative; } .PinNextToGridCloseup .rightSection .relatedPinsTitle { color: #555; font-size: 24px; font-weight: bold; margin: 14px 0 0 7px; } .PinNextToGridCloseup .pinTopBar { position: absolute; z-index: 10; } .PinNextToGridCloseup .PaddedPin { margin: 0 32px; } .PinNextToGridCloseup .PaddedPin .pinDomain { width: auto !important; } .PinNextToGridCloseup .Pin { border-radius: 6px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); overflow: hidden; width: 486px; } .PinNextToGridCloseup .Pin.detailed.PinNextToGridCloseup .pinImage { border-radius: 6px; } .PinNextToGridCloseup .Pin.detailed.PinNextToGridCloseup .pinActionBarStickyContainer { padding-top: 60px; } .PinNextToGridCloseup .CloseupTitleCard { padding-left: 32px; padding-right: 32px; } .PinNextToGridCloseup .CloseupTitleCard .richPinInformation { padding: 0; width: auto; } .PinNextToGridCloseup .CloseupTitleCard .richPinTitle { padding-bottom: 8px; } .PinNextToGridCloseup .CloseupSourceDescription .richPinArticleSummary { width: auto; } .PinNextToGridCloseup .commentDescriptionContent { width: auto !important; } .PinNextToGridCloseup .showMoreButton { display: none; } .PinNextToGridCloseup .topSection { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .PinNextToGridCloseup .PinActionBar { width: 486px !important; } .PinNextToGridCloseup .positionModuleElement.active { min-height: 0; min-width: 0; } .PinNextToGridCloseup.gridLayout .pinPageHeader { background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); margin-bottom: 18px; } .PinNextToGridCloseup.gridLayout .pinPageHeaderTitle { color: #555; font-size: 48px; font-weight: bold; padding-top: 20px; } .PinNextToGridCloseup.gridLayout .RelatedInterestsSection { margin: 32px 0; } .PinNextToGridCloseup .closeupContainer { margin-top: 0 !important; width: 486px !important; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .PinPicksDetail p { margin: 0; } .PinPicksDetail .banner { background-position: right; background-size: cover; padding: 71px 0; position: relative; } .PinPicksDetail .banner .title { font-size: 61px; font-weight: bold; margin-bottom: 10px; } .PinPicksDetail .banner .pinpicksTitle, .PinPicksDetail .banner .preTitle, .PinPicksDetail .banner .title { color: #eee; line-height: 110%; margin-bottom: 10px; text-align: center; } .PinPicksDetail .pinpicksTitle { font-size: 20px; font-weight: normal; margin-bottom: 5px; } .PinPicksDetail .preTitle { font-size: 24px; padding-top: 10px; } .PinPicksDetail .boardSet, .PinPicksDetail .middleImageOverlay { margin: auto; max-width: 1000px; } .PinPicksDetail .boardSet > .User, .PinPicksDetail .boardSet > .Board, .PinPicksDetail .middleImageOverlay > .User, .PinPicksDetail .middleImageOverlay > .Board { display: inline-block; margin: 5px; } .PinPicksDetail .pinnerGrid, .PinPicksDetail .boardGrid { margin: -7px; } .PinPicksDetail .sectionText { padding: 10px; } .PinPicksDetail .header { color: #333; font-size: 20px; font-weight: bold; padding: 0 8px; } .PinPicksDetail .details { color: #777; font-size: 16px; line-height: 22px; padding: 6px 8px; } .PinPicksDetail .bodyWrapper { padding: 20px 0 30px; } .PinPicksDetail .featuredPinnerBackground { background: #fff; } .PinPicksDetail .divider { background-color: #e9e9e9; height: 1px; margin: 14px 0; } .PinPicksDetail .lightText .header, .PinPicksDetail .lightText .details { color: #eee; } .PinPicksDetail .middleImage { background-position: right; background-size: cover; } .PinPicksDetail .nextPinPick { background-position: 50%; margin-top: 20px; } /* desktop.scss */ .PinPicksDetail .featuredPinnerText { max-width: 472px; overflow: hidden; } .PinPicksDetail .featuredPinnerBoard { float: left; margin-right: 30px; margin-top: -40px; } .PinPicksDetail .featuredPinnerContainer { margin: auto; width: 944px; } .PinPicksDetail .featuredPinnerContainer::after { clear: both; content: ""; display: table; } .PinsCarousel { overflow-x: scroll; overflow-y: hidden; padding: 15px 15px 5px 0; white-space: nowrap; width: auto; } .PinsCarousel .carouselItemContainer { display: inline-block; vertical-align: top; } .PinsCarousel .carouselItem { height: 130px; margin: 0 5px 8px 0; overflow: hidden; width: 130px; } .PinsCarousel .itemText { color: #000; font-weight: normal; white-space: normal; width: 130px; } .PasswordResetOneClick h1 { font-size: 21px; } .PasswordResetOneClick h3 { font-size: 14px; font-weight: normal; line-height: 1.6em; margin-top: 20px; } .PasswordResetOneClick .successMessage { display: none; } .PasswordResetOneClick .wrapper { background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); margin: 100px auto 0; position: relative; max-width: 380px; z-index: 682; min-height: auto !important; } .PasswordResetOneClick .content { color: #525252; padding: 20px; } .PasswordResetOneClick .messageContent { border-top: 1px solid #dadada; padding: 20px; } .PasswordResetOneClick .messageContent h3 { margin: 0; } .PasswordResetOneClick .oneClickPasswordResetForm { margin-bottom: 0; } .PasswordResetOneClick .formFooter { text-align: right; } .UserChangePassword { width: 530px; } .UserChangePassword .forgotPassword { color: #bd081c; display: block; font-size: 11px; } .SeamlessOverlay { background-color: rgba(85, 85, 85, 0.8); bottom: 0; color: #555; display: none; left: 0; letter-spacing: -1.5px; position: fixed; right: 0; top: 0; z-index: 10000; } .SeamlessOverlay .bottomOverlay { background-color: #fff; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 35%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 20px; position: absolute; text-align: left; } .SeamlessOverlay .pinterestLogo { background: url(https://s.pinimg.com/webapp/style/images/seamless_overlay_logo-1x-38b82376.png) no-repeat; background-size: contain; height: 80px; width: 80px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SeamlessOverlay .pinterestLogo { background-image: url(https://s.pinimg.com/webapp/style/images/seamless_overlay_logo-2x-123786fa.png); } } .SeamlessOverlay .subtitle { font-size: 18px; } .SeamlessOverlay .mainText { font-size: 36px; font-weight: bold; letter-spacing: -1.5px; line-height: 36px; width: 80%; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .SentPinSignup .signupTitle { color: #555; font-weight: bold; letter-spacing: -1.5px; text-align: left; } .SentPinSignup .signupTitle .step1, .SentPinSignup .signupTitle .step2 { -webkit-animation: fadeIn .5s ease-out; animation: fadeIn .5s ease-out; } .SentPinSignup .signupTitle .step2 { display: none; } .SentPinSignup .signupTitle.completeSignupStep .step1 { display: none; } .SentPinSignup .signupTitle.completeSignupStep .step2 { display: block; } /* desktop.scss */ .SentPinSignup.saveHeader .sentPinInfo, .SentPinSignup.discoverHeader .sentPinInfo { height: 400px; padding-top: 20px; width: 690px; } .SentPinSignup.saveModal .sentPinInfo { height: 390px; padding: 40px; width: 680px; } .SentPinSignup .sentPinInfo { margin: 0 auto; } .SentPinSignup .signupWrapper { float: left; margin-right: 90px; text-align: left; width: 310px; } .SentPinSignup .signupTitle { color: #555; font-size: 48px; font-weight: bold; letter-spacing: -1.5px; line-height: 48px; padding-bottom: 20px; } .SentPinSignup .continueSignupButton { display: none; } .SentPinSignup .SignupForm { width: 310px; } .SentPinSignup .SignupForm .registerButtons.styleLogin { width: 310px; } .SentPinSignup .SignupForm .termOfServiceWrapper .outerTermsOfServiceFooter { font-size: 12px; height: 32px; line-height: 12px; text-align: center; width: 305px; } .SentPinSignup .Login.compact .socialLogin .btn { width: 100%; } .SentPinSignup .Login.compact .socialLogin .btn .buttonText { margin-left: 55px; } .CloseupSignupModal { height: 446px; width: 688px; /** * csLeftContent holds the pin image or related pins slideshow */ /** * csRightContent holds the csSignupWall, csSignupOptions and csSignupForm */ } .CloseupSignupModal .homeUnauthNumbers { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; margin: 0 auto; position: absolute; text-align: center; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); top: 464px; width: 100%; z-index: -1; } .CloseupSignupModal .homeUnauthNumbers .left, .CloseupSignupModal .homeUnauthNumbers .right { display: inline-block; float: none; text-align: center; } .CloseupSignupModal .homeUnauthNumbers .left { border-right: 2px solid #fff; margin-left: -4px; padding-left: 15px; padding-right: 20px; } .CloseupSignupModal .homeUnauthNumbers .left .numbersWrapper { text-align: right; } .CloseupSignupModal .homeUnauthNumbers .right { padding-left: 20px; padding-right: 15px; } .CloseupSignupModal .homeUnauthNumbers .right .numbersWrapper { text-align: left; } .CloseupSignupModal .homeUnauthNumbers .numbersTitle { font-family: Helvetica; font-size: 35px; font-weight: bold; display: inline-block; } .CloseupSignupModal .homeUnauthNumbers .numbersSubtitle { display: inline-block; font-size: 12px; font-weight: bold; line-height: 120%; padding-left: 4px; padding-top: 3px; text-align: left; } .CloseupSignupModal.categoryPivotStyling { box-shadow: none; height: auto; margin-left: 10px; width: 839px; } .CloseupSignupModal.categoryPivotStyling .csLeftContent { width: 419.5px; } .CloseupSignupModal.categoryPivotStyling .csRightContent { padding: 0 40px; } .CloseupSignupModal.categoryPivotStyling .csRightContent .csContent .csSignupWall { width: 289.58333px; } .CloseupSignupModal .inspiredLogo { width: 24px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -220px -218px no-repeat; display: inline-block; margin-bottom: -5px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .CloseupSignupModal .inspiredLogo { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -205px -303px; background-size: 428px 427px; } } .CloseupSignupModal .csLeftContent { border-radius: 6px 0 0 6px; float: left; height: 446px; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); mask-image: radial-gradient(#fff, #000); width: 344px; } .CloseupSignupModal .csLeftContent.right { float: right; height: auto; margin-bottom: 5%; margin-right: 20px; margin-top: 7%; } .CloseupSignupModal .csLeftContent.interestType .csContent, .CloseupSignupModal .csLeftContent.interestType .csItem, .CloseupSignupModal .csLeftContent.boardType .csContent, .CloseupSignupModal .csLeftContent.boardType .csItem, .CloseupSignupModal .csLeftContent.pinType .csContent, .CloseupSignupModal .csLeftContent.pinType .csItem, .CloseupSignupModal .csLeftContent.pinnableType .csContent, .CloseupSignupModal .csLeftContent.pinnableType .csItem { height: inherit; position: relative; width: inherit; } .CloseupSignupModal .csLeftContent.interestType .csContent.csContentExperiment, .CloseupSignupModal .csLeftContent.interestType .csItem.csContentExperiment, .CloseupSignupModal .csLeftContent.boardType .csContent.csContentExperiment, .CloseupSignupModal .csLeftContent.boardType .csItem.csContentExperiment, .CloseupSignupModal .csLeftContent.pinType .csContent.csContentExperiment, .CloseupSignupModal .csLeftContent.pinType .csItem.csContentExperiment, .CloseupSignupModal .csLeftContent.pinnableType .csContent.csContentExperiment, .CloseupSignupModal .csLeftContent.pinnableType .csItem.csContentExperiment { border: 1px solid #b5b5b5; border-radius: 6px; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.27); height: 325px; margin: 10% 0; padding: 15px; width: 355px; } .CloseupSignupModal .csLeftContent.interestType .csItem, .CloseupSignupModal .csLeftContent.boardType .csItem, .CloseupSignupModal .csLeftContent.pinType .csItem, .CloseupSignupModal .csLeftContent.pinnableType .csItem { margin: 0; } .CloseupSignupModal .csRightContent { background: #fff; border-radius: 0 6px 6px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; float: right; height: 446px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: visible; padding: 0 29px; position: relative; width: auto; } .CloseupSignupModal .csRightContent .csContent { text-align: center; } .CloseupSignupModal .csRightContent .csContent .csSignupWall { margin: 0; width: 284px; } .CloseupSignupModal .csRightContent .csContent .csSignupWall > h3 { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; font-size: 24px; font-weight: bold; line-height: 28px; margin: 0 0 18px; } .CloseupSignupModal .csRightContent .csContent .csSignupWall.leftMargin { margin-left: 10px; } .CloseupSignupModal .csRightContent .csContent .csSignupWall .leftAligned { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .CloseupSignupModal .csRightContent .csContent .csSignupWall .taglineExperiment { color: #555; font-size: 32px; letter-spacing: -1.7px; line-height: 1.2; margin: 0 -20px 15px 0; text-align: left; } .CloseupSignupModal .csRightContent .csContent .csSignupWall .loginLine { margin: 2px 0 8px; } .CloseupSignupModal .csRightContent .csContent .csSignupWall .logo { margin: 0 auto; } .CloseupSignupModal .subtitle { color: #555; display: inline-block; font-size: 14px; font-weight: bold; letter-spacing: -.2px; line-height: 1.4; margin-bottom: 26px; } .CloseupSignupModal .separator { border-bottom: #dedede 1px solid; margin: 15px auto; width: 180px; } .CloseupSignupModal .left { float: left; height: auto; margin: 50px 0; } .ContinueAsABusinessButton { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; z-index: 1; } .ContinueAsABusinessButton.borderless { display: inline-block; font-size: 16px; font-weight: bold; padding: 7px 13px; white-space: nowrap; } .ContinueAsABusinessButton.solid { display: block; font-size: 16px; } .ContinueAsABusinessButton--dark { color: #444; } .ContinueAsABusinessButton--dark:hover, .ContinueAsABusinessButton--dark:focus { color: #444; } .ContinueAsABusinessButton--light { color: #fff; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); } .ContinueAsABusinessButton--light:hover, .ContinueAsABusinessButton--light:focus { color: #fff; } .FourPinSignupModal .modalLoginButton { font-size: 15px; height: 40px; left: 610px; margin: 10px 0; padding: 0 30px; top: 21px; } .FourPinSignupModal .basicLightGray:hover { background: #f8f8f8; } .FourPinSignupModal .fourPinSignupContainer { background-color: #fff; border-radius: 8px; height: 525px; left: 50%; position: fixed; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 775px; } .FourPinSignupModal .modalContentContainer { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 18px; padding: 0 60px; } .FourPinSignupModal .modalLeft, .FourPinSignupModal .modalRight { -ms-flex-item-align: center; align-self: center; width: 50%; } .FourPinSignupModal .modalRight { margin-left: 40px; } .FourPinSignupModal .modalTitle { color: #555; font-size: 32px; font-weight: bold; } .FourPinSignupModal .SignupForm { margin: 30px 0 0; } .FourPinSignupModal .SignupForm .confirmedEmail, .FourPinSignupModal .SignupForm .genderFormItem, .FourPinSignupModal .SignupForm .toggleStep, .FourPinSignupModal .SignupForm .businessField { text-align: center; } .FourPinSignupModal .fourPin { border-radius: 6px; box-shadow: 0 0 5px #999; display: -webkit-box; display: -ms-flexbox; display: flex; height: 310px; width: 310px; } .FourPinSignupModal .pinsContainer { -ms-flex-line-pack: justify; align-content: space-between; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 15px; width: 100%; } .FourPinSignupModal .pinImage { background-size: cover; border-radius: 4px; height: 135px; width: 135px; } .InlineSignup { border-radius: 6px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); } .InlineSignup .outerTermsOfServiceFooter { font-size: 11px; } .InlineSignup .loginLine .separator { margin-bottom: 10px; } .InlineSignup .outerTermsOfServiceFooter, .InlineSignup .unAuthFacebookConnect { -webkit-transition: opacity .2s linear; transition: opacity .2s linear; } .InlineSignup.secondStep .loginLine, .InlineSignup.secondStep .loginButton, .InlineSignup.secondStep .loginPrefix { opacity: 0; pointer-events: none; } .PinItLandingSignup { margin: auto; text-align: center; width: 340px; } .PinItLandingSignup .savePinDialog { background-color: #efefef; border-radius: 6px; position: absolute; top: 5%; width: 340px; } .PinItLandingSignup .savePinDialog .homeUnauthLogoWrapper { background-color: #fff; border-radius: 6px; display: block !important; padding-top: 10px; } .PinItLandingSignup .savePinDialog .homeUnauthLogoWrapper .homeUnauthLogo { width: 251px; height: 85px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 0 no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PinItLandingSignup .savePinDialog .homeUnauthLogoWrapper .homeUnauthLogo { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: 0 0; background-size: 428px 427px; } } .PinItLandingSignup .savePinDialog .savePinWrapper { background-color: #fdffe0; border-top: #dedede 1px solid; padding: 15px; } .PinItLandingSignup .savePinDialog .savePinWrapper .savePin { margin: auto; } .PinItLandingSignup .savePinDialog .savePinWrapper .savePin .savePinImgWrapper { border: #dedede 1px solid; border-radius: 6px; display: inline-block; height: 65px; margin-right: 15px; overflow: hidden; width: 65px; } .PinItLandingSignup .savePinDialog .savePinWrapper .savePin .savePinText { display: inline-block; font-size: 13px; line-height: 150%; vertical-align: top; width: 175px; } .PinItLandingSignup .savePinDialog .savePinWrapper .savePin .savePinText.hasImage { margin-top: 5px; text-align: left; } .PinItLandingSignup .savePinDialog .signupForm { border-top: #dedede 1px solid; padding-top: 15px; } .PinItLandingSignup .savePinDialog .signupForm .loginLine { margin: 15px auto; } .PinItLandingSignup .savePinDialog .signupForm .outerTermsOfServiceFooter { bottom: 0; color: #333; position: relative; } .PinItLandingSignup .savePinDialog .signupForm .outerTermsOfServiceFooter a { color: #717171; } .PinItLandingSignup .loginLine .emailLogin { padding: 9px 12px; right: 6px; top: 6px; } .PinItLandingSignup .separator { border-bottom: #dedede 1px solid; margin: auto; margin-bottom: 15px; width: 180px; } .PlainSignupModal { background-color: #eee; border-radius: 6px; position: relative; text-align: center !important; width: 335px; } .PlainSignupModal .homeUnauthNumbers { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; margin: 0 auto; position: absolute; text-align: center; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); top: 20px; width: 100%; z-index: -1; } .PlainSignupModal .homeUnauthNumbers .left, .PlainSignupModal .homeUnauthNumbers .right { display: inline-block; float: none; text-align: center; } .PlainSignupModal .homeUnauthNumbers .left { border-right: 2px solid #fff; margin-left: -4px; padding-left: 15px; padding-right: 20px; } .PlainSignupModal .homeUnauthNumbers .left .numbersWrapper { text-align: right; } .PlainSignupModal .homeUnauthNumbers .right { padding-left: 20px; padding-right: 15px; } .PlainSignupModal .homeUnauthNumbers .right .numbersWrapper { text-align: left; } .PlainSignupModal .homeUnauthNumbers .numbersTitle { font-family: Helvetica; font-size: 35px; font-weight: bold; display: inline-block; } .PlainSignupModal .homeUnauthNumbers .numbersSubtitle { display: inline-block; font-size: 12px; font-weight: bold; line-height: 120%; padding-left: 4px; padding-top: 3px; text-align: left; } .PlainSignupModal .logoWrapper { background-color: #fff; border-radius: 6px 6px 0 0; } .PlainSignupModal .logoWrapper .logoSmall { width: 87px; height: 21px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -253px -219px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; margin: 20px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PlainSignupModal .logoWrapper .logoSmall { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -110px -234px; background-size: 428px 427px; } } .PlainSignupModal .signupWrapper { border-top: solid 1px #ccc; min-height: 350px; padding: 20px 10px; } .PlainSignupModal .signupWrapper .title { margin: 0 3px 25px; } .PlainSignupModal .signupWrapper .title h3 { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; font-size: 28px; font-weight: bold; letter-spacing: -1px; } .PlainSignupModal .signupWrapper .title h4 { font-size: 14px; font-weight: normal; margin-top: 10px; } .PlainSignupModal .signupWrapper .Button.btn.requestInviteButton { height: 40px; width: 268px; } .PlainSignupModal .signupWrapper .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect { box-shadow: none; } .PlainSignupModal .homeUnauthNumbers { height: 0; margin-left: -130px; position: relative; width: 600px; } .PlainSignupModal .homeUnauthNumbers .left, .PlainSignupModal .homeUnauthNumbers .right { width: 250px; } .PlainSignupModal .closeModal { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -261px -242px no-repeat; cursor: pointer; position: absolute; right: 15px; top: 15px; } .PlainSignupModal.secondStep .Login, .PlainSignupModal.secondStep .caption, .PlainSignupModal.secondStep .separator { opacity: 0 !important; } .RelatedItemsSlideshow { background-color: #000; height: 100%; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); mask-image: radial-gradient(#fff, #000); overflow: hidden; position: absolute; width: 100%; } .RelatedItemsSlideshow .blackBackground { opacity: .5; } .RelatedItemsSlideshow .backgroundImage { background-size: cover; max-width: none; min-height: 100%; min-width: 100%; -o-object-fit: cover; object-fit: cover; overflow: hidden; position: absolute; -webkit-transform: translateZ(0); transform: translateZ(0); } .RelatedItemsSlideshow .pinInfo { color: #fff; font-size: 11px; margin: 10px 15px; position: absolute; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75); z-index: 5; } .RelatedItemsSlideshow .pinInfo h4 { font-size: 13px; } .RelatedItemsSlideshow img { border-radius: 0 !important; left: 0; min-height: 100%; min-width: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; -webkit-transform: translateZ(0); transform: translateZ(0); } .RelatedItemsSlideshow.animate .slideshow img, .RelatedItemsSlideshow.animate .slideshow .pinInfo { opacity: 0; -webkit-transition: opacity 1s; transition: opacity 1s; } .RelatedItemsSlideshow.animate .slideshow img { /* stylelint-disable-next-line at-rule-no-unknown */ } .RelatedItemsSlideshow.animate .slideshow img:nth-of-type(1) { /* stylelint-disable-next-line at-rule-no-unknown */ -webkit-animation: zoomInAndFade 20s 0.3s linear infinite; animation: zoomInAndFade 20s 0.3s linear infinite; } .RelatedItemsSlideshow.animate .slideshow img:nth-of-type(2) { /* stylelint-disable-next-line at-rule-no-unknown */ -webkit-animation: zoomOutAndFade 20s 5.3s linear infinite; animation: zoomOutAndFade 20s 5.3s linear infinite; } .RelatedItemsSlideshow.animate .slideshow img:nth-of-type(3) { /* stylelint-disable-next-line at-rule-no-unknown */ -webkit-animation: zoomInAndFade 20s 10.3s linear infinite; animation: zoomInAndFade 20s 10.3s linear infinite; } .RelatedItemsSlideshow.animate .slideshow img:nth-of-type(4) { /* stylelint-disable-next-line at-rule-no-unknown */ -webkit-animation: zoomOutAndFade 20s 15.3s linear infinite; animation: zoomOutAndFade 20s 15.3s linear infinite; } .RelatedItemsSlideshow.animate .slideshow .pinInfo { /* stylelint-disable-next-line at-rule-no-unknown */ } .RelatedItemsSlideshow.animate .slideshow .pinInfo:nth-of-type(1) { -webkit-animation: fadeInAndOut 20s 0.3s linear infinite; animation: fadeInAndOut 20s 0.3s linear infinite; } .RelatedItemsSlideshow.animate .slideshow .pinInfo:nth-of-type(2) { -webkit-animation: fadeInAndOut 20s 5.3s linear infinite; animation: fadeInAndOut 20s 5.3s linear infinite; } .RelatedItemsSlideshow.animate .slideshow .pinInfo:nth-of-type(3) { -webkit-animation: fadeInAndOut 20s 10.3s linear infinite; animation: fadeInAndOut 20s 10.3s linear infinite; } .RelatedItemsSlideshow.animate .slideshow .pinInfo:nth-of-type(4) { -webkit-animation: fadeInAndOut 20s 15.3s linear infinite; animation: fadeInAndOut 20s 15.3s linear infinite; } .RelatedItemsSlideshow.animate .slideshow .pinInfo a, .RelatedItemsSlideshow.animate .slideshow .pinInfo a:hover { color: #fff; } .RelatedItemsSlideshow.static .slideshow img, .RelatedItemsSlideshow.static .slideshow .pinInfo { /* stylelint-disable-next-line at-rule-no-unknown */ } .RelatedItemsSlideshow.static .slideshow img:nth-of-type(1), .RelatedItemsSlideshow.static .slideshow .pinInfo:nth-of-type(1) { -webkit-animation-play-state: paused; animation-play-state: paused; } .RelatedItemsSlideshow.static .slideshow img:nth-of-type(2), .RelatedItemsSlideshow.static .slideshow .pinInfo:nth-of-type(2) { -webkit-animation-play-state: paused; animation-play-state: paused; } .RelatedItemsSlideshow.static .slideshow img:nth-of-type(3), .RelatedItemsSlideshow.static .slideshow .pinInfo:nth-of-type(3) { -webkit-animation-play-state: paused; animation-play-state: paused; } .RelatedItemsSlideshow.static .slideshow img:nth-of-type(4), .RelatedItemsSlideshow.static .slideshow .pinInfo:nth-of-type(4) { -webkit-animation-play-state: paused; animation-play-state: paused; } .RelatedPinModal .col { background-size: cover; border-radius: 4px; float: left; height: 156px; margin: 1%; width: 48%; } .SignupButton { text-align: center; width: 120px; } .SignupForm { margin: 0 auto; width: 268px; } .SignupForm.secondStep .outerTermsOfServiceFooter, .SignupForm.secondStep .unAuthFacebookConnect, .SignupForm.secondStep .socialLogin { opacity: 0; pointer-events: none; } .SignupForm.secondStep.loginForm .outerTermsOfServiceFooter, .SignupForm.secondStep.loginForm .unAuthFacebookConnect, .SignupForm.secondStep.loginForm .socialLogin { opacity: 1; pointer-events: all; } .SignupForm.largeButtons .unAuthFacebookConnect, .SignupForm.largeButtons .continueButton { height: 50px !important; } .SignupForm.largeButtons .unAuthFacebookConnect em, .SignupForm.largeButtons .continueButton em { margin-top: 5px !important; } .SignupForm.largeButtons .textField, .SignupForm.largeButtons .continueButton, .SignupForm.largeButtons button.signup { font-size: 16px; height: 50px !important; } .SignupForm.whiteWall { width: 280px; } .SignupForm.whiteWall p { color: #aaa; } .SignupForm.whiteSignupBanner { width: 310px; } .SignupForm.whiteSignupBanner p { color: #aaa; } .SignupForm.darkWall label span { color: #fff !important; } .SignupForm.darkWall .termOfServiceWrapper .outerTermsOfServiceFooter { color: #fff; } .SignupForm.darkWall .termOfServiceWrapper .outerTermsOfServiceFooter a { color: #fff; } .SignupForm.signupWall .mWebMultiStep { margin-top: -15px; } .SignupForm.signupWall .termOfServiceWrapper { margin-top: -15px; } .SignupForm.signupWall .standardForm { margin-top: -5px; } .SignupForm.signupWall .confirmedEmail { color: #000; } .SignupForm.signupWall .toggleStep { color: #000; text-shadow: none; } .SignupForm.signupWall .userRegisterButton { border-color: #fff; } .SignupForm.signupWall .signupButton { margin-top: -5px; } .SignupForm.signupWall .groupSeparator p::before { padding-right: 15px; } .SignupForm.signupWall .groupSeparator p::after { padding-left: 15px; } .SignupForm .buttonWrapper .register, .SignupForm .buttonWrapper .standardForm, .SignupForm .buttonWrapper .socialLogin, .SignupForm .buttonWrapper .multiStep { width: 100%; } .SignupForm .buttonWrapper .standardForm { background: transparent; } .SignupForm .buttonWrapper .standardForm .formInputWrapper { width: 100%; } .SignupForm .buttonWrapper .socialLogin { padding-left: 0; } .SignupForm .termOfServiceWrapper { margin-top: 15px; } .SignupForm .termOfServiceWrapper .outerTermsOfServiceFooter { color: #aaa; display: inline; font-size: 11px; font-weight: normal; width: 224px; } .SignupForm .termOfServiceWrapper .outerTermsOfServiceFooter a { color: #aaa; } .SignupForm .separator { border-bottom: #dedede 1px solid; margin: 10px auto; width: 110px; } .SignupForm .loginPrefix { color: #5a5a5a; font-weight: 500; } .SignupForm .loginButton { box-shadow: none; margin-top: 10px; width: 60%; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .UnauthBanner { background: rgba(0, 0, 0, 0.85); bottom: 0; color: #fff; left: 0; position: fixed; -webkit-transition: opacity .8s ease .8s; transition: opacity .8s ease .8s; width: 100%; z-index: 684; } /* desktop.scss */ .UnauthBanner { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-position: 50% 0; background-size: cover; border-radius: 0; display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: bold; height: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 0; } .UnauthBanner .closePlain { background: none; border-radius: none; box-shadow: none; margin-right: 24px; margin-top: 24px; position: absolute; right: 0; top: 0; } .UnauthBanner .closePlain em { background: url(https://s.pinimg.com/webapp/style/images/cta-cancel-1x-a986abb0.png) no-repeat; background-size: contain; height: 24px; width: 24px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UnauthBanner .closePlain em { background-image: url(https://s.pinimg.com/webapp/style/images/cta-cancel-2x-29e09f6e.png); } } .UnauthBanner .inspiredBackground { position: absolute; width: 100%; } .UnauthBanner .fullScreenSignup { display: none; } .UnauthBanner .fullScreenSignup .caption { margin-bottom: 40px; } .UnauthBanner .nextButton { height: 50px; } .UnauthBanner .textAndButtons { display: none; } .UnauthBanner.noBanner { height: 0; -webkit-transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); } .UnauthBanner.noBanner .textAndButtons { display: none !important; } .UnauthBanner.quarterScreenBanner { height: 250px; -webkit-transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); } .UnauthBanner.quarterScreenBannerShortVariant { height: 200px; -webkit-transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); } .UnauthBanner.halfScreenBanner { height: 60%; -webkit-transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); } .UnauthBanner.halfScreenBannerShortVariant { height: 40%; -webkit-transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); } .UnauthBanner.fullScreenBanner { height: 100%; -webkit-transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); } @media (min-width: 0) and (max-width: 999px) { .showingCloseup .UnauthBanner .centeredWithinWrapper.gridWidth { width: 750px; } } .showingCloseup .UnauthBanner .centeredWithinWrapper.gridWidth { width: 1000px; } .UnauthBanner .caption { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float: none; margin-top: -5px; width: auto; } .UnauthBanner .caption .title { font-size: 35px; line-height: 35px; } .UnauthBanner .caption .subtitle { font-size: 18px; line-height: 24px; margin: 5px auto 0; width: 500px; } .UnauthBanner .centeredWithinWrapper.gridWidth { margin: 0 auto; padding-bottom: 20px; text-align: center; } .UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons { margin: 0 auto; } .UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons { float: none; margin: 0 auto; padding-top: 12px; width: 236px; } .UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons .unauthNagButton { box-shadow: none; display: block; margin: 10px auto 0; width: 100%; } .UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons .bannerOpenInApp { height: 32px; padding: 0; width: 236px; } .UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons .Login.compact .socialLogin .btn { border-radius: 6px; border-width: 1px; box-shadow: none; font-size: 12px; width: 236px; } .UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons .Login.compact .socialLogin .btn span { font-size: 12px; } .UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons .Login.compact .socialLogin .btn.intButton.unAuthFacebookConnect { margin-right: 8px; width: 114px; } .UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons .Login.compact .formFooter { margin-top: 5px; } .UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons .Login.compact .formFooter .compactViewLogin { color: #fff; font-size: 12px; font-weight: normal; text-align: center; text-shadow: none; } .UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons .Login.compact .formFooter .compactViewLogin a { color: #fff; text-shadow: none; } .UnauthBannerMini { background: rgba(0, 0, 0, 0.85); border-radius: 0; bottom: 0; height: 0; position: fixed; -webkit-transition: opacity .8s ease .8s; transition: opacity .8s ease .8s; width: 100%; z-index: 684; } .UnauthBannerMini.quarterScreenBanner { height: 90px; -webkit-transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); } .UnauthBannerMini.fullScreenBanner { height: 100%; -webkit-transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); } .UnauthBannerMini .saveText { color: #fff; display: inline-block; font-size: 21px; font-weight: bold; margin-left: 20px; vertical-align: middle; } .UnauthBannerMini .saveText.noMargin { margin-left: 0; } .UnauthBannerMini .quarterBannerContainer { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; height: 90px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .UnauthBannerMini .pinThumbnail { background-size: cover; border-radius: 8px; display: inline-block; height: 70px; vertical-align: middle; width: 70px; } .UnauthBannerMini .continueLoginButton { font-size: 14px; margin: 0 10px; padding: 0 30px; width: 150px; } .UnauthBannerMini .basicLightGray:hover { background: #f8f8f8; } .UnauthBannerMini .continueSignupButton { font-size: 14px; margin: 0; width: 150px; } .UnauthBannerMini .fullScreenSignup { display: none; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .UnauthHomePage .homeUnauthNumbers, .UnauthHomePage .subtitle, .UnauthHomePage .emailLogin, .UnauthHomePage .loginButton, .UnauthHomePage .socialLogin { -webkit-transition: opacity .2s linear; transition: opacity .2s linear; } .UnauthHomePage .absolutePosition { position: absolute; } .UnauthHomePage.secondStep .homeUnauthNumbers, .UnauthHomePage.secondStep .subtitle, .UnauthHomePage.secondStep .emailLogin, .UnauthHomePage.secondStep .loginButton { opacity: 0 !important; pointer-events: none; } /* desktop.scss */ .UnauthHomePage { bottom: 0; left: 0; right: 0; top: 0; background: #fff; min-width: 750px; padding-bottom: 10px; position: fixed; z-index: 681; } .UnauthHomePage .homeUnauthNumbers { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; margin: 0 auto; position: absolute; text-align: center; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); top: 450px; width: 100%; z-index: -1; } .UnauthHomePage .homeUnauthNumbers .left, .UnauthHomePage .homeUnauthNumbers .right { display: inline-block; float: none; text-align: center; } .UnauthHomePage .homeUnauthNumbers .left { border-right: 2px solid #fff; margin-left: -4px; padding-left: 15px; padding-right: 20px; } .UnauthHomePage .homeUnauthNumbers .left .numbersWrapper { text-align: right; } .UnauthHomePage .homeUnauthNumbers .right { padding-left: 20px; padding-right: 15px; } .UnauthHomePage .homeUnauthNumbers .right .numbersWrapper { text-align: left; } .UnauthHomePage .homeUnauthNumbers .numbersTitle { font-family: Helvetica; font-size: 35px; font-weight: bold; display: inline-block; } .UnauthHomePage .homeUnauthNumbers .numbersSubtitle { display: inline-block; font-size: 12px; font-weight: bold; line-height: 120%; padding-left: 4px; padding-top: 3px; text-align: left; } .UnauthHomePage .inspiredLogo { width: 55px; height: 55px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -62px -234px no-repeat; border-radius: 100%; height: 56px; margin: -30px auto; width: 56px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UnauthHomePage .inspiredLogo { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -61px -231px; background-size: 399px 382px; } } .UnauthHomePage .hidden { display: none; } .UnauthHomePage .homeSignupForm { -webkit-transition: -webkit-transform .5s ease-in-out; transition: -webkit-transform .5s ease-in-out; transition: transform .5s ease-in-out; transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out; } .UnauthHomePage .homeSignupForm.login { -webkit-transform: translateY(-85px); transform: translateY(-85px); } .UnauthHomePage .inspiredWallLogin { -webkit-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } .UnauthHomePage .invisible { opacity: 0; pointer-events: none; } .UnauthHomePage .fbText { left: 0; position: absolute; right: 0; top: 210px; } .UnauthHomePage .fbText .lockIcon { background: url(https://s.pinimg.com/webapp/style/images/lock_small-1x-5dea8054.png) no-repeat; background-size: contain; height: 10px; width: 8px; display: inline-block; margin-right: 5px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UnauthHomePage .fbText .lockIcon { background-image: url(https://s.pinimg.com/webapp/style/images/lock_small-2x-a21ec38c.png); } } .UnauthHomePage .spacer { height: 20px; } .UnauthHomePage .inspiredSearchBackgroundContainer { background-color: #e6e8e3; height: 100%; opacity: 0; position: absolute; -webkit-transition: all 1s; transition: all 1s; visibility: hidden; width: 100%; } .UnauthHomePage .inspiredSearchBackgroundContainer .background { padding-bottom: 300px; } .UnauthHomePage .inspiredSearchBackgroundContainer.active { opacity: 1; visibility: visible; } .UnauthHomePage .inspiredSearchBackgroundContainer.animate_background .background { -webkit-animation: scrollBgGridLinks 35s linear; animation: scrollBgGridLinks 35s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .UnauthHomePage .inspiredSearchAboutTermsWrapper { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-animation: scrollFooterWithBgGrid 35s linear; animation: scrollFooterWithBgGrid 35s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; bottom: 0; left: 0; position: absolute; text-align: center; width: 100%; } .UnauthHomePage .inspiredSearchDialog { min-height: 375px; } .UnauthHomePage .inspiredSearchDialog .step2 .personalizeField { color: #fff !important; } .UnauthHomePage .inspiredSearchDialog .step2 .learnMore { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff !important; } .UnauthHomePage .inspiredSearchContentWrapper { border-radius: 6px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); left: 50%; margin-left: -358px; margin-top: -292px; max-height: 420px; min-height: 420px; padding-bottom: 10px; position: absolute; top: 58%; width: 716px; z-index: 1; } .UnauthHomePage .inspiredSearchContentWrapper .outerTermsOfServiceFooter { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: rgba(255, 255, 255, 0.9); display: block; font-size: 11px; line-height: 150%; margin: 10px auto; text-align: center; text-shadow: 0 1px rgba(0, 0, 0, 0.18); width: 272px; } .UnauthHomePage .inspiredSearchContentWrapper.loginInspiredWall { background-color: #f2f2f0; margin-left: -241px; width: 480px; } .UnauthHomePage .inspiredSearchContentWrapper.loginInspiredWall .inspiredSearchPinCaption { color: #383838; } .UnauthHomePage .inspiredSearchContentWrapper.loginInspiredWall .inspiredSearchPinCaption .title { text-shadow: none; } .UnauthHomePage .inspiredSearchContentWrapper.loginInspiredWall .termOfServiceWrapper { color: #383838; text-shadow: none; } .UnauthHomePage .inspiredSearchContentWrapper.loginInspiredWall .termOfServiceWrapper a { color: #383838; } .UnauthHomePage .inspiredSearchContentContainer { border-radius: 6px; } .UnauthHomePage .inspiredSearchPinCaption { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; margin-top: 55px; text-align: center; width: auto; } .UnauthHomePage .inspiredSearchPinCaption .title { font-size: 27px; font-weight: bold; letter-spacing: -1px; margin-top: 50px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.58); } .UnauthHomePage .inspiredSearchPinCaption .subtitle { font-size: 16px; font-weight: 500; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.58); } .UnauthHomePage .inspiredSearchRegistrationContainer { margin-top: 30px; text-align: center; width: auto; } .UnauthHomePage .emailLogin { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #fdfdfd; background: -webkit-linear-gradient(#fff, #fafafa); background: linear-gradient(#fff, #fafafa); border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.48), 0 1px 3px rgba(0, 0, 0, 0.18); color: #5f5f5f; font-size: 13px; padding: 9px 15px; position: absolute; right: 11px; top: 11px; } .UnauthHomePage .emailLogin:hover { box-shadow: 0 0 2px rgba(0, 0, 0, 0.48), 0 1px 3px rgba(0, 0, 0, 0.18); } .UnauthHomePage .termOfServiceWrapper { color: rgba(255, 255, 255, 0.9); height: 40px; line-height: 150%; margin: -7px auto; position: relative; text-align: center; text-shadow: 0 1px rgba(0, 0, 0, 0.18); width: 272px; } .UnauthHomePage .termOfServiceWrapper .signupFooter { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; -webkit-transition: opacity .2s linear; transition: opacity .2s linear; } .UnauthHomePage .termOfServiceWrapper .signupFooter a { color: rgba(255, 255, 255, 0.9); font-weight: bold; } .UnauthHomePage .pinitLanding { min-height: 445px; } .UnauthHomePage .register .outerTermsOfServiceFooter { color: #bbb; } .UnauthHomePage .register .outerTermsOfServiceFooter a { color: #bbb; font-weight: bold; } .UnauthHomePage.lite .inspiredSearchDialog .step2 .gender { color: #000 !important; } .UnauthHomePage.lite .inspiredSearchContentWrapper { box-shadow: none; } .UnauthHomePage.lite .inspiredSearchPinCaption { color: #000; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); } .UnauthHomePage.lite .inspiredSearchPinCaption .title { text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); } .UnauthHomePage.lite .inspiredSearchPinCaption .subtitle { text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); } .UnauthHomePage .interestsWrapper { -webkit-animation: scrollFooterWithBgGrid 35s linear; animation: scrollFooterWithBgGrid 35s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; background-color: #fff; bottom: -30px; height: 30px; left: 0; position: absolute; text-align: center; width: 100%; } .UnauthHomePage .interestsWrapper .gradient { background-color: #cccccc; background: -webkit-linear-gradient(#999, #fff); background: linear-gradient(#999, #fff); height: 8px; } .UnauthHomePage .interestsWrapper span, .UnauthHomePage .interestsWrapper a { font-size: 10px; font-weight: bold; padding: 0 3px; position: relative; } .UnauthHomePage .interestsWrapper span { color: #999; } .UnauthHomePage .interestsWrapper a { color: #333; } .UnauthHomePage.pinitPopup .inspiredSearchBackgroundContainer.animate_background .background { -webkit-animation-name: scrollBgGrid !important; animation-name: scrollBgGrid !important; } .UnauthHomePage.pinitPopup .inspiredSearchAboutTermsWrapper, .UnauthHomePage.pinitPopup .interestsWrapper { display: none; } .UnauthHomePage.register .inspiredSearchContentWrapper { background-color: #fff; margin: -280px 0 0 -300px; min-height: 410px; width: 600px; } .UnauthHomePage.register .inspiredSearchContentWrapper .homeUnauthNumbers { color: #999; } .UnauthHomePage.register .inspiredSearchContentWrapper .homeUnauthNumbers .left { border-color: #999; } .UnauthHomePage.register .inspiredSearchPinCaption { margin: 5px 0 -5px; } .UnauthHomePage.register .inspiredSearchPinCaption .title { font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-weight: bold; font-size: 28px; } .UnauthHomePage.register .inspiredSearchPinCaption .fbText { top: 200px; } .UnauthHomePage.inspired_banner { background: none; } .UnauthHomePage.inspired_banner .inspiredSearchBackgroundContainer, .UnauthHomePage.inspired_banner .inspiredSearchAboutTermsWrapper { display: none; } .UnauthHomePage.whiteWall .inspiredSearchContentWrapper { background-color: #fff; } .UnauthHomePage.whiteWall .inspiredSearchContentWrapper .termOfServiceWrapper { color: #aaa; } .UnauthHomePage.whiteWall .inspiredSearchContentWrapper .termOfServiceWrapper a { color: #aaa; } .UnauthHomePage.whiteWall .inspiredSearchContentWrapper .outerTermsOfServiceFooter { color: #000; text-shadow: none; } .UnauthHomePage.whiteWall .inspiredSearchContentWrapper .outerTermsOfServiceFooter a { color: #000; } .UnauthHomePage.whiteWall .inspiredSearchContentWrapper .background { background-position-y: -50%; } .UnauthHomePage.whiteWall .inspiredSearchContentContainer { border-bottom-left-radius: 0; border-bottom-right-radius: 0; height: 125px; } .UnauthHomePage.whiteWall .inspiredSearchRegistrationContainer.focused { background-color: #f5f5f5; } .UnauthHomePage.whiteWall .inspiredSearchRegistrationContainer::after { content: none; } .UnauthHomePage.whiteWall .inspiredFormHeader { color: #505050; text-shadow: none; } .UnauthHomePage.whiteWall .groupSeparator { color: #a0a0a0 !important; } .UnauthHomePage.whiteWall .step1.whiteWall .step1Bottom input { background: #fff; box-shadow: 0 0 3px #cdcdcd !important; } .UnauthHomePage.whiteWall .step1.whiteWall .step1Bottom input:focus { box-shadow: 0 0 3px #27b8f4 !important; } .UnauthHomePage.tall .inspiredSearchContentWrapper { max-height: 450px; min-height: 450px; top: 52%; } .UnauthHomePage.tall .homeUnauthNumbers, .UnauthHomePage.tall .appInstallButtons { top: 480px; } .UnauthHomePage .signupContinueAsABusinessBar { background: #efefef; border-radius: 0 0 6px 6px; bottom: 0; left: 0; position: absolute; right: 0; } .UnauthHomePage .signupContinueAsABusinessBar .continueAsABusinessButton { font-size: 12px; line-height: 26px; } .UnauthLoggedOutHomePage .inspiredLogo { width: 55px; height: 55px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -62px -234px no-repeat; border-radius: 100%; height: 56px; margin: 20px auto; width: 56px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UnauthLoggedOutHomePage .inspiredLogo { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -61px -231px; background-size: 399px 382px; } } .UnauthLoggedOutHomePage .design { clear: both; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .UnauthLoggedOutHomePage .design .signupContentWrapper { display: inline-block; text-align: center; vertical-align: middle; } .UnauthLoggedOutHomePage .design hgroup { bottom: 58%; position: absolute; right: 45%; } @media (max-aspect-ratio: 4 / 3), (max-width: 900px) { .UnauthLoggedOutHomePage .design .main { display: inline-block; vertical-align: middle; } .UnauthLoggedOutHomePage .design hgroup { margin-bottom: 40px; position: static; text-align: center; } .UnauthLoggedOutHomePage .design .backgroundDesign { background: url(https://s.pinimg.com/webapp/style/images/auth_logged_out_home_03-1x-199cebbb.jpg) no-repeat; background-size: contain; height: 799px; width: 1355px; background-position: 50% 50%; background-size: cover !important; height: 100%; position: relative; text-align: center; width: calc(100% - 360px); } } @media (max-aspect-ratio: 4 / 3) and (-webkit-min-device-pixel-ratio: 1.5), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 1.5), (max-aspect-ratio: 4 / 3) and (min-resolution: 144dpi), (max-width: 900px) and (min-resolution: 144dpi) { .UnauthLoggedOutHomePage .design .backgroundDesign { background-image: url(https://s.pinimg.com/webapp/style/images/auth_logged_out_home_03-2x-d8378127.jpg); } } @media (max-aspect-ratio: 4 / 3), (max-width: 900px) { .UnauthLoggedOutHomePage .design .backgroundDesign::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .UnauthLoggedOutHomePage .design .android { background: url(https://s.pinimg.com/webapp/style/images/web-auth_logged_out_home-vert_shop-1x-40af0403.png) no-repeat; background-size: contain; height: 482px; width: 266px; margin: 0 auto; } } @media (max-aspect-ratio: 4 / 3) and (-webkit-min-device-pixel-ratio: 1.5), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 1.5), (max-aspect-ratio: 4 / 3) and (min-resolution: 144dpi), (max-width: 900px) and (min-resolution: 144dpi) { .UnauthLoggedOutHomePage .design .android { background-image: url(https://s.pinimg.com/webapp/style/images/web-auth_logged_out_home-vert_shop-2x-7b9289ac.png); } } .UnauthLoggedOutHomePage .backgroundDesign { background: url(https://s.pinimg.com/webapp/style/images/web-auth_logged_out_home_shop-1x-f7182836.jpg) no-repeat; background-size: contain; height: 800px; width: 1082px; background-position: 100% 50%; background-size: cover !important; height: 100%; min-width: 360px; position: relative; width: calc(100% - 360px); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UnauthLoggedOutHomePage .backgroundDesign { background-image: url(https://s.pinimg.com/webapp/style/images/web-auth_logged_out_home_shop-2x-33215d67.jpg); } } .UnauthLoggedOutHomePage .sidePane { background: #fff; height: 100%; position: fixed; right: 0; text-align: center; top: 0; width: 360px; } .UnauthLoggedOutHomePage .sidePane::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .UnauthLoggedOutHomePage h1, .UnauthLoggedOutHomePage h2 { color: #fff; } .UnauthLoggedOutHomePage h1 { font-size: 48px; line-height: 48px; margin-bottom: 10px; } .UnauthLoggedOutHomePage h2 { font-weight: normal; } .UnauthLoggedOutHomePage .loggedOutHomePageLogin { display: inline-block; font-size: 15px; margin-top: 20px; padding: 10px 50px; } .UnauthLoggedOutHomePage.secondStep .loggedOutHomePageLogin { display: none; } .UnauthLoggedOutHomePage .inlineEmailForm .step1 .firstStepTooltip.errorTooltip, .UnauthLoggedOutHomePage .inlineEmailForm .step1 .secondStepTooltip.errorTooltip, .UnauthLoggedOutHomePage .inlineEmailForm .step2 .firstStepTooltip.errorTooltip, .UnauthLoggedOutHomePage .inlineEmailForm .step2 .secondStepTooltip.errorTooltip { left: auto; right: 295px; } .UnauthLoggedOutHomePage .inlineEmailForm .step1 .firstStepTooltip.errorTooltip::before, .UnauthLoggedOutHomePage .inlineEmailForm .step1 .firstStepTooltip.errorTooltip::after, .UnauthLoggedOutHomePage .inlineEmailForm .step1 .secondStepTooltip.errorTooltip::before, .UnauthLoggedOutHomePage .inlineEmailForm .step1 .secondStepTooltip.errorTooltip::after, .UnauthLoggedOutHomePage .inlineEmailForm .step2 .firstStepTooltip.errorTooltip::before, .UnauthLoggedOutHomePage .inlineEmailForm .step2 .firstStepTooltip.errorTooltip::after, .UnauthLoggedOutHomePage .inlineEmailForm .step2 .secondStepTooltip.errorTooltip::before, .UnauthLoggedOutHomePage .inlineEmailForm .step2 .secondStepTooltip.errorTooltip::after { border-width: 8px 0 8px 10px; right: -10px; } .UnauthLoggedOutHomePage .inlineEmailForm .step1 .firstStepTooltip.errorTooltip::after, .UnauthLoggedOutHomePage .inlineEmailForm .step1 .secondStepTooltip.errorTooltip::after, .UnauthLoggedOutHomePage .inlineEmailForm .step2 .firstStepTooltip.errorTooltip::after, .UnauthLoggedOutHomePage .inlineEmailForm .step2 .secondStepTooltip.errorTooltip::after { margin-right: 1px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .UserRegister { position: relative; } .UserRegister .step2, .UserRegister .step2Facebook { opacity: 0; position: relative; } .UserRegister .genderHeading { color: #000; margin-bottom: 7px; } .UserRegister .step1, .UserRegister .step2 { position: absolute; -webkit-transition: opacity .2s ease; transition: opacity .2s ease; } .UserRegister .step2 { margin-top: -50px; pointer-events: none; } .UserRegister.secondStep .step1 { opacity: 0; pointer-events: none; } .UserRegister.secondStep .step2 { opacity: 1; pointer-events: all; } .UserRegister .infoButton { width: 14px; height: 14px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -263px no-repeat; cursor: pointer; display: inline-block; filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.3)); filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.3)); vertical-align: middle; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserRegister .infoButton { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -207px -201px; background-size: 249px 231px; } } .UserRegister .popupContainer { display: inline; position: relative; } .UserRegister.inline { display: block; } .UserRegister.inline .hidden { display: none; } .UserRegister.inline .personalizeField { float: left; padding-top: 15px; } .UserRegister.inline .pinitLanding { display: inline-block; } .UserRegister.inline .standardForm { display: inline-block; height: 160px; margin: 0 auto; max-width: 100%; } .UserRegister.inline .standardForm.grayWall { background-color: #eee !important; margin: auto; } .UserRegister.inline .inlineEmailForm { color: #fff; } .UserRegister.inline .step1 .groupSeparatorWrapper { -webkit-transition: opacity .5s linear; transition: opacity .5s linear; } .UserRegister.inline .step1 .groupSeparatorWrapper .groupSeparator { color: rgba(0, 0, 0, 0.9); display: none; font-weight: bold; margin-top: -13px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .UserRegister.inline .step1 .groupSeparatorWrapper .groupSeparator p { margin-bottom: 10px; overflow: hidden; text-align: center; } .UserRegister.inline .step1 .groupSeparatorWrapper .groupSeparator p::before, .UserRegister.inline .step1 .groupSeparatorWrapper .groupSeparator p::after { background: rgba(0, 0, 0, 0.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 38%; } .UserRegister.inline .step1 .groupSeparatorWrapper .groupSeparator p::before { margin-right: 10px; } .UserRegister.inline .step1 .groupSeparatorWrapper .groupSeparator p::after { margin-left: 10px; } .UserRegister.inline .step1.multiStep .groupSeparator { display: block; } .UserRegister.inline .step1.multiStep .step1Bottom { display: block; position: relative; } .UserRegister.inline .step1 .emailFieldRedesign { margin-bottom: 7px; } .UserRegister.inline .step1 .signupButton { padding-top: 10px; } .UserRegister.inline .step1 .signupButton button { box-shadow: none; } .UserRegister.inline .step1 .step1Bottom { display: none; } .UserRegister.inline .step1 .termsOfServiceFooter { color: #333; margin-top: 8px; text-align: left; } .UserRegister.inline .step2.grayWall .confirmedEmail, .UserRegister.inline .step2.grayWall .toggleStep, .UserRegister.inline .step2Facebook.grayWall .confirmedEmail, .UserRegister.inline .step2Facebook.grayWall .toggleStep { color: #000; } .UserRegister.inline .step2.whiteWall .confirmedEmail, .UserRegister.inline .step2.whiteWall .toggleStep, .UserRegister.inline .step2.flatWhiteWall .confirmedEmail, .UserRegister.inline .step2.flatWhiteWall .toggleStep, .UserRegister.inline .step2Facebook.whiteWall .confirmedEmail, .UserRegister.inline .step2Facebook.whiteWall .toggleStep, .UserRegister.inline .step2Facebook.flatWhiteWall .confirmedEmail, .UserRegister.inline .step2Facebook.flatWhiteWall .toggleStep { color: #000; text-shadow: none; } .UserRegister.inline .step2 .errorTooltip.nameError, .UserRegister.inline .step2 .errorTooltip.ageError, .UserRegister.inline .step2Facebook .errorTooltip.nameError, .UserRegister.inline .step2Facebook .errorTooltip.ageError { top: 27px; } .UserRegister.inline .step2 .confirmedEmail, .UserRegister.inline .step2Facebook .confirmedEmail { margin-bottom: 10px; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); } .UserRegister.inline .step2 .toggleStep, .UserRegister.inline .step2Facebook .toggleStep { font-size: 14px; font-weight: 600; margin-top: 20px; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); } .UserRegister.inline .step2 .toggleStep span:hover, .UserRegister.inline .step2Facebook .toggleStep span:hover { cursor: pointer; } .UserRegister.inline .step2 .continueButton, .UserRegister.inline .step2Facebook .continueButton { box-shadow: none; width: 100%; } .UserRegister.inline .step2 .genderFormItem, .UserRegister.inline .step2Facebook .genderFormItem { display: block; margin-left: 5px; margin-right: 5px; } .UserRegister.inline .step2 .genderFormItem .formInputWrapper, .UserRegister.inline .step2Facebook .genderFormItem .formInputWrapper { float: left; padding-bottom: 10px; } .UserRegister.inline .step2 .genderFormItem .formInputWrapper .fieldsetWrapper, .UserRegister.inline .step2Facebook .genderFormItem .formInputWrapper .fieldsetWrapper { display: inline-block; } .UserRegister.inline .step2 .genderFormItem .formInlineCheckedSet, .UserRegister.inline .step2Facebook .genderFormItem .formInlineCheckedSet { padding-top: 11px; } .UserRegister.inline .step2 .genderFormItem .formInlineCheckedSet li, .UserRegister.inline .step2Facebook .genderFormItem .formInlineCheckedSet li { margin-left: 0; margin-right: 10px; } .UserRegister.inline .step2 label span, .UserRegister.inline .step2Facebook label span { color: #000; font-weight: bold; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); } .UserRegister.inline .step2 .divider, .UserRegister.inline .step2Facebook .divider { margin-bottom: 6px; margin-top: 18px; } .UserRegister.inline .step2 .divider p, .UserRegister.inline .step2Facebook .divider p { bottom: 48px; left: 0; margin: 0 auto; opacity: .4; overflow: hidden; position: absolute; right: 0; text-align: center; width: 60%; } .UserRegister.inline .step2 .divider p::before, .UserRegister.inline .step2 .divider p::after, .UserRegister.inline .step2Facebook .divider p::before, .UserRegister.inline .step2Facebook .divider p::after { background: #000; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); content: ""; display: inline-block; height: 1px; opacity: .4; position: relative; vertical-align: middle; width: 38%; } .UserRegister.inline .step2 .businessField, .UserRegister.inline .step2Facebook .businessField { font-size: 16px; font-weight: normal; height: 30px; margin-bottom: 5px; width: 100%; } .UserRegister.inline .step2 .businessField.linkGroup, .UserRegister.inline .step2Facebook .businessField.linkGroup { margin-top: 80px; } .UserRegister.inline .step2 .businessField.linkGroup .businessFieldPrompt, .UserRegister.inline .step2Facebook .businessField.linkGroup .businessFieldPrompt { font-size: 14px; margin: -45px 0 10px; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); } .UserRegister.inline .step2 .businessField em, .UserRegister.inline .step2Facebook .businessField em { width: 23px; height: 23px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -91px -342px no-repeat; left: 227px; margin-top: -1px; position: absolute; z-index: 100; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserRegister.inline .step2 .businessField em, .UserRegister.inline .step2Facebook .businessField em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -378px -55px; background-size: 428px 427px; } } .UserRegister.inline .step2 .businessField em.checked, .UserRegister.inline .step2Facebook .businessField em.checked { width: 23px; height: 23px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -116px -342px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserRegister.inline .step2 .businessField em.checked, .UserRegister.inline .step2Facebook .businessField em.checked { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -378px -31px; background-size: 428px 427px; } } .UserRegister.inline .step2 .businessField .businessSignupMulti.checkboxGroup, .UserRegister.inline .step2Facebook .businessField .businessSignupMulti.checkboxGroup { float: left; margin-left: 30px; } .UserRegister.inline .step1 button, .UserRegister.inline .step2 button, .UserRegister.inline .step2Facebook button { box-shadow: none; width: 100%; } .UserRegister.inline .step1 input:not([type="radio"]), .UserRegister.inline .step2 input:not([type="radio"]), .UserRegister.inline .step2Facebook input:not([type="radio"]) { background: #fff; font-weight: bold; padding: 10px; } .UserRegister.inline .step1 input:not([type="radio"]).hasError, .UserRegister.inline .step1 input:not([type="radio"]).hasWarning, .UserRegister.inline .step2 input:not([type="radio"]).hasError, .UserRegister.inline .step2 input:not([type="radio"]).hasWarning, .UserRegister.inline .step2Facebook input:not([type="radio"]).hasError, .UserRegister.inline .step2Facebook input:not([type="radio"]).hasWarning { background: #fce8e8; border-color: #bd081c; box-shadow: 0 0 6px rgba(255, 0, 0, 0.35); position: relative; } .UserRegister.inline .step1 input[type="radio"], .UserRegister.inline .step2 input[type="radio"], .UserRegister.inline .step2Facebook input[type="radio"] { padding: 10px; } .UserRegister.inline .step1 .formErrorMessage, .UserRegister.inline .step1 .formWarningMessage, .UserRegister.inline .step2 .formErrorMessage, .UserRegister.inline .step2 .formWarningMessage, .UserRegister.inline .step2Facebook .formErrorMessage, .UserRegister.inline .step2Facebook .formWarningMessage { display: none; } .UserRegister.inline .step1 .genderReadout, .UserRegister.inline .step2 .genderReadout, .UserRegister.inline .step2Facebook .genderReadout { color: #000; font-size: 16px; font-weight: bold; margin-bottom: 5px; margin-top: 5px; max-width: 268px; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); } .UserRegister.inline .step1 .genderReadout em.removeCustomGender, .UserRegister.inline .step2 .genderReadout em.removeCustomGender, .UserRegister.inline .step2Facebook .genderReadout em.removeCustomGender { width: 15px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -221px -325px no-repeat; float: right; margin-left: -15px; position: relative; top: 3px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserRegister.inline .step1 .genderReadout em.removeCustomGender, .UserRegister.inline .step2 .genderReadout em.removeCustomGender, .UserRegister.inline .step2Facebook .genderReadout em.removeCustomGender { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -151px -150px; background-size: 399px 382px; } } .UserRegister.inline .step1 .genderReadout span, .UserRegister.inline .step2 .genderReadout span, .UserRegister.inline .step2Facebook .genderReadout span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 210px; } .UserRegister.inline .step1 .errorTooltip, .UserRegister.inline .step2 .errorTooltip, .UserRegister.inline .step2Facebook .errorTooltip { background: #fff; border-radius: 6px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.32); color: #000; display: none; font-style: normal; font-weight: normal; left: 282px; line-height: 150%; padding: 8px 14px; position: absolute; text-align: left; top: 0; width: 215px; z-index: 1000; } .UserRegister.inline .step1 .errorTooltip .leftToBox, .UserRegister.inline .step2 .errorTooltip .leftToBox, .UserRegister.inline .step2Facebook .errorTooltip .leftToBox { right: 282px; } .UserRegister.inline .step1 .errorTooltip .leftToBox::before, .UserRegister.inline .step2 .errorTooltip .leftToBox::before, .UserRegister.inline .step2Facebook .errorTooltip .leftToBox::before { border-width: 8px 0 8px 10px; } .UserRegister.inline .step1 .errorTooltip .leftToBox::after, .UserRegister.inline .step2 .errorTooltip .leftToBox::after, .UserRegister.inline .step2Facebook .errorTooltip .leftToBox::after { border-width: 8px 0 8px 10px; } .UserRegister.inline .step1 .errorTooltip.belowBox, .UserRegister.inline .step2 .errorTooltip.belowBox, .UserRegister.inline .step2Facebook .errorTooltip.belowBox { left: -372px; position: absolute; top: 25px; width: 375px; z-index: 999999999; } .UserRegister.inline .step1 .errorTooltip.belowBox .customGenderFields, .UserRegister.inline .step2 .errorTooltip.belowBox .customGenderFields, .UserRegister.inline .step2Facebook .errorTooltip.belowBox .customGenderFields { margin-top: 5px; text-align: center; } .UserRegister.inline .step1 .errorTooltip.belowBox .customGenderFields .Button, .UserRegister.inline .step2 .errorTooltip.belowBox .customGenderFields .Button, .UserRegister.inline .step2Facebook .errorTooltip.belowBox .customGenderFields .Button { display: inline-block; height: auto; width: auto; } .UserRegister.inline .step1 .errorTooltip.belowBox .customGenderFields .customGender, .UserRegister.inline .step2 .errorTooltip.belowBox .customGenderFields .customGender, .UserRegister.inline .step2Facebook .errorTooltip.belowBox .customGenderFields .customGender { display: inline-block; width: 220px; } .UserRegister.inline .step1 .errorTooltip.belowBox::before, .UserRegister.inline .step2 .errorTooltip.belowBox::before, .UserRegister.inline .step2Facebook .errorTooltip.belowBox::before { border-color: rgba(0, 0, 0, 0.48) transparent; border-width: 0 10px 8px 8px; right: 15px; top: 0; } .UserRegister.inline .step1 .errorTooltip.belowBox::after, .UserRegister.inline .step2 .errorTooltip.belowBox::after, .UserRegister.inline .step2Facebook .errorTooltip.belowBox::after { border-color: #fff transparent; border-width: 0 10px 8px 8px; right: 15px; top: 0; } .UserRegister.inline .step1 .errorTooltip.passwordError, .UserRegister.inline .step2 .errorTooltip.passwordError, .UserRegister.inline .step2Facebook .errorTooltip.passwordError { top: 44px; } .UserRegister.inline .step1 .errorTooltip::before, .UserRegister.inline .step1 .errorTooltip::after, .UserRegister.inline .step2 .errorTooltip::before, .UserRegister.inline .step2 .errorTooltip::after, .UserRegister.inline .step2Facebook .errorTooltip::before, .UserRegister.inline .step2Facebook .errorTooltip::after { border-style: solid; content: ""; display: block; margin-top: -8px; position: absolute; right: 100%; top: 17px; width: 0; } .UserRegister.inline .step1 .errorTooltip::before, .UserRegister.inline .step2 .errorTooltip::before, .UserRegister.inline .step2Facebook .errorTooltip::before { border-color: transparent rgba(0, 0, 0, 0.48); border-width: 8px 10px 8px 0; z-index: 1; } .UserRegister.inline .step1 .errorTooltip::after, .UserRegister.inline .step2 .errorTooltip::after, .UserRegister.inline .step2Facebook .errorTooltip::after { border-color: transparent #fff; border-width: 8px 10px 8px 0; margin-right: -1px; z-index: 1; } .UserRegister.inline .step1 .signupButton .Button.large, .UserRegister.inline .step1 .signup.large, .UserRegister.inline .step2 .signupButton .Button.large, .UserRegister.inline .step2 .signup.large, .UserRegister.inline .step2Facebook .signupButton .Button.large, .UserRegister.inline .step2Facebook .signup.large { padding: 0 18px; } .UserRegister.inline .step1 .formInlineCheckedSet label span, .UserRegister.inline .step1 .formCheckedSet label span, .UserRegister.inline .step2 .formInlineCheckedSet label span, .UserRegister.inline .step2 .formCheckedSet label span, .UserRegister.inline .step2Facebook .formInlineCheckedSet label span, .UserRegister.inline .step2Facebook .formCheckedSet label span { font-size: 16px; } .UserRegister.inline .step1 .personalizeField, .UserRegister.inline .step2 .personalizeField, .UserRegister.inline .step2Facebook .personalizeField { color: #000; font-size: 14px; text-shadow: none; } .UserRegister.inline .step1 .learnMore, .UserRegister.inline .step2 .learnMore, .UserRegister.inline .step2Facebook .learnMore { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #000; font-size: 14px; margin: 0; text-shadow: none; } .UserRegister.inline .step1 .passwordFieldRedesign input, .UserRegister.inline .step1 .ageFieldRedesign input, .UserRegister.inline .step1 .emailFieldRedesign input, .UserRegister.inline .step1 .nameFieldRedesign input, .UserRegister.inline .step2 .passwordFieldRedesign input, .UserRegister.inline .step2 .ageFieldRedesign input, .UserRegister.inline .step2 .emailFieldRedesign input, .UserRegister.inline .step2 .nameFieldRedesign input, .UserRegister.inline .step2Facebook .passwordFieldRedesign input, .UserRegister.inline .step2Facebook .ageFieldRedesign input, .UserRegister.inline .step2Facebook .emailFieldRedesign input, .UserRegister.inline .step2Facebook .nameFieldRedesign input { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border: 0; border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.32); font-weight: bold; height: 38px; } .UserRegister.inline .step1 .passwordFieldRedesign em, .UserRegister.inline .step1 .ageFieldRedesign em, .UserRegister.inline .step1 .emailFieldRedesign em, .UserRegister.inline .step1 .nameFieldRedesign em, .UserRegister.inline .step2 .passwordFieldRedesign em, .UserRegister.inline .step2 .ageFieldRedesign em, .UserRegister.inline .step2 .emailFieldRedesign em, .UserRegister.inline .step2 .nameFieldRedesign em, .UserRegister.inline .step2Facebook .passwordFieldRedesign em, .UserRegister.inline .step2Facebook .ageFieldRedesign em, .UserRegister.inline .step2Facebook .emailFieldRedesign em, .UserRegister.inline .step2Facebook .nameFieldRedesign em { width: 14px; height: 14px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -40px no-repeat; display: none; position: absolute; z-index: 100; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserRegister.inline .step1 .passwordFieldRedesign em, .UserRegister.inline .step1 .ageFieldRedesign em, .UserRegister.inline .step1 .emailFieldRedesign em, .UserRegister.inline .step1 .nameFieldRedesign em, .UserRegister.inline .step2 .passwordFieldRedesign em, .UserRegister.inline .step2 .ageFieldRedesign em, .UserRegister.inline .step2 .emailFieldRedesign em, .UserRegister.inline .step2 .nameFieldRedesign em, .UserRegister.inline .step2Facebook .passwordFieldRedesign em, .UserRegister.inline .step2Facebook .ageFieldRedesign em, .UserRegister.inline .step2Facebook .emailFieldRedesign em, .UserRegister.inline .step2Facebook .nameFieldRedesign em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -402px -211px; background-size: 428px 427px; } } .UserRegister.inline .step1 .emailFieldRedesign em, .UserRegister.inline .step2 .emailFieldRedesign em, .UserRegister.inline .step2Facebook .emailFieldRedesign em { right: 10px; top: 12px; } .UserRegister.inline .step1 .passwordFieldRedesign em, .UserRegister.inline .step2 .passwordFieldRedesign em, .UserRegister.inline .step2Facebook .passwordFieldRedesign em { right: 10px; top: 57px; } .UserRegister.inline .step1 .nameFieldRedesign, .UserRegister.inline .step2 .nameFieldRedesign, .UserRegister.inline .step2Facebook .nameFieldRedesign { float: left; width: 202px; } .UserRegister.inline .step1 .nameFieldRedesign em, .UserRegister.inline .step2 .nameFieldRedesign em, .UserRegister.inline .step2Facebook .nameFieldRedesign em { right: 80px; top: 36px; } .UserRegister.inline .step1 .ageFieldRedesign, .UserRegister.inline .step2 .ageFieldRedesign, .UserRegister.inline .step2Facebook .ageFieldRedesign { display: block; margin-left: 210px; } .UserRegister.inline .step1 .ageFieldRedesign em, .UserRegister.inline .step2 .ageFieldRedesign em, .UserRegister.inline .step2Facebook .ageFieldRedesign em { right: 8px; top: 36px; } .UserRegister.inline .step1.grayWall, .UserRegister.inline .step2.grayWall, .UserRegister.inline .step2Facebook.grayWall { background-color: #eee; } .UserRegister.inline .step1.grayWall input:not([type="radio"]), .UserRegister.inline .step2.grayWall input:not([type="radio"]), .UserRegister.inline .step2Facebook.grayWall input:not([type="radio"]) { background-color: #fff !important; border: solid 1px #ccc; box-shadow: none; height: auto; } .UserRegister.inline .step1.grayWall input:not([type="radio"]):active, .UserRegister.inline .step1.grayWall input:not([type="radio"]):focus, .UserRegister.inline .step2.grayWall input:not([type="radio"]):active, .UserRegister.inline .step2.grayWall input:not([type="radio"]):focus, .UserRegister.inline .step2Facebook.grayWall input:not([type="radio"]):active, .UserRegister.inline .step2Facebook.grayWall input:not([type="radio"]):focus { background: #fff !important; } .UserRegister.inline .step1.grayWall input[type="radio"], .UserRegister.inline .step2.grayWall input[type="radio"], .UserRegister.inline .step2Facebook.grayWall input[type="radio"] { height: auto; } .UserRegister.inline .step1.grayWall .emailFieldRedesign em, .UserRegister.inline .step2.grayWall .emailFieldRedesign em, .UserRegister.inline .step2Facebook.grayWall .emailFieldRedesign em { right: 14px !important; top: 14px !important; } .UserRegister.inline .step1.grayWall .passwordFieldRedesign em, .UserRegister.inline .step2.grayWall .passwordFieldRedesign em, .UserRegister.inline .step2Facebook.grayWall .passwordFieldRedesign em { right: 14px !important; top: 21pxauto !important; } .UserRegister.inline .step1.grayWall .businessField.linkGroup, .UserRegister.inline .step2.grayWall .businessField.linkGroup, .UserRegister.inline .step2Facebook.grayWall .businessField.linkGroup { height: auto; margin: 15px 0 0; } .UserRegister.inline .step1.grayWall .businessField.linkGroup .businessSignupMulti, .UserRegister.inline .step2.grayWall .businessField.linkGroup .businessSignupMulti, .UserRegister.inline .step2Facebook.grayWall .businessField.linkGroup .businessSignupMulti { color: #333; } .UserRegister.inline .step1.grayWall .genderFormItem .formInputWrapper, .UserRegister.inline .step2.grayWall .genderFormItem .formInputWrapper, .UserRegister.inline .step2Facebook.grayWall .genderFormItem .formInputWrapper { padding: 15px 0; } .UserRegister.inline .step1.grayWall .genderFormItem .formInputWrapper .formInlineCheckedSet, .UserRegister.inline .step2.grayWall .genderFormItem .formInputWrapper .formInlineCheckedSet, .UserRegister.inline .step2Facebook.grayWall .genderFormItem .formInputWrapper .formInlineCheckedSet { padding-top: 0; } .UserRegister.inline .step1.grayWall .divider p, .UserRegister.inline .step2.grayWall .divider p, .UserRegister.inline .step2Facebook.grayWall .divider p { bottom: 0; position: relative; width: auto; } .UserRegister.inline .step1.grayWall .groupSeparator, .UserRegister.inline .step2.grayWall .groupSeparator, .UserRegister.inline .step2Facebook.grayWall .groupSeparator { color: #000; } .UserRegister.inline .step1.whiteWall input, .UserRegister.inline .step1.flatWhiteWall input, .UserRegister.inline .step2.whiteWall input, .UserRegister.inline .step2.flatWhiteWall input, .UserRegister.inline .step2Facebook.whiteWall input, .UserRegister.inline .step2Facebook.flatWhiteWall input { box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset !important; } .UserRegister.inline .step1.whiteWall input, .UserRegister.inline .step1.whiteWall input.hasError, .UserRegister.inline .step1.whiteWall input.hasWarning, .UserRegister.inline .step1.flatWhiteWall input, .UserRegister.inline .step1.flatWhiteWall input.hasError, .UserRegister.inline .step1.flatWhiteWall input.hasWarning, .UserRegister.inline .step2.whiteWall input, .UserRegister.inline .step2.whiteWall input.hasError, .UserRegister.inline .step2.whiteWall input.hasWarning, .UserRegister.inline .step2.flatWhiteWall input, .UserRegister.inline .step2.flatWhiteWall input.hasError, .UserRegister.inline .step2.flatWhiteWall input.hasWarning, .UserRegister.inline .step2Facebook.whiteWall input, .UserRegister.inline .step2Facebook.whiteWall input.hasError, .UserRegister.inline .step2Facebook.whiteWall input.hasWarning, .UserRegister.inline .step2Facebook.flatWhiteWall input, .UserRegister.inline .step2Facebook.flatWhiteWall input.hasError, .UserRegister.inline .step2Facebook.flatWhiteWall input.hasWarning { background-color: #f3f3f3; background: -webkit-linear-gradient(#f0f0f0, #f5f5f5); background: linear-gradient(#f0f0f0, #f5f5f5); } .UserRegister.inline .step1.whiteWall input:active, .UserRegister.inline .step1.whiteWall input:focus, .UserRegister.inline .step1.flatWhiteWall input:active, .UserRegister.inline .step1.flatWhiteWall input:focus, .UserRegister.inline .step2.whiteWall input:active, .UserRegister.inline .step2.whiteWall input:focus, .UserRegister.inline .step2.flatWhiteWall input:active, .UserRegister.inline .step2.flatWhiteWall input:focus, .UserRegister.inline .step2Facebook.whiteWall input:active, .UserRegister.inline .step2Facebook.whiteWall input:focus, .UserRegister.inline .step2Facebook.flatWhiteWall input:active, .UserRegister.inline .step2Facebook.flatWhiteWall input:focus { background: #fff !important; } .UserRegister.inline .step1.whiteWall .gender, .UserRegister.inline .step1.whiteWall .businessSignupMulti, .UserRegister.inline .step1.flatWhiteWall .gender, .UserRegister.inline .step1.flatWhiteWall .businessSignupMulti, .UserRegister.inline .step2.whiteWall .gender, .UserRegister.inline .step2.whiteWall .businessSignupMulti, .UserRegister.inline .step2.flatWhiteWall .gender, .UserRegister.inline .step2.flatWhiteWall .businessSignupMulti, .UserRegister.inline .step2Facebook.whiteWall .gender, .UserRegister.inline .step2Facebook.whiteWall .businessSignupMulti, .UserRegister.inline .step2Facebook.flatWhiteWall .gender, .UserRegister.inline .step2Facebook.flatWhiteWall .businessSignupMulti { text-shadow: none; } .UserRegister.inline .step1.whiteWall .businessField.linkGroup, .UserRegister.inline .step1.flatWhiteWall .businessField.linkGroup, .UserRegister.inline .step2.whiteWall .businessField.linkGroup, .UserRegister.inline .step2.flatWhiteWall .businessField.linkGroup, .UserRegister.inline .step2Facebook.whiteWall .businessField.linkGroup, .UserRegister.inline .step2Facebook.flatWhiteWall .businessField.linkGroup { height: auto; margin: 15px 0 0; } .UserRegister.inline .step1.whiteWall .businessField.linkGroup .businessSignupMulti, .UserRegister.inline .step1.flatWhiteWall .businessField.linkGroup .businessSignupMulti, .UserRegister.inline .step2.whiteWall .businessField.linkGroup .businessSignupMulti, .UserRegister.inline .step2.flatWhiteWall .businessField.linkGroup .businessSignupMulti, .UserRegister.inline .step2Facebook.whiteWall .businessField.linkGroup .businessSignupMulti, .UserRegister.inline .step2Facebook.flatWhiteWall .businessField.linkGroup .businessSignupMulti { color: #333; } .UserRegister.inline .step1.whiteWall .divider, .UserRegister.inline .step1.flatWhiteWall .divider, .UserRegister.inline .step2.whiteWall .divider, .UserRegister.inline .step2.flatWhiteWall .divider, .UserRegister.inline .step2Facebook.whiteWall .divider, .UserRegister.inline .step2Facebook.flatWhiteWall .divider { margin-top: 10px; } .UserRegister.inline .step1.whiteWall .divider p, .UserRegister.inline .step1.flatWhiteWall .divider p, .UserRegister.inline .step2.whiteWall .divider p, .UserRegister.inline .step2.flatWhiteWall .divider p, .UserRegister.inline .step2Facebook.whiteWall .divider p, .UserRegister.inline .step2Facebook.flatWhiteWall .divider p { position: relative; top: 5px; width: auto; } .UserRegister.inline .step1.darkWall .groupSeparator, .UserRegister.inline .step2.darkWall .groupSeparator, .UserRegister.inline .step2Facebook.darkWall .groupSeparator { color: #fff; } .UserRegister.inline .step1.darkWall .gender, .UserRegister.inline .step2.darkWall .gender, .UserRegister.inline .step2Facebook.darkWall .gender { color: #fff; } .UserRegister.inline .step1.darkWall .genderReadout, .UserRegister.inline .step2.darkWall .genderReadout, .UserRegister.inline .step2Facebook.darkWall .genderReadout { color: #fff; } .UserRegister.inline .step1.darkWall .infoButton, .UserRegister.inline .step2.darkWall .infoButton, .UserRegister.inline .step2Facebook.darkWall .infoButton { width: 14px; height: 14px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -44px -280px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserRegister.inline .step1.darkWall .infoButton, .UserRegister.inline .step2.darkWall .infoButton, .UserRegister.inline .step2Facebook.darkWall .infoButton { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -234px -189px; background-size: 249px 231px; } } .UserRegister.inline .step1.flatWhiteWall .groupSeparatorWrapper .groupSeparator, .UserRegister.inline .step2.flatWhiteWall .groupSeparatorWrapper .groupSeparator, .UserRegister.inline .step2Facebook.flatWhiteWall .groupSeparatorWrapper .groupSeparator { border: 1px solid #efefef; margin: 13px 0; } .UserRegister.inline .step1.flatWhiteWall .infoButton, .UserRegister.inline .step2.flatWhiteWall .infoButton, .UserRegister.inline .step2Facebook.flatWhiteWall .infoButton { -webkit-filter: none; filter: none; } .UserRegister.loginForm .whiteWall .signupFirstStep .signupButton .continueButton, .UserRegister.loginForm .whiteWall .signupFirstStep .signupButton .continueButton:hover { border: 1px solid rgba(150, 150, 150, 0.3); box-shadow: none; } /* desktop.scss */ .UserRegisterPage .InlineSignup { margin: 50px auto; } .UserRegisterRestricted { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .UserRegisterRestricted .contents { background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); margin: 100px auto 0; position: relative; max-width: 300px; z-index: 682; background: none; box-shadow: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; } .UserRegisterRestricted .logo { width: 169px; height: 42px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -174px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; margin-bottom: 20px; } .UserRegisterRestricted .header { font-size: 15px; font-weight: bold; } .UserRegisterRestricted .message { color: #555; line-height: 15px; margin-bottom: 20px; margin-top: 5px; } .App.full .UserRegisterRestricted .contents { z-index: 1; } .SimpleBoardCreate { background-color: #fff; width: 330px; } .SimpleBoardCreate .repinSmall.btn.primary, .SimpleBoardCreate .repinBtn.btn.primary { height: 33px; } .SimpleBoardCreate .repinSmall.btn.primary.loading, .SimpleBoardCreate .repinSmall.btn.primary.success, .SimpleBoardCreate .repinBtn.btn.primary.loading, .SimpleBoardCreate .repinBtn.btn.primary.success { width: 62px; } .SimpleBoardCreate .repinSmall.btn.primary.loading em, .SimpleBoardCreate .repinSmall.btn.primary.success em, .SimpleBoardCreate .repinBtn.btn.primary.loading em, .SimpleBoardCreate .repinBtn.btn.primary.success em { -webkit-transform: translateZ(0); left: 50%; position: absolute; top: 50%; } .SimpleBoardCreate .repinSmall.btn.primary.loading em, .SimpleBoardCreate .repinBtn.btn.primary.loading em { width: 16px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -327px no-repeat; -webkit-animation: rotateCircle 500ms infinite; animation: rotateCircle 500ms infinite; margin-left: -8px; margin-top: -8px; visibility: visible; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SimpleBoardCreate .repinSmall.btn.primary.loading em, .SimpleBoardCreate .repinBtn.btn.primary.loading em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px -223px; background-size: 399px 382px; } } .SimpleBoardCreate .repinSmall.btn.primary.success em, .SimpleBoardCreate .repinBtn.btn.primary.success em { width: 17px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -328px -325px no-repeat; margin-left: -8.5px; margin-top: -6.5px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SimpleBoardCreate .repinSmall.btn.primary.success em, .SimpleBoardCreate .repinBtn.btn.primary.success em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -228px -320px; background-size: 399px 382px; } } .SimpleBoardCreate .BoardIcons { height: auto; } .SimpleBoardCreate .boardsWrapper { -webkit-transform: translateZ(0); border-bottom-right-radius: 6px; border-top-right-radius: 6px; overflow: hidden; right: 0; width: 330px; } .SimpleBoardCreate .boardsWrapper .item { border-radius: 0; color: #d3d3d3; padding: 3px 10px 3px 23px; } .SimpleBoardCreate .boardsWrapper .item:hover { background: transparent; } .SimpleBoardCreate .boardsWrapper .item.activeItem, .SimpleBoardCreate .boardsWrapper .item.selected, .SimpleBoardCreate .boardsWrapper .item:hover { background: #f5f5f5; color: #000; } .SimpleBoardCreate .boardsWrapper .item.activeItem .repinBtn, .SimpleBoardCreate .boardsWrapper .item.selected .repinBtn, .SimpleBoardCreate .boardsWrapper .item:hover .repinBtn { display: block; } .SimpleBoardCreate .boardsWrapper .top { border-bottom: 1px solid #f3f3f3; border-top: 1px solid #f3f3f3; margin-bottom: 0; padding: 15px 0; } .SimpleBoardCreate .cancelButton { float: left; margin-left: 12px; } .SimpleBoardCreate .submitButton { float: right; margin-right: 25px; } .SimpleBoardCreate .submitButton .Button.btn:hover { box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.34); } .SimpleBoardCreate .cancelCreateButtons { border: 1px solid transparent; } .SimpleBoardCreate .nameWrapper { background: #fff; padding-right: 0; position: relative; } .SimpleBoardCreate .nameWrapper .searchFilterInputIcon { display: none; } .SimpleBoardCreate input.name { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border: 1px solid #eaeaea; border-radius: 4px; box-shadow: none; color: #555; font-size: 15px; font-weight: bold; margin-left: 23px; padding: 13px; width: 284px; } .SimpleBoardCreate input.name:focus { outline: none; } .SimpleBoardCreate input.name::-webkit-input-placeholder { color: #d3d3d3; } .SimpleBoardCreate input.name::-moz-placeholder { color: #d3d3d3; } .SimpleBoardCreate input.name:-ms-input-placeholder { color: #d3d3d3; } .SimpleBoardCreate input.name::placeholder { color: #d3d3d3; } .SimpleBoardCreate .pinCreateTitle { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #333; font-size: 20px; font-weight: bold; margin: 0; padding: 25px 25px 13px; } .SimpleBoardCreate .nameAndIcons { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: bold; letter-spacing: .01em; } .SimpleBoardCreate .selected .BoardIcons { display: none; } .SimpleBoardCreate .sectionHeading { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #d3d3d3; font-size: 11px; font-weight: 400; padding: 10px 23px; text-transform: uppercase; } .SimpleBoardCreate .titleContainer { border-top-right-radius: 6px; width: 330px; z-index: 1; } .SimpleBoardCreate .titleContainer .pinCreateTitle { padding: 25px 25px 13px; } .BuildingHomeFeedSpinner { color: #444; text-align: center; } .BuildingHomeFeedSpinner .buildingFeedImg { background: url(https://s.pinimg.com/webapp/style/images/building_homefeed-1x-da7dc75e.png) no-repeat; background-size: contain; height: 250px; width: 324px; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .BuildingHomeFeedSpinner .buildingFeedImg { background-image: url(https://s.pinimg.com/webapp/style/images/building_homefeed-2x-ba17edad.png); } } .BuildingHomeFeedSpinner .buildingTitle { font-size: 32px; } .BuildingHomeFeedSpinner .buildingText { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 18px; } .ModalStepBase.inModal { color: #333; width: 375px; } .ModalStepBase.inModal .standardForm .formTitle { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; font-size: 18px; white-space: normal; } .ModalStepBase.inModal .standardForm .formItem { font-size: 14px; line-height: 1.5; } .ModalStepBase.inModal .standardForm .formFooter { position: relative; } .ModalStepBase.inModal .Progress { margin-top: -4px; position: absolute; top: 50%; } .ModalStepBase.inModal .tip { font-style: italic; } .NewUserInterestPicker { background-color: #fff; padding-bottom: 69px; } .NewUserInterestPicker .padItems { width: 600px; } .NewUserInterestPicker .GridItems.padItems > .item { width: 136px; } .NewUserInterestPicker.threeColumns .padItems { width: 450px; } body.interestsNuxMwebTutorial.NewUserSetupSpinnerStep { background-image: url(https://s.pinimg.com/webapp/style/images/prof-x-long-bg-ae84c427.png); background-size: cover; } body.interestsNuxMwebTutorial .Nags { display: none; } .NewUserSetupSpinner { overflow-x: hidden; } .NewUserSetupSpinner.ignition { margin-top: 0 !important; } .NewUserSetupSpinner .outer { display: inline-block; position: relative; right: -50%; } .NewUserSetupSpinner .finishImage { background: url(https://s.pinimg.com/webapp/style/images/nux-finish-pins-1x-da7dc75e.png) no-repeat; background-size: contain; height: 250px; width: 324px; left: -50%; margin-top: 5%; position: relative; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NewUserSetupSpinner .finishImage { background-image: url(https://s.pinimg.com/webapp/style/images/nux-finish-pins-2x-ba17edad.png); } } .NewUserSetupSpinner .finishTitle { color: #fff; font: bold 18px "Helvetica Neue", Sans-Serif; padding: 20px 0 10px; text-align: center; } .NewUserSetupSpinner .finishMessage { color: #fff; font-size: 14px; margin: 0 auto; padding: 10px 0 15px; text-align: center; width: 300px; } .NewUserSetupSpinner .spinner { background: url(https://s.pinimg.com/webapp/style/images/spinner-small-1x-b897d25e.gif) no-repeat; background-size: contain; height: 16px; width: 16px; display: inline-block; opacity: .5; display: block; margin: 10px auto 20px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NewUserSetupSpinner .spinner { background-image: url(https://s.pinimg.com/webapp/style/images/spinner-small-2x-dbb1334f.gif); } } .NewUserStepBase.ignition { margin-top: -44px; position: relative; } .NewUserStepBase.ignition .noHeader { box-shadow: None; margin-top: 0; } .NewUserStepBase.ignition .newUserStepHeader { background: none; box-shadow: none; } .NewUserStepBase.ignition h1.pinStoryText { color: #333; /* stylelint-disable-next-line property-blacklist */ font-family: serif; font-size: 28px; font-weight: normal; margin-top: 32px; text-align: center; } .NewUserStepBase.ignition .tooltipCloserLook p { color: #333; } .NewUserStepBase .newUserStepHeader { background-color: #f0f0f0; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.1); margin-bottom: 14px; text-align: center; } .NewUserStepBase .newUserStepHeader.hidden { background: none; box-shadow: none; display: block; height: 0; } .NewUserStepBase .newUserStepHeader::before { content: ""; display: inline-block; height: 195px; } .NewUserStepBase .newUserStepHeader h1 { color: #333; color: rgba(21, 21, 21, 0.8); font-size: 47px; font-weight: bold; line-height: 52px; margin-left: auto; margin-right: auto; max-width: 736px; text-align: center; word-wrap: break-word; font-size: 20px; line-height: 26px; } .NewUserStepBase .newUserStepHeader .newUserStepHeaderInner { display: inline-block; margin: auto; padding: 17px 0; width: 750px; } .NewUserStepBase .newUserStepHeader .newUserStepHeaderPeep { position: fixed; right: 14px; top: 6px; z-index: 680; } .NewUserStepBase .newUserStepHeader .newUserStepHeaderPeep .nextStep { float: left; } .NewUserStepBase .newUserStepHeader .newUserStepHeaderPeep .Progress { float: left; margin: 12px 3px; } @media screen and (min-width: 1300px) { .NewUserStepBase .newUserStepHeader .newUserStepHeaderPeep.fixedPosition { left: 50%; margin-left: 450px; width: 280px; } } .NewUserStepBase .welcome { color: #333; font-size: 16px; line-height: 1.6em; margin-bottom: 7px; } .NewUserStepBase .tooltipCloserLook { background: #fff; border: 1px solid #c9c9c9; border-radius: 3px; left: 50%; margin-left: -190px; margin-top: 220px; opacity: 0; position: fixed; text-align: center; top: 90px; -webkit-transition: opacity .3s; transition: opacity .3s; width: 380px; } .NewUserStepBase .tooltipCloserLook p { color: #bd081c; font-size: 16px; margin: 16px 0; } .NewUserStepBase .tooltipCloserLook.visible { opacity: 1; visibility: visible; z-index: 680; } body.interestsNuxMwebTutorial.NewUserWelcomeStep { background-image: url(https://s.pinimg.com/webapp/style/images/prof-x-long-bg-ae84c427.png); background-size: cover; } body.interestsNuxMwebTutorial .Nags { display: none; } .NewUserWelcome { overflow-x: hidden; } .NewUserWelcome.ignition { margin-top: 0; } .NewUserWelcome .outer { display: inline-block; position: relative; right: -50%; } .NewUserWelcome .welcomeImage { background: url(https://s.pinimg.com/webapp/style/images/nux-welcome-pins-1x-9eebf6f9.png) no-repeat; background-size: contain; height: 258px; width: 391px; left: -50%; margin-top: 5%; position: relative; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NewUserWelcome .welcomeImage { background-image: url(https://s.pinimg.com/webapp/style/images/nux-welcome-pins-2x-9e263d10.png); } } .NewUserWelcome .welcomeTitle { color: #fff; font: bold 18px "Helvetica Neue", Sans-Serif; padding: 20px 0 10px; text-align: center; } .NewUserWelcome .welcomeMessage { color: #fff; font-size: 12px; margin: 0 auto; padding: 10px 0 15px; text-align: center; width: 300px; } .NewUserWelcome .welcomeButton { padding-bottom: 15px; } .NewUserWelcome .welcomeButtonStyle { background: #ab171e -webkit-linear-gradient(#e3262e, #ab171e); background: #ab171e linear-gradient(#e3262e, #ab171e); border: 3px solid #fff; border-color: #af151b #9a1015 #820a0f #9a1015; border-width: 1px; display: block; margin: 0 auto; } .NewUserWelcome .Button.btn.primary { padding: 5px 60px; } .NewUserWelcome .spinner { background: url(https://s.pinimg.com/webapp/style/images/spinner-small-1x-b897d25e.gif) no-repeat; background-size: contain; height: 16px; width: 16px; display: inline-block; opacity: .5; display: none; margin: 0 auto 20px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NewUserWelcome .spinner { background-image: url(https://s.pinimg.com/webapp/style/images/spinner-small-2x-dbb1334f.gif); } } .Pulser { height: 50px; position: absolute; visibility: hidden; width: 50px; z-index: 680; } .Pulser.fixed { position: fixed; } .Pulser .pulserImage { cursor: pointer; left: -47px; position: absolute; top: -47px; } .Pulser .pulserInner { background: url(https://s.pinimg.com/webapp/style/images/PulserInner-1x-f7e70bcd.png) no-repeat; background-size: contain; height: 146px; width: 146px; } .Pulser .pulserOuter { background: url(https://s.pinimg.com/webapp/style/images/PulserOuter-1x-5840dc0e.png) no-repeat; background-size: contain; height: 146px; width: 146px; } .TutorialTooltip { background-color: #4dd3f5; border-radius: 4px; color: #fff; padding: 11px 14px 10px; width: 264px; } .TutorialTooltip.noButtons { width: 200px; } .TutorialTooltip.noButtons .tooltipWrapper { text-align: center; } .TutorialTooltip.noButtons .tooltipWrapper .tooltipContent { display: inline-block; padding: 0; text-align: left; } .TutorialTooltip .tooltipTitle { font-size: 18px; } .TutorialTooltip .tooltipContent { font-size: 16px; margin: 0; padding: 0 2px 14px 0; } .TutorialTooltip .ring { background-color: transparent; border: 4px solid #efefef; border-radius: 50%; display: inline-block; height: 8px; margin-bottom: 2px; -webkit-transition: all .2s; transition: all .2s; vertical-align: middle; width: 8px; } .TutorialTooltip .tooltipFooter { height: 40px; } .TutorialTooltip .toolTipActionButton { float: right; } .TutorialTooltip .toolTipCancelButton { float: left; } .TwoCirclesPulser { cursor: pointer; height: 100px; position: absolute; visibility: hidden; width: 100px; z-index: 680; } .TwoCirclesPulser .pulser { background-color: #4dd3f5; border-radius: 50%; height: 100%; position: absolute; width: 100%; } .TwoCirclesPulser.inHeader { z-index: 672; } .TwoCirclesPulser.inDropdown { z-index: 753; } .UnauthPinInGridCloseup .centeredWithinWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .UnauthPinInGridCloseup .mainPin { -ms-flex-negative: 0; flex-shrink: 0; margin: 14px 7px 0; width: 486px; } .UnauthPinInGridCloseup .mainPin .pinCanonicalDescription { width: auto !important; } .UnauthPinInGridCloseup.pinOverlay .mainPin { margin: 0 auto; } .UnauthPinInGridCloseup .rightSection { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; position: relative; } .UnauthPinInGridCloseup .rightSection .relatedPinsTitle { color: #555; font-size: 24px; font-weight: bold; margin: 14px 0 0 7px; } .UnauthPinInGridCloseup .pinTopBar { position: absolute; z-index: 10; } .UnauthPinInGridCloseup .PaddedPin { margin: 0 32px; } .UnauthPinInGridCloseup .PaddedPin .pinDomain { width: auto !important; } .UnauthPinInGridCloseup .Pin { border-radius: 6px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); overflow: hidden; width: 486px; } .UnauthPinInGridCloseup .Pin.detailed.unauthPinInGrid .pinImage { border-radius: 6px; } .UnauthPinInGridCloseup .Pin.detailed.unauthPinInGrid .pinActionBarStickyContainer { padding-top: 60px; } .UnauthPinInGridCloseup .CloseupTitleCard { padding-left: 32px; padding-right: 32px; } .UnauthPinInGridCloseup .CloseupTitleCard .richPinInformation { padding: 0; width: auto; } .UnauthPinInGridCloseup .CloseupTitleCard .richPinTitle { padding-bottom: 8px; } .UnauthPinInGridCloseup .CloseupSourceDescription .richPinArticleSummary { width: auto; } .UnauthPinInGridCloseup .commentDescriptionContent { width: auto !important; } .UnauthPinInGridCloseup .showMoreButton { display: none; } .UnauthPinInGridCloseup .topSection { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .UnauthPinInGridCloseup .PinActionBar { padding: 16px 32px 0; top: 0 !important; width: 486px !important; } .UnauthPinInGridCloseup .nonCanonicalDesc { width: auto !important; } .UnauthPinInGridCloseup.gridLayout .pinPageHeader { background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); } .UnauthPinInGridCloseup.gridLayout .pinPageHeaderTitle { color: #555; font-size: 48px; font-weight: bold; padding-top: 20px; } .UnauthPinInGridCloseup.gridLayout .RelatedInterestsSection { margin: 32px 0; } .UnauthPinInGridCloseup.gridLayout .RelatedInterestsSection.noInterests { height: 0; margin-bottom: 0; } .UnauthPinInGridCloseup.gridLayout .gridContainer { margin-top: 18px; } .UnauthPinInGridCloseup.showOpenNav { background-color: #fff; } .UnauthPinInGridCloseup.showOpenNav .pinPageContent { background-color: #fff; margin-left: 246px; } @media (min-width: 0px) and (max-width: 999px) { .UnauthPinInGridCloseup.showOpenNav .pinPageContent { margin-left: 0; } } .UnauthPinInGridCloseup.showOpenNav .pinPageContent .centeredWithinWrapper { width: inherit; } .UnauthPinInGridCloseup.showOpenNav .pinPageHeader { box-shadow: none; margin-bottom: 0; padding-bottom: 0; } .UnauthPinInGridCloseup.showOpenNav .pinPageHeader .centeredWithinWrapper { width: inherit; } .UnauthPinInGridCloseup.showOpenNav .openNavSubtitle { color: #555; font-size: 14px; padding-left: 8px; } .UnauthPinInGridCloseup.showOpenNav .pinPageHeaderTitleSmall { padding: 32px 5px; } .UnauthPinInGridCloseup.showOpenNav .pinPageHeaderTitle { padding-bottom: 32px; padding-left: 5px; } .UnauthPinInGridCloseup.showOpenNav .gridContainer { margin-top: 4px; } .UnauthPinInGridCloseup.showOpenNav .RelatedInterestsSection { margin-bottom: 40px; margin-top: 16px; } .UserBoardFollow { height: 100%; overflow: hidden; text-align: center; } .UserBoardFollow .userBoardFakeHeader { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); height: 45px; position: relative; } .UserBoardFollow .userBoardFakeHeader .fakeHeaderLogo { width: 104px; height: 26px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -253px -166px no-repeat; display: inline-block; margin-top: 10px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserBoardFollow .userBoardFakeHeader .fakeHeaderLogo { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -111px -201px; background-size: 428px 427px; } } .UserBoardFollow .boardInfo { background: #fff; bottom: -1px; box-shadow: 0 -20px 50px #eee; padding: 0 0 40px; position: absolute; -webkit-transition: height 1s ease-in-out; transition: height 1s ease-in-out; width: 100%; } .UserBoardFollow .boardInfo .about { color: #aaa; font-size: 15px; line-height: 22px; margin: 0 auto; max-width: 800px; padding: 0 10px; } .UserBoardFollow .boardInfo .boardName { color: #333; color: rgba(21, 21, 21, 0.8); font-size: 36px; line-height: 32px; padding-top: 30px; text-align: center; } .UserBoardFollow .boardInfo .description { color: #444; font-size: 15px; line-height: 20px; margin: 10px auto 5px; max-width: 750px; padding: 0 20px; text-align: center; text-shadow: none; } .UserBoardFollow .boardInfo img.profileImage { box-shadow: 0 0 10px #aaa; height: 64px; margin-top: -32px; overflow: hidden; width: 64px; } .UserBoardFollow .boardInfo .postFollow .boardName { font-size: 26px; padding-top: 0; } .UserBoardFollow .boardInfo .postUnFollow { margin-bottom: 10px; margin-top: 20px; } .UserBoardFollow .boardInfo .stats { color: #aaa; font-size: 15px; margin: 15px 0 10px; } .UserBoardFollow .boardInfo .stats .pinCount::before { content: "\2022"; } .UserBoardFollow .boardInfo .userName { color: #333; font-size: 22px; font-weight: 500; padding-top: 8px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ /* stylelint-disable-next-line at-rule-blacklist */ .BusinessAccountCreate .emailLoginButton { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 13px; padding: 9px 15px; position: absolute; right: 12px; top: 12px; } .BusinessAccountCreate .standardForm { margin-bottom: 0; } .BusinessAccountCreate .standardForm svg { z-index: 1; } .BusinessAccountCreate .standardForm input[type="email"], .BusinessAccountCreate .standardForm input[type="number"], .BusinessAccountCreate .standardForm input[type="password"], .BusinessAccountCreate .standardForm input[type="text"], .BusinessAccountCreate .standardForm input[type="url"], .BusinessAccountCreate .standardForm select { padding: 11px; } .BusinessAccountCreate .standardForm input[type="email"]::-webkit-input-placeholder, .BusinessAccountCreate .standardForm input[type="number"]::-webkit-input-placeholder, .BusinessAccountCreate .standardForm input[type="password"]::-webkit-input-placeholder, .BusinessAccountCreate .standardForm input[type="text"]::-webkit-input-placeholder, .BusinessAccountCreate .standardForm input[type="url"]::-webkit-input-placeholder, .BusinessAccountCreate .standardForm select::-webkit-input-placeholder { font-weight: bold; } .BusinessAccountCreate .standardForm input[type="email"]::-moz-placeholder, .BusinessAccountCreate .standardForm input[type="number"]::-moz-placeholder, .BusinessAccountCreate .standardForm input[type="password"]::-moz-placeholder, .BusinessAccountCreate .standardForm input[type="text"]::-moz-placeholder, .BusinessAccountCreate .standardForm input[type="url"]::-moz-placeholder, .BusinessAccountCreate .standardForm select::-moz-placeholder { font-weight: bold; } .BusinessAccountCreate .standardForm input[type="email"]:-ms-input-placeholder, .BusinessAccountCreate .standardForm input[type="number"]:-ms-input-placeholder, .BusinessAccountCreate .standardForm input[type="password"]:-ms-input-placeholder, .BusinessAccountCreate .standardForm input[type="text"]:-ms-input-placeholder, .BusinessAccountCreate .standardForm input[type="url"]:-ms-input-placeholder, .BusinessAccountCreate .standardForm select:-ms-input-placeholder { font-weight: bold; } .BusinessAccountCreate .standardForm input[type="email"]::placeholder, .BusinessAccountCreate .standardForm input[type="number"]::placeholder, .BusinessAccountCreate .standardForm input[type="password"]::placeholder, .BusinessAccountCreate .standardForm input[type="text"]::placeholder, .BusinessAccountCreate .standardForm input[type="url"]::placeholder, .BusinessAccountCreate .standardForm select::placeholder { font-weight: bold; } .BusinessAccountCreate .standardForm select { height: 40px; padding-right: 33px; } .BusinessAccountCreate .fields > ul > li, .BusinessAccountCreate .fields div > li { margin-bottom: 5px; position: relative; } .BusinessAccountCreate .fields > ul > li.emailAddress, .BusinessAccountCreate .fields div > li.emailAddress { color: #b9b9b9; font-size: 14px; margin-bottom: 10px; } .BusinessAccountCreate .fields input.readonly { background: transparent; box-shadow: none; color: #444; } .BusinessAccountCreate .fields input.readonly::-webkit-input-placeholder { font-weight: normal; } .BusinessAccountCreate .fields input.readonly::-moz-placeholder { font-weight: normal; } .BusinessAccountCreate .fields input.readonly:-ms-input-placeholder { font-weight: normal; } .BusinessAccountCreate .fields input.readonly::placeholder { font-weight: normal; } .BusinessAccountCreate .fields .formErrorMessage { color: #bd081c; font-size: 13px; margin: 7px 0; } .BusinessAccountCreate .optional { color: #a9a9a9; cursor: text; line-height: 40px; padding: 0 10px 0 0; position: absolute; right: 0; top: 0; } .BusinessAccountCreate input:focus + .optional { display: none; } .BusinessAccountCreate button[type=submit] { display: block; width: 100%; } .BusinessAccountCreate .signupButtonContainer { margin: 8px 0 10px; } .BusinessAccountCreate .acceptTerms { color: #b9b9b9; font-size: 11px; line-height: 1.5; margin-bottom: 15px; } .BusinessAccountCreate .acceptTerms a { color: #b9b9b9; } .BusinessAccountCreate .notABusiness { color: #444; display: inline-block; font-weight: bold; } .BusinessAccountCreate .homeUnauthNumbers { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; bottom: -50px; color: #fff; display: table; margin: 0 auto; position: absolute; table-layout: fixed; text-align: center; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); width: 100%; z-index: 0; } .BusinessAccountCreate .homeUnauthNumbers .timeToSignup { display: inline-block; float: none; padding-left: 20px; padding-right: 15px; text-align: center; } .BusinessAccountCreate .homeUnauthNumbers .timeToSignup .numbersWrapper { text-align: left; } .BusinessAccountCreate .homeUnauthNumbers .numbersTitle { display: inline-block; /* stylelint-disable-next-line property-blacklist */ font-family: Helvetica; font-size: 35px; font-weight: bold; } .BusinessAccountCreate .homeUnauthNumbers .numbersSubtitle { display: inline-block; font-size: 12px; font-weight: bold; line-height: 120%; padding-left: 4px; padding-top: 3px; text-align: left; } /* desktop.scss */ .BusinessAccountCreate { bottom: 0; left: 0; right: 0; top: 0; min-width: 750px; position: fixed; z-index: 681; } .BusinessAccountCreate .pinterestLogo { width: 55px; height: 55px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -62px -234px no-repeat; border-radius: 100%; height: 56px; margin: -30px auto; width: 56px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .BusinessAccountCreate .pinterestLogo { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -61px -231px; background-size: 399px 382px; } } .BusinessAccountCreate .newSignupLogo { margin-top: 20px; } .BusinessAccountCreate .hidden { display: none; } .BusinessAccountCreate .invisible { opacity: 0; pointer-events: none; } .BusinessAccountCreate .interestsWrapper { -webkit-animation: scrollFooterWithBgGrid 35s linear; animation: scrollFooterWithBgGrid 35s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; background-color: #fff; bottom: -30px; height: 30px; left: 0; position: absolute; text-align: center; width: 100%; } .BusinessAccountCreate .interestsWrapper .gradient { background-color: #cccccc; background: -webkit-linear-gradient(#999, #fff); background: linear-gradient(#999, #fff); height: 8px; } .BusinessAccountCreate .interestsWrapper span, .BusinessAccountCreate .interestsWrapper a { font-size: 10px; font-weight: bold; padding: 0 3px; position: relative; } .BusinessAccountCreate .interestsWrapper span { color: #999; } .BusinessAccountCreate .interestsWrapper a { color: #333; } .BusinessAccountCreate .inspiredSearchBackgroundContainer { background-color: #e6e8e3; height: 100%; opacity: 0; position: absolute; -webkit-transition: all 1s; transition: all 1s; visibility: hidden; width: 100%; } .BusinessAccountCreate .inspiredSearchBackgroundContainer .background { padding-bottom: 300px; } .BusinessAccountCreate .inspiredSearchBackgroundContainer.active { opacity: 1; visibility: visible; } .BusinessAccountCreate .inspiredSearchBackgroundContainer.animate_background .background { -webkit-animation: scrollBgGridLinks 35s linear; animation: scrollBgGridLinks 35s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .BusinessAccountCreate .signupFormContainer { background-color: #fff; border-radius: 6px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); left: 50%; margin-left: -358px; min-height: 440px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 716px; } .BusinessAccountCreate .signupFormContainer .backgroundImage { background-position: 50%; background-size: cover; height: 100%; position: absolute; width: 50%; } .BusinessAccountCreate .signupFormContainer .leftHalf { border-radius: 8px 0 0 8px; display: inline-block; height: 100%; overflow: hidden; vertical-align: top; width: 50%; } .BusinessAccountCreate .signupFormContainer .rightHalf { display: inline-block; height: 100%; vertical-align: top; width: 50%; } .BusinessAccountCreate .signupFormStep { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-top: 55px; text-align: center; width: auto; } .BusinessAccountCreate .signupFormStep .title { color: #444; font-size: 27px; font-weight: bold; letter-spacing: -1px; margin-top: 50px; } .BusinessAccountCreate .signupFormStep .subtitle { color: #444; font-size: 16px; font-weight: 500; } .BusinessAccountCreate .signupFormStep .newSignupSubtitle { color: #b5b5b5; font-size: 14px; margin: 7px auto; width: 80%; } .BusinessAccountCreate .signupFormStep .fields { margin: 30px auto 0; width: 268px; } .BusinessAccountCreate .signupFormStep .newSignUpField { margin-top: 15px; } .CampbellMenuList { max-height: 590px; overflow-y: auto; padding: 10px 0; } .CampbellMenuList li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .CampbellMenuList.withIcon .menuItem { padding: 14px 24px; } .CampbellMenuList.withoutIcon .menuItem { padding: 14px 16px; } .CampbellMenuList .divider { border-bottom-width: 0; border-style: solid; color: #e9e9e9; margin: 0; padding: 0; } .CampbellMenuList .menuItem { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #838383; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 16px; font-weight: bold; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; outline: none; } .CampbellMenuList .menuItem .icon { margin-right: 18px; } .CampbellMenuList .menuItem:hover { color: #333; } .CampbellMenuList .menuItem.alphaFeatureTag::after, .CampbellMenuList .menuItem.newFeatureTag::after, .CampbellMenuList .menuItem.betaFeatureTag::after, .CampbellMenuList .menuItem.earlyAccessFeatureTag::after { border: 1px solid #0fa573; border-radius: 4px; color: #0fa573; font-size: 12px; margin: 1px 0 0 10px; padding: 2px 4px; } .CampbellMenuList .menuItem.orangeText::after { border-color: #ffa500; color: #ffa500; } .CampbellMenuList .menuItem.alphaFeatureTag::after { content: "Pre-release"; } .CampbellMenuList .menuItem.newFeatureTag::after { content: "Early Access"; } .CampbellMenuList .menuItem.betaFeatureTag::after { content: "Pre-release"; } .CampbellMenuList .menuItem.earlyAccessFeatureTag::after { content: "Early Access"; } .CampbellMenuList .menuTitle { color: #a8a8a8; font-size: 14px; font-weight: normal; padding: 16px 16px 6px; } .CampbellRightHeader { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: 5px; } .CampbellRightHeader .navRightHeaderIcon { margin-left: 16px; padding: 0; } .CampbellRightHeader .sterlingOnSteroids { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .CampbellRightHeader .sterlingOnSteroids .viewingInfo { display: inline-block; font-size: 16px; font-weight: bold; margin: 0 10px; } .CampbellRightHeader .sterlingOnSteroids .NavigateButton { margin-right: 10px; } .CampbellUserMenu:hover { cursor: pointer; } .CampbellUserMenu .profileImage { height: 28px; width: 28px; } .CampbellUserMenu .profileImage img { border-radius: 100%; } .Button.ContinueWithGoogleButton { padding: 0; } .Button.ContinueWithGoogleButton em { background: url(https://s.pinimg.com/webapp/style/images/google_g_logo-3aac701c.svg) no-repeat 57% 50%; background-size: 18px 18px; border-right: 1px solid rgba(0, 0, 0, 0.06); float: left; height: 40px; width: 38px; } .Button.ContinueWithGoogleButton .buttonText { color: #444; float: left; line-height: 40px; padding: 0 18px 0 8px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .MultiStepBusinessAccountCreate .emailLoginButton, .MultiStepBusinessAccountCreate .backButton { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 13px; padding: 9px 15px; position: absolute; } .MultiStepBusinessAccountCreate .emailLoginButton { right: 12px; top: 12px; } .MultiStepBusinessAccountCreate .backButton { left: 12px; top: 12px; } .MultiStepBusinessAccountCreate .standardForm { margin-bottom: 0; } .MultiStepBusinessAccountCreate .standardForm input[type="email"], .MultiStepBusinessAccountCreate .standardForm input[type="number"], .MultiStepBusinessAccountCreate .standardForm input[type="password"], .MultiStepBusinessAccountCreate .standardForm input[type="text"], .MultiStepBusinessAccountCreate .standardForm input[type="url"] { padding: 11px; } .MultiStepBusinessAccountCreate .standardForm input[type="email"]::-webkit-input-placeholder, .MultiStepBusinessAccountCreate .standardForm input[type="number"]::-webkit-input-placeholder, .MultiStepBusinessAccountCreate .standardForm input[type="password"]::-webkit-input-placeholder, .MultiStepBusinessAccountCreate .standardForm input[type="text"]::-webkit-input-placeholder, .MultiStepBusinessAccountCreate .standardForm input[type="url"]::-webkit-input-placeholder { font-weight: bold; } .MultiStepBusinessAccountCreate .standardForm input[type="email"]::-moz-placeholder, .MultiStepBusinessAccountCreate .standardForm input[type="number"]::-moz-placeholder, .MultiStepBusinessAccountCreate .standardForm input[type="password"]::-moz-placeholder, .MultiStepBusinessAccountCreate .standardForm input[type="text"]::-moz-placeholder, .MultiStepBusinessAccountCreate .standardForm input[type="url"]::-moz-placeholder { font-weight: bold; } .MultiStepBusinessAccountCreate .standardForm input[type="email"]:-ms-input-placeholder, .MultiStepBusinessAccountCreate .standardForm input[type="number"]:-ms-input-placeholder, .MultiStepBusinessAccountCreate .standardForm input[type="password"]:-ms-input-placeholder, .MultiStepBusinessAccountCreate .standardForm input[type="text"]:-ms-input-placeholder, .MultiStepBusinessAccountCreate .standardForm input[type="url"]:-ms-input-placeholder { font-weight: bold; } .MultiStepBusinessAccountCreate .standardForm input[type="email"]::placeholder, .MultiStepBusinessAccountCreate .standardForm input[type="number"]::placeholder, .MultiStepBusinessAccountCreate .standardForm input[type="password"]::placeholder, .MultiStepBusinessAccountCreate .standardForm input[type="text"]::placeholder, .MultiStepBusinessAccountCreate .standardForm input[type="url"]::placeholder { font-weight: bold; } .MultiStepBusinessAccountCreate .fields > ul > li { margin-bottom: 5px; } .MultiStepBusinessAccountCreate .fields > ul > li.emailAddress { color: #b9b9b9; font-size: 14px; margin-bottom: 10px; } .MultiStepBusinessAccountCreate .fields input.readonly { background: transparent; box-shadow: none; color: #444; } .MultiStepBusinessAccountCreate .fields input.readonly::-webkit-input-placeholder { font-weight: normal; } .MultiStepBusinessAccountCreate .fields input.readonly::-moz-placeholder { font-weight: normal; } .MultiStepBusinessAccountCreate .fields input.readonly:-ms-input-placeholder { font-weight: normal; } .MultiStepBusinessAccountCreate .fields input.readonly::placeholder { font-weight: normal; } .MultiStepBusinessAccountCreate button[type=submit], .MultiStepBusinessAccountCreate .continueWithGoogle { display: block; width: 100%; } .MultiStepBusinessAccountCreate .signupButtonContainer { margin: 8px 0 10px; } .MultiStepBusinessAccountCreate .acceptTerms { color: #b9b9b9; font-size: 11px; line-height: 1.5; } .MultiStepBusinessAccountCreate .acceptTerms a { color: #b9b9b9; } .MultiStepBusinessAccountCreate .businessTypesList { text-align: left; } .MultiStepBusinessAccountCreate .businessTypesList .hasError { position: relative; } .MultiStepBusinessAccountCreate .businessTypesList .formFieldMessage { position: absolute; top: 10px; } .MultiStepBusinessAccountCreate .progressBar { margin: 17px 0 0; text-align: right; } .MultiStepBusinessAccountCreate .progressBar .right { color: #555; font-size: 12px; font-weight: bold; } .MultiStepBusinessAccountCreate .progressBar .dark.bar { background: #efefef; border-radius: 50px; margin: 5px 0 12px; } .MultiStepBusinessAccountCreate .progressBar .dark.bar li { height: 8px; width: 33.3%; } .MultiStepBusinessAccountCreate .progressBar .dark.bar li.active { background: #555; } .MultiStepBusinessAccountCreate .progressBar .dark.bar li.currentStep { border-radius: 0 50px 50px 0; } .MultiStepBusinessAccountCreate .progressBar .dark.bar[max="2"] li { width: 50%; } .MultiStepBusinessAccountCreate .progressBar .dark.bar[max="3"] li { width: 33.3%; } .MultiStepBusinessAccountCreate .notABusiness { color: #444; display: inline-block; font-weight: bold; } /* desktop.scss */ .MultiStepBusinessAccountCreate { bottom: 0; left: 0; right: 0; top: 0; min-width: 750px; position: fixed; z-index: 681; } .MultiStepBusinessAccountCreate .pinterestLogo { width: 55px; height: 55px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -62px -234px no-repeat; border-radius: 100%; height: 56px; margin: -30px auto; width: 56px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MultiStepBusinessAccountCreate .pinterestLogo { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -61px -231px; background-size: 399px 382px; } } .MultiStepBusinessAccountCreate .hidden { display: none; } .MultiStepBusinessAccountCreate .invisible { opacity: 0; pointer-events: none; } .MultiStepBusinessAccountCreate .interestsWrapper { -webkit-animation: scrollFooterWithBgGrid 35s linear; animation: scrollFooterWithBgGrid 35s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; background-color: #fff; bottom: -30px; height: 30px; left: 0; position: absolute; text-align: center; width: 100%; } .MultiStepBusinessAccountCreate .interestsWrapper .gradient { background-color: #cccccc; background: -webkit-linear-gradient(#999, #fff); background: linear-gradient(#999, #fff); height: 8px; } .MultiStepBusinessAccountCreate .interestsWrapper span, .MultiStepBusinessAccountCreate .interestsWrapper a { font-size: 10px; font-weight: bold; padding: 0 3px; position: relative; } .MultiStepBusinessAccountCreate .interestsWrapper span { color: #999; } .MultiStepBusinessAccountCreate .interestsWrapper a { color: #333; } .MultiStepBusinessAccountCreate .inspiredSearchBackgroundContainer { background-color: #e6e8e3; height: 100%; opacity: 0; position: absolute; -webkit-transition: all 1s; transition: all 1s; visibility: hidden; width: 100%; } .MultiStepBusinessAccountCreate .inspiredSearchBackgroundContainer .background { padding-bottom: 300px; } .MultiStepBusinessAccountCreate .inspiredSearchBackgroundContainer.active { opacity: 1; visibility: visible; } .MultiStepBusinessAccountCreate .inspiredSearchBackgroundContainer.animate_background .background { -webkit-animation: scrollBgGridLinks 35s linear; animation: scrollBgGridLinks 35s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .MultiStepBusinessAccountCreate .continueWithGoogle { margin-bottom: 33px; } .MultiStepBusinessAccountCreate .signupFormContainer { background-color: #fff; border-radius: 6px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); left: 50%; margin-left: -358px; margin-top: -340px; min-height: 440px; padding-bottom: 10px; position: absolute; top: 58%; width: 716px; z-index: 1; } .MultiStepBusinessAccountCreate .signupFormStep { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-top: 55px; text-align: center; width: auto; } .MultiStepBusinessAccountCreate .signupFormStep .title { color: #444; font-size: 27px; font-weight: bold; letter-spacing: -1px; margin-top: 50px; } .MultiStepBusinessAccountCreate .signupFormStep .subtitle { color: #444; font-size: 16px; font-weight: 500; } .MultiStepBusinessAccountCreate .signupFormStep .fields { margin: 30px auto 0; width: 268px; } .MultiStepBusinessAccountCreate.threeSteps .businessTypesList { -webkit-columns: 2; -moz-columns: 2; columns: 2; margin: 0 -60px; } .MultiStepBusinessAccountCreate.threeSteps .businessTypesList li:nth-child(5) { margin-bottom: 0; } .PartnerPerformanceHero .heroBasicContainer { background-color: #515860; } .PartnerPerformanceHero .heroContent.heroBasicContent { padding-bottom: 0; } .PartnerPerformanceHero .heroContent.heroBasicContent.threePinsWide { width: 736px; } .PartnerPerformanceHero .message { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; float: none; } .PartnerPerformanceHeroPins { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; padding: 20px; width: 50%; } .PartnerPerformanceHeroPins h4 { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; color: #333; font-size: 14px; font-weight: bold; } .PartnerPerformanceHeroPins ul { margin: 0; padding: 5px 0 0; } .PartnerPerformanceHeroPins ul li { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin: 0; padding: 0; } .PartnerPerformanceHeroPins ul li a, .PartnerPerformanceHeroPins ul li span { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; display: block; font-size: 14px; font-weight: bold; min-width: 42px; } .PartnerPerformanceHeroPins ul li a.topPinThumb, .PartnerPerformanceHeroPins ul li span.topPinThumb { height: 42px; padding: 5px 0; width: 42px; } .PartnerPerformanceHeroPins ul li a.topPinThumb img, .PartnerPerformanceHeroPins ul li span.topPinThumb img { border-radius: 3px; height: 42px; width: 42px; } .PartnerPerformanceHeroPins ul li a.topPinInfo, .PartnerPerformanceHeroPins ul li span.topPinInfo { color: #717171; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding-left: 10px; } .PartnerPerformanceHeroPins ul li .topPinButton { margin-bottom: 10px; margin-left: 10px; margin-top: 10px; } .PartnerPerformanceHeroStats { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; width: 50%; } .PartnerPerformanceHeroStats.noStatsAvailable { width: 0; } .PartnerPerformanceHeroStats div { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; font-weight: bold; padding: 20px; } .PartnerPerformanceHeroStats .performanceStatsAnalytics { color: #333; font-size: 18px; line-height: 30px; padding-right: 40px; } .PartnerPerformanceHeroStats .performanceStatsAnalytics a { color: #333; text-decoration: underline; } .PartnerPerformanceHeroStats .performanceStatsAnalytics a:hover { color: #717171; } .PartnerPerformanceHeroStats .performanceStatsAnalytics a.performanceStatsHighlight { color: #bd081c; text-decoration: none; } .PartnerPerformanceHeroStats .performanceStatsAnalytics a.performanceStatsHighlight:hover { color: #bd081c; text-decoration: underline; } .PartnerPerformanceHeroStats .performanceStatsTrend { color: #717171; font-size: 12px; line-height: 18px; padding-top: 0; } .PartnerPerformanceHeroStats .performanceStatsTrend a { color: #717171; } .PartnerPerformanceHeroStats .performanceStatsTrend a:hover { text-decoration: underline; } .PartnerPerformanceHeroStats .performanceDeltaIndicator { font-size: 133%; } .TopLevelNav { background-color: #fff; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.12); height: 64px; position: fixed; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; width: 100%; z-index: 671; /* make the buttons full-height when cloned so tooltips can attach without appearing underneath */ } .TopLevelNav .adminModeBackground { background-color: #dcdcdc; background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 20px, #fff 20px, #fff 40px); background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, #fff 20px, #fff 40px); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; } .TopLevelNav .adminModeBackground.writeMode { background-color: #ec7a71; } .TopLevelNav .headerContainer { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 11px; position: static; position: initial; } .TopLevelNav .businessLink { color: #818181; font-size: 16px; margin-left: 24px; white-space: nowrap; } .TopLevelNav .businessLink:hover { color: #333; } .TopLevelNav .siteLogo { color: #333; display: inline-block; font-size: 16px; line-height: 39px; } .TopLevelNav .siteLogo em { width: 28px; height: 28px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-partners-1x-9f7312af.png) -60px 0 no-repeat; display: inline-block; height: 28px; margin-left: 8px; vertical-align: middle; width: 28px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .TopLevelNav .siteLogo em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-partners-2x-19664238.png); background-position: -58px 0; background-size: 86px 72px; } } .TopLevelNav .siteLogo:hover { color: #666; } .TopLevelNav .leftNavElement { -ms-flex-preferred-size: auto; flex-basis: auto; -ms-flex-negative: 0; flex-shrink: 0; } .TopLevelNav .campbellHomefeedSearch { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: 48px; margin-top: -4px; width: 100%; } .TopLevelNav .campbellHomefeedSearch .campbellSearchForm { -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; } .TopLevelNav .campbellHomefeedSearch .DenzelReactBridge { width: 100%; } .TopLevelNav .campbellHomefeedSearch .DenzelReactBridge .SearchFormInReact { height: 34px; } .TopLevelNav .rightNav { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: 16px; } .TopLevelNav .rightNav .unauthButtons { margin-right: 8px; margin-top: 5px; } .TopLevelNav .rightNav .unauthButtons .NavigateButton { margin-left: 5px; } .TopLevelNav .mainSiteNavMenu { font-weight: bold; margin-left: 24px; } .TopLevelNav .leftNav { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; } .TopLevelNav .leftNav .logoButton { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .TopLevelNav.tutorialHighlight .headerContainer { margin-top: 0; } .TopLevelNav.tutorialHighlight .leftNav { margin-top: 0; } .TopLevelNav.tutorialHighlight .leftNav .Button.leftNavElement { height: 54px; } .TopLevelNav.tutorialHighlight .rightNav { margin-top: 0; } .TopLevelNav.tutorialHighlight .rightNav .CampbellRightHeader { height: 54px; } .TopLevelNav.tutorialHighlight .rightNav .CampbellRightHeader .navRightHeaderIcon { -ms-flex-item-align: center; align-self: center; } .TopLevelNav.tutorialHighlight .rightNav .CampbellRightHeader .navRightHeaderIcon .campbellAddPin { height: 54px; } .PintreeEst .pintreeEstWrapper { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; cursor: pointer; margin-bottom: 14px; padding: 10px; width: 216px; } .PintreeEst .pintreeEstTitle { font-size: 16px; font-weight: bold; text-align: center; } .PintreeEst .pintreeEstContentWrapper { padding: 10px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .Board .hoverMask { bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: background 0.04s linear; transition: background 0.04s linear; border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; z-index: 100; } .Board .boardLinkWrapper:hover .hoverMask { background: rgba(255, 255, 255, 0.08); } .Board .boardLinkWrapper:active .hoverMask { background: rgba(255, 255, 255, 0.08); } .Board .boardName { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555; display: block; font-size: 14px; font-weight: bold; height: 18px; line-height: 18px; margin: 0 3px 6px; position: relative; height: auto; } .Board .boardName.hasBoardContext { height: 40px; margin-left: 0; } .Board .boardName.hasBoardContext .authorName { height: 16px; } .Board .boardName .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .Board .boardName .authorName { -ms-flex-preferred-size: 100%; flex-basis: 100%; font-weight: normal; } .Board.noBoardName .boardName { display: none; } .Board.boardCoverImage { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; background-color: transparent; width: 236px; } .Board.boardCoverImage .boardLinkWrapper { padding: 10px 10px 0; } .Board.boardCoverImage img { border-radius: 2px; } .Board.boardCoverImage .boardCoverWrapper { position: relative; height: 111px; width: 216px; } .Board.boardCoverImage .boardCoverWrapper::after { border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: auto; left: 0; position: absolute; top: 0; width: 216px; } .Board.boardCoverImage .boardCoverWrapper .boardCover { border-radius: 3px; height: auto; width: 216px; } .Board.boardCoverImage .boardThumbs { margin: 4px 0; } .Board.boardCoverImage .boardThumbs::after { clear: both; content: ""; display: table; } .Board.boardCoverImage .boardThumbs li { position: relative; display: inline; float: left; height: 69.33333px; margin-left: 4px; position: relative; width: 69.33333px; } .Board.boardCoverImage .boardThumbs li::after { border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 69.33333px; left: 0; position: absolute; top: 0; width: 69.33333px; } .Board.boardCoverImage .boardThumbs li .thumb { border-radius: 3px; height: 69.33333px; width: 69.33333px; } .Board.boardCoverImage .boardThumbs li:first-child { margin-left: 0; } .Board.boardCoverImage .boardThumbs .followConfirmation { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-color: #ffa; bottom: 0; display: none; left: 0; padding: 10px; position: absolute; right: 0; top: 0; } .Board.boardCoverImage .boardThumbs.followConfirmed .followConfirmation { display: block; } .Board.boardCoverImage .Button { margin: 0 10px 10px; width: 216px; } .Board.homefeedBuilderView { margin: 0 8px 26px; width: 172px; } .Board.homefeedBuilderView .boardCover { height: 116px; width: 172px; } .Board.homefeedBuilderView .boardCoverWrapper { height: 116px; width: 172px; } .Board.homefeedBuilderView .boardThumbs { margin: 2px 0; } .Board.homefeedBuilderView .boardThumbs::after { clear: both; content: ""; display: table; } .Board.homefeedBuilderView .boardThumbs li { position: relative; display: inline; float: left; height: 56px; margin-left: 2px; position: relative; width: 56px; } .Board.homefeedBuilderView .boardThumbs li::after { border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 56px; left: 0; position: absolute; top: 0; width: 56px; } .Board.homefeedBuilderView .boardThumbs li .thumb { border-radius: 3px; height: 56px; width: 56px; } .Board.homefeedBuilderView .boardThumbs li:first-child { margin-left: 0; } .Board.homefeedBuilderView .boardThumbs .followConfirmation { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-color: #ffa; bottom: 0; display: none; left: 0; padding: 10px; position: absolute; right: 0; top: 0; } .Board.homefeedBuilderView .boardThumbs.followConfirmed .followConfirmation { display: block; } .Board.exploreTabView { margin: 0 17px 34px; width: 218px; } .Board.exploreTabView .boardCover { height: 146px; width: 218px; } .Board.exploreTabView .boardCoverWrapper { height: 146px; width: 218px; } .Board.exploreTabView .boardThumbs { margin: 3px 0; } .Board.exploreTabView .boardThumbs::after { clear: both; content: ""; display: table; } .Board.exploreTabView .boardThumbs li { position: relative; display: inline; float: left; height: 70px; margin-left: 3px; position: relative; width: 70px; } .Board.exploreTabView .boardThumbs li::after { border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 70px; left: 0; position: absolute; top: 0; width: 70px; } .Board.exploreTabView .boardThumbs li .thumb { border-radius: 3px; height: 70px; width: 70px; } .Board.exploreTabView .boardThumbs li:first-child { margin-left: 0; } .Board.exploreTabView .boardThumbs .followConfirmation { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-color: #ffa; bottom: 0; display: none; left: 0; padding: 10px; position: absolute; right: 0; top: 0; } .Board.exploreTabView .boardThumbs.followConfirmed .followConfirmation { display: block; } .Board.homefeedBuilderView, .Board.exploreTabView { box-shadow: none; } .Board.homefeedBuilderView .followMask, .Board.exploreTabView .followMask { background-color: rgba(0, 0, 0, 0.7); border-radius: 4px; height: 100%; opacity: 0; position: absolute; -webkit-transition: visibility 0s .2s, opacity .2s linear; transition: visibility 0s .2s, opacity .2s linear; visibility: hidden; width: 100%; z-index: 1; } .Board.homefeedBuilderView .followMask .followMaskIcon, .Board.exploreTabView .followMask .followMaskIcon { width: 59px; height: 42px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -215px 0 no-repeat; display: inline-block; margin-left: 57px; margin-top: 65px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Board.homefeedBuilderView .followMask .followMaskIcon, .Board.exploreTabView .followMask .followMaskIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -128px -35px; background-size: 249px 231px; } } .Board.homefeedBuilderView .followMask.visible, .Board.exploreTabView .followMask.visible { opacity: 1; -webkit-transition: opacity .2s linear; transition: opacity .2s linear; visibility: visible; } .Board.homefeedBuilderView img, .Board.exploreTabView img { border-radius: 3px; } .Board.homefeedBuilderView .boardImagesWrapper, .Board.exploreTabView .boardImagesWrapper { position: relative; } .Board.homefeedBuilderView .boardCover, .Board.exploreTabView .boardCover { border-radius: 3px; } .Board.homefeedBuilderView .boardCoverWrapper, .Board.exploreTabView .boardCoverWrapper { border-radius: 3px; position: relative; } .Board.homefeedBuilderView .boardLinkWrapper:hover .hoverMask, .Board.exploreTabView .boardLinkWrapper:hover .hoverMask { background: rgba(0, 0, 0, 0.15); } .Board.homefeedBuilderView .boardLinkWrapper:active .hoverMask, .Board.exploreTabView .boardLinkWrapper:active .hoverMask { background: rgba(0, 0, 0, 0.25); } .Board.homefeedBuilderView .hoverMask, .Board.exploreTabView .hoverMask { box-shadow: none; } .Board.homefeedBuilderView a, .Board.exploreTabView a { margin-bottom: 8px; } .Board.boardCoverImage, .Board.homefeedBuilderView, .Board.exploreTabView { position: relative; } .Board.boardCoverImage .boardLinkWrapper, .Board.homefeedBuilderView .boardLinkWrapper, .Board.exploreTabView .boardLinkWrapper { display: block; } .Board.boardCoverImage a, .Board.homefeedBuilderView a, .Board.exploreTabView a { color: #555; display: block; position: relative; } .Board.boardCoverImage .BoardIcons, .Board.homefeedBuilderView .BoardIcons, .Board.exploreTabView .BoardIcons { float: right; } .Board.boardCoverImage .boardCoverWrapper, .Board.homefeedBuilderView .boardCoverWrapper, .Board.exploreTabView .boardCoverWrapper { overflow: hidden; background-color: #eee; clear: both; } .Board.boardCoverImage .boardPinCount, .Board.homefeedBuilderView .boardPinCount, .Board.exploreTabView .boardPinCount { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-radius: 2px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.3); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7); background-color: #000; background-color: rgba(68, 68, 68, 0.7); bottom: 3px; color: #fff; padding: 3px 6px; position: absolute; left: 3px; } .Board .thumbImageWrapper { position: relative; width: 50px; } .Board .thumbImageWrapper::after { border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 50px; left: 0; position: absolute; top: 0; width: 50px; } .Board .thumbImageWrapper img { border-radius: 3px; height: 50px; width: 50px; } .Board.selectable { cursor: pointer; } .Board.selectable:hover { box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3); } .Board.selectable:active { background-color: #f3f3f3; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.13); } .Board.boardPinsGrid { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; background: #fff; max-height: 552px; max-width: 236px; padding: 10px; } .Board.boardPinsGrid .pinGridWrapper { overflow-x: hidden; -webkit-overflow-scrolling: touch; overflow-y: scroll; max-height: 459px; position: relative; top: -2px; } .Board.boardPinsGrid .pinGridWrapper .Grid { margin: 0; width: 216px; } .Board.boardPinsGrid .pinGridWrapper .Grid.loading { height: 459px; } .Board.boardPinsGrid .pinGridWrapper .item { margin: 0 3px 3px 0; opacity: 0.5; } .Board.boardPinsGrid .pinGridWrapper .item:hover, .Board.boardPinsGrid .pinGridWrapper .item.activeItem { opacity: 1; } .Board.boardPinsGrid .pinGridWrapper .item:hover .hoverMask, .Board.boardPinsGrid .pinGridWrapper .item.activeItem .hoverMask { box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; -webkit-transition-property: box-shadow; transition-property: box-shadow; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } .Board.boardPinsGrid.short .pinGridWrapper { max-height: 229.5px; } .Board.boardPinsGrid.short .pinGridWrapper .Grid.loading { height: 229.5px; } .Board.boardPinsGrid .item { width: 70px; } .Board.boardPinsGrid .pinGridWrapper { background: url(https://s.pinimg.com/webapp/style/images/boardPinsGridShadowBottom-a1fc902f.png) repeat-x left bottom; } .Board.boardPinsGrid.error { padding: 10px; } .Board.boardPinsGrid.noShadow .boardHeader, .Board.boardPinsGrid.noShadow .pinGridWrapper { background: #fff; } .Board.boardPinsGrid .boardHeader { overflow: hidden; background: url(https://s.pinimg.com/webapp/style/images/boardPinsGridShadowTop-048a8c89.png) repeat-x bottom left; padding-bottom: 11px; } .Board.boardPinsGrid .BoardIcons { float: right; padding: 4px 4px 0; } .Board.follow_view { font-size: 11px; line-height: 1.2em; padding: 5px 14px; position: relative; } .Board.follow_view::after { clear: both; content: ""; display: table; } .Board.follow_view .boardFollowImg { border-radius: 2px; float: left; height: 30px; margin-right: 5px; width: 30px; } .Board.follow_view:hover { background: #f3f3f3; } .Board.follow_view:hover .dismiss { width: 9px; height: 10px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -235px -206px no-repeat; cursor: pointer; display: block; margin-right: 14px; position: absolute; right: 0; top: 40%; } .SuggestedBoardsDropdown .Board.follow_view:hover .dismiss { display: none; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Board.follow_view:hover .dismiss { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px -89px; background-size: 428px 427px; } } .Board.follow_view .BoardFollowButton { color: #bd081c; } .Board.follow_view .BoardFollowButton:hover { text-decoration: underline; } .Board.follow_view .BoardFollowButton.disabled { color: #717171; } .Board.follow_view .BoardFollowButton.disabled:hover { cursor: default; text-decoration: none; } .Board.follow_view .followBoardName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 75%; } .Board.follow_view .followBoardName a { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #717171; font-size: 11px; font-weight: 700; } .Board.follow_view .followConfirmation { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-color: #ffa; bottom: 0; display: none; left: 0; padding: 10px; position: absolute; right: 0; top: 0; } .Board.follow_view.followConfirmed .followConfirmation { display: block; } .Board.follow_view::before { box-shadow: none; } .Board .debugMacro { padding: 2px; } .Board.noButton { padding-bottom: 6px; } .Board.noContainer { box-shadow: None; } .Board.boardTileImages .tileImages { border-radius: 6px; height: 213px; margin: 10px; overflow: hidden; } .Board.boardTileImages .tileImages img { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); display: inline-block; height: 104px; position: relative; width: 104px; } .Board.boardTileImages .tileImages img:nth-child(1) { border-top-left-radius: 6px; margin: 0 3px 5px 0; } .Board.boardTileImages .tileImages img:nth-child(2) { border-top-right-radius: 6px; margin-bottom: 5px; } .Board.boardTileImages .tileImages img:nth-child(3) { border-bottom-left-radius: 6px; margin-right: 3px; } .Board.boardTileImages .tileImages img:nth-child(4) { border-bottom-right-radius: 6px; } .Board.brioView { padding: 0 8px; } .Board.brioView .tileImages { height: 173px; position: relative; } .Board.brioView .tileImages:hover .hoverMask { background: rgba(0, 0, 0, 0.15); } .Board.brioView .tileImages:active .hoverMask { background: rgba(0, 0, 0, 0.25); } .Board.brioView .tileImages .hoverMask { bottom: 0; left: 0; position: absolute; right: 0; top: 0; border-radius: 8px; } .Board.brioView img { float: left; height: 85px; width: 85px; } .Board.brioView img:nth-child(1) { border-top-left-radius: 8px; margin: 0 1px 1px 0; } .Board.brioView img:nth-child(2) { border-top-right-radius: 8px; margin: 0 0 1px 1px; } .Board.brioView img:nth-child(3) { border-bottom-left-radius: 8px; clear: left; margin: 1px 1px 0 0; } .Board.brioView img:nth-child(4) { border-bottom-right-radius: 8px; margin: 1px 0 0 1px; } .Board.brioView .tileFooter { margin-bottom: 8px; } .Board.brioView .tileFollowButton { margin-bottom: 32px; } .Board.brioView .followMask { background-color: rgba(0, 0, 0, 0.7); border-radius: 8px; display: none; height: 100%; position: absolute; width: 100%; } .Board.brioView .followMask .followMaskIcon { width: 59px; height: 42px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -215px 0 no-repeat; display: inline-block; margin-left: 57px; margin-top: 65px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .Board.brioView .followMask .followMaskIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -128px -35px; background-size: 249px 231px; } } .Board.brioView .followMask.visible { display: block; } /* desktop.scss */ .item > .Board { cursor: pointer; margin: -10px; padding: 10px; } .item > .Board::before { background: rgba(0, 0, 0, 0.05); border-radius: 8px; content: " " !important; height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; -webkit-transform: scale(0.96); transform: scale(0.96); width: 100%; z-index: 3; } .item > .Board:not(.boardWrapperDisableHover):hover::before { -webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; } .Board.homefeedBuilderView { margin-bottom: 16px; margin-left: 0; margin-right: 0; padding-left: 7px; padding-right: 7px; } .Board.boardCoverImage, .Board.exploreTabView { border: none; box-shadow: none; width: 236px; } .Board.exploreTabView { width: 236px; } .Board.exploreTabView .boardImagesWrapper { margin: 0 auto; } .Board.boardCoverImage .boardCoverWrapper, .Board.exploreTabView .boardCoverWrapper { background-color: #efefef; border-radius: 8px 8px 0 0; height: 111px; width: auto; } .Board.boardCoverImage .boardCoverWrapper::after, .Board.exploreTabView .boardCoverWrapper::after { background: rgba(0, 0, 0, 0.02); border-radius: 8px 8px 0 0; box-shadow: none; height: 100%; width: 100%; } .Board.boardCoverImage .boardCoverWrapper .boardCover, .Board.exploreTabView .boardCoverWrapper .boardCover { border-radius: 8px 8px 0 0; width: 236px; } .Board.boardCoverImage .boardCoverWrapper .boardCover[src=""], .Board.exploreTabView .boardCoverWrapper .boardCover[src=""] { visibility: hidden; } .Board.boardCoverImage .boardThumbs, .Board.exploreTabView .boardThumbs { display: -webkit-box; display: -ms-flexbox; display: flex; height: 111px; margin-bottom: 0; margin-top: 2px; width: 236px; } .Board.boardCoverImage .boardThumbs li, .Board.exploreTabView .boardThumbs li { background-color: #efefef; height: 100%; margin-left: 2px; width: 100%; } .Board.boardCoverImage .boardThumbs li::after, .Board.exploreTabView .boardThumbs li::after { background: rgba(0, 0, 0, 0.02); box-shadow: none; height: 100%; width: 100%; } .Board.boardCoverImage .boardThumbs li .thumb, .Board.exploreTabView .boardThumbs li .thumb { border-radius: 0; height: 100%; width: 100%; } .Board.boardCoverImage .boardThumbs li:first-child, .Board.exploreTabView .boardThumbs li:first-child, .Board.boardCoverImage .boardThumbs li:first-child::after, .Board.exploreTabView .boardThumbs li:first-child::after { border-bottom-left-radius: 8px; margin-left: 0; } .Board.boardCoverImage .boardThumbs li:first-child .thumb, .Board.exploreTabView .boardThumbs li:first-child .thumb { border-bottom-left-radius: 8px; } .Board.boardCoverImage .boardThumbs li:nth-child(2), .Board.exploreTabView .boardThumbs li:nth-child(2), .Board.boardCoverImage .boardThumbs li:nth-child(2)::after, .Board.exploreTabView .boardThumbs li:nth-child(2)::after { border-bottom-right-radius: 8px; } .Board.boardCoverImage .boardThumbs li:nth-child(2) .thumb, .Board.exploreTabView .boardThumbs li:nth-child(2) .thumb { border-bottom-right-radius: 8px; } .Board.boardCoverImage .boardThumbs li:nth-child(3), .Board.exploreTabView .boardThumbs li:nth-child(3) { display: none; } .Board.boardCoverImage .boardThumbs li::after, .Board.exploreTabView.boardThumbs li::after { box-shadow: none; } .Board.boardCoverImage .boardLinkWrapper, .Board.exploreTabView .boardLinkWrapper { /* Setting this to flex allows us to re-order the items */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0; padding: 0; } .Board.boardCoverImage .Button, .Board.exploreTabView .Button { margin: 0; width: 236px; } .Board .boardName { -webkit-box-align: center; -ms-flex-align: center; align-items: center; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0; -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } .Board .boardName .name { -ms-flex-preferred-size: 70%; flex-basis: 70%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ } .Board .boardName .boardPinCount { background-color: transparent; box-shadow: none; color: #b5b5b5; -ms-flex-preferred-size: 100%; flex-basis: 100%; font-weight: normal; left: 0; -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; padding: 0; position: relative; text-shadow: none; /* stylelint-disable-next-line at-rule-no-unknown */ } .Board .boardName .boardPinCount .PinCount { /* stylelint-disable-next-line at-rule-no-unknown */ } .Board .boardName .boardPinCount .PinCount .value { font-weight: bold; } .Board .boardName > .secretIcon { -ms-flex-preferred-size: auto; flex-basis: auto; /* stylelint-disable-next-line at-rule-no-unknown */ } .Board .boardName .BoardIcons.pinCreate { -ms-flex-preferred-size: auto; flex-basis: auto; margin-left: auto; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .Board .boardName .BoardIcons.pinCreate .secretIcon { display: none; } .Board .boardName .User.boardRepTitle.hasText.thumb, .Board .boardName .User.exploreTabTitle.hasText.thumb { -ms-flex-preferred-size: 176px; flex-basis: 176px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; /* stylelint-disable-next-line at-rule-no-unknown */ } .Board .hoverMask { display: none; } .Board .boardName.hasBoardContext { overflow: visible; /* stylelint-disable-next-line at-rule-no-unknown */ } .Board .boardName.hasBoardContext .User.boardRepTitle, .Board .boardName.hasBoardContext .User.exploreTabTitle { overflow: visible; } .Board .boardName.hasBoardContext .User.boardRepTitle .thumbImageWrapper, .Board .boardName.hasBoardContext .User.exploreTabTitle .thumbImageWrapper { height: 60px; left: 8px; position: absolute; width: 60px; z-index: 3; } .Board .boardName.hasBoardContext .User.boardRepTitle .thumbImageWrapper img, .Board .boardName.hasBoardContext .User.exploreTabTitle .thumbImageWrapper img { border: 2px solid #fff; height: 100%; width: 100%; } .Board .boardName.hasBoardContext .User.boardRepTitle .title, .Board .boardName.hasBoardContext .User.exploreTabTitle .title { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* stylelint-disable-next-line at-rule-no-unknown */ color: #555; } .Board .boardName.hasBoardContext .User.boardRepTitle .fullname, .Board .boardName.hasBoardContext .User.exploreTabTitle .fullname { color: #555; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* stylelint-disable-next-line at-rule-no-unknown */ } .Board .boardName.hasBoardContext .User.boardRepTitle > *, .Board .boardName.hasBoardContext .User.exploreTabTitle > * { max-width: 200px; } .Board .boardName.hasBoardContext .boardPinCount, .Board .boardName.hasBoardContext .BoardIcons.pinCreate { display: none; } @media (min-width: 360px) { .Board .boardName.hasBoardContext .User.boardRepTitle .thumbImageWrapper, .Board .boardName.hasBoardContext .User.exploreTabTitle .thumbImageWrapper { bottom: 45px; } } @media (min-width: 800px) { .Board .boardName.hasBoardContext .User.boardRepTitle .thumbImageWrapper, .Board .boardName.hasBoardContext .User.exploreTabTitle .thumbImageWrapper { bottom: 55px; } } .BoardCoverEdit { position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .BoardCoverEdit .next, .BoardCoverEdit .previous { border: 0; display: block; height: 46px; position: absolute; top: 120px; width: 46px; } .BoardCoverEdit .previous { left: 100px; } .BoardCoverEdit .next { right: 100px; } .BoardCoverEditPage { width: 708px; } .BoardCoverEditPage .boardCoverEditPageContainer { width: 708px; } .BoardCoverEditPage .standardForm h1 { font-weight: normal; } .BoardCreate { width: 600px; } .BoardCreate .createTitle { font-weight: bold; } .BoardCycler .boardName { color: #333; margin: 0 18px 6px; } .BoardCycler:hover .navigation { opacity: .5; } .BoardEdit { max-width: 600px; width: 100%; } .BoardEdit .BoardInvite .User { overflow: hidden; } .BoardEdit .BoardInvite .Button { float: right; margin-left: 10px; margin-top: 3px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .BoardEditBase .User { padding: 4px 0; width: auto; } .BoardEditBase .boardEditCollaborators { -webkit-overflow-scrolling: touch; overflow-y: auto; margin-right: -11px; max-height: 160px; } .BoardEditBase .boardEditCollaborators::-webkit-scrollbar { height: auto; width: 11px; -webkit-appearance: none; } .BoardEditBase .boardEditCollaborators::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.5); border: 2px solid #fff; border-radius: 8px; -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); } .BoardEditBase .boardEditCollaborators .subtitle { white-space: normal !important; } .BoardEditBase.multiSelect .boardEditCollaborators { display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: 0; max-height: 208px; } .BoardEditBase .boardEditDescription { min-height: 58px; } .BoardEditBase .boardCollaboratorsWrapper { overflow: visible; } .BoardEditBase .learnAboutSecret { float: right; margin-top: 7px; } .BoardEditBase .standardForm h1 { font-weight: normal; position: relative; } .BoardEditBase .alert { background-color: #ffa; font-size: 120%; margin: 7px 0; padding: 15px; } .BoardEditBase a.learnAboutBoardInvites { display: block; float: none; margin: 3px 0; } .BoardEditBase a.learnAboutBoardInvites:focus { outline: none; } .BoardEditBase .userSelect.Typeahead { box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25); margin: 0 0 3px 2px; } .BoardEditBase .userSelect.Typeahead li:first-child { padding-top: 4px; } .BoardEditBase .userSelect.Typeahead li:last-child { padding-bottom: 4px; } .BoardEditBase .userSelect.TypeaheadField input { width: 100%; } .BoardEditBase.simple .descriptionWrapper, .BoardEditBase.simple .categoryWrapper, .BoardEditBase.simple .mapToggleWrapper { display: none; } /* desktop.scss */ .BoardEditBase .standardForm h1 { padding-right: 42px; } .BoardEditBase .learnMore { max-width: 331px; } .BoardFollowers.inline { display: inline-block; vertical-align: top; } .BoardFollowers.large { width: 435px; } .BoardFollowers.large .User { margin: 4px 0; padding: 4px 20px; width: 395px; } .BoardFollowers.large .PagedGrid { -webkit-overflow-scrolling: touch; overflow: auto; max-height: 570px; } @media (min-height: 1110px) { .BoardFollowers.large .PagedGrid { max-height: 720px; } } .BoardFollowers.large .moreItems { margin: 0 auto 13px auto; width: 200px; } .BoardFollowers.edit .remove { float: right; } .BoardFollowers.edit .User { padding: 10px; } .BoardFollowers .headerText { color: #6e6e6e; font-size: 12px; font-weight: bold; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .BoardHeader { background-color: #fff; padding-bottom: 64px; position: relative; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; width: auto; } .BoardHeader h1 { color: #333; color: rgba(21, 21, 21, 0.8); font-size: 47px; font-weight: bold; line-height: 52px; margin-left: auto; margin-right: auto; max-width: 736px; text-align: center; word-wrap: break-word; margin: 34px auto 0; } .ja .BoardHeader h1 { font-size: 36px; } .BoardHeader .boardName { margin-top: 0; padding-top: 34px; } .BoardHeader .divider { margin-top: 31px; } .BoardHeader .divider hr { background: #eee; border: 0; height: 1px; margin: 0; width: 100%; } .ja .BoardHeader .description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .BoardHeader .pinsAndFollowerCount { font-size: 0; } .BoardHeader .pinsAndFollowerCount .dot { color: #6e6e6e; font-size: 12px; font-weight: bold; height: 100%; margin: 0 7px; vertical-align: bottom; } .BoardHeader .pinsAndFollowerCount .followerCount { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #777; font-weight: bold; } .BoardHeader .pinsAndFollowerCount .followerCount:hover { color: #444; } .BoardHeader .pinsAndFollowerCount .pinCount { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #777; display: inline-block; font-size: 12px; font-weight: bold; vertical-align: bottom; } .BoardHeader .pinsAndFollowerCount .buttonText { font-size: 12px; padding: 0; } .BoardHeader .secret { color: #999; font-size: 11px; font-weight: 700; line-height: 19px; margin: 16px 0 21px; padding: 0; position: relative; text-align: center; } .BoardHeader .secretIcon { width: 9px; height: 10px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -317px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; margin: -2px 2px 0 0; position: static; vertical-align: middle; } .BoardHeader .annotations { font-size: 14px; line-height: 150%; margin: 10px auto 20px; text-align: center; } .BoardHeader .annotations .annotationHeader { display: inline; font-weight: bold; margin: 2px 5px; } .BoardHeader .annotations .annotationText { background-color: rgba(255, 255, 255, 0.68); border-radius: 2px; color: #777; display: inline; font-weight: normal; margin: 2px 2px 20px; padding: 3px 6px; } .BoardHeader .annotations a { font-weight: normal; } .BoardHeader .collaboratorInfo { display: -webkit-box; display: -ms-flexbox; display: flex; } .BoardHeader .boardHeaderWrapper { position: relative; } .BoardHeader .boardCollaboratorsContainer { display: -webkit-box; display: -ms-flexbox; display: flex; } .BoardHeader.invisible { opacity: 0; } .BoardHeader.unauthBrio { margin-bottom: 16px; padding-bottom: 32px; text-align: left; text-align: initial; } .BoardHeader.unauthBrio .centeredWithinWrapper { position: relative; } .BoardHeader.unauthBrio .boardTitle, .BoardHeader.unauthBrio .boardStats, .BoardHeader.unauthBrio .boardDescription { margin-left: 7px; } .BoardHeader.unauthBrio .boardTitle { color: #555; font-size: 48px; font-weight: bold; line-height: 58px; margin: 0; padding-top: 20px; text-align: left; text-align: initial; } .BoardHeader.unauthBrio .boardStats { color: #555; font-size: 14px; margin-bottom: 20px; margin-top: 9px; } .BoardHeader.unauthBrio .boardStats .bold { font-weight: bold; } .BoardHeader.unauthBrio .boardDescription { color: #555; font-size: 18px; font-weight: bold; line-height: 16px; margin-top: 11px; max-width: 618px; } .BoardHeader.unauthBrio .pinCount, .BoardHeader.unauthBrio .followerCount { display: inline-block; } .BoardHeader.unauthBrio .followerCount { margin-left: 32px; } .BoardHeader.unauthBrio .RelatedInterestsSection { margin-top: 56px; } .BoardHeader.unauthBrio .BoardFollowButton { height: 36px; margin-right: 7px; position: absolute; right: 0; top: 102px; } .BoardHeader.showOpenNav { padding-bottom: 5px; } .BoardHeader.showOpenNav .centeredWithinWrapper { width: inherit; } .BoardHeader.showOpenNav .openNavSubtitle { color: #555; font-size: 14px; padding-left: 8px; } .BoardHeader.showOpenNav .boardTitle { padding: 32px 5px; } .BoardHeader.showOpenNav .RelatedInterestsSection { margin-top: 16px; } /* desktop.scss */ .BoardHeader { padding-bottom: 0; text-align: left; } .BoardHeader .boardHeaderWrapper { box-sizing: border-box; margin-top: 76px; max-width: 744px; width: auto; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ } .BoardHeader .boardName { color: #555; margin-left: 0; margin-right: 0; max-width: auto; padding-left: 0; padding-right: 0; padding-top: 0; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ } .BoardHeader .description { color: #555; margin-bottom: 0; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ } .BoardHeader .divider { display: none; } .BoardHeader .Button.followerCount .buttonText { color: #555; } .BoardHeader .Button.followerCount .buttonText .value, .BoardHeader .bold-value .value { font-weight: bold; } .BoardHeader .secret { display: none; } .BoardHeader .secretIcon { margin-right: auto; padding: 0; width: 60px; height: 60px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) 0 -172px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .BoardHeader .secretIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: 0 -170px; background-size: 399px 382px; } } .BoardHeader .thumbImageWrapper, .BoardHeader .thumbImageWrapper::after, .BoardHeader .thumbImageWrapper img { height: 60px !important; width: 60px !important; } .BoardHeader .belowBoardNameContainer { overflow: hidden; } .BoardHeader .belowBoardNameContainer .followerCount, .BoardHeader .belowBoardNameContainer .pinCount { color: #555; margin-bottom: 0; margin-top: 0; /* stylelint-disable-next-line at-rule-no-unknown */ } .BoardHeader .belowBoardContainerSecret { padding-left: 0; padding-right: 0; width: 66.66667%; } .BoardHeader .belowBoardContainerLeft { float: left; padding-left: 0; padding-right: 0; width: 50%; } .BoardHeader .bottomBoardRightContainer { float: right; width: 50%; } .BoardHeader .bottomBoardRightContainer, .BoardHeader .bottomBoardRightContainerSecret { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: right; } .BoardIcons { display: inline-block; } .BoardIcons .secretIcon, .BoardIcons .collaborativeIcon { display: inline-block; margin-right: 1px; } .BoardIcons .secretIcon { width: 9px; height: 10px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -317px no-repeat; margin-top: -1px; } .BoardIcons .collaborativeIcon { width: 18px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -347px -325px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .BoardIcons .collaborativeIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -264px -320px; background-size: 399px 382px; } } .BoardIcons.pinCreate { height: 16px; } .BoardIcons.pinCreate .secretIcon, .BoardIcons.pinCreate .collaborativeIcon { margin-right: 2px; } .BoardIcons.pinCreate span:last-child { margin-right: 0; } .BoardIcons.pinCreate .secretIcon { width: 16px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -282px -210px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .BoardIcons.pinCreate .secretIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px -342px; background-size: 399px 382px; } } .BoardIcons.pinCreate .collaborativeIcon { width: 16px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -345px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .BoardIcons.pinCreate .collaborativeIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px -240px; background-size: 399px 382px; } } .BoardIcons.light .secretIcon { width: 9px; height: 10px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -329px no-repeat; } .BoardIcons.light .collaborativeIcon { width: 18px; height: 10px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -363px no-repeat; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .BoardInfoBar { background-color: #fff; bottom: 0; height: 64px; overflow: hidden; text-align: center; width: 100%; z-index: 103; } .BoardInfoBar.boardHeaderBackground { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.1); } .BoardInfoBar .infoBarWrapper { position: relative; } .BoardInfoBar li { border-left: 1px solid #cdcdcd; float: left; } .BoardInfoBar .boardDirectButton, .BoardInfoBar .boardAddCollaboratorButton, .BoardInfoBar .movePinsButton { margin-right: 5px; position: relative; z-index: 1; } .BoardInfoBar .collaborators { color: #444; float: left; font-weight: normal; } .BoardInfoBar .collaborators .User { float: left; margin-left: 3px; margin-right: 2px; margin-top: 1px; } .BoardInfoBar .collaborators.showName .User { display: block; margin: 0 15px 0 0; position: relative; text-align: left; } .BoardInfoBar .collaborators .BoardCollaborators { padding: 0; } .BoardInfoBar .collaboratorInfo { float: left; } .BoardInfoBar .boardButtons { float: right; line-height: 0; margin: 16px 0 0; margin-right: 16px; } .BoardInfoBar .boardButtons > * { height: 31px; } .BoardInfoBar .boardButtons .facebookShare { margin-left: 4px; margin-right: 0; } .BoardInfoBar .boardButtons .userProfileMenu { border-radius: 3px; height: 32px; left: 4px; position: relative; } .BoardInfoBar .smallBoardName { color: #333; color: rgba(21, 21, 21, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 26px; left: 50%; margin-left: -175px; opacity: 0; position: absolute; top: -50px; width: 350px; } @media (min-width: 0px) and (max-width: 999px) { .BoardInfoBar .smallBoardName { font-size: 22px; margin-left: -150px; margin-top: 2px; width: 300px; } } .BoardInfoBar .smallBoardName.transitionIn { opacity: 1; -webkit-transform: translate(0, 66px); transform: translate(0, 66px); -webkit-transition: 300ms ease-out; transition: 300ms ease-out; } .BoardInfoBar .smallBoardName.transitionOut { opacity: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: 300ms ease-out; transition: 300ms ease-out; } .BoardInfoBar .pinsAndFollowerCount { margin: 0 auto; position: relative; top: 16px; width: 154px; } .BoardInfoBar .pinsAndFollowerCount.withDoneFilter { width: 231px; } .BoardInfoBar .pinsAndFollowerCount.withDoneFilter .active .label, .BoardInfoBar .pinsAndFollowerCount.withDoneFilter .active .value { color: #bd081c; } .BoardInfoBar .pinsAndFollowerCount.withDoneFilter.hideFollowCount { width: 154px; } .BoardInfoBar .pinsAndFollowerCount.hideFollowCount { width: 77px; } @media (min-width: 0px) and (max-width: 999px) { .BoardInfoBar .pinsAndFollowerCount.hideFollowCount { width: 65px; } } .BoardInfoBar .pinsAndFollowerCount li { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #fff; border: 0; float: left; line-height: 14px; margin-right: -1px; text-align: center; width: 77px; } @media (min-width: 0px) and (max-width: 999px) { .BoardInfoBar .pinsAndFollowerCount li { width: 65px; } } .BoardInfoBar .pinsAndFollowerCount li span:last-child { display: inline; } .BoardInfoBar .pinsAndFollowerCount .value { color: #aaa; display: block; font-size: 16px; font-weight: bold; padding-bottom: 3px; } .BoardInfoBar .pinsAndFollowerCount .value:hover, .BoardInfoBar .pinsAndFollowerCount .value.active { background: none; box-shadow: 0; } .BoardInfoBar .pinsAndFollowerCount .label { color: #9a9a9a; display: block; font-size: 11px; font-weight: normal; } .BoardInfoBar .pinsAndFollowerCount .label:hover, .BoardInfoBar .pinsAndFollowerCount .label.active { background: none; box-shadow: 0; } @media (min-width: 0px) and (max-width: 999px) { .BoardInfoBar .pinsAndFollowerCount .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 65px; } } .BoardInfoBar.fixedHeader { position: fixed; top: 54px; -webkit-transform: translateZ(0); transform: translateZ(0); z-index: 103; } .hasKLPBar .BoardInfoBar.fixedHeader { top: 98px; } .hasColorfulKLPBar .BoardInfoBar.fixedHeader { top: 134px; } .BoardInfoBar.fixedHeader .boardAddCollaboratorsButton, .BoardInfoBar.fixedHeader .boardSettingsButton, .BoardInfoBar.fixedHeader .collaborators.showName .User { z-index: 1; } .BoardInfoBar .boardFollowButtonWrapper { float: right; } /* desktop.scss */ .BoardInfoBar { background-color: rgba(255, 255, 255, 0.95); bottom: auto; height: auto; position: fixed; top: 58px; } @media (min-width: 800px) { .BoardInfoBar { top: 64px; } } .BoardInfoBar .BoardCollaborators { float: left; } .BoardInfoBar .boardButtons { margin-top: 0; } .BoardInfoBar .boardButtons > * { height: auto; /* stylelint-disable-next-line at-rule-no-unknown */ } .BoardInfoBar .boardButtons .facebookShare { margin-left: 0; } .BoardInfoBar .infoBarWrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; text-align: left; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ } .BoardInfoBar .infoBarWrapper .infoBarWrapperAuto { /* Fix for Chrome 44 bug: https://code.google.com/p/chromium/issues/detail?id=506893 */ -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; /* 1 */ min-width: 0; /* 1 */ } .BoardInfoBar .infoBarWrapper.centeredWithinWrapper.gridWidth { max-width: 744px; width: auto; } .BoardInfoBar .pinsAndFollowerCount { top: auto; } .BoardInfoBar .pinsAndFollowerCount .value { color: #555; display: inline; padding-bottom: 0; /* stylelint-disable-next-line at-rule-no-unknown */ } .BoardInfoBar .pinsAndFollowerCount .value::after { content: " "; } .BoardInfoBar .pinsAndFollowerCount .label { /* stylelint-disable-next-line at-rule-no-unknown */ color: #555; } .BoardInfoBar .pinsAndFollowerCount .Button.followerCount { display: none; } .BoardInfoBar .pinsAndFollowerCount > ul > li { margin-right: 0; width: auto; /* stylelint-disable-next-line at-rule-no-unknown */ } .BoardInfoBar .smallBoardName { /* stylelint-disable-next-line at-rule-no-unknown */ margin-top: 8px; text-align: center; } .BoardInfoBar.boardHeaderBackground { box-shadow: none; } .BoardInfoBar.placeBoard { border-radius: 0 0 6px 6px; } .BoardInfoBar.placeBoard .boardButtons { margin-right: 14px; } .BoardInfoBar.placeBoard .collaborators { margin-left: 14px; } .BoardInfoBar.placeBoard.collapsed { border-radius: 0; visibility: visible; } .BoardInfoBar.placeBoard.collapsed .boardButtons { margin-right: 0; } .BoardInfoBar.placeBoard.collapsed .collaborators { margin-left: 0; } .BoardLabel { text-align: left; /* stylelint-disable-next-line at-rule-no-unknown */ } .BoardLabel .nameAndIcons { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .BoardLabel .nameAndIcons .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 80%; width: auto; } .BoardLabel .BoardIcons { float: right; max-width: 20%; } .BoardLabel .highlightMatchText { border-bottom: 1px solid #333; font-style: normal; padding-bottom: 1px; } .BoardLabel.normal { font-size: 16px; line-height: 36px; } .BoardLabel.normal .boardImg { border-radius: 3px; float: left; height: 36px; margin-right: 10px; vertical-align: middle; width: 36px; } .BoardLabel.normal .boardImg:not(.emptyBoardImg) { background-position: 50% 50%; background-size: cover; } .BoardLabel.pinCreate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; line-height: 36px; } .BoardLabel.pinCreate .boardImg { border-radius: 3px; float: left; height: 36px; margin-right: 10px; vertical-align: middle; width: 36px; } .BoardLabel.pinCreate .boardImg:not(.emptyBoardImg) { background-position: 50% 50%; background-size: cover; } .BoardLabel.pinCreate .repinBtn { display: none; float: right; margin-left: 7px; margin-top: 1px; position: relative; z-index: 1; } .BoardLabel.pinCreate .repinBtn.isBrioFlat { margin-top: 0; } .BoardLabel.pinCreate .boardImg { box-shadow: 0 0 1px rgba(0, 0, 0, 0.25) inset; } .BoardLabel .emptyBoardImg { width: 34px; height: 34px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -155px -97px no-repeat; box-shadow: none; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .BoardLabel .emptyBoardImg { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: 0 -139px; background-size: 249px 231px; } } .BoardLabel.compact { font-size: 13px; } .BoardLabel.compact .boardImg { display: none; } .BoardPage { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; z-index: 0; } .BoardPage .boardNoContent { color: #333; text-align: center; margin-top: 99px; } .BoardPage .boardNoContent p { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 17px; margin: 0 0 1em; } .BoardPage .relatedBoardsContainerTitle { font-size: 18px; margin-top: 28px; margin-left: 28px; } .BoardPage .headerSizer { max-width: 1236px; } .BoardPage.showOpenNav { background-color: #fff; } .BoardPage.showOpenNav .boardPageContent { background-color: #fff; margin-left: 246px; min-height: 100vh; } @media (min-width: 0px) and (max-width: 999px) { .BoardPage.showOpenNav .boardPageContent { margin-left: 0; } } .BoardPage.showOpenNav .boardPageContent .centeredWithinWrapper { width: inherit; } .BoardPage .boardPageContentWrapper { -webkit-transition: width 0.3s ease-out; transition: width 0.3s ease-out; width: 100vw; } .boardSearchPinDivider { margin-bottom: 30px; margin-top: 40px; position: relative; z-index: -2; } hr { border: solid rgba(0, 0, 0, 0.1); border-width: 1px 0 0; color: #eee; display: inline-block; width: 100%; } .pinterestIconWrapper { background-color: #e9e9e9; display: inline-block; left: 50%; margin-left: -24.5px; padding: 20px 10px; position: absolute; text-align: center; top: -26.5px; width: 29px; } .pinterestIconWrapper .pinterestIcon { width: 29px; height: 31px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -339px -163px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .pinterestIconWrapper .pinterestIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -334px -160px; background-size: 399px 382px; } } .searchPinLabel { color: #555; font-size: x-large; font-weight: bold; margin-bottom: 10px; } .BoardCollaboratorInviter .panelHeading { border-bottom: 1px solid #dfdfdf; padding: 18px; } .BoardCollaboratorInviter .panelHeading .panelTitle { margin: 0; } .BoardCollaboratorInviter .leftPanel, .BoardCollaboratorInviter .rightPanel { height: 375px; overflow: auto; } .BoardCollaboratorInviter .leftPanel { border-right: 1px solid #dfdfdf; float: left; overflow: hidden; width: 300px; } .BoardCollaboratorInviter .leftPanel .BoardInviteForm, .BoardCollaboratorInviter .leftPanel .boardCollaboratorInviteWrapper { position: relative; } .BoardCollaboratorInviter .leftPanel .BoardInviteForm .inviteButton, .BoardCollaboratorInviter .leftPanel .boardCollaboratorInviteWrapper .inviteButton { border-radius: 0; border-right: 0; border-top: 0; height: 47px; position: absolute; right: 0; top: 0; z-index: 106; } .BoardCollaboratorInviter .leftPanel .BoardInviteForm .fillWidth, .BoardCollaboratorInviter .leftPanel .boardCollaboratorInviteWrapper .fillWidth { margin-right: 0; } .BoardCollaboratorInviter .leftPanel .BoardInviteForm .TypeaheadField .Input, .BoardCollaboratorInviter .leftPanel .boardCollaboratorInviteWrapper .TypeaheadField .Input { background-color: #f8f8f8; border-bottom: 1px solid #ccc; border-left: 0; border-radius: 0; border-top: 0; box-shadow: none; padding: 15px 18px; } .BoardCollaboratorInviter .leftPanel .BoardInviteForm .TypeaheadField .Typeahead, .BoardCollaboratorInviter .leftPanel .boardCollaboratorInviteWrapper .TypeaheadField .Typeahead { border-radius: 0; box-shadow: none; height: 328px; overflow-y: auto; } .BoardCollaboratorInviter .leftPanel .alert { background-color: #ffa; font-size: 120%; margin: 7px 0; padding: 15px; } .BoardCollaboratorInviter .leftPanel .ContactsList { height: 328px; overflow: auto; } .BoardCollaboratorInviter .rightPanel { float: right; margin: 0 0 0 16px; width: 284px; } .BoardCollaboratorInviter .rightPanel .subheading { margin: 14px 0; } .BoardCollaboratorInviter .rightPanel .boardEditCollaborators > .User { overflow: hidden; } .BoardCollaboratorInviter .rightPanel .boardEditCollaborators .BoardInvites .GridItems.fixedHeightLayout > .item { float: none; } .BoardCollaboratorInviter .rightPanel .boardEditCollaborators .Button { float: right; margin-right: 10px; margin-top: 9px; z-index: 3; } .BoardCollaboratorInviter .rightPanel .boardEditCollaborators .User { overflow: hidden; margin: 7px 0; } .BoardCollaboratorInviter .rightPanel .boardEditCollaborators .User .thumbImageWrapper { height: 36px; width: 36px; } .BoardCollaboratorInviter .rightPanel .boardEditCollaborators .User .thumbImageWrapper img, .BoardCollaboratorInviter .rightPanel .boardEditCollaborators .User .thumbImageWrapper::after { height: 36px; width: 36px; } .BoardCollaboratorInviter .rightPanel .boardEditCollaborators .User .fullname { font-size: 14px; line-height: 17px; margin-top: 2px; } .BoardCollaboratorInviter .rightPanel .boardEditCollaborators .User .subtitle { font-size: 13px; font-weight: normal; margin: 0; } .BoardCollaboratorInviter.inModal { width: 601px; } .BoardCollaboratorInviter.inModal .panelBody { padding: 0; } .BoardCollaboratorInviter .formFooterButtons { float: right; } .BoardCollaborators.inline { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .BoardCollaborators .BoardInviteForm { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .BoardCollaborators .TypeaheadField.userSelect { position: relative; width: 100%; } .BoardCollaborators .TypeaheadField.userSelect input { width: 100%; } .BoardCollaborators .TypeaheadField.userSelect .Typeahead { box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25); margin: 0 0 3px 2px; padding-top: 0; } .BoardCollaborators .TypeaheadField.userSelect .Typeahead li:first-child { padding-top: 4px; } .BoardCollaborators .TypeaheadField.userSelect .Typeahead li:last-child { padding-bottom: 4px; } .BoardCollaborators.inline { display: inline-block; vertical-align: top; } .BoardCollaborators.large { width: 435px; } .BoardCollaborators.large .User { margin: 4px 0; padding: 4px 20px; width: 395px; } .BoardCollaborators.large .PagedGrid { -webkit-overflow-scrolling: touch; overflow: auto; max-height: 400px; } @media (min-height: 1110px) { .BoardCollaborators.large .PagedGrid { max-height: 720px; } } .BoardCollaborators.large .moreItems { margin: 0 auto 13px auto; width: 200px; } .BoardCollaborators.edit .remove { float: right; } .BoardCollaborators.edit .User { padding: 10px; } .BoardCollaborators.large .boardCollaboratorsList { overflow-x: hidden; -webkit-overflow-scrolling: touch; overflow-y: auto; max-height: 400px; } .BoardCollaborators.large .boardCollaboratorsList::-webkit-scrollbar { height: auto; width: 11px; -webkit-appearance: none; } .BoardCollaborators.large .boardCollaboratorsList::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.5); border: 2px solid #fff; border-radius: 8px; -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); } .BoardCollaborators.large .boardCollaboratorsList .PagedGrid { overflow: visible; } .BoardCollaborators.large .boardCollaboratorsList .User .subtitle { margin-top: 0; } .BoardCollaborators.tiny { text-align: left; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .BoardContactRequest { overflow: hidden; background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; margin-bottom: 8px; position: relative; } .BoardContactRequest .boardInviteContent img { border-radius: 50%; margin-right: 8px; width: 30px; } .BoardContactRequest .pending, .BoardContactRequest .success { color: #717171; font-size: 15px; padding: 1em; } .BoardContactRequest .pending { overflow: hidden; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .BoardContactRequest .pending .left { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .BoardContactRequest .success { display: none; } .BoardContactRequest.accepted { -webkit-animation: fadeOutAndHide 3s ease-in-out forwards; animation: fadeOutAndHide 3s ease-in-out forwards; } .BoardContactRequest.accepted .pending { display: none; } .BoardContactRequest.accepted .success { -webkit-animation: fadein .5s ease-in forwards; animation: fadein .5s ease-in forwards; display: block; } /* desktop.scss */ .BoardContactRequest { margin-top: 14px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .BoardInvite { overflow: hidden; position: relative; } .BoardInvite:hover { background: #f1f1f1; } .BoardInvite .secretIconInline { width: 9px; height: 10px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px -20px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; vertical-align: middle; } .BoardInvite.boardCreate .User { width: auto; } .BoardInvite .pending, .BoardInvite .success { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-right: calc(50% - 125px); } .BoardInvite .pending .leftObjectWrapper, .BoardInvite .success .leftObjectWrapper { display: inline-block; } .BoardInvite .pending .left, .BoardInvite .success .left { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding: 10px 0; } .BoardInvite.news { border-bottom: 1px solid #ddd; padding-bottom: 10px; padding-right: 1px; padding-top: 10px; } .BoardInvite.news .boardRepWrapper { padding: 0 10px; } .BoardInvite.news .inviterLine { color: #b5b5b5; } .BoardInvite.news .flagConvoWrapper { display: none; position: absolute; right: 10px; } .BoardInvite.news:hover .flagConvoWrapper { display: block; } .BoardInvite.news .User { margin: 0 10px; width: 50px; } .BoardInvite.news .description { overflow: hidden; font-size: 12px; line-height: 15px; margin: 0 0 7px; max-width: calc(50% + 55px); } .BoardInvite.news .description a { color: #000; font-style: normal; font-weight: bold; } .BoardInvite.news .description a:hover { color: #bd081c; } .BoardInvite.news .actions { margin-left: 70px; } .BoardInvite.news .pending { -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; color: #333; font-size: 11px; font-weight: normal; } .BoardInvite.news .pending .left { -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; } .BoardInvite.news .success { display: none; } .BoardInvite.news .displayed { display: -webkit-box; display: -ms-flexbox; display: flex; } .BoardInvite.news .accept, .BoardInvite.news .remove { font-size: 12px; } .BoardInvite.news .accept { margin-left: 2px; } .BoardInvite.boardDetail { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; } .BoardInvite.boardDetail .boardInviteContent img { border-radius: 50%; margin-right: 8px; width: 30px; } .BoardInvite.boardDetail .pending, .BoardInvite.boardDetail .success { color: #717171; font-size: 15px; padding: 1em; } .BoardInvite.boardDetail .pending { overflow: hidden; } .BoardInvite.boardDetail .success { display: none; } /* desktop.scss */ .BoardInvite { position: relative; z-index: 2; } .BoardInvite.boardDetail { background: #88a5ab; border-radius: 8px; box-shadow: none; margin: 16px 0; margin-top: 14px; width: inherit; } .BoardInvite.boardDetail .pending { margin-right: 0; } .BoardInvite.boardDetail .boardInviteContent, .BoardInvite.boardDetail a { color: #fff; } .BoardInvite.news { border-bottom: 0; } .BoardInvite.news .actions { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .BoardInvite.news .boardName { /* stylelint-disable-next-line at-rule-no-unknown */ color: #555; } .BoardInvite.news .boardName:hover, .BoardInvite.news .boardName:focus { color: #555; } .BoardInvite.news:hover { background: #fff; } .BoardInvite .invitee { height: 30px; line-height: 30px; padding: 4px 0; } .BoardInvite .invitee .thumbImageWrapper { position: relative; float: left; height: 30px; margin-right: 7px; width: 30px; } .BoardInvite .invitee .thumbImageWrapper::after { border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 30px; left: 0; position: absolute; top: 0; width: 30px; } .BoardInvite .invitee .thumbImageWrapper emailIcon { border-radius: 3px; height: 30px; width: 30px; } .BoardInvite .invitee .thumbImageWrapper .inviteeIcon { width: 30px; height: 30px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -170px -384px no-repeat; border-radius: 6px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .BoardInvite .invitee .thumbImageWrapper .inviteeIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -194px -342px; background-size: 428px 427px; } } .BoardInvite .invitee .thumbImageWrapper img { border-radius: 3px; height: 30px; width: 30px; } .BoardInvite .invitee .inviteeName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; display: block; font-size: 11px; line-height: 17px; } .BoardInvite .inviteTypeWrapper { font-size: 11px; line-height: 11px; margin-top: 1px; } .BoardInvite .inviteTypeWrapper .inviteTypeIcon { display: inline-block; margin-right: 2px; vertical-align: middle; } .BoardInvite .inviteTypeWrapper .inviteTypeIcon.isPinner { width: 11px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -439px no-repeat; margin-bottom: 2px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .BoardInvite .inviteTypeWrapper .inviteTypeIcon.isPinner { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -12px -416px; background-size: 428px 427px; } } .BoardInvite .inviteTypeWrapper .inviteTypeIcon.isEmail { width: 11px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -107px -442px no-repeat; margin-bottom: 2px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .BoardInvite .inviteTypeWrapper .inviteTypeIcon.isEmail { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: 0 -416px; background-size: 428px 427px; } } .BoardInvite .inviteTypeWrapper .inviteTypeIcon.isFacebook { width: 10px; height: 10px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -223px -206px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .BoardInvite .inviteTypeWrapper .inviteTypeIcon.isFacebook { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px -39px; background-size: 428px 427px; } } .BoardInvite .inviteTypeWrapper .inviteTypeIcon.isGplus { width: 10px; height: 10px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -452px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .BoardInvite .inviteTypeWrapper .inviteTypeIcon.isGplus { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px -28px; background-size: 428px 427px; } } .BoardInvite .inviteTypeWrapper .inviteTypeName { font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; color: #666; display: inline-block; font-weight: normal; vertical-align: middle; } .BoardInviteForm { margin-bottom: 8px; } .BoardInviteForm .TypeaheadField { position: relative; width: 100%; z-index: 100; } .BoardInviteForm .inviteWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .BoardInviteForm .fillWidth { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-right: 10px; } .BoardInviteForm .collaboratorInvitesNoMargin { margin-bottom: 0; } .BoardInvites .GridItems.fixedHeightLayout { overflow-x: hidden; } .BoardInvites.hasMaxHeight { overflow-x: hidden; overflow-y: scroll; } .BoardInviteToast .boardName { font-weight: bold; } .GroupBoardEmailSettings { width: 380px; } .GroupBoardEmailSettings h2 { font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-size: 16px; margin: 0; } .GroupBoardEmailSettings .helpText { line-height: 32px; } .GroupBoardEmailSettings .secretIconInline { width: 9px; height: 10px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -317px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; margin: 1px 0 0 8px; } .GroupBoardEmailSettings .toggleAllWrapper { overflow: hidden; border-bottom: 1px solid #e7e7e7; padding: 10px 20px 20px; } .GroupBoardEmailSettings .toggleAllWrapper label { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; color: #555; cursor: pointer; } .GroupBoardEmailSettings .toggleAllWrapper label .fancyToggle { float: left; margin-right: 8px; } .GroupBoardEmailSettings .toggleAllWrapper label > input { margin-right: 3px; } .GroupBoardEmailSettings .toggleAllWrapper label > span { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 13px; font-weight: bold; vertical-align: middle; } .GroupBoardEmailSettings .collab_board_email, .GroupBoardEmailSettings .collab_board_email_all { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 26px; max-width: 235px; } .GroupBoardEmailSettings .fieldsetWrapper { overflow-x: hidden; -webkit-overflow-scrolling: touch; overflow-y: auto; max-height: 300px; } .GroupBoardEmailSettings .fieldsetWrapper fieldset { padding: 20px; width: 340px; } .GroupBoardEmailSettings .fieldsetWrapper fieldset span { line-height: 28px; vertical-align: middle; } .RemoveUserFromBoardDialog .ban { font-weight: bold; } .RemoveUserFromBoardDialog .banUserWrapper { border-top: 1px solid #e7e7e7; margin: 21px -21px 0; padding: 21px 21px 0; } .RemoveUserFromBoardDialog .helpText { margin-left: 16px; } .UndoToast.ToastBase .toastWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } .UndoToast.ToastBase .titleSubtitleWrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-top: 0; } .BrowserButtonUpsell { width: 500px; } .BrowserButtonUpsell .browserWrapper { margin-top: 5px; } .BrowserButtonUpsell .promoHeader { color: #333; color: rgba(21, 21, 21, 0.8); background-color: #f0f0f0; border-top-left-radius: 6px; border-top-right-radius: 6px; font-size: 26px; line-height: 33px; padding: 25px; text-align: center; } .BrowserButtonUpsell .promoWrapper { background: #fff; border: 1px solid #aaa; border-radius: 6px; clear: both; margin: 15px; } .BrowserButtonUpsell .promoWrapper:hover { cursor: pointer; } .BrowserButtonUpsell .zoomImg { background: url(https://s.pinimg.com/webapp/style/images/chrome-1x-5ff1b915.png) no-repeat; background-size: contain; height: 293px; width: 439px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .BrowserButtonUpsell .zoomImg { background-image: url(https://s.pinimg.com/webapp/style/images/chrome-2x-1167b788.png); } } .BulkBoardPicker { width: 481px; } .BulkBoardPicker li { overflow: visible; } .BulkBoardPicker li.highlighted a { background: #fafafa; } .BulkBoardPicker .BoardPickerDropdownButton { width: 275px; } .BulkEditBar { bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; height: 64px; position: absolute; text-align: center; top: -64px; width: 100%; z-index: 103; } .BulkEditBar .boardBulkEditBar { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 744px; /* stylelint-disable-next-line at-rule-no-unknown */ } .BulkEditBar .notifications { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ /* Fix for Chrome 44 bug: https://code.google.com/p/chromium/issues/detail?id=506893 */ color: #555; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; /* 1 */ min-width: 0; /* 1 */ -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; text-align: right; } .BulkEditBar .notifications .value { font-weight: bold; } .BulkEditBar .bulkEditButtons { float: right; } .BulkEditBar .bulkEditButtons .bulkEditButton { margin-right: 3px; position: relative; z-index: 1; } .BulkEditBar .bulkEditButtons .bulkCancelButton, .BulkEditBar .bulkEditButtons .bulkEditButton { padding-left: 15px; padding-right: 15px; } .BulkEditBar .placeBoard .bulkEditButtons { margin-right: 16px; } .BulkEditBar .placeBoard .notifications { margin-left: 16px; } .CSRCreateSuccess { background: #fff; border-radius: 6px; height: 525px; width: 410px; } .CSRCreateSuccess .csrSuccessText { font-size: 16px; padding: 20px 0 0 15px; } .CSRCreateSuccess .Board { height: 292px; margin: 15px auto; } .CSRCreateSuccess .successTextWrapper { border-bottom: 1px solid #e7e7e7; } .CSRCreateSuccess .boardWrapper { background: #e9e9e9; border: 1px solid #d4d4d4; border-radius: 6px; height: 325px; margin: 15px; padding: 10px; } .CSRDomainSuggestions { cursor: pointer; } .CSRDomainSuggestions .csrDomainWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .CSRDomainSuggestions .csrDomainThumbnail { border-radius: 5px; margin: 10px 6px; } .CSRDomainSuggestions p { margin: 0 0 0 15px; } .EmptyStateCard { color: #333; margin: 25px auto 0; text-align: center; width: 390px; } .EmptyStateCard footer { margin-bottom: 10px; } .EmptyStateCard header { font-weight: bold; margin-bottom: 2px; } .EmptyStateCard .icon { margin: 0 auto 10px; } .EmptyStateCard .text { font-size: 18px; line-height: 24px; } .EmptyStateCardProfileFollowers .icon { background: url(https://s.pinimg.com/webapp/style/images/empty_followers-1x-7539a34c.png) no-repeat; background-size: contain; height: 142px; width: 124px; } .EmptyStateCardProfileFollowing .icon { background: url(https://s.pinimg.com/webapp/style/images/empty_following-1x-85abe03c.png) no-repeat; background-size: contain; height: 142px; width: 124px; } .EmptyStateCardProfilePins .searchNavigateLink a { border-bottom: 1px solid #ccc; color: #333; } .EmptyStateCardProfilePins .searchNavigateLink a:hover { border-bottom: 1px solid #999; } .EmptyStateCardProfilePins .icon { background: url(https://s.pinimg.com/webapp/style/images/empty_user_pins-1x-977b487f.png) no-repeat; background-size: contain; height: 166px; width: 100px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .EmptyStateCardProfilePins .icon { background-image: url(https://s.pinimg.com/webapp/style/images/empty_user_pins-2x-ec575230.png); } } .BoardPicker { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; visibility: hidden; } .BoardPicker .SelectList { overflow: auto; } .BoardPicker.inPopover { padding: 8px; visibility: visible; } .BoardPicker.inPopover .SelectList { max-height: 300px; width: 300px; } .BoardPicker.inPopover .SelectList .sectionHeading { background: #f0f0f0; border-radius: 3px; font-weight: bold; } .BoardPicker.lowBoardCountSimplified { border-top: 1px solid #f3f3f3; border-top-right-radius: 0; visibility: visible; } .BoardPicker.lowBoardCountSimplified .section.allBoards { padding: 15px 0; } .BoardPicker.lowBoardCountSimplified .section.createBoardButton { padding-top: 10px; } .BoardPicker .bottom { padding: 7px 0; width: 100%; } .BoardPicker .bottom .createBoard { padding: 7px 23px; } .BoardPicker .bottom .hidden { display: none; } .ExtensionInstallToast { background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.74), #fff) !important; background-image: linear-gradient(rgba(255, 255, 255, 0.74), #fff) !important; } .ExtensionInstallToast:hover { background-color: #fff; } .ExtensionInstallToast .titleText, .ExtensionInstallToast .subtitleText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #0a0e13 !important; max-width: 250px; } .ExtensionInstallToast .pinItIcon { float: left; height: 40px; margin-right: 10px; width: 40px; } .ExtensionInstallToast .pinItIcon em { width: 23px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -226px -260px no-repeat; display: block; margin: 8px auto 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ExtensionInstallToast .pinItIcon em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -196px -256px; background-size: 399px 382px; } } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .PinCreate { background: #d9d9d9; border-radius: 6px; position: relative; } .PinCreate::after { clear: both; content: ""; display: table; } .PinCreate.antiClickJack { display: none; } .PinCreate.csrPinCreate { position: fixed; } .PinCreate.pinning { pointer-events: none; } .PinCreate .Pin { margin-left: auto; margin-right: auto; overflow: hidden; } .PinCreate .Pin .pinImg { opacity: 1; } .PinCreate .repinSmall.btn.primary.loading, .PinCreate .repinSmall.btn.primary.success, .PinCreate .repinBtn.btn.primary.loading, .PinCreate .repinBtn.btn.primary.success { width: 62px; } .PinCreate .repinSmall.btn.primary.loading em, .PinCreate .repinSmall.btn.primary.success em, .PinCreate .repinBtn.btn.primary.loading em, .PinCreate .repinBtn.btn.primary.success em { -webkit-transform: translateZ(0); left: 50%; position: absolute; top: 50%; } .PinCreate .repinSmall.btn.primary.loading em, .PinCreate .repinBtn.btn.primary.loading em { width: 16px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -327px no-repeat; -webkit-animation: rotateCircle 500ms infinite; animation: rotateCircle 500ms infinite; margin-left: -8px; margin-top: -8px; visibility: visible; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PinCreate .repinSmall.btn.primary.loading em, .PinCreate .repinBtn.btn.primary.loading em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px -223px; background-size: 399px 382px; } } .PinCreate .repinSmall.btn.primary.success em, .PinCreate .repinBtn.btn.primary.success em { width: 17px; height: 13px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -328px -325px no-repeat; margin-left: -8.5px; margin-top: -6.5px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PinCreate .repinSmall.btn.primary.success em, .PinCreate .repinBtn.btn.primary.success em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -228px -320px; background-size: 399px 382px; } } .PinCreate .repinSmall.btn.primary.success span, .PinCreate .repinBtn.btn.primary.success span { display: none; } .PinCreate .createButton { display: none; } .PinCreate .BoardIcons { height: auto; } .PinCreate .nameWrapper { position: relative; } .PinCreate .searchFilterInputIcon { width: 15px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -246px no-repeat; margin-top: -7px; position: absolute; top: 50%; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PinCreate .searchFilterInputIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png); background-position: -234px -21px; background-size: 249px 231px; } } .PinCreate .Input.name { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #f6f6f6; border: 1px solid #eaeaea; border-radius: 4px; box-shadow: none; font-weight: bold; padding: 13px; } .PinCreate .Input.name:focus { outline: none; } .PinCreate .Input.name::-webkit-input-placeholder { color: #a9a9a9; } .PinCreate .Input.name::-moz-placeholder { color: #a9a9a9; } .PinCreate .Input.name:-ms-input-placeholder { color: #a9a9a9; } .PinCreate .Input.name::placeholder { color: #a9a9a9; } .PinCreate .BoardCreate { background: #fff; border-radius: 0 6px 6px 0; bottom: 0; position: absolute; top: 0; width: 100%; } .PinCreate .BoardCreate .SocialTypeaheadField { -ms-flex-negative: 0; flex-shrink: 0; } .PinCreate .BoardCreate form { height: 100%; position: relative; } .PinCreate .BoardCreate h3 { margin-bottom: 4px; } .PinCreate .BoardCreate label { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #c2c2c2; font-size: 11px; font-weight: normal; letter-spacing: .05em; text-transform: uppercase; } .PinCreate .BoardCreate input, .PinCreate .BoardCreate .TypeaheadField.userSelect input, .PinCreate .BoardCreate textarea { border: 0; box-shadow: none; font-size: 14px; outline: none; width: 100%; } .PinCreate .BoardCreate input:focus, .PinCreate .BoardCreate .TypeaheadField.userSelect input:focus, .PinCreate .BoardCreate textarea:focus { outline: none; } .PinCreate .BoardCreate input { padding-bottom: 5px; } .PinCreate .BoardCreate .Input { border-radius: 0; margin-left: 0; } .PinCreate .BoardCreate .boardEditName { color: #333; font-size: 15px; } .PinCreate .BoardCreate textarea { resize: none; } .PinCreate .BoardCreate form > ul > li { border-top: 1px solid #efefef; padding: 16px 25px 13px; } .PinCreate .BoardCreate.multiSelect form > ul > li { padding: 10px; } .PinCreate .BoardCreate.multiSelect form > ul > li.boardCollaboratorsWrapper { padding: 0; } .PinCreate .BoardCreate.multiSelect form > ul > li.boardCollaboratorsWrapper h3 { padding: 10px 10px 0; } .PinCreate .BoardCreate .inviteButton { display: none; } .PinCreate .BoardCreate .formFooter { background: transparent; border-radius: 0 0 6px; border-top: 1px solid #efefef; bottom: 0; left: 0; padding: 25px; position: absolute; right: 0; } .PinCreate .BoardCreate .formFooter .formFooterButtons { float: none; } .PinCreate .BoardCreate .formFooter .cancelButton { float: left; } .PinCreate .BoardCreate .formFooter .saveBoardButton { float: right; } .PinCreate .BoardCreate .formFooter .saveBoardButton.disabled { background-color: #efefef !important; } .PinCreate .BoardCreate .formFooter .btn { margin-left: 0; } .PinCreate .BoardCreate .formFooterButtons { float: none; } .PinCreate .BoardCreate .formFooterButtons .cancelButton { float: left; } .PinCreate .BoardCreate .formFooterButtons .saveBoardButton { float: right; } .PinCreate .Checkbox.fancyToggle { background: #f8f8f8; border: 1px solid #dfdfdf; border-radius: 50px; box-shadow: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 70px; } .PinCreate .Checkbox.fancyToggle .slider { background-image: none; border-color: #dfdfdf; border-radius: 50px; bottom: -1px; box-shadow: none; height: auto; left: -1px; top: -1px; width: 27px; } .PinCreate .Checkbox.fancyToggle.on { background: #bd081c; box-shadow: none; } .PinCreate .Checkbox.fancyToggle.on .slider { left: auto; right: -1px; } .PinCreate .BoardCreate h1, .PinCreate .pinCreateTitle { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; clear: both; color: #555; font-size: 20px; font-weight: bold; margin: 0; padding: 25px 25px 13px; } .PinCreate .SelectList { border-bottom-right-radius: 6px; } .PinCreate .SelectList:focus { outline: none; } .PinCreate .Picker .item, .PinCreate .SelectList.normal .item { border-radius: 0; } .PinCreate .selected .PickerItemCreate { color: #555; font-weight: bold; } .PinCreate .selected .BoardIcons { display: none; } .PinCreate .sectionHeading { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #555; font-size: 14px; letter-spacing: -.22px; padding: 10px 23px; } .PinCreate .allBoards { background: #fff; border-bottom: 1px solid #efefef; } .PinCreate .SimpleBoardCreate { bottom: 0; left: 0; right: 0; top: 0; position: absolute; } .PinCreate .SimpleBoardCreate .cancelCreateButtons { bottom: 0; height: 80px; left: 0; position: absolute; right: 0; } .PinCreate .SimpleBoardCreate .cancelCreateButtons .cancelButton .Button, .PinCreate .SimpleBoardCreate .cancelCreateButtons .submitButton .Button { bottom: 0; float: none; margin: 25px; position: absolute; } .PinCreate .SimpleBoardCreate .cancelCreateButtons .cancelButton .Button { left: 0; } .PinCreate .SimpleBoardCreate .cancelCreateButtons .submitButton .Button { right: 0; } /* desktop.scss */ .PinCreate { height: 535px; width: 660px; } .PinCreate.TwoPaneModal .left.pane { background: #fff; border-right: 1px solid #efefef; } .PinCreate .BoardCreate { border-left: 1px solid #efefef; } .PinCreate .BoardCreate .searchIconInputWrapper { border-bottom: 1px solid #efefef; } .PinCreate .BoardPicker .BoardLabel { width: 100%; } .PinCreate .BoardPicker .BoardLabel .BoardIcons > .secretIcon, .PinCreate .BoardPicker .BoardLabel .BoardIcons .collaborativeIcon { position: relative; top: 4px; } .PinCreate .pinCreateClose { padding: 10px; position: absolute; right: 10px; top: 10px; z-index: 2; } .PinCreate .titleContainer { border-top-right-radius: 6px; width: 330px; } .PinCreate .titleContainer .pinCreateTitle { padding: 25px 25px 13px; } .PinCreate .Pin.summary .pinMeta .pinDescription { max-width: 165px; } .PinCreate .Pin.summary .pinMeta .TextField { /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ } .PinCreate .pinContainer { bottom: 0; display: table; height: 100%; left: 0; position: absolute; top: 0; width: 330px; } .PinCreate .pinContainer .pinModuleHolder { display: table-cell; vertical-align: middle; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .PinCreateBoardPicker { bottom: 0; left: 0; right: 0; top: 0; position: absolute; } .PinCreateBoardPicker .BoardPicker { width: 100%; } .PinCreateBoardPicker .boardsWrapper { -webkit-transform: translateZ(0); background: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; overflow-y: auto; } .PinCreateBoardPicker .nameAndIcons { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #555; font-weight: bold; letter-spacing: -.25px; } .PinCreateBoardPicker .Picker .top { border-bottom: 1px solid #f3f3f3; margin-bottom: 0; overflow: inherit; padding-bottom: 15px; } .PinCreateBoardPicker .Picker .item { padding: 7px 23px; } .PinCreateBoardPicker .Picker .item.activeItem, .PinCreateBoardPicker .Picker .item.selected, .PinCreateBoardPicker .Picker .item:hover { background: #f7f7f7; color: #555; } .PinCreateBoardPicker .Picker .item.activeItem .repinBtn, .PinCreateBoardPicker .Picker .item.selected .repinBtn, .PinCreateBoardPicker .Picker .item:hover .repinBtn { display: block; } .PinCreateBoardPicker .Picker .boardCreateSuggestions .item { padding: 0; } .PinCreateBoardPicker .PinDupWarning { display: inline-block; } /* desktop.scss */ .PinCreateBoardPicker .boardsWrapper { border-bottom-right-radius: 6px; border-top-right-radius: 6px; bottom: 0; position: relative; right: 0; top: 0; width: 330px; } .PinCreateBoardPicker .boardsWrapper .nameWrapper .searchFilterInputIcon { left: 36px; } .PinCreateBoardPicker .boardsWrapper .nameWrapper input.name { margin-left: 23px; padding-left: 44px; width: 284px; } .PinCreateImageGallery .pinGallery { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 25px; } .PinCreateImageGallery .pinGallery > * { padding: 10px; } .PinCreateImageGallery .pinGallery > * img { border-radius: 8px; } .PinCreatePin { bottom: 0; left: 0; right: 0; top: 0; position: absolute; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .PinCreateShare { -webkit-transform: translateZ(0); } .PinCreateShare .socialShareWrapper { height: 18px; } .PinCreateShare .buttonWrapper { float: left; margin-left: 10px; } .PinCreateShare .buttonWrapper .pinCreateSocialLabel { display: block; height: 18px; } .PinCreateShare .buttonWrapper .pinCreateSocialLabel .shareIcon { width: 18px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -40px no-repeat; display: block; float: left; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PinCreateShare .buttonWrapper .pinCreateSocialLabel .shareIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px -57px; background-size: 399px 382px; } } .PinCreateShare .buttonWrapper .pinCreateSocialLabel:hover .shareIcon { width: 18px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -348px -353px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PinCreateShare .buttonWrapper .pinCreateSocialLabel:hover .shareIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -332px -347px; background-size: 399px 382px; } } .PinCreateShare .buttonWrapper .pinCreateSocialLabel:hover .helperText { color: #d9d9d9; } .PinCreateShare .buttonWrapper .shareInput { display: none; } .PinCreateShare .buttonWrapper .shareInput:checked + .pinCreateSocialLabel .shareIcon { width: 18px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -60px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PinCreateShare .buttonWrapper .shareInput:checked + .pinCreateSocialLabel .shareIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px -19px; background-size: 399px 382px; } } .PinCreateShare .buttonWrapper .shareInput:checked + .pinCreateSocialLabel .helperText { color: #d9d9d9; } .PinCreateShare .buttonWrapper .helperText { color: #8c9198; display: inline-block; float: left; font-size: 14px; font-weight: bold; margin-left: 7px; } /* desktop.scss */ .PinCreateShare { bottom: -32px; left: 0; position: absolute; } .PinCreateShare .buttonWrapper .pinCreateSocialLabel .helperText { color: #d9d9d9; } .PinCreateShare .buttonWrapper .pinCreateSocialLabel .shareIcon { width: 18px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -348px -353px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PinCreateShare .buttonWrapper .pinCreateSocialLabel .shareIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -332px -347px; background-size: 399px 382px; } } .PinCreateShare .buttonWrapper .pinCreateSocialLabel:hover .helperText { color: #fff; } .PinCreateShare .buttonWrapper .pinCreateSocialLabel:hover .shareIcon { width: 18px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px 0 no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PinCreateShare .buttonWrapper .pinCreateSocialLabel:hover .shareIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px 0; background-size: 399px 382px; } } .PinCreateShare .buttonWrapper .shareInput:checked + .pinCreateSocialLabel:hover .helperText { color: #fff; } .PinCreateShare .buttonWrapper .shareInput:checked + .pinCreateSocialLabel:hover .shareIcon { width: 18px; height: 18px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -20px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PinCreateShare .buttonWrapper .shareInput:checked + .pinCreateSocialLabel:hover .shareIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px -38px; background-size: 399px 382px; } } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .PinCreateSuccess .standardForm { max-width: 500px; } .PinCreateSuccess .standardForm h1 { font-weight: normal; vertical-align: bottom; } .PinCreateSuccess .standardForm h1 em { font-style: normal; font-weight: bold; } .PinCreateSuccess .standardForm h1 a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; display: inline-block; max-width: 250px; vertical-align: bottom; } .PinCreateSuccess .standardForm h1 a:hover { color: #bd081c; } .PinCreateSuccess.noBody .formFooter { border-top: 0; } .PinCreateSuccess.noBody .formFooter.promoteVisible { background: #fff; } /* desktop.scss */ .PinCreateSuccess { width: 500px; } .PinCreateSuccess.csrSuccess { width: auto; } .PinCreateSuccessBoard .boardWrapper { background: #f4f4f4; border: 1px solid #c7c7c7; border-radius: 6px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; clear: both; margin: 20px; } .PinCreateSuccessBoard .alsoOn { color: #9f9f9f; font-size: 18px; margin: 20px 0 14px; text-align: center; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.67); } .PinCreateSuccessBoard .Board { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.44); margin: 0 auto 20px; } .PinCreateSuccessBoardEdit h1 span { font-weight: normal; } .PinCreateSuccessBoardEdit .standardForm .learnMore { display: block; float: none; margin: 10px 0; } .PinCreateSuccessBoardEdit .boardInvites { margin-top: 20px; } .PinCreateSuccessBoardEdit .boardInvites .BoardInvite.boardEdit { width: 472px; } .PinCreateSuccessBoardEdit .boardInvites .BoardInvite.boardEdit .User { overflow: hidden; } .PinCreateSuccessBoardEdit .boardInvites .BoardInvite.boardEdit .Button { float: right; margin-left: 10px; margin-top: 3px; } .PinCreateSuccessBulkAction .boardWrapper { background: #f4f4f4; border: 1px solid #c7c7c7; border-radius: 6px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; clear: both; margin: 20px; padding-top: 20px; } .PinCreateSuccessBulkAction .Board { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.44); margin: 0 auto 20px; } .PinCreateSuccessExtensionNag .nagWrapper { background: #f4f4f4; background-image: url(https://s.pinimg.com/webapp/style/images/pin_create_success_extension_nag_win_chrome-a9ddaca9.png); background-position: 50% 100%; background-repeat: no-repeat; border: 1px solid #c7c7c7; border-radius: 6px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; clear: both; margin: 20px; text-align: center; } .PinCreateSuccessExtensionNag .nagWrapper .nagMessage { color: #211922; font-size: 21px; font-weight: lighter; margin: 0 auto; padding: 20px 15px 245px; text-align: center; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.67); width: 425px; } .PinCreateSuccessExtensionNag .nagWrapper .nagMessage a { color: #079dd6; font-weight: normal; } .PinCreateSuccessToast { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #353535; border-radius: 6px; bottom: 5%; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); color: #a4a4a4; font-size: 14px; left: 5px; line-height: 32px; padding: 0 10px 0 5px; position: fixed; text-align: left; z-index: 752; } .PinCreateSuccessToast a { color: #bebebe; font-weight: bold; } .RepinsLikesFeedPage h1 { color: #333; color: rgba(21, 21, 21, 0.8); font-size: 47px; font-weight: bold; line-height: 52px; margin-left: auto; margin-right: auto; max-width: 736px; text-align: center; word-wrap: break-word; margin-bottom: 20px; margin-top: 27px; text-align: center; } .ToastBase { margin-top: 10px; -webkit-transition: opacity .1s ease-in-out; transition: opacity .1s ease-in-out; visibility: hidden; } .ToastBase.RepinSuccessToast, .ToastBase.legacy { background-image: -webkit-linear-gradient(rgba(10, 14, 19, 0.85), #0a0e13); background-image: linear-gradient(rgba(10, 14, 19, 0.85), #0a0e13); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.4) 0 0 20px 0; color: #fff; } .ToastBase.RepinSuccessToast:hover, .ToastBase.legacy:hover { background-color: #000; opacity: 1 !important; } .ToastBase.RepinSuccessToast.imageWrapper, .ToastBase.legacy.imageWrapper { background: #333; border-radius: 4px; display: table-cell; height: 40px; margin-right: 10px; overflow: hidden; width: 40px; } .ToastBase.RepinSuccessToast.imageWrapper img, .ToastBase.legacy.imageWrapper img { height: 100%; width: 100%; } .ToastBase.visible { visibility: visible; } .ToastBase.isDidIt { background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.74), #fff); background-image: linear-gradient(rgba(255, 255, 255, 0.74), #fff); } .ToastBase.isDidIt:hover { background-color: #fff; } .ToastBase.isDidIt .imageWrapper { background: #eee; } .ToastBase.isDidIt .subtitleText, .ToastBase.isDidIt .titleText { color: #0a0e13; max-width: 250px; } .ToastBase.followModulePinnedTo .toastWrapper { line-height: 40px; } .ToastBase.suggestedUser .imageWrapper { border-radius: 50%; } .ToastBase.boldTitle .titleText { font-weight: bold; } .ToastBase.boldTitle .subtitleText { font-weight: normal; } .ToastBase .abstractImage { display: table-cell; } .ToastBase .buttons { display: table-cell; vertical-align: middle; } .ToastBase .buttons .BoardFollowButton, .ToastBase .buttons .UserFollowButton { float: right; } .ToastBase .imageWrapper { height: 48px; overflow: hidden; width: 48px; } .ToastBase .imageWrapper img { height: 100%; width: 100%; } .ToastBase.downArrow .abstractImage { width: 32px; height: 32px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -136px -384px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ToastBase.downArrow .abstractImage { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -309px; background-size: 428px 427px; } } .ToastBase.downArrow .subtitleText { padding-left: 16px; } .ToastBase.checkmarkIconEnabled .abstractImage { width: 26px; height: 26px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -293px -138px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ToastBase.checkmarkIconEnabled .abstractImage { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -153px -303px; background-size: 428px 427px; } } .ToastBase.yahoo .abstractImage { width: 28px; height: 28px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px -254px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ToastBase.yahoo .abstractImage { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -167px -172px; background-size: 428px 427px; } } .ToastBase.facebook .abstractImage { width: 28px; height: 28px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px -314px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ToastBase.facebook .abstractImage { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -196px -172px; background-size: 428px 427px; } } .ToastBase.google .abstractImage { width: 28px; height: 28px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px -224px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ToastBase.google .abstractImage { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -124px -303px; background-size: 428px 427px; } } .ToastBase.microsoft .abstractImage { width: 28px; height: 28px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px -284px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ToastBase.microsoft .abstractImage { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -291px -229px; background-size: 428px 427px; } } .ToastBase .toastWrapper { display: table; overflow: hidden; padding: 10px; width: 346px; } .ToastBase .titleSubtitleWrapper { display: table-cell; margin-top: 4px; padding: 0 10px; vertical-align: middle; } .ToastBase .titleText, .ToastBase .subtitleText { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; font-size: 13px; font-weight: normal; margin: 0; width: 286px; } .ToastBase .subtitleText { font-weight: bold; } .ToastBase.react { opacity: 0; position: relative; -webkit-transform: translateY(200px); transform: translateY(200px); width: 430px; } .ToastBase.react .buttons { position: absolute; right: 10px; top: 10px; } .ToastBase.react .buttons > * { width: auto; } .ToastBase.react.visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.7s cubic-bezier(0.19, 1.15, 0.48, 1); transition: all 0.7s cubic-bezier(0.19, 1.15, 0.48, 1); } .ToastBase.react.visible.hiding { opacity: 0; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: opacity transform .2s; transition: opacity transform .2s; } .ToastBase.isBrio { background: #88a5ab; border-radius: 100px; box-shadow: none; padding: 16px; } .ToastBase.isBrio:hover { background: #88a5ab; } .ToastBase.isBrio .titleText { font-size: 18px; font-weight: bold; white-space: pre-wrap; } .ToastBase.isBrio .subtitleText { font-size: 18px; font-weight: normal; white-space: pre-wrap; } .ToastBase.isBrio .buttons { right: 26px; top: 26px; } .Toasts { bottom: 14px; left: 50%; margin-left: -183px; position: fixed; z-index: 752; } .PinBookmarklet { box-sizing: border-box; margin: 14px auto; padding: 0 14px; width: 750px; } .PinBookmarklet .errorMessage { padding-top: 20px; } .PinBookmarklet .PinCreate .PinCreateSuccessBoardEdit { background: #fff; } .PinBookmarklet .pinningBG { bottom: 0; left: 0; right: 0; top: 0; background: #1a1e23; position: fixed; } .PinBookmarklet .PinCreate { border-radius: 6px; margin-left: auto; margin-right: auto; } .PinBookmarklet .PinCreate .Pin.summary.cloned { position: static; } .PinBookmarklet .PinCreate .PinCreateSuccess { margin: 0 auto; } .PinBookmarklet .PinCreateSuccess { width: 100%; } .PinDupWarning .Spinner { display: none; } .PinDupWarning .pinnedToBoardWarning { background-color: #fff5c1; background: -webkit-linear-gradient(#fff7cb, #fff4b7); background: linear-gradient(#fff7cb, #fff4b7); border-bottom: 1px solid #e2e1d1; font-size: 16px; padding: 18px; text-shadow: 0 1px 0 #fff; } .PinDupWarning .pinnedToBoardWarning a { color: #bd081c; } .PinDupWarning.pinCreate { -webkit-transform: translateZ(0); } .PinDupWarning.pinCreate .pinnedToBoardWarning { background-color: #ffe581; background: -webkit-linear-gradient(#ffef9c, #ffda66); background: linear-gradient(#ffef9c, #ffda66); border: 0; border-radius: 3px; color: #7e4300; font-size: 12px; margin: 0 23px 12px; padding: 10px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); } .AddPinURL { max-width: 460px; } .AddPinURL .findPinsField { overflow: hidden; } .AddPinURL .findPins { overflow: hidden; background: #f0f0f0; border-radius: 0 0 6px 6px; padding: 19px; } .AddPinURL .installBookmarklet { background-color: #fff5c1; background: -webkit-linear-gradient(#fff7cb, #fff4b7); background: linear-gradient(#fff7cb, #fff4b7); border-bottom: 1px solid #e7e7e7; font-size: 14px; font-weight: bold; padding: 10px 18px; } .AddPinURL .installBookmarklet a { color: #bd081c; } .AddPinURL .installBookmarklet p { margin: 0; } .AddPinURL .Button { float: right; margin-left: 10px; } .PinComment { position: relative; word-wrap: break-word; } .PinComment::after { clear: both; content: ""; display: table; } .PinComment.summary { margin-bottom: 5px; } .PinComment.icon-container { visibility: hidden; } .PinComment.icon-container .icon-child { visibility: hidden; } .PinComment .time { -webkit-transform: translateX(0); transform: translateX(0); } .PinComment.icon-container:hover .icon-child { display: block; visibility: visible; } .PinComment.comment-item:hover .icon-container { -webkit-animation: fadeIn 1s ease-out; animation: fadeIn 1s ease-out; display: block; visibility: visible; } .PinComment.comment-item:hover .icon-container .icon-child { display: block; visibility: visible; } .PinComment.comment-item:hover .time { -webkit-transform: translateX(-5px); transform: translateX(-5px); -webkit-transition: -webkit-transform 350ms ease-out; transition: -webkit-transform 350ms ease-out; transition: transform 350ms ease-out; transition: transform 350ms ease-out, -webkit-transform 350ms ease-out; } .PinComment:hover .flagComment em, .PinComment .hasTouch .flagComment em { display: block; visibility: visible; } .PinComment:hover .deleteComment em, .PinComment .hasTouch .deleteComment em { display: block; visibility: visible; } .PinCommentList { border-top: 1px solid #e3e3e3; /* Subclass that applies to this module when rendered as part of Closeup */ } .PinCommentList.empty .commentsContainer { display: none; } .PinCommentList .commentsContainer { padding: 0 14px; } .PinCommentList .commentsContainer:first-of-type { padding-top: 15px; } .PinCommentList.summary .commentsContainer:first-of-type { padding-top: 10px; } .summary .PinCommentList .List:last-child .PinComment:last-child { padding-bottom: 0; } .PinCommentList.detailed .commentsContainer { background-color: #fff; border: 0; padding: 0; } .hasRichPins .PinCommentList.detailed .commentsContainer { background: transparent; } .PinCommentsPage { /* Subclass that applies to this module when rendered as part of Closeup */ } .PinCommentsPage .commentDropdownIcon { -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; } .PinCommentsPage .commentDropdownIcon em { width: 9px; height: 6px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -363px -270px no-repeat; cursor: pointer; display: block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PinCommentsPage .commentDropdownIcon em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -389px -120px; background-size: 399px 382px; } } .PinCommentsPage .commentDropdownIcon em { margin: 8px; } .PinCommentsPage .commentDropdownIcon.collapsed { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .PinCommentsPage .showMore { display: block; margin: 0 0 9px; padding: 0 15px; } .summary .PinCommentsPage .showMore { text-align: center; } .PinCommentsPage .hidden { display: none; } .PinCommentsPage.summary .pinDescriptionCommentItem { border-radius: 0 0 6px 6px; padding: 0 14px 7px; position: relative; } .PinCommentsPage.summary .pinDescriptionCommentItem::after { clear: both; content: ""; display: table; } .PinCommentsPage.detailed { font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-weight: bold; border-top: none; } .PinCommentsPage.detailed .commentsHeader { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .PinCommentsPage.detailed .showMore { color: #555; font-size: 12px; margin-bottom: 0; padding: 16px 40px; } .PinCommentsPage.detailed .TextField { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-radius: 6px; color: #999; font-size: 15px; font-weight: normal; margin-bottom: 3px; } .PinCommentsPage.detailed .noComments p { color: #b9b9b9; font-size: 14px; font-weight: normal; margin: 0; padding: 16px 40px; } .PinCommentsPage.detailed .numComments { color: #b5b5b5; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; float: none; font-size: 14px; font-weight: normal; margin: 0; padding: 0 40px 16px; } .PinCommentsPage.detailed .numComments .commentsNumber { font-weight: bold; } .PinCommentsPage.detailed .pinUserCommentBox .commenterWrapper { display: none; } .PinCommentsPage.detailed .pinUserCommentBox .commenterWrapper.show { display: block; } .IframeEmbed { border-radius: 8px; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); mask-image: radial-gradient(#fff, #000); overflow: hidden; padding-bottom: 50%; position: relative; width: 100%; /** * Provider specific updates * * Pads the containing div of the iframe for soundcloud, youtube, and vimeo * videos. This allows the iframe to fill the div and preserve specific * aspect ratios. This padding is added via jinja for files from other sources */ } .IframeEmbed iframe { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .IframeEmbed.soundcould { padding-bottom: 30%; } .IframeEmbed.vevo, .IframeEmbed.youtube, .IframeEmbed.vimeo { padding-bottom: 50%; } .IframeEmbed.vine { padding-bottom: 100%; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .ImagesFeedPage .noImages { color: #444; font-size: 20px; margin: 60px 0; text-align: center; } /* desktop.scss */ .ImagesFeedPage .sectionTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; margin-bottom: 10px; text-align: center; width: 600px; } @-webkit-keyframes scaleDownAndFade { 0%, 50% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 66%, 83% { opacity: 1; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } } @keyframes scaleDownAndFade { 0%, 50% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 66%, 83% { opacity: 1; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } } .PaddedPin { position: relative; } .PaddedPin .paddedPinLink { background: #fff; display: block; } .PaddedPin .paddedPinLink.hasIframeEmbed { padding: 0 32px; } .PaddedPin .pinImage { border-radius: 8px; display: block; margin: 0 auto; position: relative; z-index: 5; } .PaddedPin .Image { margin: auto; } .PaddedPin .FlashlightEnabledImage { margin: auto; } .PaddedPin .pinCloseupPlaceholderText { color: #717171 !important; margin-left: auto; margin-right: auto; } .PaddedPin .seeYourPinStory { background-color: #000; height: 62px; position: relative; width: 100%; } .PaddedPin .seeYourPinStory .pinstoryButton { box-shadow: none; font-size: 15px; height: 40px; left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 125px; } .PaddedPin .pinCanonicalDescription { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; bottom: 0; color: #f7f7f7; font-size: 12px; height: 56px; left: 0; line-height: 150%; margin-top: -6px; opacity: 0.5; padding: 0 14px; position: absolute; right: 0; text-align: center; text-shadow: 0 -1px rgba(0, 0, 0, 0.17); top: 45%; white-space: normal; word-wrap: break-word; } .PaddedPin .pinDomain { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; bottom: 0; color: #f7f7f7; font-size: 12px; left: 0; margin-top: -6px; opacity: 0.5; padding: 0 14px; position: absolute; right: 0; text-align: center; text-shadow: 0 -1px rgba(0, 0, 0, 0.17); top: 50%; } .PaddedPin .visualSearchObjectTagClickTarget { cursor: pointer; height: 50px; margin-left: -25px; margin-top: -25px; position: absolute; /* positioned on visualSearchObjectOverlay by inline style */ width: 50px; } .PaddedPin .visualSearchObjectTagClickTarget .visualSearchObjectTag { -webkit-backface-visibility: hidden; -webkit-animation: scaleDownAndFade 1.5s; animation: scaleDownAndFade 1.5s; -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, transform 0.2s; transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s; opacity: 0; background: #f22; border: 6px solid #fff; border-radius: 50%; box-shadow: 0 0 10px #000; height: 32px; left: 50%; margin-left: -22px; margin-top: -22px; position: absolute; top: 50%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: center; transform-origin: center; width: 32px; } .PaddedPin .visualSearchObjectTagClickTarget:hover .visualSearchObjectTag { opacity: 1; -webkit-transform: scale(0.65); transform: scale(0.65); } .PaddedPin .visualSearchObjectTagClickTarget:active .visualSearchObjectTag { background: #b00; } .PaddedPin:hover .visualSearchObjectTag { opacity: 0.67; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .Pin { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .Pin .pinBackgroundGradient { background: -webkit-linear-gradient(rgba(80, 80, 80, 0), rgba(80, 80, 80, 0.2) 70%, rgba(80, 80, 80, 0.5)); background: linear-gradient(rgba(80, 80, 80, 0), rgba(80, 80, 80, 0.2) 70%, rgba(80, 80, 80, 0.5)); border-radius: 8px; height: 100%; position: absolute; visibility: visible; width: 100%; z-index: 101; } .Pin .navigateLinkWrapper { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; bottom: 0; position: absolute; width: 100%; } .Pin .navigateLinkWrapper .domainNameLink { position: relative; z-index: 102; } .Pin .fadeIn { -webkit-animation: fadeIn 1.5s ease-out; animation: fadeIn 1.5s ease-out; display: block; opacity: 1; } .Pin.column.detailed { margin: 0 7px; } .Pin.column.detailed .pinWrapper { width: 100%; } .Pin .bulkEditPinWrapper { display: none; } .Pin.detailed .pinDescription { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-top: 1px solid #e3e3e3; font-size: 17px; line-height: 23px; } .Pin.detailed .pinWrapper { width: 100%; } .Pin.summary .hoverMask { bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: background 0.04s linear; transition: background 0.04s linear; border-radius: 6px 6px 0 0; box-shadow: none; z-index: 100; } .Pin.summary .pinHolder:hover .hoverMask { background: rgba(255, 255, 255, 0.08); } .Pin.summary .pinHolder:active .hoverMask { background: rgba(255, 255, 255, 0.08); } .Pin.summary .creditItem { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; border-radius: 0 0 6px 6px; display: block; line-height: 14px; padding: 5px 14px; z-index: 3; } .Pin.summary .creditItem .creditImg { position: relative; border-radius: 2px; float: left; height: 30px; margin-right: 5px; width: 30px; } .Pin.summary .creditItem .creditImg::after { border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 30px; left: 0; position: absolute; top: 0; width: 30px; } .Pin.summary .creditItem .creditImg img { border-radius: 3px; height: 30px; width: 30px; } .Pin.summary .creditItem .creditImg.user { position: relative; border-radius: 50%; } .Pin.summary .creditItem .creditImg.user::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 30px; left: 0; position: absolute; top: 0; width: 30px; } .Pin.summary .creditItem .creditImg.user img { border-radius: 50%; height: 30px; width: 30px; } .Pin.summary .creditItem .creditName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #999; display: block; } .Pin.summary .creditItem .creditName h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; } .Pin.summary .creditItem .creditTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #717171; } .Pin.summary .creditItem:active .creditTitle { color: #717171; } .Pin.summary .creditItem:active .creditName { color: #999; } .Pin.summary .creditItem .span { vertical-align: middle; } .Pin.summary .pinCredits { font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-weight: bold; border-top: 1px solid #e7e7e7; color: #777; } .Pin.summary .pinCredits.userBoardCondensed .creditName { margin-top: 2px; } .Pin.summary .pinCredits button { z-index: 3; } .Pin.summary .pinDomain { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; bottom: 0; color: #f7f7f7; font-size: 12px; left: 0; margin-top: -6px; opacity: 0.5; padding: 0 14px; position: absolute; right: 0; text-align: center; text-shadow: 0 -1px rgba(0, 0, 0, 0.17); top: 50%; } .Pin.summary .pinCanonicalDescription { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; bottom: 0; color: #f7f7f7; font-size: 12px; height: 56px; left: 0; line-height: 150%; margin-top: -6px; opacity: 0.5; padding: 0 14px; position: absolute; right: 0; text-align: center; text-shadow: 0 -1px rgba(0, 0, 0, 0.17); top: 45%; white-space: normal; word-wrap: break-word; } .Pin.summary .pinHolder { position: relative; z-index: 3; } .Pin.summary .pinImageWrapper { background: #eee; border-radius: 6px 6px 0 0; display: block; padding: 0; position: relative; } .Pin.summary .pinImg { display: block; margin: 0 auto; opacity: 0; z-index: 5; } .Pin.summary .pinImg.noFade { opacity: 1; } .Pin.summary .pinImg.loaded { opacity: 1; } .Pin.summary .pinImg.fade { -webkit-transition: opacity .04s linear; transition: opacity .04s linear; } .Pin.summary .pinImg:hover { cursor: pointer; } .Pin.summary .pinImg.fullBleed { border-radius: 6px 6px 0 0; } .Pin.summary.bulkEditMode .pinWrapper .bulkEditPinWrapper { bottom: 0; cursor: pointer; display: block; left: 0; position: absolute; right: 0; top: 0; z-index: 102; } .Pin.summary.bulkEditMode .pinWrapper .bulkEditCheckboxWrapper { display: block; } .Pin.summary.bulkEditMode .pinWrapper .leftSideButtonsWrapper, .Pin.summary.bulkEditMode .pinWrapper .rightSideButtonsWrapper { display: none; } .Pin.summary .productPrice { color: #bd081c; font-size: 13px; font-weight: bold; margin: 12px 12px 0; } .Pin.summary .pinWrapper { border-radius: 6px; position: relative; } .Pin.summary .creditItem { line-height: 15px; padding: 10px; position: relative; } .Pin.summary .creditItem .creditTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow: hidden; color: #555; display: block; font-weight: normal; } .Pin.summary .creditItem .creditTitle h5 { font-size: 11px; } .Pin.summary .creditItem .creditName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555; font-weight: bold; } .Pin.summary .creditItem:hover { background: #f1f1f1; } .Pin.summary .creditItem:hover .creditName h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; } .Pin.summary .pinCreditWrapper { border-radius: 0 0 6px 6px; position: relative; z-index: 103; } .Pin.summary .pinCreditWrapper .creditTitle, .Pin.summary .pinCreditWrapper .creditName { width: 151px; } .Pin.summary .creditFooter { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #b0b0b0; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .Pin.summary .pinImageWrapper { cursor: zoom-in; } .Pin.summary .pinImageWrapper::after { border-bottom: 1px solid rgba(0, 0, 0, 0.1); bottom: 0; content: ""; height: 1px; left: 0; margin-top: -1px; position: absolute; right: 0; z-index: 10; } .Pin.summary .leftSideButtonsWrapper { left: 8px; } .Pin.summary .leftSideButtonsWrapper .repinSmall { border: 1px solid; border-color: #670f13; float: left; } .Pin.summary .rightSideButtonsWrapper, .Pin.summary .bulkEditCheckboxWrapper { right: 8px; } .Pin.summary .rightSideButtonsWrapper .btn, .Pin.summary .bulkEditCheckboxWrapper .btn { margin-right: 4px; } .Pin.summary .rightSideButtonsWrapper .btn:last-child, .Pin.summary .bulkEditCheckboxWrapper .btn:last-child { margin-right: 0; } .Pin.summary .leftSideButtonsWrapper, .Pin.summary .rightSideButtonsWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 8px; z-index: 103; } .Pin.summary .leftSideButtonsWrapper .btn, .Pin.summary .rightSideButtonsWrapper .btn { background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); font-size: 13px; } .Pin.summary .leftSideButtonsWrapper .btn:hover, .Pin.summary .rightSideButtonsWrapper .btn:hover { border: 1px solid rgba(0, 0, 0, 0.4); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .Pin.summary .leftSideButtonsWrapper .btn:active, .Pin.summary .rightSideButtonsWrapper .btn:active { box-shadow: 0 0 2px rgba(0, 0, 0, 0.1) inset; } .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat { background-color: #efefef; background-image: none; border: 0; border-radius: 4px; box-shadow: none; color: #555; height: 36px; text-shadow: none; background-color: #fff; font-size: 14px; opacity: .97; } .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat:hover, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat:hover { background-color: #e3e3e3; border: 0; } .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat:active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat:focus, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.active, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat:active, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat:focus, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.active { background-color: #e3e3e3; background-image: none; border: 0; box-shadow: none; } .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active { background-color: #bd081c; border: 0; box-shadow: none; color: #efefef; text-shadow: none; } .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary.btn.primary:hover, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:focus, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary.active .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):focus, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active.btn.primary:hover, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active:focus, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active:active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active.active .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):focus, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary.btn.primary:hover, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:focus, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary.active .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):active, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):focus, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active.btn.primary:hover, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active:focus, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active:active, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active.active .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):active, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):focus, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary.active .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active.active .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):active, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary.active .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):active, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active.active .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary.active .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active.active .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):active, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary.active .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):active, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active.active .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary.active .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active.active .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):active, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary.active .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):active, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active.active .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):active { /* the above is for css specificity, will be better after the experiments are shipped to all users */ background: #b7071b; border: 0; box-shadow: none; text-shadow: none; } .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.white, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.white:active, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.white, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.white:active { background-color: white; } .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.white:hover, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.white:hover { background-color: #efefef; } .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat span, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat span { margin-left: 4px; } .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat:hover, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat:active, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat:hover, .Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat:active { background-color: #efefef; } .Pin.summary .pinHolder { cursor: pointer; } .Pin.summary .pinHolder:hover .pinImageWrapper::after { border-bottom-color: rgba(0, 0, 0, 0.08); } .Pin.summary .pinHolder:active .pinImageWrapper::after { border-bottom-color: rgba(0, 0, 0, 0.12); } .Pin.summary .pinImageDim { bottom: 0; left: 0; right: 0; top: 0; overflow: hidden; position: absolute; } .Pin.summary .pinImageDim .dimOverlay { bottom: 0; left: 0; right: 0; top: 0; background-color: #000; border-radius: 6px 6px 0 0; opacity: .1; position: absolute; } .Pin.summary .pinImageDim .dimOverlay.webResultOverlay { border-radius: 0; } .Pin.summary .pinImageDim .dimGradient { background-color: black; background-color: rgba(0, 0, 0, 0.15); background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.3)); background: linear-gradient(transparent, rgba(0, 0, 0, 0.3)); bottom: 0; height: 100px; left: 0; position: absolute; right: 0; } .Pin.sterlingPin { box-shadow: none; } .Pin.sterlingPin .pinMask { bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 102; } /* desktop.scss */ /* stylelint-disable at-rule-no-unknown */ .Pin { background-color: transparent; box-shadow: none !important; } .Pin.imageGrid { border-radius: 8px; padding: 8px; } .Pin.imageGrid .pinImageWrapper img { border-radius: 8px; } .Pin.summary.imageOnlyWeb .pinMeta { min-height: 13px; } .Pin.summary .pinImageWrapper, .Pin.summary .hoverMask { border-radius: 8px; } .Pin.summary .pinHolder::after { background: rgba(0, 0, 0, 0.02); border-radius: 8px; bottom: 0; content: " "; left: 0; position: absolute; right: 0; top: 0; } .Pin.summary .pinDomain { display: none; } .Pin.summary .pinWrapper { cursor: zoom-in; margin: -8px; padding: 8px; position: relative; } .Pin.summary .pinWrapper::before { background: rgba(0, 0, 0, 0.05); border-radius: 8px; content: " " !important; height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; -webkit-transform: scale(0.96); transform: scale(0.96); width: 100%; z-index: 3; } .Pin.summary .pinWrapper:hover::before { -webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; } .Pin.summary .pinWrapper.disableHover { pointer-events: none; } .Pin.summary .pinCredits > .pinCreditWrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 4px; padding-left: 4px; padding-right: 4px; position: relative; } .Pin.summary .pinCredits > .pinCreditWrapper:hover { background: transparent; } .Pin.summary .pinCredits > .pinCreditWrapper:hover a { text-decoration: underline; } .Pin.summary .pinCredits > .pinCreditWrapper .creditItem { /* Fix for Chrome 44 bug: https://code.google.com/p/chromium/issues/detail?id=506893 */ border-radius: 4px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; max-width: 100%; min-height: 0; /* 1 */ min-width: 0; /* 1 */ overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: nowrap; } .Pin.summary .pinCredits > .pinCreditWrapper .creditItem:hover { color: #555; } .Pin.summary .pinCredits > .pinCreditWrapper .creditItem > a { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditName, .Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditTitle { color: #555; width: 125px; } .Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditName { font-weight: bold; } .Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditTitle { font-weight: normal; } .Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditImg.user::after { display: none; } .Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditImg, .Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditImg img { height: 24px; width: 24px; } .Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditImg { background-color: #efefef; -webkit-box-flex: 0; -ms-flex: none; flex: none; } .Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditImg.user .heightContainer { position: relative; } .Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditImg.user .heightContainer::after { background: rgba(0, 0, 0, 0.02); border-radius: 50%; content: " "; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .Pin.summary .pinCredits > .creditItem { border-radius: 4px; max-width: 100%; overflow: hidden; padding: 0 4px; text-overflow: ellipsis; white-space: nowrap; } .Pin.summary .pinCredits > .creditItem:hover { background-color: #efefef; } .Pin.summary .pinCredits > .creditItem > a { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .Pin.summary .pinCredits > .creditItem .creditName, .Pin.summary .pinCredits > .creditItem .creditTitle { color: #b5b5b5; max-width: 160px; } .Pin.summary .pinCredits > .creditItem .creditName { font-weight: normal; } .Pin.summary .pinCredits > .creditItem .creditTitle { font-weight: bold; } .Pin.summary.pinWithSocialCounts .pinMeta, .Pin.summary.pinWithSocialCounts .richPinMeta { max-width: 145px; } .Pin.summary.pinWithSocialCounts .pinDpSocialCounts { position: absolute; right: 0; top: 1px; } .Pin.summary .fadeContainer img { color: transparent; } .Pin .pinCredits { border-top: none !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .Pin .pinImageWrapper::after { display: none; } .Pin .pinImageActionButtonWrapper .pinImageDim { border-radius: 8px; } .Pin .creditFooter { border-top: none !important; margin-bottom: 4px; padding: 0 4px !important; width: 100% !important; } .PinCount .pinIcon { width: 7px; height: 9px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -363px -259px no-repeat; display: inline-block; margin-right: 3px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PinCount .pinIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -389px -110px; background-size: 399px 382px; } } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ /* stylelint-disable-next-line at-rule-no-unknown */ .PinDescriptionComment.detailed { clear: both; padding: 0 40px 16px; } .PinDescriptionComment.detailed .userThumbContainer { position: relative; float: left; margin-right: 15px; width: 50px; } .PinDescriptionComment.detailed .userThumbContainer::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 50px; left: 0; position: absolute; top: 0; width: 50px; } .PinDescriptionComment.detailed .userThumbContainer .userThumb { border-radius: 50%; height: 50px; width: 50px; } .PinDescriptionComment.detailed .userThumbContainer.detailed { position: relative; margin-right: 8px; width: 40px; } .PinDescriptionComment.detailed .userThumbContainer.detailed::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 40px; left: 0; position: absolute; top: 0; width: 40px; } .PinDescriptionComment.detailed .userThumbContainer.detailed .userThumb { border-radius: 50%; height: 40px; width: 40px; } .PinDescriptionComment.detailed .userThumb { -webkit-transform: translateZ(0); overflow: hidden; } .PinDescriptionComment.detailed .commenterNameCommentText { margin-left: 65px; } .PinDescriptionComment.detailed .commenterNameCommentText.detailed { margin-left: 48px; margin-top: -10px; } .PinDescriptionComment.detailed .commenterNameCommentText.detailed.isAddComment { margin-top: 0; } .PinDescriptionComment.detailed .commentDescriptionCreatorWrapper { padding-top: 7px; } .PinDescriptionComment.detailed .commentDescriptionContentWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .PinDescriptionComment.detailed .commentDescriptionContentWrapper .commentDescriptionTimeAgoWrapper { margin-top: -10px; position: relative; } .PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionCreator, .PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionContent { color: #444; } .PinDescriptionComment.detailed .pinDescriptionComment { line-height: 26px; margin-bottom: 0; padding: 0; /* css specificity override */ } .PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionContent { margin-top: -5px; } .PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionContent a { color: #444; } .PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionCreator { font-size: 15px; } .PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionTimeAgoWrapper .commentDescriptionTimeAgo { font-size: 14px; } .PinDescriptionComment.detailed .commenterWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .PinDescriptionComment.detailed .addCommentForm { margin-top: 10px; } .PinDescriptionComment .content { resize: vertical; } .PinDescriptionComment .addComment { display: none; margin-top: 7px; } .PinDescriptionComment .commentDescriptionCreatorWrapper, .PinDescriptionComment .boardName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .PinDescriptionComment .commentDescriptionCreatorWrapper, .PinDescriptionComment .commentDescriptionTimeAgoWrapper { display: inline-block; vertical-align: middle; } .PinDescriptionComment.summary .userThumbContainer { position: relative; float: left; margin-right: 6px; width: 30px; } .PinDescriptionComment.summary .userThumbContainer::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 30px; left: 0; position: absolute; top: 0; width: 30px; } .PinDescriptionComment.summary .userThumbContainer .userThumb { border-radius: 50%; height: 30px; width: 30px; } .PinDescriptionComment.summary .userThumbContainer.detailed { position: relative; margin-right: 8px; width: 40px; } .PinDescriptionComment.summary .userThumbContainer.detailed::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 40px; left: 0; position: absolute; top: 0; width: 40px; } .PinDescriptionComment.summary .userThumbContainer.detailed .userThumb { border-radius: 50%; height: 40px; width: 40px; } .PinDescriptionComment.summary .userThumb { -webkit-transform: translateZ(0); overflow: hidden; } .PinDescriptionComment.summary .commenterNameCommentText { margin-left: 36px; } .PinDescriptionComment.summary .commenterNameCommentText.detailed { margin-left: 48px; margin-top: -10px; } .PinDescriptionComment.summary .commenterNameCommentText.detailed.isAddComment { margin-top: 0; } .PinDescriptionComment.summary .addCommentForm { display: inline-block; margin-bottom: 5px; width: 172px; } .PinDescriptionComment.summary .addCommentForm .content { border-radius: 2px; } .PinDescriptionComment.summary .commentDescriptionContent { margin: 0; margin-bottom: 5px; } .PinDescriptionComment.summary .commenterNameCommentText { font-size: 11px; line-height: 15px; width: 172px; } .PinDescriptionComment.summary .commenterWrapper { line-height: 11px; } .PinDescriptionComment.summary .commenterWrapper .commentDescriptionCreator.delinked { color: #717171; font-weight: bold; } .PinDescriptionComment.summary .commentDescriptionCreatorWrapper { max-width: 172px; } .PinDescriptionComment.detailed .pinUserCommentBox, .PinDescriptionComment.sentPin .pinUserCommentBox { border-top: 1px solid #e3e3e3; } .PinDescriptionComment.detailed .pinDescriptionComment, .PinDescriptionComment.sentPin .pinDescriptionComment { overflow: hidden; } .PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionCreatorWrapper, .PinDescriptionComment.sentPin .pinDescriptionComment .commentDescriptionCreatorWrapper { max-width: 500px; } .PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionCreator, .PinDescriptionComment.sentPin .pinDescriptionComment .commentDescriptionCreator { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #454545; font-size: 16px; } .PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionTimeAgo, .PinDescriptionComment.sentPin .pinDescriptionComment .commentDescriptionTimeAgo { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #999; font-size: 13px; font-weight: normal; } .PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionContent, .PinDescriptionComment.sentPin .pinDescriptionComment .commentDescriptionContent { color: #171717; font-size: 15px; font-weight: normal; line-height: 17px; margin-bottom: 0; max-width: 600px; } .PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionContent a, .PinDescriptionComment.sentPin .pinDescriptionComment .commentDescriptionContent a { color: #171717; } .PinDescriptionComment.detailed .pinDescriptionComment .content, .PinDescriptionComment.sentPin .pinDescriptionComment .content { border-radius: 6px; min-height: 40px; } .PinDescriptionComment.sentPin .userThumbContainer { position: relative; float: left; margin-right: 15px; width: 54px; } .PinDescriptionComment.sentPin .userThumbContainer::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 54px; left: 0; position: absolute; top: 0; width: 54px; } .PinDescriptionComment.sentPin .userThumbContainer .userThumb { border-radius: 50%; height: 54px; width: 54px; } .PinDescriptionComment.sentPin .userThumbContainer.detailed { position: relative; margin-right: 8px; width: 40px; } .PinDescriptionComment.sentPin .userThumbContainer.detailed::after { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 40px; left: 0; position: absolute; top: 0; width: 40px; } .PinDescriptionComment.sentPin .userThumbContainer.detailed .userThumb { border-radius: 50%; height: 40px; width: 40px; } .PinDescriptionComment.sentPin .userThumb { -webkit-transform: translateZ(0); overflow: hidden; } .PinDescriptionComment.sentPin .commenterNameCommentText { margin-left: 69px; } .PinDescriptionComment.sentPin .commenterNameCommentText.detailed { margin-left: 48px; margin-top: -10px; } .PinDescriptionComment.sentPin .commenterNameCommentText.detailed.isAddComment { margin-top: 0; } .PinDescriptionComment.sentPin .commentDescriptionContent, .PinDescriptionComment.sentPin .addCommentForm { margin-top: 5px; } /* desktop.scss */ .PinDescriptionComment .detailed .commentDescriptionContent { line-height: 18px; width: 377px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .PinEdit { max-width: 675px; } .PinEdit .placeWrapper { overflow: visible; } .PinEdit .placeWrapper::after { clear: both; content: ""; display: table; } .PinEdit .PinForm .standardForm > ul { overflow: visible; } /* desktop.scss */ .PinEdit .PinForm .standardForm > ul { margin-right: 170px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .PinForm .BoardPickerDropdownButton { width: 100%; } .PinForm .ImageUploader { float: left; padding: 0; } .PinForm .ImageUploader .Button.btn.large { float: left; padding-bottom: 8px; padding-top: 7px; } .PinForm .ImageUploader .uploaderProgress { float: left; height: 22px; max-width: 294px; padding: 1px 8px 10px; } .PinForm .ImageUploader .uploaderProgress span { margin-left: 0; } .PinForm .PinPreview { position: relative; overflow: hidden; background: #f7f7f7; border: 1px solid #b1b1b1; border-radius: 3px; float: right; height: 147px; margin: 15px 15px 0 0; position: relative; width: 147px; margin-right: 20px; } .PinForm .PinPreview::after { border-radius: 0; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 149px; left: 0; position: absolute; top: 0; width: 149px; } .PinForm .PinPreview img { bottom: 0; display: block; left: 0; margin: auto; max-height: 100%; position: absolute; right: 0; top: 0; width: auto; } .PinForm .pinnerName { margin-left: 2px; } .PinForm .userWrapper .pinFormUser { line-height: inherit; } .PinForm .standardForm > ul { overflow: hidden; } .PinForm .socialShareWrapper { display: inline-block; margin-top: 9px; } .PinForm .socialShareWrapper span { font-weight: bold; } .PinForm .socialShareWrapper input { margin-right: 1px; position: relative; top: -1px; } .PinForm .socialShareWrapper .facebookInput { margin-right: 30px; } /* desktop.scss */ .PinForm .standardForm > ul { width: 500px; } .Pinnable { overflow: hidden; } .Pinnable.add_to_map { cursor: pointer; } .Pinnable.add_to_map .pinImageWrapper { overflow: hidden; border-radius: 6px; display: table-cell; text-align: center; vertical-align: middle; } .Pinnable.add_to_map .pinHolder { position: relative; display: table; height: 152px; width: 152px; } .Pinnable.add_to_map .pinHolder::after { border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 152px; left: 0; position: absolute; top: 0; width: 152px; } .Pinnable.add_to_map .pinHolder img { border-radius: 3px; height: 152px; width: 152px; } .Pinnable.add_to_map .pinHolder img { border-radius: 0; height: 152px; width: auto; } .Pinnable.add_to_map .pinWrapper { position: relative; } .Pinnable.add_to_map .pinWrapper:active::before, .Pinnable.add_to_map .pinWrapper:hover::before { bottom: 0; left: 0; right: 0; top: 0; background: rgba(0, 0, 0, 0.2); content: " "; position: absolute; z-index: 10; } .Pinnable.add_to_map .pinWrapper:hover .hoverSelectedStateIconWrapper { visibility: visible; } .Pinnable.summary .pinImageWrapper { background: #fff; text-align: center; } .PinPromoteButton { height: 33px; padding-top: 7px; } .PinPromoteButton em { width: 24px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -194px -218px no-repeat; margin-top: -4px; position: relative; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PinPromoteButton em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -230px -303px; background-size: 428px 427px; } } .PinUploader { outline: none; width: 320px; } .DomainVerify.inModal { width: 580px; } .DomainVerify .standardForm .motivation, .DomainVerify .standardForm .errorReason { padding-top: 7px; } .DomainVerify .standardForm .fieldHelpText { font-size: 11px; margin-left: 143px; margin-top: 7px; } .DomainVerify .standardForm .helpText { display: table; height: 30px; width: 250px; } .DomainVerify .standardForm .helpText .helpContainer { display: table-cell; vertical-align: middle; } .DomainVerify .standardForm .helpText a { cursor: pointer; } .DomainVerify .standardForm .errorSection, .DomainVerify .standardForm .filename { display: none; } .DomainVerify .contentWrapper { padding: 15px; } .DomainVerify .contentWrapper .descriptionBlurb, .DomainVerify .contentWrapper .metaTag, .DomainVerify .contentWrapper .instructions { margin-bottom: 10px; } .DomainVerify .contentWrapper .verifyThroughDownload .filename { display: block; margin-top: 10px; } .DomainVerify .contentWrapper .downloadLink { cursor: pointer; } .FollowingSwitcher .navigateBar { text-align: center; } .FollowingSwitcher .navigateScope { margin-bottom: 5px; margin-top: 15px; text-align: center; } .FollowingSwitcher .navigateScope .navScopeBtn { min-width: 115px; } .UserFollowPinsPreview { margin: 0 auto; overflow: hidden; position: relative; width: 100%; } .UserFollowPinsPreview .pinSlot { -webkit-transform: translateZ(0); position: absolute; top: 400px; width: 236px; } .UserFollowPinsPreview .pinSlot img { border-radius: 6px; margin-bottom: 14px; } .UserFollowPinsPreview .pinSlotWrapper { height: 100%; margin: 0 auto; position: relative; } .UserFollowPinsPreview.followed .pinSlot { top: -150px !important; -webkit-transition: top 7s linear; transition: top 7s linear; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .UserInfoBar.infoBar { border: 0 0 auto; border-radius: 0; } .UserInfoBar.infoBar.centeredWithinWrapper.gridWidth:not(.divider) { width: auto; } .UserInfoBar.infoBar .divider hr { background: #eee; border: 0; height: 1px; margin: 0; width: 100%; } .UserInfoBar.infoBar .tabs { left: 0; width: 100%; } .UserInfoBar.infoBar .tabs ul { display: table; margin: auto; table-layout: fixed; } .UserInfoBar.infoBar .tabs li { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #fff; display: table-cell; float: none; line-height: 14px; margin-right: -1px; padding: 14px 0; position: relative; } .UserInfoBar.infoBar .tabs li.hideGetStarted { display: none; } .UserInfoBar.infoBar .tabs .label { display: block; font-weight: normal; } /* desktop.scss */ .UserInfoBar { background-color: #ececec; background: -webkit-linear-gradient(#f3f3f3, #e5e5e5); background: linear-gradient(#f3f3f3, #e5e5e5); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); clear: both; color: #333; height: 44px; line-height: 44px; margin-bottom: 2px; max-width: 10000px; position: relative; border-left: 1px solid #d4d4d4; border-left: 1px solid rgba(0, 0, 0, 0.17); border-radius: 6px; box-shadow: none; box-sizing: border-box; min-width: auto; width: auto; /* stylelint-disable-next-line at-rule-no-unknown */ } .UserInfoBar .headerText { color: #555; font-size: 16px; font-weight: normal; padding: 0 26px 0 13px; } .UserInfoBar.loading { min-height: 5px; } .UserInfoBar li:first-child a.active { box-shadow: -1px 0 3px rgba(0, 0, 0, 0.05) inset; } .UserInfoBar li:last-child a.active { box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05) inset; } .UserInfoBar li a { box-shadow: 0 0 1px rgba(255, 255, 255, 0.9) inset; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); color: #777; display: block; font-weight: bold; padding: 1px 20px 0; text-shadow: none; } .UserInfoBar li a:not(.disabled):focus, .UserInfoBar li a:not(.disabled):hover, .UserInfoBar li a.active { background-color: #fafafa; background: -webkit-linear-gradient(#fff, #f4f4f4); background: linear-gradient(#fff, #f4f4f4); color: #333; } .UserInfoBar li a:active { background: url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowLeftSide-5cbf77e0.png) repeat-y left top, url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowRightSide-96a21610.png) repeat-y right top, -webkit-linear-gradient(#fff, #f4f4f4); background: url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowLeftSide-5cbf77e0.png) repeat-y left top, url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowRightSide-96a21610.png) repeat-y right top, linear-gradient(#fff, #f4f4f4); color: #000; } .UserInfoBar li a:focus .label, .UserInfoBar li a:focus .value, .UserInfoBar li a:hover .label, .UserInfoBar li a:hover .value, .UserInfoBar li a.active .label, .UserInfoBar li a.active .value { color: #555; } .UserInfoBar .divider { display: none; } .UserInfoBar .centeredWithinWrapper, .UserInfoBar.centeredWithinWrapper { max-width: 744px !important; } .UserInfoBar.infoBar { background: none; background-color: #fff; border: 0; height: auto; } .UserInfoBar.infoBar li:first-child a.active, .UserInfoBar.infoBar li:last-child a.active { box-shadow: none; } .UserInfoBar.infoBar li a:focus, .UserInfoBar.infoBar li a:hover, .UserInfoBar.infoBar li a.active { background: none; } @media (min-width: 0) and (max-width: 999px) { .UserInfoBar.infoBar.centeredWithinWrapper.gridWidth:not(.divider) { min-width: 764px; padding: 0; } } .UserInfoBar.infoBar.headerSizer { max-width: none; } .UserInfoBar.infoBar .tabs { bottom: 0; position: relative; /* stylelint-disable-next-line at-rule-no-unknown */ } .UserInfoBar.infoBar .tabs ul { margin: 0; /* stylelint-disable-next-line at-rule-no-unknown */ } .UserInfoBar.infoBar .tabs li { text-align: left; } .UserInfoBar.infoBar .tabs li a { box-sizing: border-box; display: block; width: 124px; /* stylelint-disable-next-line at-rule-no-unknown */ } .UserInfoBar.infoBar .tabs li a.active .value, .UserInfoBar.infoBar .tabs li a.active .label { color: #555; } .UserInfoBar.infoBar .tabs li a:not(.active):focus .label, .UserInfoBar.infoBar .tabs li a:not(.active):focus .value, .UserInfoBar.infoBar .tabs li a:not(.active):hover .label, .UserInfoBar.infoBar .tabs li a:not(.active):hover .value { color: #9c9c9c; } .UserInfoBar.infoBar .tabs li a:not(.active):active .label, .UserInfoBar.infoBar .tabs li a:not(.active):active .value { color: #858585; } .UserInfoBar.infoBar .tabs .value { color: #b5b5b5; display: inline-block; padding-bottom: 0 !important; /* stylelint-disable-next-line at-rule-no-unknown */ } .UserInfoBar.infoBar .tabs .label { /* stylelint-disable-next-line at-rule-no-unknown */ color: #b5b5b5; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .UserProfileContent .userBoards { overflow-y: scroll; } .UserProfileContent .userBoards .title { color: #333; display: inline-block; margin-left: 0; } .UserProfileContent .userBoards .text { color: #777; display: inline-block; font-weight: normal; } .UserProfileContent .userBoards.ownProfile .Grid { margin-bottom: 38px; } .UserProfileContent .userBoards .help { display: inline-block; margin-left: 7px; } .UserProfileContent .userBoards .help:hover { color: #444; } /* desktop.scss */ .UserProfileContent { position: relative; } .UserProfileContent .userNoBoards, .UserProfileContent .userNoPins, .UserProfileContent .userNoLikes, .UserProfileContent .userNoFollowers, .UserProfileContent .userNoFollowing { color: #333; text-align: center; margin-top: 129px; } .UserProfileContent .userNoBoards p, .UserProfileContent .userNoPins p, .UserProfileContent .userNoLikes p, .UserProfileContent .userNoFollowers p, .UserProfileContent .userNoFollowing p { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 17px; margin: 0 0 1em; } .UserProfileContent .userNoBoards .emptyIcon, .UserProfileContent .userNoPins .emptyIcon, .UserProfileContent .userNoLikes .emptyIcon, .UserProfileContent .userNoFollowers .emptyIcon, .UserProfileContent .userNoFollowing .emptyIcon { display: inline-block; margin-bottom: 18px; } .UserProfileContent .userNoBoards .emptyIcon { background: url(https://s.pinimg.com/webapp/style/images/empty_user_boards-1x-45ed0082.png) no-repeat; background-size: contain; height: 136px; width: 124px; } .UserProfileContent .userNoPins .emptyIcon { background: url(https://s.pinimg.com/webapp/style/images/empty_user_pins-1x-977b487f.png) no-repeat; background-size: contain; height: 166px; width: 100px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileContent .userNoPins .emptyIcon { background-image: url(https://s.pinimg.com/webapp/style/images/empty_user_pins-2x-ec575230.png); } } .UserProfileContent .userNoLikes .emptyIcon { background: url(https://s.pinimg.com/webapp/style/images/empty_user_likes-1x-293dc9be.png) no-repeat; background-size: contain; height: 132px; width: 153px; } .UserProfileContent .userNoFollowers .emptyIcon { background: url(https://s.pinimg.com/webapp/style/images/empty_followers-1x-7539a34c.png) no-repeat; background-size: contain; height: 142px; width: 124px; } .UserProfileContent .userNoFollowing .emptyIcon { background: url(https://s.pinimg.com/webapp/style/images/empty_following-1x-85abe03c.png) no-repeat; background-size: contain; height: 142px; width: 124px; } .UserProfileContent.loading > div { display: none; } .UserProfileContent.loading > .Spinner { display: block; margin-top: 100px; } .UserProfileContent .userNoPins { margin-top: 100px; } .UserProfileContent .UserProfileFollowingGrid .userNoBoards, .UserProfileContent .UserProfileFollowingGrid .userNoPins, .UserProfileContent .UserProfileFollowingGrid .userNoLikes, .UserProfileContent .UserProfileFollowingGrid .userNoFollowers, .UserProfileContent .UserProfileFollowingGrid .userNoFollowing { color: #333; text-align: center; margin-top: 69px; } .UserProfileContent .UserProfileFollowingGrid .userNoBoards p, .UserProfileContent .UserProfileFollowingGrid .userNoPins p, .UserProfileContent .UserProfileFollowingGrid .userNoLikes p, .UserProfileContent .UserProfileFollowingGrid .userNoFollowers p, .UserProfileContent .UserProfileFollowingGrid .userNoFollowing p { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 17px; margin: 0 0 1em; } .UserProfileContent .UserProfileFollowingGrid .userNoBoards .emptyIcon, .UserProfileContent .UserProfileFollowingGrid .userNoPins .emptyIcon, .UserProfileContent .UserProfileFollowingGrid .userNoLikes .emptyIcon, .UserProfileContent .UserProfileFollowingGrid .userNoFollowers .emptyIcon, .UserProfileContent .UserProfileFollowingGrid .userNoFollowing .emptyIcon { display: inline-block; margin-bottom: 18px; } .UserProfileContent .UserProfileFollowingGrid .userNoBoards .emptyIcon { background: url(https://s.pinimg.com/webapp/style/images/empty_user_boards-1x-45ed0082.png) no-repeat; background-size: contain; height: 136px; width: 124px; } .UserProfileContent .UserProfileFollowingGrid .userNoPins .emptyIcon { background: url(https://s.pinimg.com/webapp/style/images/empty_user_pins-1x-977b487f.png) no-repeat; background-size: contain; height: 166px; width: 100px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileContent .UserProfileFollowingGrid .userNoPins .emptyIcon { background-image: url(https://s.pinimg.com/webapp/style/images/empty_user_pins-2x-ec575230.png); } } .UserProfileContent .UserProfileFollowingGrid .userNoLikes .emptyIcon { background: url(https://s.pinimg.com/webapp/style/images/empty_user_likes-1x-293dc9be.png) no-repeat; background-size: contain; height: 132px; width: 153px; } .UserProfileContent .UserProfileFollowingGrid .userNoFollowers .emptyIcon { background: url(https://s.pinimg.com/webapp/style/images/empty_followers-1x-7539a34c.png) no-repeat; background-size: contain; height: 142px; width: 124px; } .UserProfileContent .UserProfileFollowingGrid .userNoFollowing .emptyIcon { background: url(https://s.pinimg.com/webapp/style/images/empty_following-1x-85abe03c.png) no-repeat; background-size: contain; height: 142px; width: 124px; } .UserProfileContent .UserProfileFollowingGrid .Interest { height: 236px; width: 236px; } .UserProfileContent .UserProfileFollowingGrid .Interest:hover .InterestFollowButton { display: block; } .UserProfileContent .UserProfileFollowingGrid .Interest .interestWrapper { height: 236px; width: 236px; } .UserProfileFollow { height: 100%; overflow: hidden; text-align: center; } .UserProfileFollow .userProfileFakeHeader { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); height: 45px; position: relative; } .UserProfileFollow .userProfileFakeHeader em { width: 104px; height: 26px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -253px -166px no-repeat; display: inline-block; margin-top: 10px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileFollow .userProfileFakeHeader em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -111px -201px; background-size: 428px 427px; } } .UserProfileFollow .userProfileFollowInfo { background: #fff; bottom: -1px; box-shadow: 0 -20px 50px #eee; padding: 0 0 40px; position: absolute; -webkit-transition: height 1s ease-in-out; transition: height 1s ease-in-out; width: 100%; } .UserProfileFollow .userProfileFollowInfo .about { color: #aaa; font-size: 15px; line-height: 22px; margin: 0 auto; max-width: 800px; padding: 0 10px; } .UserProfileFollow .userProfileFollowInfo .userDescription { color: #444; font-size: 15px; line-height: 20px; margin: 8px auto 5px; max-width: 750px; text-align: center; text-shadow: none; } .UserProfileFollow .userProfileFollowInfo img.profileImage { box-shadow: 0 0 10px #aaa; height: 64px; margin-top: -32px; overflow: hidden; width: 64px; } .UserProfileFollow .userProfileFollowInfo .userName { color: #333; color: rgba(21, 21, 21, 0.8); font-size: 36px; line-height: 32px; padding-top: 10px; text-align: center; } .UserProfileFollow .userProfileFollowInfo .postUnFollow { margin-bottom: 10px; margin-top: 20px; } .UserProfileFollow .userProfileFollowInfo .stats { color: #aaa; font-size: 15px; margin: 15px 0 10px; } .UserProfileFollow .userProfileFollowInfo .stats .pinCount::before { content: "\2022"; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .UserProfileHeader { position: relative; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; z-index: 670; } .UserProfileHeader .divider { color: #eee; font-size: 10px; position: relative; text-align: right; } .UserProfileHeader .divider hr { background: #eee; border: 0; height: 1px; margin: 0; width: 100%; } .UserProfileHeader .iconsLinksEtc { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #9a9a9a; display: inline-block; font-size: 12px; font-weight: 500; line-height: 20px; margin: 12px 0; max-height: 40px; } .UserProfileHeader .iconsLinksEtc .locationWrapper, .UserProfileHeader .iconsLinksEtc .websiteWrapper { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .UserProfileHeader .iconsLinksEtc .location { width: 11px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -243px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileHeader .iconsLinksEtc .location { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -352px -320px; background-size: 399px 382px; } } .UserProfileHeader .iconsLinksEtc .verifiedDomain { width: 11px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -204px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileHeader .iconsLinksEtc .verifiedDomain { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -69px -368px; background-size: 399px 382px; } } .UserProfileHeader .iconsLinksEtc .website { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #9a9a9a; font-weight: 500; max-width: 200px; } .UserProfileHeader .iconsLinksEtc .website:hover { color: #cb2027; } .UserProfileHeader .iconsLinksEtc .twitter { width: 13px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -16px -393px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileHeader .iconsLinksEtc .twitter { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -298px -320px; background-size: 399px 382px; } } .UserProfileHeader .iconsLinksEtc .twitter:hover { width: 13px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -31px -393px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileHeader .iconsLinksEtc .twitter:hover { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -312px -320px; background-size: 399px 382px; } } .UserProfileHeader .iconsLinksEtc .facebook { width: 11px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -230px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileHeader .iconsLinksEtc .facebook { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -93px -368px; background-size: 399px 382px; } } .UserProfileHeader .iconsLinksEtc .facebook:hover { width: 11px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -217px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileHeader .iconsLinksEtc .facebook:hover { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -81px -368px; background-size: 399px 382px; } } .UserProfileHeader .iconsLinksEtc .middot { color: #ccc; margin-left: 1px; margin-right: 1px; } .UserProfileHeader.invisible { opacity: 0; } .UserProfileHeader .verifiedIdentify { width: 11px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -204px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileHeader .verifiedIdentify { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -69px -368px; background-size: 399px 382px; } } .UserProfileHeader .userFollowButtonWrapper { display: inline-block; } /* desktop.scss */ .UserProfileHeader::after { clear: both; content: ""; display: table; } .UserProfileHeader .centeredWithinWrapper { box-sizing: border-box; max-width: 744px; min-width: auto; } .UserProfileHeader.profileHeader { margin: 0; } .UserProfileHeader.profileHeader .headerSizer { box-sizing: border-box; max-width: 744px; min-width: auto; width: auto; } @media (min-width: 0) and (max-width: 999px) { .UserProfileHeader.profileHeader .headerSizer { min-width: 764px; } } .UserProfileHeader.profileHeader .header { background: #fff; color: #333; display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 0; padding-top: 0; position: relative; } .UserProfileHeader.profileHeader .header.fixed { position: inherit; } .UserProfileHeader.profileHeader .header.fixed .fixedHeader { position: fixed; } .UserProfileHeader.profileHeader .header[itemtype="https://schema.org/Organization"] .profileInfo { min-height: 216px; } .UserProfileHeader.profileHeader .header[itemtype="https://schema.org/Organization"] .profileImage { margin-top: 0; } .UserProfileHeader.profileHeader .profileImage { height: 99px; margin: 0 0 0 auto; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding-top: 0; position: relative; width: 99px; z-index: 0; /* stylelint-disable-next-line at-rule-no-unknown */ } .UserProfileHeader.profileHeader .profileImage img { border-radius: 100%; height: 99px; width: 99px; } .UserProfileHeader.profileHeader .profileImage .Button { border-radius: 2px; display: none; margin: 0 auto; z-index: 3; } .UserProfileHeader.profileHeader .profileImage:hover .Button { display: block; } .UserProfileHeader.profileHeader .profileImage::after { background-color: rgba(0, 0, 0, 0.02); border-radius: 50%; bottom: 0; content: " "; left: 0; position: absolute; right: 0; top: 0; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ } .UserProfileHeader.profileHeader .fixedHeaderNameAndImage { -webkit-backface-visibility: hidden; /* stylelint-disable-next-line at-rule-no-unknown */ -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: 38px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: -50px; width: 100%; } .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderImage { display: none; } .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555; display: block; font-weight: bold; opacity: 0; padding-left: 0; text-align: center; -webkit-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; vertical-align: middle; width: 528px; /* stylelint-disable-next-line at-rule-no-unknown */ } .UserProfileHeader.profileHeader .fixed .shadow .fixedHeaderNameAndImage > .fixedHeaderName { opacity: 1; } .UserProfileHeader.profileHeader .editButtonWrapper { bottom: 20px; height: 20px; position: absolute; width: 60px; } .UserProfileHeader.profileHeader .fixedHeader { background: rgba(255, 255, 255, 0.97); left: 0; margin-bottom: -70px; position: fixed; right: 0; top: 56px; z-index: 103; } @media (max-width: 764px) { .UserProfileHeader.profileHeader .fixedHeader { width: 764px; } } @media (min-width: 800px) { .UserProfileHeader.profileHeader .fixedHeader { top: 64px; } } .UserProfileHeader.profileHeader .fixedHeader.shadow .divider { width: 100%; } .UserProfileHeader.profileHeader .profileInfo { box-sizing: border-box; max-width: 520px; width: 58.33333%; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ } .UserProfileHeader.profileHeader .titleBar { /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ box-sizing: border-box; height: auto; margin: 0 auto; position: relative; } .UserProfileHeader.profileHeader .name { color: #555; height: auto; margin-left: 0; margin-right: 0; margin-top: 0; max-width: 100%; text-align: left; /* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */ } .UserProfileHeader.profileHeader .name .nameInner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline; max-width: 100%; overflow: visible; white-space: normal; word-wrap: break-word; } .UserProfileHeader.profileHeader .name .verifiedIdentify { width: 26px; height: 26px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -119px -260px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; position: relative; top: auto; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileHeader.profileHeader .name .verifiedIdentify { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -117px -256px; background-size: 399px 382px; } } @media (min-width: 1312px) { .UserProfileHeader.profileHeader .name .verifiedIdentify { top: -4px; } } .UserProfileHeader.profileHeader .buttons { float: none; position: relative; } .UserProfileHeader.profileHeader .buttons > *:not(:last-child) { margin-right: 6px; } .UserProfileHeader.profileHeader .buttons::after { clear: both; content: ""; display: table; } .UserProfileHeader.profileHeader .buttons .Button { height: auto !important; } .UserProfileHeader.profileHeader .buttons .editProfile, .UserProfileHeader.profileHeader .buttons .userProfileMenu:not(.UnblockButton) { height: 38px !important; margin-right: 13px; width: 38px; } .UserProfileHeader.profileHeader .buttons .editProfile.active::after, .UserProfileHeader.profileHeader .buttons .editProfile:hover::after, .UserProfileHeader.profileHeader .buttons .editProfile:focus::after, .UserProfileHeader.profileHeader .buttons .userProfileMenu:not(.UnblockButton).active::after, .UserProfileHeader.profileHeader .buttons .userProfileMenu:not(.UnblockButton):hover::after, .UserProfileHeader.profileHeader .buttons .userProfileMenu:not(.UnblockButton):focus::after { border-radius: 50% !important; height: 48px !important; left: -5px !important; top: -3px !important; width: 48px !important; } .UserProfileHeader.profileHeader .buttons .userProfileMenu em { width: 24px; height: 6px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -62px -375px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileHeader.profileHeader .buttons .userProfileMenu em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -334px -285px; background-size: 399px 382px; } } .UserProfileHeader.profileHeader .buttons .editProfile em { width: 24px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -219px -234px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; height: 24px; top: -1px; width: 24px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileHeader.profileHeader .buttons .editProfile em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -214px -231px; background-size: 399px 382px; } } .UserProfileHeader.profileHeader .UserFollowButton { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 32px; max-width: 175px; } .UserProfileHeader.profileHeader .editProfile { height: 32px; } .UserProfileHeader.profileHeader .editProfile:hover { border-color: #b8b8b8; } .UserProfileHeader.profileHeader .userProfileMenu { border-radius: 3px; height: 32px; padding-top: 6px; position: relative; right: 0; top: 0; } .UserProfileHeader.profileHeader .about { color: #333; margin: 0; position: relative; width: auto; } @media (min-width: 1000px) and (max-width: 1249px) { .UserProfileHeader.profileHeader .about { width: 505px; } } @media (min-width: 0) and (max-width: 999px) { .UserProfileHeader.profileHeader .about { width: 420px; } } .UserProfileHeader.profileHeader .about .aboutText { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* stylelint-disable-next-line at-rule-no-unknown */ color: #555; margin: 0; margin-bottom: 10px; overflow: hidden; padding: 0; } .UserProfileHeader.profileHeader .about .iconsLinksEtc { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #9a9a9a; display: inline-block; font-size: 12px; font-weight: 500; line-height: inherit; margin: 0; max-height: 40px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* Show a `/` instead of `·` */ } .UserProfileHeader.profileHeader .about .iconsLinksEtc ul li:first-child { padding-left: 0; } .UserProfileHeader.profileHeader .about .iconsLinksEtc .locationWrapper, .UserProfileHeader.profileHeader .about .iconsLinksEtc .websiteWrapper { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .UserProfileHeader.profileHeader .about .iconsLinksEtc .websiteWrapper a { max-width: 100%; } .UserProfileHeader.profileHeader .about .iconsLinksEtc .locationWrapper { color: #555; font-weight: bold; margin-bottom: 0; /* stylelint-disable-next-line at-rule-no-unknown */ } .UserProfileHeader.profileHeader .about .iconsLinksEtc .location { display: none; } .UserProfileHeader.profileHeader .about .iconsLinksEtc .verifiedDomain { width: 11px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -204px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileHeader.profileHeader .about .iconsLinksEtc .verifiedDomain { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -69px -368px; background-size: 399px 382px; } } .UserProfileHeader.profileHeader .about .iconsLinksEtc .website { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555; font-weight: bold; margin-bottom: 0; margin-top: 0; max-width: 200px; /* stylelint-disable-next-line at-rule-no-unknown */ } .UserProfileHeader.profileHeader .about .iconsLinksEtc .website:hover { color: #cb2027; } .UserProfileHeader.profileHeader .about .iconsLinksEtc .twitter { margin-top: 3px; width: 13px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -16px -393px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileHeader.profileHeader .about .iconsLinksEtc .twitter { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -298px -320px; background-size: 399px 382px; } } .UserProfileHeader.profileHeader .about .iconsLinksEtc .twitter:hover { width: 13px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -31px -393px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileHeader.profileHeader .about .iconsLinksEtc .twitter:hover { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -312px -320px; background-size: 399px 382px; } } .UserProfileHeader.profileHeader .about .iconsLinksEtc .facebook { margin-top: 3px; width: 11px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -230px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileHeader.profileHeader .about .iconsLinksEtc .facebook { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -93px -368px; background-size: 399px 382px; } } .UserProfileHeader.profileHeader .about .iconsLinksEtc .facebook:hover { width: 11px; height: 11px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -217px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfileHeader.profileHeader .about .iconsLinksEtc .facebook:hover { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -81px -368px; background-size: 399px 382px; } } .UserProfileHeader.profileHeader .about .iconsLinksEtc .middot { color: #fff; font-size: 1px; margin-left: 1px; margin-right: 1px; position: relative; } .UserProfileHeader.profileHeader .about .iconsLinksEtc .middot::after { color: #555; content: "/"; font-weight: normal; /* stylelint-disable-next-line at-rule-no-unknown */ } .UserProfileHeader.profileHeader .about li { float: left; padding: 0 2px; } .UserProfileHeader.profileHeader .about textarea { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: url(https://s.pinimg.com/webapp/style/images/icon_edit-1x-6304bf31.png) no-repeat 10px 13px; border-color: #cacaca; border-radius: 4px; border-width: 1px; color: #9a9a9a; display: block; font-size: 16px; height: 64px; margin-top: 7px; padding-left: 25px; padding-top: 10px; width: 495px; } .UserProfileHeader.profileHeader .about .saveButton { float: left; margin-top: 8px; } .UserProfileHeader.profileHeader .emptyProfile .profileInfo { padding-bottom: 0; } .UserProfileHeader.profileHeader .emptyProfile .iconsLinksEtc { margin-top: 4px; } .UserProfileHeader.noFollowBar .fixedHeader { display: none; } .UserProfileHeader.disableHeader { z-index: 0; } /* 33 vertical boints */ @media (min-width: 360px) { .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileImage img { height: 132px; width: 132px; } } @media (min-width: 800px) { .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileImage img { height: 198px; width: 198px; } } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .UserProfilePage { position: relative; } .UserProfilePage .headerSizer { max-width: 1236px; } .UserProfilePage .Board { float: left; } .UserProfilePage .Board .boardCover { clear: both; } /* desktop.scss */ .UserProfilePage { /* Secret Boards */ } .UserProfilePage .fixedHeader .divider { display: none; } .UserProfilePage .userBoards { overflow-y: auto; } .UserProfilePage .userBoards .BoardIcons .secretIcon, .UserProfilePage .userBoards .boardName .secretIcon { width: 20px; height: 20px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) 0 -353px no-repeat; margin-top: 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserProfilePage .userBoards .BoardIcons .secretIcon, .UserProfilePage .userBoards .boardName .secretIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: 0 -347px; background-size: 399px 382px; } } .UserProfilePage .userBoards .GridItems.padItems > .item { margin: 0; padding: 24px 12px; width: 236px; } .UserProfilePage .UserProfileContent .User.gridItem { box-shadow: none; } .UserProfilePage .UserProfileContent .User .hoverMask { display: none; } .UserProfilePage .UserProfileContent .User .thumbContainer { background-color: #efefef; } .UserProfilePage .UserProfileContent .User .thumbContainer::after { display: none; } .TastemakerEmbed { border-radius: 8px; height: 600px; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); mask-image: radial-gradient(#fff, #000); overflow: hidden; position: relative; width: 500px; } .TastemakerEmbed iframe { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .ToggleButton { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 31px; } .ToggleButton:not(.primary):not(.toggled):not(.disabled) .buttonText { color: #bd081c; } .BrowserExtensionUninstallPage .standardForm { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; } .BrowserExtensionUninstallPage .standardForm > h1 { border-bottom: 1px solid #e7e7e7; font-size: 20px; padding: 17px 18px 13px; } .BrowserExtensionUninstallPage .standardForm .formTitle { border-bottom: 1px solid #e7e7e7; font-size: 20px; padding: 17px 18px 13px; } .BrowserExtensionUninstallPage .standardForm ul { padding: 19px 19px 7px; } .BrowserExtensionUninstallPage .standardForm h2 { font-weight: bold; margin-bottom: 12px; } .BrowserExtensionUninstallPage .standardForm li { border: 0; margin-bottom: 12px; padding: 0; } .BrowserExtensionUninstallPage .standardForm input[type="radio"] { height: 16px; margin-left: 20px; width: 16px; } .BrowserExtensionUninstallPage .standardForm label { color: #333; padding-left: 1px; vertical-align: middle; } .BrowserExtensionUninstallPage .standardForm .hiddenText { background-color: #e3f8fe; border-radius: 5px; display: none; margin-bottom: 12px; margin-left: 43px; padding: 10px; } .BrowserExtensionUninstallPage .standardForm .linkText { color: #f00; } .DeactivateAccount { width: 550px; } .DeactivateAccount .body { padding: 19px 19px 7px; } .DeactivateAccount .listItem { margin-bottom: 12px; } .DeactivateAccount h2 { font-size: 13px; font-weight: bold; margin-bottom: 12px; } .DeactivateAccount p { font-size: 13px; font-weight: regular; margin-bottom: 12px; margin-top: 0; } .DeactivateAccount input[type="radio"] { height: 16px; margin-left: 20px; width: 16px; } .DeactivateAccount label { color: #333; font-size: 12px; padding-left: 1px; vertical-align: middle; } .DeactivateAccount textarea { font-size: 12px; height: 60px; } .DeactivateAccount .deleteText { float: left; font-size: 12px; margin-top: 8px; } .DeactivateAccount .deleteText .buttonText { font-weight: bold; text-decoration: underline; } .DeactivateAccount .headerText { font-size: 13px; font-weight: regular; margin-bottom: 12px; } .DeactivateAccount .hiddenText { background-color: #e3f8fe; border-radius: 5px; display: none; margin-bottom: 12px; margin-left: 43px; padding: 10px; } .DeactivateAccount .hiddenTextArea { display: none; margin-bottom: 12px; margin-left: 43px; } .DeactivateAccount .linkText { color: #f00; } .NagBase .message a { color: #fff; text-decoration: underline; } .NagNoScript.Module { display: block; } .NagSearch .message { background-color: #fab904; border-radius: 4px; box-shadow: none; color: #fff; font-size: 15px; margin-left: 7px; margin-right: 7px; margin-top: 15px; padding: 8px 25px; text-align: center; /* stylelint-disable-next-line at-rule-no-unknown */ } .NagSearch .message p { line-height: 25px; margin: 0; } .NagSearch .message a { color: #fff; } .PinfluencerOptOutConfirmationPage .standardForm { font-size: 14px; line-height: 21px; margin: 20px auto 40px; } .SignedEmailSettingsPage .standardForm { margin: 20px auto 40px; } .SignedEmailSettingsPage .standardForm .emailSettings h3 { padding-top: 0; } .SignedEmailSettingsPage .standardForm .emailSettings .headlessSection h3 { padding-top: 6px; } .UserEdit.modal { width: 580px; } .UserEdit.modal .name { width: 195px; } .UserEdit.full_page .name { width: 49%; } .UserEdit .domain { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float: left; font-size: 14px; line-height: 32px; margin-right: 5px; padding-left: 2px; width: 131px; } .UserEdit input[type="text"].username { width: 262px; } .UserEdit .name.last { float: right; } .UserEdit .profileImageWrapper { position: relative; overflow: hidden; border-radius: 50%; display: inline-block; height: 75px; margin-right: 10px; vertical-align: middle; width: 75px; } .UserEdit .profileImageWrapper::after { border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; content: " "; height: 75px; left: 0; position: absolute; top: 0; width: 75px; } .UserEdit .profileImageWrapper .profileImage { border-radius: 3px; height: 75px; width: 75px; } .UserEdit .profileImageWrapper img { height: 75px !important; max-width: none; width: auto !important; } .UserEdit .profileImageWrapper img.restrictWidth { height: auto !important; width: 75px !important; } .UserEdit .businessName { width: 100%; } .UserEdit .helpText { width: 280px; } .UserEdit .settingLabel { vertical-align: middle; } .UserEdit .showcaseEditWrapper { border-top: 1px solid #dfdfdf; padding: 15px 21px 15px 18px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .UserEditEmail p { margin-bottom: 0; padding: 0 18px; } /* desktop.scss */ .UserEditEmail { width: 530px; } .UserSocialNetworkSettings .socialIconFacebook { width: 30px; height: 30px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px -32px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; vertical-align: middle; } .UserSocialNetworkSettings .socialIconTwitter { width: 30px; height: 30px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -298px -384px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; vertical-align: middle; } .UserSocialNetworkSettings .socialIconGplus { width: 30px; height: 30px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -394px -384px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; vertical-align: middle; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserSocialNetworkSettings .socialIconGplus { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -225px -342px; background-size: 428px 427px; } } .UserSocialNetworkSettings .socialIconGoogle { width: 30px; height: 30px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px 0 no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; vertical-align: middle; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserSocialNetworkSettings .socialIconGoogle { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -163px -342px; background-size: 428px 427px; } } .UserSocialNetworkSettings .socialIconYahoo { width: 30px; height: 30px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -266px -384px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; vertical-align: middle; } .UserSocialNetworkSettings .socialIconMicrosoft { width: 30px; height: 30px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -362px -384px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; vertical-align: middle; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserSocialNetworkSettings .socialIconMicrosoft { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -256px -342px; background-size: 428px 427px; } } .AddressForm .standardForm li { overflow: hidden; } .AddressForm .standardForm .top { margin-bottom: 8px; } .AddressForm .standardForm .subheader { float: left; font-style: italic; padding: 6px; } .AddressForm .standardForm .sameInfoButton { float: right; } .AddressForm .standardForm .addressFieldLeft { float: left; width: 50%; } .AddressForm .standardForm .addressFieldRight { float: right; width: 48%; } .BlockAndUnfollowForm { width: 600px; } .BlockAndUnfollowForm input[type="checkbox"] { display: none; } .BlockAndUnfollowForm .uncheckedBox { color: #a9a9a9; display: inline-block; font-size: 25px; vertical-align: middle; } .BlockAndUnfollowForm .checkedBox { display: none; } .BlockAndUnfollowForm input[type="checkbox"]:checked ~ .uncheckedBox { display: none; } .BlockAndUnfollowForm input[type="checkbox"]:checked ~ .checkedBox { color: #a9a9a9; display: inline-block; font-size: 25px; vertical-align: middle; } .BlockAndUnfollowForm input[type="radio"] { display: none; } .BlockAndUnfollowForm .flagReasonRadioButtonOuter { background-color: #fff; border: 1px solid #a9a9a9; border-radius: 8px; display: inline-block; height: 12px; position: relative; top: 1px; vertical-align: middle; width: 12px; } .BlockAndUnfollowForm .flagReasonRadioButtonInner { display: none; } .BlockAndUnfollowForm input[type="radio"]:checked + .flagReasonRadioButtonOuter { background-color: #a9a9a9; border-color: #d3d3d3; } .BlockAndUnfollowForm input[type="radio"]:checked + .flagReasonRadioButtonOuter > .flagReasonRadioButtonInner { background-color: #fff; border-radius: 50%; display: block; height: 4px; left: 50%; margin: -2px 0 0 -2px; position: absolute; top: 50%; width: 4px; } .BlockAndUnfollowForm .blockAndUnfollowFormContent { height: 360px; overflow: scroll; } .BlockAndUnfollowForm .blockAndUnfollowFormContent > .blockAndUnfollowFormLabel { border-bottom: 1px solid #e7e7e7; color: #333; cursor: pointer; display: block; font-size: 14px; padding: 15px 0 15px 18px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .BlockAndUnfollowForm .blockAndUnfollowFormContent > .blockAndUnfollowFormLabel:hover { background-color: #f4f4f4; } .BlockAndUnfollowForm .blockAndUnfollowFormContent > .blockAndUnfollowFormLabel > .labelWrapper { display: inline-block; margin-left: 10px; vertical-align: middle; width: 500px; } .BlockAndUnfollowForm .blockAndUnfollowFormContent > .blockAndUnfollowFormLabel > .labelWrapper > .labelDescription { color: #999; display: block; font-size: 13px; margin-top: 3px; vertical-align: middle; } .BlockAndUnfollowForm .blockAndUnfollowFormContent > .modalDescription { border-bottom: 1px solid #e7e7e7; color: #999; font-size: 13px; padding: 15px 18px; } .BlockAndUnfollowForm .helpText { font-size: 13px; line-height: 28px; width: 250px; } .BlockAndUnfollowForm .formFooter > .formFooterButtons > .primary { display: none; } .BlockAndUnfollowForm .formFooter > .formFooterButtons > .primary span { pointer-events: none; } .BlockAndUnfollowForm .formFooter > .formFooterButtons > .primary.visible { display: inline-block; } .CsrfErrorPage { text-align: center; } .CsrfErrorPage .header { background: #fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.1); height: 44px; position: fixed; text-align: center; width: 100%; } .CsrfErrorPage .header img { position: relative; top: 8px; width: 104px; } .CsrfErrorPage .errorHeader p { color: #777; font-size: 17px; font-weight: normal; } .CsrfErrorPage .errorMessage { padding-top: 50px; width: auto; } .CsrfErrorPage .errorNumber { border: 5px solid #bbb; border-radius: 50%; color: #aaa; display: block; font-size: 20px; font-weight: bold; line-height: 40px; margin: 0 auto 20px; text-align: center; width: 40px; } .CsrfErrorPage .diagnoseList { margin: 30px 0; padding: 0; text-align: center; } .CsrfErrorPage .diagnose, .CsrfErrorPage .more { color: #555; } .CsrfErrorPage .diagnose { display: inline-block; list-style-type: none; margin-bottom: 20px; vertical-align: top; width: 156px; } .CsrfErrorPage .diagnose a { color: #444; font-weight: bold; text-decoration: none; } .CsrfErrorPage .diagnose a:hover { color: #d62229; } .FlagBase { width: 600px; } .FlagBase a:focus { outline: 0; } .FlagBase .flagContent input[type="radio"] { opacity: 0; position: absolute; } .FlagBase .flagContent .flagReasonRadioButtonOuter { background-color: #fff; border: 1px solid #999; border-radius: 8px; bottom: 0; display: inline-block; height: 12px; margin: auto; position: absolute; top: 0; width: 12px; } .FlagBase .flagContent .flagReasonRadioButtonInner { display: none; } .FlagBase .flagContent .flagReasonRadioButtonWrapper { box-sizing: border-box; float: left; height: 100%; min-height: 64px; padding-left: 15px; position: absolute; width: 44px; } .FlagBase .flagContent input[type="radio"]:checked + .flagReasonRadioButtonWrapper .flagReasonRadioButtonOuter { background-color: #999; border-color: #ccc; } .FlagBase .flagContent input[type="radio"]:checked + .flagReasonRadioButtonWrapper .flagReasonRadioButtonOuter .flagReasonRadioButtonInner { background-color: #fff; border-radius: 50%; display: block; height: 4px; left: 50%; margin: -2px 0 0 -2px; position: absolute; top: 50%; width: 4px; } .FlagBase .flagContent label { color: #333; font-size: 14px; } .FlagBase .flagContent .flagReasonWrapper { display: inline-block; float: right; padding: 24px 0; width: 556px; } .FlagBase .flagContent .flagReasonLabel { border-bottom: 1px solid #e7e7e7; cursor: pointer; display: block; overflow: hidden; position: relative; } .FlagBase .flagContent .flagReasonLabel:hover { background-color: #f4f4f4; } .FlagBase .flagContent.withBadRichDataLabel { height: 389px; } .FlagBase .formFooter { border-top: none; } .FlagBase .helpText { font-size: 13px; line-height: 28px; } .FlagBase .helpText li { list-style-type: none; } .FlagBase .helpText span { display: none; } .FlagBase .helpText > .visible { display: block; } .FlagComment .modalDescription { color: #999; display: table; font-size: 13px; height: 360px; width: 600px; } .FlagComment .modalDescription > div { display: table-cell; padding: 0 85px; text-align: center; vertical-align: middle; } .FlagComment .modalDescription .fileButton { display: inline-block; margin: 20px auto 0; } .FlagComment .helpText { width: 281px; } .FlagConversation .modalDescription { color: #999; display: table; font-size: 13px; height: 360px; width: 600px; } .FlagConversation .modalDescription > div { display: table-cell; padding: 0 85px; text-align: center; vertical-align: middle; } .FlagConversation .modalDescription .fileButton { display: inline-block; margin: 20px auto 0; } .FlagConversation .helpText { width: 261px; } .FlagConversation .formFooter > .formFooterButtons > .primary.reportConversation { width: 176px; } .FlagCsr .modalDescription { color: #999; display: table; font-size: 13px; height: 360px; width: 600px; } .FlagCsr .modalDescription > div { display: table-cell; padding: 0 85px; text-align: center; vertical-align: middle; } .FlagCsr .modalDescription .fileButton { display: inline-block; margin: 20px auto 0; } .FlagPin .modalDescription { color: #999; display: table; font-size: 13px; height: 360px; width: 600px; } .FlagPin .modalDescription > div { display: table-cell; padding: 0 85px; text-align: center; vertical-align: middle; } .FlagPin .modalDescription .fileButton { display: inline-block; margin: 20px auto 0; } .TrademarkForm .instructions { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; } .TrademarkForm .instructions > div { overflow: hidden; border-top: 1px solid #dfdfdf; padding: 15px 21px 15px 27px; } .TrademarkForm .instructions > div:first-child { border: 0; } .TrademarkForm .agentFields { display: none; } .TrademarkForm .transferField { display: none; } .TrademarkForm .infringingURLs > li { margin-bottom: 10px; } .TrademarkForm .formFooter { border-radius: 6px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); } .UserBlock { width: 380px; } .UserBlock h1 { font-weight: normal; } .UserBlock p { color: #333; font-size: 14px; line-height: 20px; padding: 7px 21px 10px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .addPinFlyout .contentPositioningTopEmployee { top: -160px; } .addPinFlyout .contentPositioningTopEmployee .positionModuleCaret { top: 170px; } .addPinFlyout .positionModuleCaret { top: 130px; } .browserButtonUpsellModal { background: #fff; border-radius: 6px; padding: 24px; } .AddPin .addPinForm { width: 320px; } .AddPin.isDropdown { overflow: hidden; border-radius: 6px; max-width: 230px; width: auto; } .AddPin .addPinContent { border-radius: 0 0 6px 6px; overflow: hidden; } .AddPin .addPinButton.borderless { background: #f0f0f0; border-top: 1px solid #c4c4c4; float: left; height: 210px; width: 50%; } .AddPin .addPinButton.borderless:hover { background: #fafafa; } .AddPin .addPinButton.borderless:active { background: #e6e6e6; } .AddPin .addPinButton.borderless.addPinUpload { border-left: 1px solid #c4c4c4; } .AddPin .pinmarkletPromotion { background: #f1f1f1; border-bottom: 1px solid #d8d8d8; padding: 10px 14px; } .AddPin .pinmarkletPromotion p { overflow: hidden; color: #999; font-size: 12px; line-height: 15px; margin: 0; } .AddPin .pinmarkletPromotion a:hover { color: #bd081c; } .AddPinURL { max-width: 460px; } .AddPinURL .findPinsField { overflow: hidden; } .AddPinURL .findPins { overflow: hidden; background: #f0f0f0; border-radius: 0 0 6px 6px; padding: 19px; } .AddPinURL .installBookmarklet { background-color: #fff5c1; background: -webkit-linear-gradient(#fff7cb, #fff4b7); background: linear-gradient(#fff7cb, #fff4b7); border-bottom: 1px solid #e7e7e7; font-size: 14px; font-weight: bold; padding: 10px 18px; } .AddPinURL .installBookmarklet a { color: #bd081c; } .AddPinURL .installBookmarklet p { margin: 0; } .AddPinURL .Button { float: right; margin-left: 10px; } .creditsImage { border-radius: 100px; height: 24px; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); width: 24px; } .creditsCard { font-weight: normal; } .reactNewMessageTypeahead { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .reactNewMessageTypeahead .inputContainer { display: -webkit-box; display: -ms-flexbox; display: flex; width: inherit; } .reactNewMessageTypeahead .inputContainer input { border: 0; box-shadow: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: 33px; outline: none; width: inherit; } .reactNewMessageTypeahead .open { height: 466px; margin-left: -40px; overflow-y: auto; width: 360px; } /* TODO: hacky, remove when css is rewritten */ .reactCollaboratorInviterTypeaheadCustom { height: 47px; } /* TODO: hacky, remove when css is rewritten */ .reactSocialTypeahead .typeaheadImg, .reactSocialTypeahead .userContact { border-radius: 50%; overflow: hidden; } .reactSocialTypeahead .typeaheadImg::after, .reactSocialTypeahead .userContact::after { box-shadow: none; } .Carousel-OuterScrollContainer { overflow: hidden; } .Carousel-InnerScrollContainer { margin-bottom: -17px; -ms-overflow-style: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 17px; } .Carousel-InnerScrollContainer::-webkit-scrollbar { display: none; } .Carousel-Arrow { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .Carousel-Arrow--Left { left: -12px; } .Carousel-Arrow--Right { right: -12px; } .closeupContainer { cursor: auto; max-width: 628px; position: relative; } @media (min-width: 1056px) { .closeupContainer.showCloseupContentRight { max-width: 912px; } } .imageLink { position: relative; } .CloseupContent > .flex > div:last-child > hr { display: none; } .relatedPinTitle { margin: 0 auto 32px; max-width: 628px; width: 100%; } @media (min-width: 1056px) { .relatedPinTitle.showCloseupContentRight { max-width: 864px; } } .relatedPin > div:nth-child(2) > div { /* Since Mansory grid will always center grid within the container. Before we add new props to the Mansory grid to make this optional, we need to make this hack here */ margin-left: 0 !important; } .Closeup .containCloseup { max-width: 1050px; } @media (min-width: 1056px) { .Closeup .containCloseup.showCloseupContentRight { max-width: 912px; } } @media (min-width: 1056px) { .closeupContentImage.showCloseupContentRight { border-radius: 8px; margin-bottom: 24px; margin-right: 24px; max-width: 496px; min-width: 344px; text-align: center; vertical-align: top; } } @media (min-width: 1056px) { .closeupContentRichData.showCloseupContentRight { margin-bottom: 24px; width: 344px; } } .richDataTitle { display: none; } @media (min-width: 1056px) { .richDataTitle.showCloseupContentRight { display: block; } } @media (min-width: 1056px) { .topTitle.showCloseupContentRight { display: none; } } @media (min-width: 1056px) { .closeupCenterImage.showCloseupContentRight { display: none; } } .closeupRightImage { display: none; } @media (min-width: 1056px) { .closeupRightImage.showCloseupContentRight { display: block; } } .descriptionAction { display: none; } @media (min-width: 1056px) { .descriptionAction.showCloseupContentRight { display: block; } } @media (min-width: 1056px) { .ingredientsBuffer.showCloseupContentRight { width: 16px; } } @media (min-width: 1056px) { .actionButton.showCloseupContentRight { display: none; } } .closeupPaddingContainer { padding: 0 24px; } @media (min-width: 1056px) { .closeupPaddingContainer.showCloseupContentRight { display: -webkit-box; display: -ms-flexbox; display: flex; } } .rightImageMask { border-radius: 8px; overflow: hidden; } .hoverMask { border-radius: 8px; } @media (min-width: 1056px) { .embeddedVideo.showCloseupContentRight { margin-bottom: 24px; margin-right: 24px; width: 496px; } } .variantPickerModal { background: #fff; max-height: none; outline: none; } .CartItemRC { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .CartItemRC .productInfo { display: -webkit-box; display: -ms-flexbox; display: flex; } .CartItemRC .info { max-width: 300px; } .CartItemRC .variants div { line-height: 20px; } .BagItem { margin: 36px 162px 60px 0; width: 618px; } .BagItem .quantity { width: 67px; } .BagItem .itemInfo { width: 325px; } .BagListRC { margin: auto; width: 1016px; } .OrderConfirmation { margin: 60px 0 -60px; overflow: hidden; -webkit-transition: height .4s ease-in-out; transition: height .4s ease-in-out; } .OrderConfirmation .orderInfo { margin-bottom: 60px; margin-left: 76px; } .OrderDetail { width: 618px; } .OrderDetail .downArrow { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 8px solid #555; height: 0; margin-top: 5px; width: 0; } .OrderDetail .detailName { width: 171px; } .OrderDetail .selectedValue { width: 325px; } .OrderDetail .arrow { width: 90px; } .paymentFormModal { max-height: none; } .OrderDetails .detailName { width: 171px; } .OrderDetails .cartOptions { max-height: 0; overflow: hidden; -webkit-transition: max-height .4s ease-in-out; transition: max-height .4s ease-in-out; } .OrderDetails .cartOptions .options { width: 411px; } .OrderDetails .cartOptions .disabled div { color: #efefef; } .OrderDetails .cartOptions .selectButton { background-color: #efefef; height: 20px; width: 20px; } .OrderDetails .cartOptions .selectButton .innerCircle { height: 10px; left: 5px; top: 5px; width: 10px; } .OrderDetails .cartOptions .selectButton.selected .innerCircle { background-color: #555; } .ShoppingBag { margin-top: 60px; } .ShoppingBag .reviewOrder { width: 236px; } .ShoppingBag .flexInfo { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .ShoppingBag .numOfItems { font-weight: normal; } .strikeout { position: relative; } .strikeout::after { border-bottom: 2px solid #b5b5b5; content: ""; left: 0; position: absolute; right: 0; top: 50%; } .closeupBuyableProductCarousel { width: 800px; } .closeupBuyableProductCarousel .pinLink { display: inline-block; width: 564px; } .closeupBuyableProductCarousel .sticky { background: transparent; display: inline-block; position: -webkit-sticky; position: sticky; top: 116px; vertical-align: top; width: auto; z-index: 101; } @media (min-width: 800px) { .closeupBuyableProductCarousel .sticky { top: 124px; } } .closeupBuyableProductCarousel .buyableCloseupImage { display: block; margin: auto; } .showInModal .closeupBuyableProductCarousel .sticky { top: 60px; } .commerceCloseupCarousel { background-color: #fff; margin: auto; margin-bottom: 14px; position: relative; width: 564px; } @media (min-width: 1056px) { .commerceCloseupCarousel.showCloseupContentRight { width: 496px; } } .commerceCloseupCarousel .scrollIcon { position: absolute; } .commerceCloseupCarousel .scrollIcon em { width: 10px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -316px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .commerceCloseupCarousel .scrollIcon em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px 0; background-size: 428px 427px; } } .commerceCloseupCarousel .scrollIcon.hide { display: none; } .commerceCloseupCarousel .scrollIcon.arrowLeft { left: -20px; } .commerceCloseupCarousel .scrollIcon.arrowRight { right: -20px; } .commerceCloseupCarousel .scrollIcon.arrowRight em { -webkit-transform: scaleX(-1); transform: scaleX(-1); } .commerceCloseupCarousel .productPins { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; } .commerceCloseupCarousel .productPins.marginRight { margin-right: -10px; } .commerceCloseupCarousel .productPins.marginLeft { margin-left: -10px; } .commerceCloseupCarousel .productPins .carousel { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-transition: left .3s ease-in-out; transition: left .3s ease-in-out; } .howToWearItCarousel .scrollIcon, .nativeContentCarousel .scrollIcon { top: 180px; } .multiVariantPickers .variantTitle { display: -webkit-box; display: -ms-flexbox; display: flex; } .multiVariantPickers .swatchVariant { border-radius: 50%; box-shadow: 0 0 1px #ccc; cursor: pointer; display: inline-block; height: 60px; margin-bottom: 5px; margin-right: 10px; overflow: hidden; position: relative; width: 60px; } .multiVariantPickers .swatchVariant.unavailable .frame, .multiVariantPickers .swatchVariant.selected .frame { border: 2px solid #fff; border-radius: 50%; height: 52px; left: 0; position: absolute; top: 0; width: 52px; z-index: 1; } .multiVariantPickers .swatchVariant.unavailable { background-color: #fff; border: 2px solid #b5b5b5; position: relative; } .multiVariantPickers .swatchVariant.unavailable::after { border-bottom: 2px solid #b5b5b5; content: ""; left: 0; position: absolute; right: 0; top: 50%; -webkit-transform: rotate(135deg); transform: rotate(135deg); z-index: 2; } .multiVariantPickers .swatchVariant.selected { background-color: #fff; border: 2px solid #bd081c; } .multiVariantPickers .swatchVariant img { border-radius: 50%; box-sizing: border-box; height: 60px; left: 0; position: absolute; top: 0; width: 60px; } .multiVariantPickers .labelVariant { color: #b5b5b5; cursor: pointer; display: inline-block; font-size: 16px; font-weight: bold; line-height: 25px; margin-right: 18px; white-space: nowrap; } .multiVariantPickers .labelVariant.unavailable { color: #f1f1f1; position: relative; } .multiVariantPickers .labelVariant.unavailable::after { border-bottom: 1px solid #f1f1f1; content: ""; left: 0; position: absolute; right: 0; top: 50%; } .multiVariantPickers .labelVariant.selected { border-bottom: 3px solid #bd081c; border-radius: 0; color: #555; margin-bottom: -3px; } .OrderHistoryRC { background-color: #fff; bottom: 0; color: #555; left: 0; overflow-y: scroll; position: absolute; right: 0; top: 0; } .OrderHistoryRC .orderHistoryTitle { font-size: 33px; font-weight: bold; margin: 75px auto 40px; text-align: center; width: 628px; } .OrderHistoryRC .order { margin: 0 auto 16px; padding: 42px; width: 610px; } .OrderHistoryDetailRC { margin-bottom: 60px; } .OrderHistoryDetailRC .info { display: -webkit-box; display: -ms-flexbox; display: flex; } .OrderHistoryDetailRC .value { width: 415px; } .OrderHistoryDetailRC .title { width: 195px; } .orderHistoryModal { position: static; position: initial; } .OrderHistorySummaryRC .orderHistoryHeader { text-align: center; } .OrderHistorySummaryRC .order { cursor: zoom-in; display: block; margin: auto; width: 626px; } .OrderHistorySummaryRC .orderContent { display: -webkit-box; display: -ms-flexbox; display: flex; } .OrderHistorySummaryRC .orderContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 57px 0 50px; } .OrderHistorySummaryRC .orderInfo { max-width: 300px; } .OrderHistorySummaryRC .paymentDeclined { border-radius: 100px; display: inline-block; float: left; padding: 5px 12px; } .OrderHistorySummaryRC .image0, .OrderHistorySummaryRC .image2 { margin-right: 2px; } .OrderHistorySummaryRC .image0, .OrderHistorySummaryRC .image1 { margin-bottom: 2px; } .OrderHistorySummaryRC .defaultImage { background-color: #efefef; display: inline-block; height: 84.5px; width: 84.5px; } .productGallery { margin: -12px 0 -12px 40px; } .productGallery .container { max-height: 484px; overflow: hidden; } .productGallery .container .productCatalog { position: relative; -webkit-transition: top .3s ease-out; transition: top .3s ease-out; } .productGallery .catalogItem { cursor: pointer; display: block; height: 106px; margin: 12px; overflow: hidden; position: relative; width: 106px; } .productGallery .catalogItem.selected { background-color: #fff; border: 2px solid #bd081c; border-radius: 4px; height: 106px; width: 106px; } .productGallery .catalogItem.selected .frame { border: 2px solid #fff; height: 98px; left: 0; position: absolute; top: 0; width: 98px; z-index: 10; } .productGallery .catalogItem.selected img { left: -2px; min-height: 106px; min-width: 106px; top: -2px; } .productGallery .catalogItem img { border-radius: 4px; left: 0; position: absolute; top: 0; } .productGallery .icons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .productGallery .icons .scrollIcon { background: #efefef; border: none; border-radius: 50%; height: 40px; margin: 0 4px; width: 40px; } .productGallery .icons .scrollIcon.arrowDown em { width: 40px; height: 40px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -111px -67px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .productGallery .icons .scrollIcon.arrowDown em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -110px -66px; background-size: 399px 382px; } } .productGallery .icons .scrollIcon.arrowUp em { width: 40px; height: 40px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -111px -67px no-repeat; -webkit-transform: scaleY(-1); transform: scaleY(-1); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .productGallery .icons .scrollIcon.arrowUp em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -110px -66px; background-size: 399px 382px; } } .productGallery .icons .scrollIcon.arrowUp.hide em { width: 40px; height: 40px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -240px -186px no-repeat; -webkit-transform: scaleX(1); transform: scaleX(1); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .productGallery .icons .scrollIcon.arrowUp.hide em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -237px -183px; background-size: 399px 382px; } } .productGallery .icons .scrollIcon.arrowDown.hide em { width: 40px; height: 40px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -240px -186px no-repeat; -webkit-transform: scaleY(-1); transform: scaleY(-1); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .productGallery .icons .scrollIcon.arrowDown.hide em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -237px -183px; background-size: 399px 382px; } } .ShopBagButton { position: relative; } .ShopBagButton.empty { display: block; } .ShoppingBagMerchantInfoRC { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 23px; } .ShoppingBagMerchantInfoRC .merchant { display: -webkit-box; display: -ms-flexbox; display: flex; width: 440px; } .ShoppingBagMerchantInfoRC .flexInfo { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .ShoppingBagMerchantInfoRC .merchantTitle { max-width: 330px; } .ShoppingBagMerchantInfoRC .numOfItems { font-weight: normal; } .productPinLink { outline: none; position: relative; } .productPinLink.productPinModal .productPin { width: 236px; } .productPinLink.productPinModal .productImage { height: 236px; width: 236px; } .productPinLink.productPinModal .productInfo { font-size: 16px; } .productPinLink .productPin { cursor: zoom-in; padding: 10px; width: 160px; } .productPinLink .productPin::before { background: rgba(0, 0, 0, 0.05); border-radius: 8px; content: " " !important; height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; -webkit-transform: scale(0.96); transform: scale(0.96); width: 100%; z-index: 3; } .productPinLink .productPin:hover::before { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .productPinLink .productInfo { font-size: 14px; font-weight: bold; margin-top: 8px; } .productPinLink .productImage { background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 8px; height: 160px; width: 160px; } .productPinLink .productTitle .ellipsis { display: -webkit-box; max-height: 44px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 18px; } .productPinLink .merchantName { color: #b5b5b5; font-size: 12px; line-height: 18px; } .productPinLink .badge { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: rgba(0, 0, 0, 0.75); border-radius: 8px; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 11px; height: 18px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 20px; line-height: 12px; position: absolute; top: 0; width: 76px; } .variantPicker { width: 564px; } .variantPicker .swatchVariant { border-radius: 50%; box-shadow: 0 0 1px #ccc; cursor: pointer; display: inline-block; height: 40px; margin-bottom: 5px; margin-right: 10px; overflow: hidden; position: relative; width: 40px; } .variantPicker .swatchVariant.selected { background-color: #fff; border: 2px solid #bd081c; } .variantPicker .swatchVariant.selected .frame { border: 2px solid #fff; border-radius: 50%; height: 32px; left: 0; position: absolute; top: 0; width: 32px; z-index: 10; } .variantPicker .swatchVariant img { border-radius: 50%; box-sizing: border-box; height: 40px; left: 0; position: absolute; top: 0; width: 40px; } .variantPicker .labelVariant { color: #b5b5b5; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; line-height: 25px; margin-right: 18px; white-space: nowrap; } .variantPicker .labelVariant.selected { border-bottom: 3px solid #bd081c; border-radius: 0; color: #555; margin-bottom: -3px; } .variantPickerModal { width: 544px; } .variantPickerModal .cancel { display: inline-block; } .variantPickerModal .cancelIcon { left: 32px; position: absolute; top: 40px; } .variantPickerModal .cancelIcon em { width: 16px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -309px no-repeat; } .variantPickerModal .buttons { float: right; } .variantPickerModal .price { position: absolute; right: 32px; top: 115px; } .PinnerSurvey { border: 0; min-height: 810px; padding-bottom: 4px; width: 100%; } .SurveyHidden { display: none; } .cropperWrapper { cursor: crosshair; height: 100%; left: 0; position: absolute; visibility: visible; width: 100%; } .cropperWrapper .cropperAdditional { z-index: 3; } .cropperWrapper .cropperHandle { height: 20px; width: 20px; } .cropperWrapper .cropSection { border-radius: 4px; cursor: move; overflow: hidden; z-index: 2; } .cropperWrapper .ord-nw { opacity: 100 !important; border-top: 6px solid white; border-left: 6px solid white; margin: 0 !important; cursor: nw-resize; left: 0; top: 0; } .cropperWrapper .ord-ne { opacity: 100 !important; border-top: 6px solid white; border-right: 6px solid white; margin: 0 !important; cursor: ne-resize; right: 0; top: 0; } .cropperWrapper .ord-sw { opacity: 100 !important; border-bottom: 6px solid white; border-left: 6px solid white; margin: 0 !important; bottom: 0; cursor: sw-resize; left: 0; } .cropperWrapper .ord-se { opacity: 100 !important; border-bottom: 6px solid white; border-right: 6px solid white; margin: 0 !important; bottom: 0; cursor: se-resize; right: 0; } .cropperWrapper .shadowMask { background-color: #000; } .cropperWrapper .shadowOverlay { height: 100%; opacity: .4; width: 100%; z-index: 1; } .cropperWrapper .shadowOverlayHide { opacity: 0; } .PinRep.flyoutShown { z-index: 6; } .PinRep img[alt] { /* Firefox fix to not show titles when loading See https://jira.pinadmin.com/browse/BUG-73988 */ color: transparent; } .PinRep .pinImage { color: transparent; display: block; position: relative; } .PinRep .pinWrapper { position: relative; } .PinRep .navigateLink { color: #fff; display: block; font-size: 11px; font-weight: 500; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .PinRep .navigateLink:hover { color: #fff; } .PinRep .commercePrice.fadedBluePrice { color: #5b9dba !important; /* override brio styles */ } .PinRep .oneTapNavigateLink { background: transparent; bottom: 0; height: 100%; left: 0; opacity: 0; position: absolute; right: 0; z-index: 100; } .PinRep .debugInfo .productPrice { color: #bd081c; font-size: 13px; font-weight: bold; margin: 12px 0 0; } .PinRep .SocialIconsCounts .PartnerMetrics a { float: right; padding: 0 6px; } .PinRep .SocialIconsCounts .PartnerMetrics a svg { float: left; } .PinRep .SocialIconsCounts .PartnerMetrics a em { padding: 2px 2px 0 6px; } .PinRep .SocialIconsCounts .PartnerMetrics a.highlighted { background: #555; border-radius: 50px; color: #fff; } .PinRep .SocialIconsCounts .PartnerMetrics a.highlighted svg { fill: #fff; } .PinRep .SocialIconsCounts .PartnerMetrics a.highlighted em { color: #fff; } .PinRep .pinHashtag { color: #004b91; } .PinRep .pinHighlight { margin: 0 -1px; padding: 0 1px; } .PinRep .pinHighlight-yellow { background-color: #ffff8b; } .PinRep .pinHighlight-gray { background-color: #d8d8d8; } .PinRep .pinHighlight-underlined { background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.3) 50%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.3) 50%); background-position: 0 1.07em; background-repeat: repeat-x; background-size: 2px .1em; text-decoration: none; } .PinRep .pinSelectionBorder { border: 3px solid #efefef; border-radius: 8px; box-shadow: inset 0 0 0 3px #fff; box-sizing: border-box; height: 100%; position: absolute; top: 0; width: 100%; z-index: 3; } .PinRep .pinSelectionBorder.selected { border-color: #bd081c; } @keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .CreatorsPage__leftMenu { float: left; } .CreatorsPage__rightMenu { float: right; } .PinCreator__uploadInput { cursor: pointer; height: 100%; opacity: 0; position: absolute; width: 100%; z-index: 1; } .PinCreator__tip { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; text-align: center; } .PinCreator__tip div { margin: auto; } .PinCreator__messageOne { background-color: #ff9500; border-radius: 50px 50px 5px; height: 71px; right: 100px; top: -115px; width: 227px; } .PinCreator__messageTwo { background-color: #2c90e9; border-radius: 5px 50px 50px; height: 71px; left: 100px; top: 122px; width: 210px; } .PinCreator__textArea { border: none; caret-color: #bd081c; color: #555; overflow: hidden; resize: none; width: 100%; } .PinCreator__textArea::-webkit-input-placeholder { color: #b5b5b5; } .PinCreator__textArea::-moz-placeholder { color: #b5b5b5; } .PinCreator__textArea:-ms-input-placeholder { color: #b5b5b5; } .PinCreator__textArea::placeholder { color: #b5b5b5; } .PinCreator__textArea:focus { outline: none; } .PinCreator__title { font-size: 36px; font-weight: bold; } .PinCreator__description { font-size: 18px; } .PinCreator__ellipsis { background-color: #eaeef0; border-radius: 50%; height: 16px; margin: 3px; width: 16px; } .PinCreator__isSelected { background-color: #b5b5b5; } .PinCreator__isLast { background-color: transparent; border: 1px solid #eaeef0; } .PinCreator__sliders { border: 1px solid #eaeef0; border-radius: 50%; cursor: pointer; display: inline-block; margin: 3px; padding: 6px; } .PinCreator__deleteAnchor { left: 33px; position: absolute; top: 65px; } .PinCreator__boardValidation { height: 20px; width: 140px; } .PinCreator__urlValidationAnchor { position: absolute; right: 0; top: 45%; } .PinCreator__validationAnchor { position: relative; top: -15px; } .PinCreator__boardContainer { height: 600px; overflow: scroll; position: absolute; top: 55px; width: 460px; } .CreationImageEditor__cropButton { bottom: 15%; left: 37%; position: absolute; } .CreationCarousel__slider { height: 100%; left: 0; position: relative; -webkit-transition: left .3s; transition: left .3s; } .CreationCarousel__deleteButton { float: left; margin: 12px; position: absolute; z-index: 3; } .CreationCarousel__image { height: 100%; } .CreationCarousel__image div { z-index: -1; } .ImagePreview__image { border-radius: 8px; box-sizing: border-box; margin-bottom: 30px; margin-right: 30px; overflow: hidden; } .flashlightHeaderContainer.noDisplay { display: none; } .flashlightHeaderContainer .closeupFlashlightTitle { color: #333; float: left; font-size: 28px; font-weight: bold; margin-left: 5px; margin-top: 35px; } .flashlightAnnotationList { height: 48px; overflow-y: hidden; width: 100%; } .flashlightAnnotationList .flashlightAnnotationListItem { display: inline-block; margin: 4px 2px; } .flashlightAnnotationList .flashlightAnnotationListItem button { border: 0; border-radius: 4px; box-sizing: border-box; color: #efefef; cursor: pointer; font-size: 16px; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-weight: bold; letter-spacing: -.2px; line-height: 18px; outline: 0; padding: 0; word-spacing: 0; } .flashlightAnnotationList .flashlightAnnotationListItem button span { display: block; padding: 10px 14px; } .flashlightAnnotationList .flashlightAnnotationListItem button span:hover { background-color: rgba(0, 0, 0, 0.06); } .flashlightAnnotationList .flashlightAnnotationListItem button.selected { background-color: #555; } .flashlightAnnotationList .flashlightAnnotationListItem button.selected:hover { background-color: #666; } .flashlightResultsContainer.invisible { opacity: 0; -webkit-transition: visibility 0s 1s, opacity .1s linear; transition: visibility 0s 1s, opacity .1s linear; visibility: hidden; } .spotlightButton { background-color: transparent; } .spotlightDot { cursor: pointer; } .SearchBoxInput { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: transparent; border: 0; border-radius: 4px; box-shadow: none; box-sizing: border-box; color: #555; font-size: 16px; font-weight: 600; height: 100%; line-height: 20px; outline: none; padding: 0 40px 0 52px; width: 100%; } .SearchBoxInput:focus { box-shadow: 0 0 0 4px rgba(0, 132, 255, 0.5); outline: 0; } .SearchBoxInput--DarkPlaceholder::-webkit-input-placeholder { color: #555; } .SearchBoxInput--DarkPlaceholder::-moz-placeholder { color: #555; } .SearchBoxInput--DarkPlaceholder:-ms-input-placeholder { color: #555; } .SearchBoxInput--DarkPlaceholder::placeholder { color: #555; } .SearchBoxInput--LightPlaceholder::-webkit-input-placeholder { color: #b5b5b5; } .SearchBoxInput--LightPlaceholder::-moz-placeholder { color: #b5b5b5; } .SearchBoxInput--LightPlaceholder:-ms-input-placeholder { color: #b5b5b5; } .SearchBoxInput--LightPlaceholder::placeholder { color: #b5b5b5; } .SearchBoxInput--Overlay { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; left: 0; overflow: hidden; pointer-events: none; position: absolute; top: 0; white-space: nowrap; } .SearchBoxInput--Overlay > span { overflow: hidden; text-overflow: ellipsis; } .searchNagContainer a, .searchAutocorrectLink { /* explicitly set the color for anchor links because these HTML elements are sent from the server, no way to wrap the contents inside with color */ color: #555; /* dark-gray */ } .searchNagContainer a:hover, .searchAutocorrectLink:hover { text-decoration: underline; } .foodFilterButton { background: #b5b5b5; } .foodFilterButton.active { background-color: #555; } .filterOption { background-color: #efefef; border-radius: 4px; } .filterOption.active { background-color: #555; } .filterCheckBox { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; cursor: pointer; height: 24px; opacity: 0; outline: 0; width: 24px; } .filterDropdownButton { background-color: transparent; max-width: 200px; padding: 0; white-space: nowrap; } .SearchImprovementsBar-OuterScrollContainer { overflow: hidden; } .SearchImprovementsBar-InnerScrollContainer { margin-bottom: -17px; -ms-overflow-style: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 17px; } .SearchImprovementsBar-InnerScrollContainer::-webkit-scrollbar { display: none; } .SearchImprovementsBar-ArrowButton { background-color: transparent; border: 0; height: 100%; outline: none; padding: 0; } .SearchPage .sticky { position: -webkit-sticky; position: sticky; top: 65px; z-index: 3; } .SearchPage .searchLEQChunk { margin: -10px; padding: 10px; position: relative; } .SearchPage .searchLEQChunk::before { background: rgba(0, 0, 0, 0.05); border-radius: 8px; content: " " !important; height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; -webkit-transform: scale(0.96); transform: scale(0.96); width: 100%; z-index: 3; } .SearchPage .searchLEQChunk:hover::before { -webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; } .SearchPage .leqChunksList { padding-bottom: 36px; } .mainContainer.showHeaderMessage .SearchPage .sticky { top: 88px; } .searchRelatedQueries .relatedQueriesStoryLabel { margin-bottom: 18px; } .searchRelatedQueries .relatedQueriesStoryLabel > svg { position: fixed; } .searchRelatedQueries .relatedQueriesStoryLabel > span { padding-left: 24px; } .searchRelatedQueries .relatedQueryWrapper { margin-bottom: 12px; } .searchRelatedQueries .relatedQueryWrapper .relatedQuery { border-radius: 4px; display: inline-block; } .searchRelatedQueries .relatedQueryWrapper .relatedQuery .relatedQueryContent { display: inherit; padding: 9px 16px 11px; } .searchRelatedQueries .relatedQueryWrapper:last-child { margin-bottom: 0; } .fadeInComments .responseComments { max-height: 0; opacity: 0; overflow: hidden; -webkit-transition: all .25s; transition: all .25s; } .fadeInComments .responseComments.revealed { max-height: 100%; opacity: 1; } .DidItActivityFeedSummary { background-color: inherit; padding: 8px 0; position: -webkit-sticky; position: sticky; top: 64px; z-index: 669; } .photoFirstLikeButton { background: none; border: none; border-radius: 50%; padding: 0; } .photoFirstLikeButton:focus { box-shadow: 0 0 0 4px rgba(0, 132, 255, 0.5); outline: 0; } .photoFirstDetailsText { white-space: pre-wrap; } /* stylelint-disable-next-line at-rule-no-unknown */ .PhotoFirstTitle { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow: hidden; overflow-wrap: break-word; } @media (min-width: 360px) { .PhotoFirstTitle { line-height: 20px; /* max-height = line-height * lines max number (2) */ max-height: 40px; } } @media (min-width: 800px) { .PhotoFirstTitle { line-height: 22px; /* max-height = line-height * lines max number (2) */ max-height: 44px; } } @media (min-width: 1312px) { .PhotoFirstTitle { line-height: 24px; /* max-height = line-height * lines max number (2) */ max-height: 48px; } } .inlineCloseupActionDetails { color: #555; font-size: 21px; font-weight: 400; text-align: left; text-indent: -6px; } .inlineCloseupActionDetails::before { content: open-quote; } .inlineCloseupActionDetails::after { content: close-quote; } .textAreaCommentCompact textarea { height: 2.5em; } .DidItPinInfoBar { background-image: -webkit-linear-gradient(top, rgba(181, 181, 181, 0), rgba(0, 0, 0, 0.2) 33%, rgba(0, 0, 0, 0.5) 66%, rgba(0, 0, 0, 0.7)); background-image: linear-gradient(to bottom, rgba(181, 181, 181, 0), rgba(0, 0, 0, 0.2) 33%, rgba(0, 0, 0, 0.5) 66%, rgba(0, 0, 0, 0.7)); border-radius: 8px; } .didItPhotoBox { padding-bottom: 40px; padding-top: 40px; -webkit-transition: padding-top .2s ease; transition: padding-top .2s ease; } .didItPhotoBox.transitionUp { padding-bottom: 0; padding-top: 0; } .didItTextBox { height: 0; opacity: 0; -webkit-transition: opacity .2s ease; transition: opacity .2s ease; -webkit-transition-delay: .2s; transition-delay: .2s; visibility: hidden; } .didItTextBox.transitionIn { height: auto; opacity: 1; visibility: visible; } .uploadProgressBar { background-color: #bd081c; border-radius: 8px; height: 16px; opacity: 1; position: absolute; -webkit-transition: opacity 85ms ease-in, width 85ms ease-in; transition: opacity 85ms ease-in, width 85ms ease-in; z-index: 1000; } .uploadProgressBar.transition { opacity: 0; -webkit-transition: opacity 85ms ease-in, width 85ms ease-in; transition: opacity 85ms ease-in, width 85ms ease-in; } .experienceSystemPushOverlay { background: #000; bottom: 0; display: block; left: 0; opacity: .5; position: absolute; right: 0; top: 0; z-index: 750; } /* This file duplicates some functionality from https://github.com/pinterest/gestalt/blob/master/src/IconButton/IconButton.css It's only intended for experimental icons that are not yet part of gestalt (and may never be) */ .iconButtonExperiment:hover, .iconButtonExperiment:focus { background-color: #dedede; } .iconButtonExperiment:active path { fill: #555; } .iconButtonExperiment svg { vertical-align: middle; } .msg_bubble_arrow_box { position: relative; } .msg_bubble_arrow_box::after { border: solid transparent; border-color: rgba(239, 239, 239, 0); border-right-color: #efefef; border-width: 10px; content: " "; height: 0; margin-top: -10px; pointer-events: none; position: absolute; right: 100%; top: 17%; width: 0; } .exploreArticle .headerWrapper { margin: 0 auto; max-width: 768px; padding: 0 18px; } .exploreArticle .coverImage { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 780px; } .exploreArticle .coverImageWrapper { border-radius: 8px; height: 300px; overflow: hidden; } .exploreArticle .promotedCurator { font-weight: normal; padding-left: 4px; } .exploreArticle .BoardIcons { display: none; } .exploreArticle .userCard { width: 236px; } @keyframes tapAnimation { 0% { opacity: 1; -webkit-transform: scale(0.96); transform: scale(0.96); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .articleRepWrapper { height: 330px; width: 477px; } .articleRepWrapper .articleImageWrapper { border-radius: 12px; height: 239px; width: 477px; } .articleRepWrapper .articleRepWash { background-color: #000; border-radius: 12px; height: 100%; opacity: .03; position: absolute; width: 100%; z-index: 2; } .articleRepWrapper::before { background: rgba(0, 0, 0, 0.05); border-radius: 12px; content: " "; height: 100%; left: 0; margin: -10px; opacity: 0; padding: 10px; pointer-events: none; position: absolute; top: 0; -webkit-transform: scale(0.96); transform: scale(0.96); width: 100%; z-index: -1; } .articleRepWrapper:hover::before { -webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; } .articleRepWrapper .cover { max-height: none; min-width: 477px; position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .articleRepWrapper .profileImage { border: 3px solid #fff; border-radius: 50%; } .articleRepWrapper .profileImageWrapper { bottom: -8px; height: 50px; left: 16px; position: absolute; width: 50px; z-index: 3; } .articleRepWrapper .promotedCurator { padding-left: 4px; } .articleRepWrapper .title { max-height: 50px; width: 477px; } @keyframes tapAnimation { 0% { opacity: 1; -webkit-transform: scale(0.96); transform: scale(0.96); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .exploreBoardContainer { height: 330px; } .exploreBoardContainer div[class^="Mask-rounded"] { border-radius: 12px; } .exploreBoardContainer .imageWash { background: rgba(0, 0, 0, 0.05); height: 100%; width: 100%; z-index: 1; } .exploreBoardContainer::before { background: rgba(0, 0, 0, 0.05); border-radius: 12px; content: " "; height: 100%; left: 0; margin: -10px; opacity: 0; padding: 10px; pointer-events: none; position: absolute; top: 0; -webkit-transform: scale(0.96); transform: scale(0.96); width: 100%; z-index: -1; } .exploreBoardContainer:hover::before { -webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; } .exploreBoardContainer .profileImage { border: 3px solid #fff; border-radius: 50%; } .exploreBoardContainer .profileImageWrapper { bottom: -8px; height: 50px; left: 16px; position: absolute; width: 50px; z-index: 1; } .collageWrapper .moreItem { z-index: 1; } .collageWrapper .menuItem { cursor: pointer; position: relative; } .collageWrapper .menuItem:focus, .collageWrapper .menuItem:hover { border: 0; } .collageWrapper .menuItem:focus .caption, .collageWrapper .menuItem:hover .caption { color: rgba(0, 0, 0, 0.7); } .collageWrapper .menuItem:focus svg, .collageWrapper .menuItem:hover svg { fill: rgba(0, 0, 0, 0.7); } .collageWrapper .grid { display: none; width: 100%; } .collageWrapper .collage, .collageWrapper .feedHeader { max-width: 992px; width: 100%; } .collageWrapper .feedHeader { box-sizing: border-box; padding: 36px 8px; } .collageWrapper .article { height: 240px; } @media (max-width: 800px) { .collageWrapper .grid { display: -webkit-box; display: -ms-flexbox; display: flex; } .collageWrapper .collage, .collageWrapper .expand { display: none; } } .explorePage .exploreSections { width: 230px; } .explorePage .exploreSectionsWrapper { width: 230px; } .explorePage .exploreGridContainer { width: 527px; } .explorePage .exploreHeading, .explorePage .exploreCategoryHeading { padding-left: 25px; } @media (min-width: 800px) { .explorePage { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media (min-width: 1280px) { .explorePage .exploreSections { width: 180px; } .explorePage .exploreGridContainer { width: 1054px; } } @media (min-width: 1400px) { .explorePage .exploreSections { width: 220px; } .explorePage .exploreGridContainer { width: 1054px; } } @media (min-width: 2000px) { .explorePage .exploreSections { width: 280px; } .explorePage .exploreGridContainer { width: 1581px; } .explorePage .exploreCategoryHeading { padding-left: 35px; } } .ExploreLink a:hover { text-decoration: underline; } .searchRepWrapper { height: 236px; position: relative; width: 236px; } .searchRepWrapper::before { background: rgba(0, 0, 0, 0.05); border-radius: 8px; content: " "; height: 100%; left: 0; margin: -10px; opacity: 0; padding: 10px; pointer-events: none; position: absolute; top: 0; -webkit-transform: scale(0.96); transform: scale(0.96); width: 100%; z-index: -1; } .searchRepWrapper:hover::before { -webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; } .searchRepWrapper .searchTerm { bottom: 10px; left: 10px; max-height: 100%; padding: 5px; position: absolute; } .searchRepWrapper .searchCoverWrapper { background-size: cover; border-radius: 8px; height: 236px; overflow: hidden; } .searchRepWrapper .searchCoverWrapper::after { height: 100%; width: 100%; background: #000; border-radius: 8px; content: ""; opacity: .2; position: absolute; } .exploreSectionList { min-width: 180px; padding-bottom: 15px; } .exploreSectionList.fixedTop { top: 80px; } @media (min-width: 800px) { .exploreSectionList.fixedTop { position: fixed; } } .exploreSectionList.fixedBottom { bottom: 0; position: fixed; } .exploreSectionList.absolute { position: absolute; } .exploreSectionList .lastPicked { padding-bottom: 15px; } .exploreSectionList .firstNonPicked { border-top: 1px solid #efefef; padding-top: 15px; width: 120px; } .exploreSectionList .exploreSection { display: inline-block; padding: 2px; } .WelcomePin { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .WelcomePin .welcomeMessage { color: #fff; display: block; font-size: 30px; font-weight: 700; letter-spacing: -1.25px; line-height: 42px; width: 204px; word-break: break-all; } .AuthLandingPage .sticky { position: -webkit-sticky; position: sticky; top: 64px; z-index: 3; } .AuthLandingPage .SearchGuidesBar { background-color: #fff; width: 100%; } .AuthLandingPage .SearchGuidesBar .improvementsWrapper { overflow: hidden; } @-webkit-keyframes animateUpsellIn { 0% { opacity: 0; -webkit-transform: translateY(100vh); transform: translateY(100vh); } 20% { opacity: 1; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes animateUpsellIn { 0% { opacity: 0; -webkit-transform: translateY(100vh); transform: translateY(100vh); } 20% { opacity: 1; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes animateUpsellHeight { from { height: 320px; } to { height: 140px; } } @keyframes animateUpsellHeight { from { height: 320px; } to { height: 140px; } } @-webkit-keyframes animateDismissConfirmation { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); } } @keyframes animateDismissConfirmation { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); } } .CloseupInterestUpsell.contentContainer { background-color: #fff; border-radius: 8px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); height: 320px; pointer-events: auto; width: 240px; } .CloseupInterestUpsell.contentContainer.animateIn { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-name: animateUpsellIn; animation-name: animateUpsellIn; -webkit-animation-timing-function: cubic-bezier(0.19, 1.15, 0.48, 1); animation-timing-function: cubic-bezier(0.19, 1.15, 0.48, 1); -webkit-transform: translateY(100vh); transform: translateY(100vh); } .CloseupInterestUpsell.contentContainer.animateToConfirmation { -webkit-animation-delay: 0s, 2.3s; animation-delay: 0s, 2.3s; -webkit-animation-duration: 0.7s, 0.2s; animation-duration: 0.7s, 0.2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-name: animateUpsellHeight, animateDismissConfirmation; animation-name: animateUpsellHeight, animateDismissConfirmation; } .CloseupInterestUpsell.followContainer { background-color: #fff; border-radius: 8px; box-sizing: border-box; height: 320px; padding: 24px 28px; position: absolute; width: 100%; } .CloseupInterestUpsell.followContainer.fadeOut { -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-name: fadeOut; animation-name: fadeOut; } .CloseupInterestUpsell.confirmationContainer { background-color: #fff; border-radius: 8px; box-sizing: border-box; height: 140px; opacity: 0; padding: 24px 28px; position: absolute; width: 100%; } .CloseupInterestUpsell.confirmationContainer.fadeIn { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-name: fadeIn; animation-name: fadeIn; } .CloseupInterestUpsell.imageWash { background-color: #000; border-radius: 8px; height: 100%; opacity: .2; position: absolute; top: 0; width: 100%; } .emptyBoardWrapper { width: 100%; } .emptyBoard { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 280px; padding-bottom: 40px; /* Hiding the component while server side styles are still being applied */ } .emptyBoard .static { visibility: hidden; } .emptyBoard .emptyPinWrapper { /* This is a temporary color, not part of the spec */ background-color: #f7f7f7; border-radius: 8px; float: left; margin: 12px; text-align: center; width: 236px; } .emptyBoard .emptyPinWrapper .emptyPinTip { color: #b5b5b5; font-size: 16px; font-weight: bold; letter-spacing: -.2px; line-height: 18px; padding: 98px 36px 0; word-spacing: 0; } .emptyBoard .addPinWrapper { float: left; margin: 12px; width: 236px; } .emptyBoard .pinHeightTall { height: 280px; } .emptyBoard .pinHeightShort { height: 236px; } .EmptyBoardFooter { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 24px 0; } .EmptyBoardFooter .tipLabel { color: #555; display: inline; font-size: 24px; font-weight: bold; padding-left: 20px; } .EmptyBoardFooter .tipLabel .tipRed { color: #bd081c; } .EmptyBoardFooter .tipWrapper { margin: 24px 0; } .FirstPinAppUpsell { background-color: #555; border-radius: 8px 100px 8px 8px; font-size: 21px; font-weight: bold; } .FirstPinAppUpsell .text { color: #fff; margin-bottom: 12px; } .FirstPinAppUpsell .headerText { margin-bottom: 10px; max-width: 170px; } .FirstPinAppUpsell .bodyText { font-size: 16px; } .FirstPinAppUpsell .upsellTextButtons { padding: 20px 0 18px; } .FirstPinAppUpsell .heroContainer { padding-left: 20px; } .FirstPinAppUpsell .iosButton { background-color: #000; background-position: 0 2px; border-radius: 4px; display: inline-block; height: 50px; outline: none; width: 150px; } .FirstPinAppUpsell .androidButton { border-radius: 4px; display: inline-block; height: 50px; margin-bottom: 5px; margin-right: 10px; outline: none; width: 150px; } .FirstPinAppUpsell .upsellImage { background: url(https://s.pinimg.com/webapp/style/images/first-pin-upsell-1x-bd7e1cc3.png) no-repeat; background-size: contain; height: 269px; width: 195px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .FirstPinAppUpsell .upsellImage { background-image: url(https://s.pinimg.com/webapp/style/images/first-pin-upsell-2x-cd89517f.png); } } .FirstPinCreate__Container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; width: 100%; } .FirstPinCreate__Container .FirstPinCreate { display: -webkit-box; display: -ms-flexbox; display: flex; /* stylelint-disable-next-line property-blacklist */ font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; height: 528px; margin: auto; position: relative; width: 660px; } .FirstPinCreate__Container .FirstPinCreate__mainContent { background: #fff; border-radius: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; height: inherit; overflow: hidden; position: relative; width: 660px; } .FirstPinCreate__Container .FirstPinCreate__firstPinHeader { color: #fff; font-size: 28px; font-weight: bold; margin-bottom: 10px; text-align: center; } .FirstPinCreate__Container .FirstPinCreate__Spacer { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .FirstPinCreate__Header { color: #fff; font-size: 28px; font-weight: bold; margin-left: 170px; position: fixed; top: 100px; } .FirstPinCreate__firstPinBanner { background: #2ab6dd; bottom: 0; box-sizing: border-box; color: #fff; font-size: 28px; font-weight: bold; left: 0; opacity: .95; padding: 15px 40px; position: fixed; text-align: center; width: 100%; } .FirstPinCreate__firstSuccessBanner { background: #42d321; bottom: 0; box-sizing: border-box; color: #fff; font-size: 28px; font-weight: bold; left: 0; opacity: .95; padding: 15px 40px; position: fixed; text-align: center; width: 100%; } .GridBoardRep .GridBoardRep__boardName { display: inline-block; margin: 8px 0 24px; max-width: 236px; padding-left: 4px; } .GridBoardRep .GridBoardRep__imageWrapper { height: 236px; overflow: hidden; position: relative; width: 236px; } .GridBoardRep .GridBoardRep__linkWrapper :hover { cursor: pointer; } .GridBoardRep .GridBoardRep__item { background-color: #efefef; height: 117px; position: absolute; vertical-align: top; width: 117px; } .GridBoardRep .GridBoardRep__bottomLeftRep { border-bottom-left-radius: 8px; border-right: 1px solid #fff; border-top: 1px solid #fff; bottom: 0; left: 0; } .GridBoardRep .GridBoardRep__bottomRightRep { border-bottom-right-radius: 8px; border-left: 1px solid #fff; border-top: 1px solid #fff; bottom: 0; right: 0; } .GridBoardRep .GridBoardRep__emptyThumb { background-color: #efefef; display: inline-block; } .GridBoardRep .GridBoardRep__topLeftRep { border-bottom: 1px solid #fff; border-right: 1px solid #fff; border-top-left-radius: 8px; left: 0; top: 0; } .GridBoardRep .GridBoardRep__topRightRep { border-bottom: 1px solid #fff; border-left: 1px solid #fff; border-top-right-radius: 8px; right: 0; top: 0; } .NuxModalStepBase { border-radius: 6px; height: 640px; max-height: calc(100vh - 40px); overflow: hidden; width: 800px; } .NuxModalStepBase.denseGridModal { height: 670px; } .NuxModalStepBase .stepInfoContent { color: #d3d3d3; font-size: 16px; font-weight: bold; height: 20px; line-height: 19px; position: absolute; right: 16px; text-align: right; top: 16px; } .NuxModalStepBase .stepInfoContent .stepInfo { display: inline-block; } .NuxExtensionUpsell__optionalSkip { background: none; border: none; cursor: pointer; display: inline-block; font-size: 16px; font-weight: bold; height: 20px; line-height: 19px; outline: none; outline-offset: 0; padding: 0; text-decoration: underline; } .NuxExtensionUpsell__optionalSkip::-moz-focus-inner { border: none; padding: 0; } @-webkit-keyframes websiteSlideUp { from { opacity: 0; -webkit-transform: translate(0, 200px); transform: translate(0, 200px); } 99% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } to { opacity: .5; -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes websiteSlideUp { from { opacity: 0; -webkit-transform: translate(0, 200px); transform: translate(0, 200px); } 99% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } to { opacity: .5; -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes pinitButtonAppear { from { -webkit-transform: scale(0, 0) translate(0, 0); transform: scale(0, 0) translate(0, 0); } 70% { -webkit-transform: scale(1.25, 1.25) translate(-17px, 0); transform: scale(1.25, 1.25) translate(-17px, 0); } to { -webkit-transform: scale(1, 1) translate(-17px, 0); transform: scale(1, 1) translate(-17px, 0); } } @keyframes pinitButtonAppear { from { -webkit-transform: scale(0, 0) translate(0, 0); transform: scale(0, 0) translate(0, 0); } 70% { -webkit-transform: scale(1.25, 1.25) translate(-17px, 0); transform: scale(1.25, 1.25) translate(-17px, 0); } to { -webkit-transform: scale(1, 1) translate(-17px, 0); transform: scale(1, 1) translate(-17px, 0); } } @-webkit-keyframes arrowSlide { from { opacity: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50% { opacity: .5; -webkit-transform: translate(100px, 0); transform: translate(100px, 0); } to { opacity: 1; -webkit-transform: translate(100px, 0); transform: translate(100px, 0); } } @keyframes arrowSlide { from { opacity: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50% { opacity: .5; -webkit-transform: translate(100px, 0); transform: translate(100px, 0); } to { opacity: 1; -webkit-transform: translate(100px, 0); transform: translate(100px, 0); } } @-webkit-keyframes websiteSlideRightAndDiminish { from { opacity: 1; -webkit-transform: translate(0, 0) scale(1, 1); transform: translate(0, 0) scale(1, 1); } to { opacity: 0; -webkit-transform: translate(300px, 0) scale(0.12, 0.12); transform: translate(300px, 0) scale(0.12, 0.12); } } @keyframes websiteSlideRightAndDiminish { from { opacity: 1; -webkit-transform: translate(0, 0) scale(1, 1); transform: translate(0, 0) scale(1, 1); } to { opacity: 0; -webkit-transform: translate(300px, 0) scale(0.12, 0.12); transform: translate(300px, 0) scale(0.12, 0.12); } } @-webkit-keyframes websiteSlideRightAndDiminishFullScreen { from { opacity: 1; -webkit-transform: translate(0, 0) scale(1, 1); transform: translate(0, 0) scale(1, 1); } to { opacity: 0; -webkit-transform: translate(450px, 0) scale(0.12, 0.12); transform: translate(450px, 0) scale(0.12, 0.12); } } @keyframes websiteSlideRightAndDiminishFullScreen { from { opacity: 1; -webkit-transform: translate(0, 0) scale(1, 1); transform: translate(0, 0) scale(1, 1); } to { opacity: 0; -webkit-transform: translate(450px, 0) scale(0.12, 0.12); transform: translate(450px, 0) scale(0.12, 0.12); } } @-webkit-keyframes pinAppear { from { opacity: 0; } to { opacity: 1; } } @keyframes pinAppear { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes elementVisible { from { visibility: hidden; } to { visibility: visible; } } @keyframes elementVisible { from { visibility: hidden; } to { visibility: visible; } } .NuxModalInstallExtension { height: 100%; } .NuxModalInstallExtension .headerContent { margin: 32px auto 24px; width: 736px; } .NuxModalInstallExtension .extensionUpsellWrapper { height: 100%; position: relative; width: 100%; } .NuxModalInstallExtension .extensionUpsellWebsiteImage { -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-name: websiteSlideUp; animation-name: websiteSlideUp; left: 134px; opacity: 0; position: absolute; top: 87px; -webkit-transform: translate(0, 300px); transform: translate(0, 300px); } .NuxModalInstallExtension .extensionUpsellEmptySpace { background-color: #fff; height: 225px; left: 134px; opacity: 1; position: absolute; top: 87px; width: 314px; } .NuxModalInstallExtension .extensionUpsellWebsiteImage, .NuxModalInstallExtension .extensionUpsellWebsiteImage2 { background: url(https://s.pinimg.com/webapp/style/images/default-browser-save-website-1x-64b0d84e.png) no-repeat; background-size: contain; height: 225px; width: 315px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxModalInstallExtension .extensionUpsellWebsiteImage, .NuxModalInstallExtension .extensionUpsellWebsiteImage2 { background-image: url(https://s.pinimg.com/webapp/style/images/default-browser-save-website-2x-28fc34b6.png); } } .NuxModalInstallExtension .extensionUpsellWebsiteImage.BR, .NuxModalInstallExtension .extensionUpsellWebsiteImage2.BR { background: url(https://s.pinimg.com/webapp/style/images/BR-browser-save-website-1x-5e90f195.png) no-repeat; background-size: contain; height: 224px; width: 314px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxModalInstallExtension .extensionUpsellWebsiteImage.BR, .NuxModalInstallExtension .extensionUpsellWebsiteImage2.BR { background-image: url(https://s.pinimg.com/webapp/style/images/BR-browser-save-website-2x-d846f321.png); } } .NuxModalInstallExtension .extensionUpsellWebsiteImage.DE, .NuxModalInstallExtension .extensionUpsellWebsiteImage2.DE { background: url(https://s.pinimg.com/webapp/style/images/DE-browser-save-website-1x-86090736.png) no-repeat; background-size: contain; height: 224px; width: 314px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxModalInstallExtension .extensionUpsellWebsiteImage.DE, .NuxModalInstallExtension .extensionUpsellWebsiteImage2.DE { background-image: url(https://s.pinimg.com/webapp/style/images/DE-browser-save-website-2x-d7746d89.png); } } .NuxModalInstallExtension .extensionUpsellWebsiteImage.FR, .NuxModalInstallExtension .extensionUpsellWebsiteImage2.FR { background: url(https://s.pinimg.com/webapp/style/images/FR-browser-save-website-1x-e1bed247.png) no-repeat; background-size: contain; height: 224px; width: 314px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxModalInstallExtension .extensionUpsellWebsiteImage.FR, .NuxModalInstallExtension .extensionUpsellWebsiteImage2.FR { background-image: url(https://s.pinimg.com/webapp/style/images/FR-browser-save-website-2x-5bfff355.png); } } .NuxModalInstallExtension .extensionUpsellWebsiteImage.GB, .NuxModalInstallExtension .extensionUpsellWebsiteImage2.GB { background: url(https://s.pinimg.com/webapp/style/images/GB-browser-save-website-1x-61623b74.png) no-repeat; background-size: contain; height: 224px; width: 314px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxModalInstallExtension .extensionUpsellWebsiteImage.GB, .NuxModalInstallExtension .extensionUpsellWebsiteImage2.GB { background-image: url(https://s.pinimg.com/webapp/style/images/GB-browser-save-website-2x-8f689938.png); } } .NuxModalInstallExtension .extensionUpsellWebsiteImage.JP, .NuxModalInstallExtension .extensionUpsellWebsiteImage2.JP { background: url(https://s.pinimg.com/webapp/style/images/JP-browser-save-website-1x-f84158ff.png) no-repeat; background-size: contain; height: 224px; width: 314px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxModalInstallExtension .extensionUpsellWebsiteImage.JP, .NuxModalInstallExtension .extensionUpsellWebsiteImage2.JP { background-image: url(https://s.pinimg.com/webapp/style/images/JP-browser-save-website-2x-1b32e58b.png); } } .NuxModalInstallExtension .extensionUpsellWebsiteImage.US, .NuxModalInstallExtension .extensionUpsellWebsiteImage2.US { background: url(https://s.pinimg.com/webapp/style/images/US-browser-save-website-1x-da25e403.png) no-repeat; background-size: contain; height: 224px; width: 314px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxModalInstallExtension .extensionUpsellWebsiteImage.US, .NuxModalInstallExtension .extensionUpsellWebsiteImage2.US { background-image: url(https://s.pinimg.com/webapp/style/images/US-browser-save-website-2x-61f15c6e.png); } } .NuxModalInstallExtension .extensionUpsellWebsiteImage2 { -webkit-animation: websiteSlideRightAndDiminish 1.5s 2s forwards, elementVisible 0s 1.5s forwards; animation: websiteSlideRightAndDiminish 1.5s 2s forwards, elementVisible 0s 1.5s forwards; background-size: cover; left: 134px; position: absolute; top: 87px; visibility: hidden; } .NuxModalInstallExtension .extensionUpsellPinImage { background: url(https://s.pinimg.com/webapp/style/images/default-browser-save-pin-1x-ea21ab28.png) no-repeat; background-size: contain; height: 295px; width: 157px; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; -webkit-animation-duration: 0.25s; animation-duration: 0.25s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-name: pinAppear; animation-name: pinAppear; border-color: #d3d3d3; border-radius: 6px; border-width: 1px; height: 294px; left: 510px; opacity: 0; position: absolute; top: 52px; width: 154px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxModalInstallExtension .extensionUpsellPinImage { background-image: url(https://s.pinimg.com/webapp/style/images/default-browser-save-pin-2x-ff3150b9.png); } } .NuxModalInstallExtension .extensionUpsellPinImage.BR { background: url(https://s.pinimg.com/webapp/style/images/BR-browser-save-pin-1x-c959f8c4.png) no-repeat; background-size: contain; height: 281px; width: 157px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxModalInstallExtension .extensionUpsellPinImage.BR { background-image: url(https://s.pinimg.com/webapp/style/images/BR-browser-save-pin-2x-ce9a42c4.png); } } .NuxModalInstallExtension .extensionUpsellPinImage.DE { background: url(https://s.pinimg.com/webapp/style/images/DE-browser-save-pin-1x-fa3343f2.png) no-repeat; background-size: contain; height: 295px; width: 157px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxModalInstallExtension .extensionUpsellPinImage.DE { background-image: url(https://s.pinimg.com/webapp/style/images/DE-browser-save-pin-2x-908755e7.png); } } .NuxModalInstallExtension .extensionUpsellPinImage.FR { background: url(https://s.pinimg.com/webapp/style/images/FR-browser-save-pin-1x-b2c9b48e.png) no-repeat; background-size: contain; height: 295px; width: 157px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxModalInstallExtension .extensionUpsellPinImage.FR { background-image: url(https://s.pinimg.com/webapp/style/images/FR-browser-save-pin-2x-8cf5c26c.png); } } .NuxModalInstallExtension .extensionUpsellPinImage.GB { background: url(https://s.pinimg.com/webapp/style/images/GB-browser-save-pin-1x-4fd314c1.png) no-repeat; background-size: contain; height: 281px; width: 157px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxModalInstallExtension .extensionUpsellPinImage.GB { background-image: url(https://s.pinimg.com/webapp/style/images/GB-browser-save-pin-2x-2ff4b4bd.png); } } .NuxModalInstallExtension .extensionUpsellPinImage.JP { background: url(https://s.pinimg.com/webapp/style/images/JP-browser-save-pin-1x-75b87a4a.png) no-repeat; background-size: contain; height: 304px; width: 157px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxModalInstallExtension .extensionUpsellPinImage.JP { background-image: url(https://s.pinimg.com/webapp/style/images/JP-browser-save-pin-2x-989e3765.png); } } .NuxModalInstallExtension .extensionUpsellPinImage.US { background: url(https://s.pinimg.com/webapp/style/images/US-browser-save-pin-1x-0dba3a57.png) no-repeat; background-size: contain; height: 281px; width: 157px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxModalInstallExtension .extensionUpsellPinImage.US { background-image: url(https://s.pinimg.com/webapp/style/images/US-browser-save-pin-2x-f36a90c9.png); } } .NuxModalInstallExtension .extensionUpsellArrowImage { background: url(https://s.pinimg.com/webapp/style/images/browser-save-arrow-1x-1d71efe5.png) no-repeat; background-size: contain; height: 79px; width: 150px; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-name: arrowSlide; animation-name: arrowSlide; left: 254px; opacity: 0; position: absolute; top: 161px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxModalInstallExtension .extensionUpsellArrowImage { background-image: url(https://s.pinimg.com/webapp/style/images/browser-save-arrow-2x-79536253.png); } } .NuxModalInstallExtension .extensionUpsellPinitButtonImage { background: url(https://s.pinimg.com/webapp/style/images/browser-save-pinit-button-1x-a49b9ec1.png) no-repeat; background-size: contain; height: 86px; width: 87px; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-name: pinitButtonAppear; animation-name: pinitButtonAppear; left: 371px; position: absolute; top: 57px; -webkit-transform: scale(0, 0); transform: scale(0, 0); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .NuxModalInstallExtension .extensionUpsellPinitButtonImage { background-image: url(https://s.pinimg.com/webapp/style/images/browser-save-pinit-button-2x-4161fb89.png); } } .NuxModalInstallExtension .footer { border-radius: 8px; bottom: 0; display: block; height: 110px; position: absolute; text-align: center; width: 100%; z-index: 2; } .NuxModalInstallExtension .footer .btn { border: 0 !important; border-radius: 6px; box-shadow: none !important; font-size: 24px; font-weight: bold; height: 60px; line-height: 29px; margin: 20px 20px 5px; width: 760px; } .NuxModalInstallExtension .footer .btn:enabled { background: #bd081c; color: #fff; } .NuxModalInstallExtension .footer .optionalSkip { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #999; display: inline-block; font-size: 16px; font-weight: bold; height: 20px; line-height: 19px; margin-bottom: 5px; text-decoration: underline; } .NuxModalInstallExtension .footer .optionalSkip:hover { cursor: pointer; } .NuxGenderStep { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .NuxGenderStep .NuxGenderStep__genderOption, .NuxGenderStep .NuxGenderStep__genderOptionLast, .NuxGenderStep .NuxGenderStep__genderOptionNoHover, .NuxGenderStep .NuxGenderStep__genderOptionSelected { border-top: 1px solid #efefef; cursor: pointer; display: block; font-size: 36px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: bold; height: 40px; padding: 24px 0 24px 32px; position: relative; vertical-align: middle; } .NuxGenderStep .NuxGenderStep__genderOptionLast { border-bottom: 1px solid #efefef; } .NuxGenderStep .NuxGenderStep__genderOption:hover, .NuxGenderStep .NuxGenderStep__genderOptionSelected, .NuxGenderStep .NuxGenderStep__genderOptionLast:hover { background-color: #efefef; } .NuxGenderStep .NuxGenderStep__genderOptionText, .NuxGenderStep .NuxGenderStep__genderOptionTextNoHover { color: #555; padding-left: 40px; position: absolute; text-align: center; vertical-align: middle; } .NuxGenderStep .NuxGenderStep__genderOptionText { top: 20px; } .NuxGenderStep .NuxGenderStep__genderOptionTextNoHover { top: 23px; } .NuxGenderStep .NuxGenderStep__headerContent { margin: 32px 32px 16px; width: 736px; } .NuxGenderStep .NuxGenderStep__nameHeaderContent { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: 40px; margin: 28px 32px 0; width: 620px; } .NuxGenderStep .NuxGenderStep__genderSelector input[type=text] { background: transparent; border: none; color: #555; font-size: 24px; font-weight: bold; margin-right: 20px; width: 590px; } .NuxGenderStep input[type=text].slimInput { width: 340px; } .NuxGenderStep .NuxGenderStep__radioButtonWrapper { padding-top: 10px; } .NuxGenderStep .NuxGenderStep__genderOptionContent { margin: 0 auto; max-width: 1276px; position: relative; } @media (max-width: 1299px) { .NuxGenderStep .NuxGenderStep__genderOptionContent { max-width: 1016px; } } @media (max-width: 1039px) { .NuxGenderStep .NuxGenderStep__genderOptionContent { max-width: 756px; } } .NuxGenderStep .NuxGenderStep__nextButton { margin: 80px 32px 0; } .NuxGenderStep .NuxGenderStep__nameInputWrapper { margin: 0 4px; } .NuxGenderStep .NuxGenderStep__slimHeaderContent { margin: 32px 32px 16px; width: 480px; } .NuxGenderStep .NuxGenderStep__hideRadioButton { display: none; } .NuxGenderStep .NuxGenderStep__buttonGenderSelector { background: transparent; border: none; color: #555; font-size: 24px; font-weight: bold; margin-right: 30px; text-align: center; width: 590px; } .NuxGenderStep .NuxGenderStep__buttonGenderOption { background-color: #efefef; border-radius: 8px; color: #555; display: block; font-size: 24px; height: 70px; margin: 12px auto; vertical-align: middle; width: 480px; } .NuxGenderStep .NuxGenderStep__buttonGenderOption:hover { background-color: #e0e0e0; } .NuxGenderStep .NuxGenderStep__buttonGenderOption:active { background-color: #c9c9c9; } .NuxGenderStep .NuxGenderStep__customSelectedOption { background-color: #555; border-radius: 8px; color: #fff; display: block; font-size: 24px; height: 70px; margin: 12px auto; vertical-align: middle; width: 480px; } .NuxGenderStep .NuxGenderStep__buttonGenderOptionText { color: #555; font-weight: bold; line-height: 70px; padding-left: 30px; text-align: center; vertical-align: middle; } .NuxGenderStep .NuxGenderStep__customSelectedOptionText { color: #fff; line-height: 70px; padding-left: 30px; text-align: center; vertical-align: middle; } .NuxGenderStep .NuxGenderStep__buttonCustomGenderInput { border: 1px solid #b5b5b5; border-radius: 8px; box-sizing: border-box; color: #555; display: block; font-size: 24px; font-weight: bold; height: 70px; margin: 12px auto; padding: 0 30px; vertical-align: middle; width: 480px; } .NuxGenderStep .NuxGenderStep__buttonCustomGenderInput::-webkit-input-placeholder { color: #b5b5b5; } .NuxGenderStep .NuxGenderStep__buttonCustomGenderInput::-moz-placeholder { color: #b5b5b5; } .NuxGenderStep .NuxGenderStep__buttonCustomGenderInput:-ms-input-placeholder { color: #b5b5b5; } .NuxGenderStep .NuxGenderStep__buttonCustomGenderInput::placeholder { color: #b5b5b5; } .NuxInterest { background-color: transparent; border: none; height: 136px; padding: 0; position: relative; width: 136px; } .NuxInterest.TextOnly { height: 80px; width: 235px; } .NuxInterest.TextOnly:hover { background-color: rgba(0, 0, 0, 0.1); border-radius: 8px; } .NuxInterest.notSelectable { cursor: default; } .NuxInterest .interestCardWrapper { height: 100%; position: absolute; width: 100%; z-index: 1; } .NuxInterest .interestCardWrapper .selectedOverlay { background-color: #000; border-radius: 6px; height: 100%; opacity: .7; position: absolute; top: 0; width: 100%; z-index: -1; } .NuxInterest .darkBottomHalf { background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)); } .NuxInterest .darkBottomHalf:hover { background: transparent; } .NuxInterest .overflowMask { background-color: #bd081c; border-radius: 6px; color: #fff; font-size: 24px; font-weight: bold; height: 100%; line-height: 128px; text-align: center; width: 100%; } .NuxInterest .defaultImageWash { background-color: #000; border-radius: 6px; height: 100%; opacity: .1; position: absolute; top: 0; width: 100%; } .NuxInterest .checkmarkCircle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #fff; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; height: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 24px; } .NuxInterest .interestCardWrapper:hover .hoverMask { background-color: rgba(0, 0, 0, 0.6); border-radius: 8px; height: 100%; pointer-events: none; position: absolute; top: 0; width: 100%; } .NuxInterest .hoverText { display: none; } .NuxInterest .interestCardWrapper:hover .hoverText { bottom: 0; display: block; padding: 8px; position: absolute; -webkit-transition: -webkit-transform .1s ease-in-out; transition: -webkit-transform .1s ease-in-out; transition: transform .1s ease-in-out; transition: transform .1s ease-in-out, -webkit-transform .1s ease-in-out; z-index: 1; } .NuxInterest .selectedWrapper { height: 100%; position: absolute; width: 100%; } .nuxLoader .NuxLoader__overflowMask { background-color: #bd081c; border-radius: 6px; color: #fff; font-size: 24px; font-weight: bold; height: 100%; line-height: 128px; text-align: center; width: 100%; } .nuxLoader .spinner { height: 40px; position: absolute; right: 40px; top: 40px; width: 40px; } .nuxLoader .spinner:focus { outline: none; } .nuxLoader .listsWrapper { left: 30px; position: absolute; top: 344px; } .nuxLoader .listsWrapper .interestList { overflow: hidden; } .nuxLoader .listsWrapper .pin { display: inline-block; /* bottom margin to push the 2nd row's box shadow out of the visible area */ margin: 4px; width: 180px; } .nuxLoader .stepInfoContent { display: none; } .nuxLoader .loadingInterests { margin-top: 75px; } @-webkit-keyframes fadein { 0% { opacity: 1; } 20% { opacity: 1; } 40% { opacity: 0; } 80% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadein { 0% { opacity: 1; } 20% { opacity: 1; } 40% { opacity: 0; } 80% { opacity: 0; } 100% { opacity: 1; } } .nuxLoader .loadingInterests .fadingInterest { -webkit-animation: 4s linear infinite fadein; animation: 4s linear infinite fadein; border-radius: 8px; display: inline; } .nuxLoader .loadingInterests .fadingInterest:nth-child(1) { -webkit-animation-delay: .5s; animation-delay: .5s; } .nuxLoader .loadingInterests .fadingInterest:nth-child(2) { -webkit-animation-delay: 1s; animation-delay: 1s; } .nuxLoader .loadingInterests .fadingInterest:nth-child(3) { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .nuxLoader .loadingInterests .fadingInterest:nth-child(4) { -webkit-animation-delay: 2s; animation-delay: 2s; } .nuxLoader .loadingInterests .fadingInterest:nth-child(5) { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .nuxLoader .loadingInterests .fadingInterest:nth-child(6) { -webkit-animation-delay: 3s; animation-delay: 3s; } .nuxLoader .ProgressBar { bottom: 0; position: absolute; } .NuxContainer { background: #fff; height: 640px; max-height: calc(100vh - 40px); width: 800px; } .NuxContainer:focus { outline: none; } .NuxContainer.slimWidth { width: 544px; } .NuxContainer.changeWidth { -webkit-animation: widthShift .5s; animation: widthShift .5s; } @-webkit-keyframes widthShift { from { width: 544px; } to { width: 800px; } } @keyframes widthShift { from { width: 544px; } to { width: 800px; } } .NuxContainer.fullScreen { background: rgba(255, 255, 255, 0); bottom: 0; height: 100%; max-height: calc(100vh - 65px); position: absolute; -webkit-transition: background .3s; transition: background .3s; width: 100%; will-change: background; } .NuxContainer.fullScreen.fullScreenFadeIn { background: white; } .NuxContainer .NuxContainer__NuxStepContainer { height: 100%; } .NuxContainer .NuxContainer__NuxStepContainer.fullScreen { -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; will-change: transform; } .NuxContainer .NuxContainer__NuxStepContainer.fullScreen.fullScreenMoveIn { -webkit-transform: translateY(0); transform: translateY(0); } .NuxPicker__contentWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .NuxPicker__contentWrapper .NuxPickerHeader__headerBackground { background: rgba(255, 255, 255, 0.98); padding: 24px 0 48px; position: -webkit-sticky; position: sticky; top: 0; z-index: 1; } .NuxPicker__contentWrapper .NuxPickerHeader { margin: 32px auto; position: relative; width: 736px; } .NuxPicker__contentWrapper .NuxPickerFooter { background: #fff; border-radius: 8px; display: block; height: 100px; position: relative; text-align: center; width: 100%; z-index: 104; } .NuxPicker__contentWrapper .NuxPickerFooter.collapsedFooter { height: 16px; } .NuxPicker__contentWrapper .NuxPickerFooter .NuxPickerFooter__buttonWrapper { -webkit-font-smoothing: antialiased; } .NuxPicker__contentWrapper .NuxPickerFooter .NuxPickerFooter__footerWash { background: -webkit-linear-gradient(rgba(255, 255, 255, 0), white); background: linear-gradient(rgba(255, 255, 255, 0), white); border-radius: 6px; bottom: 0; height: 73px; margin-top: -73px; pointer-events: none; position: absolute; width: 100%; } .NuxPicker__contentWrapper .NuxPickerFooter .NuxPickerFooter__footerWash.bottomSpace { bottom: 73px; } .NuxPicker__contentWrapper .NuxPickerInterestsGrid { height: 368px; overflow-y: scroll; padding-bottom: 73px; } .NuxPicker__contentWrapper .NuxPickerInterestsGrid.fullHeight { height: 100%; } .NuxPicker__contentWrapper .spinner { position: absolute; right: 5px; top: 5px; } .NuxPicker__contentWrapper .NuxPicker__Pin--checkmark { position: relative; top: 48px; } .NuxPicker__contentWrapper .InterestCardWrapper__selectedWrapper { height: 100%; position: absolute; -webkit-transition: -webkit-transform .1s ease-in-out; transition: -webkit-transform .1s ease-in-out; transition: transform .1s ease-in-out; transition: transform .1s ease-in-out, -webkit-transform .1s ease-in-out; width: 100%; z-index: 1; } .NuxPicker__contentWrapper .InterestCardWrapper__selectedWrapper:active { -webkit-transform: scale(0.95); transform: scale(0.95); } .NuxPicker__contentWrapper .InterestCardWrapper__selectedOverlay { background-color: rgba(0, 0, 0, 0.4); border-radius: 6px; height: 100%; position: absolute; top: 0; width: 100%; z-index: -1; } .NuxPicker__contentWrapper .InterestCardWrapper__selectedOverlay.smallCheckmark { background-color: rgba(0, 0, 0, 0.6); } .NuxPicker__contentWrapper .InterestCardWrapper__selectedOverlayText { bottom: 0; padding: 8px; position: absolute; } .SearchSuggestions { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: 5px; min-height: 50px; } .searchSuggestionsLoadingSpinner { padding-top: 24px; position: relative; } .SearchSuggestionToken .tokenContainer { border-radius: 4px; color: #fff; float: left; font-size: 16px; font-weight: 600; height: 40px; letter-spacing: -.01em; margin: 4px; } .SearchSuggestionToken .tokenContainer a { color: inherit; } .SearchSuggestionToken .tokenContainer span { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-radius: 4px; float: left; padding: 9px 12px 11px; } .SearchSuggestionToken .tokenContainer span:hover { background: rgba(0, 0, 0, 0.05); } .SearchSuggestionToken .tokenContainer span em { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -51px no-repeat; float: left; margin: 3px 8px 5px 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .SearchSuggestionToken .tokenContainer span em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -43px -368px; background-size: 399px 382px; } } .StickyAppUpsell { background-color: #555; border-radius: 0; font-size: 21px; font-weight: bold; max-height: 0; opacity: 0; overflow: hidden; position: fixed; width: 100%; z-index: 1; } .StickyAppUpsell.show { max-height: 500px; opacity: 1; -webkit-transition: max-height 1s ease-in; transition: max-height 1s ease-in; } .StickyAppUpsell .iosButton { display: inline-block; height: 45px; outline: none; width: 151px; } .StickyAppUpsell .androidButton { display: inline-block; height: 45px; margin-right: 10px; outline: none; width: 151px; } .StickyAppUpsell .upsellTextButtons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 10px 0; width: 100%; } .StickyAppUpsell .headerText { display: inline-block; margin-left: 100px; margin-top: 15px; } .StickyAppUpsell .appButtons { display: inline-block; margin-right: 125px; margin-top: 3px; min-width: 315px; } .StickyAppUpsell .text { color: #fff; margin-bottom: 10px; } .StickyAppUpsell .closeButton, .StickyAppUpsell .closeButton:active { background: url(https://s.pinimg.com/webapp/style/images/close-white-1x-83883ea4.png) no-repeat; background-size: contain; height: 10px; width: 10px; border: none; margin-right: 10px; margin-top: 20px; position: absolute; right: 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .StickyAppUpsell .closeButton, .StickyAppUpsell .closeButton:active { background-image: url(https://s.pinimg.com/webapp/style/images/close-white-2x-e88bd7b9.png); } } .StickyBannerFooter { bottom: 0%; height: 0; min-width: 800px; position: fixed; -webkit-transition: height .85s; transition: height .85s; -webkit-transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1); transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1); width: 100%; } .StickyBannerFooter .colorSubHeaderCTAText { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #d698ff; font-size: 16px; font-weight: 700px; letter-spacing: -.2; line-height: 18px; word-spacing: 0; } .StickyBannerFooter .headerCTAText { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #ff9f72; font-size: 16px; font-weight: 700px; letter-spacing: -.2; line-height: 18px; word-spacing: 0; } .StickyBannerFooter .dismissButton { background-color: inherit; border: none; } .UpsellTip { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-box-align: center; -ms-flex-align: center; align-items: center; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; } .UpsellTip .upsellTip { color: #555; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; font-size: 24px; font-weight: bold; letter-spacing: -1px; padding: 0 30px 70px; } .UpsellTip .upsellTip .tipTitle { color: #bd081c; } .UpsellTip .footerButtons { bottom: 0; left: 0; padding: 24px; position: absolute; right: 0; } .UpsellTip .footerButtons .submitButton { position: absolute; right: 24px; } .UpsellTip .footerButtons .cancelButton, .UpsellTip .footerButtons .submitButton { /* stylelint-disable-next-line at-rule-no-unknown */ height: 40px; padding: 10px 14px 12px; } .UpsellTip .footerButtons .Button.btn.isBrioFlat.hasText.hasIcon.submitButton span { margin-left: 8px; } .conversationPanel { height: 440px; overflow: auto; } .EmptyConversations { background: #fff; } .EmptyConversations .intro { color: #999; font-size: 13px; margin: 20px auto 24px; text-align: center; width: 210px; } .EmptyConversations .intro strong { color: #666; letter-spacing: .1px; line-height: 20px; } .EmptyConversations .icon { background: url(https://s.pinimg.com/webapp/style/images/messages-blank-combined-1x-546e543f.png) no-repeat; background-size: contain; height: 238px; width: 280px; margin: 30px auto 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .EmptyConversations .icon { background-image: url(https://s.pinimg.com/webapp/style/images/messages-blank-combined-2x-18885d27.png); } } .EmptyConversations .headsContainer { margin-left: auto; margin-right: auto; padding: 25px; width: 225px; } .EmptyConversations .headsContainer::after { clear: both; content: ""; display: table; } .EmptyConversations .headsContainer .ConversationHead { float: left; margin-right: 24px; } .EmptyConversations .headsContainer .ConversationHead:last-child { margin-right: 0; } .NewsConversationsDropdown { max-height: 500px; min-width: 375px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .newsConversationsTabs { overflow: hidden; padding: 2px; } .newsConversationsTabs .newsConversationsTabButton { background-color: #efefef; color: #b5b5b5; display: inline-block; font-size: 16px; font-weight: 500; height: 36px; width: 100%; } .newsConversationsTabs .newsConversationsTabButton.activeSegment { background: #fff; } .newsConversationsTabs .newsConversationsTabButton.activeSegment, .newsConversationsTabs .newsConversationsTabButton:focus, .newsConversationsTabs .newsConversationsTabButton:hover { color: #555; } .newsConversationsTabs .newsConversationsTabButton.badged .buttonBadge { width: 5px; height: 5px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -467px -372px no-repeat; font-size: 0; left: -7px; padding: 0; position: relative; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .newsConversationsTabs .newsConversationsTabButton.badged .buttonBadge { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px -100px; background-size: 428px 427px; } } .newsConversationsTabs ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .newsConversationsTabs ul li { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; } /* desktop.scss */ .newsConversationsTabs { background: #efefef; border-radius: 6px; margin: 10px; } .previewRowItem { display: inline-block; margin-right: 4px; } .previewRowFullWidthItem { background: #efefef; border-left: 2px solid #fff; border-radius: 0; box-sizing: border-box; margin: 0; overflow: hidden; width: 25%; /* handles empty card and last image item */ } .previewRowFullWidthItem:first-child, .previewRowFullWidthItem:first-child span { border-radius: 4px 0 0 4px; } .previewRowFullWidthItem:last-child, .previewRowFullWidthItem:last-child span { border-radius: 0 4px 4px 0; } /* TODO: proper fix through box instead of repeat divergent styles; handles empty card and last image item */ .hasBrioCorners { /* handles empty card and last image item */ } .hasBrioCorners:first-child, .hasBrioCorners:first-child img { border-radius: 8px 0 0 8px; } .hasBrioCorners:first-child, .hasBrioCorners:first-child span { border-radius: 8px 0 0 8px; } .hasBrioCorners:last-child, .hasBrioCorners:last-child span { border-radius: 0 8px 8px 0; } .hasBrioCorners:last-child, .hasBrioCorners:last-child img { border-radius: 0 8px 8px 0; } .hasBrioCorners:last-child, .hasBrioCorners:last-child div { border-radius: 0 8px 8px 0; } .clickthroughHeader { margin: auto; max-width: 740px; padding: 30px 0 6px 24px; } .clickthroughHeader .headerImage { height: 48px; margin-right: 12px; width: 48px; } .clickthroughHeader .headerMessage { height: 48px; } .educationPill { background-color: #88a5ab; border: none; border-radius: 100px; margin: 20px; width: 344px; } .educationPill.slideIn { -webkit-animation: menu-slide-in-up .3s; animation: menu-slide-in-up .3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .educationPill.fadeOut { -webkit-animation: fadeOut .3s; animation: fadeOut .3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; pointer-events: none; } .educationPill .message { color: #fff; font-size: 18px; font-weight: 500; margin: 0 auto; padding: 16px 0; text-align: left; width: 80%; } .educationStep { position: absolute; z-index: 752; } .educationStep.bottom { bottom: 0; } .fourPixelMask { border-radius: 4px; overflow: hidden; } .librofile { display: inline-block; position: relative; } .librofile .pinImage { background: #efefef center top; background-size: cover; display: inline-block; } .librofile .pinImage:not(:last-child) { margin-right: 2px; } .librofile .pinImages { overflow: hidden; } .librofile .profileImage { border: 2px solid #fff; bottom: -10px; left: 8px; position: absolute; } .newsHubItem { border-bottom: 1px solid #efefef; display: block; padding: 28px 0 28px 16px; } .newsHubItem:hover, .newsHubItem:focus { background-color: #f1f1f1; } .newsHubItem:hover .whiteBorderOnHover, .newsHubItem:focus .whiteBorderOnHover { border-radius: 8px; box-shadow: 0 0 0 2px #fff; } .newsHubItem:hover .whiteOnHover, .newsHubItem:focus .whiteOnHover { background-color: #fff !important; } .newsHubPreview .newsHubItem { padding-top: 16px; } .miniPinGridItem { background: #efefef center top; background-size: cover; display: inline-block; } .miniPinGridItem:not(:last-child) { margin-right: 2px; } .attributionWrapper { bottom: -10px; left: 8px; position: absolute; } .attributionUserBorder { border: 2px solid #fff; border-radius: 100px; } .attributionSearchBorder { border: 2px solid #fff; border-radius: 999px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .newsHubPanel .newsHubItemDate { padding: 32px 0 8px 16px; } .newsHubPanel .newsHubItemDate + .newsHubItem { padding-top: 16px; } .newsHubPanel .newsHubItemWrapper:first-child .newsHubItemDate { padding-top: 20px; } /* desktop.scss */ .newsHubPanel { height: 440px; } .listContainer { overflow: auto; } .loadingItem { height: 20%; padding: 5%; position: relative; } .PartnerHeader .adminModeBackground { background-color: #dcdcdc; background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 20px, #fff 20px, #fff 40px); background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, #fff 20px, #fff 40px); } .PartnerHeader .adminModeBackground.writeMode { background-color: #ec7a71; } .PartnerHeader .ReactDropdown__control--advertiserDropdown { background: transparent; } .HeaderContent { position: relative; position: -webkit-sticky; position: sticky; top: 0; width: 100%; } .ConversationListItemReact { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; height: 50px; left: 0; /* animation */ padding: 16px 14px; position: relative; } .ConversationListItemReact:hover { background: #f1f1f1; } .ConversationListItemReact:hover .conversationCloseButton { display: block; } .ConversationListItemReact:hover .conversationUnreadMark { display: none; } .ConversationListItemReact.conversationHidden { -webkit-animation: slideOutLeft 0.5s forwards ease-out; animation: slideOutLeft 0.5s forwards ease-out; } @-webkit-keyframes slideOutLeft { 100% { height: 0; padding: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slideOutLeft { 100% { height: 0; padding: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } } .ConversationListItemReact .conversationRepContainer { margin-right: 16px 14px; } .ConversationListItemReact .conversationContentContainer { font-size: 12px; } .ConversationListItemReact .conversationTitleContainer, .ConversationListItemReact .conversationTitleContainer a { color: #555; font-size: 12px; } .ConversationListItemReact .lastMessageContent { color: #b5b5b5; font-size: 11px; font-weight: normal; margin-bottom: 3px; margin-top: 1px; } .ConversationListItemReact .lastMessageTimestamp { color: #b5b5b5; font-size: 11px; font-weight: normal; } .ConversationListItemReact .membersTitleNames { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ConversationListItemReact .conversationUnreadMark { background-color: #bd081c; border-radius: 50%; bottom: 37px; display: block; height: 6px; position: absolute; right: 8px; width: 6px; } .ConversationListItemReact .conversationCloseButton { display: none; margin: 24px 8px; position: absolute; right: -1px; top: 2px; } .ConversationListItemReact .conversationCloseButton span { color: #999; font-size: 18px; font-weight: bold; } .reactConversationsContainer { bottom: 20px; left: 20px; position: fixed; z-index: 700; } .reactConversationsContainer .conversationBubbleContainer { margin-bottom: 10px; } .reactConversationsContainer .reactConversationContainer:hover .conversationHeadClose { display: block; z-index: 701; } .reactConversationsContainer .reactConversationsContent { position: relative; } .reactConversationsContainer .reactChatCaret { bottom: 0; left: -17px !important; position: absolute; right: inherit !important; } .reactConversationsContainer .activeConversationDropdown { border-radius: 8px; } .reactConversationsContainer .conversationHeadClose { display: none; left: 0; position: absolute; top: 0; } .reactConversationsContainer .unreadMark { background: #bd081c; border-radius: 50%; color: #fff; padding: 2px 6px; position: absolute; right: 0; top: 0; } .reactConversationsContainer.relocateChatheads { left: auto; right: 20px; } .reactConversationsContainer.relocateChatheads .reactConversationContainer { float: right; margin-left: 20px; } .ConversationEventMessage { margin: 16px 0; } .ConversationEventMessage .eventMessageTitle { color: #999; font-size: 11px; text-align: center; } .ConversationEventMessage .eventMessageTitle .eventLine { margin: 0; } .ConversationHeader { position: relative; } .ConversationHeader a { color: #333; } .ConversationHeader a:hover { text-decoration: underline; } .ConversationHeader .convosHeader { overflow: hidden; background: #fff; border-radius: 8px 8px 0 0; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 16px; padding: 10px; position: relative; text-align: center; } .ConversationHeader .convosHeader:hover .reportMsgButton em, .ConversationHeader .convosHeader:active .reportMsgButton em { opacity: 1; } .ConversationHeader .left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .ConversationHeader .convosTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; font-size: 13px; font-weight: 700; max-width: 275px; } .ConversationHeader .convosMembersSubtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #999; font-size: 11px; font-weight: normal; margin: 0; max-width: 275px; } .ConversationHeader .convosMembersSubtitle .convosNameInfo { color: #999; font-weight: normal; } .ConversationHeader .allMembersContainer { bottom: 55px; display: none; margin: 0 auto; position: absolute; width: 100%; } .ConversationHeader .allMembersContainer em { width: 14px; height: 8px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -62px -393px no-repeat; display: block; margin: auto; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ConversationHeader .allMembersContainer em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -370px -359px; background-size: 399px 382px; } } .ConversationHeader .allMembersContent { background: #555; border-radius: 4px; margin: 0 auto; padding: 12px 16px; width: 150px; } .ConversationHeader .allMembersContent .convosNameInfo { color: #fff; display: block; font-weight: 400; } .ConversationHeader .hoverButtonContainer { background: #fff; padding: 0 0 10px 10px; position: absolute; right: 25px; } .ConversationHeader:hover .allMembersContainer { display: block; } .ConversationHeader.displayReportFlagButton .left { display: inline-block; float: none; margin: 0 auto; } .ConversationHeader.displayReportFlagButton .reportMsgButton em { display: inline-block; } .ConversationHeader.displayReportFlagButton .cancelButton em { display: none; } .ConversationHeader.contactRequestHeader .convosHeader > .leftIcon { float: left; padding-right: 10px; } .ConversationHeader.contactRequestHeader .convosHeader > .leftIcon em { width: 10px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -316px no-repeat; display: block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ConversationHeader.contactRequestHeader .convosHeader > .leftIcon em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px 0; background-size: 428px 427px; } } .ConversationHeader .convosMembersSectionReact { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ConversationHeader .convosMembersSubtitleReact { display: inline; } .reactConversationWindow { background: #eee; border: 1px solid #eee; border-radius: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 436px; width: 100%; } .reactConversationWindow .messagesContainer { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; overflow: auto; } .reactConversationWindow .itemContainer { display: -webkit-box; display: -ms-flexbox; display: flex; } .reactConversationWindow .messageObjectContainer { background: #fff; border-radius: 8px 8px 8px 0; margin-left: 16px; margin-right: 16px; margin-top: 8px; padding: 10px; } .reactConversationWindow .userMessageContainer { max-width: 236px; } .reactConversationWindow .messageSenderIcon { -ms-flex-item-align: end; align-self: flex-end; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; height: 33px; margin: 8px 0 0 8px; min-width: 33px; } .reactConversationWindow .senderName { margin: 8px 0 0 16px; } .reactConversationWindow .messageTextContainer { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 8px; padding-left: 0; padding-right: 40px; position: relative; } .reactConversationWindow .messageTextContent { background: #fff; border-radius: 6px; color: #555; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; margin-left: 16px; max-width: 200px; overflow-wrap: break-word; padding: 10px; } .reactConversationWindow .messageTextContent a { text-decoration: underline; } .reactConversationWindow .messageTextCaret { width: 8px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -10px -464px no-repeat; bottom: 8px; left: 8px; position: absolute; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .reactConversationWindow .messageTextCaret { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px -50px; background-size: 428px 427px; } } .reactConversationWindow .messageFromViewer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .reactConversationWindow .messageFromViewer .messageTextContainer { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; padding-left: 40px; padding-right: 0; } .reactConversationWindow .messageFromViewer .messageTextContent { background: #444; color: #fff; margin: 0 16px; } .reactConversationWindow .messageFromViewer .messageTextContent a { color: #fff; } .reactConversationWindow .messageFromViewer .messageTextCaret { width: 8px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -20px -464px no-repeat; left: auto; left: initial; right: 8px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .reactConversationWindow .messageFromViewer .messageTextCaret { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px -76px; background-size: 428px 427px; } } .reactConversationWindow .messageFromViewer .messageSenderIcon { margin: 8px 8px 0 0; } .reactConversationWindow .messageFromViewer .messageObjectContainer { border-radius: 8px 8px 0 8px; margin-left: auto; } .reactConversationWindow .reactNewMessageInput::-webkit-input-placeholder { color: #ccc; } .reactConversationWindow .reactNewMessageInput::-moz-placeholder { color: #ccc; } .reactConversationWindow .reactNewMessageInput:-ms-input-placeholder { color: #ccc; } .reactConversationWindow .reactNewMessageInput::placeholder { color: #ccc; } .reactSenderWithInitials { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #bd081c; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; height: 33px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 33px; } .ConversationBoardCard, .ConversationUserCard { position: relative; } .ConversationBoardCard::before, .ConversationUserCard::before { background: rgba(0, 0, 0, 0.05); border-radius: 8px; content: " " !important; height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; -webkit-transform: scale(0.96); transform: scale(0.96); width: 100%; z-index: 3; } .ConversationBoardCard:hover::before, .ConversationUserCard:hover::before { -webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; } .ConversationUserCard { position: relative; } .ConversationUserCard::before { background: rgba(0, 0, 0, 0.05); border-radius: 8px; content: " " !important; height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; -webkit-transform: scale(0.96); transform: scale(0.96); width: 100%; z-index: 3; } .ConversationUserCard:hover::before { -webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; } .conversationContactContainer { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 10px; } .conversationContactContainer .contactDescription { color: #b5b5b5; } .conversationContactContainer .contactName { font-weight: bold; } .conversationContactContainer .contactTextInfo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-left: 10px; } .conversationContactContainer .conversationContactContainer:hover { background: #f1f1f1; } .conversationContactContainer .contactWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } .conversationContactContainer .selectionIndicator { border-radius: 50%; height: 30px; } .conversationContactContainer .selectionIndicator em { width: 34px; height: 34px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -74px no-repeat; display: block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .conversationContactContainer .selectionIndicator em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -342px -72px; background-size: 428px 427px; } } .reactTokenizedInputContainer { display: -webkit-box; display: -ms-flexbox; display: flex; } .reactTokenizedInputContainer .tokenRemove { display: none; left: 0; position: absolute; top: 0; } .reactTokenizedInputContainer .textFieldContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .reactTokenizedInputContainer .textFieldContainer input { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: 40px; } .reactTokenizedInputContainer .tokenItem { padding-right: 5px; } .reactTokenizedInputContainer .tokenItem:hover .tokenRemove { display: block; z-index: 1001; } .reactTokenizedInputContainer .tokenItem:last-child { padding-right: 0; } .reactTokenizedInputContainer .tokenContainer { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .MobileLandingPageUpsell { background-color: #fff; /* stylelint-disable-next-line property-blacklist */ font-family: sans-serif; /* stylelint-disable-next-line at-rule-no-unknown */ } .MobileLandingPageUpsell .topBackground { background-image: url(https://s.pinimg.com/webapp/style/images/background-2eee85f9.jpg); background-size: cover; } .MobileLandingPageUpsell .topBackground .topContainer { color: #fff; } .MobileLandingPageUpsell .topBackground .topContainer .logo { background: url(https://s.pinimg.com/webapp/style/images/white-pinterest-logo-1x-b5e851a6.png) no-repeat; background-size: contain; height: 26px; width: 99px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .topBackground .topContainer .logo { background-image: url(https://s.pinimg.com/webapp/style/images/white-pinterest-logo-2x-4a56380e.png); } } .MobileLandingPageUpsell .androidButton { background: url(https://s.pinimg.com/webapp/style/images/EN-1x-193adbd5.png) no-repeat; background-size: contain; height: 50px; width: 152px; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton { background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-ea0db06a.png); } } .MobileLandingPageUpsell .iosButton { background: url(https://s.pinimg.com/webapp/style/images/EN-1x-6f0f8e76.png) no-repeat; background-size: contain; height: 50px; width: 167px; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton { background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-1bfaab3e.png); } } .MobileLandingPageUpsell .androidButton.CS { background: url(https://s.pinimg.com/webapp/style/images/CS-1x-aa88f4fd.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.CS { background-image: url(https://s.pinimg.com/webapp/style/images/CS-2x-1f99325c.png); } } .MobileLandingPageUpsell .iosButton.CS { background: url(https://s.pinimg.com/webapp/style/images/CS-1x-57b27437.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.CS { background-image: url(https://s.pinimg.com/webapp/style/images/CS-2x-387b6b84.png); } } .MobileLandingPageUpsell .androidButton.DA { background: url(https://s.pinimg.com/webapp/style/images/DA-1x-b3212f93.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.DA { background-image: url(https://s.pinimg.com/webapp/style/images/DA-2x-881f535b.png); } } .MobileLandingPageUpsell .iosButton.DA { background: url(https://s.pinimg.com/webapp/style/images/DA-1x-73095d1e.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.DA { background-image: url(https://s.pinimg.com/webapp/style/images/DA-2x-f75e4549.png); } } .MobileLandingPageUpsell .androidButton.DE { background: url(https://s.pinimg.com/webapp/style/images/DE-1x-195f2284.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.DE { background-image: url(https://s.pinimg.com/webapp/style/images/DE-2x-73bba6d5.png); } } .MobileLandingPageUpsell .iosButton.DE { background: url(https://s.pinimg.com/webapp/style/images/DE-1x-9a33f8c5.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.DE { background-image: url(https://s.pinimg.com/webapp/style/images/DE-2x-81d4e358.png); } } .MobileLandingPageUpsell .androidButton.EL { background: url(https://s.pinimg.com/webapp/style/images/EL-1x-d5e9cffb.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.EL { background-image: url(https://s.pinimg.com/webapp/style/images/EL-2x-75dbffaf.png); } } .MobileLandingPageUpsell .iosButton.EL { background: url(https://s.pinimg.com/webapp/style/images/EL-1x-c47b5f4b.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.EL { background-image: url(https://s.pinimg.com/webapp/style/images/EL-2x-f94ceee4.png); } } .MobileLandingPageUpsell .androidButton.EN { background: url(https://s.pinimg.com/webapp/style/images/EN-1x-193adbd5.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.EN { background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-ea0db06a.png); } } .MobileLandingPageUpsell .iosButton.EN { background: url(https://s.pinimg.com/webapp/style/images/EN-1x-6f0f8e76.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.EN { background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-1bfaab3e.png); } } .MobileLandingPageUpsell .androidButton.ES { background: url(https://s.pinimg.com/webapp/style/images/ES-1x-5d4df5f0.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.ES { background-image: url(https://s.pinimg.com/webapp/style/images/ES-2x-4b31e0d2.png); } } .MobileLandingPageUpsell .iosButton.ES { background: url(https://s.pinimg.com/webapp/style/images/ES-1x-43d3ab96.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.ES { background-image: url(https://s.pinimg.com/webapp/style/images/ES-2x-a31d918b.png); } } .MobileLandingPageUpsell .androidButton.FI { background: url(https://s.pinimg.com/webapp/style/images/FI-1x-df009e22.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.FI { background-image: url(https://s.pinimg.com/webapp/style/images/FI-2x-93552fb9.png); } } .MobileLandingPageUpsell .iosButton.FI { background: url(https://s.pinimg.com/webapp/style/images/FI-1x-99cb37da.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.FI { background-image: url(https://s.pinimg.com/webapp/style/images/FI-2x-6cd4e75f.png); } } .MobileLandingPageUpsell .androidButton.FR { background: url(https://s.pinimg.com/webapp/style/images/FR-1x-76258add.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.FR { background-image: url(https://s.pinimg.com/webapp/style/images/FR-2x-892d382a.png); } } .MobileLandingPageUpsell .iosButton.FR { background: url(https://s.pinimg.com/webapp/style/images/FR-1x-a1b11f36.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.FR { background-image: url(https://s.pinimg.com/webapp/style/images/FR-2x-60ddb3dc.png); } } .MobileLandingPageUpsell .androidButton.HU { background: url(https://s.pinimg.com/webapp/style/images/HU-1x-f5a33374.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.HU { background-image: url(https://s.pinimg.com/webapp/style/images/HU-2x-3cf19ccb.png); } } .MobileLandingPageUpsell .iosButton.HU { background: url(https://s.pinimg.com/webapp/style/images/HU-1x-ecfb98ab.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.HU { background-image: url(https://s.pinimg.com/webapp/style/images/HU-2x-801f2f76.png); } } .MobileLandingPageUpsell .androidButton.ID { background: url(https://s.pinimg.com/webapp/style/images/ID-1x-fc856302.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.ID { background-image: url(https://s.pinimg.com/webapp/style/images/ID-2x-60763725.png); } } .MobileLandingPageUpsell .iosButton.ID { background: url(https://s.pinimg.com/webapp/style/images/ID-1x-7723e800.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.ID { background-image: url(https://s.pinimg.com/webapp/style/images/ID-2x-511fb06d.png); } } .MobileLandingPageUpsell .androidButton.IT { background: url(https://s.pinimg.com/webapp/style/images/IT-1x-78215d79.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.IT { background-image: url(https://s.pinimg.com/webapp/style/images/IT-2x-f06d21d3.png); } } .MobileLandingPageUpsell .iosButton.IT { background: url(https://s.pinimg.com/webapp/style/images/IT-1x-eb49e52c.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.IT { background-image: url(https://s.pinimg.com/webapp/style/images/IT-2x-4e1ebffc.png); } } .MobileLandingPageUpsell .androidButton.JA { background: url(https://s.pinimg.com/webapp/style/images/JA-1x-e4d2e103.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.JA { background-image: url(https://s.pinimg.com/webapp/style/images/JA-2x-613b7a1c.png); } } .MobileLandingPageUpsell .iosButton.JA { background: url(https://s.pinimg.com/webapp/style/images/JA-1x-e9625ac6.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.JA { background-image: url(https://s.pinimg.com/webapp/style/images/JA-2x-e4949c87.png); } } .MobileLandingPageUpsell .androidButton.KO { background: url(https://s.pinimg.com/webapp/style/images/KO-1x-d08dd546.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.KO { background-image: url(https://s.pinimg.com/webapp/style/images/KO-2x-82063d73.png); } } .MobileLandingPageUpsell .iosButton.KO { background: url(https://s.pinimg.com/webapp/style/images/KO-1x-3699e0ab.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.KO { background-image: url(https://s.pinimg.com/webapp/style/images/KO-2x-ddc06527.png); } } .MobileLandingPageUpsell .androidButton.ML { background: url(https://s.pinimg.com/webapp/style/images/ML-1x-0069db8e.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.ML { background-image: url(https://s.pinimg.com/webapp/style/images/ML-2x-85c22418.png); } } .MobileLandingPageUpsell .iosButton.ML { background: url(https://s.pinimg.com/webapp/style/images/ML-1x-cfe4f86a.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.ML { background-image: url(https://s.pinimg.com/webapp/style/images/ML-2x-482d4428.png); } } .MobileLandingPageUpsell .androidButton.NL { background: url(https://s.pinimg.com/webapp/style/images/NL-1x-ff73753a.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.NL { background-image: url(https://s.pinimg.com/webapp/style/images/NL-2x-8c8e0858.png); } } .MobileLandingPageUpsell .iosButton.NL { background: url(https://s.pinimg.com/webapp/style/images/NL-1x-3926d2dd.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.NL { background-image: url(https://s.pinimg.com/webapp/style/images/NL-2x-ffcdfef9.png); } } .MobileLandingPageUpsell .androidButton.NN { background: url(https://s.pinimg.com/webapp/style/images/NN-1x-a9972684.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.NN { background-image: url(https://s.pinimg.com/webapp/style/images/NN-2x-85d7db2a.png); } } .MobileLandingPageUpsell .iosButton.NN { background: url(https://s.pinimg.com/webapp/style/images/NN-1x-6e36a313.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.NN { background-image: url(https://s.pinimg.com/webapp/style/images/NN-2x-fd2478e8.png); } } .MobileLandingPageUpsell .androidButton.PL { background: url(https://s.pinimg.com/webapp/style/images/PL-1x-dc76138d.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.PL { background-image: url(https://s.pinimg.com/webapp/style/images/PL-2x-56d0226f.png); } } .MobileLandingPageUpsell .iosButton.PL { background: url(https://s.pinimg.com/webapp/style/images/PL-1x-3a5b9eb6.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.PL { background-image: url(https://s.pinimg.com/webapp/style/images/PL-2x-3cc909a8.png); } } .MobileLandingPageUpsell .androidButton.PT { background: url(https://s.pinimg.com/webapp/style/images/PT-1x-61d44f78.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.PT { background-image: url(https://s.pinimg.com/webapp/style/images/PT-2x-91f7acfc.png); } } .MobileLandingPageUpsell .iosButton.PT { background: url(https://s.pinimg.com/webapp/style/images/PT-1x-fc9e1aa2.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.PT { background-image: url(https://s.pinimg.com/webapp/style/images/PT-2x-e272dbd6.png); } } .MobileLandingPageUpsell .androidButton.RO { background: url(https://s.pinimg.com/webapp/style/images/RO-1x-fda1c018.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.RO { background-image: url(https://s.pinimg.com/webapp/style/images/RO-2x-d48881c4.png); } } .MobileLandingPageUpsell .iosButton.RO { background: url(https://s.pinimg.com/webapp/style/images/RO-1x-18736a64.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.RO { background-image: url(https://s.pinimg.com/webapp/style/images/RO-2x-c762cab0.png); } } .MobileLandingPageUpsell .androidButton.RU { background: url(https://s.pinimg.com/webapp/style/images/RU-1x-65d3a95b.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.RU { background-image: url(https://s.pinimg.com/webapp/style/images/RU-2x-0ce2c757.png); } } .MobileLandingPageUpsell .iosButton.RU { background: url(https://s.pinimg.com/webapp/style/images/RU-1x-ce1d81a3.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.RU { background-image: url(https://s.pinimg.com/webapp/style/images/RU-2x-b89abd86.png); } } .MobileLandingPageUpsell .androidButton.SK { background: url(https://s.pinimg.com/webapp/style/images/SK-1x-66e29846.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.SK { background-image: url(https://s.pinimg.com/webapp/style/images/SK-2x-16880fe3.png); } } .MobileLandingPageUpsell .iosButton.SK { background: url(https://s.pinimg.com/webapp/style/images/SK-1x-ac41a55d.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.SK { background-image: url(https://s.pinimg.com/webapp/style/images/SK-2x-20b58101.png); } } .MobileLandingPageUpsell .androidButton.SV { background: url(https://s.pinimg.com/webapp/style/images/SV-1x-2bad06b4.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.SV { background-image: url(https://s.pinimg.com/webapp/style/images/SV-2x-502a5a32.png); } } .MobileLandingPageUpsell .iosButton.SV { background: url(https://s.pinimg.com/webapp/style/images/SV-1x-b3f99f27.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.SV { background-image: url(https://s.pinimg.com/webapp/style/images/SV-2x-b1271639.png); } } .MobileLandingPageUpsell .androidButton.TH { background: url(https://s.pinimg.com/webapp/style/images/TH-1x-66e29846.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.TH { background-image: url(https://s.pinimg.com/webapp/style/images/TH-2x-16880fe3.png); } } .MobileLandingPageUpsell .iosButton.TH { background: url(https://s.pinimg.com/webapp/style/images/TH-1x-afac524b.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.TH { background-image: url(https://s.pinimg.com/webapp/style/images/TH-2x-7ecf42ba.png); } } .MobileLandingPageUpsell .androidButton.TL { background: url(https://s.pinimg.com/webapp/style/images/TL-1x-a001709a.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.TL { background-image: url(https://s.pinimg.com/webapp/style/images/TL-2x-58021b84.png); } } .MobileLandingPageUpsell .iosButton.TL { background: url(https://s.pinimg.com/webapp/style/images/TL-1x-31d0bc83.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.TL { background-image: url(https://s.pinimg.com/webapp/style/images/TL-2x-3187e1aa.png); } } .MobileLandingPageUpsell .androidButton.TR { background: url(https://s.pinimg.com/webapp/style/images/TR-1x-f7dc0333.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.TR { background-image: url(https://s.pinimg.com/webapp/style/images/TR-2x-4585987c.png); } } .MobileLandingPageUpsell .iosButton.TR { background: url(https://s.pinimg.com/webapp/style/images/TR-1x-6f0f8e76.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.TR { background-image: url(https://s.pinimg.com/webapp/style/images/TR-2x-1bfaab3e.png); } } .MobileLandingPageUpsell .androidButton.UK { background: url(https://s.pinimg.com/webapp/style/images/UK-1x-9ecb075c.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.UK { background-image: url(https://s.pinimg.com/webapp/style/images/UK-2x-25a04f9a.png); } } .MobileLandingPageUpsell .iosButton.UK { background: url(https://s.pinimg.com/webapp/style/images/UK-1x-6f0f8e76.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.UK { background-image: url(https://s.pinimg.com/webapp/style/images/UK-2x-1bfaab3e.png); } } .MobileLandingPageUpsell .androidButton.VI { background: url(https://s.pinimg.com/webapp/style/images/VI-1x-aba34925.png) no-repeat; background-size: contain; height: 50px; width: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .androidButton.VI { background-image: url(https://s.pinimg.com/webapp/style/images/VI-2x-f245f353.png); } } .MobileLandingPageUpsell .iosButton.VI { background: url(https://s.pinimg.com/webapp/style/images/VI-1x-474f64a4.png) no-repeat; background-size: contain; height: 50px; width: 167px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .iosButton.VI { background-image: url(https://s.pinimg.com/webapp/style/images/VI-2x-119d560d.png); } } .MobileLandingPageUpsell .bottom .textSection { color: #333; } .MobileLandingPageUpsell .bottom .textSection .sectionTitle { font-size: 24px; line-height: 1.125; } .MobileLandingPageUpsell .bottom .textSection .sectionContent { font-size: 14px; line-height: 1.5; } .MobileLandingPageUpsell .bottomNav { border-top: 1px solid #e3e3e3; font-size: 14px; } .MobileLandingPageUpsell .bottomNav .bottomLink a { font-weight: normal; } .MobileLandingPageUpsell .bottomNav .bottomLink .badge { background: url(https://s.pinimg.com/webapp/style/images/badge-1x-4c987eec.png) no-repeat; background-size: contain; height: 21px; width: 21px; display: inline-block; padding-bottom: 4px; vertical-align: middle; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .bottomNav .bottomLink .badge { background-image: url(https://s.pinimg.com/webapp/style/images/badge-2x-85ba0fac.png); } } /* desktop.scss */ .MobileLandingPageUpsell { width: 100%; } .MobileLandingPageUpsell .topBackground { height: 450px; } .MobileLandingPageUpsell .topBackground .topContainer { margin: 0 auto; padding: 95px 0 40px; position: relative; width: 950px; } .MobileLandingPageUpsell .topBackground .topContainer .title { font-size: 60px; line-height: 65px; margin-top: 10px; width: 450px; } .MobileLandingPageUpsell .topBackground .topContainer .subtitle { font-size: 18px; margin-top: 33px; } .MobileLandingPageUpsell .topBackground .topContainer .buttons { margin-top: 17px; } .MobileLandingPageUpsell .topBackground .topContainer .buttons .appStoreButton { margin-right: 15px; } .MobileLandingPageUpsell .topBackground .topContainer .shortUrlText { font-size: 14px; margin: 15px 0 40px; } .MobileLandingPageUpsell .topBackground .topContainer .shortUrlText a { color: #fff; text-decoration: underline; } .MobileLandingPageUpsell .topBackground .topContainer .topImage { position: absolute; top: 35px; } .MobileLandingPageUpsell .topBackground .topContainer .topImage.iOS { background: url(https://s.pinimg.com/webapp/style/images/ios-1x-f2d643f4.png) no-repeat; background-size: contain; height: 468px; width: 382px; left: 520px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .topBackground .topContainer .topImage.iOS { background-image: url(https://s.pinimg.com/webapp/style/images/ios-2x-93c02442.png); } } .MobileLandingPageUpsell .topBackground .topContainer .topImage.android { background: url(https://s.pinimg.com/webapp/style/images/android-1x-0a553f36.png) no-repeat; background-size: contain; height: 469px; width: 306px; left: 550px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .topBackground .topContainer .topImage.android { background-image: url(https://s.pinimg.com/webapp/style/images/android-2x-64f466a6.png); } } .MobileLandingPageUpsell .topBackground .topContainer .topImage.multi { background: url(https://s.pinimg.com/webapp/style/images/multi-1x-afebd48e.png) no-repeat; background-size: contain; height: 464px; width: 423px; left: 500px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .MobileLandingPageUpsell .topBackground .topContainer .topImage.multi { background-image: url(https://s.pinimg.com/webapp/style/images/multi-2x-367ec694.png); } } .MobileLandingPageUpsell .bottom { margin: 0 auto; overflow: hidden; padding-top: 50px; width: 950px; } .MobileLandingPageUpsell .bottom .textSection { float: left; height: 100px; width: 475px; } .MobileLandingPageUpsell .bottom .textSection .sectionContent { width: 360px; } .MobileLandingPageUpsell .bottomNav { background-color: #fff; line-height: 50px; margin: 20px auto 0; width: 950px; } .MobileLandingPageUpsell .bottomNav .bottomLink { display: inline-block; margin-right: 40px; } .MobileLandingPageUpsell .bottomNav .bottomLink:first-child { margin-right: 330px; } .MobileWebLoginRedirect { font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", arial, sans-serif; } .MobileWebLoginRedirect .overlay { background: #555; height: 1000px; opacity: .9; width: 100%; } .MobileWebLoginRedirect .modal { background: #fff; bottom: 0; color: #555; position: fixed; width: 100%; } .MobileWebLoginRedirect .modal .inner_model { padding: 38px 16px 16px; } .MobileWebLoginRedirect .modal .inner_model .text { padding-left: 4px; } .MobileWebLoginRedirect .modal .inner_model .text .title { font-size: 24px; } @media screen and (min-width: 375px) and (min-height: 375px) { .MobileWebLoginRedirect .modal .inner_model .text .title { font-size: 36px; } } .MobileWebLoginRedirect .modal .inner_model .text .titleSmall { font-size: 24px; } .MobileWebLoginRedirect .modal .inner_model .text .subtext { font-size: 16px; padding-bottom: 12px; padding-top: 12px; } .MobileWebLoginRedirect .modal .inner_model .invisible { visibility: hidden; } .MobileWebLoginRedirect .modal .inner_model .reactButton { background: #efefef; border: none; border-radius: 4px; display: block; font-size: 16px; height: 40px; margin: 8px 0; width: 100%; } .MobileWebLoginRedirect .modal .inner_model .closeButton { margin: 10px; position: absolute; right: 0; top: 0; } .MobileWebLoginRedirect .modal .inner_model .closeButton2 { color: #b5b5b5; font-size: 40px; line-height: 70%; position: absolute; right: 10px; top: 7px; } .MobileWebLoginRedirect .modal .inner_model .highlightButton { background: #bd081c; color: #fff; } .ExperienceNag { background-color: #fff6c8; box-shadow: 0 1px 2px rgba(51, 51, 51, 0.15); box-sizing: border-box; position: relative; text-align: center; z-index: 104; } .ExperienceNag .centeredWithinWrapper { position: relative; } .ExperienceNag .message { color: #717171; display: inline-block; font-size: 15px; max-width: 850px; padding: 16px 0; } @media (min-width: 0px) and (max-width: 999px) { .ExperienceNag .message { font-size: 12px; max-width: 576px; } } .ExperienceNag .message a { text-decoration: underline; } .ExperienceNag.updateBrowser { text-align: center; } .ExperienceNag .nagClose { width: 16px; height: 16px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -309px no-repeat; bottom: 0; cursor: pointer; margin: auto; padding: 6px; position: absolute; right: 7px; top: 0; z-index: 105; } .ExperienceNag .notificationPaneNag .message { box-shadow: none; font-size: 12px; margin: 0; padding-right: 40px; } /* stylelint-disable-next-line at-rule-blacklist */ .ReactBoardListRow { cursor: pointer; display: block; padding: 0 23px; position: relative; } .ReactBoardListRow__pinit { display: none; position: absolute; right: 20px; top: 5px; } .ReactBoardListRow .ReactBoardListRow__pinit { display: none; } .ReactBoardListRow:hover { background-color: #f5f5f5; } .ReactBoardListRow:hover p { max-width: 178px; } .ReactBoardListRow:hover--group, .ReactBoardListRow:hover--private { display: none; } .ReactBoardListRow:hover .ReactBoardListRow__pinit { display: block; } .ReactBoardListRow:hover .saveButton { display: block; margin-top: 0; } .ReactBoardListRow .ReactBoardListRow__noImage { background-color: #efefef; border-radius: 3px; box-shadow: 0 0 1px rgba(0, 0, 0, 0.25); display: inline-block; height: 34px; margin-right: 10px; vertical-align: middle; width: 34px; } .ReactBoardListRow img { border-radius: 3px; box-shadow: 0 0 1px rgba(0, 0, 0, 0.25); height: 34px; margin-right: 10px; vertical-align: middle; width: 34px; } .ReactBoardListRow p { color: #333; display: inline-block; font-size: 14px; font-weight: bold; letter-spacing: .01em; line-height: 34px; margin: 7px 0; max-width: 193px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; } .ReactBoardListRow--group, .ReactBoardListRow--private { background-size: cover; display: inline-block; float: right; margin-left: 5px; } .ReactBoardListRow--group { background-image: url(https://s.pinimg.com/webapp/style/images/collaborators-icon-cdd43947.svg); height: 25px; margin-top: 11px; width: 22px; } .ReactBoardListRow--private { background-image: url(https://s.pinimg.com/webapp/style/images/lock-icon-c92e5974.svg); height: 17px; margin-top: 15px; width: 15px; } /* stylelint-disable-next-line at-rule-blacklist */ .ReactBoardPicker { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #fff; border-radius: 6px; height: 500px; margin: 0 auto; overflow: hidden; } .ReactBoardPicker__spinner { position: relative; top: 44%; } .ReactBoardPicker__close { cursor: pointer; position: absolute; right: 20px; top: 20px; } .ReactBoardPicker__block { display: inline-block; height: 100%; position: relative; vertical-align: top; width: 50%; } .ReactBoardPicker__block:first-child { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #d9d9d9; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .ReactBoardPicker__block header { color: #333; font-size: 20px; font-weight: bold; margin-left: 23px; margin-top: 25px; padding-bottom: 12px; } .ReactBoardPicker__leftContent { background-color: #f5f5f5; border-radius: 6px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); overflow: hidden; width: 236px; } .ReactBoardPicker__leftContent__pinPreview { display: block; height: inherit; margin: 0 auto; width: inherit; } .ReactBoardPicker__leftContent textarea { border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); display: inherit; font-size: 13px; font-weight: 500; letter-spacing: -.5px; line-height: 17px; outline: none; padding: 10px 5%; resize: none; width: 90%; } .ReactBoardPicker__descriptionWrapper { background-color: #fff; } .ReactBoardPicker__imageWrapper { position: relative; } .ReactBoardPicker__videoUrl { color: #a8a8a8; font-size: 12px; font-weight: normal; padding: 10px; } .ReactBoardPicker__playIcon { bottom: 0; height: 40px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 40px; } .ReactBoardPicker__search { margin-top: 20px; padding: 0 23px; } .ReactBoardPicker__boards { border-top: 1px solid #f5f5f5; margin-top: 15px; max-height: 357px; overflow-y: scroll; padding-top: 10px; } .ReactBoardPicker__boards header { color: #a8a8a8; font-size: 13px; font-weight: 400; margin-top: 5px; padding-bottom: 5px; } .ReactBoardPicker__boards__list { list-style: none; margin: 0; padding: 0; } /* stylelint-disable-next-line at-rule-blacklist */ .ReactButton { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #e0e0e0; border: 0; border-radius: 4px; cursor: pointer; font-weight: bold; } .ReactButton--primary { background-color: #bd081c; color: #fff; } .ReactButton--primary:hover { background-color: #bd081c; } .ReactButton--medium { font-size: 16px; } /* stylelint-disable-next-line at-rule-blacklist */ .ReactDropdown { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif; font-weight: bold; display: inline-block; font-size: 16px; font-weight: bold; letter-spacing: -.5px; line-height: 22px; position: relative; } .ReactDropdown--open__control__arrow { border-color: transparent transparent #555; border-width: 0 6px 7px; } .ReactDropdown--noresults { color: #b5b5b5; cursor: default; display: block; padding: 9px 14px; } .ReactDropdown__placeholder { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ReactDropdown__control { background-color: #efefef; border-radius: 4px; color: #555; cursor: default; outline: none; overflow: hidden; padding: 7px 12px; position: relative; -webkit-transition: all 200ms ease; transition: all 200ms ease; } .ReactDropdown__control .caret { padding-left: 10px; } .ReactDropdown__control--advertiserDropdown { background-color: transparent; border-radius: 0; line-height: normal; padding-left: 0; } .ReactDropdown__menu { box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25); -webkit-overflow-scrolling: touch; -webkit-animation: menu-slide-in-up .3s; animation: menu-slide-in-up .3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; background-color: #fff; border-radius: 6px; box-sizing: border-box; margin-top: 8px; max-height: 200px; overflow-x: hidden; overflow-y: auto; position: absolute; top: 100%; width: 210px; z-index: 668; } .ReactDropdown__menu .group > .title { color: #b5b5b5; padding: 9px 14px; text-transform: capitalize; } .ReactDropdown__option { box-sizing: border-box; color: #777; cursor: pointer; display: block; padding: 9px 14px; text-overflow: ellipsis; white-space: nowrap; } .ReactDropdown__option:hover { background: #f1f1f1; color: #333; } .ReactDropdown__option:active { background: #eaeaea; } .ReactDropdown__option:last-child { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } .ReactDropdown__option--selected { background-color: #f5f5f5; color: #555; } /* stylelint-disable-next-line at-rule-blacklist */ .ReactSearchInput { position: relative; } .ReactSearchInput em { background-image: url(https://s.pinimg.com/webapp/style/images/search-icon-6046fd86.svg); background-size: cover; height: 20px; left: 10px; position: absolute; top: 12px; width: 18px; } .ReactSearchInput input { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #f5f5f5; border: 1px solid #efefef; border-radius: 4px; box-shadow: none; box-sizing: border-box; color: #333; font-size: 14px; font-weight: bold; overflow: hidden; padding: 13px 13px 13px 44px; width: 100%; } .ReactSearchInput input:focus { outline: 0; } .FirstPinYourPinsSearch__image { background: #ccc url(https://s.pinimg.com/webapp/style/images/partner-seasonal-pins-4acae3bf.jpg) center center/cover no-repeat; color: #fff; font-size: 28px; font-weight: bold; height: 196px; } .FirstPinYourPinsSearch__image:hover { color: #fff; } .PartnerHelperTooltip { float: right; position: relative; } .PartnerHelperTooltip__trigger { background-color: #b5b5b5; border-radius: 50px; color: #fff; cursor: help; display: inline-block; font-size: 8px; line-height: 14px; text-align: center; width: 14px; } .PartnerHelperTooltip:hover .PartnerHelperTooltip__content { -webkit-animation: .3s .5s menu-slide-in-up; animation: .3s .5s menu-slide-in-up; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; pointer-events: auto; } .PartnerHelperTooltip__content { background-color: #555; border-radius: 4px; color: #fff; font-size: 12px; margin: 15px 0 0; opacity: 0; padding: 10px 20px; pointer-events: none; position: absolute; right: -20px; width: 200px; z-index: 100; } .PartnerHelperTooltip__content::before { bottom: -20px; content: " "; display: block; left: 0; position: absolute; } .PartnerHelperTooltip__content::after { border-bottom: solid #555 10px; border-left: solid transparent 10px; border-right: solid transparent 10px; content: " "; height: 0; margin-left: -13px; position: absolute; right: 18px; top: -10px; width: 0; } .QuickPromoteKeywordTagList { position: relative; z-index: 3; } .QuickPromoteKeywordTagList__suggestions { background: #fff; border-radius: 4px; box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.06); color: #555; width: 271px; } .QuickPromoteKeywordTagList__suggestions li { font-size: 14px; padding: 12px; } .QuickPromoteKeywordTagList__suggestions li.active { background-color: #efefef; } .QuickPromoteKeywordTagList__suggestions li mark { background-color: #efefef; } .QuickPromoteKeywordTagList__tag { background-color: #efefef; border-radius: 4px; color: #555; display: inline-block; font-size: 14px; line-height: 24px; margin: 6px 8px 0 0; padding: 0 0 0 8px; } .QuickPromoteKeywordTagList__tag__remove { color: #555; cursor: pointer; display: inline-block; font-size: 20px; font-weight: normal; line-height: 24px; margin-left: 8px; text-align: center; width: 22px; } .QuickPromoteKeywordTagList__tagInput { margin-top: 8px; } .QuickPromoteKeywordTagList__tagInput input { background-color: #fff; border-color: #b5b5b5; border-radius: 4px; border-style: solid; border-width: 1px; box-sizing: border-box; color: #555; font-size: 16px; letter-spacing: -.2px; line-height: 18px; padding: 10px 14px; width: 100%; } .QuickPromoteKeywordTagList__tagInput input::-webkit-input-placeholder { color: #b5b5b5; } .QuickPromoteKeywordTagList__tagInput input::-moz-placeholder { color: #b5b5b5; } .QuickPromoteKeywordTagList__tagInput input:-ms-input-placeholder { color: #b5b5b5; } .QuickPromoteKeywordTagList__tagInput input::placeholder { color: #b5b5b5; } .RadioButton--default > .RadioButton__input { display: none; } .RadioButton--default > .RadioButton__label { background: transparent url(https://s.pinimg.com/webapp/style/images/radiobutton-unchecked-8e3d6290.svg); background-position: 0 50%; background-repeat: no-repeat; display: inline-block; line-height: 32px; padding-left: 35px; } .RadioButton--default > .RadioButton__input:checked + .RadioButton__label { background-image: url(https://s.pinimg.com/webapp/style/images/radiobutton-checked-e7b1aa8e.svg); } .RadioButton--button > .RadioButton__input { display: none; } .RadioButton--button > .RadioButton__label { border: 1px solid #999; border-radius: 4px; display: inline-block; margin-right: 5px; padding: 0 15px; } .RadioButton--button > .RadioButton__input:checked + .RadioButton__label { background-color: #efefef; border-color: #efefef; } .RadioButtonGroup__item { display: block; } .SearchAddPin { min-height: 280px; width: 236px; } .SearchAddPin::before { background: rgba(0, 0, 0, 0.05); border-radius: 8px; content: " " !important; height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; -webkit-transform: scale(0.96); transform: scale(0.96); width: 100%; z-index: 3; margin: -10px; padding: 10px; } .SearchAddPin:hover::before { -webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; } /* stylelint-disable-next-line at-rule-blacklist */ .ReactAddVideo__buttonVersion { float: right; margin: 20px 45px 25px; } .ReactAddVideo__iconVersion { background-color: #fff; border: dashed 2px #b5b5b5; border-radius: 8px; display: inline-block; height: 286px; margin: 39px; width: 52%; } .ReactAddVideo__iconVersion input { cursor: pointer; display: block; height: 288px; position: absolute; top: -116px; width: 100%; z-index: 1000; } .ReactAddVideo__iconVersion svg { margin: 0 auto; } .ReactAddVideo__iconVersion.videoDragOver { border: dashed 2px #bd081c; } .ReactAddVideo__title { color: #555; font-size: 32px; text-align: center; } .ReactAddVideo__text { color: #b5b5b5; font-size: 14px; font-weight: 600; margin: 0 auto; position: relative; top: 10px; } .ReactAddVideo__input { opacity: 0; } .ReactAddVideo__error { color: #bd081c; font-size: 14px; margin-top: 11px; } .ReactAddVideo__addVideoWrapper { position: relative; text-align: center; top: 40%; } .ReactAddVideo__uploadButtonContainer div:focus { box-shadow: none; } /* stylelint-disable-next-line at-rule-blacklist */ .ReactExistingVideoList { height: 300px; overflow-y: scroll; padding-top: 10px; } .ReactExistingVideoList__text { color: #555; font-size: 20px; } .ReactExistingVideoListItem { cursor: pointer; display: inline-block; height: 37%; margin: 10px 1.7%; position: relative; width: 31%; } .ReactExistingVideoListItem:nth-child(3n+2) { margin-left: 0; } .ReactExistingVideoListItem:nth-child(3n+4) { margin-right: 0; } .ReactExistingVideoListItem__wrapper { background: #000; border-radius: 4px; height: 100%; overflow: hidden; position: relative; } .ReactExistingVideoListItem__wrapper::after { background-color: #000; border-radius: inherit; content: ""; height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; width: 100%; } .ReactExistingVideoListItem__wrapper:hover > h4 { visibility: visible; } .ReactExistingVideoListItem__wrapper:hover::after { opacity: .3; } .ReactExistingVideoListItem__playIcon { height: 50px; left: 50%; position: absolute; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 50px; } .ReactExistingVideoListItem__title { bottom: 17px; color: #fff; font-size: 14px; left: 17px; position: absolute; visibility: hidden; z-index: 1; } .ReactExistingVideoListItem--vertical img { display: block; height: inherit; margin: 0 auto; } .ReactUploadVideoModal { padding: 18px 30px; } .ReactUploadVideoModal__videoSpace { float: left; min-height: 368px; text-align: center; width: 71%; } .ReactUploadVideoModal__noPadding { padding: 0; } .ReactUploadVideoModal__recommendedVideoSpecs { display: inline-block; margin-top: -20px; position: relative; top: 60px; width: 20%; } .ReactUploadVideoModal hr { background: #efefef; border: 0; height: 1px; } .ReactUploadVideoModal__errorMessage { text-align: center; } .ReactUploadVideoModal__errorMessage ._vc { left: 141px !important; top: 265px !important; } .ReactUploadVideoModal__errorMessage ._vg { color: #e2780d; } .ReactUploadVideoModal__errorMessage ._ve { background: #e2780d; border: 1px solid #e2780d; } .ReactUploadVideoModal__errorText { color: #fff; font-size: 18px; font-weight: bold; margin: 10px; } .ReactUploadVideoModal__spinner { position: absolute; top: 38%; } /* stylelint-disable-next-line at-rule-blacklist */ .ReactUploadVideoSuccess { margin: 35px; } .ReactUploadVideoSuccess__headline { color: #555; font-size: 24px; } .ReactUploadVideoSuccess__subheadline { color: #b5b5b5; font-size: 18px; font-weight: normal; } .ThumbnailGenerator { color: #555; font-size: 14px; font-weight: 600; margin: 20px; } .ThumbnailGenerator header { font-size: 30px; } .ThumbnailGenerator input { background: none; border: 0; color: #555; font-size: 14px; margin-left: 10px; width: 95%; } .ThumbnailGenerator input:focus { outline: none; } .ThumbnailGenerator label { display: block; } .ThumbnailGenerator video { display: inline-block; margin: 0 auto; max-height: 365px; width: 100%; } .ThumbnailGenerator__body { margin-top: 10px; } .ThumbnailGenerator__progress { font-size: 20px; margin: 20px 0; } .ThumbnailGenerator__progress > div { margin-top: 8px; } .ThumbnailGenerator__vidwrapper { display: inline-block; margin: 15px 0 10px; position: relative; width: 100%; } .ThumbnailGenerator__vidwrapper button { background-color: rgba(85, 85, 85, 0.9); border: 0; border-radius: 4px; color: #fff; cursor: pointer; font-size: 14px; padding: 8px 10px; position: absolute; right: 13px; top: 13px; } .ThumbnailGenerator__vidwrapper button:focus { outline: 0; } .ThumbnailGenerator__buttons { text-align: right; } .ThumbnailGenerator__buttons button { margin: 20px 10px; } .ThumbnailGenerator__button { border-radius: 4px; font-size: 16px; height: 40px; margin: 20px 10px; padding: 0 35px; } .ThumbnailGenerator__cancel { background-color: #fff; border: 1px solid #555; } .ThumbnailGenerator__next { background-color: #bd081c; border: 1px solid #bd081c; color: #fff; margin-right: 0; } .ThumbnailGenerator__next:disabled { cursor: auto; opacity: .3; } .ThumbnailGenerator__buttonText { margin-left: 5px; vertical-align: middle; } .ThumbnailGenerator__sliderWrapper { display: inline-block; vertical-align: top; width: 100%; } .ThumbnailGenerator__sliderWrapper span { font-size: 16px; margin-bottom: 5px; } .ThumbnailGenerator__slider { margin: 5px 0 10px -2px; overflow-x: hidden; position: relative; white-space: nowrap; width: 100%; } .ThumbnailGenerator__slider::after { background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 98%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 98%); content: ""; display: block; height: 100%; pointer-events: none; position: absolute; right: 0; top: 0; width: 70px; } .ThumbnailGenerator__frames { min-height: 115px; -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out; } .ThumbnailGenerator__arrow { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: 97%; position: absolute; right: 0; top: 0; width: 16px; z-index: 1; } .ThumbnailGenerator__arrow em { width: 10px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -316px no-repeat; background-size: cover; cursor: pointer; display: block; height: 16px; -webkit-transform: scaleX(-1); transform: scaleX(-1); width: 16px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .ThumbnailGenerator__arrow em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png); background-position: -418px 0; background-size: 428px 427px; } } .ThumbnailGenerator__arrow.left { left: 0; } .ThumbnailGenerator__arrow.left em { -webkit-transform: none; transform: none; } .ThumbnailGenerator__frame { background-color: #efefef; border-radius: 4px; cursor: pointer; display: inline-block; margin: 2px 4% 0 .5%; overflow: hidden; position: relative; width: 29%; } .ThumbnailGenerator__frame.active { box-shadow: 0 0 0 2px #bd081c; } .ThumbnailGenerator__frame.active img { opacity: .6; } .ThumbnailGenerator__frame img { display: block; margin: 0 auto; max-height: 110px; } .ThumbnailGenerator__description { height: 34px; } .ThumbnailGenerator__tags-selected { overflow-x: scroll; } .ThumbnailGenerator__tags-input { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-width: 260px; } .ThumbnailGenerator__tags-tag { background: #fff; border-radius: 3px; font-size: 12px; margin-left: 5px; padding: 0 0 4px 7px; } .ThumbnailGenerator__tags-remove { border-left: 1px solid #efefef; cursor: pointer; font-size: 16px; margin-left: 7px; padding: 0 4px 4px; } .ThumbnailGenerator__tags-remove:hover { background: #f5f5f5; } .ThumbnailGenerator__inputWrapper { font-weight: normal !important; margin-bottom: 20px; } .ThumbnailGenerator__inputWrapper label { font-size: 16px; margin-bottom: 5px; } .ThumbnailGenerator__inputWrapper p { color: #e3780c; font-size: 12px; text-align: right; } .ThumbnailGenerator__error { bottom: -20px; left: 10px; position: absolute; } .ThumbnailGenerator--vertical .ThumbnailGenerator__progress { margin-bottom: 0; } .ThumbnailGenerator--vertical .ThumbnailGenerator__vidwrapper { margin-top: 25px; width: 44%; } .ThumbnailGenerator--vertical .ThumbnailGenerator__vidwrapper video { max-height: none; } .ThumbnailGenerator--vertical .ThumbnailGenerator__sliderWrapper { margin-left: 4%; width: 50%; } .ThumbnailGenerator--vertical .ThumbnailGenerator__frame { margin: 2px 20px 20px 2px; width: 42%; } .ThumbnailGenerator--vertical .ThumbnailGenerator__frame img { max-height: none; } .ThumbnailGenerator__maxCharacterExceeded { border: 1px solid #e3780c; } .UserNavigateButton .advertiserPartner em { display: none; } .UserNavigateButton .advertiserPartner .usernameLink > .Image.profileImage { border-radius: 50%; display: block; float: none; height: 25px; margin: 0; width: 25px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .PasswordReset { background: #fff; color: #555; font-size: 16px; -webkit-transform: translateZ(0); transform: translateZ(0); } .PasswordReset p a, .PasswordReset .link { color: #d32430; cursor: pointer; font-weight: normal; } .PasswordReset h2 { color: #444; font-size: 28px; } .PasswordReset .hint { color: #bd081c; } .PasswordReset .userNameEmail { display: inline-block; font-weight: bold; position: relative; } .PasswordReset .userNameEmail .userName { overflow: hidden; padding-bottom: 1px; text-overflow: ellipsis; white-space: nowrap; } .PasswordReset .userSearchResults { overflow-y: scroll; padding: 15px; } .PasswordReset .resultHint { color: "#a9a9a9"; } .PasswordReset .passwordResetForm button { float: right; font-size: 12px; } .PasswordReset .passwordResetForm .searchIcon { width: 15px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -238px -325px no-repeat; left: 11px; position: absolute; top: 10px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PasswordReset .passwordResetForm .searchIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -217px -145px; background-size: 399px 382px; } } .PasswordReset .passwordResetForm .passwordResetSearch { background: #e7e7e7; box-shadow: none; box-sizing: border-box; height: 36px; padding: 0 38px; width: 100%; } .PasswordReset .passwordResetForm .inputWrapper { overflow: hidden; padding-right: 15px; position: relative; } .PasswordWithStrengthMeter { position: relative; } .PasswordWithStrengthMeter .PasswordStrength.guage { border-radius: 4px; height: 14px; position: absolute; right: 5%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .PasswordWithStrengthMeter .PasswordStrength.guage .register { border-radius: 4px; height: 100%; -webkit-transition: width .4s; transition: width .4s; } /* desktop.scss */ .PasswordReset { border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); margin: 100px auto 0; overflow: hidden; position: relative; width: 500px; } .PasswordReset .hint { font-size: 12px; font-weight: 500; } .PasswordReset .sendBar { background: #f0f0f0; border-top: 1px solid #e7e7e7; padding: 15px; } .PasswordReset .xback { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -149px no-repeat; position: absolute; right: 10px; top: 10px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .PasswordReset .xback { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -357px -240px; background-size: 399px 382px; } } .PasswordReset .userNameEmail { font-size: 12px; left: 10px; top: 13px; } .PasswordReset .userNameEmail .userName { max-width: 325px; } .PasswordReset .userSearchResults { border-top: 1px solid #dfdfdf; max-height: 330px; } .PasswordReset .passwordResetForm { padding: 15px; } .PasswordReset .passwordResetForm .passwordResetSearch { border: solid 1px #cecece; border-radius: 3px; font-weight: bold; } .PinAnalyticsLine { background-color: #d8d8d8; border-radius: 3px; height: 50px; margin-left: 35px; width: 2px; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { opacity: 1; -webkit-transform: translate(0, 50px); transform: translate(0, 50px); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { opacity: 1; -webkit-transform: translate(0, 50px); transform: translate(0, 50px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translate(0, 50px); transform: translate(0, 50px); } 100% { opacity: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .TiltedPinsSourceModal { position: relative; z-index: 671; } .TiltedPinsSourcePicker { position: absolute; right: 16px; top: 16px; } .TiltedPinsContainer { height: 300px; overflow: hidden; position: relative; } .TiltedPinsContainer .TiltedPinSourceLink { background-color: #fff; border-radius: 20px; bottom: 16px; display: none; height: 40px; padding: 0 0 0 12px; position: absolute; right: 16px; } .TiltedPinsContainer:hover .TiltedPinSourceLink { display: block; } .TiltedPinsContainer:hover .TiltedPinSourceLink:hover { background-color: #efefef; } .TiltedPinsTransformer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); width: 100%; } .ShadowedAvatarWrapper { background-color: #fff; border-radius: 50%; box-shadow: 0 0 0 5px #fff; position: relative; } .CreatorHeaderContainer { margin-top: -50px; } .CreatorHeaderFixed > div, .CreatorHeaderSticky > div { margin-top: 0; } .CreatorHeaderSticky { background-color: #fff; margin-left: -10px; padding: 10px 10px 10px 0; position: -webkit-sticky; position: sticky; top: 65px; -webkit-transition: all .2s; transition: all .2s; z-index: 499; } .CreatorHeaderSticky.scrollStep1, .CreatorHeaderSticky.scrollStep2, .CreatorHeaderSticky.scrollStep3 { opacity: .97; -webkit-transition: opacity .2s; transition: opacity .2s; z-index: 669; } .AvatarScroller.scrollStep1 { height: 40px; left: 24px; opacity: 0; position: fixed; top: 83px; width: 40px; } .AvatarScroller.scrollStep2 { height: 40px; left: 24px; opacity: 0; position: fixed; top: 83px; -webkit-transition: opacity .2s; transition: opacity .2s; width: 40px; } .AvatarScroller.scrollStep3 { height: 40px; left: 24px; opacity: 1; position: fixed; top: 83px; -webkit-transition: opacity .2s; transition: opacity .2s; width: 40px; z-index: 670; } .CreatorFollowButton.scrollStep1 { opacity: 0; position: fixed; right: 24px; top: 83px; z-index: 670; } .CreatorFollowButton.scrollStep2 { opacity: 0; position: fixed; right: 24px; top: 83px; -webkit-transition: opacity .2s; transition: opacity .2s; z-index: 670; } .CreatorFollowButton.scrollStep3 { opacity: 1; position: fixed; right: 24px; top: 83px; z-index: 670; } .BusinessProfileTabBar { margin: 16px 0 0; padding: 0 160px; } .BusinessProfileTabMoreItem:hover { text-decoration: underline; } .BusinessProfileTabMoreItem:hover > div > div > div { color: #555; } .BusinessProfileTabLinkItem { width: 100%; } .BusinessProfileTabLinkItem.Selected { background-color: #eaeaea; } .BusinessProfileTabLinkItem:hover { text-decoration: underline; } .BusinessProfileTabLinkItem:hover > div > div > div { color: #555; } .BusinessProfileTabItem { border-radius: 999px; } .BusinessProfileTabItem.Selected { background-color: #eaeaea; } .BusinessProfileTabItem:hover { text-decoration: underline; } .BusinessProfileTabItem:hover > div > div > div { color: #555; } .BrioProfileHeaderWrapper .boardName { min-width: 0; opacity: 0; position: relative; top: -50px; } .BrioProfileHeaderWrapper .boardName.transitionIn { -webkit-animation: fadeInDown 200ms forwards ease-in; animation: fadeInDown 200ms forwards ease-in; } .BrioProfileHeaderWrapper .boardName.transitionOut { -webkit-animation: fadeOutUp 200ms forwards ease-in; animation: fadeOutUp 200ms forwards ease-in; } .BrioProfileHeaderWrapper .fixedHeader { background: rgba(255, 255, 255, 0.97); top: 64px; width: 100%; z-index: 670; } .BrioProfileHeaderWrapper .imageWash { background: rgba(0, 0, 0, 0.05); height: 100%; width: 100%; } @keyframes spin { from { opacity: 1; -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { opacity: 1; -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .boardBlockingActionToastWhiteSpinner { -webkit-animation-delay: .3s; animation-delay: .3s; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: spin; animation-name: spin; -webkit-animation-timing-function: linear; animation-timing-function: linear; display: block; opacity: 0; } .ReactBoardHeader .followerCount { cursor: pointer; } .ReactBoardHeader .followerCount .value, .ReactBoardHeader .pinCount .value { padding-right: 2px; } .ReactBoardInfoBar { background-color: rgba(255, 255, 255, 0.95); height: 64px; width: 100%; } .ReactBoardInfoBar.boardOrganizationShow .boardOrganizationBar { -webkit-animation: slideDownFadeIn 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards; animation: slideDownFadeIn 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards; } .ReactBoardInfoBar.sectionOrganizationBarShow .sectionOrganizationBar { -webkit-animation: slideDownFadeIn 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards; animation: slideDownFadeIn 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards; } .ReactBoardInfoBar.boardOrganizationHide .boardOrganizationBar { -webkit-animation: slideUpFadeOut 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards; animation: slideUpFadeOut 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards; -webkit-transition: visibility 300ms linear 0.5s; transition: visibility 300ms linear 0.5s; visibility: hidden; } .ReactBoardInfoBar.sectionOrganizationBarHide .sectionOrganizationBar { -webkit-animation: slideUpFadeOut 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards; animation: slideUpFadeOut 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards; -webkit-transition: visibility 300ms linear 0.5s; transition: visibility 300ms linear 0.5s; visibility: hidden; } .ReactBoardInfoBar.boardOrganizationHide .infoBar, .ReactBoardInfoBar.sectionOrganizationBarHide .infoBar { -webkit-animation: slideUpFadeIn 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards; animation: slideUpFadeIn 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards; } .ReactBoardInfoBar.boardOrganizationShow .infoBar, .ReactBoardInfoBar.sectionOrganizationBarShow .infoBar { -webkit-animation: slideDownFadeOut 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards; animation: slideDownFadeOut 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards; -webkit-transition: visibility 300ms linear 0.5s; transition: visibility 300ms linear 0.5s; visibility: hidden; } .ReactBoardInfoBar .boardName { margin: auto; max-width: 300px; opacity: 0; padding: 8px 0; position: relative; top: -66px; /* stylelint-disable-next-line at-rule-no-unknown */ } .ReactBoardInfoBar .boardName.transitionIn { opacity: 1; -webkit-transform: translate(0, 66px); transform: translate(0, 66px); -webkit-transition: 300ms ease-out; transition: 300ms ease-out; } .ReactBoardInfoBar .boardName.transitionOut { opacity: 0; pointer-events: none; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: 300ms ease-out; transition: 300ms ease-out; } .ReactBoardInfoBar .organizeButton { opacity: 0; position: relative; top: -66px; } .ReactBoardInfoBar .organizeButton.transitionIn { opacity: 1; -webkit-transform: translate(0, 66px); transform: translate(0, 66px); -webkit-transition: 300ms ease-out; transition: 300ms ease-out; } .ReactBoardInfoBar .organizeButton.transitionOut { opacity: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: 300ms ease-out; transition: 300ms ease-out; } .ReactBoardInfoBar .boardNameWrapper { width: 100%; } .ReactBoardInfoBar .boardOrganizationBar { height: 36px; max-width: 768px; padding: 14px 0; position: absolute; top: -64px; width: 100%; z-index: 103; } .ReactBoardInfoBar .bulkEditButton { margin-right: 3px; } .ReactBoardInfoBar .bulkEditButtons { padding: 14px 0; } .ReactBoardInfoBar.fixedHeader { left: 0; position: fixed; right: 0; top: 64px; -webkit-transform: translateZ(0); transform: translateZ(0); z-index: 103; } .ReactBoardInfoBar .infoBar { height: 48px; padding: 12px; position: relative; } .ReactBoardInfoBar .infoBarWrapper { margin: auto; max-width: 768px; overflow: visible; z-index: 103; } .ReactBoardInfoBar .notifications { padding: 10px 0; } .ReactBoardInfoBar .sectionOrganizationBar { max-width: 768px; position: absolute; top: -64px; width: 100%; } @-webkit-keyframes slideDownFadeIn { 0% { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 1; -webkit-transform: translateY(64px); transform: translateY(64px); } } @keyframes slideDownFadeIn { 0% { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 1; -webkit-transform: translateY(64px); transform: translateY(64px); } } @-webkit-keyframes slideDownFadeOut { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(64px); transform: translateY(64px); } } @keyframes slideDownFadeOut { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(64px); transform: translateY(64px); } } @-webkit-keyframes slideUpFadeIn { 0% { opacity: 0; -webkit-transform: translateY(64px); transform: translateY(64px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideUpFadeIn { 0% { opacity: 0; -webkit-transform: translateY(64px); transform: translateY(64px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes slideUpFadeOut { 0% { opacity: 1; -webkit-transform: translateY(64px); transform: translateY(64px); } 100% { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideUpFadeOut { 0% { opacity: 1; -webkit-transform: translateY(64px); transform: translateY(64px); } 100% { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0); } } .reactBoardCollaboratorInviterForm { /* TODO: hacky, remove when css is rewritten */ } .reactBoardCollaboratorInviterForm .ContactsList { margin-top: -8px; } .BoardCollaborators-footer { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .BoardCollaborators-moreItemsWrapper { text-align: center; } .BoardCollaborators-typeahead { width: 100%; } .BoardFollowersList-content { max-height: 570px; overflow: auto; } .BoardFollowersList-followersItems { overflow-x: hidden; } .BoardFollowersList-followersWrapper { margin: 0; position: relative; } .BoardFollowersList-header { padding-left: 6px; } .BoardFollowersList-moreItemsWrapper { text-align: center; } .SendBoardModal { background-color: #fff; border-radius: 8px; } .BoardPinGrid.bulkEditMode .bulkEditPinWrapper { bottom: 0; cursor: pointer; display: block; left: 0; position: absolute; right: 0; top: 0; z-index: 102; } .BoardPinGrid.bulkEditMode .leftSideButtonsWrapper, .BoardPinGrid.bulkEditMode .rightSideButtonsWrapper, .BoardPinGrid.bulkEditMode .navLink { display: none; } .BoardPinGrid .bulkEditPinWrapper { display: none; } .BoardPinsRecommendationBar { background: #fff; bottom: 0; box-shadow: 0 2px 4px #000; left: 0; position: fixed; right: 0; -webkit-transition: all .2s ease-out; transition: all .2s ease-out; } .BoardPinsRecommendationBar--hidden { -webkit-transform: translateY(100%); transform: translateY(100%); } .BoardPinsRecommendationBar__overlay { background: rgba(0, 0, 0, 0.064); bottom: 0; height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; right: 0; top: 0; -webkit-transition: all .2s ease-out; transition: all .2s ease-out; width: 100%; } .BoardPinsRecommendationBar__overlay.hover { opacity: 1; } /* NOTE(yansun): these styles are entirely copied from gestalt */ .sectionHoverSurface { background: rgba(0, 0, 0, 0.064); border-radius: 8px; bottom: 0; height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; right: 0; top: 0; width: 100%; } .sectionHoverSurface.hover { -webkit-animation: animateInSectionHover 0.2s cubic-bezier(0.31, 1, 0.34, 1) forwards; animation: animateInSectionHover 0.2s cubic-bezier(0.31, 1, 0.34, 1) forwards; } .sectionHoverSurface.sectionHoverSurface--mergeTarget { -webkit-animation: animateInSectionHover 0.1s cubic-bezier(0.31, 1, 0.34, 1) forwards; animation: animateInSectionHover 0.1s cubic-bezier(0.31, 1, 0.34, 1) forwards; } @-webkit-keyframes animateInSectionHover { to { opacity: 1; padding: 8px; -webkit-transform: translateY(-8px) translateX(-8px); transform: translateY(-8px) translateX(-8px); } } @keyframes animateInSectionHover { to { opacity: 1; padding: 8px; -webkit-transform: translateY(-8px) translateX(-8px); transform: translateY(-8px) translateX(-8px); } } .BrowserButtonUpsell { width: 500px; } .BrowserButtonUpsell__browserWrapper { margin-top: 5px; } .BrowserButtonUpsell__promoHeader { color: #333; color: rgba(21, 21, 21, 0.8); background-color: #f0f0f0; border-top-left-radius: 6px; border-top-right-radius: 6px; font-size: 26px; line-height: 33px; padding: 25px; text-align: center; } .BrowserButtonUpsell__promoWrapper { background: #fff; border: 1px solid #aaa; border-radius: 6px; clear: both; margin: 15px; } .BrowserButtonUpsell__promoWrapper:hover { cursor: pointer; } .BrowserButtonUpsell__zoomImg { background: url(https://s.pinimg.com/webapp/style/images/chrome-1x-5ff1b915.png) no-repeat; background-size: contain; height: 293px; width: 439px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .BrowserButtonUpsell__zoomImg { background-image: url(https://s.pinimg.com/webapp/style/images/chrome-2x-1167b788.png); } } .EditPinModal { max-width: 670px; width: 100%; } .EditPinModal .placeSelection { background: none; border: none; cursor: pointer; } .EditPinModal label { font-size: 16px; font-weight: bold; line-height: 2; } .boardCreateInput { border: 0; box-shadow: none; color: #333; font-size: 15px; margin-bottom: 5px; outline: none; padding: 6px; width: 95%; } .boardCreateInput.error { background: #e6abad; border: 1px solid #bd081c; border-radius: 3px; color: #bd081c; } .boardCreateInput.error::-webkit-input-placeholder { color: #fff; } .boardCreateInput.error::-moz-placeholder { color: #fff; } .boardCreateInput.error:-ms-input-placeholder { color: #fff; } .boardCreateInput.error::placeholder { color: #fff; } .HashtagFlyout .HashtagRecommendations { width: 100%; z-index: 3; } .HashtagFlyout .HashtagRecommendations .HashtagItem:hover { background-color: #efefef; cursor: pointer; } .SaveButton { background: transparent; border-radius: 4px; cursor: pointer; } .SaveButton:focus { box-shadow: 0 0 0 4px rgba(0, 132, 255, 0.5); outline: 0; } .SaveButtonBackground { background-color: #bd081c; border-radius: 4px; } .SaveButtonBackground:hover { background-color: #ad081b; } .SaveButtonBackgroundSaved { background-color: #efefef; border-radius: 4px; } .SaveButtonBackgroundSaved:hover { background-color: #e2e2e2; } .FirstBoardCreate__education { color: #fff; font-size: 28px; font-weight: bold; margin-left: 170px; position: absolute; top: -60px; } .FirstBoardCreate__education.multiline { margin-left: 30px; position: absolute; top: -80px; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .UserSettingsPage { position: relative; } .UserSettingsPage .formCheckedSet span { line-height: 28px; } .UserSettingsPage .standardForm > ul { background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); border-radius: 6px; margin-bottom: 14px; } .UserSettingsPage .standardForm label { word-wrap: break-word; } .UserSettingsPage .formFooter { background-color: #fff; border: none; bottom: 0; box-shadow: none; box-sizing: border-box; max-width: 734px; width: 100%; } .UserSettingsPage .formItem.headlessSection { border-top: 0; padding-top: 0; } .UserSettingsPage .scopeDescriptions li { list-style-type: disc; margin-left: 25px; } /* desktop.scss */ .UserSettingsPage { /* Table of Contents */ } .UserSettingsPage .mainForm { margin: 50px 0 0 256px; padding-bottom: 53px; } @media (min-width: 0) and (max-width: 999px) { .UserSettingsPage .mainForm { margin-left: 0; } } @media (max-width: 999px) { .UserSettingsPage .toc { display: none; } } .UserSettingsPage .tocAndFormWrapper { margin: 0 auto; max-width: 990px; } @media (min-width: 0) and (max-width: 999px) { .UserSettingsPage .tocAndFormWrapper { margin: auto; max-width: 734px; } } .UserSettingsPage .sectionTitle { margin-top: 50px; } .UserSettingsPage .sectionTitle h2 { /* stylelint-disable-next-line at-rule-no-unknown */ } .UserSettingsPage .formInlineCheckedSet { padding-top: 0; } .UserSettingsPage .formInlineCheckedSet label > input { /* stylelint-disable-next-line at-rule-no-unknown */ } .UserSettingsPage .noApps { text-align: left; } .stlPageModal { width: 100%; } .stlPageModal .Button.closeModal { position: fixed; right: 24px; top: 32px; z-index: 652; } .skipToContentContainer .skipToContentButton:active, .skipToContentContainer .skipToContentButton:focus { background: #bd081c; color: #fff; font-size: 16px; height: 54px; position: fixed; text-shadow: none; width: 100%; z-index: 681; } .AdvertiserCreateForm { color: #555; min-height: 105px; padding: 24px 40px 4px; } .AdvertiserCreateForm h1 { font-size: 36px; } .AdvertiserCreateForm label { display: block; font-size: 12px; margin-bottom: 8px; } .AdvertiserCreateForm input[type="text"] { background-color: #efefef; border: none; border-radius: 4px; box-sizing: border-box; font-size: 14px; font-weight: bold; height: 40px; padding: 0 12px; width: 100%; } .AdvertiserCreateForm .clientError { color: #c11400; font-size: 12px; font-weight: bold; margin-left: 2px; margin-top: 6px; } .AdvertiserCreateForm .serverError { color: #c11400; font-size: 16px; font-weight: bold; margin-bottom: 20px; margin-top: 32px; text-align: center; } .AdvertiserCreateForm .inputSection { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; margin-top: 36px; min-width: 208px; } .AdvertiserCreateForm .inputSection:not(.dropdownSection) { margin-right: 20px; } .AdvertiserCreateForm .dropdownSection .ReactDropdown__control { height: 26px; } .AdvertiserCreateForm .footer { margin-top: 40px; text-align: right; } .AdvertiserCreateForm .footer button:first-child { margin-right: 12px; } .AdvertiserCreateForm .formFooter { padding-right: 0; } .advertiserSwitcher .ReactDropdown__control--advertiserDropdown { padding-left: 12px; } /* stylelint-disable-next-line at-rule-blacklist */ .AsyncDownloadFooter { background: #fafafa; border-top: 1px solid #c7c7c7; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 10px 20px; } .AsyncDownloadFooter .downloadStatusText { color: #555; display: inline-block; font-size: 16px; font-weight: bold; margin-right: 8px; max-width: 440px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .AsyncDownloadFooter .spinner { background: url(https://s.pinimg.com/webapp/style/images/spinner-small-1x-b897d25e.gif) no-repeat; background-size: contain; height: 16px; width: 16px; display: inline-block; opacity: .5; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; margin-right: 4px; position: relative; top: 4px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AsyncDownloadFooter .spinner { background-image: url(https://s.pinimg.com/webapp/style/images/spinner-small-2x-dbb1334f.gif); } } .AsyncDownloadFooter .spinner.hidden { display: none; } .AudienceForm.actalikeAudienceForm .existingAudienceTable { padding-bottom: 8px; } .AudienceForm.actalikeAudienceForm .countryPicker, .AudienceForm.actalikeAudienceForm .reachSelector { display: inline-block; margin-top: 20px; vertical-align: top; } .AudienceForm.actalikeAudienceForm .countryPicker { margin-right: 80px; } .AudienceForm.actalikeAudienceForm .countryPicker .selectButton { max-width: 200px; word-break: break-word; } .AudienceForm.actalikeAudienceForm .countryPicker .selectButton button { border: none; white-space: normal; } .AudienceForm.actalikeAudienceForm .countryPicker .selectButton ul { max-height: 200px; overflow-y: auto; } /* stylelint-disable-next-line at-rule-blacklist */ /* stylelint-disable-next-line at-rule-blacklist */ /* stylelint-disable-next-line at-rule-blacklist */ .AudienceForm { width: 1000px; } .AudienceForm .header, .AudienceForm .basicInfo, .AudienceForm .filters, .AudienceForm .actalikeData, .AudienceForm .userListData { margin-left: 33px; } .AudienceForm .header { color: #555; font-size: 24px; font-weight: bold; margin-bottom: 20px; margin-top: 22px; } .AudienceForm .basicInfo { margin-bottom: 20px; } .AudienceForm .fieldLabel { color: #555; font-size: 12px; font-weight: 500; margin-bottom: 12px; } .AudienceForm .actalikeData { margin-bottom: 32px; margin-top: 40px; } .AudienceForm .actalikeData, .AudienceForm .basicInfo { margin-right: 67px; } .AudienceForm .descriptionField { margin-bottom: 19px; margin-top: 23px; } .AudienceForm .retentionDaysWrapper, .AudienceForm .filters, .AudienceForm .addFilterWrapper { color: #555; font-size: 16px; font-weight: bold; } .AudienceForm .error { display: none; } .AudienceForm .error.server { color: #c11400; font-size: 16px; font-weight: bold; line-height: 15px; margin-bottom: 20px; margin-top: 32px; text-align: center; } .AudienceForm .error.client { color: #c11400; font-size: 12px; font-weight: bold; line-height: 15px; } .AudienceForm .error.hasError { display: block; } .AudienceForm .retentionDays { background-color: #efefef; border: none; border-radius: 4px; color: #b5b5b5; font-size: 14px; font-weight: bold; height: 28px; margin-left: 10px; margin-right: 10px; text-align: center; width: 59px; } .AudienceForm .retentionDays:focus { outline: none; } .AudienceForm .retentionDaysWrapper { margin-right: 61px; } .AudienceForm .filters { border-top: solid 1px #efefef; margin-right: 33px; padding-bottom: 9px; padding-top: 15px; white-space: nowrap; } .AudienceForm .filterHeader { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 22px; margin-top: 10px; } .AudienceForm .removeFilter { color: #b5b5b5; font-size: 12px; font-weight: bold; margin-top: 12px; } .AudienceForm .filterContent { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 20px; } .AudienceForm .radioButtons { color: #555; font-size: 16px; font-weight: bold; margin-right: 32px; padding-left: 4px; padding-right: 44px; vertical-align: top; } .AudienceForm .rightBorder { border-right: solid 1px #efefef; } .AudienceForm .radioButtons input { margin-right: 9px; } .AudienceForm .radioButtons li { display: block; margin-bottom: 4px; } .AudienceForm .humanReadableText { color: #b5b5b5; font-size: 14px; margin-bottom: 6px; white-space: normal; } .AudienceForm .addFilterWrapper { border-top: solid 1px #efefef; margin-bottom: 24px; margin-left: 17px; margin-right: 33px; padding-top: 18px; } .AudienceForm .addFilterButton { background-color: #fff; border: none; } .AudienceForm .addFilterButton .addFilterText { font-weight: bold; margin-left: 4px; position: relative; top: 2px; } .AudienceForm .footer { text-align: right; } .AudienceForm .footer button { margin-bottom: 8px; margin-right: 12px; margin-top: 8px; } .AudienceForm .engagementMultiValueInputWrapper, .AudienceForm .visitorMultiValueInput { display: inline-block; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .AudienceForm .visitorMultiValueInput, .AudienceForm .engagementMultiValueInput { border: solid 1px #efefef; margin-right: 16px; min-height: 100px; vertical-align: top; white-space: normal; } .AudienceForm .typeaheadInput__suggestions, .AudienceForm .visitorMultiValueInput__suggestions, .AudienceForm .engagementMultiValueInput__suggestions { background: #fff; border-radius: 4px; box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.06); color: #555; max-height: 200px; overflow: auto; position: relative; width: 271px; z-index: 100; } .AudienceForm .typeaheadInput__suggestions li, .AudienceForm .visitorMultiValueInput__suggestions li, .AudienceForm .engagementMultiValueInput__suggestions li { font-size: 14px; padding: 12px; } .AudienceForm .typeaheadInput__suggestions li.active, .AudienceForm .visitorMultiValueInput__suggestions li.active, .AudienceForm .engagementMultiValueInput__suggestions li.active { background-color: #efefef; } .AudienceForm .typeaheadInput__suggestions li mark, .AudienceForm .visitorMultiValueInput__suggestions li mark, .AudienceForm .engagementMultiValueInput__suggestions li mark { background-color: #efefef; } .AudienceForm .typeaheadInput__tag, .AudienceForm .visitorMultiValueInput__tag, .AudienceForm .engagementMultiValueInput__tag { background-color: #efefef; border-radius: 4px; color: #555; display: inline-block; font-size: 14px; line-height: 24px; margin: 6px 0 0 8px; padding: 0 0 0 8px; } .AudienceForm .typeaheadInput__tag__remove, .AudienceForm .visitorMultiValueInput__tag__remove, .AudienceForm .engagementMultiValueInput__tag__remove { color: #555; cursor: pointer; display: inline-block; font-size: 20px; font-weight: normal; line-height: 24px; margin-left: 8px; text-align: center; width: 22px; } .AudienceForm .typeaheadInput__tagInput input, .AudienceForm .visitorMultiValueInput__tagInput input, .AudienceForm .engagementMultiValueInput__tagInput input { background: transparent; border: none; color: #555; display: block; font-size: 16px; font-weight: bold; line-height: 34px; padding: 0 8px; width: 100%; } .AudienceForm .typeaheadInput__tagInput input::-webkit-input-placeholder, .AudienceForm .visitorMultiValueInput__tagInput input::-webkit-input-placeholder, .AudienceForm .engagementMultiValueInput__tagInput input::-webkit-input-placeholder { color: #b5b5b5; font-size: 14px; font-weight: 500; } .AudienceForm .typeaheadInput__tagInput input::-moz-placeholder, .AudienceForm .visitorMultiValueInput__tagInput input::-moz-placeholder, .AudienceForm .engagementMultiValueInput__tagInput input::-moz-placeholder { color: #b5b5b5; font-size: 14px; font-weight: 500; } .AudienceForm .typeaheadInput__tagInput input:-ms-input-placeholder, .AudienceForm .visitorMultiValueInput__tagInput input:-ms-input-placeholder, .AudienceForm .engagementMultiValueInput__tagInput input:-ms-input-placeholder { color: #b5b5b5; font-size: 14px; font-weight: 500; } .AudienceForm .typeaheadInput__tagInput input::placeholder, .AudienceForm .visitorMultiValueInput__tagInput input::placeholder, .AudienceForm .engagementMultiValueInput__tagInput input::placeholder { color: #b5b5b5; font-size: 14px; font-weight: 500; } .AudienceForm .typeaheadInput__tagInput input:focus, .AudienceForm .visitorMultiValueInput__tagInput input:focus, .AudienceForm .engagementMultiValueInput__tagInput input:focus { outline: none; } .AudienceForm .brio-form__field { border-bottom: 1px solid #efefef; margin: 0 0 5px; overflow: hidden; } .AudienceForm .brio-form__field__label { color: #555; cursor: default; display: block; font-size: 12px; font-weight: 500; letter-spacing: -.02px; line-height: 1; overflow: hidden; padding: 10px 0 5px; } .AudienceForm .brio-form__field__label--disabled { color: #b5b5b5; } .AudienceForm .brio-form__field__input { background: transparent; border: none; color: #555; display: block; font-size: 16px; font-weight: bold; line-height: 34px; padding: 0; width: 100%; } .AudienceForm .brio-form__field__input::-webkit-input-placeholder { color: #b5b5b5; } .AudienceForm .brio-form__field__input::-moz-placeholder { color: #b5b5b5; } .AudienceForm .brio-form__field__input:-ms-input-placeholder { color: #b5b5b5; } .AudienceForm .brio-form__field__input::placeholder { color: #b5b5b5; } .AudienceForm .brio-form__field__input:focus, .AudienceForm .brio-form__field__input:active { outline: none; } .AudienceForm .brio-form__field__input:disabled { color: #b5b5b5; } .AudienceForm .brio-form__field--error .brio-form__field__input { color: #c11400; } .AudienceForm .brio-error { color: #c11400; font-size: 12px; font-weight: bold; line-height: 15px; margin: 0 0 8px; } .AudienceFormTooltip { float: right; margin-top: 6px; position: relative; } .AudienceFormTooltip__trigger { background-color: #b5b5b5; border-radius: 50px; color: #fff; cursor: help; display: inline-block; font-size: 8px; font-weight: 500; line-height: 14px; text-align: center; width: 14px; } .AudienceFormTooltip:hover .AudienceFormTooltip__content { -webkit-animation: .3s .5s menu-slide-in-up; animation: .3s .5s menu-slide-in-up; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; pointer-events: auto; } .AudienceFormTooltip__content { background-color: #555; border-radius: 4px; color: #fff; font-size: 12px; font-weight: 500; margin: 15px 0 0; opacity: 0; padding: 10px 20px; pointer-events: none; position: absolute; right: -20px; white-space: normal; width: 200px; word-wrap: break-word; z-index: 100; } .AudienceFormTooltip__content::before { bottom: -20px; content: " "; display: block; left: 0; position: absolute; } .AudienceFormTooltip__content::after { border-bottom: solid #555 10px; border-left: solid transparent 10px; border-right: solid transparent 10px; content: " "; height: 0; margin-left: -13px; position: absolute; right: 18px; top: -10px; width: 0; } .AudienceForm.engagementAudienceForm .verifiedDomains { display: inline-block; margin-right: 47px; } .AudienceForm.engagementAudienceForm .verifiedDomainsButtonWrapper.basicInfoItem .selectButton, .AudienceForm.engagementAudienceForm .verifiedDomainsButtonWrapper ~ .basicInfoItem { position: relative; top: 6px; } .AudienceForm.engagementAudienceForm .verifiedDomainsButton em { width: 26px; height: 26px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -119px -260px no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; margin-right: 7px; zoom: .77; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AudienceForm.engagementAudienceForm .verifiedDomainsButton em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -117px -256px; background-size: 399px 382px; } } .AudienceForm.engagementAudienceForm .domain { color: #555; font-size: 16px; font-weight: bold; } .AudienceForm.engagementAudienceForm .domainImageWrapper { margin-right: 7px; vertical-align: middle; } .AudienceForm.engagementAudienceForm .inputGrid { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; overflow: hidden; } .AudienceForm.engagementAudienceForm .AudienceFormTooltip { margin-top: -4px; } .AudienceForm.engagementAudienceForm .inputError { margin-top: 8px; } /* stylelint-disable-next-line at-rule-blacklist */ /* stylelint-disable-next-line at-rule-blacklist */ .AudienceForm { width: 1000px; } .AudienceForm .header, .AudienceForm .basicInfo, .AudienceForm .filters, .AudienceForm .actalikeData, .AudienceForm .userListData { margin-left: 33px; } .AudienceForm .header { color: #555; font-size: 24px; font-weight: bold; margin-bottom: 20px; margin-top: 22px; } .AudienceForm .basicInfo { margin-bottom: 20px; } .AudienceForm .fieldLabel { color: #555; font-size: 12px; font-weight: 500; margin-bottom: 12px; } .AudienceForm .actalikeData { margin-bottom: 32px; margin-top: 40px; } .AudienceForm .actalikeData, .AudienceForm .basicInfo { margin-right: 67px; } .AudienceForm .descriptionField { margin-bottom: 19px; margin-top: 23px; } .AudienceForm .retentionDaysWrapper, .AudienceForm .filters, .AudienceForm .addFilterWrapper { color: #555; font-size: 16px; font-weight: bold; } .AudienceForm .error { display: none; } .AudienceForm .error.server { color: #c11400; font-size: 16px; font-weight: bold; line-height: 15px; margin-bottom: 20px; margin-top: 32px; text-align: center; } .AudienceForm .error.client { color: #c11400; font-size: 12px; font-weight: bold; line-height: 15px; } .AudienceForm .error.hasError { display: block; } .AudienceForm .retentionDays { background-color: #efefef; border: none; border-radius: 4px; color: #b5b5b5; font-size: 14px; font-weight: bold; height: 28px; margin-left: 10px; margin-right: 10px; text-align: center; width: 59px; } .AudienceForm .retentionDays:focus { outline: none; } .AudienceForm .retentionDaysWrapper { margin-right: 61px; } .AudienceForm .filters { border-top: solid 1px #efefef; margin-right: 33px; padding-bottom: 9px; padding-top: 15px; white-space: nowrap; } .AudienceForm .filterHeader { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 22px; margin-top: 10px; } .AudienceForm .removeFilter { color: #b5b5b5; font-size: 12px; font-weight: bold; margin-top: 12px; } .AudienceForm .filterContent { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 20px; } .AudienceForm .radioButtons { color: #555; font-size: 16px; font-weight: bold; margin-right: 32px; padding-left: 4px; padding-right: 44px; vertical-align: top; } .AudienceForm .rightBorder { border-right: solid 1px #efefef; } .AudienceForm .radioButtons input { margin-right: 9px; } .AudienceForm .radioButtons li { display: block; margin-bottom: 4px; } .AudienceForm .humanReadableText { color: #b5b5b5; font-size: 14px; margin-bottom: 6px; white-space: normal; } .AudienceForm .addFilterWrapper { border-top: solid 1px #efefef; margin-bottom: 24px; margin-left: 17px; margin-right: 33px; padding-top: 18px; } .AudienceForm .addFilterButton { background-color: #fff; border: none; } .AudienceForm .addFilterButton .addFilterText { font-weight: bold; margin-left: 4px; position: relative; top: 2px; } .AudienceForm .footer { text-align: right; } .AudienceForm .footer button { margin-bottom: 8px; margin-right: 12px; margin-top: 8px; } .AudienceForm .engagementMultiValueInputWrapper, .AudienceForm .visitorMultiValueInput { display: inline-block; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .AudienceForm .visitorMultiValueInput, .AudienceForm .engagementMultiValueInput { border: solid 1px #efefef; margin-right: 16px; min-height: 100px; vertical-align: top; white-space: normal; } .AudienceForm .typeaheadInput__suggestions, .AudienceForm .visitorMultiValueInput__suggestions, .AudienceForm .engagementMultiValueInput__suggestions { background: #fff; border-radius: 4px; box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.06); color: #555; max-height: 200px; overflow: auto; position: relative; width: 271px; z-index: 100; } .AudienceForm .typeaheadInput__suggestions li, .AudienceForm .visitorMultiValueInput__suggestions li, .AudienceForm .engagementMultiValueInput__suggestions li { font-size: 14px; padding: 12px; } .AudienceForm .typeaheadInput__suggestions li.active, .AudienceForm .visitorMultiValueInput__suggestions li.active, .AudienceForm .engagementMultiValueInput__suggestions li.active { background-color: #efefef; } .AudienceForm .typeaheadInput__suggestions li mark, .AudienceForm .visitorMultiValueInput__suggestions li mark, .AudienceForm .engagementMultiValueInput__suggestions li mark { background-color: #efefef; } .AudienceForm .typeaheadInput__tag, .AudienceForm .visitorMultiValueInput__tag, .AudienceForm .engagementMultiValueInput__tag { background-color: #efefef; border-radius: 4px; color: #555; display: inline-block; font-size: 14px; line-height: 24px; margin: 6px 0 0 8px; padding: 0 0 0 8px; } .AudienceForm .typeaheadInput__tag__remove, .AudienceForm .visitorMultiValueInput__tag__remove, .AudienceForm .engagementMultiValueInput__tag__remove { color: #555; cursor: pointer; display: inline-block; font-size: 20px; font-weight: normal; line-height: 24px; margin-left: 8px; text-align: center; width: 22px; } .AudienceForm .typeaheadInput__tagInput input, .AudienceForm .visitorMultiValueInput__tagInput input, .AudienceForm .engagementMultiValueInput__tagInput input { background: transparent; border: none; color: #555; display: block; font-size: 16px; font-weight: bold; line-height: 34px; padding: 0 8px; width: 100%; } .AudienceForm .typeaheadInput__tagInput input::-webkit-input-placeholder, .AudienceForm .visitorMultiValueInput__tagInput input::-webkit-input-placeholder, .AudienceForm .engagementMultiValueInput__tagInput input::-webkit-input-placeholder { color: #b5b5b5; font-size: 14px; font-weight: 500; } .AudienceForm .typeaheadInput__tagInput input::-moz-placeholder, .AudienceForm .visitorMultiValueInput__tagInput input::-moz-placeholder, .AudienceForm .engagementMultiValueInput__tagInput input::-moz-placeholder { color: #b5b5b5; font-size: 14px; font-weight: 500; } .AudienceForm .typeaheadInput__tagInput input:-ms-input-placeholder, .AudienceForm .visitorMultiValueInput__tagInput input:-ms-input-placeholder, .AudienceForm .engagementMultiValueInput__tagInput input:-ms-input-placeholder { color: #b5b5b5; font-size: 14px; font-weight: 500; } .AudienceForm .typeaheadInput__tagInput input::placeholder, .AudienceForm .visitorMultiValueInput__tagInput input::placeholder, .AudienceForm .engagementMultiValueInput__tagInput input::placeholder { color: #b5b5b5; font-size: 14px; font-weight: 500; } .AudienceForm .typeaheadInput__tagInput input:focus, .AudienceForm .visitorMultiValueInput__tagInput input:focus, .AudienceForm .engagementMultiValueInput__tagInput input:focus { outline: none; } .AudienceForm .brio-form__field { border-bottom: 1px solid #efefef; margin: 0 0 5px; overflow: hidden; } .AudienceForm .brio-form__field__label { color: #555; cursor: default; display: block; font-size: 12px; font-weight: 500; letter-spacing: -.02px; line-height: 1; overflow: hidden; padding: 10px 0 5px; } .AudienceForm .brio-form__field__label--disabled { color: #b5b5b5; } .AudienceForm .brio-form__field__input { background: transparent; border: none; color: #555; display: block; font-size: 16px; font-weight: bold; line-height: 34px; padding: 0; width: 100%; } .AudienceForm .brio-form__field__input::-webkit-input-placeholder { color: #b5b5b5; } .AudienceForm .brio-form__field__input::-moz-placeholder { color: #b5b5b5; } .AudienceForm .brio-form__field__input:-ms-input-placeholder { color: #b5b5b5; } .AudienceForm .brio-form__field__input::placeholder { color: #b5b5b5; } .AudienceForm .brio-form__field__input:focus, .AudienceForm .brio-form__field__input:active { outline: none; } .AudienceForm .brio-form__field__input:disabled { color: #b5b5b5; } .AudienceForm .brio-form__field--error .brio-form__field__input { color: #c11400; } .AudienceForm .brio-error { color: #c11400; font-size: 12px; font-weight: bold; line-height: 15px; margin: 0 0 8px; } .AudienceForm.userListAudienceForm .userListData { margin-bottom: 32px; margin-top: 28px; } .AudienceForm.userListAudienceForm .addRemoveButtonWrapper { color: #555; font-size: 14px; font-weight: bold; margin-bottom: 12px; } .AudienceForm.userListAudienceForm .addRemoveRadioButtons { display: inline-block; margin-right: 40px; } .AudienceForm.userListAudienceForm .chooseFileButtonLabel { margin-bottom: 12px; } .AudienceForm.userListAudienceForm .chooseFileButton { position: relative; top: -4px; } .AudienceForm.userListAudienceForm .selectedFileWrapper { margin-bottom: 12px; } .AudienceForm.userListAudienceForm .selectedFileWrapper button { position: relative; top: -4px; } .AudienceForm.userListAudienceForm .selectedFile { color: #999; display: inline; font-size: 14px; font-weight: bold; margin-right: 6px; } .AudienceForm.userListAudienceForm .fileInput { opacity: 0; position: absolute; } .AudienceForm.userListAudienceForm .progressBar { margin-top: 8px; padding-bottom: 16px; width: 280px; } /* stylelint-disable-next-line at-rule-blacklist */ .AudienceForm.visitorAudienceForm .tagSelection { margin-bottom: 19px; margin-top: 33px; } .AudienceForm.visitorAudienceForm .tagSelection .tagSelectButton { color: #b5b5b5; font-size: 14px; font-weight: 500; margin-bottom: 5px; } .AudienceForm.visitorAudienceForm .tagSelection .tagSelectButton.selectedButton { color: #555; font-weight: bold; } .AudienceForm.visitorAudienceForm .tagSelection .conversionTagSearchTable { font-weight: bold; margin-top: 11px; } .AudienceForm.visitorAudienceForm .retentionDaysAndPrefill { display: -webkit-box; display: -ms-flexbox; display: flex; } .AudienceForm.visitorAudienceForm .error.server { margin: 0 66px 48px 32px; } .AudienceForm.visitorAudienceForm .noTagsError { margin-bottom: 20px; margin-left: 33px; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .eventFilterContent { margin-bottom: 5px; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .eventFilterOperator { display: inline-block; font-size: 16px; font-weight: bold; margin-bottom: 12px; margin-left: 25px; margin-top: 8px; vertical-align: top; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .historyWarning { color: #e3780c; font-size: 14px; margin-bottom: 6px; white-space: normal; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .operatorSelection { display: inline-block; vertical-align: top; width: 100px; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .filterValue { display: inline-block; margin-left: 24px; vertical-align: top; width: 254px; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput { position: relative; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__suggestions { position: absolute; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__suggestions li { font-size: 16px; font-weight: bold; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tag { position: absolute; z-index: 101; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput { position: relative; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput input { background: transparent; border: none; border-bottom: 1px solid #efefef; color: #555; display: block; font-size: 16px; font-weight: bold; line-height: 34px; margin: 0 0 5px; overflow: hidden; padding: 0; width: 100%; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput input::-webkit-input-placeholder { color: #b5b5b5; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput input::-moz-placeholder { color: #b5b5b5; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput input:-ms-input-placeholder { color: #b5b5b5; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput input::placeholder { color: #b5b5b5; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput input:focus, .AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput input:active { outline: none; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput input:disabled { color: #b5b5b5; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .subrules { margin: 18px 66px 24px 30px; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .subruleContent { margin-bottom: 24px; margin-top: 60px; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .subruleKey { display: inline-block; vertical-align: top; width: 254px; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .subruleOperatorSelection { display: inline-block; margin-left: 16px; vertical-align: top; width: 168px; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .subruleValue { margin-bottom: 15px; margin-top: 15px; vertical-align: top; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .subrules .subruleContent .visitorMultiValueInput { width: 100%; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .subrules .historyWarning { margin-top: 18px; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .removeSubrule { color: #b5b5b5; display: inline-block; float: right; font-size: 12px; font-weight: bold; margin-top: 12px; } .AudienceForm.visitorAudienceForm .visitorAudienceFields .addSubruleWrapper em { width: 28px; height: 28px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-partners-1x-9f7312af.png) -30px 0 no-repeat; display: inline-block; font: 0 / 0 serif; text-shadow: none; color: transparent; margin-right: 6px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .AudienceForm.visitorAudienceForm .visitorAudienceFields .addSubruleWrapper em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-partners-2x-19664238.png); background-position: -29px 0; background-size: 86px 72px; } } .AudienceForm.visitorAudienceForm .visitorAudienceFields .addSubrule { color: #555; font-size: 14px; font-weight: bold; margin-right: 33px; padding-top: 18px; } /* stylelint-disable-next-line at-rule-blacklist */ .BrioCheckbox { color: #555; font-size: 16px; font-weight: bold; } .BrioCheckbox input[type="checkbox"] { border: 0; clip: rect(0 0 0 0); display: none; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .BrioCheckbox .checkbox { border: 1px solid #555; border-radius: 4px; display: inline-block; height: 16px; margin-right: 12px; position: relative; top: 2px; -webkit-transition: .5s ease all; transition: .5s ease all; width: 16px; } .BrioCheckbox .checkbox::before { border: solid #fff; content: " "; display: none; left: 5px; position: absolute; width: 3px; } .BrioCheckbox input[type="checkbox"]:focus + .checkbox, .BrioCheckbox input[type="checkbox"]:active:not(:checked) + .checkbox { box-shadow: 0 0 0 1px #666; } .BrioCheckbox input[type="checkbox"]:checked + .checkbox { background: #666; } .BrioCheckbox input[type="checkbox"]:checked + .checkbox::before, .BrioCheckbox input[type="checkbox"]:indeterminate + .checkbox::before { display: block; } .BrioCheckbox input[type="checkbox"]:checked + .checkbox::before { border-width: 0 2px 2px 0; height: 8px; top: 2px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .BrioCheckbox input[type="checkbox"]:indeterminate + .checkbox::before { border-color: #666; border-width: 0 2px 0 0; height: 7px; top: 3px; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .BrioCheckboxGroup.grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 1px; } .BrioCheckboxGroup.grid li { display: inline-block; margin-bottom: 20px; vertical-align: top; white-space: normal; word-wrap: break-word; } .BrioCheckboxGroup.grid li.lastRow { margin-bottom: 0; } .BrioRadioButtonGroup { color: #555; font-size: 16px; } .BrioRadioButtonGroup input[type="radio"] { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .BrioRadioButtonGroup input[type="radio"] + .radioButton { border: 1px solid #555; border-radius: 16px; display: inline-block; height: 16px; margin-right: 12px; position: relative; top: 4px; width: 16px; } .BrioRadioButtonGroup input[type="radio"] + .radioButton::before { border-radius: 12px; content: " "; display: none; height: 12px; margin: auto; position: relative; top: 2px; -webkit-transition: .5s ease all; transition: .5s ease all; width: 12px; } .BrioRadioButtonGroup input[type="radio"]:active:not(:checked) + .radioButton, .BrioRadioButtonGroup input[type="radio"]:focus + .radioButton { box-shadow: 0 0 0 1px #666; } .BrioRadioButtonGroup input[type="radio"]:checked + .radioButton::before { background-color: #666; display: block; } .BrioRadioButtonGroup.grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 2px; } .BrioRadioButtonGroup.grid li { display: inline-block; margin-bottom: 20px; vertical-align: top; white-space: normal; word-wrap: break-word; } .BrioRadioButtonGroup.grid li.lastRow { margin-bottom: 0; } .searchField { display: inline-block; position: relative; } .searchField .Input.flat { background: transparent; padding-left: 33px; } .searchField .searchIcon { width: 15px; height: 15px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -238px -325px no-repeat; left: 10px; position: absolute; top: 9px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .searchField .searchIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -217px -145px; background-size: 399px 382px; } } .searchField .clearIcon { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -149px no-repeat; cursor: pointer; position: absolute; right: 9px; top: 10px; -webkit-transition: opacity .5s, right .5s, visibility .5s; transition: opacity .5s, right .5s, visibility .5s; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .searchField .clearIcon { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -357px -240px; background-size: 399px 382px; } } .searchField .clearIcon:hover { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -79px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .searchField .clearIcon:hover { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -163px -109px; background-size: 399px 382px; } } .searchField .clearIcon:active { width: 12px; height: 12px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -93px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .searchField .clearIcon:active { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -321px -258px; background-size: 399px 382px; } } .inputField { overflow: hidden; border-top: 1px solid #dfdfdf; padding: 15px 21px 15px 27px; background-color: #f3f3f3; background: -webkit-linear-gradient(#f0f0f0, #f5f5f5); background: linear-gradient(#f0f0f0, #f5f5f5); box-sizing: border-box; width: 100%; border: 1px solid #d6d3ce; border-radius: 3px; color: #333; font-size: 14px; padding: 7px; } .inputField:first-child { border: 0; } .inputField:focus { background: #fff; } .inputField.hasError, .inputField.hasWarning { background: #e6abad; border-color: #bd081c; } .inputField.disabled { background-color: #f8f8f8; background: -webkit-linear-gradient(#f5f5f5, #fafafa); background: linear-gradient(#f5f5f5, #fafafa); border-color: #dcdcdc; color: #999; cursor: default; } .safari .inputField.disabled { background-color: #f8f8f8; } .inputField.flat { background: #fff; border: 1px solid #c7c7c7; border-radius: 4px; box-shadow: none; color: #333; font-size: 14px; padding: 7px; } .inputField.flat:focus { border-color: #12afe3; outline: none; } .inputField.flat:disabled { background-color: #f5f5f5; color: #b9b9b9; } .withCurrencySymbol .inputField { border-bottom-left-radius: 0; border-top-left-radius: 0; } .inputField.searchInput { padding-right: 30px; } .inputField.bottomBorder { border: 0; border-bottom: 1px solid #e3e3e3; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .inputField.bottomBorder:focus { border-color: #e3e3e3; } .inputField.noBorder { border: 0; } .inputField.searchInputRight { padding-left: 30px; } .inputField.targetingValueList { border-bottom-left-radius: 0; border-bottom-right-radius: 0; height: 40px; } .SearchableInputList .searchField { display: block; } .SearchableInputList .groupWrapper { background-color: #fff; border-bottom: 1px solid #c7c7c7; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-left: 1px solid #c7c7c7; border-right: 1px solid #c7c7c7; margin: 0; max-height: 225px; overflow-y: auto; padding: 0; word-wrap: break-word; } .SearchableInputList .inputWrapper { border-bottom: 1px solid #e7e7e7; display: block; padding: 16px 20px; } /* stylelint-disable-next-line at-rule-blacklist */ .selectButton { display: inline-block; position: relative; vertical-align: baseline; z-index: 1000; } .selectButton .dropdownContainer { display: none; } .selectButton.open .dropdownContainer { border: 1px solid #ccc; border-radius: 6px; display: block; margin: 6px 0 20px; position: absolute; } .selectButton.open ul { background: #fff; border-radius: 6px; min-width: 120px; } .selectButton.open li { border-top: 1px solid #eee; font-size: 14px; font-weight: bold; position: relative; } .selectButton.open li button { background: transparent; border: none; padding: 15px 10px; text-align: left; width: 100%; } .selectButton.open li:first-child { border-radius: 6px 6px 0 0; border-top: 0; } .selectButton.open li:last-child { border-radius: 0 0 6px 6px; } .selectButton button.flat::after { border: 4px solid transparent; border-right-color: #111; border-top-color: #111; content: ""; display: inline-block; height: 0; margin-left: 8px; -webkit-transform: rotate(135deg); transform: rotate(135deg); vertical-align: top; width: 0; } .selectButton.open button::after { margin-top: 2px; -webkit-transform: rotate(315deg); transform: rotate(315deg); vertical-align: middle; } .selectButton.open .dropdownContainer::before { background: #fff; border: 1px solid #ccc; border-bottom-color: transparent; border-right-color: transparent; content: ""; display: block; height: 12px; left: 12px; position: absolute; top: -8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 12px; } .selectButton.open ul li:hover { background-color: #efefef; cursor: pointer; } .WordSelector li { display: inline-block; margin-right: 16px; } .WordSelector button { background-color: #fff; border: none; color: #555; font-size: 14px; font-weight: bold; line-height: 36px; min-height: 44px; text-align: center; vertical-align: middle; white-space: normal; width: 44px; word-break: break-word; } .WordSelector button:focus:not(.selected) { border: 1px solid #c7c7c7; border-radius: 50%; outline: none; } .WordSelector button.selected { background-color: #555; border: 1px solid #555; border-radius: 50%; color: #fff; outline: none; -webkit-transition: .5s ease all; transition: .5s ease all; -webkit-transition-property: color, background-color; transition-property: color, background-color; } .InterestCard { /* TODO(dalvarez): #TechDebt this is a temporary solution to NuxInterest not rendering correctly */ } .InterestCard.compact, .InterestCard.default { height: 100%; width: 100%; } .InterestCard.default h2 { font-size: 16px; } .InterestCard.default h3 { font-size: 12px; font-weight: normal; } .InterestCard.default .followButton { margin-top: 8px; } .InterestCard.compact h2 { font-size: 13px; } .InterestCard.compact h3 { font-size: 11px; font-weight: normal; } .InterestCard.compact .followButton { display: none; padding: 8px; position: absolute; right: 0; top: 0; } .InterestCard.compact:hover .followButton { display: block; } .InterestCard .link { cursor: pointer; } .InterestCard .interestContainer:active { -webkit-transform: scale(0.95); transform: scale(0.95); } .InterestCard .interestContainer { border-radius: 6px; box-sizing: border-box; display: block; height: 100%; min-width: 130px; padding-bottom: 100%; position: relative; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; width: 100%; } .InterestCard .mobileInterestContainer { min-width: 106px; } .InterestCard .mobileNuxInterest { min-width: 0; } .InterestCard .interestImage { background: #fff; background-size: cover; border-radius: 6px; display: block; height: 100%; position: absolute; -webkit-transform: none; transform: none; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; width: 100%; } .InterestCard .noImageInterest { border-radius: 3px; } .InterestCard .interestImage::after { background: #000; border-radius: 6px; bottom: 0; content: ""; left: 0; opacity: .2; position: absolute; right: 0; top: 0; } .InterestCard .interestImage:hover { opacity: 1; } .InterestCard .textContainer { bottom: 0; display: block; left: 0; padding: 8px; position: absolute; right: 0; z-index: 1; } .InterestCard .centerText { bottom: 50%; -webkit-transform: translateY(50%); transform: translateY(50%); } .InterestCard .textContainer div { overflow: hidden; text-overflow: ellipsis; } .InterestCard .text { color: #fff; display: block; -webkit-font-smoothing: antialiased; font-weight: bold; text-align: left; text-overflow: ellipsis; width: 100%; } .InterestCard .left { composes: text; text-align: left; } .InterestCard .center { composes: text; text-align: center; } .InterestCard .right { composes: text; text-align: right; } .InterestCard .value { font-weight: bold; } .StoryRenuxCard .buttonWrapper { background-color: transparent; border: none; height: 300px; padding: 0; position: relative; width: 100%; } .StoryRenuxCard .buttonWrapper:focus { outline: none; } .StoryRenuxCard .buttonWrapper:hover .renuxButton { background-color: #e0e0e0; } .StoryRenuxCard .petalWrapper { border-radius: 8px; height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; } @-webkit-keyframes textAnimation { 0% { opacity: 0; -webkit-transform: translateY(30%); transform: translateY(30%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes textAnimation { 0% { opacity: 0; -webkit-transform: translateY(30%); transform: translateY(30%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } .StoryRenuxCard .petalText { -webkit-animation: 0.42s cubic-bezier(0.31, 1, 0.34, 1) 2.3s 1 textAnimation forwards; animation: 0.42s cubic-bezier(0.31, 1, 0.34, 1) 2.3s 1 textAnimation forwards; border: 1px solid transparent; bottom: 64px; left: 0; opacity: 0; padding: 12px; position: absolute; width: 165px; } @-webkit-keyframes petalAnimation { from { -webkit-transform: scale(0) rotate(-45deg) translateX(-100%); transform: scale(0) rotate(-45deg) translateX(-100%); } to { -webkit-transform: scale(1) rotate(0deg) translateX(0); transform: scale(1) rotate(0deg) translateX(0); } } @keyframes petalAnimation { from { -webkit-transform: scale(0) rotate(-45deg) translateX(-100%); transform: scale(0) rotate(-45deg) translateX(-100%); } to { -webkit-transform: scale(1) rotate(0deg) translateX(0); transform: scale(1) rotate(0deg) translateX(0); } } .StoryRenuxCard .petal { -webkit-animation: 0.8s cubic-bezier(0.31, 1, 0.34, 1) 1.6s petalAnimation forwards; animation: 0.8s cubic-bezier(0.31, 1, 0.34, 1) 1.6s petalAnimation forwards; background-color: #f23434; border-radius: 50% 50% 50% 8px; margin-bottom: 18px; padding-top: 100%; -webkit-transform: scale(0) rotate(-45deg) translateX(-100%); transform: scale(0) rotate(-45deg) translateX(-100%); -webkit-transform-origin: bottom left; transform-origin: bottom left; width: 100%; } @-webkit-keyframes buttonAnimation { 0% { height: 300px; } 50% { height: 300px; } 100% { height: 45px; } } @keyframes buttonAnimation { 0% { height: 300px; } 50% { height: 300px; } 100% { height: 45px; } } .StoryRenuxCard .renuxButton { -webkit-animation: 1.2s cubic-bezier(0.31, 1, 0.34, 1) 0.5s buttonAnimation forwards; animation: 1.2s cubic-bezier(0.31, 1, 0.34, 1) 0.5s buttonAnimation forwards; background-color: #efefef; border-radius: 8px; bottom: 0; display: table; height: 300px; position: absolute; width: 100%; } .StoryRenuxCard .renuxButtonText { -webkit-animation: 0.42s cubic-bezier(0.31, 1, 0.34, 1) 1.5s 1 textAnimation forwards; animation: 0.42s cubic-bezier(0.31, 1, 0.34, 1) 1.5s 1 textAnimation forwards; display: table-cell; opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); vertical-align: middle; width: 100%; } @-webkit-keyframes fadeInOut { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInOut { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes selectedFadeInOut { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes selectedFadeInOut { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .StoryGamePin.animation { -webkit-animation-delay: 500ms; animation-delay: 500ms; -webkit-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-name: fadeInOut; animation-name: fadeInOut; border-radius: 6px; opacity: 0; } .StoryGamePin.selectedAnimation { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-name: selectedFadeInOut; animation-name: selectedFadeInOut; border-radius: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; position: absolute; width: 100%; z-index: -1; } .StoryGamePin.hoverable { background-color: #000; border-radius: 6px; height: 100%; opacity: 0; position: absolute; width: 100%; z-index: 1; } .StoryGamePin.hoverable:hover { opacity: .2; } .StoryTopicCard .wrapper { cursor: pointer; display: block; position: relative; } .StoryTopicCard .card { background: #efefef; bottom: 0; cursor: pointer; left: 0; opacity: 0; position: absolute; right: 0; top: 0; z-index: -1; } .StoryTopicCard .card.circle { border-radius: 50%; } .StoryTopicCard .card.rounded { border-radius: 8px; } .StoryTopicCard .hover { -webkit-animation: animateIn 0.2s cubic-bezier(0.31, 1, 0.34, 1) forwards; animation: animateIn 0.2s cubic-bezier(0.31, 1, 0.34, 1) forwards; } @-webkit-keyframes animateIn { to { opacity: 1; -webkit-transform: scale(1.09, 1.09); transform: scale(1.09, 1.09); } } @keyframes animateIn { to { opacity: 1; -webkit-transform: scale(1.09, 1.09); transform: scale(1.09, 1.09); } } .StoryTopicCard .wash { background: #000; bottom: 0; left: 0; opacity: .45; pointer-events: none; position: absolute; right: 0; top: 0; } /* stylelint-disable no-duplicate-selectors */ /* common.scss */ .UserNavigateButton.merged { border-bottom-right-radius: 0 0; border-top-right-radius: 0 0; margin-right: -1px; } .UserNavigateButton .usernameLink { width: 100%; } .UserNavigateButton .profileImage { background-size: 22px 22px; border-radius: 11px; height: 22px; margin-left: 8px; margin-top: 5px; overflow: hidden; width: 22px; } .UserNavigateButton:active { background: #e9e9e9; border-color: #cfcfcf; box-shadow: none; } .PinnerProfileMenuButton a:hover { text-decoration: underline; } .PinnerProfileMenuButton hr { display: block; } /* desktop.scss */ .UserNavigateButton { background: transparent; border: none; height: auto; margin-right: 0; width: auto; } .UserNavigateButton .px2, .UserNavigateButton .SearchForm.guided, .UserNavigateButton .BoardHeader .boardHeaderWrapper, .BoardHeader .UserNavigateButton .boardHeaderWrapper, .UserNavigateButton .BoardInfoBar .infoBarWrapper, .BoardInfoBar .UserNavigateButton .infoBarWrapper, .UserNavigateButton .BulkEditBar .boardBulkEditBar, .BulkEditBar .UserNavigateButton .boardBulkEditBar, .UserNavigateButton .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .UserNavigateButton .profileImage, .UserNavigateButton .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .UserNavigateButton .profileInfo, .UserNavigateButton .UserProfileHeader.profileHeader .titleBar, .UserProfileHeader.profileHeader .UserNavigateButton .titleBar { padding-left: 6px; padding-right: 6px; } .UserNavigateButton .py1, .UserNavigateButton .UserInfoBar.infoBar .tabs ul, .UserInfoBar.infoBar .tabs .UserNavigateButton ul { padding-bottom: 3px; padding-top: 3px; } .UserNavigateButton:focus, .UserNavigateButton:hover { background: transparent; box-shadow: none !important; } .UserNavigateButton .profileName { display: none; } .UserNavigateButton em { width: 20px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -163px -296px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserNavigateButton em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -114px -292px; background-size: 399px 382px; } } .UserNavigateButton:hover em, .UserNavigateButton:focus em { width: 20px; height: 24px; background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -119px -296px no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .UserNavigateButton:hover em, .UserNavigateButton:focus em { background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png); background-position: -177px -292px; background-size: 399px 382px; } } @-webkit-keyframes ReactTwoCirclePulserInnerAnim { 0% { opacity: 0; -webkit-transform: scale(0.6); transform: scale(0.6); } 18% { opacity: .7; -webkit-transition-timing-function: linear; transition-timing-function: linear; } 45% { opacity: .7; } 50% { -webkit-transform: scale(0.45); transform: scale(0.45); -webkit-transition-timing-function: cubic-bezier(0.1, 0.55, 0.95, 0.5); transition-timing-function: cubic-bezier(0.1, 0.55, 0.95, 0.5); } 55% { opacity: .7; -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-transition-timing-function: linear; transition-timing-function: linear; } 80% { opacity: 0; -webkit-transition-timing-function: cubic-bezier(0.42, 0, 1, 1); transition-timing-function: cubic-bezier(0.42, 0, 1, 1); } 100% { opacity: 0; -webkit-transform: scale(0.6); transform: scale(0.6); } } @keyframes ReactTwoCirclePulserInnerAnim { 0% { opacity: 0; -webkit-transform: scale(0.6); transform: scale(0.6); } 18% { opacity: .7; -webkit-transition-timing-function: linear; transition-timing-function: linear; } 45% { opacity: .7; } 50% { -webkit-transform: scale(0.45); transform: scale(0.45); -webkit-transition-timing-function: cubic-bezier(0.1, 0.55, 0.95, 0.5); transition-timing-function: cubic-bezier(0.1, 0.55, 0.95, 0.5); } 55% { opacity: .7; -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-transition-timing-function: linear; transition-timing-function: linear; } 80% { opacity: 0; -webkit-transition-timing-function: cubic-bezier(0.42, 0, 1, 1); transition-timing-function: cubic-bezier(0.42, 0, 1, 1); } 100% { opacity: 0; -webkit-transform: scale(0.6); transform: scale(0.6); } } @-webkit-keyframes ReactTwoCirclePulserOuterAnim { 0% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } 48% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } 53% { opacity: .6; -webkit-transition-timing-function: linear; transition-timing-function: linear; } 80% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition-timing-function: linear; transition-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes ReactTwoCirclePulserOuterAnim { 0% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } 48% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } 53% { opacity: .6; -webkit-transition-timing-function: linear; transition-timing-function: linear; } 80% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition-timing-function: linear; transition-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } }