편집토론문서 역사

틀:와르샤와/styles.css: 두 판 사이의 차이

< 틀:와르샤와
편집 요약 없음
편집 요약 없음
태그: 수동 되돌리기
 
(같은 사용자의 중간 판 185개는 보이지 않습니다)
1번째 줄: 1번째 줄:
/* 변시 인트로 */
/* 배경 크기 */
.AOCImage {
.AOCBACKGROUND {
    animation: AOCImage;
word-break: break-all;
    animation-iteration-count: 1;
background: #FFFFFF;  
    animation-duration: 3s;
color: #575757;
    animation-fill-mode: forwards;
padding: 12px 18px 12px 18px;  
    animation-timing-function: ease;
border-radius: 10px;
    background-image:linear-gradient(to right, white 0%, transparent 0%);
max-width: 1003px;
width: 1003px;
margin-left: -15px;
}
}


.AOC-LDtext {
@media screen and (max-width: 768px) {
  animation: AOC-LDtext;
.AOCBACKGROUND {
  animation-iteration-count: 2;
word-break: break-all;  
  animation-duration: 3s;
background: #FFFFFF;
  animation-fill-mode: forwards;
color: #575757;
  animation-timing-function: ease;
padding: 12px 15px 12px 15px;
 
border-radius: 10px;
max-width: 768px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
}
}


@keyframes AOC-LDtext {
/* 글씨 (일반) */
  0% {color: #252525}
.AOCTEMPLATE p {
  50% {color: #CFA547}
    font-family: "SUITE Variable";
  100% {color: #252525}
  margin-bottom: 0.6rem;
line-height: 25px;
    letter-spacing: -0.4px;
    font-size: 15px;
    font-weight: 500;
}
}


.AOC-LDtext2 {
.AOCTEMPLATE b {
animation: AOC-LDtext2;
    font-family: "SUITE Variable";
animation-iteration-count: 1;
    font-weight: 800;
animation-duration: 1s;
animation-fill-mode: forwards;
transition: .2s ease;
transform: translateY(0px);
opacity: 1;
}
}


@keyframes AOC-LDtext2 {
/* 글씨 (하이퍼링크) */
  from {opacity: 0; transform: translateY(20px);}
.AOCTEMPLATE a {
  to {opacity: 1; transform: translateY(0px);}
color: #5B9BC7;
transition: all 0.3s;
}
.AOCTEMPLATE a:hover {
color: #252525;
}
.AOCTEMPLATE a:active {
color: #252525;
}
.AOCTEMPLATE a.new {
transition: all 0.3s;
color: #5B9BC7;
}
.AOCTEMPLATE a.new:hover {
color: #252525;
}
.AOCTEMPLATE a.new:active {
color: #252525;
}
.AOCTEMPLATE a.external {
transition: all 0.3s;
color: #5B9BC7;
}
.AOCTEMPLATE a.external:hover {
    color: #252525;
    font-weight: 700;
}
.AOCTEMPLATE a.external:active {
color: #252525;
}
}


.AOC-LDP {
/* 글씨 (기타) */
display:inherit;
.AOCTEMPLATE li {
z-index:6;
    font-family: "SUITE Variable";
animation: AOC-LDP;
    font-weight: 500;
animation-delay: 6s;
    font-size: 14.4px;
animation-iteration-count: 1;
animation-duration: 0.4s;
animation-fill-mode: forwards;
animation-timing-function: ease;
overflow:hidden;
height:100vh;
opacity:1;
}
}


@keyframes AOC-LDP {
/* 목록 개행 */
  from {height:100vh;opacity:1; z-index:5;display:inherit;}
.AOCTEMPLATE dd {
  to {height:0px;opacity:0; z-index:-1;display:none;}
    font-family: "SUITE Variable";
}
}


.AOC-bg  {
/* 테이블 글씨 */
  position: relative;
.AOCTEMPLATE td {
  width: 100%;
    font-family: "Pretendard", "Pretendard JP Variable"
  height: 100vh;
}
  background: #00B88D;
.AOCTEMPLATE td b {
  display: flex;
    font-family: "Pretendard", "Pretendard JP Variable"
  justify-content: center;
}
  align-items: center;
.AOCTEMPLATE th {
  font-size: 24px;
    font-family: "Pretendard", "Pretendard JP Variable"
  overflow: hidden;
}
  z-index:-3;
.AOCTEMPLATE td a {
  animation: AOC-bg;
font-family: "Pretendard", "Pretendard JP Variable";
  animation-iteration-count: 2;
color: #191919;
  animation-duration: 3s;
}
  animation-fill-mode: forwards;
.AOCTEMPLATE td a:hover {
  animation-timing-function: ease;
color: #191919;
}
.AOCTEMPLATE td a:active {
color: #191919;
}
.AOCTEMPLATE td a.new {
color: #191919;
}
}
 
.AOCTEMPLATE td a.new:hover {
@keyframes AOC-bg {
color: #191919;
  0% {background: #00CC9C}
  50% {background: #580009}
  100% {background: #00CC9C}
}
}
 
.AOCTEMPLATE td a.new:active {
.loading {
color: #191919;
    display: flex;
    justify-content: center;
}
}
 
.AOCTEMPLATE td a.external {
.loading::after {
color: #191919;
    content: "";
    width: 400px;
    height: 400px;
    border: 30px solid transparent;
    border-top-color: white;
    border-radius: 50%;
    animation: loading .800s linear 0s infinite normal;
    opacity: 0.6;
}
}
 
.AOCTEMPLATE td a.external:hover {
@keyframes loading {
     color: #191919;
     to {
        transform: rotate(360deg);
    }
}
}
 
.AOCTEMPLATE td a.external:active {
@media screen and (min-width: 768px) {
color: #191919;
.AOC-WebDisplay {
    display:inherit;
}
.loading-mobile {
display:none;
}
.AOC-MobileDisplay {
    display:none;
}
}
}
 
.AOCTEMPLATE td p {
@media screen and (max-width: 768px) {
font-family: "Pretendard", "Pretendard JP Variable";
.AOC-WebDisplay {
color: #191919;
    display:none;
}
.AOC-MobileDisplay {
    display:inherit;
    width: 100%;
}
.loading-mobile {
    display:flex;
    justify-content: center;
    }
 
.loading-mobile::after {
    content: "";
    width: 300px;
    height: 300px;
    border: 30px solid transparent;
    border-top-color: white;
    border-radius: 50%;
    animation: loading .800s linear 0s infinite normal;
    opacity: 0.6;
    }
}
}


/* 대문 리뉴얼 */
/* 문단 (틀로 반영할 예정) */
.AOC-Wrote {
.AOCPARAGRAPH .number-link {
opacity: 0;
    color: #0C2B80;
animation: AOC-Wrote;
    cursor: pointer;
animation-iteration-count: 1;
    text-decoration: none;
animation-duration: 1.5s;
    margin-right: 0.3rem;
animation-delay: 6.5s;
    font-family: "SUITE Variable";
animation-fill-mode: forwards;
    font-weight: 800;
transition: .2s ease;
    user-select: none;
}
}


@keyframes AOC-Wrote {
.AOCPARAGRAPH .mw-headline {
  from {opacity: 0;}
    color: #575757;
  to {opacity: 1;}
    font-family: "SUITE Variable";
}
    font-weight: 600;
 
    user-select: none;
.AOC-ani {
opacity: 0;
animation: AOC-ani;
animation-iteration-count: 1;
animation-duration: 1.5s;
animation-delay: 6.5s;
animation-fill-mode: forwards;
transition: .2s ease;
transform: translateX(0%);
}
}


@keyframes AOC-ani {
.AOCPARAGRAPH .mw-editsection a {
  from {opacity: 0; transform: translateX(-2%);}
font-family: "SUITE Variable";
  to {opacity: 1; transform: translateX(0%);}
    white-space: nowrap;
    color: #5B9BC7;
    font-weight: 700;
    user-select: none;
}
}


.AOC-ani2 {
/* 공사중 (틀로 반영할 예정) */
opacity: 0;
.UNDERCONSTRUCTION {
animation: AOC-ani2;
    border: 1px solid #252525;
animation-iteration-count: 1;
    border-radius: 25px;
animation-duration: 1.5s;
    width: 100%;
animation-delay: 6.5s;
    padding: 10px;
animation-fill-mode: forwards;
    margin-top: 5px;
transition: .2s ease;
    margin-bottom: 20px;
transform: translateX(0%);
    letter-spacing: -0.3px;
    font-size: 14pt;
    background: white;
    color: #252525;
    text-align: center;
    user-select: none;
    font-family: SUITE Variable;
    font-weight: 800;
}
}


@keyframes AOC-ani2 {
/* 관련 기사 (틀로 반영할 예정) */
  from {opacity: 0; transform: translateX(2%);}
.NEWS .link {
  to {opacity: 1; transform: translateX(0%);}
padding-top: 3px;
    padding-left: 5px;
    margin-bottom: 10px;
    line-height: 23px;
    user-select: none;
    font-family: "SUITE Variable";
    font-weight: 700;
}
}


.AOC-ani3 {
.NEWS .mw-parser-output .text {
opacity: 0;
background: none;
animation: AOC-ani3;
animation-iteration-count: 1;
animation-duration: 1.5s;
animation-delay: 6.5s;
animation-fill-mode: forwards;
transition: .2s ease;
transform: translateY(0%);
}
}
 
.NEWS .mw-parser-output a.external.text {
@keyframes AOC-ani3 {
font-size: 12pt;
  from {opacity: 0; transform: translateY(10%);}
font-family: "SUITE Variable";
  to {opacity: 1; transform: translateY(0%);}
}
}
 
.NEWS .mw-parser-output a.external.text:hover {
.AOC-select {
font-size: 12pt;
transition: .2s ease;
background: #580009;
color: #CFA547;
}
}
 
.NEWS .mw-parser-output a.external.text:active {
@keyframes AOC-select {
font-size: 12pt;
  from {background: #580009; color: #CFA547;}
  to {background: #00CC9C; color: #252525;}
}
}
/* 대문 리뉴얼 (모바일 대응) */
@media screen and (max-width: 768px) {
.AOC-Wrote {
font-size: 10.5pt;
}
  .AOC-ani {
font-size: 10pt;
}
  .AOC-ani2 {
font-size: 10pt;
}
}

2024년 5월 1일 (수) 18:00 기준 최신판

/* 배경 크기 */
.AOCBACKGROUND {
word-break: break-all; 
background: #FFFFFF; 
color: #575757; 
padding: 12px 18px 12px 18px; 
border-radius: 10px;
max-width: 1003px;
width: 1003px;
margin-left: -15px;
}

@media screen and (max-width: 768px) {
.AOCBACKGROUND {
 word-break: break-all; 
 background: #FFFFFF;
 color: #575757; 
 padding: 12px 15px 12px 15px; 
 border-radius: 10px;
 max-width: 768px;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
}
}

/* 글씨 (일반) */
.AOCTEMPLATE p {
    font-family: "SUITE Variable";
   	margin-bottom: 0.6rem;
	line-height: 25px;
    letter-spacing: -0.4px;
    font-size: 15px;
    font-weight: 500;
}

.AOCTEMPLATE b {
    font-family: "SUITE Variable";
    font-weight: 800;
}

/* 글씨 (하이퍼링크) */
.AOCTEMPLATE a {
	color: #5B9BC7;
	transition: all 0.3s;
}
.AOCTEMPLATE a:hover {
	color: #252525;
}
.AOCTEMPLATE a:active {
	color: #252525;
}
.AOCTEMPLATE a.new {
	transition: all 0.3s;
	color: #5B9BC7;
}
.AOCTEMPLATE a.new:hover {
	color: #252525;
}
.AOCTEMPLATE a.new:active {
	color: #252525;
}
.AOCTEMPLATE a.external {
	transition: all 0.3s;
	color: #5B9BC7;
}
.AOCTEMPLATE a.external:hover {
    color: #252525;
    font-weight: 700;
}
.AOCTEMPLATE a.external:active {
	color: #252525;
}

/* 글씨 (기타) */
.AOCTEMPLATE li {
    font-family: "SUITE Variable";
    font-weight: 500;
    font-size: 14.4px;
}

/* 목록 개행 */
.AOCTEMPLATE dd {
    font-family: "SUITE Variable";
}

/* 테이블 글씨 */
.AOCTEMPLATE td {
    font-family: "Pretendard", "Pretendard JP Variable"
}
.AOCTEMPLATE td b {
    font-family: "Pretendard", "Pretendard JP Variable"
}
.AOCTEMPLATE th {
    font-family: "Pretendard", "Pretendard JP Variable"
}
.AOCTEMPLATE td a {
	font-family: "Pretendard", "Pretendard JP Variable";
	color: #191919;
}
.AOCTEMPLATE td a:hover {
	color: #191919;
}
.AOCTEMPLATE td a:active {
	color: #191919;
}
.AOCTEMPLATE td a.new {
	color: #191919;
}
.AOCTEMPLATE td a.new:hover {
	color: #191919;
}
.AOCTEMPLATE td a.new:active {
	color: #191919;
}
.AOCTEMPLATE td a.external {
	color: #191919;
}
.AOCTEMPLATE td a.external:hover {
    color: #191919;
}
.AOCTEMPLATE td a.external:active {
	color: #191919;
}
.AOCTEMPLATE td p {
	font-family: "Pretendard", "Pretendard JP Variable";
	color: #191919;
}

/* 문단 (틀로 반영할 예정) */
.AOCPARAGRAPH .number-link {
    color: #0C2B80;
    cursor: pointer;
    text-decoration: none;
    margin-right: 0.3rem;
    font-family: "SUITE Variable";
    font-weight: 800;
    user-select: none;
}

.AOCPARAGRAPH .mw-headline {
    color: #575757;
    font-family: "SUITE Variable";
    font-weight: 600;
    user-select: none;
}

.AOCPARAGRAPH .mw-editsection a {
	font-family: "SUITE Variable";
    white-space: nowrap;
    color: #5B9BC7;
    font-weight: 700;
    user-select: none;
}

/* 공사중 (틀로 반영할 예정) */
.UNDERCONSTRUCTION {
    border: 1px solid #252525;
    border-radius: 25px;
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 20px;
    letter-spacing: -0.3px;
    font-size: 14pt;
    background: white;
    color: #252525;
    text-align: center;
    user-select: none;
    font-family: SUITE Variable;
    font-weight: 800;
}

/* 관련 기사 (틀로 반영할 예정) */
.NEWS .link {
	padding-top: 3px;
    padding-left: 5px;
    margin-bottom: 10px;
    line-height: 23px;
    user-select: none;
    font-family: "SUITE Variable";
    font-weight: 700;
}

.NEWS .mw-parser-output .text {
	background: none;
}
.NEWS .mw-parser-output a.external.text {
	font-size: 12pt;
	font-family: "SUITE Variable";
}
.NEWS .mw-parser-output a.external.text:hover {
	font-size: 12pt;
}
.NEWS .mw-parser-output a.external.text:active {
	font-size: 12pt;
}