MediaWiki: Common.css: verschil tussen versies
Uit Wiki HOVUmc
k |
k |
||
Regel 241: | Regel 241: | ||
} | } | ||
− | + | @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; | |
− | + | position: relative; | |
− | + | &:before { | |
− | } | + | top: 40px; |
− | . | + | bottom: 0; |
− | + | position: absolute; | |
− | + | content: " "; | |
− | + | width: 3px; | |
− | + | background-color: #eeeeee; | |
− | + | left: 50%; | |
− | + | margin-left: -1.5px; | |
− | + | } | |
− | . | + | .timeline-item { |
− | + | margin-bottom: 20px; | |
− | } | + | position: relative; |
− | . | + | &:before, |
− | + | &:after { | |
− | } | + | content: ""; |
− | . | + | display: table; |
− | + | } | |
+ | &:after { | ||
+ | clear: both; | ||
+ | } | ||
+ | .timeline-badge { | ||
+ | color: #fff; | ||
+ | width: 54px; | ||
+ | height: 54px; | ||
+ | line-height: 52px; | ||
+ | font-size: 22px; | ||
+ | text-align: center; | ||
+ | position: absolute; | ||
+ | top: 18px; | ||
+ | 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; | ||
+ | width: 46%; | ||
+ | float: left; | ||
+ | right: 16px; | ||
+ | border: 1px solid @gray-light; | ||
+ | background: @body-bg; | ||
+ | border-radius: 2px; | ||
+ | padding: 20px; | ||
+ | -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); | ||
+ | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); | ||
+ | &:before { | ||
+ | position: absolute; | ||
+ | top: 26px; | ||
+ | right: -16px; | ||
+ | display: inline-block; | ||
+ | border-top: 16px solid transparent; | ||
+ | border-left: 16px solid @gray-light; | ||
+ | border-right: 0 solid @gray-light; | ||
+ | border-bottom: 16px solid transparent; | ||
+ | content: " "; | ||
+ | } | ||
+ | .timeline-title { | ||
+ | margin-top: 0; | ||
+ | color: inherit; | ||
+ | } | ||
+ | .timeline-body > p, | ||
+ | .timeline-body > ul { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | .timeline-body > p + p { | ||
+ | margin-top: 5px; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | .timeline-item:last-child { | ||
+ | &:nth-child(even) { | ||
+ | float: right; | ||
+ | } | ||
+ | } | ||
+ | .timeline-item:nth-child(even) { | ||
+ | .timeline-panel { | ||
+ | float: right; | ||
+ | left: 16px; | ||
+ | &: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; | ||
+ | height: 280px; | ||
+ | width: 20%; | ||
+ | min-width: 320px; | ||
+ | float: none !important; | ||
+ | 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; | ||
+ | bottom: 0px; | ||
+ | left: 43px; | ||
+ | } | ||
+ | |||
+ | } | ||
} | } |
Versie van 9 apr 2019 om 10:13
/** 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;}
/** 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;
position: relative;
&:before {
top: 40px;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline-item {
margin-bottom: 20px;
position: relative;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
.timeline-badge {
color: #fff;
width: 54px;
height: 54px;
line-height: 52px;
font-size: 22px;
text-align: center;
position: absolute;
top: 18px;
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;
width: 46%;
float: left;
right: 16px;
border: 1px solid @gray-light;
background: @body-bg;
border-radius: 2px;
padding: 20px;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
&:before {
position: absolute;
top: 26px;
right: -16px;
display: inline-block;
border-top: 16px solid transparent;
border-left: 16px solid @gray-light;
border-right: 0 solid @gray-light;
border-bottom: 16px solid transparent;
content: " ";
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
}
}
.timeline-item:last-child {
&:nth-child(even) {
float: right;
}
}
.timeline-item:nth-child(even) {
.timeline-panel {
float: right;
left: 16px;
&: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;
height: 280px;
width: 20%;
min-width: 320px;
float: none !important;
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;
bottom: 0px;
left: 43px;
}
}
}