sakrecoer-mother-web/_sass/main.scss

143 lines
2.6 KiB
SCSS
Raw Normal View History

2019-04-30 17:28:23 +02:00
html {
font-family: "Helvetica", Sans-serif;
}
2019-04-30 18:37:17 +02:00
body{
background: url(/assets/img/pattern.png);
2019-07-09 22:17:29 +02:00
margin: 0px;
padding: 0px;
2019-04-30 18:37:17 +02:00
}
2019-04-30 17:28:23 +02:00
a {
font-weight: normal;
}
2019-04-28 21:08:49 +02:00
#hero {
2019-07-09 22:17:29 +02:00
position: relative;
2019-04-28 21:42:31 +02:00
height: 100vh;
2019-07-09 22:17:29 +02:00
width: 100%;
2019-04-28 21:42:31 +02:00
-webkit-transition: background .5s ease-in-out;
transition: background .5s ease-in-out;
2019-04-30 17:28:23 +02:00
background-image: url({{}});
}
2019-05-02 17:03:15 +02:00
/* MUSIC INDEX */
2019-04-30 17:28:23 +02:00
.musiflex {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.trackcontainer {
flex: 1 1 300px;
2019-07-09 19:04:46 +02:00
padding: 10px;
2019-04-30 17:28:23 +02:00
margin: 0;
2019-07-09 22:17:29 +02:00
background-color: rgba(201, 240, 196, 0.85);
h1, h2, h3, p {
2019-04-30 17:28:23 +02:00
padding: 5px;
2019-07-09 22:17:29 +02:00
color: rgb(0, 0, 0);
2019-04-30 17:28:23 +02:00
}
}
.track {
width: 100%;
background-size: cover;
background-position: 50% 50%;
min-height: 300px;
padding: 0;
margin: 0;
2019-05-02 17:03:15 +02:00
}
/* Music Template */
#player {
display: flex;
2019-05-03 17:06:32 +02:00
flex-wrap: wrap;
width: 100%;
margin: 0;
padding: 0;
2019-07-09 19:49:14 +02:00
height: 100vh;
}
#controls {
2019-07-09 19:04:46 +02:00
display: flex;
2019-05-03 17:06:32 +02:00
flex: 0 0 200px;
2019-07-09 19:19:00 +02:00
flex-wrap: wrap;
2019-07-09 22:17:29 +02:00
2019-05-03 17:06:32 +02:00
padding: 15px;
margin: 0 auto;
2019-07-09 19:49:14 +02:00
2019-07-09 22:17:29 +02:00
2019-07-09 19:49:14 +02:00
2019-05-03 17:06:32 +02:00
.container {
2019-07-09 22:17:29 +02:00
background: linear-gradient(230deg, #ff7951, #ec00e3, #00d5ec, #00ecaf, #6d00ec);
background-size: 1000% 1000%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
2019-07-09 19:49:14 +02:00
2019-07-09 22:17:29 +02:00
@-webkit-keyframes AnimationName {
0%{background-position:0% 91%}
50%{background-position:100% 10%}
100%{background-position:0% 91%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 91%}
50%{background-position:100% 10%}
100%{background-position:0% 91%}
}
@keyframes AnimationName {
0%{background-position:0% 91%}
50%{background-position:100% 10%}
100%{background-position:0% 91%}
}
2019-07-09 19:04:46 +02:00
margin: 0 auto 0 0;
2019-07-09 22:17:29 +02:00
2019-07-09 19:04:46 +02:00
text-align: center;
2019-07-09 22:17:29 +02:00
border-radius: 20px;
2019-07-09 19:04:46 +02:00
padding: 10px;
2019-05-03 17:06:32 +02:00
}
}
2019-07-09 19:49:14 +02:00
button {
background-color: #f00;
width: 100px;
height: 100px;
border-radius: 100px;
transition: background-color 0.5s ease-in-out;
}
button:hover {
background-color: rgb(253, 83, 83);
}
2019-05-03 17:06:32 +02:00
#info {
flex: 1 1 500px;
2019-07-09 19:49:14 +02:00
min-height: 80vh;
2019-05-03 17:06:32 +02:00
padding: 15px;
2019-07-09 22:17:29 +02:00
background-color: #97bd924d;
2019-07-09 19:04:46 +02:00
background-size: cover;
background-position: center;
background-repeat: no-repeat;
2019-05-03 17:06:32 +02:00
}
#timer {
flex: 1 1 200px;
2019-07-09 22:17:29 +02:00
background-color: rgba(201, 240, 196, 0.85);
2019-05-03 17:06:32 +02:00
padding: 15px;
2019-07-09 19:04:46 +02:00
background-size: cover;
background-position: center;
p {
2019-07-09 22:17:29 +02:00
background-color: rgba(151, 189, 146, 0.3);
2019-07-09 19:04:46 +02:00
padding: 10px;
border-radius: 3px;
2019-07-09 22:17:29 +02:00
color: #000;
2019-07-09 19:49:14 +02:00
box-shadow: 5px 10px rgba(61, 0, 102, 0.5);
2019-07-09 19:04:46 +02:00
border: #000 solid 1px;
}
2019-07-09 19:49:14 +02:00
img {
box-shadow: 5px 10px rgba(61, 0, 102, 0.5);
}
2019-05-03 17:06:32 +02:00
}
#tracktime {
margin-bottom: auto;
2019-07-09 19:49:14 +02:00
}
#navigation {
position: fixed;
bottom: 10px;
right: 10px;
}