Move background to it's own tag
This commit is contained in:
Jakub Nowak
parent
915b275aab
commit
1cc2eb19a9
2 changed files with 83 additions and 76 deletions
158
css/styles.css
158
css/styles.css
|
|
@ -9,39 +9,45 @@ body {
|
|||
color: var(--on-surface);
|
||||
font-family: sans-serif;
|
||||
|
||||
/* main background image */
|
||||
background-image: var(--background);
|
||||
//background-size: auto;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
|
||||
/* Disable overflow */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bg {
|
||||
position: absolute;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
heigh: 100%;
|
||||
width: 100%;
|
||||
|
||||
z-index: -100;
|
||||
|
||||
content: var(--background);
|
||||
}
|
||||
|
||||
.silhouette {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
background: radial-gradient(closest-side, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
background: radial-gradient(closest-side, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%);
|
||||
|
||||
backdrop-filter: blur( 20px );
|
||||
-webkit-backdrop-filter: blur( 20px );
|
||||
backdrop-filter: blur( 20px );
|
||||
-webkit-backdrop-filter: blur( 20px );
|
||||
|
||||
mask-image: radial-gradient(closest-side, rgba(0,0,0) 50%, rgba(0,0,0,0.4) 90%, rgba(0,0,0,1.0) 100%);
|
||||
-webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 90%, rgba(0,0,0,1.0) 100%);
|
||||
mask-image: radial-gradient(closest-side, rgba(0,0,0) 50%, rgba(0,0,0,0.4) 90%, rgba(0,0,0,1.0) 100%);
|
||||
-webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 90%, rgba(0,0,0,1.0) 100%);
|
||||
|
||||
transition: all 400ms cubic-bezier(.47,1.64,.41,.8);
|
||||
transition: all 400ms cubic-bezier(.47,1.64,.41,.8);
|
||||
}
|
||||
|
||||
.silhouette.hidden {
|
||||
backdrop-filter: blur( 0px );
|
||||
-webkit-backdrop-filter: blur( 0px );
|
||||
backdrop-filter: blur( 0px );
|
||||
-webkit-backdrop-filter: blur( 0px );
|
||||
|
||||
background: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Alignment Styles */
|
||||
|
|
@ -54,61 +60,61 @@ body {
|
|||
.top-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transition: transform 400ms cubic-bezier(.47,1.64,.41,.8);
|
||||
right: 0;
|
||||
transition: transform 400ms cubic-bezier(.47,1.64,.41,.8);
|
||||
}
|
||||
|
||||
.top-right.hidden {
|
||||
transform: translate(200px, -200px);
|
||||
transform: translate(200px, -200px);
|
||||
}
|
||||
|
||||
.top-left {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: transform 400ms cubic-bezier(.47,1.64,.41,.8);
|
||||
left: 0;
|
||||
transition: transform 400ms cubic-bezier(.47,1.64,.41,.8);
|
||||
}
|
||||
|
||||
.top-left.hidden {
|
||||
transform: translate(-200px, -200px);
|
||||
transform: translate(-200px, -200px);
|
||||
}
|
||||
|
||||
.bottom-left {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transition: transform 400ms cubic-bezier(.47,1.64,.41,.8);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transition: transform 400ms cubic-bezier(.47,1.64,.41,.8);
|
||||
}
|
||||
|
||||
.bottom-left.hidden {
|
||||
transform: translate(-200px, 200px);
|
||||
transform: translate(-200px, 200px);
|
||||
}
|
||||
|
||||
.bottom-right {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transition: transform 400ms cubic-bezier(.47,1.64,.41,.8);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transition: transform 400ms cubic-bezier(.47,1.64,.41,.8);
|
||||
}
|
||||
|
||||
.bottom-right.hidden {
|
||||
transform: translate(200px, 200px);
|
||||
transform: translate(200px, 200px);
|
||||
}
|
||||
|
||||
.top-bleed {
|
||||
top: var(--bleed);
|
||||
top: var(--bleed);
|
||||
}
|
||||
|
||||
.bottom-bleed {
|
||||
bottom: var(--bleed);
|
||||
bottom: var(--bleed);
|
||||
}
|
||||
|
||||
.right-bleed {
|
||||
right: var(--bleed);
|
||||
right: var(--bleed);
|
||||
}
|
||||
|
||||
.left-bleed {
|
||||
left: var(--bleed);
|
||||
left: var(--bleed);
|
||||
}
|
||||
|
||||
.top-bleed-extra {
|
||||
|
|
@ -131,73 +137,73 @@ body {
|
|||
}
|
||||
|
||||
.label {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Glassy Neumorphism */
|
||||
|
||||
.raised {
|
||||
border-radius: 14px;
|
||||
backdrop-filter: blur( 12px );
|
||||
-webkit-backdrop-filter: blur( 12px );
|
||||
box-shadow: var(--tl-shadow-primary-concave),
|
||||
var(--br-shadow-primary-concave);
|
||||
border-radius: 14px;
|
||||
backdrop-filter: blur( 12px );
|
||||
-webkit-backdrop-filter: blur( 12px );
|
||||
box-shadow: var(--tl-shadow-primary-concave),
|
||||
var(--br-shadow-primary-concave);
|
||||
}
|
||||
|
||||
.raised-text {
|
||||
text-shadow: var(--tl-shadow-secondary-concave),
|
||||
var(--br-shadow-secondary-concave);
|
||||
text-shadow: var(--tl-shadow-secondary-concave),
|
||||
var(--br-shadow-secondary-concave);
|
||||
}
|
||||
|
||||
.raised-text-small {
|
||||
text-shadow: var(--tl-shadow-tertiary-concave),
|
||||
var(--br-shadow-tertiary-concave);
|
||||
text-shadow: var(--tl-shadow-tertiary-concave),
|
||||
var(--br-shadow-tertiary-concave);
|
||||
}
|
||||
|
||||
/* Component Styles */
|
||||
#clock-box {
|
||||
padding: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
background-color: transparent;
|
||||
background-color: transparent;
|
||||
|
||||
backdrop-filter: blur( 12px );
|
||||
-webkit-backdrop-filter: blur( 12px );
|
||||
backdrop-filter: blur( 12px );
|
||||
-webkit-backdrop-filter: blur( 12px );
|
||||
|
||||
color: var(--on-surface);
|
||||
color: var(--on-surface);
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
outline: none;
|
||||
|
||||
box-shadow: var(--tl-shadow-primary-concave), var(--br-shadow-primary-concave), inset 0 0 0 0 transparent;
|
||||
transition: box-shadow 200ms, transform 300ms cubic-bezier(.2,2,1,1);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
outline: none;
|
||||
|
||||
box-shadow: var(--tl-shadow-primary-concave), var(--br-shadow-primary-concave), inset 0 0 0 0 transparent;
|
||||
transition: box-shadow 200ms, transform 300ms cubic-bezier(.2,2,1,1);
|
||||
|
||||
margin: 15px;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
|
||||
.action-btn:hover {
|
||||
color: var(--on-surface-dim);
|
||||
color: var(--on-surface-dim);
|
||||
}
|
||||
|
||||
|
||||
.action-btn:active {
|
||||
box-shadow: 0 0 0 transparent, 0 0 0 transparent, var(--tl-shadow-primary-convex), var(--br-shadow-primary-convex);
|
||||
transform: scale(.9);
|
||||
box-shadow: 0 0 0 transparent, 0 0 0 transparent, var(--tl-shadow-primary-convex), var(--br-shadow-primary-convex);
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
|
||||
.action-btn img {
|
||||
width: 25px;
|
||||
height: auto;
|
||||
width: 25px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#battery-icon {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
|
||||
</head>
|
||||
<body>
|
||||
<img class="bg"/>
|
||||
<div class="silhouette hideable hidden"></div>
|
||||
|
||||
<div id="clock-box" class="top-middle center-text top-bleed-extra">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue