スマホ画面サポート機能の詳細設定CSSサンプル

スマホ画面サポート機能の詳細設定CSSサンプル

トップページ » スマホ画面サポート機能｜カテゴリートップ » スマホ画面サポート機能｜事前設定 » スマホ画面サポート機能の詳細設定CSSサンプル
このページでは、スマホ画面サポート機能における詳細設定CSSのサンプルを掲載します。


スマホ画面サポート機能の詳細設定CSSのサンプルは以下となります。

css
Copied!
.bf-css-info-button {
position: relative;
width: 292px;
height: 48px;
margin: 0 auto;
text-align: center;
padding: 12px 12px 12px 24px;
background: #ffffff;
border: 2px solid #0065a9;
box-sizing: border-box;
border-radius: 300px;
cursor: pointer;
line-height: 20px;
}
.bf-css-info-button.bf-disabled {
background: #bdbdbd;
border: 2px solid #bdbdbd;
}
.bf-css-info-button.bf-disabled .bf-css-info-button-text {
color: #fff;
}
.bf-css-info-button.bf-disabled
.bf-css-info-button-text::before {
background-image: url("https://static.bell-face.com/bellface-img-sharing-tag/action-button-disabled-icon.svg");
left: 28px;
}
.bf-css-info-button-text {
position: static;
width: 230px;
height: 16px;
font-family: 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
font-style: normal;
font-weight: bold;
font-size: 16px;
letter-spacing: normal;
font-feature-settings: "palt" on;
color: #0065a9;
margin: 0 4px 0 19px;
}
.bf-css-info-button-text::before {
width: 20px;
height: 18px;
background-image: url("https://static.bell-face.com/bellface-img-sharing-tag/action-button-icon.svg");
content: "";
position: absolute;
top: 13px;
left: 20px;
}
.bf-css-info-button .bf-css-info-button-text::after {
content: "スマホ画面サポートを利用する";
}
.bf-css-info-button.bf-disabled
.bf-css-info-button-text::after {
content: "スマホ画面サポート起動中...";
}
.bf-css-share-button {
position: fixed;
width: 56px;
height: 56px;
z-index: 1000;
background: #0065a9 url("https://static.bell-face.com/bellface-img-sharing-tag/share-btn.svg") no-repeat 18px 12px;
box-shadow: 0px 0px 13px -3px rgba(0, 0, 0, 0.7);
border-radius: 1200px;
bottom:16px;
left:8px;
}
.bf-css-share-button.bf-disabled {
opacity: 0.7;
bottom:16px;
left:8px;
}
.bf-css-snackbar-container {
position: fixed;
width: 295px;
height: 50px;
z-index: 1000;
bottom:21px;
left:72px;
}
.bf-css-snackbar {
position: relative;
width: inherit;
height: inherit;
border-radius: 4px;
opacity: 0;
position: absolute;
}
.bf-css-snackbar-slide {
animation-name: snackbar-slidein-slideout;
animation-duration: 5s;
}
.bf-css-snackbar-notification {
background: #4caf50;
}
.bf-css-snackbar-error {
background: #e98c00;
}
.bf-css-snackbar-icon,
.bf-css-snackbar-title,
.bf-css-snackbar-close {
float: left;
}
.bf-css-snackbar-title {
display: table;
width: 235px;
height: inherit;
font-family: 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
color: #fff;
font-weight: 700;
font-size: 12px;
margin: 0 auto;
padding: 0;
}
.bf-css-snackbar-title > p {
display: table-cell;
vertical-align: middle;
}
.bf-css-snackbar-title > p > span {
display: block;
font-size: 10px;
font-weight: 400;
}
.bf-css-snackbar-icon {
width: 24px;
height: inherit;
padding-top: 13px;
margin: 0 5px 0 8px;
}
.bf-css-snackbar-close {
width: 16px;
height: inherit;
padding-top: 17px;
}
.bf-css-snackbar-close::after {
clear: both;
}
@media screen and (max-width: 376px) {
.bf-css-snackbar-container {
width: calc(100% - 80px);
}
.bf-css-snackbar {
width: 100%;
}
.bf-css-snackbar-title {
width: calc(
100% - (24px + 18px + 16px)
);
}
}
@keyframes snackbar-slidein-slideout {
0% {
opacity: 0;
left: -70px;
}
20% {
opacity: 1;
left: 0;
}
50% {
opacity: 1;
left: 0;
}
75% {
opacity: 1;
left: 0;
}
100% {
opacity: 0;
left: -70px;
}
}




当ページの内容にご不明点がある場合は、チャットサポート または 弊社カスタマーサクセスチーム宛（cs@bell-face.com）までご連絡ください。
■ このカテゴリーのページ
スマホ画面サポート機能｜カテゴリートップ
スマホ画面サポート機能｜事前設定
通常スマホ画面サポートの初期設定
通常スマホ画面サポートの詳細設定
bellFace起点スマホ画面サポートの初期設定
bellFace起点スマホ画面サポートの詳細設定
スマホ画面サポート機能の詳細設定CSSサンプル

最終更新日：2022/12/15

関連ページ

Powered by Helpfeel