사용자:Utolee90/liberty-dark.css: 두 판 사이의 차이

2021년 10월 30일 (토) 21:35 판

/* 참조: 사용자:Cerulean/liberty-dark.css */
/* 다크 모드에 최적화된 리버티 스킨 디자인 변경 */
/* 기본색: #4188f1-> #224A87 */
.Liberty .nav-wrapper,
.Liberty .nav-wrapper .navbar .form-inline .btn:hover,
.Liberty .nav-wrapper .navbar .form-inline .btn:focus,
.Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item .nav-link.active::before,
.Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item .nav-link:hover::before,
.Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item .nav-link:focus::before,
.Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item .nav-link:active::before,
.Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-footer .label,
.Liberty .content-wrapper .liberty-content .liberty-content-header .content-tools .tools-btn:hover,
.Liberty .content-wrapper .liberty-content .liberty-content-header .content-tools .tools-btn:focus,
.Liberty .content-wrapper .liberty-content .liberty-content-header .content-tools .tools-btn:active,
#liberty-scrollup,
#liberty-scrolldown,
[style*="background: #4188f1;"],
[style*="background:#4188f1;"] 
[style*="background-color:#4188f1;"]{
    background-color: #224a87;
}

/* navbar 관련 스타일 */
#searchInput { /* 문서 검색창 */
   background-color:#1f2023;
   color: inherit;
}

/* msUpoad 색상 */
#msupload-div {
    background-color: #1f2023;
}
#msupload-dropzone {
    color: inherit;
}

/* 소스 상자 등 색깔 변경  */
pre,
.liberty-notice {
    background-color: #1f2023;
    color: inherit;
}

/* 사용자 문서 안내 */

.libre-notice {
    background-color: #1f2023 !important;
    color: inherit !important;
}
.libre-notice .tp_link {
    color: white !important;
}


/* 요약문 */
input#wpSummary {
    background-color: #1f2023 !important;
    color: inherit !important;
}

/* 미리보기버튼 */
#wpPreview {
  background-color: #2f9dba;
  color:white;
}
/* 차이 보기 */
#wpDiff {
   background-color:#315830;
   color:white;
}
/* 체크박스 */
.editButtons input {
    filter: brightness(0.9);
    border-color: transparent !important;
}

/* 선택상자 옵션 */
select {
    background-color: #1f2023;
    color: white;
    border: 1px solid white;
}
select option:hover {
    background-color: #5e5e5e;
}

/* 텍스트 상자 옵션 */
input [type*="text"] {
    background-color: #1f2023;
    color: inherit;
}

/* 위키에디터 선택한 메뉴 글자색 */
.wikiEditor-ui-toolbar .tabs span.tab a.current, .wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
    color: #bbb;
}
/* 위키에디터 텍스트 글자색 */
.wikiEditor-ui-toolbar .page-characters div span {
    color: #bbb;
   font-size: 1.1em;
}
.wikiEditor-ui-toolbar .group .tool-select .label {
   color: #565 !important;
}

/* 특수문서 - 미디어위키용 입력상자 스타일 재설정 */
/* 수정 - 필터로 색상반전이 더 좋을 것 같음. */

/* 목록 상자 */
/*
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
.oo-ui-dropdownWidget-open,
.oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-labelElement > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-indicatorElement > .oo-ui-buttonElement-button:not(#wpSave):not(#wpPreview):not(#wpDiff) { /* 저장, 미리보기, 차이보기 버튼은 회색배경 적용하지 않기 */
    background-color: #1f2023 !important;
    color: white;
    border: 1px solid white;
}

