미디어위키:Common.css: 두 판 사이의 차이

← 이전 편집

@@ 47번째 줄: / 47번째 줄: @@
 .page-대문 .mai
-/* ===== 메인/공용 버튼 스타일 ===== */
+/* ===== Compact Segmented Toolbar ===== */
-.portal-buttons {
+.portal-toolbar {
-   display: flex;
+   /* 색/크기 기본값 */
-   flex-wrap: wrap;
+  --ptb-radius: 8px;
-   gap: 10px;
+   --ptb-divider: #c8ccd1;   /* 칸막이/외곽선 */
-   margin: 16px 0 24px;
+   --ptb-surface: #f6f7f8;   /* 블록 배경 */
-}
+   --ptb-hover:   #eaecf0;   /* 호버 배경 */
+  --ptb-label:   #202122;   /* 글자색 */
-.portal-buttons .btn {
+   display: inline-flex;      /* 한 덩어리 */
-   display: inline-block;
+   align-items: stretch;
-   padding: 0.6em 1.0em;
+   border: 1px solid var(--ptb-divider);
-   font-weight: 600;
+   border-radius: var(--ptb-radius);
-   border-radius: 10px;
+   background: var(--ptb-surface);
-   border: 1px solid #a2a9b1;
+  overflow: hidden;          /* 둥근 모서리 내부로 자르기 */
-   text-decoration: none;
+  gap: 0;
+  margin: 8px 0 18px;
+   font-size: 0.93em;         /* 살짝 컴팩트 */
    line-height: 1.2;
-  background: #f8f9fa;       /* 기본(세컨더리) */
-  color: #202122;
 }
-.portal-buttons .btn:hover {
+/* 위키텍스트 줄바꿈이 만들어내는 <p>를 평탄화 → 가로 유지 */
-  background: #eaecf0;
+.portal-toolbar > p { margin: 0; display: contents; }
-   border-color: #72777d;
+/* 각 칸(세그먼트) */
+.portal-toolbar .tab { display: flex; }
+/* 칸막이 */
+.portal-toolbar .tab + .tab {
+   border-left: 1px solid var(--ptb-divider);
 }
-/* 강조(프라이머리) 버튼 */
+/* 링크(버튼) — 칸 전체 클릭 영역 */
-.portal-buttons .btn.primary {
+.portal-toolbar .tab a {
-   background: #36c;  /* 미디어위키 기본 파란색 계열 */
+   display: inline-flex;
-   color: #fff;
+  align-items: center;
-   border-color: #36c;
+  justify-content: center;
+  padding: 4px 10px;         /* 좌우 여백 */
+  min-height: 30px;          /* 버튼 높이 */
+  min-width: 76px;           /* 너무 좁아지지 않게 */
+  text-decoration: none;
+  font-weight: 600;
+   color: var(--ptb-label);
+   white-space: nowrap;
 }
+.portal-toolbar .tab a:hover  { background: var(--ptb-hover); }
+.portal-toolbar .tab a:active { background: #e0e3e7; }
-.portal-buttons .btn.primary:hover {
+/* 가운데 정렬 유틸 */
-  filter: brightness(0.95);
+.portal-toolbar-wrap { display: flex; justify-content: center; }
-}
-/* 모바일에서 꽉 차게 보이도록(선택) */
+/* 다크 모드(Vector-2022 night & 시스템 다크) */
-@media (max-width: 720px) {
+html.skin-theme-clientpref-night .portal-toolbar,
-   .portal-buttons {
+@media (prefers-color-scheme: dark) {
-     gap: 8px;
+   .portal-toolbar {
-  }
+     --ptb-divider: #3a3f44;
-  .portal-buttons .btn {
+    --ptb-surface: #2e3237;
-     flex: 1 1 auto;
+     --ptb-hover:   #3a3f45;
-     text-align: center;
+     --ptb-label:   #e6e8ea;
    }
 }