편집토론문서 역사

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

< 틀:와르샤와
편집 요약 없음
편집 요약 없음
태그: 수동 되돌리기
 
(같은 사용자의 중간 판 289개는 보이지 않습니다)
1번째 줄: 1번째 줄:
/* 테스트에요 여러분 테스트 */
/* 배경 크기 */
.ageofchange {
.AOCBACKGROUND {
  margin-top: 10px;
word-break: break-all;  
  line-height: 80px;
background: #FFFFFF;  
  width: 100%;
color: #575757;  
  animation-name: ageofchange;
padding: 12px 18px 12px 18px;  
  font-size: 24pt;
border-radius: 10px;
  background-color:#580009;  
max-width: 1003px;
  color:#CFA547;
width: 1003px;
  font-family: KoPubDotumMedium;
margin-left: -15px;
  font-weight: bold;
  text-align: center;
  animation-duration: 4s;
  animation-iteration-count: 1;
}
@keyframes ageofchange {
  0%  {background-color:#580009; color:#CFA547; left:20px; top:10px;}
  50%  {background-color:#00F1BA; color:#252525; left:20px; top:10px;}
  100% {background-color:#580009; color:#CFA547; left:20px; top:10px;}
}
}


/* 테스트에요 여러분 테스트 2 */
@media screen and (max-width: 768px) {
.animation6 {
.AOCBACKGROUND {
  margin-top: 10px;
word-break: break-all;
  height: 100px;
background: #FFFFFF;
  width: 100%;
color: #575757;  
  border: 1px solid #000000;
padding: 12px 15px 12px 15px;  
  overflow: visible;
border-radius: 10px;
  font-size: 24pt;
max-width: 768px;
  text-align: center;
width: 100%;
margin-left: auto;
margin-right: auto;
}
}
.text-animation {
  overflow: hidden;
  padding-top: 15px;
  text-align: center;
  font-size: 20pt;
  letter-spacing: -0.5px;
  animation: text-animation 1s ease;
  animation-iteration-count: 1;
  transform: translateY(calc(100% - 50%));
}
}
@keyframes text-animation {
  from    {
opacity: 0;
transform: translateY(100%);
}


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


/* 테스트에요 여러분 테스트 3 */
.AOCTEMPLATE b {
.header {
    font-family: "SUITE Variable";
  display: inline-block;
    font-weight: 800;
  overflow: hidden;
  margin: 10px 10px 10px;
  margin-right: -10px;
  width: 180px;
  height: 300px;
  border-radius: 15px;
  transform: scale(0.85);
  transition: .2s ease-out;
}
}


.header:hover{
/* 글씨 (하이퍼링크) */
  transition: .2s ease-in;
.AOCTEMPLATE a {
  transform: scale(0.9);  
color: #5B9BC7;
  z-index:3;
transition: all 0.3s;
  }
}
 
.AOCTEMPLATE a:hover {
.header img {
color: #252525;
  position: relative;
}
  background-position: top;
.AOCTEMPLATE a:active {
  background-size: cover;
color: #252525;
  background-repeat: no-repeat;
}
  height: 100%;
.AOCTEMPLATE a.new {
  overflow: visible;
transition: all 0.3s;
  }
color: #5B9BC7;
 
}
/* 테스트에요 여러분 테스트 4 */
.AOCTEMPLATE a.new:hover {
.progress-bar-body {
color: #252525;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 20px;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;  
}
}
 
.AOCTEMPLATE a.new:active {
.progress-bar {
color: #252525;
  width: 100%;
  height: 30px;
  background: #dedede;
  font-weight: 600;
  font-size: .8rem;
}
}
 
.AOCTEMPLATE a.external {
.progress-bar .progress1 {
transition: all 0.3s;
    width: 75%;
color: #5B9BC7;
    height: 30px;
    padding: 0;
    text-align: center;
    background: #880E4F;
    animation: progress 1s ease-in-out 1;
}
}
 
.AOCTEMPLATE a.external:hover {
@keyframes progress {
    color: #252525;
from {
    font-weight: 700;
margin-left: -100%;
}
}
to  {
.AOCTEMPLATE a.external:active {
margin-left: 0%;
color: #252525;
}
}
/* 글씨 (기타) */
.AOCTEMPLATE li {
    font-family: "SUITE Variable";
    font-weight: 500;
    font-size: 14.4px;
}
}


.progress-bar .progress2 {
/* 목록 개행 */
     width: 30%;
.AOCTEMPLATE dd {
    height: 30px;
     font-family: "SUITE Variable";
    padding: 0;
    text-align: center;
    background: #880E4F;
    animation: progress2 1s ease-in-out 1;
}
}


@keyframes progress2 {
/* 테이블 글씨 */
from {
.AOCTEMPLATE td {
margin-left: -100%;
    font-family: "Pretendard", "Pretendard JP Variable"
}
}
to  {
.AOCTEMPLATE td b {
margin-left: 0%;
    font-family: "Pretendard", "Pretendard JP Variable"
}
}
.AOCTEMPLATE th {
    font-family: "Pretendard", "Pretendard JP Variable"
}
}
 
.AOCTEMPLATE td a {
/* WSP */
font-family: "Pretendard", "Pretendard JP Variable";
@media screen and (min-width: 768px) {
.wsp-name {
border: 2px solid #EF426F;
margin-left: auto; margin-right: auto;
margin-top: 10px;
    line-height: 100px;
text-align: center;
font-size: 24pt;
color: #191919;
color: #191919;
width: 100%;
font-family: Noto Serif KR;
letter-spacing: -0.05em;
}
}
.AOCTEMPLATE td a:hover {
color: #191919;
}
}
 
.AOCTEMPLATE td a:active {
@media screen and (max-width: 768px) {
.wsp-name {
border: 2px solid #EF426F;
    margin-left: auto; margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
    line-height: 80px;
text-align: center;
font-size: 20pt;
color: #191919;
color: #191919;
max-width: 768px;
width: 100%;
font-family: Noto Serif KR;
letter-spacing: -0.05em;
}
}
.AOCTEMPLATE td a.new {
color: #191919;
}
}
 
.AOCTEMPLATE td a.new:hover {
/* ASU 에딧 */
color: #191919;
.ACLoadingImage {
    animation: ACLoadingImage;
    animation-iteration-count: 1;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    background-image:linear-gradient(to right, white 0.5%, transparent 0.5%);
}
}
  @keyframes ACLoadingImage {
.AOCTEMPLATE td a.new:active {
  0% {background-image:linear-gradient(to right, white 0.5%, transparent 0.5%);}
color: #191919;
  10% {background-image:linear-gradient(to right, white 1%, transparent 1%);}
  20% {background-image:linear-gradient(to right, white 2%, transparent 2%);}
  30% {background-image:linear-gradient(to right, white 25%, transparent 25%);}
  40% {background-image:linear-gradient(to right, white 55%, transparent 55%);}
  50% {background-image:linear-gradient(to right, white 60%, transparent 60%);}
  60% {background-image:linear-gradient(to right, white 77%, transparent 77%);}
  70% {background-image:linear-gradient(to right, white 97%, transparent 97%);}
  80% {background-image:linear-gradient(to right, white 98%, transparent 98%);}
  90% {background-image:linear-gradient(to right, white 99%, transparent 99%);}
  100% {background-image:linear-gradient(to right, white 100%, transparent 100%);}
}
}
 
.AOCTEMPLATE td a.external {
.ACLo-z5  {
color: #191919;
z-index:5;
}
}
 
.AOCTEMPLATE td a.external:hover {
.ACLo-z6  {
    color: #191919;
z-index:6;
}
}
 
.AOCTEMPLATE td a.external:active {
.ACLoading-LDtext1 {
color: #191919;
animation: ACLoading-LDtext1;
animation-iteration-count: 2;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-timing-function: ease;
opacity:1;
}
}
 
.AOCTEMPLATE td p {
@keyframes ACLoading-LDtext1 {
font-family: "Pretendard", "Pretendard JP Variable";
  from {opacity:1;}
color: #191919;
  50% {opacity:0;}
  to {opacity:1;}
}
}


.ACLoading-LDimg1 {
/* 문단 (틀로 반영할 예정) */
animation: ACLoading-LDimg1;
.AOCPARAGRAPH .number-link {
animation-iteration-count: infinite;
    color: #0C2B80;
animation-duration: 3s;
    cursor: pointer;
animation-fill-mode: forwards;
    text-decoration: none;
animation-timing-function: ease;
    margin-right: 0.3rem;
filter: brightness(0.9) grayscale(100%);
    font-family: "SUITE Variable";
opacity: 0.8;
    font-weight: 800;
    user-select: none;
}
}


.ACLoading-LDP {
.AOCPARAGRAPH .mw-headline {
display:inherit;
    color: #575757;
z-index:6;
    font-family: "SUITE Variable";
animation: ACLoading-LDP;
    font-weight: 600;
animation-delay: 3s;
    user-select: none;
animation-iteration-count: 1;
animation-duration: 0.4s;
animation-fill-mode: forwards;
animation-timing-function: ease;
overflow:hidden;
height:100vh;
opacity:1;
}
}


@keyframes ACLoading-LDP {
.AOCPARAGRAPH .mw-editsection a {
  from {height:100vh;opacity:1; z-index:5;display:inherit;}
font-family: "SUITE Variable";
  to {height:0px;opacity:0; z-index:-1;display:none;}
    white-space: nowrap;
    color: #5B9BC7;
    font-weight: 700;
    user-select: none;
}
}


.ACLoading-bgnoise  {
/* 공사중 (틀로 반영할 예정) */
animation: ACLoading-bgnoise;
.UNDERCONSTRUCTION {
animation-iteration-count: infinite;
    border: 1px solid #252525;
animation-duration: 1s;
    border-radius: 25px;
animation-timing-function: ease;
    width: 100%;
animation-fill-mode: backwards;
    padding: 10px;
}
    margin-top: 5px;
@keyframes ACLoading-bgnoise {
    margin-bottom: 20px;
  0% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.2) 8%, rgba(0, 5, 5, 0.3) 11%, rgba(5, 20, 55, 0.2) 13%, rgba(55, 55, 55, 0.2) 20%, rgba(55, 55, 55, 0.2) 60%,  rgba(55, 55, 55, 0.3) 70%, rgba(20, 20, 20, 0.3) 72%, rgba(20, 20, 20, 0.3) 73%, rgba(55, 55, 55, 0.3) 75%, rgba(55, 55, 55, 0.2) 85%, rgba(10, 10, 10, 0.2) 88%, rgba(10, 10, 10, 0.2) 95%, rgba(55, 55, 55, 0.2) 95%);}
    letter-spacing: -0.3px;
  15% {background:#363636; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 10px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 5%, rgba(0, 5, 5, 0.2) 8%, rgba(5, 20, 55, 0.1) 15%, rgba(55, 55, 55, 0.1) 17%, rgba(55, 55, 55, 0.3) 65%,  rgba(55, 55, 55, 0.1) 68%, rgba(20, 20, 20, 0.2) 77%, rgba(20, 20, 20, 0.2) 79%, rgba(55, 55, 55, 0.2) 80%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 92%, rgba(10, 10, 10, 0.3) 97%, rgba(55, 55, 55, 0.3) 100%);}
    font-size: 14pt;
  45% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.3) 6px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.2) 11px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 3%, rgba(0, 5, 5, 0.2) 5%, rgba(5, 20, 55, 0.3) 6%, rgba(55, 55, 55, 0.1) 8%, rgba(55, 55, 55, 0.1) 10%,  rgba(55, 55, 55, 0.3) 15%, rgba(20, 20, 20, 0.3) 23%, rgba(20, 20, 20, 0.2) 44%, rgba(55, 55, 55, 0.2) 48%, rgba(55, 55, 55, 0.15) 60%, rgba(10, 10, 10, 0.15) 62%, rgba(10, 10, 10, 0.1) 76%, rgba(55, 55, 55, 0.1) 78%);}
    background: white;
  50% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.2) 8%, rgba(0, 5, 5, 0.3) 11%, rgba(5, 20, 55, 0.2) 13%, rgba(55, 55, 55, 0.2) 20%, rgba(55, 55, 55, 0.2) 60%,  rgba(55, 55, 55, 0.3) 70%, rgba(20, 20, 20, 0.3) 72%, rgba(20, 20, 20, 0.3) 73%, rgba(55, 55, 55, 0.3) 75%, rgba(55, 55, 55, 0.2) 85%, rgba(10, 10, 10, 0.2) 88%, rgba(10, 10, 10, 0.2) 95%, rgba(55, 55, 55, 0.2) 95%);}
    color: #252525;
  75% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.3) 6px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.2) 11px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 3%, rgba(0, 5, 5, 0.2) 5%, rgba(5, 20, 55, 0.3) 6%, rgba(55, 55, 55, 0.1) 8%, rgba(55, 55, 55, 0.1) 10%,  rgba(55, 55, 55, 0.3) 15%, rgba(20, 20, 20, 0.3) 23%, rgba(20, 20, 20, 0.2) 44%, rgba(55, 55, 55, 0.2) 48%, rgba(55, 55, 55, 0.15) 60%, rgba(10, 10, 10, 0.15) 62%, rgba(10, 10, 10, 0.1) 76%, rgba(55, 55, 55, 0.1) 78%);}
    text-align: center;
  80% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 10px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 5%, rgba(0, 5, 5, 0.2) 8%, rgba(5, 20, 55, 0.1) 15%, rgba(55, 55, 55, 0.1) 17%, rgba(55, 55, 55, 0.3) 65%,  rgba(55, 55, 55, 0.1) 68%, rgba(20, 20, 20, 0.2) 77%, rgba(20, 20, 20, 0.2) 79%, rgba(55, 55, 55, 0.2) 80%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 92%, rgba(10, 10, 10, 0.3) 97%, rgba(55, 55, 55, 0.3) 100%);}
    user-select: none;
  100% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.2) 8%, rgba(0, 5, 5, 0.3) 11%, rgba(5, 20, 55, 0.2) 13%, rgba(55, 55, 55, 0.2) 20%, rgba(55, 55, 55, 0.2) 60%,  rgba(55, 55, 55, 0.3) 70%, rgba(20, 20, 20, 0.3) 72%, rgba(20, 20, 20, 0.3) 73%, rgba(55, 55, 55, 0.3) 75%, rgba(55, 55, 55, 0.2) 85%, rgba(10, 10, 10, 0.2) 88%, rgba(10, 10, 10, 0.2) 95%, rgba(55, 55, 55, 0.2) 95%);}
    font-family: SUITE Variable;
}
    font-weight: 800;
 