*/
/* 메뉴 옵션 */
/*
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
    background: rgba(10, 18, 18, 0.5);
}
*/
/* 위젯 라벨명 */
/*
.oo-ui-labelElement-label {
    color: white;
}
*/
/* 메뉴 선택시 */
/*
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget:hover {
    background: #eae8f1;
    color: black !important;
}
*/
/* 텍스트 상자 */
/*
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
    background-color: #1f2023;
    color: inherit;
}
*/
/* 라디오 상자, 체크박스 배경색 검게 - jQuery로 바꿀 수 있을 지 테스트 예정. */
/*
.mw-rcfilters-head .oo-ui-buttonElement-button,
.mw-changeslist .mw-changeslist-legend,
.mw-rcfilters-head .oo-ui-widget,
.mw-rcfilters-ui-menuSelectWidget-footer,
.mw-rcfilters-ui-overlay .oo-ui-menuSelectWidget,
.mw-rcfilters-ui-overlay .oo-ui-popupWidget-popup,
.mw-rcfilters-ui-overlay .oo-ui-buttonElement-button,
.mw-rcfilters-ui-overlay .oo-ui-labelElement,
.mw-rcfilters-ui-filterMenuHeaderWidget-header {
    background: black !important;
}
*/

/*
.mw-rcfilters-head .oo-ui-tagMultiselectWidget-handle {
    background: #ffffff1a !important;
}
*/
/* 스크롤바가 거슬리니 일단 삭제 */
fieldset.oo-ui-layout {
   overflow:hidden;
}
/* 테스트 - 요소 반전 실험 */
#ooui-2
{
    filter:invert(1);
}
/* 반전이 일어나지 않는 요소들 수동보정 - 선택상자 */
.mw-changeslist .mw-changeslist-legend,
.mw-rcfilters-head .oo-ui-widget,
.mw-rcfilters-ui-menuSelectWidget-footer,
.mw-rcfilters-ui-overlay .oo-ui-menuSelectWidget,
.mw-rcfilters-ui-overlay .oo-ui-popupWidget-popup,
.mw-rcfilters-ui-overlay .oo-ui-buttonElement-button,
.mw-rcfilters-ui-overlay .oo-ui-labelElement,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend 
 {
  background-color: black !important;
}
/* 최근 바뀜 상자 관련 */
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background-color:#1f2023;
}
.oo-ui-buttonElement.oo-ui-labelElement.oo-ui-indicatorElement  .oo-ui-buttonElement-button,
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
.mw-search-profile-tabs,
.oo-ui-dropdownWidget .oo-ui-dropdownWidget-handle,
.mw-rcfilters-ui-filterMenuHeaderWidget-header,
.mw-rcfilters-ui-filterWrapperWidget-bottom .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:not(.oo-ui-buttonElement-active)
 {
    background-color: #1f2023 !important;
    color: #ddd;
}
.oo-ui-layout button[type="submit"] .oo-ui-labelElement-label,
 {
  color:black;
}

.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
.oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button, .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label,
bdi {
color: #ddd;
}
.oo-ui-decoratedOptionWidget .oo-ui-labelElement-label {
 color: #9f9f9f;
}
div.mw-warning-with-logexcerpt, div.mw-lag-warn-high, div.mw-cascadeprotectedwarning, div#mw-protect-cascadeon {
  background-color: #4f4f02;
}

/* 사용자 링크 예외 */
.mw-userlink bdi {
   color: #519ff1
}
.mw-userlink.new bdi {
   color: #ff7f7f;
}

/* 경고 틀 파란색 텍스트는 명도 올리기 */
div.mw-warning-with-logexcerpt big {
  color: #7f7fff !important;
}

/* 메뉴 투명하게 */
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
   filter:alpha(opacity=40);
}
/* 선택 배경메뉴는 더 진하게 -> 반전은 더 연하게 ->일단 취소 */
/*
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget:hover {
    background: #9f9f9f;
}*/
/* focus 글자 색 반전 -> 재반전시킴 */
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget:hover {
    color: #c93;
}

.oo-ui-icon-highlight:not(.mw-rcfilters-ui-filterItemHighlightButton-circle) {
    filter: invert(1);
}

/* charInsert 상자 배경색 전환 */
.mw-edittools-section input {
    background-color:#315830;
}



/* 틀 설명문서 배경색 변경 - jQuery로 설정할 예정. */
.template-documentation {
    background-color: #3a515f !important;
    color: #ddd !important;
}

/* 본문 관련 */
/* 진한 글씨는 흰색 -> 연초록로 바꾸어서 시각 자극을 줄이기 */
#content b, #content dt {
  color: #c1e7c1;
}
.signature b {
  color: inherit;
}
/* 취소선 친 글씨색 더 밝게 */
del, s, strike {
  color: #ccc;
}

