Toggle search
Toggle menu
650
684
30
4.4K
The Petit Planet Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Vector-2022.css: Difference between revisions

MediaWiki interface page
More actions
Browse history interactively
← Older editNewer edit →
Added margins to page container and sticky header depending on different conditions. Reduced padding on footer container
No edit summary
Line 7: Line 7:
/* Page Container */
/* Page Container */
.mw-page-container {
.mw-page-container {
   background-color: var(--page-background-color) !important;
   background-color: var(--background-color-base) !important;
   border-radius: 40px;
   border-radius: 40px;
   margin-top: 20px;
   margin-top: 20px;
Line 39: Line 39:


.mw-body h2 {
.mw-body h2 {
   border-color: var(--theme-border-color) !important;
   border-color: var(--border-color-base) !important;
   border-width: 2px;
   border-width: 2px;
}
}
Line 58: Line 58:
.vector-pinnable-element .mw-list-item a:not(.mw-selflink):visited,
.vector-pinnable-element .mw-list-item a:not(.mw-selflink):visited,
.vector-dropdown-content .mw-list-item a:not(.mw-selflink):visited {
.vector-dropdown-content .mw-list-item a:not(.mw-selflink):visited {
   color: var(--theme-link-color);
   color: var(--color-progressive);
}
}


/* Radio Buttons */
/* Radio Buttons */
.cdx-radio__input:enabled:checked + .cdx-radio__icon {
.cdx-radio__input:enabled:checked + .cdx-radio__icon {
   border-color: var(--theme-link-color);
   border-color: var(--color-progressive);
}
}


.cdx-radio__icon {
.cdx-radio__icon {
   background-color: var(--theme-color-2);
   background-color: var(--background-color-2);
}
}


Line 73: Line 73:
code {
code {
   border: none;
   border: none;
   background-color: var(--theme-color-3);
   background-color: var(--background-color-3);
   border-radius: 5px;
   border-radius: 5px;
   padding: 2px 5px;
   padding: 2px 5px;
Line 81: Line 81:
   border-radius: 10px;
   border-radius: 10px;
   border: none;
   border: none;
   background-color: var(--theme-color-1);
   background-color: var(--background-color-1);
   color: var(--page-text-color);
   color: var(--color-base);
}
}


Line 103: Line 103:


.cdx-text-input__input {
.cdx-text-input__input {
   background-color: var(--page-background-color) !important;
   background-color: var(--background-color-base) !important;
   border-radius: 20px !important;
   border-radius: 20px !important;
   border: none;
   border: none;
Line 117: Line 117:
   .cdx-button.cdx-button--fake-button--enabled {
   .cdx-button.cdx-button--fake-button--enabled {
     background-color: var(--theme-accent-color) !important;
     background-color: var(--theme-accent-color) !important;
     color: var(--page-background-color);
     color: var(--background-color-base);
     font-family: "Inter" !important;
     font-family: "Inter" !important;
     border: 1px solid var(--theme-accent-color);
     border: 1px solid var(--theme-accent-color);
Line 127: Line 127:
     .cdx-button.cdx-button--fake-button--enabled {
     .cdx-button.cdx-button--fake-button--enabled {
       background-color: #FFED76 !important;
       background-color: #FFED76 !important;
       color: var(--page-text-color);
       color: var(--color-base);
       border: 1px solid #FFED76;
       border: 1px solid #FFED76;
     }
     }
Line 143: Line 143:
/* User & Search Actions */
/* User & Search Actions */
#ca-uls {
#ca-uls {
   background: var(--theme-color-3);
   background: var(--background-color-3);
   border-radius: 20px;
   border-radius: 20px;
      
      
   span {
   span {
     color: var(--page-text-color) !important;
     color: var(--color-base) !important;
   }
   }


   &:hover {
   &:hover {
     background: var(--theme-color-4);
     background: var(--background-color-4);
   }
   }


Line 164: Line 164:
input:focus:not(:active) + .cdx-button:not(.cdx-button--action-progressive) {
input:focus:not(:active) + .cdx-button:not(.cdx-button--action-progressive) {
   box-shadow: none;
   box-shadow: none;
   background: var(--theme-color-3);
   background: var(--background-color-3);
   border-radius: 20px;
   border-radius: 20px;
}
}


#pt-userpage-2 a:not(.mw-selflink) {
#pt-userpage-2 a:not(.mw-selflink) {
   color: var(--page-text-color) !important;
   color: var(--color-base) !important;
   font-weight: 700;
   font-weight: 700;
   margin-right: 5px;
   margin-right: 5px;
Line 182: Line 182:
   border-radius: 10px;
   border-radius: 10px;
   border: none;
   border: none;
   background-color: var(--theme-color-1);
   background-color: var(--background-color-1);
   padding: 10px 20px;
   padding: 10px 20px;
}
}
Line 191: Line 191:
   border-radius: 20px;
   border-radius: 20px;
   .skin-theme-clientpref-night &, .skin-theme-clientpref-os & {
   .skin-theme-clientpref-night &, .skin-theme-clientpref-os & {
     background: var(--theme-color-1);
     background: var(--background-color-1);
   }
   }
   .skin-theme-clientpref-day & {
   .skin-theme-clientpref-day & {
     background: var(--theme-color-2);
     background: var(--background-color-2);
   }
   }
}
}
Line 203: Line 203:


.vector-icon:not(.mw-echo-notifications-badge) {
.vector-icon:not(.mw-echo-notifications-badge) {
   background-color: var(--page-text-color) !important;
   background-color: var(--color-base) !important;
}
}


Line 209: Line 209:
.vector-header-container {
.vector-header-container {
   .vector-sticky-header {
   .vector-sticky-header {
     background-color: var(--theme-color-3) !important;
     background-color: var(--background-color-3) !important;
     color: var(--page-text-color);
     color: var(--color-base);
     border: 0;
     border: 0;
   }
   }
   .skin-theme-clientpref-night & .vector-sticky-header,
   .skin-theme-clientpref-night & .vector-sticky-header,
   .skin-theme-clientpref-os & .vector-sticky-header {
   .skin-theme-clientpref-os & .vector-sticky-header {
     background-color: var(--theme-color-6) !important;
     background-color: var(--background-color-6) !important;
   }
   }
   .skin-theme-clientpref-night & .vector-sticky-header span,
   .skin-theme-clientpref-night & .vector-sticky-header span,
   .skin-theme-clientpref-os & .vector-sticky-header span {
   .skin-theme-clientpref-os & .vector-sticky-header span {
     color: var(--page-text-color);
     color: var(--color-base);
   }
   }
}
}
Line 238: Line 238:
#p-views {
#p-views {
   .vector-menu-content-list li a {
   .vector-menu-content-list li a {
     color: var(--page-text-color);
     color: var(--color-base);
     background-color: var(--theme-color-2);
     background-color: var(--background-color-2);
     padding: 7px 14px;
     padding: 7px 14px;
     border-radius: 20px;
     border-radius: 20px;
Line 246: Line 246:


     &:hover {
     &:hover {
       background-color: var(--theme-color-3);
       background-color: var(--background-color-3);
       text-decoration: none;
       text-decoration: none;
     }
     }
Line 254: Line 254:
   .selected a {
   .selected a {
     background-color: var(--theme-accent-color) !important;
     background-color: var(--theme-accent-color) !important;
     color: var(--page-text-color) !important;
     color: var(--color-base) !important;
     border: 0;
     border: 0;
   }
   }
Line 260: Line 260:


.vector-menu-content a {
.vector-menu-content a {
   color: var(--page-text-color);
   color: var(--color-base);
   font-weight: 700;
   font-weight: 700;
}
}
Line 277: Line 277:
.skin-theme-clientpref-os #left-navigation .vector-menu-tabs .mw-list-item.selected a,
.skin-theme-clientpref-os #left-navigation .vector-menu-tabs .mw-list-item.selected a,
.skin-theme-clientpref-os #p-views .selected a {
.skin-theme-clientpref-os #p-views .selected a {
   color: var(--page-background-color) !important;
   color: var(--background-color-base) !important;
}
}


Line 296: Line 296:


   .vector-menu-heading {
   .vector-menu-heading {
     color: var(--page-text-color);
     color: var(--color-base);
   }
   }
}
}


