DevTools.css

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
오페라: Ctrl-F5를 입력.

/* =========================================
Developer Tools Panel
owner-only floating tools
========================================= */

#dev-tools-panel {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 99998;
width: 270px;
background: #0a0909;
border: 2px solid #854369;
border-radius: 8px;
overflow: hidden;
box-shadow:
0 0 0 1px #1a1a1a,
0 8px 24px rgba(0,0,0,0.58);
color: #E2E2E2;
font-size: 12px;
}

#dev-tools-panel.dev-tools-collapsed {
width: auto;
min-width: 168px;
}

#dev-tools-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 10px 9px 12px;
border-bottom: 2px solid #854369;
background: linear-gradient(to bottom, #171114 0%, #0a0909 100%);
color: #E2E2E2;
font-size: 13px;
font-weight: 700;
cursor: default;
user-select: none;
}

#dev-tools-title {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
white-space: nowrap;
}

#dev-tools-toggle {
width: 22px;
height: 22px;
padding: 0;
border: 1px solid #854369;
border-radius: 5px;
background: linear-gradient(to bottom, #2a2a2a 0%, #1a1a1a 50%, #111111 100%);
color: #E2E2E2;
font-size: 12px;
line-height: 20px;
text-align: center;
cursor: pointer;
}

#dev-tools-toggle:hover {
background: linear-gradient(to bottom, #333 0%, #252525 50%, #1a1a1a 100%);
color: #ffffff;
}

#dev-tools-toggle:active {
transform: translateY(1px);
background: linear-gradient(to bottom, #111111 0%, #171717 55%, #242424 100%);
}

#dev-tools-body {
padding: 10px;
background: #0a0909;
}

#dev-tools-panel.dev-tools-collapsed #dev-tools-body {
display: none;
}

#dev-tools-panel.dev-tools-collapsed #dev-tools-header {
border-bottom: none;
}

.dev-tools-section {
display: flex;
flex-direction: column;
gap: 7px;
}

.dev-tools-note {
color: #9a9a9a;
font-size: 11px;
line-height: 1.45;
}

.dev-tools-button {
display: block;
width: 100%;
box-sizing: border-box;
padding: 7px 10px;
border-radius: 5px;
border: 1px solid #333;
border-left: 3px solid #854369;
background: linear-gradient(to bottom, #2a2a2a 0%, #1a1a1a 50%, #111111 100%);
color: #E2E2E2;
font-size: 12px;
font-weight: 700;
text-align: left;
cursor: pointer;
}

.dev-tools-button:hover {
border-color: #854369;
background: linear-gradient(to bottom, #333 0%, #252525 50%, #1a1a1a 100%);
color: #ffffff;
}

.dev-tools-button:active {
transform: translateY(1px);
background: linear-gradient(to bottom, #111111 0%, #171717 55%, #242424 100%);
}

.dev-tools-button:disabled {
cursor: default;
opacity: 0.55;
transform: none;
}

#dev-tools-status {
min-height: 16px;
color: #854369;
font-size: 11px;
line-height: 1.45;
word-break: keep-all;
}

#dev-tools-status.dev-tools-status-error {
color: #d46262;
}

#dev-tools-status.dev-tools-status-ok {
color: #95ed95;
}

미디어위키:DevTools.css