Welcome to EverybodyWiki 😃 ! Nuvola apps kgpg.png Log in or ➕👤 create an account to improve, watchlist or create an article like a 🏭 company page or a 👨👩 bio (yours ?)...

Projet:CSS

From EverybodyWiki Bios & Wiki

This project page is a place to share CSS code snippets and user styles for customizing the user experience using MediaWiki's built-in user space CSS or an user style browser add-on.

Templates[edit]

User styles[edit]

Feel free to add your custom user styles to the list.

Implementation[edit]

When code is wolrking well you can ask WikiMaster to implement it :

Code snippets[edit]

These code snippets can be applied by pasting them into a user space CSS page or a user style browser add-on.

Chameleon[edit]

/* Use entire screen width for content. Convenient for readers with large monitors */
  .container { max-width: none; }
Grid bottom toolbox (unfinished)
.mb-2.p-navbar .navbar-nav {
    display: block;
    column-count: 3; 
    width: 100%;
} 

/* Only for help during experimentation. */
a{ border: 1px solid #aaa;}
} 

/* Patch code for [[User:Handroid7/chameleon.css|Chameleon7]], if implemented */
.mb-2.p-navbar .navbar-nav {
    display: flex; /* inline-flex works too. */
    column-count: initial; 
    width: initial;
}
Shadowed scroll box (unfinished)
.scrollbox {
  color:white;
  overflow: auto;
  width: 200px;
  max-height: 200px;
  margin: 50px auto;
  background: /* Shadow covers */
  linear-gradient(inherit 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), inherit 70%) 0 100%, /* Shadows */
  radial-gradient(50% 0, farthest-side, rgba(128, 128, 128, .4), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(128, 128, 128, .4), rgba(0, 0, 0, 0)) 0 100%;
  background: /* Shadow covers */
  linear-gradient(inherit 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), inherit 70%) 0 100%, /* Shadows */
  radial-gradient(farthest-side at 50% 0, rgba(128, 128, 128, .4), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(128, 128, 128, .4), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: inherit;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  /* Opera doesn't support this in the shorthand */
  background-attachment: local, local, scroll, scroll;
}
Floatable article message boxes (implemented in Template:Responsive unfloat/Template:rfloat)
.floatbox {
  float:  right;
  clear:  right;
  width:  309px;
  margin: 0 0 1em 1.4em;
}

@media (max-width:639px) {
  .floatbox {
    float:  none;
    clear:  both;
    width:  100%;
    margin: 0;
  }
}
Responsive thumbnails
/* Responsive thumbnails */
@media (max-width:639px) {
  div.thumb { 
    margin: 0.5em 0 0.5em 0;
    text-align: center; 
    justify-content: center;
  }
  div.thumbinner { 
    justify-content: center; 
    margin:0 auto;
  }
}

Experimental[edit]

This section contains experimental and/or unfinished code snippets.

Experimental thanks button
@media (max-width:640px){

.jquery-confirmable-wrapper { white-space: unset; }

.jquery-confirmable-interface { 
  display:inline-block;
  position:fixed;top:40%;right:5%;
  background:#dfd;
  border: 1px solid black;
  box-shadow:0 0 20px -5px black;;
  border-radius:0.3em;
  word-wrap: break-word;
  justify-content: center;
  text-align:center;
  
}

.jquery-confirmable-text { width:100%; }
.jquery-confirmable-text,
.mw-thanks-thank-link { display:inline-block; }
  
}