미디어위키:Gadget-CreatePageUw.css: 두 판 사이의 차이
식물 vs 좀비 위키
편집 요약 없음 |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
/* 문서 재배하기 전용 스타일 */ | /* 문서 재배하기 전용 스타일 */ | ||
/* 기본 문구 숨김 */ | |||
body.mw-special-CreatePage .oo-ui-fieldsetLayout-header, | body.mw-special-CreatePage .oo-ui-fieldsetLayout-header, | ||
body.mw-special-CreatePage .oo-ui-fieldLayout-header, | body.mw-special-CreatePage .oo-ui-fieldLayout-header, | ||
| 7번째 줄: | 9번째 줄: | ||
} | } | ||
/* 입력 양식 전체 배치 */ | |||
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 { | body.mw-special-CreatePage .pvz-createpage-sprout { | ||
display: flex; | display: flex; | ||
| 30번째 줄: | 58번째 줄: | ||
} | } | ||
body.mw-special-CreatePage #mw-input-wptitle { | |||
width: 100%; | /* 문서명 입력창 */ | ||
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; | box-sizing: border-box; | ||
transition: | |||
border-color 0.15s ease, | |||
box-shadow 0.15s ease, | |||
background-color 0.15s ease; | |||
} | } | ||
/* 입력창 안내 문구 */ | |||
body.mw-special-CreatePage | body.mw-special-CreatePage | ||
#mw-input-wptitle::placeholder { | #mw-input-wptitle::placeholder { | ||
color: rgba(73, 51, 41, 0. | 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; | 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) { | @media (max-width: 600px) { | ||
body.mw-special-CreatePage .pvz-createpage-sprout img { | body.mw-special-CreatePage | ||
.mw-body-content | |||
.mw-htmlform { | |||
max-width: 100%; | |||
} | |||
body.mw-special-CreatePage | |||
.pvz-createpage-sprout img { | |||
width: 78px !important; | width: 78px !important; | ||
max-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; | |||
} | } | ||
} | } | ||
