AliceClass/assets/css/stylesheet.css

780 lines
16 KiB
CSS
Raw Normal View History

2024-08-04 21:52:05 -03:00
/* ================================================================================================================================== */
/* 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;
}
/* ================================================================================================================================== */
/* Reset and Base Styles */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
/* background-color: var(--background-color); */
}
/* ================================================================================================================================== */
/* Body */
body {
/* background-color: var(--background-color); */
color: var(--heading-color);
background-color: var(--background-color);
scroll-behavior: smooth;
}
2024-05-23 01:23:48 -03:00
2024-08-04 21:52:05 -03:00
/* ================================================================================================================================== */
/* Estilos básicos para todos os cabeçalhos */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family);
color: var(--heading-color);
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
/* ================================================================================================================================== */
/* CSS do Layout Default da pagina _layout/default.html */
.main-content{
width: 100%;
display: flex;
flex-direction: row;
2024-08-29 17:01:40 -03:00
justify-content: center;
2024-08-04 21:52:05 -03:00
padding: 30px 25px;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.page-sidebar{
2024-08-29 17:01:40 -03:00
width: auto;
2024-08-04 21:52:05 -03:00
flex-grow: 1;
margin: 0 25px;
2024-08-29 17:01:40 -03:00
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.page-content{
background-color: var(--tertiary-color);
flex-grow: 10;
2024-08-29 17:01:40 -03:00
margin: 0 50px;
2024-08-04 21:52:05 -03:00
border-radius: 30px;
box-shadow: -10px 5px 15px var(--primary-color);
2024-09-03 16:11:53 -03:00
width: 30vw;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
/* ================================================================================================================================== */
/* SideBar _include/SideBar.html */
.SideBar{
display: flex;
flex-direction: column;
2024-08-29 17:01:40 -03:00
height: 100vh;
2024-08-04 21:52:05 -03:00
position: fixed;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.SideBar .top-sidebar{
flex-grow: 1;
align-items: end;
justify-content: start;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.SideBar aside{
flex-grow: 6;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.SideBar .button-sidebar{
flex-grow: 1;
2024-07-12 22:18:34 -03:00
}
2024-08-04 21:52:05 -03:00
.SideBar .image{
2024-08-29 17:01:40 -03:00
width: 60%;
2024-08-04 21:52:05 -03:00
height: auto;
2024-08-29 17:01:40 -03:00
margin: 10px 0px;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
2024-05-23 01:23:48 -03:00
.menu{
2024-08-04 21:52:05 -03:00
color: var(--text-color);
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.menu li{
list-style: none;
font-family: var(--font-family);
padding: 15px 10px;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.menu li:hover{
/* background: 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%); */
padding: 15px 15px;
cursor: pointer;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.menu a{
color: var(--text-color);
text-decoration: none;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.menu a:hover{
color: var(--secondary-text-color);
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
/* --- */
.button-sidebar li{
list-style: none;
font-family: var(--font-family);
2024-05-23 01:23:48 -03:00
2024-08-04 21:52:05 -03:00
padding: 15px 10px;
}
.button-sidebar li a{
color: var(--text-color);
text-decoration: none;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
/* ================================================================================================================================== */
/* CSS do index da pagina _content/Pages/index.html */
2024-05-23 01:23:48 -03:00
2024-08-04 21:52:05 -03:00
.home-content {
width: 100%;
border-radius: 30px 30px 0px 0;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.home-content .banner{
height: 500px;
width: 100%;
background: url('/assets/images/background.svg') ;
background-size: cover;
background-position: center;
border-radius: 30px;
padding: 0 25px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.lasted{
display: flex;
flex-direction: column;
padding: 0 35px;
border-radius: 30px;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.lasted .title-section{
height: 80px;
width: 100%;
margin: 25px 0;
display: flex;
align-items: center;
justify-content: center;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.lasted .title{
font-weight: 300;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.lasted .content-box{
width: 100%;
margin: 25px 0;
2024-05-23 01:23:48 -03:00
display: flex;
2024-08-04 21:52:05 -03:00
align-items: center;
justify-content: center;
2024-05-23 01:23:48 -03:00
2024-08-04 21:52:05 -03:00
}
2024-05-23 01:23:48 -03:00
2024-08-04 21:52:05 -03:00
.lasted .content-box .box{
height: 500px;
width: 400px;
2024-05-23 01:23:48 -03:00
2024-08-04 21:52:05 -03:00
display: flex;
flex-direction: column;
background-color: var(--background-color);
box-shadow: -10px 5px 5px var(--primary-color);
2024-05-23 01:23:48 -03:00
2024-08-04 21:52:05 -03:00
margin: 0 25px;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.box .box-top{
display: flex;
background-color: #623A40;
flex-grow: 1;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.box .box-top figure img{
width: 100%;
height: 100%;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.box .box-info{
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 15px;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.box .box-info h1{
width: 100%;
margin: 25px 0;
font-size: 24px;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.box .box-info p{
font-size: 18px;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
/* ================================================================================================================================== */
/* CSS da pagina Aulas localizada em _content/Pages/index.html */
2024-05-23 01:23:48 -03:00
2024-08-04 21:52:05 -03:00
.aulas-content{
width: 100%;
2024-05-23 01:23:48 -03:00
2024-08-04 21:52:05 -03:00
padding: 15px;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.aulas-content .title-content{
width: 100%;
display: flex;
flex-direction: row;
padding: 15px;
}
2024-05-23 01:23:48 -03:00
2024-08-04 21:52:05 -03:00
.aulas-content .title-content > :nth-child(1){
flex-grow: 5; /* Este elemento crescerá 5 partes */
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.aulas-content .title-content > :nth-child(1){
flex-grow: 2; /* Este elemento crescerá 5 partes */
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.aulas-content .title-content .button{
font-family: var(--font-family);
font-weight: 500;
display: inline-block;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
user-select: none;
background-color: var(--success-color); /* Cor de fundo padrão (Bulma: primary color) */
border: 1px solid transparent;
border-radius: 4px;
color: #fff; /* Cor do texto */
padding: 0.5rem 1rem; /* Espaçamento interno */
font-size: 1rem;
line-height: 1.5;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.aulas-content .content{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
flex-wrap: wrap;
/* height: 100px; */
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.aulas-content .content .box{
height: 500px;
width: 400px;
2024-05-23 01:23:48 -03:00
2024-08-04 21:52:05 -03:00
display: flex;
flex-direction: column;
background-color: var(--background-color);
box-shadow: -5px 5px 15px var(--primary-color);
margin: 25px 25px;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
/* ================================================================================================================================== */
/* CSS da pagina autores localizada em _content/Pages/autores.html */
.autores-content{
width: 100%;
padding: 15px;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.autores-content .title-content{
2024-05-23 01:23:48 -03:00
width: 100%;
2024-08-04 21:52:05 -03:00
display: flex;
flex-direction: row;
padding: 15px;
}
.autores-content .title-content > :nth-child(1){
flex-grow: 5; /* Este elemento crescerá 5 partes */
}
.autores-content .title-content > :nth-child(1){
flex-grow: 2; /* Este elemento crescerá 5 partes */
}
.autores-content .title-content .button{
font-family: var(--font-family);
font-weight: 500;
display: inline-block;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
user-select: none;
background-color: var(--success-color); /* Cor de fundo padrão (Bulma: primary color) */
border: 1px solid transparent;
border-radius: 4px;
color: #fff; /* Cor do texto */
padding: 0.5rem 1rem; /* Espaçamento interno */
font-size: 1rem;
line-height: 1.5;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.autores-content .content{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
flex-wrap: wrap;
/* height: 100px; */
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.autores-content .content .box{
height: 600px;
width: 400px;
display: flex;
flex-direction: column;
background-color: var(--background-color);
box-shadow: -5px 5px 15px var(--primary-color);
margin: 25px 25px;
}
/* ================================================================================================================================== */
/* CSS da pagina autores localizada em _includes/formularios/envAula.html */
.envArquivo h1{
font-family: var(--font-family);
margin: 30px ;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
.envArquivo{
2024-05-23 01:23:48 -03:00
display: flex;
2024-08-04 21:52:05 -03:00
align-items: start;
justify-content: start;
2024-05-23 01:23:48 -03:00
flex-direction: column;
2024-08-04 21:52:05 -03:00
margin: 0 30px;
2024-05-23 01:23:48 -03:00
}
2024-08-04 21:52:05 -03:00
/*
.envArquivo .field{
height: 30%;
2024-05-23 01:23:48 -03:00
width: 100%;
2024-08-04 21:52:05 -03:00
margin: 0 30px;
}
.envArquivo .field .label{
font-family: var(--font-family);
font-weight: 400;
}
.envArquivo .field .input {
height: 30px;
width: 200px;
2024-05-23 01:23:48 -03:00
border-radius: 10px;
}
2024-08-04 21:52:05 -03:00
.envArquivo .field-row{
display: flex;
flex-direction: row;
} */
.input.input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
width: 100%;
height: 2.5em;
padding: 0.5em 0.75em;
font-size: 1em;
line-height: 1.5;
color: #363636;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #dbdbdb;
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Placeholder */
input.input::placeholder {
color: #b5b5b5;
}
/* Focus */
input.input:focus {
border-color: #3273dc;
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
outline: none;
}
/* Modificações personalizadas */
input.input.custom {
border-radius: 8px; /* Arredondar mais os cantos */
border-color: #ff3860; /* Cor de borda personalizada */
background-color: #f9f9f9; /* Cor de fundo personalizada */
}
input.input.custom:focus {
border-color: #ff79b0;
box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25);
}
/* Estados de erro */
input.input.custom.is-danger {
border-color: #ff3860;
box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25);
}
/* Estados de sucesso */
input.input.custom.is-success {
border-color: #23d160;
box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25);
}
2024-08-05 17:20:05 -03:00
/* ================================================================================================================================== */
/* CSS da pagina dashboard localizada em _includes/layouts/dashboard.php */
.dashboard-content{
width: 100%;
border-radius: 30px 30px 0px 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.dashboard-content .banner{
height: 300px;
width: 100%;
background: url('/assets/images/background.svg') ;
background-size: cover;
background-position: center;
border-radius: 30px;
padding: 0 25px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.index-dashboard{
display: flex;
flex-direction: row;
justify-content: center;
}
.index-dashboard .box-info{
min-height: 100px;
min-width: 400px;
display: flex;
flex-direction: column;
background-color: var(--primary-color);
border-radius: 15px;
margin: 15px;
justify-content: center;
align-items: center;
}
.dashboard-content .menu{
height: 100%;
min-width: 20%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-radius: 0 0 30px 30px;
background-color: var(--background-color);
}
.dashboard-content a{
text-decoration: none;
color: var(--text-color);
margin: 15px;
2024-08-22 18:01:06 -03:00
}
2024-09-03 16:11:53 -03:00
/* ================================================================================================================================== */
/* CSS da pagina Player localizada em _includes/layouts/dashboard.php */
2024-08-22 18:01:06 -03:00
.player-off{
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.player-off h1{
font-size: 48px;
2024-08-29 17:36:14 -03:00
}
.player-container {
position: relative;
/* width: 100%;
height: 100%; */
flex-grow: 10;
}
.player {
width: 100%;
height: 100%;
border-radius: 15px;
}
.player-off {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Cor de fundo semitransparente */
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
z-index: 10; /* Garante que a mensagem "Offline" apareça em cima do vídeo */
}
.player-info {
border-radius: 15px;
background-color: #0b1a33;
}
/* Estilos específicos para o player, se necessário */
video::-webkit-media-controls {
background-color: hsl(0, 0%, 14%);
}
video::-webkit-media-controls-play-button {
color: #fff;
}
.live-container{
display: flex;
flex-direction: row;
height: 70vh;
width: 100%;
}
.chat {
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 15px;
2024-09-03 16:11:53 -03:00
background-color: var(--background-color);
2024-08-29 17:36:14 -03:00
border-radius: 10px;
color: #fff;
}
.chat-container {
display: flex;
flex-direction: column;
height: 100%;
}
.chat-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #1a2b4d;
}
.chat h1, .chat h4 {
margin: 0;
}
.chat-lines {
flex-grow: 1;
overflow-y: auto;
padding: 10px;
2024-09-03 16:11:53 -03:00
background-color: var(--primary-color);
2024-08-29 17:36:14 -03:00
}
.chat-line {
margin-bottom: 10px;
}
.chat-line p {
margin: 0;
color: #fff;
}
.username {
font-weight: bold;
color: #4a90e2;
margin-right: 5px;
}
.chat-input {
padding: 10px;
border-top: 1px solid #1a2b4d;
}
.chat-input-form {
display: flex;
align-items: center;
}
.chat-enter {
flex-grow: 1;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #1a2b4d;
color: #fff;
}
.chat-enter:focus {
outline: none;
background-color: #243b65;
}
2024-09-03 16:11:53 -03:00
.page-aula{
font-family: var(--font-family);
}
.detals-aula{
display: flex;
flex-direction: row;
margin: 15px;
justify-content: space-between;
}
.info-aula{
display: flex;
flex-direction: column;
}
.info-aula h1, h2, h3{
font-family: var(--font-family);
}
.download .button {
display: inline-block;
font-weight: 600;
padding: 0.5em 1em;
border-radius: 4px;
border: 2px solid transparent;
background-color: #48c774; /* Cor verde */
color: #fff; /* Texto branco */
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.download .button:hover {
background-color: #3ec46d; /* Cor verde mais escura no hover */
}
.download .button:active {
background-color: #36a65b; /* Cor ainda mais escura ao clicar */
}
.download .button:focus {
border-color: #32a852; /* Borda verde ao focar */
outline: none; /* Remove o outline padrão do navegador */
box-shadow: 0 0 0 0.125em rgba(72, 199, 116, 0.25); /* Sombra ao focar */
}
.content-aula{
margin: 25px;
font-family: var(--font-family);
}
.content-aula li{
margin: 15px;
}
.content-aula a{
color: #007bff; /* Cor do link, você pode escolher outra cor que combine com o design */
text-decoration: none; /* Remove o sublinhado do link */
font-weight: bold; /* Deixa o texto mais destacado */
border-bottom: 2px solid transparent; /* Adiciona uma borda inferior invisível */
transition: border-color 0.3s ease; /* Transição suave para o hover */
}
.content-aula a:hover {
border-bottom-color: #007bff; /* Mostra a borda inferior ao passar o mouse */
}