사용자:Hsl0/common.css: 두 판 사이의 차이

리버티게임, 모두가 만들어가는 자유로운 게임
imported>Hsl0
편집 요약 없음
편집 요약 없음
 
(사용자 2명의 중간 판 67개는 보이지 않습니다)
1번째 줄: 1번째 줄:
/* <pre><nowiki>*/
/* 2안 적색 배경 */
/*.ns-3000 #content, .ns-3000 #p-cactions li a:hover, .ns-3000 #p-cactions li.selected a {
  background-color: #fff0f0;
}*/


/* 인쇄용 문서에서 일부 객체를 숨김 */
/* linktools.css */
@media print {
@keyframes link-wait {
  .editlink, .noprint, .metadata, .dablink {
     from {
    display: none;
         background-position-x: 200%;
  }
}
 
/* 로그인 상자의 모양 조절. */
form#userlogin {
  float: left;
  padding: 1em 1em .7em 1em;
  background-color: #ffffe6;
  border: 2px solid #fc6;
  color: #000;
  margin-right: 2em;
}
form#userlogin table {
  background-color: #ffffe6;
  color: #000;
}
form#userlogin2 {
  float: left;
  padding: 1em 1em .7em 1em;
  background-color: #ffffe6;
  border: 2px solid #fc6;
  color: #000;
  margin-right: 2em;
}
form#userlogin2 table {
  background-color: #ffffe6;
  color: #000;
}
 
/*</nowiki></pre>*/
 
/**
* 반응형 디자인 추가
* 단군조선의 홍익인간 정신을 본받아 모바일 사용자를 널리 이롭게 하고자 만든 리버티게임 반응형 css모듈입니다.
* 이 모듈을 삭제할 때 [[미디어위키:vector.js]]의 "사이드바 토글 버튼 추가" 모듈을 함께 삭제 해 주세요.
* 작성자: [[사용자:BANIP|BANIP]], [[사용자:hsl0|hsl0]]
*/
@media (max-width: 800px) {  
     body{
         overflow-x:hidden;
    }
 
    #content{
margin-left:0;
width:100%;
        box-sizing: border-box;
    }
 
    /* 사용자 메뉴 레이아웃 조정 */
    #p-personal{
    position: absolute;
      top: 0.33em;
      right: 0.75em;
      z-index: 100;
      width: calc(100% - 3.5em);
    }
 
    #p-personal > ul {
    right: 0;
        position: absolute;
        text-align: right;
    }
   
    #p-personal > ul > li{
        float: none;
        display: inline-block;
     }
     }
 
     to {
    /* 사이드 바 */
         background-position-x: 0%;
     #btn-panelopen{
        height: 2.4em;
         background: #18a003 url(https://upload.wikimedia.org/wikipedia/commons/2/27/Menu%2C_Web_Fundamentals_%28White%29.svg) no-repeat center;
        background-size:1.8em;
        left: 0;
        top: 0em;
        position: absolute;
        display: block!important;
        border: 0;
        margin: 0;
        padding: 0em 0.2em;
        color: #fff;
        font-weight: bold;
        width: 2.5em;
     }
     }
    #mw-panel{
        visibility: hidden;
        transform: translate(-100%);
        transition:0.2s transform cubic-bezier(0.55, 0.06, 0.68, 0.19);
        z-index: 200;
        top: 0!important;
        padding-top: 0!important;
        overflow-y: auto;
        overflow-x: hidden;
    }
    #mw-panel.visible{
        visibility: visible;
        height: 100%;
        position: fixed;
        transform: translate(0%);
    }
    #mw-panel, #p-logo{
        background: #f6f6f6;
        position: relative;
        top: 0;
    }   
    /* 사이드바 스크롤바 */
    #mw-panel::-webkit-scrollbar{
        background: #000000;
        width:0.4em;
        height:0.3em;
    }
   
    #mw-panel::-webkit-scrollbar-thumb {
        background: #18a003;
    }
    #p-tb{
    padding-bottom: 2em!important;
    }
   
    #left-navigation {
    min-width: max-content;
    }
   
    /* 검색바 가로폭 max로 설정 */
    #right-navigation{
        width: 100%;
        float: unset;
    }
    #p-search{
        background: #000000;
        display: flex;
        justify-content: center;
        align-content: center;
        display: block;
        position: absolute;
        width: 100%;
        padding: 0.2em 0.2em;
        margin: 0 auto;
        left: 0;
        float: unset;
        box-sizing: border-box;
    }
    #simpleSearch{
        margin-top: 0!important;
        width: 100%!important;
        float: unset;
        margin: 0;
        min-width: unset!important;
        max-width: unset!important;
        box-sizing: border-box;
        padding: 1em;
        background: #fff;
    }
    #searchform{