.vector-page-tools-dropdown {
.vector-page-tools-dropdown {
   background: var(--theme-color-2);
   background: var(--background-color-2);
   border-radius: 20px;
   border-radius: 20px;
      
      
   &:hover {
   &:hover {
     background: var(--theme-color-3);
     background: var(--background-color-3);
   }
   }


   #vector-page-tools-dropdown-label {
   #vector-page-tools-dropdown-label {
     font-weight: 700;
     font-weight: 700;
     color: var(--page-text-color);
     color: var(--color-base);
     padding: 0 14px;
     padding: 0 14px;
     border-radius: 20px;
     border-radius: 20px;
Line 322: Line 322:


.vector-pinnable-header, .vector-pinnable-element .vector-menu-heading {
.vector-pinnable-header, .vector-pinnable-element .vector-menu-heading {
   border-bottom: 1px solid var(--theme-border-color) !important;
   border-bottom: 1px solid var(--border-color-base) !important;
}
}


.vector-dropdown-content {
.vector-dropdown-content {
   border: 1px solid var(--theme-border-color) !important;
   border: 1px solid var(--border-color-base) !important;
}
}


.vector-pinnable-header-toggle-button {
.vector-pinnable-header-toggle-button {
   background-color: var(--theme-color-3);
   background-color: var(--background-color-3);
   border-radius: 10px;
   border-radius: 10px;
   &:hover {
   &:hover {
     background-color: var(--theme-color-4);
     background-color: var(--background-color-4);
   }
   }
}
}
Line 348: Line 348:


.vector-dropdown .vector-dropdown-content {
.vector-dropdown .vector-dropdown-content {
   background-color: var(--page-background-color) !important;
   background-color: var(--background-color-base) !important;


   a span {
   a span {
     color: var(--page-text-color) !important;
     color: var(--color-base) !important;
   }
   }
}
}


.vector-sticky-header-context-bar {
.vector-sticky-header-context-bar {
   border-color: var(--page-text-color);
   border-color: var(--color-base);
}
}


Line 366: Line 366:


   a {
   a {
     background-color: var(--theme-color-3);
     background-color: var(--background-color-3);
     color: var(--page-text-color);
     color: var(--color-base);
     padding: 2px 8px;
     padding: 2px 8px;
     border-radius: 10px;
     border-radius: 10px;
Line 373: Line 373:
     &:hover {
     &:hover {
     text-decoration: none;
     text-decoration: none;
     background-color: var(--theme-color-5);
     background-color: var(--background-color-5);
     }
     }
   }
   }
}
}
Retrieved from "https://petitplanet.wiki/MediaWiki:Vector-2022.css"