미디어위키:Liberty.css: 두 판 사이의 차이

편집 요약 없음
태그: 되돌려진 기여
편집 요약 없음
태그: 되돌려진 기여
9번째 줄: 9번째 줄:
/* 검색창 스타일 */
/* 검색창 스타일 */
.skin-liberty .search-container input[type="search"] {
.skin-liberty .search-container input[type="search"] {
border-radius: 25px; /* 둥근 모서리 */
border-radius: 100px; /* 둥근 모서리 */
     padding: 10px 15px; /* 내부 여백 */
     padding: 10px 15px; /* 내부 여백 */
     width: 100%; /* 부모 컨테이너 너비를 기준으로 채움 */
     width: 100%; /* 부모 컨테이너 너비를 기준으로 채움 */

2024년 11월 30일 (토) 17:17 판

/* 이 CSS 설정은 리버티 스킨을 사용하는 사용자에게 적용됩니다 */
.mw-headline-number { color: #0275d8; }
.mw-headline-number::after { content: "."; }
/* 분류칸 그림자 제거 */
.skin-liberty .catlinks {
    box-shadow: none !important; /* 그림자 제거 */
    border: 1px solid #ddd; /* 필요 시 테두리 스타일을 정의 */
}
/* 검색창 스타일 */
.skin-liberty .search-container input[type="search"] {
	border-radius: 100px; /* 둥근 모서리 */
    padding: 10px 15px; /* 내부 여백 */
    width: 100%; /* 부모 컨테이너 너비를 기준으로 채움 */
    max-width: 600px; /* 최대 너비 제한 */
    min-width: 200px; /* 최소 너비 제한 */
    border: 1px solid #ccc; /* 테두리 색상 */
    outline: none; /* 포커스 시 기본 테두리 제거 */
    transition: all 0.3s ease; /* 애니메이션 추가 */
    box-sizing: border-box; /* 테두리와 패딩 포함 */
}

/* 작은 화면 (태블릿 크기) */
@media (max-width: 768px) {
    .skin-liberty .search-container input[type="search"] {
        max-width: 400px; /* 최대 너비 축소 */
    }
}

/* 아주 작은 화면 (모바일) */
@media (max-width: 480px) {
    .skin-liberty .search-container input[type="search"] {
        max-width: 300px; /* 최대 너비 더 축소 */
        min-width: 150px; /* 최소 너비 조정 */
        padding: 8px 12px; /* 패딩 축소 */
    }
}