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