mirror of
https://github.com/BreizhHardware/Start-page-perso.git
synced 2026-01-18 16:37:34 +01:00
350 lines
6.1 KiB
CSS
350 lines
6.1 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@-webkit-keyframes slide {
|
|
0% {-webkit-transform: translateY(80px); opacity: 0;}
|
|
100% {-webkit-transform: translateY(0px); opacity: 1;}
|
|
}
|
|
|
|
@-moz-keyframes slide {
|
|
0% {-moz-transform: translateY(80px); opacity: 0;}
|
|
100% {-moz-transform: translateY(0px); opacity: 1;}
|
|
}
|
|
|
|
@-ms-keyframes slide {
|
|
0% {-ms-transform: translateY(80px); opacity: 0;}
|
|
100% {-ms-transform: translateY(0px); opacity: 1;}
|
|
}
|
|
|
|
@-o-keyframes slide {
|
|
0% {-o-transform: translateY(80px); opacity: 0;}
|
|
100% {-o-transform: translateY(0px); opacity: 1;}
|
|
}
|
|
|
|
@keyframes slide {
|
|
0% {transform: translateY(80px); opacity: 0;}
|
|
100% {transform: translateY(0px); opacity: 1;}
|
|
}
|
|
|
|
placeholder {
|
|
color: rgba(255,255,255,0.5);
|
|
text-shadow: none;
|
|
}
|
|
|
|
::-webkit-input-placeholder {
|
|
color: rgba(255,255,255,0.5);
|
|
text-shadow: none;
|
|
}
|
|
|
|
:-moz-placeholder { /* Firefox 18- */
|
|
color: rgba(255,255,255,0.5);
|
|
text-shadow: none;
|
|
}
|
|
|
|
::-moz-placeholder { /* Firefox 19+ */
|
|
color: rgba(255,255,255,0.5);
|
|
text-shadow: none;
|
|
}
|
|
|
|
:-ms-input-placeholder {
|
|
color: rgba(255,255,255,0.5);
|
|
text-shadow: none;
|
|
}
|
|
|
|
body {
|
|
-webkit-text-size-adjust: none;
|
|
-webkit-user-select: none;
|
|
font-size: 14px;
|
|
background-color: #444;
|
|
font-family: Inter, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
#gradient {
|
|
background: url(../images/backgrounds/night.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
#gradient.sunrise {
|
|
background: url(../images/backgrounds/sunrise.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
#gradient.day {
|
|
background: url(../images/backgrounds/day.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
#gradient.evening {
|
|
background: url(../images/backgrounds/evening.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
#gradient.twilight {
|
|
background: url(../images/backgrounds/twilight.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
#container {
|
|
position: absolute;
|
|
left: 0px;
|
|
top: calc(50% - 83px);
|
|
width: 100%;
|
|
height: 144px;
|
|
}
|
|
|
|
|
|
/* ENGINE INDEX
|
|
----------------------------------------------------- */
|
|
|
|
#engines {
|
|
width: 700px;
|
|
height: 80px;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(50% + 40px);
|
|
margin-left: -350px;
|
|
margin-bottom: 10%;
|
|
-webkit-animation:slide 0.75s ease;
|
|
moz-animation:slide 0.75s ease;
|
|
ms-animation:slide 0.75s ease;
|
|
o-animation:slide 0.75s ease;
|
|
animation:slide 0.75s ease;
|
|
}
|
|
|
|
#engines a {
|
|
display: block;
|
|
width: 225px;
|
|
height: 80px;
|
|
cursor: pointer;
|
|
opacity: 0.0;
|
|
position: absolute;
|
|
}
|
|
|
|
#engines a img {
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
|
|
/* SEARCH BOX
|
|
----------------------------------------------------- */
|
|
|
|
#input input {
|
|
font-size: 128px;
|
|
font-family: Inter, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
background: none;
|
|
width: 100%;
|
|
outline: 0;
|
|
color: #fff;
|
|
border: 0px;
|
|
text-shadow: 0px 5px 10px rgba(0,0,0,0.125);
|
|
}
|
|
|
|
#lang {
|
|
position: absolute;
|
|
right: 49px;
|
|
top: 39px;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
padding: 3px 5px;
|
|
-webkit-border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
color: #c0c0c0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#lang:hover {
|
|
background: #c0c0c0;
|
|
color: white;
|
|
}
|
|
|
|
#lang:active {
|
|
background: #808080;
|
|
}
|
|
|
|
#method {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
/* SEARCH SUGGESTIONS
|
|
----------------------------------------------------- */
|
|
|
|
#sugs {
|
|
display: none;
|
|
position: absolute;
|
|
background: rgba(255,255,255,0.8);
|
|
border: 1px solid #fff;
|
|
border-top: 0;
|
|
left: 41px;
|
|
top: 68px;
|
|
right: 41px;
|
|
list-style: none;
|
|
padding: 3px 0;
|
|
font-size: 11px;
|
|
-webkit-border-bottom-left-radius: 5px;
|
|
-webkit-border-bottom-right-radius: 5px;
|
|
-moz-border-radius-bottomleft: 5px;
|
|
-moz-border-radius-bottomright: 5px;
|
|
}
|
|
|
|
#sugs li a {
|
|
display: block;
|
|
padding: 3px 8px;
|
|
color: #777;
|
|
}
|
|
|
|
#sugs li.active a {
|
|
background: #c0c0c0;
|
|
color: white;
|
|
}
|
|
|
|
#sugs li a:active {
|
|
background: #808080;
|
|
}
|
|
|
|
#news {
|
|
padding: 16px 32px;
|
|
border-radius: 32px;
|
|
background: rgba(0,0,0,0.2);
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
position: absolute;
|
|
bottom: 20%;
|
|
left: 50%;
|
|
transform: translate(-50%,0);
|
|
color: #fff;
|
|
text-align: center;
|
|
text-shadow: 0px 2px 4px rgba(0,0,0,0.2);
|
|
font-weight: 500;
|
|
}
|
|
|
|
#news .dot-separator {
|
|
margin: 0 6px;
|
|
color: rgba(255,255,255,0.8);
|
|
}
|
|
|
|
#news a {
|
|
color: #fff;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
}
|
|
#news a::after {
|
|
color: inherit;
|
|
content: "\203a";
|
|
font-style: normal;
|
|
font-weight: inherit;
|
|
padding-left: 8px;
|
|
position: absolute;
|
|
transition: padding 200ms ease;
|
|
}
|
|
#news a:hover::after,
|
|
#news a:active::after,
|
|
#news a:hover:active::after {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
footer {
|
|
padding: 10px 0;
|
|
line-height: 2;
|
|
font-weight: 400;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translate(-50%,0);
|
|
opacity: 0.5;
|
|
transition: all 300ms ease;
|
|
text-shadow: 0px 1.5px 3px rgba(0,0,0,0);
|
|
}
|
|
|
|
footer:hover {
|
|
opacity: 1.0;
|
|
text-shadow: 0px 1px 2px rgba(0,0,0,0.125);
|
|
}
|
|
|
|
footer a {
|
|
color: #fff;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
footer span {
|
|
font-weight: 700;
|
|
}
|
|
|
|
footer .legal {
|
|
display: block;
|
|
font-size: 11px;
|
|
color: #fff;
|
|
}
|
|
|
|
footer .legal .info {
|
|
text-align: center;
|
|
}
|
|
|
|
footer .legal .info .copyright,
|
|
footer .legal .info .terms {
|
|
display: block;
|
|
float: none;
|
|
}
|
|
|
|
footer .legal .info .copyright {
|
|
margin-right: 0;
|
|
}
|
|
|
|
footer .legal .info .terms a {
|
|
padding-right: 16px;
|
|
margin-right: 14px;
|
|
border-style: solid;
|
|
color: #fff;
|
|
border-color: rgba(255,255,255,0.25);
|
|
border-width: 0 1px 0 0;
|
|
font-weight: 400;
|
|
}
|
|
footer .legal .info .terms a:last-child {
|
|
margin-right: 0;
|
|
padding-right: 0;
|
|
border-style: none;
|
|
}
|
|
footer .legal .info .terms a:hover,
|
|
footer .legal .info .terms a:active,
|
|
footer .legal .info .terms a:hover:active {
|
|
color: #fff;
|
|
}
|
|
|
|
@media screen and (max-width: 704px) {
|
|
footer .social .icons .network {
|
|
margin-right: 32px;
|
|
}
|
|
|
|
footer .legal .info {
|
|
text-align: center;
|
|
}
|
|
|
|
footer .legal .info .copyright,
|
|
footer .legal .info .terms {
|
|
display: block;
|
|
float: none;
|
|
}
|
|
|
|
footer .legal .info .copyright {
|
|
margin-right: 0;
|
|
}
|
|
}
|