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