third_party/subscriptions-project/swg-button.css - main - githubmirror/amphtml

third_party/subscriptions-project/swg-button.css
397 строк38 KB
Minyu Jiang
SwG Release 0.1.22.240 (#38527)
03 ноя 2022, 02:04
03 ноя 2022, 02:042ac9c1f
/**
 * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS-IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.swg-button,
.swg-button-light,
.swg-button-dark {
  border: 0;
  border-radius: 4px;
  box-sizing: border-box;
  outline: 0;
  padding: 11px 8px;
  width: 240px;
  min-width: 150px;
  height: 40px;
  min-height: 40px;
}

.swg-button:after,
.swg-button-light:after,
.swg-button-dark:after {
  display: block;
  max-width: 200px;
  max-height: 40px;
  width: 100%;
  height: 100%;
  margin: auto;
  content: '';
  border: 0;
  background-origin: content-box;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.swg-button,
.swg-button-light {
  background-color: #fff;
  box-shadow: 0 1px 1px 0 rgba(60, 64, 67, 0.3),
    0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.swg-button:after,
.swg-button-light:after {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='235px' height='24px' viewBox='0 0 235 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/x … [Строка слишком длинная. Вы можете скачать файл]
}

.swg-button-dark {
  background-color: #000;
}

.swg-button-dark:after {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='231px' height='24px' viewBox='0 0 231 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/x … [Строка слишком длинная. Вы можете скачать файл]
}

.swg-button:hover,
.swg-button-light:hover {
  background-color: #f8f8f8;
}

.swg-button:focus,
.swg-button-light:focus {
  box-shadow: #e8e8e8;
}

.swg-button:active,
.swg-button-light:active {
  background-color: #fff;
}

.swg-button-dark:hover {
  background-color: #3c4043;
}

.swg-button-dark:focus {
  box-shadow: #202124;
}

.swg-button-dark:active {
  background-color: #5f6368;
}

/*
  This class defines style only for the container button.
  All button styles are rendered inside the nested iframe.
*/
.swg-smart-button {
  border: none;
  padding: 0;
  background: transparent;
  min-height: 126px;
  position: relative;
  min-width: 300px;
  width: 300px;
  border-radius: 0;
  overflow: hidden;
}

.swg-smart-button:focus {
  outline: none;
}

/**
 * i18n bindings
 */

.swg-button:lang(ar):after,
.swg-button-light:lang(ar):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-ar-lt.svg");
}
.swg-button-dark:lang(ar):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-ar-dk.svg");
}
.swg-button:lang(de):after,
.swg-button-light:lang(de):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-de-lt.svg");
}
.swg-button-dark:lang(de):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-de-dk.svg");
}
.swg-button:lang(es):after,
.swg-button-light:lang(es):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-es-lt.svg");
}
.swg-button-dark:lang(es):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-es-dk.svg");
}
.swg-button:lang(es-latam):after,
.swg-button-light:lang(es-latam):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-es-latam-lt.svg");
}
.swg-button-dark:lang(es-latam):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-es-latam-dk.svg");
}
.swg-button:lang(es-latn):after,
.swg-button-light:lang(es-latn):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-es-latam-lt.svg");
}
.swg-button-dark:lang(es-latn):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-es-latam-dk.svg");
}
.swg-button:lang(fr):after,
.swg-button-light:lang(fr):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-fr-lt.svg");
}
.swg-button-dark:lang(fr):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-fr-dk.svg");
}
.swg-button:lang(hi):after,
.swg-button-light:lang(hi):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-hi-lt.svg");
}
.swg-button-dark:lang(hi):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-hi-dk.svg");
}
.swg-button:lang(id):after,
.swg-button-light:lang(id):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-id-lt.svg");
}
.swg-button-dark:lang(id):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-id-dk.svg");
}
.swg-button:lang(it):after,
.swg-button-light:lang(it):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-it-lt.svg");
}
.swg-button-dark:lang(it):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-it-dk.svg");
}
.swg-button:lang(ja):after,
.swg-button-light:lang(ja):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-jp-lt.svg");
}
.swg-button-dark:lang(ja):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-jp-dk.svg");
}
.swg-button:lang(ko):after,
.swg-button-light:lang(ko):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-ko-lt.svg");
}
.swg-button-dark:lang(ko):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-ko-dk.svg");
}
.swg-button:lang(ms):after,
.swg-button-light:lang(ms):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-ms-lt.svg");
}
.swg-button-dark:lang(ms):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-ms-dk.svg");
}
.swg-button:lang(nl):after,
.swg-button-light:lang(nl):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-nl-lt.svg");
}
.swg-button-dark:lang(nl):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-nl-dk.svg");
}
.swg-button:lang(no):after,
.swg-button-light:lang(no):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-no-lt.svg");
}
.swg-button-dark:lang(no):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-no-dk.svg");
}
.swg-button:lang(pl):after,
.swg-button-light:lang(pl):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-pl-lt.svg");
}
.swg-button-dark:lang(pl):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-pl-dk.svg");
}
.swg-button:lang(pt):after,
.swg-button-light:lang(pt):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-pt-lt.svg");
}
.swg-button-dark:lang(pt):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-pt-dk.svg");
}
.swg-button:lang(pt-br):after,
.swg-button-light:lang(pt-br):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-pt-br-lt.svg");
}
.swg-button-dark:lang(pt-br):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-pt-br-dk.svg");
}
.swg-button:lang(ru):after,
.swg-button-light:lang(ru):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-ru-lt.svg");
}
.swg-button-dark:lang(ru):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-ru-dk.svg");
}
.swg-button:lang(sv):after,
.swg-button-light:lang(sv):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-sv-lt.svg");
}
.swg-button-dark:lang(sv):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-sv-dk.svg");
}
.swg-button:lang(th):after,
.swg-button-light:lang(th):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-th-lt.svg");
}
.swg-button-dark:lang(th):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-th-dk.svg");
}
.swg-button:lang(tr):after,
.swg-button-light:lang(tr):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-tr-lt.svg");
}
.swg-button-dark:lang(tr):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-tr-dk.svg");
}
.swg-button:lang(uk):after,
.swg-button-light:lang(uk):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-uk-lt.svg");
}
.swg-button-dark:lang(uk):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-uk-dk.svg");
}
.swg-button:lang(zh-cn):after,
.swg-button-light:lang(zh-cn):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-zh-cn-lt.svg");
}
.swg-button-dark:lang(zh-cn):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-zh-cn-dk.svg");
}
.swg-button:lang(zh-tw):after,
.swg-button-light:lang(zh-tw):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-zh-tw-lt.svg");
}
.swg-button-dark:lang(zh-tw):after {
  background-image: url("https://news.google.com/swg/js/v1/i18n/b-zh-tw-dk.svg");
}

