MediaWiki:Common.css: Unterschied zwischen den Versionen

 
(2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
 
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
 
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
 +
.border-box {
  
<span class="nc">.border-box</span> <span class="p">{</span>
+
     border: 2px solid;
     <span class="nb">border</span><span class="o">:</span> <span class="m">2px</span> <span class="nb">solid</span><span class="p">;</span>
+
     border-radius: 5px;
     <span class="nb">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">5px</span><span class="p">;</span>
+
     padding: 10px;
     <span class="nb">padding</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span>
+
    display: inline-block;
<span class="p">}</span>
+
}
  
<span class="nc">.box-red</span> <span class="p">{</span>
+
.box-red {
    <span class="nb">border-color</span><span class="o">:</span> <span class="m">#b94a48</span><span class="p">;</span>
 
    <span class="nb">background-color</span><span class="o">:</span> <span class="m">#f2dede</span><span class="p">;</span>
 
<span class="p">}</span>
 
  
<span class="nc">.box-orange</span> <span class="p">{</span>
+
     border-color: #b94a48;
     <span class="nb">border-color</span><span class="o">:</span> <span class="m">#c09853</span><span class="p">;</span>
+
     background-color: #f2dede;
     <span class="nb">background-color</span><span class="o">:</span> <span class="m">#fcf8e3</span><span class="p">;</span>
+
}
<span class="p">}</span>
 
  
<span class="nc">.box-green</span> <span class="p">{</span>
+
.box-orange {
    <span class="nb">border-color</span><span class="o">:</span> <span class="m">#468847</span><span class="p">;</span>
 
    <span class="nb">background-color</span><span class="o">:</span> <span class="m">#dff0d8</span><span class="p">;</span>
 
<span class="p">}</span>
 
  
<span class="nc">.box-blue</span> <span class="p">{</span>
+
     border-color: #c09853;
     <span class="nb">border-color</span><span class="o">:</span> <span class="m">#3a87ad</span><span class="p">;</span>
+
     background-color: #fcf8e3;
     <span class="nb">background-color</span><span class="o">:</span> <span class="m">#d9edf7</span><span class="p">;</span>
+
}
<span class="p">}</span>
 
  
<span class="nc">.green_hook</span> <span class="p">{</span>
+
.box-green {
    <span class="nb">background-image</span><span class="o">:</span> <span class="sx">url(images/icons/gruener_haken_sm.png)</span><span class="p">;</span>
 
    <span class="nb">width</span><span class="o">:</span> <span class="m">16px</span><span class="p">;</span>
 
    <span class="nb">height</span><span class="o">:</span> <span class="m">16px</span><span class="p">;</span>
 
    <span class="nb">display</span><span class="o">:</span> <span class="nb">inline</span><span class="o">-</span><span class="nb">block</span><span class="p">;</span>
 
    <span class="nb">margin-left</span><span class="o">:</span> <span class="m">8px</span><span class="p">;</span>
 
<span class="p">}</span>
 
  
<span class="nc">.green-check</span> <span class="p">{</span>
+
     border-color: #468847;
     <span class="nb">background-image</span><span class="o">:</span> <span class="sx">url(images/icons/green-checkmark.png)</span><span class="p">;</span>
+
     background-color: #dff0d8;
     <span class="nb">width</span><span class="o">:</span> <span class="m">16px</span><span class="p">;</span>
+
}
    <span class="nb">height</span><span class="o">:</span> <span class="m">16px</span><span class="p">;</span>
 
    <span class="nb">display</span><span class="o">:</span> <span class="nb">inline</span><span class="o">-</span><span class="nb">block</span><span class="p">;</span>
 
<span class="p">}</span>
 
  
<span class="nc">.okay</span> <span class="p">{</span>
+
.box-blue {
     <span class="nb">background-image</span><span class="o">:</span> <span class="sx">url(images/icons/green-checkhook.png)</span><span class="p">;</span>
+
 
     <span class="nb">width</span><span class="o">:</span> <span class="m">16px</span><span class="p">;</span>
+
    border-color: #3a87ad;
     <span class="nb">height</span><span class="o">:</span> <span class="m">16px</span><span class="p">;</span>
+
    background-color: #d9edf7;
     <span class="nb">display</span><span class="o">:</span> <span class="nb">inline</span><span class="o">-</span><span class="nb">block</span><span class="p">;</span>
+
}
<span class="p">}</span>
+
 
 +
.green_hook {
 +
 
 +
    background-image: url(images/icons/gruener_haken_sm.png);
 +
    width: 16px;
 +
    height: 16px;
 +
    display: inline-block;
 +
    margin-left: 8px;
 +
}
 +
 
 +
.green-check {
 +
 
 +
    background-image: url(images/icons/green-checkmark.png);
 +
    width: 16px;
 +
    height: 16px;
 +
    display: inline-block;
 +
}
 +
 
 +
.okay {
 +
 
 +
     background-image: url(images/icons/green-checkhook.png);
 +
     width: 16px;
 +
     height: 16px;
 +
     display: inline-block;
 +
}

Aktuelle Version vom 18. April 2017, 15:24 Uhr

/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
.border-box {

    border: 2px solid;
    border-radius: 5px;
    padding: 10px;
    display: inline-block;
}

.box-red {

    border-color: #b94a48;
    background-color: #f2dede;
}

.box-orange {

    border-color: #c09853;
    background-color: #fcf8e3;
}

.box-green {

    border-color: #468847;
    background-color: #dff0d8;
}

.box-blue {

    border-color: #3a87ad;
    background-color: #d9edf7;
}

.green_hook {

    background-image: url(images/icons/gruener_haken_sm.png);
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-left: 8px;
}

.green-check {

    background-image: url(images/icons/green-checkmark.png);
    width: 16px;
    height: 16px;
    display: inline-block;
}

.okay {

    background-image: url(images/icons/green-checkhook.png);
    width: 16px;
    height: 16px;
    display: inline-block;
}