MoeJue/DropOut
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: タブレット用に修正

Browse Source
This commit is contained in:
yuki540 2018-04-17 01:05:40 +09:00
parent c8bb586207
commit 61c970701c
2 changed files with 23 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/scss/keyframes/tablet/_calling.scss
View File

@ -1,58 +0,0 @@
@keyframes calling__show-btn-1 {
from { transform: rotate(180deg) scale(2); opacity: 0; }
to { transform: rotate(180deg) scale(1); opacity: 1; }
}
@keyframes calling__show-btn-2 {
from { transform: rotate(45deg) scale(2); opacity: 0; }
to { transform: rotate(45deg) scale(1); opacity: 1; }
}
@keyframes calling__touch-btn {
from { border-width: 40px; opacity: 0; transform: scale(0.6); }
to { border-width: 0px; opacity: 0.8; transform: scale(3); }
}
@keyframes calling__press-btn {
from { transform: scale(1) rotate(45deg); opacity: 1; }
to { transform: scale(0.6) rotate(45deg); opacity: 0.6; }
}
@keyframes calling__icon-frame-1 {
from { transform: scale(0) translate(-5px, 5px); opacity: 0; }
to { transform: scale(1) translate(0); opacity: 1; }
}
@keyframes calling__icon-frame-2 {
from { transform: scale(0) translate(5px, -5px); opacity: 0; }
to { transform: scale(1) translate(0); opacity: 1; }
}
@keyframes calling__show-controls-bar {
from { width: 0; left: 50%; }
to { width: 500px; left: calc(50% - 250px); }
}
@keyframes calling__show-live-view {
from { width: 0; margin-left: 50%; margin-top: 10px; }
to { width: calc(100% - 20px); margin-left: 10px; margin-top: 10px; }
}
@keyframes calling__char-name-frame-1 {
0% { opacity: 0; transform: translate(4px, 4px); }
10% { opacity: 1; }
100% { opacity: 1; transform: translate(0px, 0px); }
}
@keyframes calling__char-name-frame-2 {
0% { opacity: 0; transform: translate(-4px, -4px); }
10% { opacity: 1; }
100% { opacity: 1; transform: translate(0px, 0px); }
}
@keyframes calling__show-say {
0% { transform: scale(8); opacity: 0; }
70% { transform: scale(1); opacity: 1; }
85% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes calling__end {
from { transform: translateY(-100%); }
to { transform: translateY(0%); }
}

38
src/scss/modules/tablet/_calling.scss
View File

@ -1,9 +1,8 @@
@include pc-layout {
@include tablet-layout {
.calling {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
min-width: $min-width; min-height: $min-height;
background-color: $theme-purple;
overflow: hidden;
z-index: 998;
@ -108,14 +107,14 @@
/*** icons ***/
.calling__icons {
position: absolute;
top: 100px; left: calc(50% - 400px);
width: 800px; height: 150px;
top: 100px; left: calc(50% - 300px);
width: 600px; height: 150px;
.icon-box {
position: relative;
margin-right: 100px;
margin-right: 75px;
float: left;
width: 200px; height: 200px;
width: 150px; height: 150px;
.icon {
position: absolute;
@ -138,7 +137,7 @@
.name {
position: absolute;
left: 50px; bottom: -50px;
left: 25px; bottom: -50px;
width: 100px; height: 30px;
font-size: 16px;
text-align: center;
@ -223,8 +222,8 @@
/*** live-view ***/
.calling__live-view {
position: absolute;
left: calc(50% - 500px); top: 0;
width: 1000px; height: calc(100% - 140px);
left: 0; top: 0;
width: 100%; height: calc(100% - 140px);
.view {
position: absolute;
@ -284,29 +283,38 @@
top: 0; left: 0;
.char {
background-color: $theme-light-purple;
&::after { background-image: url(../images/calling/icons/yui_large.png); }
&::after {
transform: translateY(100%);
background-image: url(../images/calling/icons/yui_large.png);
}
}
}
.view:nth-child(2) {
top: 0; right: 0;
.char {
background-color: $theme-mint;
&::after { background-image: url(../images/calling/icons/eriri_large.png); }
&::after {
transform: translateX(-100%);
background-image: url(../images/calling/icons/eriri_large.png);
}
}
}
.view:nth-child(3) {
bottom: 0; left: 25%;
.char {
background-color: $theme-pink;
&::after { background-image: url(../images/calling/icons/gab_large.png); }
&::after {
transform: translateX(100%);
background-image: url(../images/calling/icons/gab_large.png);
}
}
}
}
.calling__say {
position: absolute;
left: -20%; top: calc(50% - 200px);
width: 140%; height: 400px;
left: -20%; top: calc(50% - 100px);
width: 140%; height: 200px;
transform: rotate(-20deg);
z-index: 5;
@ -325,7 +333,7 @@
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-size: auto 35%;
background-size: auto 45%;
background-position: center;
background-repeat: no-repeat;
background-image: url(../images/calling/say.png);