Plik 2/5 - CSS/style.css
/* ==========================================
M PLATFORM
style.css
v0.1.0
========================================== */
:root{
--bg:#050814;
--surface:#10182d;
--surface-light:#17233d;
--line:#27385e;
--blue:#00a8ff;
--text:white;
--muted:#94a3b8;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}
html,
body{
width:100%;
height:100%;
overflow:hidden;
background:var(--bg);
color:var(--text);
font-family:Arial,sans-serif;
}
/* ===========================
APP
=========================== */
#app{
width:100%;
height:100%;
display:none;
}
/* ===========================
SCREEN
=========================== */
.screen{
width:100%;
height:100%;
padding:25px;
display:flex;
align-items:center;
justify-content:center;
}
/* ===========================
HOME
=========================== */
.homeBox{
text-align:center;
}
.homeTitle{
font-size:28px;
font-weight:600;
margin-bottom:10px;
}
.homeSubtitle{
color:var(--muted);
font-size:15px;
}
/* ===========================
BUTTON
=========================== */
.addButton{
width:120px;
height:120px;
margin:0 auto 25px;
border-radius:50%;
border:2px solid rgba(255,255,255,.35);
display:flex;
justify-content:center;
align-items:center;
font-size:60px;
font-weight:200;
background:
radial-gradient(
circle,
rgba(0,168,255,.25),
transparent 70%
);
box-shadow:
0 0 35px rgba(0,168,255,.25);
cursor:pointer;
transition:.25s;
}
.addButton:active{
transform:scale(.92);
}
/* ===========================
CARD
=========================== */
.card{
width:100%;
max-width:420px;
background:
linear-gradient(
180deg,
var(--surface),
var(--surface-light)
);
border-radius:24px;
padding:25px;
border:1px solid rgba(255,255,255,.05);
box-shadow:
0 15px 40px rgba(0,0,0,.35);
}
.fade{
animation:fade .5s ease;
}
@keyframes fade{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}