미디어위키:Gadget-CreatePageUw.css
참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
/* 문서 재배하기 전용 스타일 */
/* 기본 문구 숨김 */
body.mw-special-CreatePage .oo-ui-fieldsetLayout-header,
body.mw-special-CreatePage .oo-ui-fieldLayout-header,
body.mw-special-CreatePage label[for="mw-input-wptitle"] {
display: none !important;
}
/* 입력 양식 전체 배치 */
body.mw-special-CreatePage .mw-body-content .mw-htmlform {
width: 100%;
max-width: 700px;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
}
body.mw-special-CreatePage .mw-htmlform fieldset,
body.mw-special-CreatePage .oo-ui-fieldsetLayout,
body.mw-special-CreatePage .oo-ui-fieldsetLayout-group,
body.mw-special-CreatePage .oo-ui-fieldLayout,
body.mw-special-CreatePage .oo-ui-fieldLayout-body,
body.mw-special-CreatePage .oo-ui-fieldLayout-field,
body.mw-special-CreatePage .oo-ui-inputWidget {
width: 100%;
max-width: 700px;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
}
/* Sprout 이미지 */
body.mw-special-CreatePage .pvz-createpage-sprout {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
margin: 0 0 0.6rem;
box-sizing: border-box;
}
body.mw-special-CreatePage .pvz-createpage-sprout img {
display: block;
width: 96px !important;
max-width: 96px !important;
height: auto !important;
margin: 0 auto;
object-fit: contain;
filter:
drop-shadow(
0 4px 6px
rgba(45, 33, 24, 0.16)
);
}
/* 문서명 입력창 */
body.mw-special-CreatePage #mw-input-wptitle,
body.mw-special-CreatePage
#mw-input-wptitle.oo-ui-inputWidget-input {
display: block;
width: 100% !important;
max-width: 700px;
min-height: 48px;
margin: 0 auto;
padding: 0.75rem 1rem;
border: 2px solid #aa9b88;
border-radius: 18px;
outline: none;
background: #fffdf8;
box-shadow:
inset 0 2px 5px
rgba(74, 55, 37, 0.08);
color: #493b31;
font-family:
"SB Aggro L",
"SB 어그로 L",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Apple SD Gothic Neo",
"Noto Sans KR",
sans-serif;
font-size: 0.98rem;
font-weight: 300;
line-height: 1.45;
box-sizing: border-box;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease,
background-color 0.15s ease;
}
/* 입력창 안내 문구 */
body.mw-special-CreatePage
#mw-input-wptitle::placeholder {
color: rgba(73, 51, 41, 0.42);
font-family:
"SB Aggro L",
"SB 어그로 L",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Apple SD Gothic Neo",
"Noto Sans KR",
sans-serif;
font-weight: 300;
opacity: 1;
}
/* 입력창 마우스 올림 */
body.mw-special-CreatePage
#mw-input-wptitle:hover {
border-color: #829d71;
background: #fffefb;
}
/* 입력창 선택 */
body.mw-special-CreatePage
#mw-input-wptitle:focus,
body.mw-special-CreatePage
#mw-input-wptitle:focus-visible {
border-color: #589644 !important;
outline: none !important;
background: #ffffff;
box-shadow:
0 0 0 3px
rgba(88, 150, 68, 0.2),
inset 0 2px 5px
rgba(74, 55, 37, 0.06) !important;
}
/* 제출 버튼 영역 */
body.mw-special-CreatePage
.mw-htmlform
.oo-ui-buttonInputWidget,
body.mw-special-CreatePage
.mw-htmlform
.oo-ui-buttonWidget,
body.mw-special-CreatePage
.mw-htmlform-submit {
display: block;
width: max-content;
margin: 0.8rem auto 0;
}
/* 일반 제출 버튼 */
body.mw-special-CreatePage
.mw-htmlform
input[type="submit"],
body.mw-special-CreatePage
.mw-htmlform
button[type="submit"] {
display: block;
min-width: 130px;
min-height: 44px;
margin: 0.8rem auto 0;
padding: 0.65rem 1.35rem;
border: 2px solid #3f7737 !important;
border-radius: 999px !important;
outline: none;
background:
linear-gradient(
180deg,
#71b957 0%,
#58a044 100%
) !important;
box-shadow:
inset 0 -3px 0
rgba(39, 91, 34, 0.25),
0 3px 7px
rgba(56, 91, 42, 0.16);
color: #fffdf2 !important;
font-family:
"SB Aggro M",
"SB 어그로 M",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Apple SD Gothic Neo",
"Noto Sans KR",
sans-serif;
font-size: 0.94rem;
font-weight: 500;
line-height: 1.3;
text-shadow:
0 1px 1px
rgba(36, 75, 31, 0.28);
cursor: pointer;
box-sizing: border-box;
transition:
transform 0.12s ease,
filter 0.12s ease,
box-shadow 0.12s ease;
}
/* OOUI 제출 버튼 */
body.mw-special-CreatePage
.oo-ui-buttonElement-framed
> .oo-ui-buttonElement-button,
body.mw-special-CreatePage
.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive
> .oo-ui-buttonElement-button {
min-width: 130px;
min-height: 44px;
padding: 0.65rem 1.35rem;
border: 2px solid #3f7737 !important;
border-radius: 999px !important;
background:
linear-gradient(
180deg,
#71b957 0%,
#58a044 100%
) !important;
box-shadow:
inset 0 -3px 0
rgba(39, 91, 34, 0.25),
0 3px 7px
rgba(56, 91, 42, 0.16);
color: #fffdf2 !important;
font-family:
"SB Aggro M",
"SB 어그로 M",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Apple SD Gothic Neo",
"Noto Sans KR",
sans-serif;
font-size: 0.94rem;
font-weight: 500;
line-height: 1.3;
text-shadow:
0 1px 1px
rgba(36, 75, 31, 0.28);
cursor: pointer;
box-sizing: border-box;
transition:
transform 0.12s ease,
filter 0.12s ease,
box-shadow 0.12s ease;
}
/* 제출 버튼 마우스 올림 */
body.mw-special-CreatePage
.mw-htmlform
input[type="submit"]:hover,
body.mw-special-CreatePage
.mw-htmlform
button[type="submit"]:hover,
body.mw-special-CreatePage
.oo-ui-buttonElement-button:hover {
filter: brightness(1.06);
transform: translateY(-1px);
}
/* 제출 버튼 클릭 */
body.mw-special-CreatePage
.mw-htmlform
input[type="submit"]:active,
body.mw-special-CreatePage
.mw-htmlform
button[type="submit"]:active,
body.mw-special-CreatePage
.oo-ui-buttonElement-button:active {
filter: brightness(0.98);
transform: translateY(1px);
box-shadow:
inset 0 2px 3px
rgba(39, 91, 34, 0.25);
}
/* 제출 버튼 키보드 선택 */
body.mw-special-CreatePage
.mw-htmlform
input[type="submit"]:focus-visible,
body.mw-special-CreatePage
.mw-htmlform
button[type="submit"]:focus-visible,
body.mw-special-CreatePage
.oo-ui-buttonElement-button:focus-visible {
outline: none !important;
box-shadow:
0 0 0 3px
rgba(88, 150, 68, 0.23),
inset 0 -3px 0
rgba(39, 91, 34, 0.25) !important;
}
/* 모바일 */
@media (max-width: 600px) {
body.mw-special-CreatePage
.mw-body-content
.mw-htmlform {
max-width: 100%;
}
body.mw-special-CreatePage
.pvz-createpage-sprout img {
width: 78px !important;
max-width: 78px !important;
}
body.mw-special-CreatePage
#mw-input-wptitle {
min-height: 46px;
border-radius: 16px;
font-size: 0.93rem;
}
body.mw-special-CreatePage
.mw-htmlform
input[type="submit"],
body.mw-special-CreatePage
.mw-htmlform
button[type="submit"],
body.mw-special-CreatePage
.oo-ui-buttonElement-framed
> .oo-ui-buttonElement-button {
min-width: 120px;
min-height: 42px;
}
}