diff --git a/css/palette.css b/css/palette.css deleted file mode 100644 index 4fa9e02..0000000 --- a/css/palette.css +++ /dev/null @@ -1,256 +0,0 @@ -/* ------------------ COULEURS ------------------- */ - -/* de base */ - - -.card-primary > .card-header, .btn-primary, .btn-primary:hover, .btn-primary:active, .badge-primary { - background-color:#7951c0; - color:#FFF; -} - -.card-secondary > .card-header, .btn-secondary, .btn-secondary:hover, .btn-secondary:active, .badge-secondary { - background-color:#4e63c9; - color:#FFF; -} - -.card-danger > .card-header, .card-red > .card-header, .btn-danger, .btn-red, .badge-red, .badge-danger { - background-color:#e33d22; - color:#FFF; -} - -.card-warning > .card-header, .card-orange > .card-header, .btn-warning, .btn-orange, .badge-warning, .badge-orange { - background-color:#eb790a; - color:#FFF; -} - -.card-success > .card-header, .card-green > .card-header, .btn-success, .btn-green, .badge-success, .badge-green { - background-color:#75b82d; - color:#FFF; -} - -.card-info > .card-header, .card-skyblue > .card-header, .btn-info, .btn-skyblue, .badge-info, .badge-skyblue { - background-color:#42a0f3; - color:#FFF; -} - -.card-blue > .card-header, .btn-blue, .badge-blue { - background-color:#4e63c9; - color:#FFF -} - -.card-purple > .card-header, .btn-purple, .badge-purple { - background-color:#7951c0; - color:#FFF -} - -.card-dark > .card-header, .btn-dark, .badge-dark { - background-color:#6d6d6d; - color:#FFF -} - -.card-light > .card-header, .btn-light, .badge-light { - background-color:#eeeeec; -} - -.card-violet > .card-header, .btn-violet, .badge-violet { - background-color:#ce4dcd; - color:#FFF -} - -.card-turquoise > .card-header, .btn-turquoise, .badge-turquoise { - background-color:#46bd9e; - color:#FFF -} - -/* :hover */ - -.btn-primary:hover, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, -.show > .btn-primary.dropdown-toggle { - background-color:#9373cc; - color:#FFF; -} - -.btn-secondary:hover, .btn-secondary:active, .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, -.show > .btn-secondary.dropdown-toggle { - background-color:#7182d3; - color:#FFF; -} - -.btn-blue:hover, .btn-blue:active { - background-color:#7182d3; - color:#FFF; -} - -.btn-purple:hover, .btn-purple:active { - background-color:#9373cc; - color:#FFF; -} - -.btn-success:hover, .btn-success:active, .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, -.show > .btn-success.dropdown-toggle, .btn-green:hover, .btn-green:active { - background-color:#90c657; - color:#FFF; -} - -.btn-info:hover, .btn-info:active, .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, -.show > .btn-info.dropdown-toggle, .btn-skyblue:hover, .btn-skyblue:active { - background-color:#67b3f5; - color:#FFF; -} - -.btn-warning:hover, .btn-warning:active, .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, -.show > .btn-warning.dropdown-toggle, .btn-orange:hover, .btn-orange:active { - background-color:#ef933b; - color:#FFF; -} - -.btn-danger:hover, .btn-danger:active, .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, -.show > .btn-danger.dropdown-toggle, .btn-red:hover, .btn-red:active { - background-color:#e8634e; - color:#FFF; -} - -.btn-dark:hover, .btn-dark:active, .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, -.show > .btn-dark.dropdown-toggle { - background-color:#8a8a8a; - color:#FFF; -} - -.btn-light:hover, .btn-light:active, .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, -.show > .btn-light.dropdown-toggle { - background-color:#dddddd; - color:#000; -} - -.btn-violet:hover, .btn-violet:active { - background-color:#d770d7; - color:#FFF; -} - -.btn-turquoise:hover, .btn-turquoise:active { - background-color:#6bcab1; - color:#FFF; -} - -.bg-primary { - background-color:#7951c0!important; -} - -/* alertes */ - -.alert-primary { - background-color:#e4dcf2; -} - -.alert-secondary { - background-color:#dbdff4; -} - -.alert-info { - background-color:#d9ecfc; -} - -.alert-success { - background-color:#e3f0d5; -} - -.alert-warning { - background-color:#fbe4ce; -} - -.alert-danger { - background-color:#f9d8d2; -} - - -.alert-violet { - background-color:#f5dbf5; -} - -.alert-purple { - background-color:#e4dcf2; -} - -.alert-blue { - background-color:#dbdff4; -} - -.alert-skyblue { - background-color:#d9ecfc; -} - -.alert-turquoise { - background-color:#daf1eb; -} - -.alert-green { - background-color:#e3f0d5; -} - -.alert-orange { - background-color:#fbe4ce; -} - -.alert-red { - background-color:#f9d8d2; -} - -.alert-light { - background-color:#ffffff; -} - -.alert-dark { - background-color:#e1e1e1; -} - -/* social */ - -.btn-facebook { - background-color:#3B5998; - color:#FFF; -} - -.btn-facebook:hover, .btn-facebook:active { - background-color:#627aac; - color:#FFF; -} - -.btn-twitter { - background-color:#55ACEE; - color:#FFF; -} - -.btn-twitter:hover, .btn-twitter:active { - background-color:#77bcf1; - color:#FFF; -} - -.btn-googleplus { - background-color:#d34836; - color:#FFF; -} - -.btn-googleplus:hover, .btn-googleplus:active { - background-color:#db6c5e; - color:#FFF; -} - -.btn-diaspora { - background-color:#313739; - color:#FFF; -} - -.btn-diaspora:hover, .btn-diaspora:active { - background-color:#5a5f60; - color:#FFF; -} - -.btn-mastodon { - background-color:#282c37; - color:#FFF; -} - -.btn-mastodon:hover, .btn-mastodon:active { - background-color:#53565f; - color:#FFF; -} diff --git a/css/style.css b/css/style.css index 7c75643..6f235f4 100644 --- a/css/style.css +++ b/css/style.css @@ -1,8 +1,11 @@ /* ------------------ CUSTOM STYLE ------------------- */ body { - background: #FFF url("../img/background.png"); + background: #666 url("../img/background.png"); padding: 30px; } +#wrapper { + background-color: #FFF; } + /* ------------------ GLOBAL STYLE ------------------- */ .no-pills { list-style: none; } @@ -34,7 +37,7 @@ header h1 { line-height: 1.5em; } .navbar { - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); + box-shadow: 0px 2px 10px transparent; border: 1px solid rgba(0, 0, 0, 0.3); border-left: 0; border-right: 0; } @@ -44,7 +47,7 @@ header h1 { 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); } + box-shadow: 0px 2px 6px transparent, inset 0px -2px 0px rgba(0, 0, 0, 0.2); } /* ------------------ FOOTER ------------------- */ footer { @@ -74,13 +77,13 @@ ul.social { /* ------------------ CARDS ------------------- */ .card { - border-radius: 3px 3px 3px 3px; - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); + border-radius: 0px 0px 0px 0px; + box-shadow: 0px 2px 10px transparent; 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); } + box-shadow: 0px 2px 10px transparent, 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; @@ -95,11 +98,11 @@ ul.social { font-weight: 600; border-radius: 0; } .card-header:first-child { - border-radius: 3px 3px 3px 3px; + border-radius: 0px 0px 0px 0px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .card-header:last-child { - border-radius: 3px 3px 3px 3px; + border-radius: 0px 0px 0px 0px; 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 { @@ -144,13 +147,13 @@ a.list-group-item:hover { /* ------------------ 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); + border-radius: 0px 0px 0px 0px; + box-shadow: 0px 2px 10px transparent, 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); + box-shadow: 0px 2px 6px transparent, inset 0px -2px 0px rgba(0, 0, 0, 0.2); top: 1px; border: 1px solid rgba(0, 0, 0, 0.3); } @@ -161,11 +164,11 @@ a.list-group-item:hover { 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 transparent; } .btn-group .btn { box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2); - border-radius: 3px 3px 3px 3px; } + border-radius: 0px 0px 0px 0px; } .btn-group .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -187,16 +190,16 @@ a.list-group-item:hover { .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); + box-shadow: 0px 2px 6px transparent, 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; + border-radius: 0px 0px 0px 0px; color: rgba(0, 0, 0, 0.7); - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); } + box-shadow: 0px 2px 10px transparent; } .alert a, .alert-link { color: rgba(0, 0, 0, 0.7); @@ -204,8 +207,8 @@ a.list-group-item:hover { /* ------------------ 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-radius: 0px 0px 0px 0px; + box-shadow: 0px 2px 10px transparent, inset 0px -2px 0px rgba(0, 0, 0, 0.2); border: 0; background-color: #eeeeec; margin-bottom: 1.2em; } @@ -239,10 +242,10 @@ a.list-group-item:hover { width: 25%; } } .card-preview { - border-radius: 3px 3px 3px 3px; + border-radius: 0px 0px 0px 0px; 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); } + box-shadow: 0px 2px 10px transparent, inset 0px -2px 0px rgba(0, 0, 0, 0.2); } .preview-link:hover { text-decoration: none !important; } @@ -397,11 +400,11 @@ a, a:hover, a:active { color: #FFF; } .card-primary > .card-header { - background-color: #7951c0; + background-color: #e33d22; color: #FFF; } .card-secondary > .card-header { - background-color: #4e63c9; + background-color: #2D2D2D; color: #FFF; } .card-warning > .card-header { @@ -513,17 +516,17 @@ a, a:hover, a:active { color: #FFF; } .btn-primary { - background-color: #7951c0; + background-color: #e33d22; 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; + background-color: #e9654f; color: #FFF; } .btn-secondary { - background-color: #4e63c9; + background-color: #2D2D2D; 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; + background-color: #474747; color: #FFF; } .btn-warning { @@ -683,17 +686,17 @@ a, a:hover, a:active { color: #FFF; } .badge-primary { - background-color: #7951c0; + background-color: #e33d22; 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; + background-color: #e9654f; color: #FFF; } .badge-secondary { - background-color: #4e63c9; + background-color: #2D2D2D; 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; + background-color: #474747; color: #FFF; } .badge-warning { @@ -778,11 +781,11 @@ a, a:hover, a:active { color: #FFF; } .bg-primary { - background-color: #7951c0 !important; + background-color: #e33d22 !important; color: #FFF; } .bg-secondary { - background-color: #4e63c9 !important; + background-color: #2D2D2D !important; color: #FFF; } .bg-warning { @@ -855,11 +858,11 @@ a, a:hover, a:active { color: black; } .alert-primary { - background-color: #ded4ef; + background-color: #f7c8c0; color: black; } .alert-secondary { - background-color: #d7dcf3; + background-color: #868686; color: black; } .alert-warning { @@ -919,10 +922,10 @@ a, a:hover, a:active { color: #77767b; } .text-primary { - color: #7951c0; } + color: #e33d22; } .text-secondary { - color: #4e63c9; } + color: #2D2D2D; } .text-warning { color: #eb790a; } @@ -941,7 +944,7 @@ mark { background-color: #fcf2c0; } blockquote, pre { - border-color: #7951c0; } + border-color: #e33d22; } header h1 { padding: 2.33333em; diff --git a/index.html b/index.html index 1d9e9ba..f499e28 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,6 @@ - diff --git a/scss/style.scss b/scss/style.scss index 4410b99..e48eaca 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -2,17 +2,17 @@ /* ------------------ CUSTOM STYLE ------------------- */ -$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); -$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3); +$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0); +$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0); $inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2); $inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0.2); $inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0.1); -$border-radius: 3px; +$border-radius: 0px; $border-size: 1px; -$color-primary: $color-purple; -$color-secondary: $color-blue; +$color-primary: $color-red; +$color-secondary: $color-dark; $color-link: $color-blue; $color-selection: $color-blue; $color-mark: $color-yellow; @@ -26,11 +26,12 @@ $color-mark: $color-yellow; } body { - background: #FFF url('../img/background.png'); + background: #666 url('../img/background.png'); padding: 30px; } #wrapper { + background-color: #FFF } @import 'commons';