/* 링크색은 살짝 밝게 지정 */
a {
   color: #519ff1
}
a.new { /* 새 링크 */
   color: #f97f7f;
}
/* 각주 선택 색상 진하게 */
ol.references li:target, sup.reference:target {
  background-color: #1f2023;
}

/* 태그 색상 밝은 톤으로 바꾸기 */
.mw-plusminus-pos {
   color: #4fdf4f;
}
.mw-plusminus-neg, .mw-tag-markers, .newpage {
  color: #df7f7f;
}

/* 편집창 차이 내역 */
html td.diff-context {
    background-color: #1f2023;
    border-color: #afafaf;
    color: #ddd;
}
.diff-addedline .diffchange { /* 추가 텍스트 */
    background: #002f4f;
    color: #ccf;
}
.diff-deletedline .diffchange { /* 삭제된 텍스트 */
    background: #4f4f02;
    color: #fda;
}


/* 플로우 상자 타이틀 - 그냥 푸른빛 도는 어두운 회색으로 바꾸자 */
.flow-topic-titlebar {
   background-color: #3a515f;
   color: #ddd;
}
.flow-topic-moderatestate-lock .flow-topic-titlebar {
  background-color: #1f2023;
}

.flow-topic-meta {
   color: #ccc 
}
.flow-component .mw-ui-icon.mw-ui-icon-before.mw-ui-icon-only:before {
      filter: invert(0.9) saturate(1.8) brightness(1.6) hue-rotate(186deg);
}
/* 플로우 메뉴 ul */
div>.flow-menu ul {
   filter: invert(0.9) saturate(1.8) opacity(0.9) hue-rotate(186deg);
}

/* 플로우 모달 */
.flow-ui-modal-layout {
  background-color: #bbb;
}
.flow-ui-modal input.mw-ui-input {
  color: #1f2023;
}
.mw-ui-button.mw-ui-progressive:disabled {
  background-color: #5c5c5c;
  border-color: #5c5c5c;
}

/* 둘러보기 상자 설정 */
.navbox th:first-type { /* 머릿글 상자 - jQuery로 스타일 변경 예정 */
    background-color: #224A87 !important;
}
.navbox th.tp_link { 
    background-color: #1f2023 !important;
}
.navbox td [style*="background:#b7b7b721"] { /* 기본 셀 상자 색상 - jQuery로 변경 예정 */
    background-color: #4f4f4f !important;
}
.navbox td.navbox-list {
    background-color: #1f2023 !important
}

code { /* 코드 박스 */
    background-color: #1f2023;
    color: #ddd;
}
/* 편집 경고창 */
.warningbox {
    background-color: #1f2023;
    color: #ddd;
}

/* 문법 강조 요소 관련 - 사용자:Cerulean 소스 참조 */
.mw-highlight .nc { /* 문법 강조 css #id에 해당 */
    color: #0075ff !important;
}
.mw-highlight .nn { /* css .class에 해당 */
    color: #0099dd;
}
.ace-tm .ace_gutter,
.ace-tm .ace_gutter-active-line,
.codeEditor-status {
    background: #f0f0f029;
    color: #c1c1c1;
}
.ace-tm {  /* 편집기 상자 */
    background-color: unset;
    color: white;
}
.ace_marker-layer .ace_selection { /* 블록 지정 */
    background: rgb(0 0 0 / 18%) !important;
}
.ace_storage,
.ace_keyword {  /* 스토리지, 키워드 */
    color: #00abff !important;
}
.ace_identifier { /* 식별자 */
    color: rgba(255, 255, 255, 0.815) !important;
}
.ace_operator { /* 연산자 */
    color: rgb(0 0 0) !important;
}
.ace_library { /* 라이브러리 */
    color: rgb(255 137 66) !important;
}
.ace_function { /* 함수 */
    color: #ff0000 !important;
}
.ace_paren {  /* 괄호  */
    color: #000 !important;
}
.ace_string { /* 문자열 */
    color: #00a706 !important;
}
.ace_numeric { /* 숫자 */
    color: #045600 !important
}
.ace_content { /* 텍스트 */
    /*background: black !important;*/
}
.ace_variable {     /* 변수 */
    /*color: #6cb3ff !important;*/
}
.ace_text-layer {
    color: #000 !important;
}
.ace-tm .ace_cursor { 
    /*filter: invert(1);*/
}
.ace_hidden-cursors .ace_cursor {
    opacity: 0.6;
}
.ace-tm .ace_support.ace_type,
.ace-tm .ace_support.ace_class {
    color: rgb(76 40 0) !important;
}
.ace-tm .ace_print-margin {
    background: #323232;
}
.ace_line {
    /*font-size: 1.1em;*/
}