@media screen and (min-width: 450px) {
.ACLoading-WebDisplay {
    display:inherit;
}
}
@media screen and (min-width: 450px) {
.ACLoading-MobileDisplay {
    display:none;
}
}
@media screen and (max-width: 450px) {
.ACLoading-WebDisplay {
    display:none;
}
}
@media screen and (max-width: 450px) {
.ACLoading-MobileDisplay {
    display:inherit;
}
}
}


/* 로딩 채우기 */
/* 관련 기사 (틀로 반영할 예정) */
.loading-fill {
.NEWS .link {
opacity: 1;
padding-top: 3px;
     animation: loading-fill;
     padding-left: 5px;
     animation-iteration-count: infinite;
     margin-bottom: 10px;
     animation-duration: 3s;
     line-height: 23px;
     animation-fill-mode: forwards;
     user-select: none;
     animation-timing-function: ease;
     font-family: "SUITE Variable";
     filter: brightness(0.9) grayscale(100%);
     font-weight: 700;
}
}


@keyframes loading-fill {
.NEWS .mw-parser-output .text {
from {
background: none;
opacity: 0.5;
filter: grayscale(100%);
}
to  {
opacity: 1;
filter: grayscale(0%);
}
}
.NEWS .mw-parser-output a.external.text {
font-size: 12pt;
font-family: "SUITE Variable";
}
}
 
.NEWS .mw-parser-output a.external.text:hover {
/* 로딩 채우기 2 */
font-size: 12pt;
.loading-fill-2 {
opacity: 0.5;
background: transparent;
padding: 150px;
    animation: loading-fill-2;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    filter: brightness(0.9) grayscale(100%);
    transform: translate(0%, -0%);
}
 
@keyframes loading-fill-2 {
from {
transform: translate(0%, -0%);
filter: grayscale(100%);
}
to  {
transform: translate(0%, -10%);
filter: grayscale(0%);
}
}
.NEWS .mw-parser-output a.external.text:active {
font-size: 12pt;
}
}

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;
}