Skip to content
Snippets Groups Projects
Commit 499490bc authored by Thomas Fritsch's avatar Thomas Fritsch
Browse files

css theme sombre ( 

inspiré par @clement.papin.etu)
parent e7fd324d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
css/main.bak.css deleted 100644 → 0
+ 0
− 283
View file @ e7fd324d
html {
height: 100%;
}
body {
background: #f1f1f1;
padding-bottom: 50px;
position: relative;
min-height: 100%;
}
@media (min-width: 200px) {
.navbar-header{
float: left;
}
.navbar-right {
float: right !important;
margin-right: -15px;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding-top: 19.5px;
padding-bottom: 19.5px;
}
.navbar-nav {
margin:0;
}
}
#appContainer {
padding-top: 80px;
}
.row.marketing {
margin: 0 auto;
max-width: 900px;
}
.video-detail, .media-list {
background: #fff;
padding-top: 20px 0;
box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.video-detail {
padding: 20px;
}
.media, .pizzasContainer > a {
padding: 20px;
border-bottom: 1px solid rgba(0,0,0,.1);
margin: 0;
display: flex;
}
.media .infos, .pizzasContainer > a .infos {
display: flex;
flex-direction: column;
}
.media a {
display: flex;
}
.media p {
font-size: 12px;
}
.media img, .pizzasContainer > a img {
margin-right: 20px;
width: 246px;
height: 138px;
}
.media h4 .pizzasContainer > a h4 {
font-size: 25px;
margin: 0;
}
a, a:hover {
color: #333;
}
a h4, a:hover h4 {
color: #167ac6;
}
.comments .panel {
margin: 5px 0;
}
.navbar-inverse {
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.1);
/*position: relative;
color: black;
}
.navbar-inverse:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;*/
background-color: #cd1a1a;
background-image: linear-gradient(45deg, #cd1a1a, #cb1a70);
}
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a:focus {
color: #f9d2d2;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
background-color: #b01717;
}
.navbar-inverse .navbar-nav > li > a:hover {
color: #fff;
background-color: #b01717;
}
.navbar-brand {
padding: 0 15px;
display: flex;
align-items: center;
}
.navbar-brand > img {
display: inline-block;
height: 50px;
margin-right: 10px;
}
.navbar-brand > small {
font-size: 12px;
font-style: italic;
margin-left:10px;
margin-top:5px;
}
footer {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 10px;
color: #0003;
}
footer a{
color: #0006;
}
form {
display:flex;
padding: 20px;
flex-direction: column;
}
form label {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
}
form label input,
form label select,
form label .form-control {
width: 70%;
}
.jumbotron {
padding: 20px 60px;
background-color: #e2e8e9;
background-image: url('../images/bg.png');
background-size: cover;
background-position: center;
animation: fadeIn .8s ease, slide 1.2s cubic-bezier(.190, 1.000, .220, 1.000);
animation-delay: .1s;
animation-fill-mode: both;
overflow: hidden;
position: relative;
}
.jumbotron .closeButton {
position: absolute;
right: 20px;
top: 20px;
width: 40px;
height: 40px;
border: none;
background: none;
transform: rotate(-45deg);
transform-origin: center;
transition: all .3s ease;
}
.jumbotron .closeButton:hover {
transform: scale(1.2) rotate(135deg);
}
.jumbotron .closeButton:before,
.jumbotron .closeButton:after {
content: '';
border-radius: 3px;
position: absolute;
top:50%;
left: 10px;
right: 10px;
border: 2px black solid;
transform-origin: center;
transform: translateY(-2px);
}
.jumbotron .closeButton:after {
transform: translateY(-2px) rotate(90deg);
}
.jumbotron .spicy{
font-size:130%;
background: linear-gradient(-55deg, #cd1a1e 0%,#faa119 40%, #fecf0a 50%, #faa119 60%, #cd1a1e 100%);
background-size: 200% 200%;
white-space: nowrap;
color: #cd1a1e;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.jumbotron .spicy:hover {
animation: slideBg .1s linear infinite;
}
.jumbotron .spicy:hover .spicy-icon{
animation: burn .01s linear infinite;
}
.jumbotron h1, .jumbotron p {
animation: fadeIn .6s ease, slide .4s cubic-bezier(.190, 1.000, .220, 1.000);
animation-delay: .4s;
animation-fill-mode: both;
}
.jumbotron p {
animation-delay: .5s;
}
.jumbotron .spicy-icon {
height:50px;
vertical-align: baseline;
transform-origin: bottom left;
}
@keyframes slideBg {
100% {
background-position: -200% center;
}
}
@keyframes burn {
100% {
transform: skew(-13deg);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slide {
0% {
transform: translateX(-300px);
}
}
.is-loading {
position:relative;
min-height: 200px;
}
.is-loading * {
display: none;
}
.is-loading:before {
content: '';
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,.1);
z-index: 1;
}
.is-loading:after {
content: ' ';
position: absolute;
top:50%;
left:50%;
width: 50px;
height: 50px;
border: 1px black solid;
border-top-color: rgba(0,0,0,.3);
z-index: 2;
border-radius: 50%;
animation: rotate .5s linear infinite;
transform-origin: center;
}
@keyframes rotate {
0% {
transform: translate(-50%,-50%) rotate(0deg);
}
100% {
transform: translate(-50%,-50%) rotate(360deg);
}
}
\ No newline at end of file
css/main.css
+ 2
− 2
View file @ 499490bc
......@@ -22,7 +22,7 @@ body {
margin: 0;
/* height: 100%; */
padding: 0;
background: #eee;
background: #222;
}
body {
min-height: 100vh;
......@@ -40,7 +40,7 @@ body > footer {
padding: 0 40px;
}
.pageContainer {
color: #121618;
color: #fff;
background-image: url('../images/bg.png');
background-size: 110%;
background-position: center -20px;
......
css/news.css
+ 1
− 1
View file @ 499490bc
......@@ -18,7 +18,7 @@
bottom: 0;
height: 0;
width: 100%;
background-image: linear-gradient(#eee, #eee), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
background-image: linear-gradient(#222, #222), linear-gradient(45deg, transparent 75%, #222 75%), linear-gradient(-45deg, transparent 75%, #222 75%);
background-position: 0 0, 0 0, 0 0, 0 100%, 0 100%;
background-size: auto auto, 15px 15px, 15px 15px, 15px 15px, 15px 15px;
background-clip: padding-box, border-box, border-box, border-box, border-box;
......
css/pizzaForm.css 0 → 100644
+ 88
− 0
View file @ 499490bc
.pizzaForm {
background: white;
color: #121618;
padding: 50px;
border: 1px #13181919 solid;
outline: 20px hsl(240deg 0% 100%) solid;
margin: 20px;
margin-bottom: 50px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.pizzaForm button[type="submit"] {
align-self: center;
margin-top: 30px;
border: 1px transparent solid;
border-radius: 3px;
padding: 15px 50px;
font-family: OpenSansCondensed;
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
background-color: white;
transition: all .15s ease-out;
border-color: #131819;
}
.pizzaForm button[type="submit"]:hover {
background-color: #e2952d;
background-color: #131819;
border-color: transparent;
color: white;
}
.pizzaForm label {
width: 100%;
display: flex;
flex-direction: column;
font-family: OpenSansCondensed;
font-size: 18px;
letter-spacing: 2px;
font-weight: lighter;
text-transform: uppercase;
}
.pizzaForm label:not(:first-of-type) {
margin-top: 30px;
}
.pizzaForm label small{
margin-top: 5px;
text-transform: none;
font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: italic;
font-size: 12px;
opacity: .6;
letter-spacing: 1;
}
.pizzaForm label code{
font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: #13181919;
padding: 2px 4px;
border-radius: 3px;
}
.pizzaForm input {
border: 1px #eee solid;
border-radius: 3px;
background-color: #fefefe;
padding: 10px 20px;
font-size: 16px;
margin-top: 5px;
}
@media (min-width: 1024px) {
.pizzaForm {
width: 70%;
margin-bottom: 150px;
}
.pizzaForm button[type="submit"] {
align-self: flex-end;
}
.pizzaForm label {
/* width: 60%; */
}
}
input::placeholder {
font-weight: lighter !important;
color: #ddd;
}
\ No newline at end of file
css/pizzaList.css
+ 8
− 7
View file @ 499490bc
......@@ -31,7 +31,7 @@
transform: scaleX(-1) translateY(-50%);
}
.pizzaThumbnail {
background-color: #fff;
background-color: #131618;
}
.pizzaThumbnail a {
/* background-color: #12161899; */
......@@ -73,7 +73,7 @@
align-items: center;
padding: 20px 20px;
font-size: 16px;
background-color: #f9f9f9;
background-color: #131618;
}
.pizzaThumbnail a section:before {
content: '';
......@@ -85,7 +85,7 @@
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right:20px solid #f9f9f9;
border-right:20px solid #131618;
}
.pizzaThumbnail a section h4 {
text-align: center;
......@@ -94,7 +94,7 @@
font-size: 30px;
letter-spacing: 2px;
text-transform: uppercase;
color: #000;
color: #fff;
/* color: #e2952d; */
margin: 0 0 15px;
white-space: nowrap;
......@@ -102,6 +102,7 @@
.pizzaThumbnail a section h4:before,
.pizzaThumbnail a section h4:after {
content: '〜';
color: #bbb;
font-weight: lighter;
display: inline-flex;
font-size: 0.5em;
......@@ -115,18 +116,18 @@
list-style-type: none;
padding: 0;
margin: 0;
color: #555;
color: #bbb;
}
.pizzaThumbnail a:hover img {
/* filter: contrast(1) grayscale(0) brightness(1); */
width: 48%;
}
.pizzaThumbnail a:hover section {
background-color: #fff;
background-color: #0d0e10;
/* width: 52%; */
}
.pizzaThumbnail a:hover section:before {
border-right-color: #fff;
border-right-color: #0d0e10;
}
@media (max-width: 1200px) {
.pizzaThumbnail a img {
......
images/bg.png
+ 0
− 0
View replaced file @ e7fd324d View file @ 499490bc
images/bg.png

358 KiB | W: | H:

images/bg.png

386 KiB | W: | H:

images/bg.png
images/bg.png
images/bg.png
images/bg.png
  • 2-up
  • Swipe
  • Onion skin
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment