MediaWiki:SkillNav.css: Difference between revisions

← Older edit

MediaWiki:SkillNav.css (view source)

Revision as of 00:34, 29 January 2024

2,202 bytes added , 29 January

no edit summary

Ritsu

ElEditors, Interface administrators, Administrators

70,980

edits

@@ Line 1: / Line 1: @@
+.skill-nav {
+    margin: 1rem 0;
+}
 .skill-nav-inner-wrap {
      margin-top: 0.5rem;
@@ Line 5: / Line 9: @@
      border-top: 1px solid black;
      border-left: 1px solid black;
+    user-select: none;
 }
@@ Line 12: / Line 17: @@
 }
-.skill-nav .image-cropped {
+.skill-nav .skill-nav-header .image-cropped {
-     margin-left: -10px;
+     margin-left: -2px;
+    transform: skew(10deg);
 }
 .skill-nav .skill-nav-header {
      display: flex;
-    gap: 1rem;
      place-items: center;
      transform: skew(-10deg);
@@ Line 25: / Line 30: @@
 }
-.skill-nav .skill-nav-header a {
+.skill-nav .skill-nav-title {
-     color: #fff !important;
+     color: #fff;
      font-weight: 500;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      display: inline-block;
+    font-size: 1.25rem;
      transform: skew(10deg);
-     font-size: 1.25rem;
+}
+.skill-nav .skill-nav-header a {
+     color: #fff !important;
 }
@@ Line 42: / Line 51: @@
 .skill-nav .skill-nav-skill {
      display: flex;
-     flex-direction: row-reverse;
+     flex-direction: row;
      place-content: center;
      place-items: center;
@@ Line 49: / Line 58: @@
 .skill-nav .skill-nav-skill a {
-     padding: 0.25rem;
+     padding: 0.35rem;
+    text-decoration: none!important;
+    height: 100%;
+    display: flex;
+    place-items: center;
+    box-sizing: border-box;
 }
 .skill-nav .skill-nav-skill a:not(.skill-nav-image a) {
-     padding: 0.5rem;
+     padding: 0.5rem 0.5rem 0.5rem 0.15rem;
      width: 100%;
      font-weight: 500;
@@ Line 59: / Line 73: @@
 .skill-nav .skill-nav-sub-head {
-     padding: 0.5rem 3rem 0.5rem 0.5rem;
+     padding: 0.5rem;
+    min-width: 8.5rem;
      font-weight: 500;
+    display: flex;
+    place-items: center;
 }
 .skill-nav .skill-nav-image {
      margin-right: auto;
+    height: 100%;
+    display: flex;
+    place-items: center;
+}
+.skill-nav .skill-nav-image .force-skill-icon {
+    padding-right: 0.65rem;
+    height: calc(30px + 0.5rem)!important;
+}
+.skill-nav .skill-nav-skill .force-skill-icon a {
+    display: block;
+}
+.skill-nav .skill-nav-skill a.mw-selflink:not(.skill-nav-image a) {
+    font-weight: 600!important;
+}
+.skill-nav .self-skill:hover {
+    background: none!important;
+}
+.skill-nav .mw-customtoggle {
+    width: calc(20px + 0.75rem);
+    height: calc(20px + 0.75rem);
+    transform: skew(10deg);
+    margin-left: auto;
+    margin-right: 1.5rem;
+    padding: 0.5rem;
+    box-sizing: border-box;
+    background-size: 20px;
+    background-repeat: no-repeat;
+    background-position: center;
+    transition: background-color .3s;
+    border-radius: 4px;
+}
+.skill-nav .mw-customtoggle:hover {
+    background-color: rgba(255,255,255,.25);
+}
+.skill-nav .mw-collapsed {
+    display: none;
+}
+.skill-nav a > img:not(.image-face img) {
+    max-width: initial!important;
+}
+.skill-nav .image-face > span {
+    display: flex;
+}
+/* Force Nav */
+.force-nav .skill-nav-extra-head {
+    place-content: center;
+    grid-column: span 2;
+}
+.force-nav .skill-nav-header a {
+    font-size: 1.05rem;
+}
+.force-nav .skill-nav-header {
+    height: auto;
+    padding: 0.2rem;
+    place-content: center;
+}
+.force-nav .mw-customtoggle {
+    margin-left: 0;
+    position: absolute;
+    right: 0;
+    background-size: 15px;
+    width: calc(15px + 0.75rem);
+    height: calc(15px + 0.75rem);
+}
+@media screen and (max-width: 500px) {
+    .skill-nav .skill-nav-sub-head {
+        min-width: unset;
+    }
+    .skill-nav-inner-wrap {
+        grid-template-columns: min-content auto;
+    }
+    .skill-nav .skill-nav-skill-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 0;
+    }
 }