Plik 2/12 — css/style.css
/* ==========================================
M PLATFORM
style.css
Wersja: 0.1.0
========================================== */
:root{
/* Kolory */
--bg:#050814;
--surface:#10182d;
--surface-light:#17233d;
--border:#27385e;
--primary:#00a8ff;
--primary-soft:rgba(0,168,255,.15);
--success:#00ff66;
--warning:#f4d03f;
--text:#ffffff;
--muted:#94a3b8;
/* Zaokrąglenia */
--radius-xs:10px;
--radius-sm:16px;
--radius-md:22px;
--radius-lg:30px;
/* Animacje */
--speed:.25s;
}
*{
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;
}
body{
display:flex;
flex-direction:column;
}
/* ==========================================
GŁÓWNY KONTENER
========================================== */
#app{
flex:1;
display:none;
overflow:hidden;
}
/* ==========================================
EKRANY
========================================== */
.screen{
width:100%;
height:100%;
padding:24px;
}
/* ==========================================
KARTY
========================================== */
.card{
background:
linear-gradient(
180deg,
var(--surface),
var(--surface-light)
);
border-radius:var(--radius-md);
border:1px solid rgba(255,255,255,.05);
padding:20px;
box-shadow:
0 12px 35px rgba(0,0,0,.35);
}
/* ==========================================
NAGŁÓWKI
========================================== */
.title{
font-size:26px;
font-weight:600;
}
.subtitle{
margin-top:8px;
color:var(--muted);
font-size:14px;
}
/* ==========================================
PRZYCISKI
========================================== */
.button{
height:56px;
border:none;
border-radius:18px;
cursor:pointer;
transition:.25s;
}
.button:active{
transform:scale(.97);
}
/* ==========================================
NIEBIESKI
========================================== */
.buttonPrimary{
background:var(--primary);
color:white;
font-size:17px;
font-weight:600;
}
/* ==========================================
ANIMACJE
========================================== */
.fadeIn{
animation:fadeIn .35s;
}
@keyframes fadeIn{
from{
opacity:0;
}
to{
opacity:1;
}
}