margin-top: 0!important;
        flex: 1;
    }
    #searchInput{
        top: 0;
        width: 100%;
        height: 100%;
        padding: 0 0 0 1em!important;
        position: absolute;
        left: 0;
        background: #fff!important;
    }
    /* 네비게이터 top 설정 */
    #right-navigation, #left-navigation {
        margin-top: 3.9em;
    }
    /* 검색바 top 설정 */
    #p-search{
        top:2em;
    }
    /* content top 설정 */
    #content{
        margin-top:1.35em;
    }
    /* 네비게이터 위치 상세 조정*/
    #left-navigation {
        float:unset;
        margin-left:0;
    }
    #mw-head, #left-naviation, #p-namespaces > ul{
        display:flex;
    }
    /* 공지사항 위치 조율 */
    .mw-dismissable-notice-body{
        margin:0!important;
    }
    .mw-dismissable-notice-close{
        float:unset!important; 
    }
    #localNotice > ul > li {
        text-align: initial;
    }
    /* 공지사항 스타일링 */
    #siteNotice{
        position: relative;
        border: 2px solid #000000;
    }
    .mw-dismissable-notice-close{
        background: #000000;
        right: 0;
        visibility: visible;
        position: relative;
        height: 2em;
        color: transparent!important;
    }
    .mw-dismissable-notice-close a{
        position: absolute;
        right: 0;
        background: #18a003 url(/w/load.php?modules=oojs-ui.styles.icons-interactions&image=close&format=rasterized&skin=vector&version=16gk4) no-repeat center;
        color: transparent!important;
        font-size: 0em;
        height: 100%;
        width: 23px;
    }
    #footer {
    margin:auto!important;
    }
    #mw-panel {
position: absolute;
}
#right-navigation {
width: 70%;
}
}
}
#btn-panelopen{
.link-modifier-cloak,
     display:none;
.event-listener-cloak[data-target="link"],
}
.event-handler-cloak[data-target="link"] {
#p-personal ul {
cursor: wait;
padding: 0;
/* 그라데이션 애니메이션 */
    background-image: linear-gradient(
        135deg,
        #cccccc,
        #cccccc,
        #4d4d4d,
        #4d4d4d,
        #cccccc,
        #cccccc
    );
    background-size: 200% auto;
     background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    color: transparent;
    animation: 2s linear 0s infinite running link-wait;
}
}


/**
.link-modifier-cloak a,
* 사용자 링크 숨기기
.event-listener-cloak[data-target="link"] a,
* 삭제시 [[미디어위키:Vector.js]]의 "사용자 링크 펼치기 버튼 생성" 모듈도 삭제해 주세요.
.event-handler-cloak[data-target="link"] a {
* 제작자: [[사용자:hsl0|hsl0]]
    pointer-events: none;
**/
    color: inherit;
/* 700px 초과시 숨기지 않음 */
@media(min-width: 751px) {
#pt-collapse, #pt-expand {
display: none;
}
}
}
/* 700px 이하일때 숨김 */
@media(max-width: 750px) {
    #p-personal ul {
        float: right;
    }


