MediaWiki: Tweeki.css: verschil tussen versies

Versie van 20 mei 2019 om 09:21

/* CSS placed here will be applied to Tweeki skin */

/* Toegevoegd c.q. overgenomen door BM om grid-voorbeeld te stylen */
.gridexample {
  border:1px solid #f5f5f5;
  min-height:10px;
  margin-bottom:20px;
}

.gridexample .content {
    background-color: #f5f5f5;
    min-height: 50px;
    margin-top: 3px;
    margin-bottom: 3px;
    font-size: smaller;
    text-align: center;
    padding-top: 10px;
    color: #666;
    font-style: italic;
    border:1px solid white;
}


/* https://forum.freecodecamp.org/t/why-does-btn-primary-make-a-button-blue/80707/3 */
.btn-primary {
  color: #fff;
  background-color: #BC0031;
  *background-color: #BC0031; /* gradient lijkt niet te werken: https://cyberchimps.com/forum-topic/hex-of-the-boostrap-buttons/ */
	background-image: -moz-linear-gradient(top, #BC0031, #A00020);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#BC0031), to(#A00020));
	background-image: -webkit-linear-gradient(top, #BC0031, #A00020);
	background-image: -o-linear-gradient(top, #BC0031, #A00020);
	background-image: linear-gradient(to bottom, #BC0031, #A00020);
	background-repeat: repeat-x;
  border-color: #A00020;
  background-position: 0 -32px; /* BM : eigen fiddle ....*/
}
.btn-primary:focus,
.btn-primary.focus {
  color: #fff;
  background-color: #A00020;
  border-color: #A00020;
 background-position: 0 -32px; /* https://stackoverflow.com/questions/41339040/css-bootstrap-button-modification-color-only-changes-half-when-hover */
}
.btn-primary:hover {
  color: #fff;
  background-color: #A00020;
  border-color: #A00020;
 background-position: 0 -32px;  /* https://stackoverflow.com/questions/41339040/css-bootstrap-button-modification-color-only-changes-half-when-hover */
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #A00020;
  border-color: #A00020;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
  color: #fff;
  background-color: #A00020;
  border-color: #A00020;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
  background-color: #A00020;
  border-color: #A00020;
}
.btn-primary .badge {
  color: #BC0031;
  background-color: #fff;
}


/* BM: Weergave van "Annuleren" link bij VE. Bron: https://www.mediawiki.org/wiki/Skin_talk:Tweeki */
/*.ve-annuleren-link { display:none; }*/
.ve-active .ve-annuleren-link { display:block!important; }

/* BM: Styling van Section-edit-link voor gebruik VisualEditor */

/* Divider hiden */

h1 > .mw-editsection > span.mw-editsection-divider,
h2 > .mw-editsection > span.mw-editsection-divider,
h3 > .mw-editsection > span.mw-editsection-divider,
h4 > .mw-editsection > span.mw-editsection-divider,
h5 > .mw-editsection > span.mw-editsection-divider,
h6 > .mw-editsection > span.mw-editsection-divider {display:none;}

h1:hover > .mw-editsection > span:nth-last-of-type(2),
h2:hover > .mw-editsection > span:nth-last-of-type(2),
h3:hover > .mw-editsection > span:nth-last-of-type(2),
h4:hover > .mw-editsection > span:nth-last-of-type(2),
h5:hover > .mw-editsection > span:nth-last-of-type(2),
h6:hover > .mw-editsection > span:nth-last-of-type(2) {display:inline;}
.mw-editsection-bracket {display:none!important; }

/* Eerste link en opvolgende divider verwijderen */
.mw-editsection-visualeditor > span.glyphicon {display:none;}
.mw-editsection-visualeditor + span.mw-editsection-divider {display:none;}

/* Gehele editsection verwijderen */
/*.mw-editsection { display:none!important; }  */

/* Responsive multi column list -  https://codepen.io/ThiefMaster/pen/afGbB */
/*CSS3 multiple columns.*/
/* Get em size for colums: 184/16 */   
.columns
{   
    -moz-column-width: 10em; /* Firefox */
    -webkit-column-width: 10em; /* webkit, Safari, Chrome */
    column-width: 10em;
}
/*remove standard list and bullet formatting from ul*/
.columns ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
/* correct webkit/chrome uneven margin on the first column*/
.columns ul li:first-child
{
    margin-top:0px;
}


/* Clippings */

.clip-circle-60-c {
  clip-path: circle(60px at center);
}

.clip-border-30-30-30-30 {
clip-path: inset(30px 30px 30px 30px);
}