496 lines
11 KiB
CSS
Executable File
496 lines
11 KiB
CSS
Executable File
/* ================================================================================================================================== */
|
|
/* 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;
|
|
}
|
|
|
|
/* ================================================================================================================================== */
|
|
/* Estilos básicos para todos os cabeçalhos */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-family);
|
|
color: var(--heading-color);
|
|
}
|
|
/* ================================================================================================================================== */
|
|
/* CSS do Layout Default da pagina _layout/default.html */
|
|
|
|
.main-content{
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
padding: 30px 25px;
|
|
}
|
|
|
|
.page-sidebar{
|
|
width: 100px;
|
|
flex-grow: 1;
|
|
margin: 0 25px;
|
|
}
|
|
.page-content{
|
|
width: 100px;
|
|
|
|
background-color: var(--tertiary-color);
|
|
flex-grow: 10;
|
|
margin: 0 25px;
|
|
border-radius: 30px;
|
|
|
|
box-shadow: -10px 5px 15px var(--primary-color);
|
|
}
|
|
|
|
/* ================================================================================================================================== */
|
|
/* SideBar _include/SideBar.html */
|
|
.SideBar{
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 90vh;
|
|
position: fixed;
|
|
|
|
}
|
|
|
|
.SideBar .top-sidebar{
|
|
flex-grow: 1;
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: start;
|
|
}
|
|
.SideBar aside{
|
|
flex-grow: 6;
|
|
|
|
}
|
|
|
|
.SideBar .button-sidebar{
|
|
flex-grow: 1;
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: start;
|
|
}
|
|
|
|
.SideBar .image{
|
|
width: 90%;
|
|
height: auto;
|
|
margin: 30px 0px;
|
|
}
|
|
|
|
.menu{
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.menu li{
|
|
list-style: none;
|
|
font-family: var(--font-family);
|
|
|
|
padding: 15px 10px;
|
|
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.menu a{
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.menu a:hover{
|
|
color: var(--secondary-text-color);
|
|
}
|
|
|
|
/* --- */
|
|
.button-sidebar li{
|
|
list-style: none;
|
|
font-family: var(--font-family);
|
|
|
|
padding: 15px 10px;
|
|
|
|
}
|
|
|
|
.button-sidebar li a{
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ================================================================================================================================== */
|
|
/* CSS do index da pagina _content/Pages/index.html */
|
|
|
|
.home-content {
|
|
width: 100%;
|
|
|
|
border-radius: 30px 30px 0px 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.lasted{
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
padding: 0 35px;
|
|
border-radius: 30px;
|
|
}
|
|
|
|
.lasted .title-section{
|
|
height: 80px;
|
|
width: 100%;
|
|
|
|
margin: 25px 0;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.lasted .title{
|
|
font-weight: 300;
|
|
|
|
}
|
|
|
|
.lasted .content-box{
|
|
width: 100%;
|
|
|
|
margin: 25px 0;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.lasted .content-box .box{
|
|
height: 500px;
|
|
width: 400px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--background-color);
|
|
box-shadow: -10px 5px 5px var(--primary-color);
|
|
|
|
margin: 0 25px;
|
|
}
|
|
|
|
.box .box-top{
|
|
display: flex;
|
|
background-color: #623A40;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.box .box-top figure img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.box .box-info{
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
|
|
|
|
margin: 15px;
|
|
}
|
|
|
|
.box .box-info h1{
|
|
width: 100%;
|
|
|
|
margin: 25px 0;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.box .box-info p{
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* ================================================================================================================================== */
|
|
/* CSS da pagina Aulas localizada em _content/Pages/index.html */
|
|
|
|
.aulas-content{
|
|
width: 100%;
|
|
|
|
padding: 15px;
|
|
}
|
|
.aulas-content .title-content{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 15px;
|
|
}
|
|
|
|
.aulas-content .title-content > :nth-child(1){
|
|
flex-grow: 5; /* Este elemento crescerá 5 partes */
|
|
}
|
|
.aulas-content .title-content > :nth-child(1){
|
|
flex-grow: 2; /* Este elemento crescerá 5 partes */
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.aulas-content .content{
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
/* height: 100px; */
|
|
}
|
|
|
|
.aulas-content .content .box{
|
|
height: 500px;
|
|
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 _content/Pages/autores.html */
|
|
|
|
.autores-content{
|
|
width: 100%;
|
|
|
|
padding: 15px;
|
|
}
|
|
.autores-content .title-content{
|
|
width: 100%;
|
|
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; */
|
|
}
|
|
|
|
.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 ;
|
|
}
|
|
|
|
.envArquivo{
|
|
display: flex;
|
|
align-items: start;
|
|
justify-content: start;
|
|
flex-direction: column;
|
|
margin: 0 30px;
|
|
}
|
|
/*
|
|
.envArquivo .field{
|
|
height: 30%;
|
|
width: 100%;
|
|
|
|
margin: 0 30px;
|
|
}
|
|
|
|
.envArquivo .field .label{
|
|
font-family: var(--font-family);
|
|
font-weight: 400;
|
|
}
|
|
.envArquivo .field .input {
|
|
height: 30px;
|
|
width: 200px;
|
|
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.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);
|
|
}
|