MediaWiki: Common.css: verschil tussen versies

Versie van 9 apr 2019 om 10:16

/** CSS die hier wordt geplaatst heeft invloed op alle skins */
td.clickablecell a {
    display: block;
    width: 100%;
}

span.infobox-titel a {
	color: white;
}
span.infobox-titel-competentie a {
	color: #666;
}

/*  Infobox  */
table.infobox { 
	float: right;
	margin-left: 10px;
	margin-bottom: 15px;
	width: 320px;
}
table.infobox.huisarts1 {border: #4ea24e;}
table.infobox.klin {border: 1px solid #228b22;}
table.infobox.cz {border: 1px solid #4aa6ff;}
table.infobox.ggz {border: 1px solid #1c86ee;}
table.infobox.huisarts2 {border: 1px solid #1874cd;}
table.infobox.regelgeving {border: 1px solid #666;}
table.infobox.regelgeving-sv {border: 1px solid #666;}
table.infobox.leerlijn-kort {border: 1px solid YellowGreen;}
table.infobox.leerlijn-spoed {border: 1px solid ForestGreen;}
table.infobox.leerlijn-chron {border: 1px solid LightSeaGreen;}
table.infobox.leerlijn-ouderen {border: 1px solid DodgerBlue;}
table.infobox.leerlijn-kind {border: 1px solid DarkMagenta;}
table.infobox.leerlijn-psych {border: 1px solid Crimson;}
table.infobox.leerlijn-solk {border: 1px solid OrangeRed;}
table.infobox.leerlijn-pall {border: 1px solid DarkOrange;}
table.infobox.leerlijn-preventie {border: 1px solid Gold;}
table.infobox.leerlijn-praktijk {border: 1px solid LightSlateGray;}
table.infobox.leerlijn-medisch {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-communicatie {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-maatschappelijk {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-wetenschap {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-ethiek {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-prof {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-intercult {border: 1px solid #a2a9b1;}

table.infobox.huisarts1.box {width: 100%;}
table.infobox.klin.box {width: 100%;}
table.infobox.cz.box {width: 100%;}
table.infobox.ggz.box {width: 100%;}
table.infobox.huisarts2.box {width: 100%;}
table.infobox.regelgeving.box {width: 100%;}
table.infobox.regelgeving-sv.box {width: 100%;}
table.infobox.leerlijn-kort.box {width: 100%;}
table.infobox.leerlijn-spoed.box {width: 100%;}
table.infobox.leerlijn-chron.box {width: 100%;}
table.infobox.leerlijn-ouderen.box {width: 100%;}
table.infobox.leerlijn-kind.box {width: 100%;}
table.infobox.leerlijn-psych.box {width: 100%;}
table.infobox.leerlijn-solk.box {width: 100%;}
table.infobox.leerlijn-pall.box {width: 100%;}
table.infobox.leerlijn-preventie.box {width: 100%;}
table.infobox.leerlijn-praktijk.box {width: 100%;}
table.infobox.leerlijn-medisch.box {width: 100%;}
table.infobox.leerlijn-communicatie.box {width: 100%;}
table.infobox.leerlijn-maatschappelijk.box {width: 100%;}
table.infobox.leerlijn-wetenschap.box {width: 100%;}
table.infobox.leerlijn-ethiek.box {width: 100%;}
table.infobox.leerlijn-prof.box {width: 100%;}
table.infobox.leerlijn-intercult.box {width: 100%;}

table.infobox th {
	padding:10px 5px 10px 5px;
	text-align:center; 
	color: white;
	font-size: 150%;
}
table.infobox.huisarts1 th {background-color: #4ea24e;}
table.infobox.klin th {background-color: #228b22;}
table.infobox.cz th {background-color: #4aa6ff;}
table.infobox.ggz th {background-color: #1c86ee;}
table.infobox.huisarts2 th {background-color: #1874cd;}
table.infobox.regelgeving th {background-color: #666;}
table.infobox.regelgeving-sv th {background-color: #666;}
table.infobox.leerlijn-kort th {background-color: YellowGreen;}
table.infobox.leerlijn-spoed th {background-color: ForestGreen;}
table.infobox.leerlijn-chron th {background-color: LightSeaGreen;}
table.infobox.leerlijn-ouderen th {background-color: DodgerBlue;}
table.infobox.leerlijn-kind th {background-color: DarkMagenta;}
table.infobox.leerlijn-psych th {background-color: Crimson;}
table.infobox.leerlijn-solk th {background-color: OrangeRed;}
table.infobox.leerlijn-pall th {background-color: DarkOrange;}
table.infobox.leerlijn-preventie th {background-color: Gold;}
table.infobox.leerlijn-praktijk th {background-color: LightSlateGray;}
table.infobox.leerlijn-medisch th {background-color: Beige; color: #666;}
table.infobox.leerlijn-communicatie th {background-color: Seashell; color: #666;}
table.infobox.leerlijn-maatschappelijk th {background-color: Honeydew; color: #666;}
table.infobox.leerlijn-wetenschap th {background-color: AliceBlue; color: #666;}
table.infobox.leerlijn-ethiek th {background-color: Honeydew; color: #666;}
table.infobox.leerlijn-prof th {background-color: LavenderBlush; color: #666;}
table.infobox.leerlijn-intercult th {background-color: WhiteSmoke; color: #666;}

table.infobox tr {
	border: 1px solid;
	font-size: 100%;
}
table.infobox.huisarts1 tr {border: 1px solid #4ea24e;}
table.infobox.klin tr {border: 1px solid #228b22;}
table.infobox.cz tr {border: 1px solid #4aa6ff;}
table.infobox.ggz tr {border: 1px solid #1c86ee;}
table.infobox.huisarts2 tr {border: 1px solid #1874cd;}
table.infobox.regelgeving tr {border: 1px solid #666;}
table.infobox.regelgeving-sv tr {border: 1px solid #666;}
table.infobox.leerlijn-kort tr {border: 1px solid YellowGreen;}
table.infobox.leerlijn-spoed tr {border: 1px solid ForestGreen;}
table.infobox.leerlijn-chron tr {border: 1px solid LightSeaGreen;}
table.infobox.leerlijn-ouderen tr {border: 1px solid DodgerBlue;}
table.infobox.leerlijn-kind tr {border: 1px solid DarkMagenta;}
table.infobox.leerlijn-psych tr {border: 1px solid Crimson;}
table.infobox.leerlijn-solk tr {border: 1px solid OrangeRed;}
table.infobox.leerlijn-pall tr {border: 1px solid DarkOrange;}
table.infobox.leerlijn-preventie tr {border: 1px solid Gold;}
table.infobox.leerlijn-praktijk tr {border: 1px solid LightSlateGray;}
table.infobox.leerlijn-medisch tr {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-communicatie tr {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-maatschappelijk tr {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-wetenschap tr {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-ethiek tr {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-prof tr {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-intercult tr {border: 1px solid #a2a9b1;}

table.infobox td {
	padding: 5px 5px 0px 5px;
	vertical-align: top;
	font-size: 100%;
}
table.infobox.huisarts1.cel td {border: 1px solid #4ea24e;}
table.infobox.klin.cel td {border: 1px solid #228b22;}
table.infobox.cz.cel td {border: 1px solid #4aa6ff;}
table.infobox.ggz.cel td {border: 1px solid #1c86ee;}
table.infobox.huisarts2.cel td {border: 1px solid #1874cd;}
table.infobox.regelgeving.cel td {border: 1px solid #666;}
table.infobox.regelgeving-sv.cel td {border: 1px solid #666;}
table.infobox.leerlijn-kort.cel td {border: 1px solid YellowGreen;}
table.infobox.leerlijn-spoed.cel td {border: 1px solid ForestGreen;}
table.infobox.leerlijn-chron.cel td {border: 1px solid LightSeaGreen;}
table.infobox.leerlijn-ouderen.cel td {border: 1px solid DodgerBlue;}
table.infobox.leerlijn-kind.cel td {border: 1px solid DarkMagenta;}
table.infobox.leerlijn-psych.cel td {border: 1px solid Crimson;}
table.infobox.leerlijn-solk.cel td {border: 1px solid OrangeRed;}
table.infobox.leerlijn-pall.cel td {border: 1px solid DarkOrange;}
table.infobox.leerlijn-preventie.cel td {border: 1px solid Gold;}
table.infobox.leerlijn-praktijk.cel td {border: 1px solid LightSlateGray;}
table.infobox.leerlijn-medisch.cel td {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-communicatie.cel td {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-maatschappelijk.cel td {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-wetenschap.cel td {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-ethiek.cel td {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-prof.cel td {border: 1px solid #a2a9b1;}
table.infobox.leerlijn-intercult.cel td {border: 1px solid #a2a9b1;}

table.infobox.desktop th {
	padding-top:10px
	padding-right:20px
	padding-bottom:10px
	padding-left:20px
	text-align:center; 
	color: white;
	font-size: 100%;
}

@media only screen and (max-width: 600px) {
	table.infobox {
	width: 100% !important;
	margin-left: 0px !important;
	float: none;
    }
}

@media only screen and (max-width: 600px) {
	#desktop { 
	display: none; 
    }
}

@media only screen and (min-width: 601px) {
	#desktop { 
	display: block;
	width: 100% important!; 
    }
}

@media only screen and (max-width: 600px) {
	#mobiel { 
	display: block;
	width: 100% important!;
    }
}

@media only screen and (min-width: 600px) {
	#mobiel { 
	display: none; 
	width: 100% important!;
    }
}

.modal-dialog{text-align:center;}
.modal-content{display:inline-block;}

.timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
}

    .timeline:before {
        top: 0;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 3px;
        background-color: #eeeeee;
        left: 50%;
        margin-left: -1.5px;
    }

    .timeline > li {
        margin-bottom: 20px;
        position: relative;
    }

        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }

        .timeline > li:after {
            clear: both;
        }

        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }

        .timeline > li:after {
            clear: both;
        }

        .timeline > li > .timeline-panel {
            width: 46%;
            float: left;
            border: 1px solid #d4d4d4;
            border-radius: 2px;
            padding: 20px;
            position: relative;
            -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
        }

            .timeline > li > .timeline-panel:before {
                position: absolute;
                top: 26px;
                right: -15px;
                display: inline-block;
                border-top: 15px solid transparent;
                border-left: 15px solid #ccc;
                border-right: 0 solid #ccc;
                border-bottom: 15px solid transparent;
                content: " ";
            }

            .timeline > li > .timeline-panel:after {
                position: absolute;
                top: 27px;
                right: -14px;
                display: inline-block;
                border-top: 14px solid transparent;
                border-left: 14px solid #fff;
                border-right: 0 solid #fff;
                border-bottom: 14px solid transparent;
                content: " ";
            }

        .timeline > li > .timeline-badge {
            color: #fff;
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 1.4em;
            text-align: center;
            position: absolute;
            top: 16px;
            left: 50%;
            margin-left: -25px;
            background-color: #999999;
            z-index: 100;
            border-top-right-radius: 50%;
            border-top-left-radius: 50%;
            border-bottom-right-radius: 50%;
            border-bottom-left-radius: 50%;
        }

        .timeline > li.timeline-inverted > .timeline-panel {
            float: right;
        }

            .timeline > li.timeline-inverted > .timeline-panel:before {
                border-left-width: 0;
                border-right-width: 15px;
                left: -15px;
                right: auto;
            }

            .timeline > li.timeline-inverted > .timeline-panel:after {
                border-left-width: 0;
                border-right-width: 14px;
                left: -14px;
                right: auto;
            }

.timeline-badge.primary {
    background-color: #2e6da4 !important;
}

.timeline-badge.success {
    background-color: #3f903f !important;
}

.timeline-badge.warning {
    background-color: #f0ad4e !important;
}

.timeline-badge.danger {
    background-color: #d9534f !important;
}

.timeline-badge.info {
    background-color: #5bc0de !important;
}

.timeline-title {
    margin-top: 0;
    color: inherit;
}

.timeline-body > p,
.timeline-body > ul {
    margin-bottom: 0;
}

    .timeline-body > p + p {
        margin-top: 5px;
    }

@media (max-width: 767px) {
    ul.timeline:before {
        left: 40px;
    }

    ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
    }

    ul.timeline > li > .timeline-badge {
        left: 15px;
        margin-left: 0;
        top: 16px;
    }

    ul.timeline > li > .timeline-panel {
        float: right;
    }

        ul.timeline > li > .timeline-panel:before {
            border-left-width: 0;
            border-right-width: 15px;
            left: -15px;
            right: auto;
        }

        ul.timeline > li > .timeline-panel:after {
            border-left-width: 0;
            border-right-width: 14px;
            left: -14px;
            right: auto;
        }
}

@@ Regel 207: / Regel 207: @@
 .modal-content{display:inline-block;}
-/** The Magic **/
-.btn-breadcrumb .btn:not(:last-child):after {
-  content: " ";
-  display: block;
-  width: 0;
-  height: 0;
-  border-top: 17px solid transparent;
-  border-bottom: 17px solid transparent;
-  border-left: 10px solid white;
-  position: absolute;
-  top: 50%;
-  margin-top: -17px;
-  left: 100%;
-  z-index: 3;
-}
-.btn-breadcrumb .btn:not(:last-child):before {
-  content: " ";
-  display: block;
-  width: 0;
-  height: 0;
-  border-top: 17px solid transparent;
-  border-bottom: 17px solid transparent;
-  border-left: 10px solid rgb(173, 173, 173);
-  position: absolute;
-  top: 50%;
-  margin-top: -17px;
-  margin-left: 1px;
-  left: 100%;
-  z-index: 3;
-}
-@body-bg: #ffffff;
-@text-color: #373737;
-@gray-base: #494949;
-@gray-darker: #222;
-@gray-dark: #333;
-@gray: #555;
-@gray-light: #777;
-@gray-lighter: #eee;
-@brand-primary: #1f9eba;
-@brand-success: #59ba1f;
-@brand-info: #5bc0de;
-@brand-warning: #d1bd10;
-@brand-danger: #ba1f1f;
-/* Timeline */
 .timeline {
      list-style: none;
-     padding: 20px;
+     padding: 20px 0 20px;
      position: relative;
-	&:before {
+}
-         top: 40px;
+    .timeline:before {
+         top: 0;
          bottom: 0;
          position: absolute;
@@ Regel 270: / Regel 223: @@
          margin-left: -1.5px;
      }
-	.timeline-item {
+    .timeline > li {
          margin-bottom: 20px;
          position: relative;
-		&:before,
+    }
-		&:after {
-             content: "";
+        .timeline > li:before,
+        .timeline > li:after {
+             content: " ";
              display: table;
          }
-		&:after {
+        .timeline > li:after {
              clear: both;
          }
-		.timeline-badge {
-            color: #fff;
+        .timeline > li:before,
-            width: 54px;
+        .timeline > li:after {
-            height: 54px;
+             content: " ";
-            line-height: 52px;
+             display: table;
-            font-size: 22px;
+        }
-            text-align: center;
-            position: absolute;
+        .timeline > li:after {
-            top: 18px;
+            clear: both;
-            left: 50%;
-            margin-left: -25px;
-            background-color: @gray-dark;
-			border: 3px solid @body-bg;
-            z-index: 100;
-            border-top-right-radius: 50%;
-            border-top-left-radius: 50%;
-             border-bottom-right-radius: 50%;
-             border-bottom-left-radius: 50%;
-			i, .fa, .glyphicon {
-				top: 2px;
-				left: 0px;
-			}
-			&.primary {
-				background-color: @brand-primary;
-			}
-			&.info {
-				background-color: @brand-info;
-			}
-			&.success {
-				background-color: @brand-success;
-			}
-			&.warning {
-				background-color: @brand-warning;
-			}
-			&.danger {
-				background-color: @brand-danger;
-			}
          }
-		.timeline-panel {
-            position: relative;
+        .timeline > li > .timeline-panel {
              width: 46%;
              float: left;
-			right: 16px;
+             border: 1px solid #d4d4d4;
-             border: 1px solid @gray-light;
-			background: @body-bg;
              border-radius: 2px;
              padding: 20px;
+            position: relative;
              -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
              box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
-			&:before {
+        }
+            .timeline > li > .timeline-panel:before {
                  position: absolute;
                  top: 26px;
-                 right: -16px;
+                 right: -15px;
+                display: inline-block;
+                border-top: 15px solid transparent;
+                border-left: 15px solid #ccc;
+                border-right: 0 solid #ccc;
+                border-bottom: 15px solid transparent;
+                content: " ";
+            }
+            .timeline > li > .timeline-panel:after {
+                position: absolute;
+                top: 27px;
+                right: -14px;
                  display: inline-block;
-                 border-top: 16px solid transparent;
+                 border-top: 14px solid transparent;
-                 border-left: 16px solid @gray-light;
+                 border-left: 14px solid #fff;
-                 border-right: 0 solid @gray-light;
+                 border-right: 0 solid #fff;
-                 border-bottom: 16px solid transparent;
+                 border-bottom: 14px solid transparent;
                  content: " ";
              }
-			.timeline-title {
-    			margin-top: 0;
+        .timeline > li > .timeline-badge {
-    			color: inherit;
+            color: #fff;
-			}
+            width: 50px;
-			.timeline-body > p,
+            height: 50px;
-			.timeline-body > ul {
+            line-height: 50px;
-    			margin-bottom: 0;
+            font-size: 1.4em;
-			}
+            text-align: center;
-			.timeline-body > p + p {
+            position: absolute;
-        		margin-top: 5px;
+            top: 16px;
-    		}
+            left: 50%;
+            margin-left: -25px;
+            background-color: #999999;
+            z-index: 100;
+            border-top-right-radius: 50%;
+            border-top-left-radius: 50%;
+            border-bottom-right-radius: 50%;
+            border-bottom-left-radius: 50%;
          }
+        .timeline > li.timeline-inverted > .timeline-panel {
+            float: right;
+        }
+            .timeline > li.timeline-inverted > .timeline-panel:before {
+                border-left-width: 0;
+                border-right-width: 15px;
+                left: -15px;
+                right: auto;
+            }
+            .timeline > li.timeline-inverted > .timeline-panel:after {
+                border-left-width: 0;
+                border-right-width: 14px;
+                left: -14px;
+                right: auto;
+            }
+.timeline-badge.primary {
+    background-color: #2e6da4 !important;
+}
+.timeline-badge.success {
+    background-color: #3f903f !important;
+}
+.timeline-badge.warning {
+    background-color: #f0ad4e !important;
+}
+.timeline-badge.danger {
+    background-color: #d9534f !important;
+}
+.timeline-badge.info {
+    background-color: #5bc0de !important;
+}
+.timeline-title {
+    margin-top: 0;
+    color: inherit;
+}
+.timeline-body > p,
+.timeline-body > ul {
+    margin-bottom: 0;
+}
+    .timeline-body > p + p {
+        margin-top: 5px;
+    }
+@media (max-width: 767px) {
+    ul.timeline:before {
+        left: 40px;
+    }
+    ul.timeline > li > .timeline-panel {
+        width: calc(100% - 90px);
+        width: -moz-calc(100% - 90px);
+        width: -webkit-calc(100% - 90px);
      }
-	.timeline-item:last-child {
-		&:nth-child(even) {
+    ul.timeline > li > .timeline-badge {
-			float: right;
+        left: 15px;
-		}
+        margin-left: 0;
-	}
+        top: 16px;
-	.timeline-item:nth-child(even) {
+    }
-		.timeline-panel {
-			float: right;
+    ul.timeline > li > .timeline-panel {
-			left: 16px;
+         float: right;
-			&:before {
-				border-left-width: 0;
-				border-right-width: 14px;
-				left: -14px;
-				right: auto;
-			}
-		}
-	}
-}
-.timeline-horizontal:extend(.timeline) {
-    list-style: none;
-    position: relative;
-	padding: 20px 0px 20px 0px;
-	display: inline-block;
-	&:before {
-         height: 3px;
-		top: auto;
-        bottom: 26px;
-		left: 56px;
-		right: 0;
-		width: 100%;
-		margin-bottom: 20px;
      }
-	.timeline-item {
-		display: table-cell;
+        ul.timeline > li > .timeline-panel:before {
-		height: 280px;
+            border-left-width: 0;
-		width: 20%;
+            border-right-width: 15px;
-		min-width: 320px;
+            left: -15px;
-		float: none !important;
+             right: auto;
-		padding-left: 0px;
-		padding-right: 20px;
-		margin: 0 auto;
-		vertical-align: bottom;
-		.timeline-panel {
-			top: auto;
-			bottom: 64px;
-			display: inline-block;
-			float: none !important;
-			left: 0 !important;
-			right: 0 !important;
-			width: 100%;
-			margin-bottom: 20px;
-			&:before {
-            	top: auto;
-            	bottom: -16px;
-				left: 28px !important;
-				right: auto;
-                border-right: 16px solid transparent !important;
-                border-top: 16px solid @gray-light !important;
-                border-bottom: 0 solid @gray-light !important;
-                border-left: 16px solid transparent !important;
-             }
-		}
-		&:before,
-		&:after {
-            display: none;
          }
-		.timeline-badge {
-             top: auto;
+        ul.timeline > li > .timeline-panel:after {
-             bottom: 0px;
+             border-left-width: 0;
-             left: 43px;
+             border-right-width: 14px;
+             left: -14px;
+            right: auto;
          }
-	}
 }