편집 요약 없음 |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
/* 모바일에서 */ | /* 모바일에서 */ | ||
@media screen and (max-width: 768px) { | @media screen and (max-width: 768px) { | ||
.namucat-main-box { | /* 모바일 분류 박스 */ | ||
.namucat-main-box { | |||
margin-bottom: .6rem; | margin-bottom: .6rem; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
| 7번째 줄: | 8번째 줄: | ||
padding: 3px 3px 3px 5px; | padding: 3px 3px 3px 5px; | ||
} | } | ||
.namucat-no-box { | /* 모바일 미분류 박스 */ | ||
.namucat-no-box { | |||
margin-bottom: .6rem; | margin-bottom: .6rem; | ||
border: 1px solid #bcdff1; | border: 1px solid #bcdff1; | ||
| 15번째 줄: | 17번째 줄: | ||
color: #31708f; | color: #31708f; | ||
} | } | ||
/* 링크 클릭 시 파란 박스 */ | |||
a:active { | |||
animation-name: btn-background; | animation-name: btn-background; | ||
animation-duration: .5s; | animation-duration: .5s; | ||
| 22번째 줄: | 25번째 줄: | ||
animation-fill-mode: forwards; | animation-fill-mode: forwards; | ||
} | } | ||
/* 순환 링크 애니메이션 제외 */ | |||
a.selflink:active { | a.selflink:active { | ||
animation: none; | animation: none; | ||
| 38번째 줄: | 42번째 줄: | ||
/* PC에서 */ | /* PC에서 */ | ||
@media screen and (min-width: 768px) { | @media screen and (min-width: 768px) { | ||
.namucat-main-box { | /* PC 분류 박스 */ | ||
.namucat-main-box { | |||
margin-bottom: 1rem; | margin-bottom: 1rem; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
| 44번째 줄: | 49번째 줄: | ||
padding: 3px 3px 3px 5px; | padding: 3px 3px 3px 5px; | ||
} | } | ||
.namucat-no-box { | /* PC 미분류 박스 */ | ||
.namucat-no-box { | |||
margin-bottom: 1rem; | margin-bottom: 1rem; | ||
border: 1px solid #bcdff1; | border: 1px solid #bcdff1; | ||
2023년 7월 5일 (수) 14:22 판
/* 모바일에서 */
@media screen and (max-width: 768px) {
/* 모바일 분류 박스 */
.namucat-main-box {
margin-bottom: .6rem;
border: 1px solid #ccc;
border-radius: 4px;
padding: 3px 3px 3px 5px;
}
/* 모바일 미분류 박스 */
.namucat-no-box {
margin-bottom: .6rem;
border: 1px solid #bcdff1;
padding: 10px;
background: #d9edf7;
border-radius: 5px;
color: #31708f;
}
/* 링크 클릭 시 파란 박스 */
a:active {
animation-name: btn-background;
animation-duration: .5s;
animation-iteration-count: 1;
animation-timing-function: steps(1, end);
animation-fill-mode: forwards;
}
/* 순환 링크 애니메이션 제외 */
a.selflink:active {
animation: none;
}
}
/* 파란 박스가 0.5초 뒤 사라지는 애니메이션 */
@keyframes btn-background {
from {
background: blue;
background: rgba(0, 0, 255, .1);
}
to {
background: none;
}
}
/* PC에서 */
@media screen and (min-width: 768px) {
/* PC 분류 박스 */
.namucat-main-box {
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
padding: 3px 3px 3px 5px;
}
/* PC 미분류 박스 */
.namucat-no-box {
margin-bottom: 1rem;
border: 1px solid #bcdff1;
padding: 10px;
background: #d9edf7;
border-radius: 5px;
color: #31708f;
}
}
/* 분류 블러 */
.namucat-blur {
filter: blur(3px);
}
.namucat-blur:hover {
filter: none;
}
/* 분류 간 구분선 */
.namucat-stick:after {
content: '|';
padding: 0 5px;
user-select: none;
}
/* 링크 색 변화 없애기 */
a:hover {
color: #337ab7;
}
a:active {
color: #337ab7;
}
a.new:hover {
color: #ba0000;
}
a.new:active {
color: #ba0000;
}
a.external:hover {
color: #33b733;
}
a.external:active {
color: #33b733;
}
.plainlinks:hover a.external {
color: #337ab7;
}
.plainlinks:active a.external {
color: #337ab7;
}
a.selflink {
color: inherit;
}
a.selflink:hover {
color: inherit;
}
a.selflink:active {
color: inherit;
}