.swg-button-v2-light,
.swg-button-v2-dark {
  border: 0;
  border-radius: 4px;
  outline: 0;
  width: 237px;
  min-width: 237px;
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  font-family: 'Google Sans', 'Roboto-Regular', sans-serif, arial;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.001em;
  cursor: pointer;
}

.swg-button-v2-light {
  color: #1a73e8;
  background-color: #fff;
  border: 1px solid #dadce0;
}

.swg-button-v2-light[disabled] {
  pointer-events: none;
  color: rgba(60, 64, 67, 0.38);
  border: 1px solid rgba(60, 64, 67, 0.12);
}

.swg-button-v2-light:hover {
  box-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3),
    0px 1px 3px 1px rgba(60, 64, 67, 0.15);
  background: linear-gradient(
      0deg,
      rgba(26, 115, 232, 0.04),
      rgba(26, 115, 232, 0.04)
    ),
    #ffffff;
  border: none;
}

.swg-button-v2-light:focus {
  box-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3),
    0px 2px 6px 2px rgba(60, 64, 67, 0.15);
  background: linear-gradient(
      0deg,
      rgba(26, 115, 232, 0.08),
      rgba(26, 115, 232, 0.08)
    ),
    #ffffff;
  border: none;
}

.swg-button-v2-light:active {
  background-color: #fff;
  box-shadow: 0px 6px 10px 4px rgba(60, 64, 67, 0.15),
    0px 2px 3px rgba(60, 64, 67, 0.3);
  border: none;
}

.swg-button-v2-dark {
  color: #ffffff;
  background-color: #3c4043;
}

.swg-button-v2-dark[disabled] {
  color: rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

.swg-button-v2-dark:hover,
.swg-button-v2-dark:active {
  box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15),
    0px 1px 2px rgba(0, 0, 0, 0.3);
  background-color: #202124;
}

.swg-button-v2-dark:focus {
  box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.15),
    0px 2px 3px rgba(0, 0, 0, 0.3);
  background-color: #202124;
}

.swg-button-v2-icon-light,
.swg-button-v2-icon-dark {
  background-size: contain;
  width: 18px;
  height: 18px;
  margin-left: 16px;
  margin-right: 8px;
}

.swg-button-v2-icon-light {
  background-image: url('https://fonts.gstatic.com/s/i/productlogos/googleg/v6/24px.svg');
}

.swg-button-v2-light[disabled] .swg-button-v2-icon-light {
  background-image: url('https://fonts.gstatic.com/s/i/googlematerialicons/google/v20/gm_grey-24dp/2x/gm_google_gm_grey_24dp.png');
  opacity: 0.38;
}

.swg-button-v2-icon-dark {
  background-image: url('https://fonts.gstatic.com/s/i/googlematerialicons/google/v13/white-24dp/2x/gm_google_white_24dp.png');
}

.swg-button-v2-dark[disabled] .swg-button-v2-icon-dark {
  background-image: url('https://fonts.gstatic.com/s/i/googlematerialicons/google/v20/gm_grey-24dp/2x/gm_google_gm_grey_24dp.png');
}