From b024f2154aecd447402998d4f27e2264b6340ebd Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Mon, 15 Oct 2018 11:09:55 +0200 Subject: [PATCH] css: export scss --- css/style.css | 1133 ++++++++++++++++++++++++++++++++++++------------- index.html | 19 +- 2 files changed, 830 insertions(+), 322 deletions(-) diff --git a/css/style.css b/css/style.css index eae12db..eb76e8f 100644 --- a/css/style.css +++ b/css/style.css @@ -1,422 +1,943 @@ -/* ------------------ GLOBAL STYLE ------------------- */ - +/* ------------------ CUSTOM STYLE ------------------- */ #wrapper { - background: #FFF url('../img/background.png'); -} + background: #FFF url("../img/background.png"); } +/* ------------------ GLOBAL STYLE ------------------- */ .no-pills { - list-style:none; -} + list-style: none; } .align-center { - text-align:center; -} + text-align: center; } .align-left { - text-align:left; -} + text-align: left; } .align-right { - text-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); -} +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 rgba(0, 0, 0, 0); - padding-bottom:.3em; - margin:auto; - text-align:center; -} - -header h1 img { - max-width:100%; - height:auto; -} + 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 6px rgba(0, 0, 0, 0.3); - border-width:0px; - border-bottom:1px; - border-style:solid; - border-color:rgba(0,0,0,0.3) -} + 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 3px rgba(0, 0, 0, 0.2), inset 0px -2px 0px rgba(0, 0, 0, 0.2); -} - + 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; -} + margin-top: 40px; } /* social media */ - ul.social { - font-size:1.5em; - padding-bottom:1em; - margin:auto; - text-align:center; -} - -li.social-li { - list-style:none; - display:inline; -} - -a.social-link { - color:#FFFFFF; - background-color:#000000; - padding:0.3em; - padding-left:0.36em; - padding-right:0.36em; - vertical-align:middle; - border-radius:100%; -} - -a.social-link:hover { - color:#000000; - background-color:#FFFFFF; -} - + 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 { - box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3); - border-width:0px; - margin-bottom:1.2em; -} + 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 12px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); -} + 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-top-left-radius:3px; - border-top-right-radius:3px; - border-top:1px solid; - border-left:1px solid; - border-right:1px solid; - border-width:1px; - border-color:rgba(0,0,0,0.3); - font-size:1.1em; + 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; -} - -.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 rgba(0, 0, 0, 0); -} - -h1.card-title, h2.card-title, h3.card-title, h4.card-title, h5.card-title, h6.card-title, h7.card-title, h8.card-title, h9.card-title, h10.card-title { - font-size:1em; - text-shadow: 0px -1px 0px rgba(0,0,0,0.3); - padding:0px; - margin:0px; - color:#FFF; - font-weight:600; -} + 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; -} + 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-style:none; - border-width:0px; - border-radius:0px; - background-color:transparent; -} + 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); -} - + border-style: none; + border-width: 0px; + border-radius: 0px; + background-color: rgba(0, 0, 0, 0.1); } /* ------------------ BUTTONS ------------------- */ - .btn { - border-style:solid; - border-width:1px; - border-color:rgba(0, 0, 0, 0.3); - 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); -} + 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-style:solid; - border-width:1px; - border-color:rgba(0, 0, 0, 0.3); -} + 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-style:solid; - border-width:1px; - border-color:rgba(0, 0, 0, 0.3); -} + 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); -} + 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); -} + 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); -} + 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-style:solid; - border-width:1px; - border-color:rgba(0, 0, 0, 0.3); -} + 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 #75507b; - top:1px; - outline: none; -} + 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-style:solid; - border-width:1px; - border-color:rgba(0, 0, 0, 0.3); - color:rgba(0, 0, 0, 0.7); - box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3) -} + 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; -} + color: rgba(0, 0, 0, 0.7); + font-weight: bold; } /* ------------------ BREADCRUMB ------------------- */ - .breadcrumb { - box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); - border-color:rgba(0,0,0,0.3); - border-width:1px; - background-color:#eeeeec; - margin-bottom:1.2em; -} + 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; -} + margin: 15px; } .reagir { - text-align:right; -} + text-align: right; } /* ------------------ PREVIEWS ------------------- */ - .previews-section { display: flex; align-content: flex-start; - flex-wrap: wrap; -} + flex-wrap: wrap; } .preview-container { - margin-bottom:1em; - padding:0.4em; - width:100% -} - - - -@media(max-width:767px){} -@media(min-width:768px){} -@media(min-width:992px){ + margin-bottom: 1em; + padding: 0.4em; + width: 100%; } +@media (min-width: 992px) { .prev-col-2 .preview-container { - width:50%; - } - + width: 50%; } .prev-col-3 .preview-container { - width:33%; - } - + width: 33%; } .prev-col-4 .preview-container { - width:25%; - } - -} + width: 25%; } } .card-preview { - width:100%; - - margin:auto; - box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); -} + 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; -} + 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; + 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; -} + justify-content: center; } .preview-content { - max-height:200px; -} + max-height: 200px; } .preview-content > p { - width:100%; - margin:auto; -} + width: 100%; + margin: auto; } .preview-content > p.p-img { - text-align:center; - margin:auto; - padding:auto; + text-align: center; + margin: auto; + padding: auto; display: block; - width:100%; -} + width: 100%; } .preview-content > p > img { - max-width:100%; - height:auto; - vertical-align:middle; - margin:auto; - text-align:center; -} + 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; -} + margin-bottom: 0px; + max-width: 100%; + display: none; } .preview-item h1 { - display:none; -} + 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; -} + 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; -} + 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-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); -} + backdrop-filter: blur(2px); } .comment-text { - margin-top:0.8em; -} + margin-top: 0.8em; } .card-preview time { - margin-bottom:0.4em; - display:block; -} + 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 f09802f..2ba8ce6 100644 --- a/index.html +++ b/index.html @@ -26,14 +26,7 @@