/* 문단 색 지정 */
.Liberty .content-wrapper .liberty-content .liberty-content-main h1,
.Liberty .content-wrapper .liberty-content .liberty-content-main h2,
.Liberty .content-wrapper .liberty-content .liberty-content-main h3,
.Liberty .content-wrapper .liberty-content .liberty-content-main h4,
.Liberty .content-wrapper .liberty-content .liberty-content-main h5,
.Liberty .content-wrapper .liberty-content .liberty-content-main h6 {
    border-color: #ffffff52;
}

/* 아이콘 색상 반전. 편집창에서 코드 아이콘은 반전 제외. */
.oo-ui-iconElement-icon:not(.oo-ui-icon-markup.oo-ui-image-progressive):not(.mw-rcfilters-ui-filterItemHighlightButton-circle) {
    filter: invert(1);
}

.oo-ui-popupWidget-popup,
.mw-echo-ui-notificationItemWidget {
    background-color: #000 !important;
}

.mw-echo-ui-notificationItemWidget-content-message-header {
    color: #ffffff !important;
}

.mw-echo-ui-notificationItemWidget-unread {
    background-color: #1b1b1b !important;
}

.mw-echo-ui-menuItemWidget>.oo-ui-labelElement-label {
    color: white !important
}

.oo-ui-popupWidget-footer .oo-ui-buttonElement-button {
    background: black !important;
}

.mw-echo-ui-notificationItemWidget:hover {
    border-color: #ffffff3b !important;
}

.mw-echo-ui-notificationItemWidget,
.oo-ui-popupWidget-popup,
.oo-ui-popupWidget-head,
.oo-ui-popupWidget-footer,
.oo-ui-buttonElement-framed,
.editOptions,
.editOptions #wpSummary,
.wikiEditor-ui .wikiEditor-ui-view,
#editpage-specialchars select {
    border-color: #ffffff3b !important;
}

/* 위키 텍스트 상자에 반전효과 부여.  */
.wikiEditor-ui-text {
    filter: invert(0.9) saturate(1.8) opacity(0.9) hue-rotate( 
186deg);
}

/* 반전효과 주기 전에 텍스트 상자 밝게 재지정 - 반전되므로 편집창이 어두워진다.  */
textarea#wpTextbox1 {
    background-color: #ddd;
    color:#000000;
}
/* 준보호 편집문서 편집창 색상 진하게 */
#wpTextbox1.mw-textarea-sprotected {
   background-color: #4f4f02;
}

/* 최근바뀜 new 글자색 */
.Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-content .live-recent-list .recent-item .new {
    color: #ff7f7f;
}

/* 편집 상용구 스타일 반전 실험 */
#esSummaryButtons essummarybutton {
    filter: invert(1);
}

/* 커스텀 입력상자 배경색 반전 실험 */
#editpage-specialchars select, #editpage-specialchars a {
   background-color: #1f2023;
}

/* 팝업창 및 모듈 테스트창 색상 반전 */
.mwe-popups, .mw-scribunto-console-fieldset {
  filter: invert(0.95) brightness(1.2) hue-rotate(180deg);
}

/* 검색창 옵션 */
#mw-searchoptions {
   filter: invert(0.95) brightness(1.2) hue-rotate(180deg);
   color: #333;
}

span.searchmatch {
  background-color: #3a515f;
}