add: ロード画面のフレームにスタイルを適用
This commit is contained in:
yuki540
parent
cc3f07baab
commit
2bdb7dc22a
218
src/scss/modules/pc/load-view.scss
Normal file
218
src/scss/modules/pc/load-view.scss
Normal file
@ -0,0 +1,218 @@
|
||||
@include pc-layout {
|
||||
#load-view {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
min-width: $min-width; min-height: $min-height;
|
||||
|
||||
/**
|
||||
* frame
|
||||
*/
|
||||
.frame {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background-color: $theme-pink;
|
||||
|
||||
/*** direction ***/
|
||||
.direction {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
|
||||
.left,
|
||||
.right {
|
||||
position: absolute;
|
||||
left: calc(50% - 57.5px);
|
||||
width: 115px; height: 35px;
|
||||
|
||||
div {
|
||||
float: left;
|
||||
width: 0; height: 0;
|
||||
margin-top: 2.5px;
|
||||
margin-right: 20px;
|
||||
border-top: solid 15px transparent;
|
||||
border-bottom: solid 15px transparent;
|
||||
opacity: 0.1;
|
||||
}
|
||||
div:last-child { margin-right: 0; }
|
||||
&::after { content: ""; display: block; clear: both; }
|
||||
}
|
||||
.bottom,
|
||||
.top {
|
||||
position: absolute;
|
||||
top: calc(50% - 57.5px);
|
||||
width: 35px; height: 115px;
|
||||
|
||||
div {
|
||||
width: 0; height: 0;
|
||||
margin-left: 2.5px;
|
||||
margin-bottom: 20px;
|
||||
border-left: solid 15px transparent;
|
||||
border-right: solid 15px transparent;
|
||||
opacity: 0.1;
|
||||
}
|
||||
div:last-child { margin-bottom: 0; }
|
||||
&::after { content: ""; display: block; clear: both; }
|
||||
}
|
||||
|
||||
/** left **/
|
||||
.left {
|
||||
top: 6px;
|
||||
div { border-right: solid 25px #fff; }
|
||||
}
|
||||
|
||||
/** right **/
|
||||
.right {
|
||||
bottom: 6px;
|
||||
div { border-left: solid 25px #fff; }
|
||||
}
|
||||
|
||||
/** bottom **/
|
||||
.bottom {
|
||||
left: 6px;
|
||||
div { border-top: solid 25px #fff; }
|
||||
}
|
||||
/** top **/
|
||||
.top {
|
||||
right: 6px;
|
||||
div { border-bottom: solid 25px #fff; }
|
||||
}
|
||||
}
|
||||
|
||||
/*** square ***/
|
||||
.square {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
width: 40px; height: 40px;
|
||||
border: dashed 3px #fff;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
}
|
||||
div:nth-child(1) { top: 10px; left: 10px; }
|
||||
div:nth-child(2) { top: 10px; right: 10px; }
|
||||
div:nth-child(3) { bottom: 10px; left: 10px; }
|
||||
div:nth-child(4) { bottom: 10px; right: 10px; }
|
||||
}
|
||||
|
||||
/*** line ***/
|
||||
.line {
|
||||
position: absolute;
|
||||
top: 47px; left: 47px;
|
||||
width: calc(100% - 94px);
|
||||
height: calc(100% - 94px);
|
||||
|
||||
div { position: absolute; box-sizing: border-box; }
|
||||
div:nth-child(1),
|
||||
div:nth-child(2) {
|
||||
width: 100%; height: 1px; left: 0;
|
||||
border-top: dashed 3px #fff;
|
||||
}
|
||||
div:nth-child(3),
|
||||
div:nth-child(4) {
|
||||
width: 1px; height: 100%;
|
||||
border-left: dashed 3px #fff;
|
||||
}
|
||||
div:nth-child(1) { top: 0; }
|
||||
div:nth-child(2) { bottom: 0; }
|
||||
div:nth-child(3) { left: 0; }
|
||||
div:nth-child(4) { right: 0; }
|
||||
}
|
||||
|
||||
/*** rect ***/
|
||||
.rect {
|
||||
position: absolute;
|
||||
top: 90px; left: 90px;
|
||||
width: calc(100% - 180px); height: calc(100% - 180px);
|
||||
z-index: 1;
|
||||
|
||||
/** bar **/
|
||||
.bar {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background-color: #fff;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
div:nth-child(1),
|
||||
div:nth-child(3) { left: 0; width: 100%; height: 3px; }
|
||||
div:nth-child(2),
|
||||
div:nth-child(4) { top: 0; width: 3px; height: 100%; }
|
||||
div:nth-child(1) {
|
||||
top: 0;
|
||||
&::after { transform: translateX(100%); }
|
||||
}
|
||||
div:nth-child(2) {
|
||||
left: 0;
|
||||
&::after { transform: translateY(-100%); }
|
||||
}
|
||||
div:nth-child(3) {
|
||||
bottom: 0;
|
||||
&::after { transform: translateX(-100%); }
|
||||
}
|
||||
div:nth-child(4) {
|
||||
right: 0;
|
||||
&::after { transform: translateY(100%); }
|
||||
}
|
||||
}
|
||||
|
||||
/** effect **/
|
||||
.effect {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
|
||||
div:nth-child(4) {
|
||||
position: absolute;
|
||||
top: -23.5px; right: -23.5px;
|
||||
width: 50px; height: 50px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
div:nth-child(1),
|
||||
div:nth-child(2),
|
||||
div:nth-child(3) {
|
||||
position: absolute;
|
||||
width: 50px; height: 50px;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
border: solid 20px #fff;
|
||||
opacity: 0;
|
||||
}
|
||||
div:nth-child(1) { top: -23.5px; left: -23.5px; }
|
||||
div:nth-child(2) { bottom: -23.5px; left: -23.5px; }
|
||||
div:nth-child(3) { bottom: -23.5px; right: -23.5px; }
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 60px; left: 60px;
|
||||
width: calc(100% - 120px); height: calc(100% - 120px);
|
||||
background-color: $theme-light-pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#load-view[data-state="fin"] {
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user