편집 요약 없음 |
편집 요약 없음 |
||
1번째 줄: | 1번째 줄: | ||
.base-window { | |||
position: fixed; | |||
top: 0; | |||
right: 0; | |||
width: 100%; | |||
height: 100%; | |||
background: rgba(0, 0, 0, .5); | |||
text-align: center; | |||
z-index: 999996; | |||
} | |||
.black-window { | |||
position: fixed; | |||
top: 0%; | |||
right: 0%; | |||
width: 100%; | |||
height: 100%; | |||
cursor: default; | |||
z-index: 999997; | |||
} | |||
.x-btn-base { | |||
position: absolute; | |||
top: 5px; | |||
right: 10px; | |||
font-size: 2em; | |||
color: gray; | |||
z-index: 999999; | |||
} | |||
x-btn { | |||
display: inline-block; | |||
transform: rotate(45deg); | |||
} | |||
@media screen and (max-width: 768px) { | @media screen and (max-width: 768px) { | ||
.novel-window { | .novel-window { |
2024년 2월 13일 (화) 22:21 판
.base-window {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
text-align: center;
z-index: 999996;
}
.black-window {
position: fixed;
top: 0%;
right: 0%;
width: 100%;
height: 100%;
cursor: default;
z-index: 999997;
}
.x-btn-base {
position: absolute;
top: 5px;
right: 10px;
font-size: 2em;
color: gray;
z-index: 999999;
}
x-btn {
display: inline-block;
transform: rotate(45deg);
}
@media screen and (max-width: 768px) {
.novel-window {
display: inline-block;
width: 100%;
height: 100%;
background: white;
position: absolute;
top: -50%;
right: 50%;
transform: translate(50%, 50%);
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #ddd;
border-radius: 5px;
padding: 5px;
text-align: justify;
font-family: Noto Serif KR;
color: black;
z-index: 999999;
}
.moblile-x-btn-margin {
display: inline-block;
float: right;
width: 2.5em;
height: 1em;
}
}
@media screen and (min-width: 768px) {
.novel-window {
display: inline-block;
max-width: 700px;
height: 100%;
background: white;
position: absolute;
top: -50%;
right: 50%;
transform: translate(50%, 50%);
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #ddd;
border-radius: 5px;
padding: 5px;
text-align: justify;
font-family: Noto Serif KR;
color: black;
z-index: 999999;
}
.moblile-x-btn-margin {
display: none;
}
}