MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 61: / Line 61: @@
 }
-#toc {
+.toc, .toc * {
-    background: linear-gradient(to bottom, #111, #1a1a1a);
+  box-sizing: border-box;
-    border: 1px solid rgba(255, 215, 0, 0.2);
-    border-radius: 6px;
-    padding: 10px;
-    font-family: 'Cinzel', serif;
-    font-size: 13px;
-    color: #bbb;
-    max-width: 300px;
-    margin: 20px 0;
-    box-shadow: 0 0 6px rgba(255, 215, 0, 0.05);
 }
-#toc .toctitle {
+/* Base Box Styling */
-    display: flex;
+.toc {
-    align-items: center;
+  border: 1px solid rgba(255, 215, 0, 0.2);
-    justify-content: space-between;
+  border-radius: 8px;
-    font-size: 14px;
+  background: linear-gradient(to bottom, #111, #1a1a1a);
-    font-weight: bold;
+  padding: 10px;
-    color: #C0A080;
+  margin: 20px 0;
-    text-transform: uppercase;
+  font-family: 'Cinzel', serif;
-    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
+  font-size: 14px;
-    padding-bottom: 4px;
+  color: #ccc;
-    margin-bottom: 6px;
+  min-width: 12em;
+  box-shadow: 0 0 8px rgba(255, 215, 0, 0.05);
+}
+.toc a {
+  color: #ccc;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+.toc a:hover {
+  color: #FFD700;
+  background: rgba(255, 255, 255, 0.05);
+  text-shadow: 0 0 4px rgba(255, 215, 0, 0.3);
+}
+.toc .tocnumber {
+  color: #999;
+}
+.toc .tocnumber:after {
+  content: ".";
 }
-#toc ul {
+/* Header & Title */
-    list-style: none;
+.toc .toctitle {
-    padding: 0;
+  position: relative;
-    margin: 0;
+  overflow: hidden;
+  text-align: left;
+}
+.toc .toctitle h2, .toc .toctitle .toctogglespan {
+  line-height: 20px;
+  margin: 0;
+  border: 0;
+}
+.toc .toctitle h2 {
+  padding: 0 8px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  color: #C0A080;
+  text-transform: uppercase;
+  font-size: 14px;
 }
+.toc .toctitle h2::before {
-#toc li {
+  content: "";
-    margin: 4px 0;
+  display: block;
-    font-size: 13px;
+  width: 14px;
-    font-weight: 500;
+  height: 14px;
+  --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewbox='0 0 12 12'%3E%3Cpath id='bulleted-list-tiny' d='M1.29 9.277c-.181.19-.29.45-.29.71 0 .26.109.52.29.71.189.18.45.29.71.29.26 0 .519-.11.71-.29.18-.19.29-.45.29-.71 0-.26-.11-.52-.29-.71-.38-.37-1.05-.37-1.42 0M10 9H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M6 3h4a1 1 0 1 0 0-2H6a1 1 0 1 0 0 2m4 2H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M1.29 1.277c.37-.37 1.04-.37 1.42 0 .18.19.29.45.29.71 0 .26-.11.52-.29.71-.191.18-.45.29-.71.29-.26 0-.521-.11-.71-.29-.181-.19-.29-.45-.29-.71 0-.26.109-.52.29-.71zM2.55 5.17c.06.03.11.08.16.12.18.19.29.45.29.71 0 .26-.11.521-.29.71-.05.04-.1.09-.16.12a.559.559 0 0 1-.17.09c-.06.03-.12.05-.19.06-.06.01-.13.02-.19.02-.26 0-.52-.11-.71-.29A1.05 1.05 0 0 1 1 6c0-.26.11-.52.29-.71.24-.23.58-.34.9-.269a.6.6 0 0 1 .19.058c.06.021.12.051.17.091z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
+  -webkit-mask: var(--mask);
+  mask: var(--mask);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-position: center center;
+  mask-position: center center;
+  background-color: #FFD700;
+  margin: 0 6px 0 0;
 }
-#toc li li {
+/* Toggle button */
-    font-size: 12px;
+.toc .toctogglelabel {
-    margin-left: 10px;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  padding: 0 8px;
+  font-size: 13px;
+  line-height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  font-family: 'Cinzel', serif;
+  color: #FFD700;
+  cursor: pointer;
 }
+.toc .toctogglespan::before,
-#toc a {
+.toc .toctogglespan::after,
-    color: #bbb;
+.toc .toctogglelabel::after {
-    text-decoration: none;
+  display: none;
-    display: block;
-    padding: 2px 5px;
-    border-radius: 3px;
-    transition: all 0.3s ease;
 }
+.toc .toctogglelabel::before {
-#toc a:hover {
+  content: "";
-    color: #FFD700;
+  display: block;
-    background: rgba(255, 255, 255, 0.05);
+  pointer-events: none;
-    text-shadow: 0 0 4px rgba(255, 215, 0, 0.4);
+  --mask: var(--icon-chevron-down) no-repeat;
+  -webkit-mask: var(--mask);
+  mask: var(--mask);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-position: center center;
+  mask-position: center center;
+  background-color: #FFD700;
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+  transform: scaleY(-1);
+  transition: transform 0.3s ease;
 }
+.toc .toctogglelabel:hover::before {
-/* TOC Toggle Label Styling (e.g. [HIDE]) */
+  background-color: #fff8dc;
-#toc .toctogglelabel {
-    font-family: 'Cinzel', serif;
-    font-size: 12px;
-    color: #FFD700;
-    cursor: pointer;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    transition: color 0.3s ease;
-    padding-left: 10px;
 }
+.toc .toctogglecheckbox:checked + .toctitle .toctogglelabel::before {
-#toc .toctogglelabel:hover {
+  transform: none;
-    color: #fff8dc;
-    text-shadow: 0 0 4px rgba(255, 215, 0, 0.4);
 }
+.toc .toctogglecheckbox:checked ~ ul {
-#toc .toctogglelabel::after {
+  overflow: hidden;
-    content: " ▾";
+  display: block;
-    font-size: 12px;
+  height: 0;
-    color: #FFD700;
+  padding: 0;
+  margin: 0;
+  border: 0;
 }