|
|
| 169번째 줄: |
169번째 줄: |
| text-emphasis-color: #ec9f19; | | text-emphasis-color: #ec9f19; |
| text-decoration-line: none; | | text-decoration-line: none; |
| }
| |
|
| |
|
| |
|
| |
| @import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
| |
|
| |
| * {
| |
| margin: 0;
| |
| padding: 0;
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| .body {
| |
| text-align: center;
| |
| padding: 100px;
| |
| background: whitesmoke;
| |
| display: table-cell;
| |
| }
| |
|
| |
| .button {
| |
| margin: 20px;
| |
| }
| |
|
| |
| .w-btn {
| |
| position: relative;
| |
| border: none;
| |
| display: inline-block;
| |
| padding: 15px 30px;
| |
| border-radius: 15px;
| |
| font-family: "paybooc-Light", sans-serif;
| |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
| |
| text-decoration: none;
| |
| font-weight: 600;
| |
| transition: 0.25s;
| |
| }
| |
|
| |
| .w-btn-outline {
| |
| position: relative;
| |
| padding: 15px 30px;
| |
| border-radius: 15px;
| |
| font-family: "paybooc-Light", sans-serif;
| |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
| |
| text-decoration: none;
| |
| font-weight: 600;
| |
| transition: 0.25s;
| |
| }
| |
|
| |
| .w-btn-indigo {
| |
| background-color: aliceblue;
| |
| color: #1e6b7b;
| |
| }
| |
|
| |
| .w-btn-indigo-outline {
| |
| border: 3px solid aliceblue;
| |
| color: #1e6b7b;
| |
| }
| |
|
| |
| .w-btn-indigo-outline:hover {
| |
| color: #1e6b7b;
| |
| background: aliceblue;
| |
| }
| |
|
| |
| .w-btn-green {
| |
| background-color: #77af9c;
| |
| color: #d7fff1;
| |
| }
| |
|
| |
| .w-btn-green2 {
| |
| background-color: #519d9e;
| |
| color: #9dc8c8;
| |
| }
| |
|
| |
| .w-btn-green-outline {
| |
| border: 3px solid #77af9c;
| |
| color: darkgray;
| |
| }
| |
|
| |
| .w-btn-green2-outline {
| |
| border: 3px solid #519d9e;
| |
| color: darkgray;
| |
| }
| |
|
| |
| .w-btn-green-outline:hover {
| |
| background-color: #77af9c;
| |
| color: #d7fff1;
| |
| }
| |
|
| |
| .w-btn-green2-outline:hover {
| |
| background-color: #519d9e;
| |
| color: #9dc8c8;
| |
| }
| |
|
| |
| .w-btn-brown {
| |
| background-color: #ce6d39;
| |
| color: #ffeee4;
| |
| }
| |
|
| |
| .w-btn-brown-outline {
| |
| border: 3px solid #ce6d39;
| |
| color: #b8b8b8;
| |
| }
| |
|
| |
| .w-btn-brown-outline:hover {
| |
| background-color: #ce6d39;
| |
| color: #ffeee4;
| |
| }
| |
|
| |
| .w-btn-blue {
| |
| background-color: #6aafe6;
| |
| color: #d4dfe6;
| |
| }
| |
|
| |
| .w-btn-pink {
| |
| background-color: #f199bc;
| |
| color: #d4dfe6;
| |
| }
| |
|
| |
| .w-btn-gray {
| |
| background-color: #a3a1a1;
| |
| color: #e3dede;
| |
| }
| |
|
| |
| .w-btn-red {
| |
| background-color: #ff5f2e;
| |
| color: #e1eef6;
| |
| }
| |
|
| |
| .w-btn-skin {
| |
| background-color: #f8e6e0;
| |
| color: #6e6e6e;
| |
| }
| |
|
| |
| .w-btn-yellow {
| |
| background-color: #fce205;
| |
| color: #6e6e6e;
| |
| }
| |
|
| |
| .w-btn-blue-outline {
| |
| border: 3px solid #6aafe6;
| |
| color: #6e6e6e;
| |
| }
| |
|
| |
| .w-btn-pink-outline {
| |
| border: 3px solid #f199bc;
| |
| color: #6e6e6e;
| |
| }
| |
|
| |
| .w-btn-gray-outline {
| |
| border: 3px solid #a3a1a1;
| |
| color: #6e6e6e;
| |
| }
| |
|
| |
| .w-btn-red-outline {
| |
| border: 3px solid #ff5f2e;
| |
| color: #6e6e6e;
| |
| }
| |
|
| |
| .w-btn-skin-outline {
| |
| border: 3px solid #f8e6e0;
| |
| color: #6e6e6e;
| |
| }
| |
|
| |
| .w-btn-yellow-outline {
| |
| border: 3px solid #fce205;
| |
| color: #6e6e6e;
| |
| }
| |
|
| |
| .w-btn-blue-outline:hover {
| |
| background-color: #6aafe6;
| |
| color: #d4dfe6;
| |
| }
| |
|
| |
| .w-btn-pink-outline:hover {
| |
| background-color: #f199bc;
| |
| color: #d4dfe6;
| |
| }
| |
|
| |
| .w-btn-gray-outline:hover {
| |
| background-color: #a3a1a1;
| |
| color: #e3dede;
| |
| }
| |
|
| |
| .w-btn-red-outline:hover {
| |
| background-color: #ff5f2e;
| |
| color: #e1eef6;
| |
| }
| |
|
| |
| .w-btn-skin-outline:hover {
| |
| background-color: #f8e6e0;
| |
| color: #6e6e6e;
| |
| }
| |
|
| |
| .w-btn-yellow-outline:hover {
| |
| background-color: #fce205;
| |
| color: #6e6e6e;
| |
| }
| |
|
| |
| .w-btn:hover {
| |
| letter-spacing: 2px;
| |
| transform: scale(1.2);
| |
| cursor: pointer;
| |
| }
| |
|
| |
| .w-btn-outline:hover {
| |
| letter-spacing: 2px;
| |
| transform: scale(1.2);
| |
| cursor: pointer;
| |
| }
| |
|
| |
| .w-btn:active {
| |
| transform: scale(1.5);
| |
| }
| |
|
| |
| .w-btn-outline:active {
| |
| transform: scale(1.5);
| |
| }
| |
|
| |
| .w-btn-gra1 {
| |
| background: linear-gradient(-45deg, #33ccff 0%, #ff99cc 100%);
| |
| color: white;
| |
| }
| |
|
| |
| .w-btn-gra2 {
| |
| background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
| |
| color: white;
| |
| }
| |
|
| |
| .w-btn-gra3 {
| |
| background: linear-gradient(
| |
| 45deg,
| |
| #ff0000,
| |
| #ff7300,
| |
| #fffb00,
| |
| #48ff00,
| |
| #00ffd5,
| |
| #002bff,
| |
| #7a00ff,
| |
| #ff00c8,
| |
| #ff0000
| |
| );
| |
| color: white;
| |
| }
| |
|
| |
| .w-btn-gra-anim {
| |
| background-size: 400% 400%;
| |
| animation: gradient1 5s ease infinite;
| |
| }
| |
|
| |
| @keyframes gradient1 {
| |
| 0% {
| |
| background-position: 0% 50%;
| |
| }
| |
| 50% {
| |
| background-position: 100% 50%;
| |
| }
| |
| 100% {
| |
| background-position: 0% 50%;
| |
| }
| |
| }
| |
|
| |
| @keyframes gradient2 {
| |
| 0% {
| |
| background-position: 100% 50%;
| |
| }
| |
| 50% {
| |
| background-position: 0% 50%;
| |
| }
| |
| 100% {
| |
| background-position: 100% 50%;
| |
| }
| |
| }
| |
|
| |
| @keyframes ring {
| |
| 0% {
| |
| width: 30px;
| |
| height: 30px;
| |
| opacity: 1;
| |
| }
| |
| 100% {
| |
| width: 300px;
| |
| height: 300px;
| |
| opacity: 0;
| |
| }
| |
| }
| |
|
| |
| .w-btn-neon2 {
| |
| position: relative;
| |
| border: none;
| |
| min-width: 200px;
| |
| min-height: 50px;
| |
| background: linear-gradient(
| |
| 90deg,
| |
| rgba(129, 230, 217, 1) 0%,
| |
| rgba(79, 209, 197, 1) 100%
| |
| );
| |
| border-radius: 1000px;
| |
| color: darkslategray;
| |
| cursor: pointer;
| |
| box-shadow: 12px 12px 24px rgba(79, 209, 197, 0.64);
| |
| font-weight: 700;
| |
| transition: 0.3s;
| |
| }
| |
|
| |
| .w-btn-neon2:hover {
| |
| transform: scale(1.2);
| |
| }
| |
|
| |
| .w-btn-neon2:hover::after {
| |
| content: "";
| |
| width: 30px;
| |
| height: 30px;
| |
| border-radius: 100%;
| |
| border: 6px solid #00ffcb;
| |
| position: absolute;
| |
| z-index: -1;
| |
| top: 50%;
| |
| left: 50%;
| |
| transform: translate(-50%, -50%);
| |
| animation: ring 1.5s infinite;
| |
| } | | } |
/* 이 CSS 설정은 모든 스킨에 적용됩니다 */
.liberty-content-main:not(.toc .toctitle) {
counter-reset: h2counter;
}
.liberty-content-main h2::before {
counter-increment: h2counter;
content: counter(h2counter) ". ";
color:#ec9f19;
font-weight:bold;
}
.liberty-content-main h2 {
counter-reset: h3counter;
}
.liberty-content-main h3::before {
counter-increment: h3counter;
content: counter(h2counter) "." counter(h3counter) ". ";
color:#ec9f19;
font-weight:bold;
}
.subpages::before {
content: "";
display: block;
background: url("https://sosowiki.net/w/%ED%8C%8C%EC%9D%BC:Icon-up.png") no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 3px 6px 0 0;
}
/* 글자 하이라이트 */
mark {
border-radius: 4px!important;
padding: 2px 5px 2px 5px;
background-color:light-dark(#fcf4ca, #fcf8e3);
}
:root {
color-scheme: light dark;
}
blockquote {
background-color: light-dark(#f9f9f9, #2d2f34);
border-left:10px solid light-dark(#ccc, #666c75);
margin:1.5em 10px;
padding:1.0em 30px 1.0em 28px;
border-radius: 10px;
quotes:"\201C""\201D""\2018""\2019";
text-align: left;
font-style: normal;
font-size: 0.99em;
}
blockquote::before {
font-family:Arial;
content: "\201C";
color: #9eaea9;
font-size: 3.5em;
position: absolute;
left: 5px;
top: 15px;
}
blockquote::after{
content: '';
}
blockquote p:not(:first-child) {
display:inline-block;
line-height: 1.65em;
margin-bottom: 21px;
text-transform: none;
}
blockquote p:first-child,
blockquote p:last-child {
display:inline;
line-height: 1.1em;
text-transform: none;
}
blockquote cite {
padding-top: 20px;
display: block;
font-style: italic;
font-size: 15px;
}
blockquote:hover {
transform: scale(1.03);
transition: all 0.20s ease-in-out;/* 호버 확대 속도 */
}
/* 펼치기 접기 */
.mw-collapsible-toggle-default .mw-collapsible-text {
color: #ec9f19;
}
.mw-collapsible.mw-collapsed {
background-color:light-dark(#fcf8f5, #2d2f34);
border:3px solid light-dark(#ec9f19, black);
border-radius: 10px;
padding: 15px;
}
.mw-collapsible.mw-made-collapsible {
background-color:light-dark(#fcf8f5, #2d2f34);
border:3px solid light-dark(#ec9f19, black);
border-radius: 10px;
padding: 15px;
}
.mw-collapsible-content {
margin-top: 15px;
}
/*표 */
.Liberty .content-wrapper .liberty-content .liberty-content-main table.wikitable tr > th, .Liberty .content-wrapper .liberty-content .liberty-content-main table.wikitable tr > td {
border: 1px solid light-dark(#e1e8ed, #40434a);
}
/* h2 상단 여백 */
.Liberty .content-wrapper .liberty-content .liberty-content-main h2 {
margin-top: 30px;
}
/* 형광펜 */
.highlight-under {
text-decoration: none;
display: inline;
box-shadow: inset 0 -9px 0 light-dark(#f8d374, #9c893e);
}
.highlight-under-orange {
text-decoration: none;
display: inline;
box-shadow: inset 0 -9px 0 light-dark(#ffa374, #9c5d3e);
}
.highlight-under-pink {
text-decoration: none;
display: inline;
box-shadow: inset 0 -9px 0 light-dark(#ff9797, #9c6776);
}
.highlight-under-mint {
text-decoration: none;
display: inline;
box-shadow: inset 0 -9px 0 light-dark(#8ed2cd, #617d6d);
}
.highlight-under-skyblue {
text-decoration: none;
display: inline;
box-shadow: inset 0 -9px 0 light-dark(#82cfed, #5a7596);
}
.highlight-under-gray {
text-decoration: none;
display: inline;
box-shadow: inset 0 -9px 0 light-dark(#c8cfdb, #4b4f57);
}
.highlight-above {
text-emphasis-style: dot;
text-emphasis-color: #ec9f19;
text-decoration-line: none;
}