#p-personal ul:not(.expanded) {
/* 애니메이션 줄이기가 켜진 경우 (vector 스킨 important 덮어쓰기) */
align-items: stretch;
@media (prefers-reduced-motion: reduce) {
.link-modifier-cloak,
.event-listener-cloak[data-target="link"],
.event-handler-cloak[data-target="link"] {
animation: 4s linear 0s infinite running link-wait !important;
}
}
   
    #p-personal ul:not(.expanded) > li:nth-child(n+5):not(#pt-expand):not([id^="pt-anon"]):not(#pt-createaccount):not(#pt-login) {
        display: none;
    }
    #p-personal ul.expanded {
        display: grid;
        background: white;
        width: auto;
        grid-template-areas: "userpage alert notice collapse";
        align-items: baseline;
        border: 1px solid gray;
        border-radius: 5px;
        overflow: hidden;
    }
   
    #pt-userpage {grid-area: userpage;}
    #pt-talk-alert {grid-area: talk-alert;}
    #pt-notifications-alert {grid-area: alert;}
    #pt-notifications-notice {grid-area: notice;}
    #pt-collapse {grid-area: collapse;}
    #p-personal ul.expanded > * {
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100%;
    }
    #p-personal ul.expanded > li > a {
        display: block;
        height: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 15px;
        padding-right: 15px;
    }
    #p-personal ul.expanded > :not(#pt-userpage):not(#pt-notifications-alert):not(#pt-notifications-notice):not(#pt-collapse):not(#pt-collapse) {
        margin: 0;
        grid-column: 1 / -1
    }
    #p-personal ul.expanded > :hover {
        background: lightgrey;
    }
    #p-personal ul.expanded #pt-userpage a {
        border-top-left-radius: 5px;
        display: block;
        margin-top: 0.9em;
        padding: 0 10px;
        height: 20px;
        width: 100%;
        background-position-x: 15px;
        background-position-y: 2px;
        padding-right: 20px;
        padding-left: 40px !important;
    }
    #p-personal ul.expanded #pt-talk-alert a:hover {
    background: #f0b400;
    }
    #p-personal ul.expanded #pt-collapse a {
        border-top-right-radius: 5px;
        height: 20px;
    }
    ul.expanded #pt-logout a {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    ul.expanded > #pt-expand {
        display: none;
    }
    #pt-expand > a {
        top: -5px;
        position: relative;
        height: 20px;
        width: 20px;
        display: block;
    }
    .expanded #pt-notifications-notice .mw-echo-notifications-badge,.expanded #pt-notifications-alert .mw-echo-notifications-badge,.expanded #pt-collapse a {
        top: 20%;
        margin: auto;
        background-repeat: no-repeat;
        background-position: center;
        height: 25px;
        vertical-align: bottom;
    }
}
}
/* 사용자 링크 숨기기 끝 */

2024년 2월 27일 (화) 20:37 기준 최신판

/* 2안 적색 배경 */
/*.ns-3000 #content, .ns-3000 #p-cactions li a:hover, .ns-3000 #p-cactions li.selected a {
  background-color: #fff0f0;
}*/

/* linktools.css */
@keyframes link-wait {
    from {
        background-position-x: 200%;
    }
    to {
        background-position-x: 0%;
    }
}
.link-modifier-cloak,
.event-listener-cloak[data-target="link"],
.event-handler-cloak[data-target="link"] {
	cursor: wait;
	
	/* 그라데이션 애니메이션 */
    background-image: linear-gradient(
        135deg,
        #cccccc,
        #cccccc,
        #4d4d4d,
        #4d4d4d,
        #cccccc,
        #cccccc
    );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    color: transparent;
    animation: 2s linear 0s infinite running link-wait;
}

.link-modifier-cloak a,
.event-listener-cloak[data-target="link"] a,
.event-handler-cloak[data-target="link"] a {
    pointer-events: none;
    color: inherit;
}

/* 애니메이션 줄이기가 켜진 경우 (vector 스킨 important 덮어쓰기) */
@media (prefers-reduced-motion: reduce) {
	.link-modifier-cloak,
	.event-listener-cloak[data-target="link"],
	.event-handler-cloak[data-target="link"] {
		animation: 4s linear 0s infinite running link-wait !important;
	}
}