AliceClass/assets/css/tutorial.css

64 lines
1.8 KiB
CSS

/* ================================================================================================================================== */
/* Variables */
:root {
/* Paleta de cors */
--midnight-blue: #0B1A33;
--cornflower-blue: #4B90F8;
--goldenrod: #D6A419;
--caribbean-green: #00C6BE;
--deep-ruby: #623A40;
--ivory: #F1F1E6;
--alice-blue: #F4F9FF;
--charcoal-blue: #35405D;
--slate-gray: #616B8B;
--light-slate-gray: #909ABB;
--periwinkle: #2d2e31;
/* Informaçoes da paleta de cores */
--primary-color: var(--midnight-blue);
--secondary-color: var(--cornflower-blue);
--tertiary-color: var(--periwinkle);
--gradient-backfround: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(75,144,248,1) 19%, rgba(97,157,246,1) 85%, rgba(241,241,230,0) 100%);
--accent-color: var(--goldenrod);
--background-color: var(--charcoal-blue);
--text-color: var( --alice-blue);
--secondary-text-color: var(--slate-gray);
--border-color: var(--deep-ruby);
--highlight-color: var(--caribbean-green);
--error-color: var(--slate-gray);
--success-color: var(--light-slate-gray);
--warning-color: var(--periwinkle);
--info-color: var(--ivory);
--font-family: 'Roboto', sans-serif;
--heading-color: var(--alice-blue);
--heading-margin: 0 0 20px;
}
/* assets/css/tutorial.css */
#tutorial-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.8); /* Escurece a tela */
/* display: flex; */
justify-content: center;
align-items: center;
z-index: 1000;
}
#tutorial-box {
background: var(--deep-ruby);
padding: 20px;
border-radius: 8px;
max-width: 500px;
text-align: center;
}
.hidden {
display: none;
}