diff --git a/NEWS b/NEWS index 343ef25..1a10216 100644 --- a/NEWS +++ b/NEWS @@ -2,6 +2,12 @@ ## BlueSky 3.x +### BlueSky 3.2.x + +#### BlueSky 3.2.0 + +- Refactoring complet de la fiche pour être plus proche des mes styles récents. + ### BlueSky 3.1.x ### BlueSky 3.1.1 diff --git a/color-test.html b/color-test.html index f958a83..a4165ae 100644 --- a/color-test.html +++ b/color-test.html @@ -17,7 +17,7 @@ - + diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 6d1e520..0000000 --- a/css/style.css +++ /dev/null @@ -1,943 +0,0 @@ -/* ------------------ CUSTOM STYLE ------------------- */ -#wrapper { - background: #64b5f6 url("../img/background.png") center bottom repeat-x; } - -/* ------------------ GLOBAL STYLE ------------------- */ -.no-pills { - list-style: none; } - -.align-center { - text-align: center; } - -.align-left { - text-align: left; } - -.align-right { - text-align: right; } - -h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 { - color: white; - text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4); } - -/* ------------------ HEADERS ------------------- */ -header h1 { - border-style: none !important; - color: #FFF; - font-weight: 700; - font-size: 5.4em; - font-style: oblique; - text-shadow: 0px 2px 12px transparent; - padding-bottom: 0px; - margin: auto; - text-align: center; - line-height: 1.5em; } - -.navbar { - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); - border: 1px solid rgba(0, 0, 0, 0.3); - border-left: 0; - border-right: 0; } - .navbar ul { - padding-bottom: 0; } - .navbar li { - margin: 0; } - -.dropdown-menu { - box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); } - -/* ------------------ FOOTER ------------------- */ -footer { - margin-top: 40px; } - -/* social media */ -ul.social { - font-size: 1.5em; - padding-bottom: 1em; - margin: auto; - text-align: center; } - ul.social li { - margin: 0; - list-style: none; - display: inline; } - ul.social li a { - color: #FFFFFF; - background-color: #000000; - padding: 0.3em; - padding-left: 0.36em; - padding-right: 0.36em; - vertical-align: middle; - border-radius: 100%; } - ul.social li a:hover { - color: #000; - background-color: #FFF; } - -/* ------------------ CARDS ------------------- */ -.card { - border-radius: 3px 3px 3px 3px; - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); - border: none; - margin-bottom: 1.2em; } - -.card-shadow { - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); } - -.card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card h7, .card h8, .card h9, .card h10 { - color: #333; - text-shadow: 0px 0px 0px transparent; } - -/* header and titles */ -.card-header { - border: 1px solid rgba(0, 0, 0, 0.3); - font-size: 1.1em; - box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.1); - text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); - font-weight: 600; - border-radius: 0; } - .card-header:first-child { - border-radius: 3px 3px 3px 3px; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; } - .card-header:last-child { - border-radius: 3px 3px 3px 3px; - border-top-left-radius: 0; - border-top-right-radius: 0; } - .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10 { - font-size: 1em; - text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); - padding: 0px; - margin: 0px; - color: #FFF; - font-weight: 600; - line-height: 1.5em; } - -/* meta */ -.card-meta { - padding: 1em; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); } - .card-meta.media { - -ms-flex-align: center !important; - align-items: center !important; } - .card-meta .media-left .media-object { - height: 64px; - width: 64px; - border-radius: 10px; - margin-right: 1em; } - .card-meta author { - display: block; - font-weight: 600; } - .card-meta time { - display: block; - font-style: italic; } - -/* lists */ -.list-group-item { - border: none; - background-color: transparent; } - -a.list-group-item:hover { - border-style: none; - border-width: 0px; - border-radius: 0px; - background-color: rgba(0, 0, 0, 0.1); } - -/* ------------------ BUTTONS ------------------- */ -.btn { - border: 1px solid rgba(0, 0, 0, 0.3); - border-radius: 3px 3px 3px 3px; - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); - text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); } - -.btn:hover { - position: relative; - box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); - top: 1px; - border: 1px solid rgba(0, 0, 0, 0.3); } - -.btn:active { - position: relative; - box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2); - top: 2px; - border: 1px solid rgba(0, 0, 0, 0.3); } - -.btn-group { - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); } - -.btn-group .btn { - box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2); - border-radius: 3px 3px 3px 3px; } - .btn-group .btn:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; } - .btn-group .btn:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - -.btn-group .btn:hover { - position: relative; - top: 1px; - box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2); } - -.btn-group .btn:active, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active, -.show > .btn.dropdown-toggle { - position: relative; - box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2) !important; - top: 2px; - border: 1px solid rgba(0, 0, 0, 0.3); } - -.btn:focus, .btn-primary:focus, .btn-secondary:focus, .btn-danger:focus, .btn-warning:focus, .btn-success:focus, .btn-info:focus, .btn-dark:focus, .btn-light:focus { - position: relative; - box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(0, 0, 0, 0.3); - top: 1px; - outline: none; } - -/* ------------------ ALERTS ------------------- */ -.alert { - border: 1px solid rgba(0, 0, 0, 0.3); - border-radius: 3px 3px 3px 3px; - color: rgba(0, 0, 0, 0.7); - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); } - -.alert a, .alert-link { - color: rgba(0, 0, 0, 0.7); - font-weight: bold; } - -/* ------------------ BREADCRUMB ------------------- */ -.breadcrumb { - border-radius: 3px 3px 3px 3px; - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); - border: 0; - background-color: #eeeeec; - margin-bottom: 1.2em; } - .breadcrumb li { - margin: 0; } - -/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */ -.share-buttons { - margin: 15px; } - -.reagir { - text-align: right; } - -/* ------------------ PREVIEWS ------------------- */ -.previews-section { - display: flex; - align-content: flex-start; - flex-wrap: wrap; } - -.preview-container { - margin-bottom: 1em; - padding: 0.4em; - width: 100%; } - -@media (min-width: 992px) { - .prev-col-2 .preview-container { - width: 50%; } - .prev-col-3 .preview-container { - width: 33%; } - .prev-col-4 .preview-container { - width: 25%; } } - -.card-preview { - border-radius: 3px 3px 3px 3px; - width: 100%; - margin: auto; - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); } - -.preview-link:hover { - text-decoration: none !important; } - -.preview-item { - height: 200px; - overflow: hidden; - font-size: 0.9em; - line-height: 1.5em !important; - padding: 0.2em; - text-align: justify; - background-color: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.4); - position: relative; - display: flex; - -ms-flex-align: center !important; - align-items: center !important; - justify-content: center; } - -.preview-content { - max-height: 200px; } - -.preview-content > p { - width: 100%; - margin: auto; } - -.preview-content > p.p-img { - text-align: center; - margin: auto; - padding: auto; - display: block; - width: 100%; } - -.preview-content > p > img { - max-width: 100%; - height: auto; - vertical-align: middle; - margin: auto; - text-align: center; } - -.preview-item h1, .preview-item h2, .preview-item h3, .preview-item h4, .preview-item h5, .preview-item h6, .preview-item h7 { - margin-bottom: 0px; - max-width: 100%; - display: none; } - -.preview-item h1 { - display: none; } - -.preview-overlay { - height: 100%; - width: 100%; - opacity: 0; - top: 0; - left: 0; - position: absolute; - padding: 0; - transition: opacity .5s; - color: #FFF; - background-color: rgba(0, 0, 0, 0.5); - text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7); - backdrop-filter: none; } - -.preview-overlay h1 { - max-width: 100%; - padding-top: 0.3em; - margin: auto; - margin-bottom: 0px; - text-align: center; - display: block; - font-size: 2em; - color: white; } - -.preview-overlay h1, .preview-overlay h2, .preview-overlay h3, .preview-overlay h4, .preview-overlay h5, .preview-overlay h6, .preview-overlay h7, .preview-overlay h8, .preview-overlay h9, .preview-overlay h10 { - color: white; - text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7); } - -.preview-item:hover .preview-overlay { - opacity: .9; - transition: opacity .5s; - backdrop-filter: blur(2px); } - -.comment-text { - margin-top: 0.8em; } - -.card-preview time { - margin-bottom: 0.4em; - display: block; } - -/* ------------------ COULEURS ------------------- */ -a, a:hover, a:active { - color: #4e63c9; } - -::selection { - background-color: #4e63c9 !important; - color: #FFF; } - -::-moz-selection { - background-color: #4e63c9 !important; - color: #FFF; } - -/* CARDS */ -.card-blue > .card-header { - background-color: #4e63c9; - color: #FFF; } - -.card-violet > .card-header { - background-color: #ce4dcd; - color: #FFF; } - -.card-purple > .card-header { - background-color: #7951c0; - color: #FFF; } - -.card-red > .card-header { - background-color: #e33d22; - color: #FFF; } - -.card-orange > .card-header { - background-color: #eb790a; - color: #FFF; } - -.card-green > .card-header { - background-color: #75b82d; - color: #FFF; } - -.card-skyblue > .card-header { - background-color: #42a0f3; - color: #FFF; } - -.card-dark > .card-header { - background-color: #2D2D2D; - color: #FFF; } - -.card-light > .card-header { - background-color: #eeeeec; - color: #111; } - -.card-turquoise > .card-header { - background-color: #46bd9e; - color: #FFF; } - -.card-yellow > .card-header { - background-color: #f6d32d; - color: #FFF; } - -.card-brown > .card-header { - background-color: #986a44; - color: #FFF; } - -.card-grey > .card-header { - background-color: #77767b; - color: #FFF; } - -.card-primary > .card-header { - background-color: #7951c0; - color: #FFF; } - -.card-secondary > .card-header { - background-color: #4e63c9; - color: #FFF; } - -.card-warning > .card-header { - background-color: #eb790a; - color: #FFF; } - -.card-danger > .card-header { - background-color: #e33d22; - color: #FFF; } - -.card-info > .card-header { - background-color: #42a0f3; - color: #FFF; } - -.card-success > .card-header { - background-color: #75b82d; - color: #FFF; } - -/* BUTTONS & BADGES */ -.btn-blue { - background-color: #4e63c9; - color: #FFF; } - .btn-blue:hover, .btn-blue:active, .btn-blue:focus, .btn-blue:not(.disabled):not(:disabled):hover, .btn-blue:not(.disabled):not(:disabled):active, .btn-blue:not(.disabled):not(:disabled):focus { - background-color: #7585d5; - color: #FFF; } - -.btn-violet { - background-color: #ce4dcd; - color: #FFF; } - .btn-violet:hover, .btn-violet:active, .btn-violet:focus, .btn-violet:not(.disabled):not(:disabled):hover, .btn-violet:not(.disabled):not(:disabled):active, .btn-violet:not(.disabled):not(:disabled):focus { - background-color: #d975d8; - color: #FFF; } - -.btn-purple { - background-color: #7951c0; - color: #FFF; } - .btn-purple:hover, .btn-purple:active, .btn-purple:focus, .btn-purple:not(.disabled):not(:disabled):hover, .btn-purple:not(.disabled):not(:disabled):active, .btn-purple:not(.disabled):not(:disabled):focus { - background-color: #9676ce; - color: #FFF; } - -.btn-red { - background-color: #e33d22; - color: #FFF; } - .btn-red:hover, .btn-red:active, .btn-red:focus, .btn-red:not(.disabled):not(:disabled):hover, .btn-red:not(.disabled):not(:disabled):active, .btn-red:not(.disabled):not(:disabled):focus { - background-color: #e9654f; - color: #FFF; } - -.btn-orange { - background-color: #eb790a; - color: #FFF; } - .btn-orange:hover, .btn-orange:active, .btn-orange:focus, .btn-orange:not(.disabled):not(:disabled):hover, .btn-orange:not(.disabled):not(:disabled):active, .btn-orange:not(.disabled):not(:disabled):focus { - background-color: #f69332; - color: #FFF; } - -.btn-green { - background-color: #75b82d; - color: #FFF; } - .btn-green:hover, .btn-green:active, .btn-green:focus, .btn-green:not(.disabled):not(:disabled):hover, .btn-green:not(.disabled):not(:disabled):active, .btn-green:not(.disabled):not(:disabled):focus { - background-color: #8fd246; - color: #FFF; } - -.btn-skyblue { - background-color: #42a0f3; - color: #FFF; } - .btn-skyblue:hover, .btn-skyblue:active, .btn-skyblue:focus, .btn-skyblue:not(.disabled):not(:disabled):hover, .btn-skyblue:not(.disabled):not(:disabled):active, .btn-skyblue:not(.disabled):not(:disabled):focus { - background-color: #72b8f6; - color: #FFF; } - -.btn-dark { - background-color: #2D2D2D; - color: #FFF; } - .btn-dark:hover, .btn-dark:active, .btn-dark:focus, .btn-dark:not(.disabled):not(:disabled):hover, .btn-dark:not(.disabled):not(:disabled):active, .btn-dark:not(.disabled):not(:disabled):focus { - background-color: #474747; - color: #FFF; } - -.btn-light { - background-color: #eeeeec; - color: #111; } - .btn-light:hover, .btn-light:active, .btn-light:focus, .btn-light:not(.disabled):not(:disabled):hover, .btn-light:not(.disabled):not(:disabled):active, .btn-light:not(.disabled):not(:disabled):focus { - background-color: white; - color: #111; } - -.btn-turquoise { - background-color: #46bd9e; - color: #FFF; } - .btn-turquoise:hover, .btn-turquoise:active, .btn-turquoise:focus, .btn-turquoise:not(.disabled):not(:disabled):hover, .btn-turquoise:not(.disabled):not(:disabled):active, .btn-turquoise:not(.disabled):not(:disabled):focus { - background-color: #6ccab2; - color: #FFF; } - -.btn-yellow { - background-color: #f6d32d; - color: #FFF; } - .btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus, .btn-yellow:not(.disabled):not(:disabled):hover, .btn-yellow:not(.disabled):not(:disabled):active, .btn-yellow:not(.disabled):not(:disabled):focus { - background-color: #f8dd5e; - color: #FFF; } - -.btn-brown { - background-color: #986a44; - color: #FFF; } - .btn-brown:hover, .btn-brown:active, .btn-brown:focus, .btn-brown:not(.disabled):not(:disabled):hover, .btn-brown:not(.disabled):not(:disabled):active, .btn-brown:not(.disabled):not(:disabled):focus { - background-color: #b5835a; - color: #FFF; } - -.btn-grey { - background-color: #77767b; - color: #FFF; } - .btn-grey:hover, .btn-grey:active, .btn-grey:focus, .btn-grey:not(.disabled):not(:disabled):hover, .btn-grey:not(.disabled):not(:disabled):active, .btn-grey:not(.disabled):not(:disabled):focus { - background-color: #919094; - color: #FFF; } - -.btn-primary { - background-color: #7951c0; - color: #FFF; } - .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:not(.disabled):not(:disabled):hover, .btn-primary:not(.disabled):not(:disabled):active, .btn-primary:not(.disabled):not(:disabled):focus { - background-color: #9676ce; - color: #FFF; } - -.btn-secondary { - background-color: #4e63c9; - color: #FFF; } - .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:not(.disabled):not(:disabled):hover, .btn-secondary:not(.disabled):not(:disabled):active, .btn-secondary:not(.disabled):not(:disabled):focus { - background-color: #7585d5; - color: #FFF; } - -.btn-warning { - background-color: #eb790a; - color: #FFF; } - .btn-warning:hover, .btn-warning:active, .btn-warning:focus, .btn-warning:not(.disabled):not(:disabled):hover, .btn-warning:not(.disabled):not(:disabled):active, .btn-warning:not(.disabled):not(:disabled):focus { - background-color: #f69332; - color: #FFF; } - -.btn-danger { - background-color: #e33d22; - color: #FFF; } - .btn-danger:hover, .btn-danger:active, .btn-danger:focus, .btn-danger:not(.disabled):not(:disabled):hover, .btn-danger:not(.disabled):not(:disabled):active, .btn-danger:not(.disabled):not(:disabled):focus { - background-color: #e9654f; - color: #FFF; } - -.btn-info { - background-color: #42a0f3; - color: #FFF; } - .btn-info:hover, .btn-info:active, .btn-info:focus, .btn-info:not(.disabled):not(:disabled):hover, .btn-info:not(.disabled):not(:disabled):active, .btn-info:not(.disabled):not(:disabled):focus { - background-color: #72b8f6; - color: #FFF; } - -.btn-success { - background-color: #75b82d; - color: #FFF; } - .btn-success:hover, .btn-success:active, .btn-success:focus, .btn-success:not(.disabled):not(:disabled):hover, .btn-success:not(.disabled):not(:disabled):active, .btn-success:not(.disabled):not(:disabled):focus { - background-color: #8fd246; - color: #FFF; } - -/* social */ -.btn-facebook { - background-color: #3B5998; - color: #FFF; } - .btn-facebook:hover, .btn-facebook:active, .btn-facebook:focus, .btn-facebook:not(.disabled):not(:disabled):hover, .btn-facebook:not(.disabled):not(:disabled):active, .btn-facebook:not(.disabled):not(:disabled):focus { - background-color: #4c70ba; - color: #FFF; } - -.btn-twitter { - background-color: #55ACEE; - color: #FFF; } - .btn-twitter:hover, .btn-twitter:active, .btn-twitter:focus, .btn-twitter:not(.disabled):not(:disabled):hover, .btn-twitter:not(.disabled):not(:disabled):active, .btn-twitter:not(.disabled):not(:disabled):focus { - background-color: #83c3f3; - color: #FFF; } - -.btn-googleplus { - background-color: #d34836; - color: #FFF; } - .btn-googleplus:hover, .btn-googleplus:active, .btn-googleplus:focus, .btn-googleplus:not(.disabled):not(:disabled):hover, .btn-googleplus:not(.disabled):not(:disabled):active, .btn-googleplus:not(.disabled):not(:disabled):focus { - background-color: #dc6e60; - color: #FFF; } - -.btn-diaspora { - background-color: #313739; - color: #FFF; } - .btn-diaspora:hover, .btn-diaspora:active, .btn-diaspora:focus, .btn-diaspora:not(.disabled):not(:disabled):hover, .btn-diaspora:not(.disabled):not(:disabled):active, .btn-diaspora:not(.disabled):not(:disabled):focus { - background-color: #495154; - color: #FFF; } - -.btn-mastodon { - background-color: #282c37; - color: #FFF; } - .btn-mastodon:hover, .btn-mastodon:active, .btn-mastodon:focus, .btn-mastodon:not(.disabled):not(:disabled):hover, .btn-mastodon:not(.disabled):not(:disabled):active, .btn-mastodon:not(.disabled):not(:disabled):focus { - background-color: #3d4455; - color: #FFF; } - -/* BADGES */ -.badge-blue { - background-color: #4e63c9; - color: #FFF; } - .badge-blue:hover, .badge-blue:active, .badge-blue:focus, a:hover > .badge-blue, a:active > .badge-blue, a:focus > .badge-blue, .badge-blue:not(.disabled):not(:disabled):hover, .badge-blue:not(.disabled):not(:disabled):active, .badge-blue:not(.disabled):not(:disabled):focus, a:hover > .badge-blue:not(.disabled):not(:disabled), a:active > .badge-blue:not(.disabled):not(:disabled), a:focus > .badge-blue:not(.disabled):not(:disabled) { - background-color: #7585d5; - color: #FFF; } - -.badge-violet { - background-color: #ce4dcd; - color: #FFF; } - .badge-violet:hover, .badge-violet:active, .badge-violet:focus, a:hover > .badge-violet, a:active > .badge-violet, a:focus > .badge-violet, .badge-violet:not(.disabled):not(:disabled):hover, .badge-violet:not(.disabled):not(:disabled):active, .badge-violet:not(.disabled):not(:disabled):focus, a:hover > .badge-violet:not(.disabled):not(:disabled), a:active > .badge-violet:not(.disabled):not(:disabled), a:focus > .badge-violet:not(.disabled):not(:disabled) { - background-color: #d975d8; - color: #FFF; } - -.badge-purple { - background-color: #7951c0; - color: #FFF; } - .badge-purple:hover, .badge-purple:active, .badge-purple:focus, a:hover > .badge-purple, a:active > .badge-purple, a:focus > .badge-purple, .badge-purple:not(.disabled):not(:disabled):hover, .badge-purple:not(.disabled):not(:disabled):active, .badge-purple:not(.disabled):not(:disabled):focus, a:hover > .badge-purple:not(.disabled):not(:disabled), a:active > .badge-purple:not(.disabled):not(:disabled), a:focus > .badge-purple:not(.disabled):not(:disabled) { - background-color: #9676ce; - color: #FFF; } - -.badge-red { - background-color: #e33d22; - color: #FFF; } - .badge-red:hover, .badge-red:active, .badge-red:focus, a:hover > .badge-red, a:active > .badge-red, a:focus > .badge-red, .badge-red:not(.disabled):not(:disabled):hover, .badge-red:not(.disabled):not(:disabled):active, .badge-red:not(.disabled):not(:disabled):focus, a:hover > .badge-red:not(.disabled):not(:disabled), a:active > .badge-red:not(.disabled):not(:disabled), a:focus > .badge-red:not(.disabled):not(:disabled) { - background-color: #e9654f; - color: #FFF; } - -.badge-orange { - background-color: #eb790a; - color: #FFF; } - .badge-orange:hover, .badge-orange:active, .badge-orange:focus, a:hover > .badge-orange, a:active > .badge-orange, a:focus > .badge-orange, .badge-orange:not(.disabled):not(:disabled):hover, .badge-orange:not(.disabled):not(:disabled):active, .badge-orange:not(.disabled):not(:disabled):focus, a:hover > .badge-orange:not(.disabled):not(:disabled), a:active > .badge-orange:not(.disabled):not(:disabled), a:focus > .badge-orange:not(.disabled):not(:disabled) { - background-color: #f69332; - color: #FFF; } - -.badge-green { - background-color: #75b82d; - color: #FFF; } - .badge-green:hover, .badge-green:active, .badge-green:focus, a:hover > .badge-green, a:active > .badge-green, a:focus > .badge-green, .badge-green:not(.disabled):not(:disabled):hover, .badge-green:not(.disabled):not(:disabled):active, .badge-green:not(.disabled):not(:disabled):focus, a:hover > .badge-green:not(.disabled):not(:disabled), a:active > .badge-green:not(.disabled):not(:disabled), a:focus > .badge-green:not(.disabled):not(:disabled) { - background-color: #8fd246; - color: #FFF; } - -.badge-skyblue { - background-color: #42a0f3; - color: #FFF; } - .badge-skyblue:hover, .badge-skyblue:active, .badge-skyblue:focus, a:hover > .badge-skyblue, a:active > .badge-skyblue, a:focus > .badge-skyblue, .badge-skyblue:not(.disabled):not(:disabled):hover, .badge-skyblue:not(.disabled):not(:disabled):active, .badge-skyblue:not(.disabled):not(:disabled):focus, a:hover > .badge-skyblue:not(.disabled):not(:disabled), a:active > .badge-skyblue:not(.disabled):not(:disabled), a:focus > .badge-skyblue:not(.disabled):not(:disabled) { - background-color: #72b8f6; - color: #FFF; } - -.badge-dark { - background-color: #2D2D2D; - color: #FFF; } - .badge-dark:hover, .badge-dark:active, .badge-dark:focus, a:hover > .badge-dark, a:active > .badge-dark, a:focus > .badge-dark, .badge-dark:not(.disabled):not(:disabled):hover, .badge-dark:not(.disabled):not(:disabled):active, .badge-dark:not(.disabled):not(:disabled):focus, a:hover > .badge-dark:not(.disabled):not(:disabled), a:active > .badge-dark:not(.disabled):not(:disabled), a:focus > .badge-dark:not(.disabled):not(:disabled) { - background-color: #474747; - color: #FFF; } - -.badge-light { - background-color: #eeeeec; - color: #111; } - .badge-light:hover, .badge-light:active, .badge-light:focus, a:hover > .badge-light, a:active > .badge-light, a:focus > .badge-light, .badge-light:not(.disabled):not(:disabled):hover, .badge-light:not(.disabled):not(:disabled):active, .badge-light:not(.disabled):not(:disabled):focus, a:hover > .badge-light:not(.disabled):not(:disabled), a:active > .badge-light:not(.disabled):not(:disabled), a:focus > .badge-light:not(.disabled):not(:disabled) { - background-color: white; - color: #111; } - -.badge-turquoise { - background-color: #46bd9e; - color: #FFF; } - .badge-turquoise:hover, .badge-turquoise:active, .badge-turquoise:focus, a:hover > .badge-turquoise, a:active > .badge-turquoise, a:focus > .badge-turquoise, .badge-turquoise:not(.disabled):not(:disabled):hover, .badge-turquoise:not(.disabled):not(:disabled):active, .badge-turquoise:not(.disabled):not(:disabled):focus, a:hover > .badge-turquoise:not(.disabled):not(:disabled), a:active > .badge-turquoise:not(.disabled):not(:disabled), a:focus > .badge-turquoise:not(.disabled):not(:disabled) { - background-color: #6ccab2; - color: #FFF; } - -.badge-yellow { - background-color: #f6d32d; - color: #FFF; } - .badge-yellow:hover, .badge-yellow:active, .badge-yellow:focus, a:hover > .badge-yellow, a:active > .badge-yellow, a:focus > .badge-yellow, .badge-yellow:not(.disabled):not(:disabled):hover, .badge-yellow:not(.disabled):not(:disabled):active, .badge-yellow:not(.disabled):not(:disabled):focus, a:hover > .badge-yellow:not(.disabled):not(:disabled), a:active > .badge-yellow:not(.disabled):not(:disabled), a:focus > .badge-yellow:not(.disabled):not(:disabled) { - background-color: #f8dd5e; - color: #FFF; } - -.badge-brown { - background-color: #986a44; - color: #FFF; } - .badge-brown:hover, .badge-brown:active, .badge-brown:focus, a:hover > .badge-brown, a:active > .badge-brown, a:focus > .badge-brown, .badge-brown:not(.disabled):not(:disabled):hover, .badge-brown:not(.disabled):not(:disabled):active, .badge-brown:not(.disabled):not(:disabled):focus, a:hover > .badge-brown:not(.disabled):not(:disabled), a:active > .badge-brown:not(.disabled):not(:disabled), a:focus > .badge-brown:not(.disabled):not(:disabled) { - background-color: #b5835a; - color: #FFF; } - -.badge-grey { - background-color: #77767b; - color: #FFF; } - .badge-grey:hover, .badge-grey:active, .badge-grey:focus, a:hover > .badge-grey, a:active > .badge-grey, a:focus > .badge-grey, .badge-grey:not(.disabled):not(:disabled):hover, .badge-grey:not(.disabled):not(:disabled):active, .badge-grey:not(.disabled):not(:disabled):focus, a:hover > .badge-grey:not(.disabled):not(:disabled), a:active > .badge-grey:not(.disabled):not(:disabled), a:focus > .badge-grey:not(.disabled):not(:disabled) { - background-color: #919094; - color: #FFF; } - -.badge-primary { - background-color: #7951c0; - color: #FFF; } - .badge-primary:hover, .badge-primary:active, .badge-primary:focus, a:hover > .badge-primary, a:active > .badge-primary, a:focus > .badge-primary, .badge-primary:not(.disabled):not(:disabled):hover, .badge-primary:not(.disabled):not(:disabled):active, .badge-primary:not(.disabled):not(:disabled):focus, a:hover > .badge-primary:not(.disabled):not(:disabled), a:active > .badge-primary:not(.disabled):not(:disabled), a:focus > .badge-primary:not(.disabled):not(:disabled) { - background-color: #9676ce; - color: #FFF; } - -.badge-secondary { - background-color: #4e63c9; - color: #FFF; } - .badge-secondary:hover, .badge-secondary:active, .badge-secondary:focus, a:hover > .badge-secondary, a:active > .badge-secondary, a:focus > .badge-secondary, .badge-secondary:not(.disabled):not(:disabled):hover, .badge-secondary:not(.disabled):not(:disabled):active, .badge-secondary:not(.disabled):not(:disabled):focus, a:hover > .badge-secondary:not(.disabled):not(:disabled), a:active > .badge-secondary:not(.disabled):not(:disabled), a:focus > .badge-secondary:not(.disabled):not(:disabled) { - background-color: #7585d5; - color: #FFF; } - -.badge-warning { - background-color: #eb790a; - color: #FFF; } - .badge-warning:hover, .badge-warning:active, .badge-warning:focus, a:hover > .badge-warning, a:active > .badge-warning, a:focus > .badge-warning, .badge-warning:not(.disabled):not(:disabled):hover, .badge-warning:not(.disabled):not(:disabled):active, .badge-warning:not(.disabled):not(:disabled):focus, a:hover > .badge-warning:not(.disabled):not(:disabled), a:active > .badge-warning:not(.disabled):not(:disabled), a:focus > .badge-warning:not(.disabled):not(:disabled) { - background-color: #f69332; - color: #FFF; } - -.badge-danger { - background-color: #e33d22; - color: #FFF; } - .badge-danger:hover, .badge-danger:active, .badge-danger:focus, a:hover > .badge-danger, a:active > .badge-danger, a:focus > .badge-danger, .badge-danger:not(.disabled):not(:disabled):hover, .badge-danger:not(.disabled):not(:disabled):active, .badge-danger:not(.disabled):not(:disabled):focus, a:hover > .badge-danger:not(.disabled):not(:disabled), a:active > .badge-danger:not(.disabled):not(:disabled), a:focus > .badge-danger:not(.disabled):not(:disabled) { - background-color: #e9654f; - color: #FFF; } - -.badge-info { - background-color: #42a0f3; - color: #FFF; } - .badge-info:hover, .badge-info:active, .badge-info:focus, a:hover > .badge-info, a:active > .badge-info, a:focus > .badge-info, .badge-info:not(.disabled):not(:disabled):hover, .badge-info:not(.disabled):not(:disabled):active, .badge-info:not(.disabled):not(:disabled):focus, a:hover > .badge-info:not(.disabled):not(:disabled), a:active > .badge-info:not(.disabled):not(:disabled), a:focus > .badge-info:not(.disabled):not(:disabled) { - background-color: #72b8f6; - color: #FFF; } - -.badge-success { - background-color: #75b82d; - color: #FFF; } - .badge-success:hover, .badge-success:active, .badge-success:focus, a:hover > .badge-success, a:active > .badge-success, a:focus > .badge-success, .badge-success:not(.disabled):not(:disabled):hover, .badge-success:not(.disabled):not(:disabled):active, .badge-success:not(.disabled):not(:disabled):focus, a:hover > .badge-success:not(.disabled):not(:disabled), a:active > .badge-success:not(.disabled):not(:disabled), a:focus > .badge-success:not(.disabled):not(:disabled) { - background-color: #8fd246; - color: #FFF; } - -/* BACKGROUNDS */ -.bg-blue { - background-color: #4e63c9 !important; - color: #FFF; } - -.bg-violet { - background-color: #ce4dcd !important; - color: #FFF; } - -.bg-purple { - background-color: #7951c0 !important; - color: #FFF; } - -.bg-red { - background-color: #e33d22 !important; - color: #FFF; } - -.bg-orange { - background-color: #eb790a !important; - color: #FFF; } - -.bg-green { - background-color: #75b82d !important; - color: #FFF; } - -.bg-skyblue { - background-color: #42a0f3 !important; - color: #FFF; } - -.bg-dark { - background-color: #2D2D2D !important; - color: #FFF; } - -.bg-light { - background-color: #eeeeec !important; - color: #111; } - -.bg-turquoise { - background-color: #46bd9e !important; - color: #FFF; } - -.bg-yellow { - background-color: #f6d32d !important; - color: #FFF; } - -.bg-brown { - background-color: #986a44 !important; - color: #FFF; } - -.bg-grey { - background-color: #77767b !important; - color: #FFF; } - -.bg-primary { - background-color: #7951c0 !important; - color: #FFF; } - -.bg-secondary { - background-color: #4e63c9 !important; - color: #FFF; } - -.bg-warning { - background-color: #eb790a !important; - color: #FFF; } - -.bg-danger { - background-color: #e33d22 !important; - color: #FFF; } - -.bg-info { - background-color: #42a0f3 !important; - color: #FFF; } - -.bg-success { - background-color: #75b82d !important; - color: #FFF; } - -/* ALERTS */ -.alert-blue { - background-color: #d7dcf3; - color: black; } - -.alert-violet { - background-color: #f5d9f4; - color: black; } - -.alert-purple { - background-color: #ded4ef; - color: black; } - -.alert-red { - background-color: #f7c8c0; - color: black; } - -.alert-orange { - background-color: #fbd3ac; - color: black; } - -.alert-green { - background-color: #cdebad; - color: black; } - -.alert-skyblue { - background-color: #eaf4fe; - color: black; } - -.alert-dark { - background-color: #868686; - color: black; } - -.alert-light { - background-color: white; - color: #23231f; } - -.alert-turquoise { - background-color: #caece3; - color: black; } - -.alert-yellow { - background-color: #fdf7d8; - color: black; } - -.alert-brown { - background-color: #ddc5b2; - color: black; } - -.alert-grey { - background-color: #d1d1d3; - color: black; } - -.alert-primary { - background-color: #ded4ef; - color: black; } - -.alert-secondary { - background-color: #d7dcf3; - color: black; } - -.alert-warning { - background-color: #fbd3ac; - color: black; } - -.alert-danger { - background-color: #f7c8c0; - color: black; } - -.alert-info { - background-color: #eaf4fe; - color: black; } - -.alert-success { - background-color: #cdebad; - color: black; } - -/* TEXT */ -.text-blue { - color: #4e63c9; } - -.text-violet { - color: #ce4dcd; } - -.text-purple { - color: #7951c0; } - -.text-red { - color: #e33d22; } - -.text-orange { - color: #eb790a; } - -.text-green { - color: #75b82d; } - -.text-skyblue { - color: #42a0f3; } - -.text-dark { - color: #2D2D2D; } - -.text-light { - color: #eeeeec; } - -.text-turquoise { - color: #46bd9e; } - -.text-yellow { - color: #f6d32d; } - -.text-brown { - color: #986a44; } - -.text-grey { - color: #77767b; } - -.text-primary { - color: #7951c0; } - -.text-secondary { - color: #4e63c9; } - -.text-warning { - color: #eb790a; } - -.text-danger { - color: #e33d22; } - -.text-info { - color: #42a0f3; } - -.text-success { - color: #75b82d; } - -/* Clear-Typography overrides */ -mark { - background-color: #fcf2c0; } - -blockquote, pre { - border-color: #7951c0; } diff --git a/index.html b/index.html index 4ad5f76..081c380 100644 --- a/index.html +++ b/index.html @@ -17,10 +17,11 @@ - + +