/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Lora&family=Poppins:wght@400;700&display=swap');
/*este containerul in care se afiseaza cardurile la clic pe CANCELARIE (profesorii si administrativul)*/
:root {
--max-cancelarie-height: auto; /* Setează aici valoarea dorită pentru înălțimea maximă */
--main-blue: #2b516a;
--red: #c32b28;
--white: #ffffff;
--black: #000000;
--shade-blue-1: #003C64;
--shade-blue-2: #004AAC;
--font-header: 'Poppins', sans-serif;
--font-subheader: 'Lora', serif;
--font-body: 'Poppins', sans-serif;
}
/* Body Text Styles */
p, span, div, a, li, input, textarea, button {
font-family: var(--font-body);
font-weight: normal;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.column_documente {
flex: 0 0 60%;
margin: 1rem;
padding: 1rem;
background-color: #f5f5f5;
color: var(--red);
box-sizing: border-box;
}
.column_dreapta {
flex: 0 0 35%;
margin: 1rem;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.column_pdf_uri,
.column_imagini {
padding: 1rem;
background-color: #f5f5f5;
margin-bottom: 1rem;
box-sizing: border-box;
}
/* Stil pentru imaginile din .column_imagini */
.column_imagini img {
width: 100%;
height: auto;
display: block;
}
/* Media Queries pentru ecrane mai mici */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.column_documente,
.column_dreapta {
flex: 1 0 auto;
margin: 0;
}
.column {
margin: 0;
padding: 0.5rem;
}
.column_pdf_uri,
.column_imagini {
margin-bottom: 0.5rem;
}
.column_imagini {
flex: 1 0 100%;
margin: 0;
padding: 0.5rem;
}
}
.chat {
background-color: #e6e6e6;
padding: 1rem;
}
/* pentru formularul de date utilizator */
.body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.formular {
max-width: 800px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
}
.formular .input-group {
margin-bottom: 15px;
}
.formular .input-group label {
display: block;
margin-bottom: 5px;
}
.formular .input-group input,
.formular .input-group select {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.formular form {
display: flex;
flex-wrap: wrap;
gap: 25px; /* Adaugă spațiu între coloane și rânduri */
}
.formular form .input-group {
flex: 1 1 15%; /* Ajustează această valoare în funcție de lățimea dorită */
min-width: 220px; /* Poți ajusta lățimea minimă pentru câmpuri */
}
.formular form .input-group.full-width {
flex: 1 1 100%;
}
.formular button {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.formular button:hover {
background-color: #45a049;
}
/* Header Styles */
h1, h3, h4, h5, h6 {
font-family: var(--font-header);
font-weight: bold;
}
h2 {
font-family: var(--font-subheader);
}
.h2 {
font-family: var(--font-subheader);
font-size: 24px;
margin-bottom: 20px;
text-align: center;
}
.form {
display: flex;
flex-wrap: wrap;
}
.camp {
width: 100%;
margin-bottom: 10px;
box-sizing: border-box;
}
.label {
display: block;
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
}
.input[type="text"],
.input[type="email"],
.input[type="tel"],
.select {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 10px;
}
/*.select {
appearance: none;
webkit-appearance: none;
moz-appearance: none;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-position: right 10px top 50%;
background-size: 8px 5px;
}*/
.header-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 40px; /* min-height pentru a permite extinderea cu safe-area */
z-index: 100;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white; /* Adăugați culoarea de fundal dorită */
padding-bottom: 20px;
/* Safe area pentru iPhone notch/Dynamic Island */
padding-top: env(safe-area-inset-top, 0px);
padding-top: constant(safe-area-inset-top); /* iOS 11.0-11.2 */
box-sizing: content-box; /* padding-ul se adaugă la înălțime, nu se include */
}
/* Add this CSS to create the line */
.header-container::after {
content: '';
position: absolute;
bottom: 0; /* Positions the line at the bottom of the header */
left: 10%; /* Starts 10% from the left edge */
width: 80%; /* Line spans 80% width, leaving 10% on each side */
border-bottom: 2px solid black; /* Creates the thin black line */
border-radius: 10px;
}
#numeUnitate {
color: var(--main-blue);
text-shadow: 1px 1px 2px #000000;
top: 0;
left: 0;
padding: 5px; /* Ajustează pentru a poziționa textul exact unde dorești */
font-size: 26px;
}
/* Adăugați un margin-top pentru a compensa înălțimea header-ului */
body {
margin-top: 60px; /* Ajustați această valoare în funcție de înălțimea header-ului */
/* Safe area pentru iPhone notch/Dynamic Island */
margin-top: calc(60px + env(safe-area-inset-top, 0px));
}
.grupa-clasa-container {
text-align: center;
margin-top: 40px;
}
.nume-grupa {
margin-bottom: 0;
display: inline-block;
color: var(--main-blue);
}
#select_grupa_clasa {
font-size: 22px;
font-weight: bold;
min-width: 180px;
text-align: center;
display: inline-block;
margin-top: 10px;
color: var(--main-blue);
}
/*condiția CANCELARIE */
.conditie-cancelarie {
position: absolute;
top: -3px; /* Ajustat pentru mai mult spațiu în partea de jos */
left: 50%;
transform: translate(-50%, -50%);
color: var(--red); font-size: 14px; /* Dimensiunea fontului redusă */
margin-bottom: 5px;
}
.cancelarie-container {
left: 5%;
transform: translateX(-5%);
height: var(--max-cancelarie-height); /* Utilizează variabila pentru a seta înălțimea maximă */
min-height: 0;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); /* Umbră pentru fereastra */
position: absolute;
top: calc(40px + 12px); /* Înălțimea headerului + offset */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 100%; /* sau orice valoare care vă convine */
overflow: auto !important; /* Permite scroll-ul intern */
background-color: var(--red); /* Asigură un fundal alb pentru container */
z-index: 1000; /* Asigură că containerul este deasupra altor elemente */
}
.talk-to {
margin-top: 3px;
margin-bottom: 2px;
display: inline-block;
color: var(--main-blue);
margin-left : 20px;
}
.parinti-info , .info-group {
font-size: 14px;
font-style: italic;
color: #888;
flex: 2;
text-align: left;
margin-bottom: 0;
}
@media (max-width: 480px) {
.image_grid_container {
flex-wrap: wrap; /* Acest lucru va permite imaginilor să se înfășoare în coloană pe ecranele mai mici */
}
.image-grid-item {
flex-basis: 100%; /* Acest lucru va face ca elementele să aibă lățimea maximă pe ecranele mici */
max-width: 100%; /* Acest lucru va permite elementelor să se întindă pe toată lățimea ecranului */
}
}
* {
border-radius: 10px; /* Adjust the value as needed */
}
@media (min-width: 768px) {
.header-container {
flex-direction: row;
}
}
@media (min-width: 992px) {
.formular {
padding: 40px;
}
}
.footer-container {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--main-blue);
height: 100px;
margin-top: 20px;
color: white;
box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.2);
}
select#grupa_clasa_copil {
font-size: 14px;
color: #333333;
}
.continua-button {
background-color: #3088d6;
border: 3px solid #EE82EE;
border-radius: 3px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 18px;
font-weight: bold;
margin-top: 20px;
padding: 10px 20px;
text-align: center;
text-decoration: none;
text-shadow: 0px 1px 0px #000;
text-transform: uppercase;
transition: all 0.2s ease-in-out;
}
.continua-button:hover {
background-color: #4d9de0;
border: 1px solid #EE82EE;
}
.continua-text {
display: block;
line-height: 1;
}
.file-title {
color: #888;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
a {
color: var(--main-blue);
text-decoration: none;
}
.doc-item {
margin-bottom: 20px;
color: var(--red);
}
.doc-item:hover {
color: var(--shade-blue-2); /* Change to the desired color */
}
/*aici este codul style pentru grila de 3 imagini afisate din imagini_activitati.php*/
/* Stil pentru containerul grid-ului de imagini */
.image_grid_container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap; /* Acest lucru va împiedica imaginile să se înfășoare în coloană la redimensionare */
padding: 10px;
width: 80%; /* Ajustează această valoare conform necesităților tale */
margin: 0 auto; /* Centrează containerul orizontal */
border-radius: 10px; /* Adaugă colțuri rotunjite */
}
/* Stil pentru fiecare element de imagine în grid */
.image-grid-item {
flex: 1;
margin: 10px; /* Acesta este spațiul dintre casetele de imagini. Ajustați în funcție de nevoi */
box-sizing: border-box; /* Aceasta asigură că marginile și padding-ul sunt incluse în lățimea totală a elementului, păstrând astfel dimensiunile casetei constante */
border: 1px solid #ccc; /* Acesta este un border simplu, gri deschis. Modificați în funcție de nevoile dvs. de design */
overflow: hidden; /* Acest lucru va ascunde orice parte a imaginii care depășește dimensiunile casetei */
flex-basis: 100%; /* Acest lucru împarte spațiul între cele trei elemente */
max-width: 100%; /* Acest lucru restrânge lățimea elementului la 33% din lățimea containerului */
box-sizing: border-box; /* Acest lucru face ca padding-ul și border-ul să fie incluse în lățimea totală */
padding: 10px; /* Acest lucru adaugă un spațiu în jurul imaginii */
box-shadow: 0 4px 6px rgba(138, 43, 226, 0.1); /* Folosiți culoarea violet */
transition: box-shadow 0.3s;
border-radius: 10px; /* Adaugă colțuri rotunjite */
}
/* Stil pentru imaginile din grid */
.galerie-activitati {
width: 100%;
height: auto; /* Acest lucru va păstra proporțiile imaginii în timp ce se mărește lățimea */
object-fit: cover; /* Acest lucru va asigura că întreaga imagine se va potrivi în caseta, decupând partea care depășește */
cursor: pointer;
transition: transform 0.3s;
}
/* Un efect de hover pentru a indica interactivitatea cu imaginile */
.galerie-activitati:hover {
transform: scale(1.5);
}
.column_documente, .column_pdf_uri, .column_imagini {
flex: 1 1 30%; /* Fiecare coloană va ocupa aproximativ 30% din lățime */
margin: 10px;
box-sizing: border-box;
}
/*codul urmator se ocupa de afisarea in iframe a celor 3 documente pdf*/
#iframe_grid_container {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
border-radius: 10px; /* Adaugă colțuri rotunjite */
}
textarea {
resize: none;
overflow: visible;
}
table td {
position: relative;
padding: 0; /* Remove padding */
}
table td textarea {
width: 100%;
height: auto; /* Set height to auto to allow dynamic resizing */
min-height: 50px; /* Set a minimum height */
box-sizing: border-box;
resize: none; /* Prevent manual resizing */
border: none;
padding: 5px;
margin: 0;
overflow: hidden; /* Prevent scrollbar */
}
/* pentru formularul de date utilizator */
.body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.formular {
max-width: 800px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
}
.formular .input-group {
margin-bottom: 15px;
}
.formular .input-group label {
display: block;
margin-bottom: 5px;
}
.formular .input-group input,
.formular .input-group select {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.formular form {
display: flex;
flex-wrap: wrap;
gap: 25px; /* Adaugă spațiu între coloane și rânduri */
}
.formular form .input-group {
flex: 1 1 15%; /* Ajustează această valoare în funcție de lățimea dorită */
min-width: 220px; /* Poți ajusta lățimea minimă pentru câmpuri */
}
.formular form .input-group.full-width {
flex: 1 1 100%;
}
.formular button {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.formular button:hover {
background-color: #45a049;
}
.form {
display: flex;
flex-wrap: wrap;
}
.camp {
width: 100%;
margin-bottom: 10px;
box-sizing: border-box;
}
.label {
display: block;
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
}
.input[type="text"],
.input[type="email"],
.input[type="tel"],
.select {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 10px;
}
/*.select {
appearance: none;
webkit-appearance: none;
moz-appearance: none;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-position: right 10px top 50%;
background-size: 8px 5px;
}*/
#numeUnitate {
color: var(--main-blue);
text-shadow: 1px 1px 2px #000000;
top: 0;
left: 0;
padding: 5px; /* Ajustează pentru a poziționa textul exact unde dorești */
font-size: 26px;
}
/* Adăugați un margin-top pentru a compensa înălțimea header-ului */
body {
margin-top: 60px; /* Ajustați această valoare în funcție de înălțimea header-ului */
/* Safe area pentru iPhone notch/Dynamic Island */
margin-top: calc(60px + env(safe-area-inset-top, 0px));
}
.grupa-clasa-container {
text-align: center;
margin-top: 40px;
}
.nume-grupa {
margin-bottom: 0;
display: inline-block;
color: var(--main-blue);
}
#select_grupa_clasa {
font-size: 22px;
font-weight: bold;
min-width: 180px;
text-align: center;
display: inline-block;
margin-top: 10px;
color: var(--main-blue);
}
/*condiția CANCELARIE */
.conditie-cancelarie {
position: absolute;
top: -3px; /* Ajustat pentru mai mult spațiu în partea de jos */
left: 50%;
transform: translate(-50%, -50%);
color: var(--red); font-size: 14px; /* Dimensiunea fontului redusă */
margin-bottom: 5px;
}
.cancelarie-container {
left: 5%;
transform: translateX(-5%);
height: var(--max-cancelarie-height); /* Utilizează variabila pentru a seta înălțimea maximă */
min-height: 0;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); /* Umbră pentru fereastra */
position: absolute;
top: calc(40px + 12px); /* Înălțimea headerului + offset */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 100%; /* sau orice valoare care vă convine */
overflow: auto !important; /* Permite scroll-ul intern */
background-color: var(--red); /* Asigură un fundal alb pentru container */
z-index: 1000; /* Asigură că containerul este deasupra altor elemente */
}
.talk-to {
margin-top: 3px;
margin-bottom: 2px;
display: inline-block;
color: var(--main-blue);
margin-left : 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.parinti-info , .info-group {
font-size: 14px;
font-style: italic;
color: #888;
flex: 2;
text-align: left;
margin-bottom: 0;
}
@media (max-width: 480px) {
.image_grid_container {
flex-wrap: wrap; /* Acest lucru va permite imaginilor să se înfășoare în coloană pe ecranele mai mici */
}
.image-grid-item {
flex-basis: 100%; /* Acest lucru va face ca elementele să aibă lățimea maximă pe ecranele mici */
max-width: 100%; /* Acest lucru va permite elementelor să se întindă pe toată lățimea ecranului */
}
}
* {
border-radius: 10px; /* Adjust the value as needed */
}
@media (min-width: 992px) {
.formular {
padding: 40px;
}
}
.footer-container {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--main-blue);
height: 100px;
margin-top: 20px;
color: white;
box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.2);
}
select#grupa_clasa_copil {
font-size: 14px;
color: #333333;
}
.continua-button {
background-color: #3088d6;
border: 3px solid #EE82EE;
border-radius: 3px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 18px;
font-weight: bold;
margin-top: 20px;
padding: 10px 20px;
text-align: center;
text-decoration: none;
text-shadow: 0px 1px 0px #000;
text-transform: uppercase;
transition: all 0.2s ease-in-out;
}
.continua-button:hover {
background-color: #4d9de0;
border: 1px solid #EE82EE;
}
.continua-text {
display: block;
line-height: 1;
}
.file-title {
color: #888;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
a {
color: var(--main-blue);
text-decoration: none;
}
.doc-item {
margin-bottom: 20px;
}
/*aici este codul style pentru grila de 3 imagini afisate din imagini_activitati.php*/
/* Stil pentru containerul grid-ului de imagini */
.image_grid_container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap; /* Acest lucru va împiedica imaginile să se înfășoare în coloană la redimensionare */
padding: 10px;
width: 80%; /* Ajustează această valoare conform necesităților tale */
margin: 0 auto; /* Centrează containerul orizontal */
border-radius: 10px; /* Adaugă colțuri rotunjite */
}
/* Stil pentru fiecare element de imagine în grid */
.image-grid-item {
flex: 1;
margin: 10px; /* Acesta este spațiul dintre casetele de imagini. Ajustați în funcție de nevoi */
box-sizing: border-box; /* Aceasta asigură că marginile și padding-ul sunt incluse în lățimea totală a elementului, păstrând astfel dimensiunile casetei constante */
border: 1px solid #ccc; /* Acesta este un border simplu, gri deschis. Modificați în funcție de nevoile dvs. de design */
overflow: hidden; /* Acest lucru va ascunde orice parte a imaginii care depășește dimensiunile casetei */
flex-basis: 100%; /* Acest lucru împarte spațiul între cele trei elemente */
max-width: 100%; /* Acest lucru restrânge lățimea elementului la 33% din lățimea containerului */
box-sizing: border-box; /* Acest lucru face ca padding-ul și border-ul să fie incluse în lățimea totală */
padding: 10px; /* Acest lucru adaugă un spațiu în jurul imaginii */
box-shadow: 0 4px 6px rgba(138, 43, 226, 0.1); /* Folosiți culoarea violet */
transition: box-shadow 0.3s;
border-radius: 10px; /* Adaugă colțuri rotunjite */
}
/* Stil pentru imaginile din grid */
.galerie-activitati {
width: 100%;
height: auto; /* Acest lucru va păstra proporțiile imaginii în timp ce se mărește lățimea */
object-fit: cover; /* Acest lucru va asigura că întreaga imagine se va potrivi în caseta, decupând partea care depășește */
cursor: pointer;
transition: transform 0.3s;
}
/* Un efect de hover pentru a indica interactivitatea cu imaginile */
.galerie-activitati:hover {
transform: scale(1.5);
}
.column.documente {
max-width: 600px; /* Setează lățimea maximă dorită */
width: 100%; /* Asigură-te că utilizează lățimea disponibilă */
box-sizing: border-box; /* Include padding și border în lățime */
}
.documente {
/*background-color: #f8f8f8;*/
padding: 1rem;
background-color: #f5f5f5;
background-size: 20px 20px;
}
/*codul urmator se ocupa de afisarea in iframe a celor 3 documente pdf*/
#iframe_grid_container {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
border-radius: 10px; /* Adaugă colțuri rotunjite */
}
.iframe-grid-item {
flex: 1;
margin: 3px;
box-sizing: border-box;
border: 1px solid #ccc;
overflow: auto;
flex-basis: 100%;
max-width: 100%;
padding: 3px;
box-shadow: 0 4px 6px rgba(138, 43, 226, 0.1);
height: 100%;
border-radius: 10px; /* Adaugă colțuri rotunjite */
}
/*codul pentru fereastra de afisare destinatari la trimiterea mesajelor*/
#fereastraSelectie {
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
padding: 10px;
position: absolute;
width: 300px;
z-index: 1000;
}
.user-selection {
cursor: pointer;
padding: 4px;
}
.user-selection:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.input-wrapper {
position: relative;
}
/*codul pentru notificarile cu clopotel*/
.ascuns {
display: none;
}
#container_notificari {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
color: red;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
display: flex;
position: fixed;
top: 0;
left: 0;
margin-left: 0.3cm;
align-items: center;
}
#container_notificari p {
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
#prezenta_generala {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
color: blue; /* Sau oricare altă culoare pe care o preferi */
text-shadow: 2px 0.1px 2px rgba(0, 0, 0, 0.5);
display: block;
position: fixed;
left: 0;
margin-left: 0.1cm; /* Poți ajusta această valoare pentru a poziționa corect textul */
align-items: center;
}
#prezenta_generala p {
margin-top: 0;
margin-bottom: 0;
margin-right: 7px;
}
.logo-link {
text-decoration: none; /* Elimină sublinierea implicită a linkurilor */
color: inherit; /* Păstrează culoarea textului moștenită, dacă este necesar */
}
.logo {
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
background-image: url('tid4k.png');
width: 1.8cm;
height: 1.55cm;
position: absolute;
top: 3px;
right: 13px;
}
.logo-qrcode-mic {
display: inline-block; /* Menține elementul în fluxul inline, dar permite dimensiunile să fie setate */
width: 50px; /* Lățime specifică pentru reducerea dimensiunii imaginii */
height: 50px; /* Înălțimea se ajustează automat pentru a menține proporțiile */
position: relative; /* 'Relative' este folosit aici pentru o poziționare relativă la elementul său normal */
float: right; /* Aliniază elementul la dreapta */
margin-top: 0px; /* Elimină orice margine superioară, dacă este setată anterior */
box-shadow: none; /* Elimină orice umbră de la box-shadow */
margin-right: 10px; /* Adaugă un pic de spațiu la dreapta, ajustează după nevoie */
}
.logo-qrcode-mare {
display: inline-block; /* Sau 'block' dacă este mai potrivit pentru nevoile tale */
position: absolute; /* Poziționare absolută pentru controlul exact al poziției */
top: 7px;
right: 9px;
box-shadow: none;
width: 200px; /* Specifică o lățime fixă pentru div, dacă dorești să controlezi dimensiunea */
height: 200px; /* Specifică o înălțime fixă pentru div */
overflow: hidden; /* Ascunde orice parte a imaginii care depășește dimensiunea div-ului */
}
.logo-qrcode-mare img {
width: 100%; /* Face ca imaginea să ocupe 100% din lățimea div-ului părinte */
height: auto; /* Menține proporția imaginii */
display: block; /* Elimină orice spațiu extra sub imagine */
}
/*codul care se ocupa de afisarea ferestrei grid-copii-parinti-profesori sub titlul Grupa Mica*/
:root {
--max-grid-height: auto; /* pentru g122 valoarea este 94vh, pentru tid4kdemo este auto */
}
.grid-copii {
height: var(--max-grid-height) !important;
}
.grid-copii {
left: 5%;
transform: translateX(-5%);
height: var(--max-grid-height); /* Utilizează variabila pentru a seta înălțimea */
min-height: 0;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); /* Umbră pentru fereastra */
position: absolute;
top: calc(40px + 12px + env(safe-area-inset-top, 0px)); /* Înălțimea headerului + offset + safe-area */
/* FORȚĂM layout orizontal cu CSS Grid - 4 carduri pe rând */
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 3px !important;
width: 90%; /* Ajustează lățimea grid-ului */
overflow: auto; /* Permite scroll-ul intern */
background-color: var(--main-blue); /* Asigură un fundal alb pentru grid */
z-index: 1101; /* Asigură că grid-ul este deasupra altor elemente */
}
/* Clasă pentru ascunderea gridului (suprascrie display: grid !important) */
.grid-copii.grid-hidden,
.grid-profesori.grid-hidden {
display: none !important;
}
/* Stil pentru a preveni scroll-ul pe pagina principală */
body.no-scroll {
overflow: hidden;
font-family: var(--font-body);
}
/*codul care se ocupa de afisarea ferestrei grid-copii-parinti-profesori sub titlul Grupei (ex:Grupa Mica)*/
:root {
--max-grid-height: auto; /* pentru g122 valoarea este 94vh, pentru tid4kdemo este auto */
}
.grid-profesori {
height: var(--max-grid-height) !important;
}
.grid-profesori {
/* left: 5%;
transform: translateX(-5%);*/
height: auto;
min-height: 0;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); /* Umbră pentru fereastra */
position: absolute;
top: calc(100% + 7px); /* 10px distanță de titlul "Grupa Mica" */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 100% /* sau orice valoare care vă convine */;
}
.card-copil {
width: 100% !important; /* Ocupă întreaga celulă din grid */
height: auto;
display: block !important;
/* flex-basis eliminat - acum folosim CSS Grid */
margin: 0 !important;
padding: 3px;
box-sizing: border-box;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); /* Umbră pentru card */
background-color: white; /* Fondul alb */
border: 1px solid gray;
}
.imagine-copil {
display: flex;
justify-content: center;
align-items: center;
}
.imagine-copil img {
width: 35px;
height: 35px;
object-fit: cover;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Umbră în jurul imaginii */
}
.info-copil {
text-align: center;
background-color: white;
align-content: center;
padding: 3px;
box-sizing: border-box;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Umbră în jurul textului */
}
.info-copil p {
margin: 0; /* Înlătură marginile implicite ale paragrafului */
word-wrap: break-word; /* Asigură că textul se întrerupe pentru a se potrivi cardului */
}
.info-copil p.nume-copil {
font-size: 1.25rem; /* Mărește dimensiunea fontului pentru numele copilului */
font-weight: bold; /* Textul cu bold */
color: #333; /* Culoare text cu umbra */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15); /* Umbra pentru text */
}
.info-copil p.info-parinte,
.info-copil p.info-parinte ~ p {
font-size: 0.85rem; /* Dimensiunea fontului mai mică pentru informațiile părintelui */
color: #555; /* Culoare text gri */
}
/* Dimensiuni mai mici pentru ecrane mici */
@media (max-width: 700px) {
.imagine-copil img {
width: 15vw;
height: 15vw;
}
.info-copil p.nume-copil {
font-size: 1rem;
white-space : nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.info-copil p.info-parinte,
.info-copil p.info-parinte ~ p {
font-size: 0.45rem;
text-align: center;
}
/* .card-copil - acum folosim CSS Grid, nu mai e nevoie de flex */
}
/* Dimensiuni mai mari pentru ecrane mari */
@media (min-width: 701px) {
.imagine-copil img {
width: 65px;
height: 65px;
}
.info-copil p.nume-copil {
font-size: 1.25rem;
text-align: center;
white-space : nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.info-copil p.info-parinte,
.info-copil p.info-parinte ~ p {
font-size: 0.65rem;
text-align: center;
}
}
/*codul care se ocupa de stilul afisarii profesorilor la clic pe nume grupa*/
.card-profesor {
width: auto; /* sau 30vw */
height: auto;
display: inline-block;
flex-basis: calc(100% / 4); /* Arată 4 carduri pe rând */
margin: 3px;
padding: 3px;
box-sizing: border-box;
align-items: center;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); /* Umbră pentru card */
background-color: white; /* Fondul alb */
border: 1px solid gray;
}
.imagine-profesor {
display: flex;
justify-content: center;
align-items: center;
}
.imagine-profesor img {
width: 45px;
height: 45px;
object-fit: cover;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Umbră în jurul imaginii */
}
.info-profesor {
text-align: center;
background-color: white;
align-content: center;
padding: 3px;
box-sizing: border-box;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Umbră în jurul textului */
}
.info-profesor p {
margin: 0; /* Înlătură marginile implicite ale paragrafului */
word-wrap: break-word; /* Asigură că textul se întrerupe pentru a se potrivi cardului */
overflow: hidden;
text-overflow: ellipsis;
}
.email-profesor {
font-size: 0.65rem;
color: #555;
}
/*codul pentru bulina verde*/
.online {
display: inline;
color: limegreen;
font-size: 18px;
vertical-align: middle;
}
/*este css-ul pentru tabelul lunar care se afiseaza in sectiunea de Prezenta Copil*/
.lunar-report-container {
background-color: #f0f0f0; /* Gri deschis */
}
/*este css-ul pentru tabelul zilele-prezenta-lunara care se afiseaza in sectiunea de Prezenta Copil*/
.zile-prezenta-lunar {
background-color: #d0d0d0; /* Gri deschis */
}
/*fixarea titlului "Prezenta copii si contributia" impreuna cu butonul de "Print"*/
.fixed-title {
position: fixed;
top: 70px; /* Acestă valoare ar trebui să fie înălțimea header-ului; ajustează-o după nevoie */
left: 0;
width: 100%;
z-index: 99; /* Poți să-l setezi sub z-index-ul header-ului pentru a evita suprapunerea */
background-color: #fff;
}
.titlu-prezenta {
margin: 0; /* Elimină orice marjă implicită pentru a menține div-ul cât mai compact */
font-size: 18px; /* Ajustează dimensiunea fontului după necesitate */
line-height: 1; /* Ajustează înălțimea liniei pentru a controla spațierea verticală */
padding: 0px 10px; /* Ajustează padding-ul pentru a controla spațierea în interiorul elementului */
font-family: var(--font-subheader); /* Applying the Lora font via CSS variable */
align-items: center; /* Center vertically */
background-color: #f2f2f2;
color: var(--red);
}
}
main {
padding-top: 40px; /* Ajustează paddingul în funcție de cât de mult spațiu dorești */
}
/*afisarea valorilor contributiei datorate , contributiei platite si diferenta contributie rezultata */
.contributia-bold {
font-weight: bold;
}
.diferenta-negativa {
color: red;
}
.diferenta-pozitiva {
color: green;
}
.contributia-platita-bold {
font-weight: bold;
}
.total-de-plata-lunar {
border: 2.5px solid red;
padding: 2px;
display: inline-block;
/* color: darkgray;*/
}
/*asezarea butoanelor "upload" si "download"*/
.upload_button {
display: inline-block;
padding: 0px 5px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
margin-left: 1px; /* Adaugă marginea dreaptă aici */
margin-right: 20px; /* Adaugă marginea dreaptă aici */
}
.download_button {
display: inline-block;
padding: 0px 5px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
background-color: #7b4dbf; /* Alegeți o nuanță de violet care vă place */
border-color: #6a42b7; /* Alegeți o nuanță de violet care vă place */
}
.buttons-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3px;
position: sticky;
z-index: 998;
}
/* este incasetarea formularului in care se afla butoanele de upload si download si codul acesta determina alnierea la capetele stanga dreapta */
form {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
/*afisarea cardurilor profesori, administrativ , pentru CANCELARIE*/
.card-cancelarie {
width: auto; /* sau 30vw */
height: auto;
display: inline-block;
flex-basis: calc(100% / 4); /* Arată 4 carduri pe rând */
margin: 1.5px;
padding: 1.5px;
box-sizing: border-box;
align-items: center;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); /* Umbră pentru card */
background-color: white; /* Fondul alb */
border: 1px solid gray;
}
.profesor-nume, .profesor-materie {
margin-bottom: 10px;
}
.profesor-mesaj-btn {
background-color: blue;
color: white;
border: none;
padding: 5px;
}
/*clasa pentru culoarea cardurilor administrative (director, secretara, adminisrator...)*/
.card-administrativ {
background-color: #dcdcdc;
}
/*cadran_simulat ID4K*/
.fontMic {
font-size: 14px;
text-align: center; /* Centrează textul */
padding: 2px;
}
.fontMare {
font-size: 24px;
text-align: center; /* Centrează textul */
padding: 2px;
}
.chenar {
border: 3px solid; /* grosimea și stilul chenarului */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* umbră */
margin-top: 3px; /* spațiere dedesubtul titlului */
margin-right: 10px; /* spațiere la dreapta chenarului */
overflow: hidden;
text-align: center; /* Centrează textul */
padding: 10px;
}
.chenar_mare {
border: 3px solid; /* grosimea și stilul chenarului */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* umbră */
margin-top: 3px; /* spațiere dedesubtul titlului */
margin-left: 40px;
overflow: hidden;
text-align: center; /* Centrează textul */
padding: 10px;
max-height: 50%;
}
/* Resetează sau suprascrie stilurile implicite */
select.cadran_simulatfontMare {
-webkit-appearance: none; /* pentru Chrome și Safari */
-moz-appearance: none; /* pentru Firefox */
appearance: none;
background: transparent; /* fundalul transparent */
border: none; /* fără bordură */
color: green; /* culoarea textului */
text-shadow: 1px 1px 2px #000000; /* umbra textului */
text-align: center;
text-align-last: center; /* Pentru Firefox */
overflow: hidden;
padding: 10px;
object-fit: contain; /* Menține proporțiile imaginii și o încadrează complet în chenar */
}
.iframe-chenar {
width: calc(100% - 10px);
height: calc(100% - 10px);
border: none;
display: block;
overflow: hidden; /* Ascunde bara de scroll */
}
#idChenar {
width: 100%;
height: 500px;
overflow: hidden;
}
/* Stil pentru containerul ce deține rândurile de imagini */
.rand-imagine {
display: flex;
justify-content: space-around; /* pentru a distribui spațiul între imagini */
margin-bottom: 5px; /* pentru spațiu între rândurile de imagini */
display: none; /* inițial rândurile nu sunt afișate */
}
/* Stil pentru fiecare imagine individuală din rând */
.imagine-chenar {
max-width: calc(33.333% - 10px); /* pentru a se asigura că sunt trei imagini pe rând, minus spațiul dintre ele */
height: auto; /* pentru a menține proporția imaginilor */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* opțional, pentru a adăuga un efect ușor de umbra sub imagini */
}
#id4kCadran {
width: 97%; /* sau o altă valoare procentuală dorită */
height: auto; /* pentru a păstra proporțiile */
display: block; /* pentru a anula display: none; */
}
/*pentru Orar*/
orar_tabel {
width: 100%;
border-collapse: collapse;
}
orar_tabel, th, td {
border: 1px solid black;
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
/* Remove table-layout: fixed; */
}
th, td {
padding: 2px;
vertical-align: top; /* Ensures content starts from the top */
word-wrap: break-word; /* Allows long words to break and wrap */
height: auto; /* Allows cells to adjust height automatically */
}
th {
background-color: #f2f2f2;
}
.orar-tabel {
margin-bottom: 20px; /* Adaugă spațiu în partea de jos a tabelului */
}
.exemplu-eticheta {
margin-top: 20px;
padding-top: 40px; /* Ajustează acest valorile după nevoie */
text-align: center;
font-weight: bold;
font-size: 20px;
background-color: #f0ad4e; /* O culoare de fundal */
color: white; /* Culoarea textului */
padding: 5px 10px; /* Padding în interiorul etichetei */
border-radius: 5px; /* Colțuri rotunjite */
display: inline-block; /* Pentru a afișa blocul inline */
margin-bottom: 10px; /* Spațiu sub etichetă */
}
.chenar_mare, .chenar_mic {
width: 80%; /* sau orice procentaj dorit */
height: 50%; /* ajustează înălțimea în funcție de conținut */
overflow: hidden; /* ascunde conținutul care depășește dimensiunile chenarului */
margin: 0 auto; /* centrează chenarul */
box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* adaugă o umbră ușoară */
}
.chenar_mic {
width: 30%; /* o lățime mai mică pentru chenarele mai mici */
}
.chenar_mare, .chenar_mic {
text-align: center; /* Centrează textul */
overflow-wrap: break-word; /* Întrerupe textul la limita chenarului */
padding: 10px; /* Adaugă un spațiu în interiorul chenarului pentru a nu lipi textul de margini */
}
/* Asigură-te că imaginile se adaptează la dimensiunea chenarului */
.chenar_mare img, .chenar_mic img {
max-width: 100%;
height: 50%;
object-fit: contain; /* asigură că imaginile își păstrează proporțiile */
}
.chenar_mare iframe, .chenar_mic iframe,
.chenar_mare video, .chenar_mic video {
width: 100%; /* Se extinde pe toată lățimea chenarului */
height: 50%; /* Înălțimea se ajustează pentru a păstra proporțiile */
object-fit: contain; /* Asigură că tot conținutul este vizibil, chiar dacă trebuie să fie redus */
}
/* Pentru titlurile mici */
.cadran_simulatfontMic {
color: #101010; /* Schimbă culoarea textului */
font-size: 14px; /* Dimensiunea fontului */
text-align: left; /* Aliniază textul la centru */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Adaugă o umbră textului */
/*animation: pulse 2s infinite; /* Aplică animația de pulsare */*/
}
/* Pentru titlurile mari */
.cadran_simulatfontMare {
color: #000000; /* Schimbă culoarea textului */
font-size: 18px; /* Dimensiunea fontului */
text-align: center; /* Aliniază textul la centru */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Adaugă o umbră textului */
/*animation: pulse 2s infinite; /* Aplică animația de pulsare */*/
}
/* Definirea animației pulse */
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
/*infodisplay layout*/
#displayArea {
display: grid;
/* Corectat: eliminat virgula pentru compatibilitate Firefox */
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto 1fr;
gap: 10px;
padding: 10px;
padding-right: 320px; /* Spațiu pentru sidebar */
width: calc(100% - 320px);
max-height: calc(100vh - 120px);
overflow: hidden;
}
#header_infodisplay {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1px;
}
#schoolName_infodisplay {
color: var(--main-blue);
top: 0;
left: 0;
padding: 1px; /* Ajustează pentru a poziționa textul exact unde dorești */
font-size: 26px;
}
#logo_infodisplay {
display: flex;
justify-content: flex-end;
position: relative;
}
#logo_infodisplay img {
width: 100px;
}
.separator_infodisplay {
height: 1px; /* Spațiu gol pentru separare */
}
#selectionArea_infodisplay {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
width: 1100px; /* Lățimea totală suficientă pentru 5x200px + 4x10px margin */
}
#body_infodisplay {
margin: 0;
padding: 50;
font-family: Poppins, sans-serif;
color: var(--main-blue);
}
#body_infodisplay .meniuBox {
grid-area: menu;
min-height: 300px;
max-height: 385px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 2px solid #ccc;
box-shadow: 0 0 10px #666;
margin: 10px;
text-shadow: none;
}
/* Stiluri pentru containerul infobox */
#body_infodisplay .contentBox {
border: 2px solid #ccc;
box-shadow: 0 0 10px #666;
margin: 5px 5px 5px 0;
display: flex;
flex-direction: column;
align-items: stretch; /* Asigurăm că elementele se întind pe toată lățimea */
justify-content: flex-start;
overflow: hidden;
min-width: 200px;
max-width: 100%;
width: auto;
height: 360px; /* Setăm o înălțime fixă */
position: relative; /* Pentru a poziționa absolut elementele copil, dacă este necesar */
}
/* Stiluri pentru titlu */
#body_infodisplay .contentBox .infobox-title {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
height: 40px; /* Înălțimea titlului */
line-height: 40px; /* Centrare verticală a textului */
font-weight: bold;
font-size: 18px;
background-color: #f2f2f2; /* Opțional, pentru contrast */
z-index: 1; /* Asigură că titlul este deasupra altor elemente */
}
/* Stiluri pentru conținutul derulabil */
#body_infodisplay .contentBox .scrollable-content {
flex: 1;
overflow-y: auto; /* Permite scroll-ul vertical */
width: 100%;
position: relative;
z-index: 0; /* Asigură că este sub titlu */
}
/* Stiluri pentru canvas și htmlContainer */
#body_infodisplay .contentBox .scrollable-content canvas,
#body_infodisplay .contentBox .scrollable-content div {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.infoBox {
position: relative; /* Necesar doar dacă vei folosi poziționare absolută pentru lista de opțiuni */
box-sizing: border-box;
width: 200px;
height: 300px;
border: 4px solid #ccc;
margin: 5px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.3s, box-shadow 0.3s;
}
.infoBox:hover {
background-color: #bbb;
}
.infoBox.selected {
background-color: #aaffaa; /* Fundal verde pentru carduri selectate */
box-shadow: 0 0 10px #666;
}
.infobox-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 4px solid #ccc;
box-shadow: 0 0 10px #666;
margin: 10px;
min-width: 200px; /* Lățimea minimă a boxului */
min-height: 300px; /* Înălțimea minimă a boxului */
max-height: 400px;
width: auto; /* Ajustează lățimea în funcție de conținut */
height: auto; /* Ajustează înălțimea în funcție de conținut */
}
.infobox-title {
color: var(--main-blue);
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
text-align: center; /* Centrarea textului dacă dorești */
}
.checkmark {
color: green;
font-size: 24px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logoCheckmark {
color: green;
font-size: 90px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-30%, -43%);
display: none;
}
.logoCheckmarkPopUp {
display: none;
color: green;
font-size: 90px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(10%, -60%);
z-index: 1000;
}
.optionList {
position: absolute;
top: 0; /* Poziționează lista peste infoBox */
left: 50%; /* Centrare relativă la lățimea infoBox */
transform: translateX(-50%); /* Deplasează lista înapoi cu jumătate din propria lățime pentru a o centra */
background-color: transparent; /* Fundal transparent pentru lista */
width: 80%; /* Reduce lățimea listei la 80% din cea a infoBox-ului */
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Opțional, poate fi eliminat dacă nu dorești umbre */
z-index: 10; /* Asigură-te că lista este deasupra infoBox-ului */
display: none; /* Ascunsă inițial */
}
.option {
padding: 5px 10px;
cursor: pointer;
color: black; /* Culoarea textului inițial */
display: block;
}
.option:hover {
background-color: #ddd; /* Feedback vizual pentru hover */
}
.option.selected {
color: #FF6600; /* Portocaliu intens pentru textul selecționat */
font-weight: bold; /* Text bold pentru mai multă vizibilitate */
}
/* Stiluri pentru afisarea anunțurilor */
.announcement-container {
border: 3px solid #cc5500; /* Chenar mai pronunțat */
background-color: #ffddcc;
padding: 15px;
margin: 20px 0;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Umbra mai pronunțată */
font-family: Arial, sans-serif;
animation: zoomEffect 10s infinite, flashBackground 10s infinite;
position: relative;
}
.announcement-container p {
font-size: 18px;
color: black;
margin: 10px 0;
line-height: 1.6;
}
.announcement-container a {
color: #007bff;
text-decoration: none;
}
.announcement-container a:hover {
text-decoration: underline;
}
.announcement-container ul,
.announcement-container ol {
margin: 10px 0;
padding-left: 20px;
}
.announcement-container ul li,
.announcement-container ol li {
margin: 5px 0;
}
/* Efect de zoom */
@keyframes zoomEffect {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
/* Efect de flash pentru fundal */
@keyframes flashBackground {
0%, 100% {
background-color: #ffddcc;
}
50% {
background-color: #ffcc99;
}
}
/* Stiluri suplimentare pentru popup */
.popup-anunturi {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 600px;
max-height: 90%;
background: white;
border: 5px solid #28a745; /* Chenar verde și mai gros */
box-shadow: 0 0 15px rgba(0,0,0,0.2); /* Umbra mai pronunțată */
z-index: 1000;
padding: 20px;
overflow-y: auto;
}
.header-btn-anunturi {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
.close-btn-anunturi {
background: #f44336;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
/* Stiluri pentru textul informativ */
.info-text {
font-size: 12px;
color: gray;
margin-bottom: 10px;
}
/* Media queries pentru ecrane mici */
@media (max-width: 600px) {
.popup-anunturi {
width: 90%;
height: 90%;
max-width: none;
max-height: none;
overflow: auto;
padding: 10px;
}
.popup-anunturi iframe {
height: calc(100% - 60px); /* Ajustăm înălțimea iframe-ului pentru a se potrivi în fereastră */
}
.close-btn-anunturi {
padding: 5px 10px;
}
}
/*caseta de mesaje de succes sau esec afisata in pagina de browser*/
#popup_message {
display: none;
position: fixed;
width: 60%;
height: 30%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: rgba(0,0,0,0.5);
z-index: 1000;
text-align: center;
color: white;
font-size: 1.5em;
padding: 5px;
}
/*acest cod se ocupa de afisarea butonului de "Inscrierile" in grupa_clasa_copil.ph*/
.button-inscrieri {
margin-top: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
text-decoration: none;
}
.popup-inscrieri {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ccc;
background-color: #fff;
padding: 20px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.popup-inscrieri table {
width: 100%;
border-collapse: collapse;
}
.popup-inscrieri table, .popup-inscrieri th, .popup-inscrieri td {
border: 1px solid #ddd;
}
.popup-inscrieri th, .popup-inscrieri td {
padding: 8px;
text-align: left;
word-wrap: break-word; /* Adaptează celulele pentru conținut lung */
}
.popup-inscrieri th {
background-color: #f2f2f2;
}
.popup-inscrieri .header-btn-inscrieri {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.popup-inscrieri .print-btn-inscrieri {
background-color: #4CAF50; /* Verde */
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
.popup-inscrieri .close-btn-inscrieri {
background-color: #f44336; /* Roșu */
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
#titlu-inscrieri {
font-size: 16px; /* Font mai mic */
}
#titlu-text {
color: green; /* Text verde */
}
#titlu-data {
color: gray; /* Data gri */
}
#layoutTabs {
margin: 10px;
}
#tabList {
list-style: none;
padding: 0;
display: flex;
}
#tabList .tab {
padding: 10px 15px;
background-color: #ccc;
margin-right: 5px;
cursor: pointer;
user-select: none;
position: relative;
}
#tabList .tab.active {
background-color: #eee;
font-weight: bold;
}
#tabList .tab .editName {
display: none;
}
#tabList .tab.editing .editName {
display: inline-block;
}
#tabList .tab.editing .tabName {
display: none;
}
#tabList #addTab {
padding: 10px 15px;
background-color: #ccc;
cursor: pointer;
user-select: none;
}
#tabList .tab .closeTab {
position: absolute;
top: 2px;
right: 2px;
cursor: pointer;
color: red;
font-weight: bold;
display: none;
}
#tabList .tab:hover .closeTab {
display: inline;
}
.iframe-grid-item {
flex: 1;
margin: 3px;
box-sizing: border-box;
border: 1px solid #ccc;
overflow: auto;
flex-basis: 100%;
max-width: 100%;
padding: 3px;
box-shadow: 0 4px 6px rgba(138, 43, 226, 0.1);
height: 100%;
border-radius: 10px; /* Adaugă colțuri rotunjite */
}
/*codul pentru fereastra de afisare destinatari la trimiterea mesajelor*/
#fereastraSelectie {
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
padding: 10px;
position: absolute;
width: 300px;
z-index: 1000;
}
.user-selection {
cursor: pointer;
padding: 4px;
}
.user-selection:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.input-wrapper {
width: 100%;
max-width: 800px; /* Ajustează sau elimină după preferințe */
margin: 0 auto;
box-sizing: border-box;
}
#mesajInput {
width: 100%;
min-height: 50px;
box-sizing: border-box;
resize: vertical;
}
#trimiteti {
margin-left: 7px; /* Ajustează valoarea după preferințe */
}
@media (max-width: 600px) {
.input-wrapper {
max-width: 100%;
}
#mesajInput {
min-height: 80px;
}
}
/*codul pentru notificarile cu clopotel*/
.ascuns {
display: none;
}
.clopotel_icon {
font-size: 18px;
color: var(--main-blue);
cursor: pointer;
margin-left: 1px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Adaugă o mică umbră */
}
#container_notificari {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
color: red;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
display: flex;
position: fixed;
top: 0;
left: 0;
margin-left: 0.3cm;
align-items: center;
}
#container_notificari p {
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
#prezenta_generala {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
color: blue; /* Sau oricare altă culoare pe care o preferi */
text-shadow: 2px 0.1px 2px rgba(0, 0, 0, 0.5);
display: block;
position: fixed;
left: 0;
margin-left: 0.1cm; /* Poți ajusta această valoare pentru a poziționa corect textul */
align-items: center;
}
#prezenta_generala p {
margin-top: 0;
margin-bottom: 0;
margin-right: 7px;
}
.logo-qrcode-mic {
display: inline-block; /* Menține elementul în fluxul inline, dar permite dimensiunile să fie setate */
width: 50px; /* Lățime specifică pentru reducerea dimensiunii imaginii */
height: 50px; /* Înălțimea se ajustează automat pentru a menține proporțiile */
position: relative; /* 'Relative' este folosit aici pentru o poziționare relativă la elementul său normal */
float: right; /* Aliniază elementul la dreapta */
margin-top: 0px; /* Elimină orice margine superioară, dacă este setată anterior */
box-shadow: none; /* Elimină orice umbră de la box-shadow */
margin-right: 10px; /* Adaugă un pic de spațiu la dreapta, ajustează după nevoie */
}
.logo-qrcode-mare {
display: inline-block; /* Sau 'block' dacă este mai potrivit pentru nevoile tale */
position: absolute; /* Poziționare absolută pentru controlul exact al poziției */
top: 7px;
right: 9px;
box-shadow: none;
width: 200px; /* Specifică o lățime fixă pentru div, dacă dorești să controlezi dimensiunea */
height: 200px; /* Specifică o înălțime fixă pentru div */
overflow: hidden; /* Ascunde orice parte a imaginii care depășește dimensiunea div-ului */
}
.logo-qrcode-mare img {
width: 100%; /* Face ca imaginea să ocupe 100% din lățimea div-ului părinte */
height: auto; /* Menține proporția imaginii */
display: block; /* Elimină orice spațiu extra sub imagine */
}
/* Stil pentru a preveni scroll-ul pe pagina principală */
body.no-scroll {
overflow: hidden;
font-family: var(--font-body);
}
.grid-profesori {
/* left: 5%;
transform: translateX(-5%);*/
height: auto;
min-height: 0;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); /* Umbră pentru fereastra */
position: absolute;
top: calc(100% + 7px); /* 10px distanță de titlul "Grupa Mica" */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 100% /* sau orice valoare care vă convine */;
}
.card-copil {
width: 100% !important; /* Ocupă întreaga celulă din grid */
height: auto;
display: block !important;
/* flex-basis eliminat - acum folosim CSS Grid */
margin: 0 !important;
padding: 3px;
box-sizing: border-box;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); /* Umbră pentru card */
background-color: white; /* Fondul alb */
border: 1px solid gray;
}
.imagine-copil {
display: flex;
justify-content: center;
align-items: center;
}
.imagine-copil img {
width: 35px;
height: 35px;
object-fit: cover;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Umbră în jurul imaginii */
}
.info-copil {
text-align: center;
background-color: white;
align-content: center;
padding: 3px;
box-sizing: border-box;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Umbră în jurul textului */
}
.info-copil p {
margin: 0; /* Înlătură marginile implicite ale paragrafului */
word-wrap: break-word; /* Asigură că textul se întrerupe pentru a se potrivi cardului */
}
.info-copil p.nume-copil {
font-size: 1.25rem; /* Mărește dimensiunea fontului pentru numele copilului */
font-weight: bold; /* Textul cu bold */
color: #333; /* Culoare text cu umbra */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15); /* Umbra pentru text */
}
.info-copil p.info-parinte,
.info-copil p.info-parinte ~ p {
font-size: 0.85rem; /* Dimensiunea fontului mai mică pentru informațiile părintelui */
color: #555; /* Culoare text gri */
}
/* Dimensiuni mai mici pentru ecrane mici */
@media (max-width: 700px) {
.imagine-copil img {
width: 15vw;
height: 15vw;
}
.info-copil p.nume-copil {
font-size: 1rem;
white-space : nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.info-copil p.info-parinte,
.info-copil p.info-parinte ~ p {
font-size: 0.45rem;
text-align: center;
}
/* .card-copil - acum folosim CSS Grid, nu mai e nevoie de flex */
}
/* Dimensiuni mai mari pentru ecrane mari */
@media (min-width: 701px) {
.imagine-copil img {
width: 65px;
height: 65px;
}
.info-copil p.nume-copil {
font-size: 1.25rem;
text-align: center;
white-space : nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.info-copil p.info-parinte,
.info-copil p.info-parinte ~ p {
font-size: 0.65rem;
text-align: center;
}
}
/*codul care se ocupa de stilul afisarii profesorilor la clic pe nume grupa*/
.card-profesor {
width: auto; /* sau 30vw */
height: auto;
display: inline-block;
flex-basis: calc(100% / 4); /* Arată 4 carduri pe rând */
margin: 3px;
padding: 3px;
box-sizing: border-box;
align-items: center;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); /* Umbră pentru card */
background-color: white; /* Fondul alb */
border: 1px solid gray;
}
.imagine-profesor {
display: flex;
justify-content: center;
align-items: center;
}
.imagine-profesor img {
width: 45px;
height: 45px;
object-fit: cover;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Umbră în jurul imaginii */
}
.info-profesor {
text-align: center;
background-color: white;
align-content: center;
padding: 3px;
box-sizing: border-box;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Umbră în jurul textului */
}
.info-profesor p {
margin: 0; /* Înlătură marginile implicite ale paragrafului */
word-wrap: break-word; /* Asigură că textul se întrerupe pentru a se potrivi cardului */
overflow: hidden;
text-overflow: ellipsis;
}
.email-profesor {
font-size: 0.65rem;
color: #555;
}
/*codul pentru bulina verde*/
.online {
display: inline;
color: limegreen;
font-size: 18px;
vertical-align: middle;
}
/* Stiluri pentru tabelul de prezenta */
.tabel-prezenta {
width: 100%;
margin-bottom: 1rem;
color: #212529;
border-collapse: collapse;
border-radius: 0; /* Removes any border-radius */
}
.tabel-prezenta th, .tabel-prezenta td {
padding: 0.75rem;
vertical-align: top;
border-top: 1px solid #dee2e6;
}
.tabel-prezenta thead th {
vertical-align: bottom;
border-bottom: 2px solid #dee2e6;
}
.tabel-prezenta tbody + tbody {
border-top: 2px solid #dee2e6;
}
/* Apply hover effect only to rows that are not '.lunar-report-container' */
/* Exclude rows with classes 'lunar-report-container' and 'zile-prezenta-lunar' */
.tabel-prezenta tr:not(.lunar-report-container):not(.zile-prezenta-lunar):hover td {
color: #ffffff;
background-color: var(--shade-blue-2);
}
.tabel-lunar-prezenta tr:hover td{
background-color: #f0f0f0;
color: #333;
}
.data-prezenta {
color: var(--shade-blue-1);
}
.tabel-prezenta th {
text-align: left;
}
/*limegreen este clasa care determina numele copilului sa fie verde, in carduri copii, atunci cand parintele a scanat codul QR (a avut ultima_activitate)*/
.limegreen {
color: limegreen;
}
/*zilele de prezenta , ca si culoare*/
.gray {
color: #555;
}
.present {
color: green;
}
.absent {
color: #FFCCCC;
}
.late {
color: orange;
}
/*este css-ul pentru tabelul lunar care se afiseaza in sectiunea de Prezenta Copil*/
.lunar-report-container {
background-color: #f0f0f0; /* Gri deschis */
}
/*este css-ul pentru tabelul zilele-prezenta-lunara care se afiseaza in sectiunea de Prezenta Copil*/
.zile-prezenta-lunar {
background-color: #d0d0d0; /* Gri deschis */
}
/* New Print Button Styles */
.print-button {
width: 50px;
height: 50px;
position: relative;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s; /* Retain transition */
}
.print-button .print-icon,
.print-button .print-icon::before,
.print-button .print-icon::after,
.print-button:hover .print-icon::after {
box-sizing: border-box;
background-color: #fff;
border: solid 3px #333;
}
.print-button .print-icon::after {
border-width: 1px;
}
.print-button .print-icon {
position: relative;
display: inline-block;
padding: 0;
margin-top: 20%;
width: 60%;
height: 35%;
background: #fff;
border-radius: 20% 20% 0 0;
}
.print-button .print-icon::before {
content: "";
position: absolute;
bottom: 100%;
left: 12%;
right: 12%;
height: 110%;
transition: height 0.2s 0.15s;
}
.print-button .print-icon::after {
content: "";
position: absolute;
top: 55%;
left: 12%;
right: 12%;
height: 0%;
background: #fff;
background-repeat: no-repeat;
background-size: 70% 90%;
background-position: center;
background-image: linear-gradient(
to top,
#fff 0%, #fff 14%,
#333 14%, #333 28%,
#fff 28%, #fff 42%,
#333 42%, #333 56%,
#fff 56%, #fff 70%,
#333 70%, #333 84%,
#fff 84%, #fff 100%
);
transition: height 0.2s, border-width 0s 0.2s, width 0s 0.2s;
}
.print-button:hover .print-icon::before {
height: 0px;
transition: height 0.2s;
}
.print-button:hover .print-icon::after {
height: 120%;
transition: height 0.2s 0.15s, border-width 0s 0.16s;
}
/* Retain @media print styles */
@media print {
.print-button {
display: none; /* Hide the print button when printing */
}
body {
width: 210mm;
height: 297mm;
margin: 0;
padding: 0;
}
/* Add any other print-specific styles here */
}
/* Optional: Visually Hidden Text for Accessibility */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap; /* Prevents the text from wrapping */
border: 0;
}
/*fixarea titlului "Prezenta copii si contributia" impreuna cu butonul de "Print"*/
.fixed-title {
position: fixed;
top: 70px; /* Acestă valoare ar trebui să fie înălțimea header-ului; ajustează-o după nevoie */
left: 0;
width: 100%;
z-index: 99; /* Poți să-l setezi sub z-index-ul header-ului pentru a evita suprapunerea */
background-color: #fff;
}
main {
padding-top: 50px; /* Ajustează paddingul în funcție de cât de mult spațiu dorești */
}
/*afisarea valorilor contributiei datorate , contributiei platite si diferenta contributie rezultata */
.contributia-bold {
font-weight: bold;
}
.diferenta-negativa {
color: red;
}
.diferenta-pozitiva {
color: green;
}
.contributia-platita-bold {
font-weight: bold;
}
.total-de-plata-lunar {
border: 2.5px solid red;
padding: 2px;
display: inline-block;
/* color: darkgray;*/
}
/*asezarea butoanelor "upload" si "download"*/
.upload_button {
display: inline-block;
padding: 0px 5px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
margin-left: 1px; /* Adaugă marginea dreaptă aici */
margin-right: 20px; /* Adaugă marginea dreaptă aici */
}
.download_button {
display: inline-block;
padding: 0px 5px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
background-color: #7b4dbf; /* Alegeți o nuanță de violet care vă place */
border-color: #6a42b7; /* Alegeți o nuanță de violet care vă place */
}
.buttons-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3px;
position: sticky;
z-index: 998;
}
/* este incasetarea formularului in care se afla butoanele de upload si download si codul acesta determina alnierea la capetele stanga dreapta */
form {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
/*afisarea cardurilor profesori, administrativ , pentru CANCELARIE*/
.card-cancelarie {
width: auto; /* sau 30vw */
height: auto;
display: inline-block;
flex-basis: calc(100% / 4); /* Arată 4 carduri pe rând */
margin: 1.5px;
padding: 1.5px;
box-sizing: border-box;
align-items: center;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); /* Umbră pentru card */
background-color: white; /* Fondul alb */
border: 1px solid gray;
}
.profesor-nume, .profesor-materie {
margin-bottom: 10px;
}
.profesor-mesaj-btn {
background-color: blue;
color: white;
border: none;
padding: 5px;
}
/*clasa pentru culoarea cardurilor administrative (director, secretara, adminisrator...)*/
.card-administrativ {
background-color: #dcdcdc;
}
/*cadran_simulat ID4K*/
.fontMic {
font-size: 14px;
text-align: center; /* Centrează textul */
padding: 2px;
}
.fontMare {
font-size: 24px;
text-align: center; /* Centrează textul */
padding: 2px;
}
.chenar {
border: 3px solid; /* grosimea și stilul chenarului */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* umbră */
margin-top: 3px; /* spațiere dedesubtul titlului */
margin-right: 10px; /* spațiere la dreapta chenarului */
overflow: hidden;
text-align: center; /* Centrează textul */
padding: 10px;
}
.chenar_mare {
border: 3px solid; /* grosimea și stilul chenarului */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* umbră */
margin-top: 3px; /* spațiere dedesubtul titlului */
margin-left: 40px;
overflow: hidden;
text-align: center; /* Centrează textul */
padding: 10px;
max-height: 50%;
}
/* Resetează sau suprascrie stilurile implicite */
select.cadran_simulatfontMare {
-webkit-appearance: none; /* pentru Chrome și Safari */
-moz-appearance: none; /* pentru Firefox */
appearance: none;
background: transparent; /* fundalul transparent */
border: none; /* fără bordură */
color: green; /* culoarea textului */
text-shadow: 1px 1px 2px #000000; /* umbra textului */
text-align: center;
text-align-last: center; /* Pentru Firefox */
overflow: hidden;
padding: 10px;
object-fit: contain; /* Menține proporțiile imaginii și o încadrează complet în chenar */
}
.iframe-chenar {
width: calc(100% - 10px);
height: calc(100% - 10px);
border: none;
display: block;
overflow: hidden; /* Ascunde bara de scroll */
}
#idChenar {
width: 100%;
height: 500px;
overflow: hidden;
}
/* Stil pentru containerul ce deține rândurile de imagini */
.rand-imagine {
display: flex;
justify-content: space-around; /* pentru a distribui spațiul între imagini */
margin-bottom: 5px; /* pentru spațiu între rândurile de imagini */
display: none; /* inițial rândurile nu sunt afișate */
}
/* Stil pentru fiecare imagine individuală din rând */
.imagine-chenar {
max-width: calc(33.333% - 10px); /* pentru a se asigura că sunt trei imagini pe rând, minus spațiul dintre ele */
height: auto; /* pentru a menține proporția imaginilor */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* opțional, pentru a adăuga un efect ușor de umbra sub imagini */
}
#id4kCadran {
width: 97%; /* sau o altă valoare procentuală dorită */
height: auto; /* pentru a păstra proporțiile */
display: block; /* pentru a anula display: none; */
}
/*pentru Orar*/
orar_tabel {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #f2f2f2;
}
.orar-tabel {
margin-bottom: 20px; /* Adaugă spațiu în partea de jos a tabelului */
}
.exemplu-eticheta {
margin-top: 20px;
padding-top: 40px; /* Ajustează acest valorile după nevoie */
text-align: center;
font-weight: bold;
font-size: 20px;
background-color: #f0ad4e; /* O culoare de fundal */
color: white; /* Culoarea textului */
padding: 5px 10px; /* Padding în interiorul etichetei */
border-radius: 5px; /* Colțuri rotunjite */
display: inline-block; /* Pentru a afișa blocul inline */
margin-bottom: 10px; /* Spațiu sub etichetă */
}
.chenar_mare, .chenar_mic {
width: 80%; /* sau orice procentaj dorit */
height: 50%; /* ajustează înălțimea în funcție de conținut */
overflow: hidden; /* ascunde conținutul care depășește dimensiunile chenarului */
margin: 0 auto; /* centrează chenarul */
box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* adaugă o umbră ușoară */
}
.chenar_mic {
width: 30%; /* o lățime mai mică pentru chenarele mai mici */
}
.chenar_mare, .chenar_mic {
text-align: center; /* Centrează textul */
overflow-wrap: break-word; /* Întrerupe textul la limita chenarului */
padding: 10px; /* Adaugă un spațiu în interiorul chenarului pentru a nu lipi textul de margini */
}
/* Asigură-te că imaginile se adaptează la dimensiunea chenarului */
.chenar_mare img, .chenar_mic img {
max-width: 100%;
height: 50%;
object-fit: contain; /* asigură că imaginile își păstrează proporțiile */
}
.chenar_mare iframe, .chenar_mic iframe,
.chenar_mare video, .chenar_mic video {
width: 100%; /* Se extinde pe toată lățimea chenarului */
height: 50%; /* Înălțimea se ajustează pentru a păstra proporțiile */
object-fit: contain; /* Asigură că tot conținutul este vizibil, chiar dacă trebuie să fie redus */
}
/* Pentru titlurile mici */
.cadran_simulatfontMic {
color: #101010; /* Schimbă culoarea textului */
font-size: 14px; /* Dimensiunea fontului */
text-align: left; /* Aliniază textul la centru */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Adaugă o umbră textului */
/*animation: pulse 2s infinite; /* Aplică animația de pulsare */*/
}
/* Pentru titlurile mari */
.cadran_simulatfontMare {
color: #000000; /* Schimbă culoarea textului */
font-size: 18px; /* Dimensiunea fontului */
text-align: center; /* Aliniază textul la centru */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Adaugă o umbră textului */
/*animation: pulse 2s infinite; /* Aplică animația de pulsare */*/
}
/* Definirea animației pulse */
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.infoBox {
position: relative; /* Necesar doar dacă vei folosi poziționare absolută pentru lista de opțiuni */
box-sizing: border-box;
width: 200px;
height: 300px;
border: 4px solid #ccc;
margin: 5px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.3s, box-shadow 0.3s;
}
.infoBox:hover {
background-color: #bbb;
}
.infoBox.selected {
background-color: #aaffaa; /* Fundal verde pentru carduri selectate */
box-shadow: 0 0 10px #666;
}
.infobox-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 4px solid #ccc;
box-shadow: 0 0 10px #666;
margin: 10px;
min-width: 200px; /* Lățimea minimă a boxului */
min-height: 300px; /* Înălțimea minimă a boxului */
max-height: 400px;
width: auto; /* Ajustează lățimea în funcție de conținut */
height: auto; /* Ajustează înălțimea în funcție de conținut */
}
.infobox-title {
color: var(--main-blue);
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
text-align: center; /* Centrarea textului dacă dorești */
}
.checkmark {
color: green;
font-size: 24px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logoCheckmark {
color: green;
font-size: 90px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-30%, -43%);
display: none;
}
.logoCheckmarkPopUp {
display: none;
color: green;
font-size: 90px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(10%, -60%);
z-index: 1000;
}
.optionList {
position: absolute;
top: 0; /* Poziționează lista peste infoBox */
left: 50%; /* Centrare relativă la lățimea infoBox */
transform: translateX(-50%); /* Deplasează lista înapoi cu jumătate din propria lățime pentru a o centra */
background-color: transparent; /* Fundal transparent pentru lista */
width: 80%; /* Reduce lățimea listei la 80% din cea a infoBox-ului */
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Opțional, poate fi eliminat dacă nu dorești umbre */
z-index: 10; /* Asigură-te că lista este deasupra infoBox-ului */
display: none; /* Ascunsă inițial */
}
.option {
padding: 5px 10px;
cursor: pointer;
color: black; /* Culoarea textului inițial */
display: block;
}
.option:hover {
background-color: #ddd; /* Feedback vizual pentru hover */
}
.option.selected {
color: #FF6600; /* Portocaliu intens pentru textul selecționat */
font-weight: bold; /* Text bold pentru mai multă vizibilitate */
}
/* Stiluri pentru afisarea anunțurilor */
.announcement-container {
border: 3px solid #cc5500; /* Chenar mai pronunțat */
background-color: #ffddcc;
padding: 15px;
margin: 20px 0;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Umbra mai pronunțată */
font-family: Arial, sans-serif;
animation: zoomEffect 10s infinite, flashBackground 10s infinite;
position: relative;
}
.announcement-container p {
font-size: 18px;
color: black;
margin: 10px 0;
line-height: 1.6;
}
.announcement-container a {
color: #007bff;
text-decoration: none;
}
.announcement-container a:hover {
text-decoration: underline;
}
.announcement-container ul,
.announcement-container ol {
margin: 10px 0;
padding-left: 20px;
}
.announcement-container ul li,
.announcement-container ol li {
margin: 5px 0;
}
/* Efect de zoom */
@keyframes zoomEffect {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
/* Efect de flash pentru fundal */
@keyframes flashBackground {
0%, 100% {
background-color: #ffddcc;
}
50% {
background-color: #ffcc99;
}
}
/* Stiluri suplimentare pentru popup */
.popup-anunturi {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 600px;
max-height: 90%;
background: white;
border: 5px solid #28a745; /* Chenar verde și mai gros */
box-shadow: 0 0 15px rgba(0,0,0,0.2); /* Umbra mai pronunțată */
z-index: 1000;
padding: 20px;
overflow-y: auto;
}
.header-btn-anunturi {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
.close-btn-anunturi {
background: #f44336;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
/* Stiluri pentru textul informativ */
.info-text {
font-size: 12px;
color: gray;
margin-bottom: 10px;
}
/* Media queries pentru ecrane mici */
@media (max-width: 600px) {
.popup-anunturi {
width: 90%;
height: 90%;
max-width: none;
max-height: none;
overflow: auto;
padding: 10px;
}
.popup-anunturi iframe {
height: calc(100% - 60px); /* Ajustăm înălțimea iframe-ului pentru a se potrivi în fereastră */
}
.close-btn-anunturi {
padding: 5px 10px;
}
}
/*icon-urile de download si delete de pe asociat layer-ului opac la clic pe imagine sau document*/
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0); /* Transparent */
display: none; /* Ascuns implicit */
z-index: 9; /* Asigură-te că layer-ul este deasupra altor elemente */
transition: background-color 0.3s;
}
.overlay .download-icon, .overlay .delete-icon {
position: absolute;
cursor: pointer;
filter: drop-shadow(0 0 0px lightgray); /* Adăugare umbră gri deschis */
visibility: hidden; /* Ascuns implicit */
}
.overlay .download-icon {
width: 30px;
height: 30px;
bottom: 7px;
left: 1px;
}
.overlay .delete-icon {
width: 30px;
height: 30px;
top: 1px;
right: 7px;
}
/*caseta de mesaje de succes sau esec afisata in pagina de browser*/
#popup_message {
display: none;
position: fixed;
width: 60%;
height: 30%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: rgba(0,0,0,0.5);
z-index: 1000;
text-align: center;
color: white;
font-size: 1.5em;
padding: 5px;
}
/*acest cod se ocupa de afisarea butonului de "Inscrierile" in grupa_clasa_copil.ph*/
.button-inscrieri {
margin-top: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
text-decoration: none;
}
.popup-inscrieri {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ccc;
background-color: #fff;
padding: 20px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.popup-inscrieri table {
width: 100%;
border-collapse: collapse;
}
.popup-inscrieri table, .popup-inscrieri th, .popup-inscrieri td {
border: 1px solid #ddd;
}
.popup-inscrieri th, .popup-inscrieri td {
padding: 8px;
text-align: left;
word-wrap: break-word; /* Adaptează celulele pentru conținut lung */
}
.popup-inscrieri th {
background-color: #f2f2f2;
}
.popup-inscrieri .header-btn-inscrieri {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.popup-inscrieri .print-btn-inscrieri {
background-color: #4CAF50; /* Verde */
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
.popup-inscrieri .close-btn-inscrieri {
background-color: #f44336; /* Roșu */
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
#titlu-inscrieri {
font-size: 16px; /* Font mai mic */
}
#titlu-text {
color: green; /* Text verde */
}
#titlu-data {
color: gray; /* Data gri */
}
#layoutTabs {
margin: 10px;
}
#tabList {
list-style: none;
padding: 0;
display: flex;
}
#tabList .tab {
padding: 10px 15px;
background-color: #ccc;
margin-right: 5px;
cursor: pointer;
user-select: none;
position: relative;
}
#tabList .tab.active {
background-color: #eee;
font-weight: bold;
}
#tabList .tab .editName {
display: none;
}
#tabList .tab.editing .editName {
display: inline-block;
}
#tabList .tab.editing .tabName {
display: none;
}
#tabList #addTab {
padding: 10px 15px;
background-color: #ccc;
cursor: pointer;
user-select: none;
}
#tabList .tab .closeTab {
position: absolute;
top: 2px;
right: 2px;
cursor: pointer;
color: red;
font-weight: bold;
display: none;
}
#tabList .tab:hover .closeTab {
display: inline;
}
.notificare-prezenta {
background-color: #d4edda; /* Verde deschis */
color: #155724; /* Verde închis */
font-weight: bold;
padding: 5px 10px;
border-radius: 5px;
display: inline-block;
}
/* Stil pentru popup afisat la prezenta parintelui*/
#popupModal {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0,0,0,0.5);
display: none; /* inițial ascuns */
justify-content: center;
align-items: center;
z-index: 9999;
}
.modal-content {
background: white;
padding: 20px 30px;
border-radius: 10px;
width: 320px;
text-align: center;
}
.modal-content h2 { color: #2b516a; margin-bottom: 10px; }
.close-btn {
margin-top: 10px;
padding: 10px 20px;
background-color: #4CAF50;
border: none;
color: white;
font-size: 14px;
cursor: pointer;
border-radius: 4px;
}
.sound-button {
position: fixed;
bottom: 20px;
right: 20px;
padding: 2px 5px;
background-color: #2b516a;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 24px; /* Mărește simbolul 🔊/🔇 */
transition: 0.3s;
box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.3); /* Umbra albicioasă */
z-index: 1000;
}
/* Buton Inky - stil special */
.sound-button.inky-sound-button {
width: 56px;
height: 56px;
padding: 0;
background: transparent;
border: none;
border-radius: 50%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
overflow: hidden;
animation: inky-pulse 2s ease-in-out infinite;
}
@keyframes inky-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
50% { transform: scale(1.08); box-shadow: 0 6px 25px rgba(139, 92, 246, 0.5); }
}
.sound-button.inky-sound-button:hover {
transform: scale(1.15);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
animation: none;
}
.inky-button-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.sound-button.inky-sound-button.activ {
box-shadow: 0 4px 15px rgba(34, 197, 94, 0.5);
animation: inky-pulse-activ 2s ease-in-out infinite;
}
@keyframes inky-pulse-activ {
0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4); }
50% { transform: scale(1.08); box-shadow: 0 6px 25px rgba(34, 197, 94, 0.7); }
}
.sound-button.activ {
background-color: #4CAF50;
box-shadow: 0px 4px 15px rgba(255, 255, 255, 0.5); /* Umbra mai accentuată */
}
/* ========== INKY ASISTENT - MENIU POPUP ========== */
.inky-asistent-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
.inky-asistent-container .sound-button {
position: relative;
bottom: auto;
right: auto;
}
/* Meniul Inky - bula popup */
.inky-menu {
position: absolute;
bottom: 70px;
right: 0;
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
min-width: 260px;
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.95);
transition: all 0.25s ease;
overflow: hidden;
}
.inky-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* Săgeată indicator spre buton */
.inky-menu::after {
content: '';
position: absolute;
bottom: -8px;
right: 20px;
width: 16px;
height: 16px;
background: #fff;
transform: rotate(45deg);
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.05);
}
.inky-menu-header {
background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
padding: 14px 18px;
color: #fff;
}
.inky-menu-title {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 1em;
}
.inky-menu-items {
padding: 8px 0;
}
.inky-menu-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 18px;
border: none;
background: transparent;
color: #475569;
font-family: 'Poppins', sans-serif;
font-size: 0.9em;
text-align: left;
cursor: pointer;
transition: all 0.2s;
}
.inky-menu-item:hover {
background: #f8fafc;
color: #8b5cf6;
padding-left: 22px;
}
.inky-menu-item .lucide-icon {
flex-shrink: 0;
color: #8b5cf6;
}
.inky-menu-item span {
flex: 1;
}
/* Când meniul e deschis, butonul are indicator */
.inky-asistent-container.menu-open .inky-sound-button {
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.3), 0 4px 15px rgba(139, 92, 246, 0.4);
}
/* Responsive */
@media (max-width: 400px) {
.inky-menu {
min-width: 240px;
right: -10px;
}
.inky-menu-item {
padding: 10px 14px;
font-size: 0.85em;
}
}
.pulsatoriu {
animation: pulse-animation 1.5s infinite;
}
@keyframes pulse-animation {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
}
.daily-block {
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
margin: 10px 0;
text-align: center;
cursor: pointer;
font-weight: bold;
}
/* Stil pentru blocurile de prezență */
.prezență-block {
background-color: #d4edda; /* verde deschis */
}
/* Stiluri pentru fereastra modală */
.modal {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fff;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
border-radius: 5px;
}
.close {
color: #f44336; /* Roșu în loc de #aaa */
position: absolute;
top: 10px;
left: 15px; /* Păstrăm poziția din stânga */
font-size: 40px; /* Mărit de la 36px la 40px */
font-weight: bold;
cursor: pointer;
z-index: 2000; /* Adăugat pentru a fi deasupra conținutului */
text-shadow: 0 0 3px white; /* Adăugat pentru contrast */
display: block; /* Asigură afișarea */
}
.responsive-menu {
max-width: 100%;
overflow-x: auto;
box-sizing: border-box;
padding: 5px;
}
.responsive-menu table {
width: 100%;
table-layout: auto;
}
.responsive-activitati {
max-width: 100%;
overflow-x: auto;
box-sizing: border-box;
padding: 5px;
}
.responsive-mesaje {
max-width: 100%;
word-wrap: break-word;
white-space: normal;
}
#tempContainerForPDF {
font-size: 15px; !important; /* Poți ajusta valoarea în funcție de necesitate */
}
/*css pentru iconu-urile fotografie si document inserate la clic pe '+' in campul de input mesaje*/
.dest-icon {
font-size: 16px; /* ajustează dimensiunea după necesitate */
margin-right: 4px;
vertical-align: middle;
}
#destinatariDisplay {
visibility: hidden;
}
/* Overlay-ul de loading */
#loadingOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
display: none; /* ascuns implicit */
align-items: center;
justify-content: center;
z-index: 9999;
}
/* Spinner-ul */
.spinner {
border: 4px solid #f3f3f3; /* grosime mai mică */
border-top: 4px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/*stiluri pentru povesti*/
.column_povesti {
margin: 10px;
padding: 15px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 5px;
}
.povesti_grid_container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
margin-top: 15px;
}
.povesti-item {
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
background-color: #f9f9f9;
cursor: pointer;
transition: transform 0.2s ease;
}
.povesti-item:hover {
transform: scale(1.02);
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
.povesti-preview {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.povesti-icon {
font-size: 24px;
margin-right: 10px;
}
.povesti-title {
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-grow: 1;
}
.povesti-uploader {
font-size: 0.8em;
margin-bottom: 2px;
}
.povesti-date {
font-size: 0.7em;
color: #666;
}
.no-povesti {
text-align: center;
color: #888;
padding: 20px;
}
/* Stiluri pentru Meniul Săptămânii - carduri similar cu Povești */
.meniu_grid_container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
padding: 15px;
}
.meniu-item {
border: 1px solid #fed7aa;
border-radius: 8px;
padding: 15px;
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
overflow: visible;
}
.meniu-item:hover {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}
.meniu-preview {
display: flex;
align-items: center;
margin-bottom: 10px;
gap: 10px;
}
.meniu-icon-container {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: rgba(245, 158, 11, 0.15);
border-radius: 8px;
}
.meniu-svg-icon {
width: 32px;
height: 32px;
}
.meniu-title {
font-weight: 600;
font-size: 0.95em;
color: #92400e;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-grow: 1;
}
.meniu-date {
font-size: 0.75em;
color: #b45309;
margin-top: 5px;
}
.no-meniu {
text-align: center;
color: #888;
padding: 30px;
font-style: italic;
}
/* Conținut HTML în modal pentru meniu - păstrăm aspectul original */
.meniu-html-content {
background: #fff;
border-radius: 8px;
padding: 5px;
width: 100%;
box-sizing: border-box;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Modal pentru meniu - dimensiuni mai mari */
.modal:has(.meniu-html-content) .modal-content,
.modal-content:has(.meniu-html-content) {
width: 95%;
max-width: 900px;
margin: 2% auto;
max-height: 95vh;
overflow: auto;
}
/* Responsive pentru tabelele din meniu - păstrăm aspectul original */
.meniu-html-content table {
min-width: auto;
table-layout: auto;
}
.meniu-html-content img {
max-width: 100%;
height: auto;
}
/* Media query pentru mobil - meniu */
@media (max-width: 768px) {
.modal:has(.meniu-html-content) .modal-content,
.modal-content:has(.meniu-html-content) {
width: 98%;
margin: 1% auto;
padding: 10px;
max-height: 98vh;
}
.meniu-html-content {
padding: 2px;
font-size: 12px;
}
.meniu-html-content table {
font-size: 11px;
}
.meniu-html-content td,
.meniu-html-content th {
padding: 3px 5px;
}
}
/* Responsive pentru carduri meniu */
@media (max-width: 600px) {
.meniu_grid_container {
grid-template-columns: 1fr;
gap: 10px;
padding: 10px;
}
.meniu-item {
padding: 12px;
}
.meniu-icon-container {
width: 40px;
height: 40px;
}
.meniu-svg-icon {
width: 26px;
height: 26px;
}
}
/* Stiluri pentru povestea marcată pentru citire */
.poveste-in-asteptare {
border-left: 3px solid #FFC966;
background-color: #fffaf0;
}
.status-citire {
font-size: 1.2em;
color: #FFC966;
margin-left: 5px;
}
/* Stiluri pentru butonul de citire cu voce */
.buton-citire {
background-color: #FFC966;
color: #333;
border: none;
padding: 8px 12px;
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
gap: 5px;
}
.buton-citire:hover {
background-color: #FFB84D;
}
/* Stiluri pentru overlay */
#povesti_text_content {
white-space: pre-wrap;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
padding: 15px;
background-color: #f5f5f5;
border-radius: 5px;
max-height: 60vh;
overflow-y: auto;
}
/* Overlay pentru povești - similar cu overlay-ul pentru documente și imagini */
#overlay_povesti {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1500;
justify-content: center;
align-items: center;
}
.overlay-content {
background-color: white;
padding: 20px;
border-radius: 5px;
max-width: 80%;
max-height: 80%;
overflow: auto;
position: relative;
}
.close_overlay_povesti {
position: absolute;
top: 10px;
left: 15px; /* Mutat din dreapta în stânga */
font-size: 32px; /* Mărit */
cursor: pointer;
}
.povesti-info {
margin-bottom: 15px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.povesti-preview {
margin-top: 15px;
}
.overlay-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 15px;
padding-top: 10px;
border-top: 1px solid #eee;
}
.overlay-buttons button {
padding: 8px 12px;
cursor: pointer;
border: none;
border-radius: 4px;
background-color: #f0f0f0;
}
.overlay-buttons button:hover {
background-color: #e0e0e0;
}
.inky-povesti-icon {
width: 70px !important;
height: 70px !important;
border-width: 3px;
}
.suprapunere-icon {
font-size: 32px !important; /* Echivalează cu alte secțiuni */
width: 40px !important;
height: 40px !important;
margin: 0 15px !important;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 50%;
padding: 8px;
cursor: pointer;
transition: transform 0.2s, background-color 0.2s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.suprapunere-icon:hover {
transform: scale(1.1);
}
.suprapunere-icon svg {
width: 22px;
height: 22px;
stroke: #475569;
}
.suprapunere-icon.descarca-icon:hover {
background-color: #dbeafe;
}
.suprapunere-icon.descarca-icon:hover svg {
stroke: #2563eb;
}
.suprapunere-icon.sterge-icon:hover {
background-color: #fee2e2;
}
.suprapunere-icon.sterge-icon:hover svg {
stroke: #dc2626;
}
/* Animație de rotire pentru iconul loader */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.suprapunere-icon .spin-icon {
animation: spin 1s linear infinite;
}
/* Asigură vizibilitate pe hover/touch */
.povesti-item:hover .suprapunere {
display: flex !important;
opacity: 1 !important;
}
/* Stiluri specifice pentru butonul de citire */
.buton-citire {
background-color: #FFC966 !important;
color: #333;
display: flex;
align-items: center;
gap: 5px;
}
.buton-citire:hover {
background-color: #FFB84D !important;
}
/* Suprapunere pentru carduri povești (similar cu imagini și documente) */
.povesti-item {
position: relative;
}
.povesti-item .suprapunere {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
}
/* Stiluri pentru fereastra modală de povești */
.povesti-modal-content {
padding: 10px;
}
.povesti-modal-title {
margin-top: 0;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
color: #333;
font-size: 1.4em;
}
.povesti-modal-body {
max-height: 60vh;
overflow-y: auto;
margin-bottom: 15px;
}
.povesti-modal-text {
white-space: pre-wrap;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
padding: 15px;
background-color: #f8f8f8;
border-radius: 5px;
border: 1px solid #eee;
margin: 0;
}
.povesti-modal-footer {
text-align: center;
padding-top: 10px;
border-top: 1px solid #eee;
}
.modal-buton-citire {
background-color: #FFC966;
color: #333;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
transition: background-color 0.2s;
}
.modal-buton-citire:hover {
background-color: #FFB84D;
}
.modal-buton-citire:disabled {
background-color: #e0e0e0;
color: #888;
cursor: not-allowed;
}
.portavoce-icon {
font-size: 18px;
margin-right: 8px;
}
/* Adaptare stiluri pentru modalul existent */
#modalContainer.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
background-color: #fefefe;
margin: 10% auto;
padding: 20px;
border-radius: 5px;
width: 70%;
max-width: 800px;
position: relative;
}
/* Stiluri pentru starea poveștii deja marcată pentru citire */
.status-reading-info {
background-color: #ffe8cc;
color: #996633;
padding: 8px;
border-radius: 4px;
margin-bottom: 10px;
font-size: 14px;
text-align: center;
}
/* Stiluri pentru feedback vizual în butoane */
.modal-buton-citire .portavoce-icon {
display: inline-block;
transition: all 0.3s ease;
}
/* Buton în stare de procesare */
.modal-buton-citire:disabled {
background-color: #f0f0f0;
color: #777;
cursor: not-allowed;
}
/* Animații pentru iconul portavoce */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.portavoce-icon {
animation: pulse 2s infinite;
}
/* Stiluri pentru iconul de procesare din suprapunere */
.citire-icon {
transition: all 0.3s ease;
}
/* Stiluri pentru feedback vizual în listă */
.poveste-in-asteptare {
border-left: 3px solid #FFC966;
background-color: #fffaf0;
}
/* Efect de tranziție pentru actualizarea elementelor din listă */
.povesti-item {
transition: all 0.3s ease;
}
.povesti-item.updating {
opacity: 0.5;
}
/* Stiluri pentru editarea poveștilor */
.povesti-modal-edit {
width: 100%;
min-height: 200px;
max-height: 60vh;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
outline: none;
resize: vertical;
}
.povesti-modal-edit:focus {
border-color: #FFC966;
box-shadow: 0 0 0 2px rgba(255, 201, 102, 0.3);
}
.povesti-modal-buttons {
display: flex;
justify-content: center;
gap: 15px;
}
.modal-buton-editare {
background-color: #f0f0f0;
color: #333;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
transition: background-color 0.2s;
}
.modal-buton-editare:hover {
background-color: #e0e0e0;
}
.modal-buton-editare:disabled {
background-color: #f0f0f0;
color: #999;
cursor: not-allowed;
}
.edit-icon {
font-size: 18px;
margin-right: 8px;
}
/* Stiluri pentru animație la salvare */
@keyframes flash {
0% { background-color: #FFC966; }
100% { background-color: #f0f0f0; }
}
.flash-save {
animation: flash 0.5s;
}
/* Stiluri pentru istoricul modificărilor */
.povesti-istoric {
margin-bottom: 15px;
border: 1px solid #eee;
border-radius: 5px;
overflow: hidden;
}
.povesti-istoric-toggle {
padding: 8px 12px;
background-color: #f5f5f5;
border-bottom: 1px solid #eee;
cursor: pointer;
font-size: 14px;
font-weight: 500;
display: flex;
justify-content: space-between;
}
.povesti-istoric-toggle:hover {
background-color: #f0f0f0;
}
.istoric-arrow {
font-size: 12px;
color: #666;
}
.povesti-istoric-content {
max-height: 200px;
overflow-y: auto;
background-color: #fafafa;
}
.istoric-item {
padding: 8px 12px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #f0f0f0;
font-size: 13px;
}
.istoric-item:last-child {
border-bottom: none;
}
.istoric-item.istoric-creator {
background-color: #f5fff5;
}
.istoric-item.istoric-latest {
background-color: #fffaf0;
}
.istoric-autor {
font-weight: 500;
display: flex;
align-items: center;
}
.istoric-icon {
margin-right: 5px;
font-size: 14px;
}
.istoric-data {
color: #777;
}
.istoric-actiune {
font-style: italic;
margin-right: 5px;
}
.istoric-empty {
padding: 10px;
text-align: center;
color: #999;
font-style: italic;
}
/* Stiluri personalizate pentru Inky cu cartea */
.povesti-icon-container {
position: relative;
width: 60px;
height: 60px;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.inky-povesti-icon {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
z-index: 1;
bottom: 0;
right: 50%;
transform: translateX(-50%);
border: 2px solid #0078d7;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: transform 0.2s ease;
}
.povesti-item:hover .inky-povesti-icon {
transform: translateX(-50%) scale(1.1);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
/* Asigurăm-ne că iconul Inky nu interferează cu interacțiunea */
.inky-povesti-icon {
pointer-events: none !important;
}
/* Marcajul butonului de citire pentru iconurile care sunt already marked */
.citire-icon.disabled {
opacity: 0.5;
cursor: not-allowed !important;
}
/* Stiluri pentru lista de destinatari */
#fereastraSelectie {
max-height: 300px;
overflow-y: auto;
border: 1px solid #ccc;
background-color: white;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 1000;
position: absolute;
width: 100%;
}
.selectable-user {
padding: 8px;
margin: 0;
cursor: pointer;
border-bottom: 1px solid #eee;
transition: background-color 0.2s;
}
.selectable-user:last-child {
border-bottom: none;
}
.selectable-user:hover {
background-color: #f5f5f5;
}
.selectable-user[data-selected="true"] {
background-color: #FFC966;
}
/* Stiluri comune pentru toate modalurile (povești și imagini) */
#modalContainer {
display: none;
position: fixed;
z-index: 1500;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
}
.povesti-modal-content, .imagine-modal-content {
background-color: #fefefe;
margin: 5% auto;
padding: 20px;
border-radius: 10px;
width: 85%;
max-width: 800px;
position: relative;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.povesti-modal-title, .imagine-modal-title {
margin-top: 0;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
color: #333;
font-size: 1.4em;
text-align: center;
}
.povesti-modal-body, .imagine-modal-body {
max-height: 60vh;
overflow-y: auto;
margin-bottom: 15px;
}
.imagine-modal-info {
display: flex;
justify-content: space-between;
font-size: 0.9em;
color: #666;
margin-bottom: 15px;
flex-wrap: wrap;
}
.imagine-uploader, .imagine-date {
margin-bottom: 5px;
}
.responsive-image {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
max-height: 60vh;
object-fit: contain;
border-radius: 5px;
}
.povesti-modal-footer, .imagine-modal-footer {
text-align: center;
padding-top: 10px;
border-top: 1px solid #eee;
}
.povesti-modal-buttons, .imagine-modal-buttons {
display: flex;
justify-content: center;
gap: 15px;
}
.modal-buton-descarca {
background-color: #4CAF50;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
transition: background-color 0.2s;
}
.modal-buton-descarca:hover {
background-color: #45a049;
}
.descarca-icon {
font-size: 18px;
margin-right: 8px;
}
/* Stiluri pentru overlay și interacțiuni pe toate dispozitivele */
.suprapunere {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none;
flex-direction: row;
justify-content: center;
align-items: center;
z-index: 30;
pointer-events: auto !important;
}
.suprapunere-icon {
color: white;
font-size: 24px;
margin: 0 10px;
cursor: pointer;
z-index: 40;
position: relative;
pointer-events: auto;
transition: transform 0.2s;
}
.suprapunere-icon:hover {
transform: scale(1.2);
}
/* Media queries pentru adaptarea la dispozitive mobile */
@media (max-width: 768px) {
.povesti-modal-content, .imagine-modal-content {
width: 90%;
margin: 10% auto;
padding: 15px;
}
.povesti-modal-title, .imagine-modal-title {
font-size: 1.2em;
}
.povesti-modal-body, .imagine-modal-body {
max-height: 50vh;
}
.imagine-modal-info {
flex-direction: column;
align-items: center;
}
.suprapunere-icon {
font-size: 32px; /* Icoane mai mari pentru touchscreen */
margin: 0 15px;
}
.modal-buton-descarca {
padding: 10px 20px; /* Butoane mai mari pentru touch */
font-size: 16px;
}
}
@media (max-width: 480px) {
.povesti-modal-content, .imagine-modal-content {
width: 95%;
margin: 15% auto 5% auto;
padding: 10px;
}
.responsive-image {
max-height: 40vh;
}
.povesti-modal-buttons, .imagine-modal-buttons {
flex-direction: column;
gap: 10px;
}
.modal-buton-descarca {
width: 100%;
}
}
/* Îmbunătățiri pentru touch devices */
@media (hover: none) {
.image-grid-item {
position: relative;
}
.suprapunere {
opacity: 0.8;
background-color: rgba(0, 0, 0, 0.6);
}
/* Afișăm overlay-ul pentru elementul atins */
.image-grid-item.touched .suprapunere {
display: flex;
}
}
/* Stiluri pentru container-ul iframe */
.iframe-container {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
.responsive-iframe {
width: 100%;
height: 70vh; /* Înălțime implicită, va fi ajustată dinamic prin JavaScript */
border: 1px solid #eee;
border-radius: 5px;
background-color: #f9f9f9;
}
.document-modal-content {
max-width: 850px; /* Puțin mai lat pentru documente PDF */
}
.document-modal-body {
max-height: none; /* Eliminăm înălțimea maximă pentru a permite iframe-ului să se extindă */
margin-bottom: 10px;
padding: 0;
}
.document-uploader, .document-date {
margin-bottom: 5px;
font-size: 0.85em;
color: #666;
}
/* Stiluri pentru overlay-ul de documente */
.iframe-grid-item {
position: relative;
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.iframe-grid-item:hover {
transform: scale(1.02);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* Feedback vizual pentru încărcare */
.loading-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 50;
}
.loading-spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Stiluri specifice pentru dispozitive mobile */
@media (max-width: 768px) {
.document-modal-content {
width: 95%;
margin: 5% auto;
padding: 15px 10px;
}
.responsive-iframe {
height: 60vh; /* Ajustăm înălțimea pentru ecrane mai mici */
}
.povesti-modal-info {
flex-direction: column;
text-align: center;
margin-bottom: 10px;
}
.iframe-grid-item img {
max-width: 100%;
height: auto;
}
/* Îmbunătățim vizibilitatea suprapunerii pe dispozitive mobile */
.iframe-grid-item .suprapunere {
background-color: rgba(0, 0, 0, 0.6);
}
.suprapunere-icon {
font-size: 28px; /* Icoane mai mari pentru touch */
margin: 0 15px;
}
}
/* Ajustări pentru ecrane foarte mici (telefoane) */
@media (max-width: 480px) {
.document-modal-content {
width: 100%;
margin: 0;
padding: 10px 5px;
border-radius: 0; /* Eliminăm colțurile rotunjite pe ecrane foarte mici */
}
.responsive-iframe {
height: 50vh; /* Reducem înălțimea pentru telefoane */
border-radius: 0;
}
.modal-buton-descarca {
width: 100%;
padding: 12px 15px; /* Butoane mai mari pentru mobile */
margin: 5px 0;
}
/* Thumbnail-uri mai mari pentru touch */
.iframe-grid-item img {
width: 100%;
}
/* Se asigură că semnele de încărcare sunt suficient de vizibile */
.loading-spinner {
width: 40px;
height: 40px;
border-width: 5px;
}
}
/* Optimizări pentru dispozitive touch */
@media (hover: none) {
/* Afișăm overlay-ul pentru documentele/iframe-urile atinse */
.iframe-grid-item.touched .suprapunere {
display: flex;
opacity: 0.9;
}
/* Facem butoanele mai mari și mai ușor de atins */
.suprapunere-icon {
font-size: 36px;
margin: 0 20px;
padding: 10px;
}
/* Stiluri pentru feedback tactil */
.iframe-grid-item:active {
transform: scale(0.98);
}/* Stiluri pentru optimizarea afișării ferestrei modale pe smartphone */
@media screen and (max-width: 768px) {
.modal-content {
width: 98% !important;
margin: 2% auto !important;
padding: 10px !important;
}
.modal-title {
font-size: 1rem !important;
}
.povesti-modal-body {
max-height: 70vh !important;
}
.responsive-iframe,
.responsive-image,
.responsive-video {
max-height: 50vh !important;
}
.text-container {
max-height: 50vh !important;
}
.nav-container {
margin: 5px 0 !important;
}
.close {
color: #f44336 !important; /* Roșu */
position: absolute;
top: 5px;
left: 10px; /* Păstrăm poziția din stânga */
font-size: 40px !important; /* Mărit de la 32px la 40px */
font-weight: bold;
z-index: 2050 !important; /* Prioritate mare */
text-shadow: 0 0 3px white; /* Pentru contrast */
display: block !important; /* Forțează afișarea */
background-color: rgba(255, 255, 255, 0.5); /* Fundal semi-transparent pentru lizibilitate */
border-radius: 50%; /* Formă rotundă */
width: 40px;
height: 40px;
line-height: 38px;
text-align: center;
}
}
/* Clase auxiliare pentru conținut */
.responsive-iframe {
width: 100%;
border: none;
}
.responsive-image {
max-width: 100%;
object-fit: contain;
}
.loading-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.loading-spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.file-info-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px;
text-align: center;
}
.file-icon {
font-size: 3rem;
margin-bottom: 10px;
}
}
/* Îmbunătățim tranziția la ștergere */
.iframe-grid-item.removing {
animation: fadeOutAndShrink 0.5s forwards;
}
@keyframes fadeOutAndShrink {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.8);
}
}
/*adaugam selectori specifici pentru clasa .suprapunere in imagini si documente*/
.povesti-item:hover .suprapunere,
.image-grid-item:hover .suprapunere,
.iframe-grid-item:hover .suprapunere {
display: flex;
opacity: 1;
}
/* asiguram ca elementele .image-grid-item si .iframe-grid-item au position:realtive */
.image-grid-item, .iframe-grid-item, .povesti-item {
position: relative;
}
/* Stiluri pentru container */
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 10px;
box-sizing: border-box;
}
/* Zona doc-items - setăm width: 100% pentru a ocupa toată lățimea */
.column.documente,
.column_documente {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
background-color: transparent; /* Eliminăm fundalul general */
margin-bottom: 10px;
padding: 0;
box-sizing: border-box;
}
/* Lista de doc-items - transformăm într-un container flex care ocupă toată lățimea */
.column.documente ul,
.column_documente ul {
display: flex;
flex-direction: row;
justify-content: stretch;
align-items: stretch;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
/* Fiecare doc-item ocupă o porțiune egală din lățimea totală */
.doc-item,
.column.documente li,
.column_documente li {
flex: 1 1 0;
display: flex;
margin: 0 5px;
background-color: #336578;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
/* Link-urile din doc-items ocupă tot spațiul disponibil */
.doc-item a,
.column.documente li a,
.column_documente li a {
flex: 1;
display: block;
padding: 12px 10px;
color: white !important;
text-decoration: none;
font-weight: bold;
font-size: 15px;
text-align: center;
white-space: nowrap;
}
/* Hover effect pentru doc-items */
.doc-item:hover,
.column.documente li:hover,
.column_documente li:hover {
background-color: #4a7b92;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
/* Zonele pentru documente, imagini și povești - toate pe același rând */
.column_pdf_uri,
.column_imagini,
.column_povesti {
flex: 1 1 0;
margin: 5px;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
box-sizing: border-box;
}
/* Culori specifice pentru fiecare zonă */
.column_pdf_uri {
background-color: #86BBD8;
}
.column_imagini {
background-color: #F6AE2D;
}
.column_povesti {
background-color: #FF785A;
}
/* Stilizare titluri */
.column_pdf_uri h2,
.column_imagini h2,
.column_povesti h2 {
margin-top: 0;
margin-bottom: 15px;
text-align: center;
}
/* Zona de chat pe întreaga lățime */
#column_chat,
.column.chat {
flex: 0 0 100%;
margin-top: 10px;
width: 100%;
box-sizing: border-box;
}
/* Media queries pentru mobile */
@media (max-width: 768px) {
/* Lista de doc-items pe mobile - cu scroll orizontal */
.column.documente ul,
.column_documente ul {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 5px;
}
/* Doc-items pe mobile */
.doc-item,
.column.documente li,
.column_documente li {
flex: 0 0 auto;
min-width: 150px;
}
/* Textul din doc-items pe mobile */
.doc-item a,
.column.documente li a,
.column_documente li a {
font-size: 14px;
padding: 10px 8px;
}
/* Coloanele trec pe verticală pe mobile */
.column_pdf_uri,
.column_imagini,
.column_povesti {
flex: 0 0 100%;
margin: 5px 0;
}
}
/* Corecție pentru spațierea doc-item pe desktop - adaugă aceste reguli la sfârșitul fișierului style.css */
@media (min-width: 769px) {
/* Container pentru documente */
.column.documente,
.column_documente {
width: auto !important;
max-width: 100% !important;
padding: 15px !important;
}
/* Lista doc-items pe orizontală */
.column.documente ul,
.column_documente ul {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: space-between !important; /* Distribuie spațiul între elemente */
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
list-style-type: none !important;
gap: 160px !important; /* Adaugă spațiu între elemente cu gap */
}
/* Elementele doc-item dispuse orizontal cu spațiere */
.doc-item,
.column.documente li,
.column_documente li {
flex: 1 1 auto !important;
width: auto !important;
display: inline-block !important;
margin: 0 10px !important; /* Mărire margin între elemente */
min-width: unset !important;
float: none !important;
vertical-align: top !important;
}
/* Link-urile din doc-items cu padding sporit */
.doc-item a,
.column.documente li a,
.column_documente li a {
display: block !important;
width: auto !important;
text-align: center !important;
white-space: nowrap !important;
padding: 10px 15px !important; /* Padding mărit */
margin: 0 5px !important;
}
/* Ascunde butonul Social Media din bara de butoane mari pe desktop */
.doc-item-social-media {
display: none !important;
}
}
/* Soluție alternativă folosind inline-block */
@media (min-width: 769px) {
/* Container principal */
body .container {
text-align: center !important; /* Centrează conținutul */
width: 100% !important;
max-width: 100% !important;
}
/* Container documente */
body .column.documente,
body .column_documente {
text-align: center !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin-bottom: 20px !important;
}
/* Container pentru lista - text-align: justify pentru distribuție uniformă */
body .column.documente ul,
body .column_documente ul {
display: block !important;
width: 100% !important;
font-size: 0 !important; /* Elimină spațiile între elemente inline-block */
padding: 0 !important;
margin: 0 !important;
text-align: justify !important;
}
/* Folosește ::after pentru a distribui elementele uniform */
body .column.documente ul::after,
body .column_documente ul::after {
content: "" !important;
display: inline-block !important;
width: 100% !important;
}
/* Elemente doc-item */
body .column.documente ul li,
body .column_documente ul li,
body .doc-item {
display: inline-block !important;
vertical-align: top !important;
width: auto !important;
min-width: 0 !important;
font-size: 16px !important; /* Resetare font-size */
text-align: center !important;
margin: 0 !important;
}
/* Forțează layout pe același rând prin setarea unei lățimi totale mai mici */
body .column.documente ul li,
body .column_documente ul li,
body .doc-item {
width: calc(100% / 5 - 10px) !important; /* Adaptează numărul 5 la numărul tău de elemente */
margin: 0 5px !important;
}
/* Link-uri */
body .column.documente ul li a,
body .column_documente ul li a,
body .doc-item a {
display: block !important;
padding: 10px !important;
text-align: center !important;
}
/* Spațiere pentru coloanele de conținut */
body .column_pdf_uri,
body .column_imagini,
body .column_povesti {
margin: 0 5px !important;
box-sizing: border-box !important;
}
/* Ascunde butonul Social Media din bara de butoane mari pe desktop */
body .doc-item-social-media {
display: none !important;
}
}
/* === Stiluri pentru centrarea butoanelor din secțiunea documente === */
.column.documente ul {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 10px !important;
padding: 10px !important;
margin: 0 !important;
list-style-type: none !important;
}
.column.documente li,
.doc-item {
flex: 0 0 auto !important;
margin: 5px !important;
}
/* Media query pentru ecrane mari - păstrează centrarea */
@media (min-width: 769px) {
.column.documente ul {
justify-content: center !important;
flex-wrap: wrap !important;
gap: 15px !important;
}
}
/* === Reguli comune pentru toate tipurile de carduri === */
.povesti-item,
.image-grid-item,
.iframe-grid-item {
position: relative;
overflow: hidden;
}
/* Overlay-ul - Așezare verticală în partea de sus */
.povesti-item .suprapunere,
.image-grid-item .suprapunere,
.iframe-grid-item .suprapunere {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
flex-direction: column;
align-items: center;
padding-top: 20px;
background: rgba(0, 0, 0, 0.6);
z-index: 100;
}
/* Activare overlay la hover */
.povesti-item:hover .suprapunere,
.image-grid-item:hover .suprapunere,
.iframe-grid-item:hover .suprapunere {
display: flex;
}
/* Stiluri iconuri - Așezare verticală */
.povesti-item .suprapunere-icon,
.image-grid-item .suprapunere-icon,
.iframe-grid-item .suprapunere-icon {
color: white;
font-size: 24px;
margin: 8px 0;
cursor: pointer;
transition: all 0.3s;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
/* Efecte hover iconuri */
.povesti-item .suprapunere-icon:hover,
.image-grid-item .suprapunere-icon:hover,
.iframe-grid-item .suprapunere-icon:hover {
transform: scale(1.2);
filter: drop-shadow(0 4px 6px rgba(255,255,255,0.2));
}
/* Mobil: suprapunere vizibilă permanent pentru toate tipurile de carduri */
@media (max-width: 768px) {
.povesti-item .suprapunere,
.image-grid-item .suprapunere,
.iframe-grid-item .suprapunere {
display: flex !important;
position: absolute;
bottom: 0;
top: auto;
height: auto;
padding: 12px;
flex-direction: row;
justify-content: center;
background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.85) 100%);
border-radius: 0 0 10px 10px;
}
.povesti-item .suprapunere-icon,
.image-grid-item .suprapunere-icon,
.iframe-grid-item .suprapunere-icon {
width: 42px;
height: 42px;
margin: 0 8px;
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 10px rgba(0,0,0,0.5), 0 0 0 3px rgba(255,255,255,0.3);
}
.povesti-item .suprapunere-icon svg,
.image-grid-item .suprapunere-icon svg,
.iframe-grid-item .suprapunere-icon svg {
width: 20px;
height: 20px;
color: #1f2937;
}
}
html body .povesti-item .povesti-title,
html body .povesti-item h3,
html body .povesti-item .povesti-info {
font-size: 12px !important;
margin: 2px 0 !important;
padding: 0 2px !important;
line-height: 1.3 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
max-height: none !important;
height: auto !important;
}
html body .povesti-item {
height: auto !important;
min-height: 130px !important;
margin-bottom: 12px !important;
}
html body .povesti-item img,
html body .povesti-item .povesti-thumbnail {
max-height: 85px !important;
}
.povesti-book-icon {
display: none !important;
}
/* poztionarea lui Inky in dreapta jos pe fiecare card povesti*/
.povesti-icon-container {
position: fixed !important;
right: 10px;
bottom: 10px;
width: 26px !important;
height: 26px !important;
margin: 0;
z-index: 9999;
}
.inky-povesti-icon {
position: absolute !important;
width: 26px !important;
height: 26px !important;
border: 2px solid var(--red);
border-radius: 50%;
object-fit: cover;
left: auto !important;
top: auto !important;
right: 0 !important;
bottom: 0 !important;
transform: none !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* Forțează poziționarea extremă */
.inky-povesti-icon {
right: -1px !important; /* Glisează în afara containerului */
transform: translateX(18px) !important; /* Offset suplimentar */
}
/* ===== Stiluri Inky pentru povești (mutate din 3_povesti_activitati.js) ===== */
.povesti-icon-container {
position: relative;
width: 60px;
height: 60px;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.inky-povesti-icon {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
z-index: 1;
top: 0;
left: 50%;
transform: translateX(-50%);
border: 2px solid #0078d7;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.povesti-book-icon {
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%) scaleX(0.9);
font-size: 20px;
z-index: 2;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.povesti-preview {
display: flex;
align-items: center;
}
.povesti-item:hover .inky-povesti-icon {
transform: translateX(-50%) scale(1.05);
}
.povesti-item:hover .povesti-book-icon {
transform: translateX(-50%) scaleX(0.9) scale(1.05);
}
.poveste-in-asteptare .inky-povesti-icon {
animation: pulse 1.5s infinite;
}
.poveste-in-asteptare .povesti-book-icon {
animation: bookSway 2s ease-in-out infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(0, 120, 215, 0.4); }
70% { box-shadow: 0 0 0 6px rgba(0, 120, 215, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 120, 215, 0); }
}
@keyframes bookSway {
0%, 100% { transform: translateX(-50%) scaleX(0.9) rotate(0deg); }
25% { transform: translateX(-50%) scaleX(0.9) rotate(-5deg); }
75% { transform: translateX(-50%) scaleX(0.9) rotate(5deg); }
}
/* Overlay pentru iconurile de acțiune */
.suprapunere {
pointer-events: auto !important;
z-index: 30 !important;
}
.suprapunere-icon {
cursor: pointer !important;
z-index: 40 !important;
}
.suprapunere-icon:hover {
transform: scale(1.2) !important;
}
/* ===========================
Buton WhatsApp Configurare
=========================== */
.btn-whatsapp-config {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #25D366;
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
cursor: pointer;
margin-left: 10px;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
vertical-align: middle;
}
.btn-whatsapp-config svg {
color: white;
width: 20px;
height: 20px;
}
.btn-whatsapp-config:hover {
background-color: #128C7E;
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.btn-whatsapp-config:active {
transform: scale(0.95);
}
/* ===========================
Modal Sincronizare Media (v4.0 - Simplificat)
=========================== */
#modalWhatsappConfig {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.modal-sync-content {
background: #fff;
border-radius: 16px;
padding: 24px;
width: 320px;
max-width: 90%;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
position: relative;
animation: modalFadeIn 0.2s ease;
}
@keyframes modalFadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.modal-sync-close {
position: absolute;
top: 12px;
right: 16px;
font-size: 24px;
color: #999;
cursor: pointer;
line-height: 1;
transition: color 0.2s;
}
.modal-sync-close:hover {
color: #333;
}
/* Opțiuni sincronizare */
.sync-option {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.sync-option:last-of-type {
border-bottom: none;
}
.sync-option.disabled {
opacity: 0.5;
}
.sync-left {
display: flex;
align-items: center;
flex: 1;
gap: 10px;
}
.sync-left input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #667eea;
}
.sync-left label {
font-size: 15px;
font-weight: 500;
color: #333;
cursor: pointer;
}
.sync-status {
font-size: 12px;
margin-left: 6px;
}
.sync-dev {
font-size: 11px;
color: #999;
margin-left: 4px;
}
.sync-right {
display: flex;
align-items: center;
}
.btn-timer {
background: none;
border: none;
cursor: pointer;
padding: 6px;
border-radius: 8px;
color: #667eea;
transition: background 0.2s, transform 0.2s;
}
.btn-timer:hover:not(:disabled) {
background: #f0f0ff;
transform: scale(1.1);
}
.btn-timer:disabled {
color: #ccc;
cursor: not-allowed;
}
.sync-schedule {
width: 100%;
font-size: 12px;
color: #888;
margin-top: 4px;
padding-left: 28px;
}
/* Footer cu buton Trimite */
.sync-footer {
margin-top: 20px;
text-align: center;
}
.btn-sync-send {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
border: none;
padding: 12px 40px;
font-size: 15px;
font-weight: 600;
border-radius: 10px;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-sync-send:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
/* Mini-modal pentru Time Picker */
#modalTimePicker {
display: none;
position: fixed;
z-index: 10001;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
justify-content: center;
align-items: center;
}
.time-picker-content {
background: #fff;
border-radius: 12px;
padding: 20px;
width: 260px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
animation: modalFadeIn 0.15s ease;
}
.time-picker-row {
display: flex;
align-items: center;
margin-bottom: 14px;
gap: 10px;
}
.time-picker-row label {
font-size: 14px;
color: #555;
min-width: 60px;
}
.time-picker-row input[type="date"],
.time-picker-row input[type="time"] {
flex: 1;
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 14px;
}
.time-picker-row input:focus {
outline: none;
border-color: #667eea;
}
.btn-picker-ok {
width: 100%;
background: #667eea;
color: #fff;
border: none;
padding: 10px;
font-size: 14px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
}
.btn-picker-ok:hover {
background: #5a6fd6;
}
/* Instant option in time picker */
.instant-row {
background: linear-gradient(135deg, #f0f7ff 0%, #e8f4f8 100%);
padding: 10px 12px;
border-radius: 8px;
margin-bottom: 16px !important;
border: 1px solid #d0e8f2;
}
.instant-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-weight: 500;
color: #2563eb;
}
.instant-label input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #2563eb;
cursor: pointer;
}
.instant-label span {
font-size: 14px;
}
/* Responsive */
@media (max-width: 400px) {
.modal-sync-content {
width: 95%;
padding: 18px;
}
.sync-left label {
font-size: 14px;
}
.btn-sync-send {
width: 100%;
padding: 14px;
}
}
/* Social Media Menu - Ascunde din bara de butoane mari (desktop), vizibil doar în sidebar mobil */
.doc-item-social-media {
display: none !important; /* Ascuns complet din bara de butoane mari */
}
/* Media query pentru mobile - Social Media devine vizibil în sidebar */
@media (max-width: 768px) {
.doc-item-social-media {
display: block !important; /* Vizibil în sidebar pe mobile */
}
}
/* Submeniu Social Media - ascuns implicit, se deschide la clic */
.submenu-hidden {
display: none;
}
/* Arrow animație pentru Social Media */
#social-media-arrow {
transition: transform 0.3s ease;
display: inline-block;
}
/* ============================================
UI SIMPLIFICAT PENTRU PROFESORI
Design elegant, curat, responsive
Paletă: Alb, gri deschis, accente subtile
============================================ */
/* Layout profesor - modern și curat, scroll fără bară vizibilă */
.profesor-layout {
max-width: 100%;
min-height: 100vh;
margin: 0;
/* Safe area pentru iPhone notch/Dynamic Island */
padding: 10px 8px;
padding-top: calc(10px + env(safe-area-inset-top, 0px));
padding-top: calc(10px + constant(safe-area-inset-top)); /* iOS 11.0-11.2 */
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); /* Spațiu pentru safe area jos */
background: #f5f7fa;
display: flex;
flex-direction: column;
box-sizing: border-box;
/* Containerul crește natural, scroll-ul se face pe body */
overflow: visible;
position: relative;
z-index: 100;
}
/* Permite scroll pe body când avem profesor-layout */
body:has(.profesor-layout) {
margin-top: 0 !important;
overflow-y: auto !important;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
/* Ascunde bara de scroll vizuală dar permite scroll */
body:has(.profesor-layout)::-webkit-scrollbar {
display: none;
}
html:has(.profesor-layout) {
overflow-y: auto !important;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
html:has(.profesor-layout)::-webkit-scrollbar {
display: none;
}
/* Header elegant - FIXED la top */
.profesor-header {
display: flex;
flex-direction: column;
padding: 12px 14px;
padding-top: calc(12px + env(safe-area-inset-top, 0px)); /* Include notch */
background: #fff;
border-radius: 0 0 12px 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
gap: 10px;
box-sizing: border-box;
/* Header FIXED la top */
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
}
/* Spacer pentru a compensa headerul fixed */
.profesor-layout::before {
content: '';
display: block;
height: 140px; /* Înălțimea aproximativă a headerului */
height: calc(140px + env(safe-area-inset-top, 0px));
flex-shrink: 0;
}
/* Rândul 1: Grupă + Salut + Hamburger */
.profesor-header-row-top {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 8px;
}
/* Partea stângă a header-ului - hamburger + grupă */
.profesor-header-left {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 1;
min-width: 0;
}
/* Stil pentru numele grupei în header - elegant și lizibil */
.profesor-header-left .grupa-nume {
font-family: 'Poppins', var(--font-header), sans-serif;
font-size: 1.1em;
font-weight: 700;
color: #1e40af;
letter-spacing: 0.5px;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Partea dreaptă a header-ului - salut + logo */
.profesor-header-right {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
/* Logo TID4K în header */
.logo-link-profesor {
display: flex;
align-items: center;
text-decoration: none;
}
.logo-tid4k {
height: 32px;
width: auto;
object-fit: contain;
border-radius: 4px;
transition: transform 0.2s, opacity 0.2s;
}
.logo-tid4k:hover {
transform: scale(1.05);
opacity: 0.9;
}
/* Salut personalizat profesor */
.salut-profesor {
font-family: 'Poppins', var(--font-body), sans-serif;
font-size: 0.7em;
font-weight: 500;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
/* Câmp de căutare în header profesor - Rândul 2 */
.profesor-search-container {
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
border-radius: 8px;
padding: 8px 14px;
gap: 8px;
transition: all 0.2s;
width: 100%;
box-sizing: border-box;
}
.profesor-search-container:focus-within {
background: #fff;
box-shadow: 0 0 0 2px #3b82f6;
}
.profesor-search-container .search-icon {
color: #94a3b8;
flex-shrink: 0;
}
.profesor-search-input {
border: none;
background: transparent;
outline: none;
font-family: 'Poppins', var(--font-body), sans-serif;
font-size: 0.9em;
color: #1e293b;
width: 100%;
max-width: 300px;
text-align: center;
}
.profesor-search-input::placeholder {
color: #94a3b8;
}
/* Pe ecrane mai mari afișăm salutul complet */
@media (min-width: 500px) {
.salut-profesor {
font-size: 0.8em;
max-width: 200px;
}
}
@media (min-width: 768px) {
.salut-profesor {
font-size: 0.85em;
max-width: none;
}
}
/* Responsive header profesor pe mobil */
@media (max-width: 600px) {
.profesor-header {
padding: 10px 10px;
gap: 8px;
border-radius: 10px;
}
.profesor-header-title .grupa-nume {
font-size: 0.95em;
}
.profesor-search-container {
padding: 6px 10px;
}
.profesor-search-input {
font-size: 0.85em;
}
}
@media (max-width: 400px) {
.profesor-header {
padding: 8px 8px;
border-radius: 8px;
}
.profesor-header-title .grupa-nume {
font-size: 0.85em;
}
.hamburger-btn {
padding: 6px 8px;
}
.hamburger-btn span {
width: 18px;
}
}
/* Hamburger button - modern */
.hamburger-btn {
background: #f1f5f9;
border: none;
border-radius: 8px;
padding: 10px 12px;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 4px;
transition: background 0.2s;
}
.hamburger-btn:hover { background: #e2e8f0; }
.hamburger-btn span {
display: block;
width: 22px;
height: 2px;
background: #475569;
border-radius: 2px;
transition: all 0.3s;
}
.hamburger-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
.hamburger-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* Meniu hamburger - elegant */
.hamburger-menu-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(15, 23, 42, 0.4);
backdrop-filter: blur(2px);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.hamburger-menu-overlay.active { opacity: 1; visibility: visible; }
.hamburger-menu {
position: fixed;
top: 0;
right: -300px;
width: 280px;
height: 100vh;
background: #fff;
z-index: 9999;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
transition: right 0.3s ease;
}
.hamburger-menu.active { right: 0; }
.hamburger-menu-header {
padding: 18px 20px;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}
.hamburger-menu-header h3 { margin: 0; font-size: 1.1em; font-weight: 600; }
.hamburger-close-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
color: #fff;
width: 32px; height: 32px;
border-radius: 8px;
cursor: pointer;
font-size: 1.2em;
transition: background 0.2s;
}
.hamburger-close-btn:hover { background: rgba(255, 255, 255, 0.3); }
.hamburger-menu-items { padding: 12px 0; }
.hamburger-menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
color: #475569;
text-decoration: none;
transition: all 0.2s;
}
.hamburger-menu-item:hover {
background: #f8fafc;
color: #3b82f6;
padding-left: 24px;
}
.hamburger-menu-item .icon { font-size: 1.2em; width: 28px; text-align: center; }
.hamburger-menu-divider { height: 1px; background: #e2e8f0; margin: 8px 20px; }
/* Toggle items în hamburger menu */
.hamburger-toggle-item {
justify-content: space-between;
}
.hamburger-toggle-item .hamburger-item-content {
display: flex;
align-items: center;
gap: 12px;
}
.hamburger-toggle-item .hamburger-item-text {
color: #9ca3af;
transition: color 0.2s;
}
.hamburger-toggle-item.active .hamburger-item-text {
color: #2563eb;
font-weight: 600;
}
.hamburger-toggle-item .lucide-icon {
color: #9ca3af;
transition: color 0.2s;
}
.hamburger-toggle-item.active .lucide-icon {
color: #2563eb;
}
/* Toggle switch */
.hamburger-toggle-switch {
width: 40px;
height: 22px;
background: #d1d5db;
border-radius: 11px;
position: relative;
transition: background 0.2s;
flex-shrink: 0;
}
.hamburger-toggle-item.active .hamburger-toggle-switch {
background: #3b82f6;
}
.hamburger-toggle-knob {
width: 18px;
height: 18px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
transition: left 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.hamburger-toggle-item.active .hamburger-toggle-knob {
left: 20px;
}
/* ============================================
MOD FULLSCREEN PENTRU SECȚIUNI
============================================ */
.sectiune-fullscreen {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 2000 !important;
margin: 0 !important;
border-radius: 0 !important;
background: #fff !important;
display: flex !important;
flex-direction: column !important;
}
.sectiune-fullscreen .dropdown-header,
.sectiune-fullscreen .prezenta-dropdown-header {
flex-shrink: 0 !important;
}
.sectiune-fullscreen .dropdown-body,
.sectiune-fullscreen .prezenta-dropdown-body {
display: block !important;
flex: 1 !important;
overflow-y: auto !important;
max-height: none !important;
}
/* Rotește săgeata în fullscreen */
.sectiune-fullscreen .arrow {
transform: rotate(180deg);
}
/* Dropdown Prezență - elegant */
.prezenta-dropdown {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
margin-bottom: 12px;
overflow: hidden;
}
.prezenta-dropdown-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: #fff;
cursor: pointer;
transition: all 0.2s;
}
.prezenta-dropdown-header:hover { opacity: 0.95; }
.prezenta-dropdown-header .left {
display: flex;
align-items: center;
gap: 12px;
}
.prezenta-dropdown-header .icon { font-size: 1.4em; }
.prezenta-dropdown-header .title { font-weight: 600; font-size: 1em; }
.prezenta-dropdown-header .title .title-grupa { font-weight: 500; opacity: 0.9; }
.prezenta-dropdown-header .date { font-size: 0.85em; opacity: 0.9; margin-left: 8px; }
.prezenta-dropdown-header .right {
display: flex;
align-items: center;
gap: 14px;
}
.prezenta-dropdown-header .contor {
background: rgba(255, 255, 255, 0.2);
padding: 5px 14px;
border-radius: 20px;
font-size: 0.9em;
font-weight: 500;
}
.prezenta-dropdown-header .arrow {
font-size: 0.9em;
transition: transform 0.3s;
}
.prezenta-dropdown-header .arrow.rotated { transform: rotate(180deg); }
/* Conținut dropdown */
.prezenta-dropdown-body {
display: none;
background: #fafbfc;
max-height: 50vh;
overflow-y: auto;
}
.prezenta-dropdown-body.active { display: block; }
/* Tabel prezență - modern */
.tabel-prezenta-hibrid {
width: 100%;
border-collapse: collapse;
}
.tabel-prezenta-hibrid thead {
background: #f1f5f9;
position: sticky;
top: 0;
}
.tabel-prezenta-hibrid th {
padding: 12px 14px;
text-align: left;
font-weight: 600;
font-size: 0.85em;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tabel-prezenta-hibrid th.col-avatar { width: 60px; text-align: center; }
.tabel-prezenta-hibrid th.col-checkbox { width: 70px; text-align: center; }
.tabel-prezenta-hibrid tbody tr {
border-bottom: 1px solid #f1f5f9;
transition: background 0.2s;
}
.tabel-prezenta-hibrid tbody tr:hover { background: #f8fafc; }
.tabel-prezenta-hibrid tbody tr.prezent { background: #ecfdf5; }
.tabel-prezenta-hibrid tbody tr.absent { background: #fef2f2; }
.tabel-prezenta-hibrid td { padding: 10px 14px; vertical-align: middle; }
.tabel-prezenta-hibrid td.col-avatar { text-align: center; }
.tabel-prezenta-hibrid td.col-checkbox { text-align: center; }
/* Avatar mic - elegant */
.avatar-mic {
width: 38px; height: 38px;
border-radius: 10px;
object-fit: cover;
border: 2px solid #e2e8f0;
cursor: pointer;
transition: all 0.2s;
}
.avatar-mic:hover { transform: scale(1.05); }
.avatar-mic.prezent { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2); }
.avatar-mic.absent { border-color: #e2e8f0; opacity: 0.6; }
/* Nume cu bulină */
.nume-cu-status { display: flex; align-items: center; gap: 10px; }
.nume-cu-status .nume { font-weight: 500; color: #1e293b; font-size: 0.95em; }
.nume-cu-status .bulina {
width: 10px; height: 10px;
border-radius: 50%;
}
.nume-cu-status .bulina.prezent { background: #22c55e; }
.nume-cu-status .bulina.absent { background: #cbd5e1; }
/* Checkbox - modern */
.checkbox-prezenta {
width: 22px; height: 22px;
cursor: pointer;
accent-color: #3b82f6;
}
/* Acțiuni tabel */
.prezenta-actiuni {
display: flex;
gap: 12px;
padding: 14px 20px;
background: #fff;
border-top: 1px solid #f1f5f9;
justify-content: center;
}
.btn-prezenta-actiune {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 0.9em;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
}
.btn-salveaza-prezenta {
background: #3b82f6;
color: #fff;
}
.btn-salveaza-prezenta:hover { background: #2563eb; transform: translateY(-1px); }
.btn-printeaza-prezenta {
background: #f1f5f9;
color: #475569;
}
.btn-printeaza-prezenta:hover { background: #e2e8f0; }
/* ============================================
DROPDOWN-URI UNIFORME - Imagini & Povești
(similar cu Prezența)
============================================ */
/* Container dropdown generic */
.imagini-dropdown,
.documente-dropdown,
.povesti-dropdown,
.ateliere-dropdown,
.meniu-dropdown,
.mesaje-dropdown,
.anunturi-dropdown {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
margin-bottom: 12px;
overflow: hidden;
}
/* Header dropdown generic */
.dropdown-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
color: #fff;
cursor: pointer;
transition: all 0.2s;
}
.dropdown-header:hover { opacity: 0.95; }
/* Culori diferite pentru fiecare dropdown */
.dropdown-header-imagini {
background: linear-gradient(135deg, #10b981 0%, #059669 100%); /* Verde */
}
.dropdown-header-documente {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); /* Albastru */
}
.dropdown-header-povesti {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); /* Mov */
}
.dropdown-header-ateliere {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Mov-Albastru */
}
.dropdown-header-meniu {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); /* Portocaliu */
}
.dropdown-header-mesaje {
background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); /* Roz */
}
.dropdown-header-anunturi {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); /* Roșu */
}
.dropdown-header .left {
display: flex;
align-items: center;
gap: 12px;
}
.dropdown-header .title { font-weight: 600; font-size: 1em; }
.dropdown-header .subtitle { font-size: 0.8em; opacity: 0.85; }
.dropdown-header .right {
display: flex;
align-items: center;
gap: 14px;
}
.dropdown-header .contor {
background: rgba(255, 255, 255, 0.2);
padding: 5px 14px;
border-radius: 20px;
font-size: 0.9em;
font-weight: 500;
}
.dropdown-header .arrow {
transition: transform 0.3s;
}
.dropdown-header .arrow.rotated { transform: rotate(180deg); }
/* Body dropdown */
.dropdown-body {
display: none;
background: #fafbfc;
padding: 16px;
max-height: 40vh;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.dropdown-body::-webkit-scrollbar { display: none; }
.dropdown-body.active { display: block; }
/* Acțiuni dropdown */
.dropdown-actions {
display: flex;
gap: 12px;
padding: 12px 0 0 0;
justify-content: center;
border-top: 1px solid #f1f5f9;
margin-top: 12px;
}
.btn-dropdown-actiune {
padding: 8px 16px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 0.85em;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.2s;
text-decoration: none;
}
.btn-vezi-toate {
background: #f1f5f9;
color: #475569;
}
.btn-vezi-toate:hover {
background: #e2e8f0;
color: #1e293b;
}
/* Stiluri pentru grila de imagini în dropdown profesor */
.dropdown-body .image_grid_container,
.dropdown-body #image_grid_container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 0;
margin: 0;
width: 100%;
}
.dropdown-body .image-grid-item {
width: 100%;
height: 0;
padding-bottom: 100%; /* Păstrează aspect ratio 1:1 */
position: relative;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
margin: 0;
border: none;
flex: none;
max-width: none;
}
.dropdown-body .image-grid-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
transition: transform 0.2s;
}
.dropdown-body .image-grid-item img:hover {
transform: scale(1.05);
}
/* Responsive pentru ecrane mici */
@media (max-width: 400px) {
.dropdown-body .image_grid_container,
.dropdown-body #image_grid_container {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
}
.dropdown-body .image_grid_container .image-grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
transition: transform 0.2s;
}
.dropdown-body .image_grid_container .image-grid-item img:hover {
transform: scale(1.05);
}
.dropdown-body .povesti_grid_container {
display: flex;
flex-direction: column;
gap: 8px;
}
.dropdown-body .povesti_grid_container .povesti-item,
.dropdown-body .povesti_grid_container a {
padding: 10px 12px;
background: #fff;
border-radius: 8px;
border-left: 3px solid #8b5cf6;
text-decoration: none;
color: #1e293b;
font-size: 0.9em;
display: block;
transition: all 0.2s;
}
.dropdown-body .povesti_grid_container .povesti-item:hover,
.dropdown-body .povesti_grid_container a:hover {
background: #f8fafc;
transform: translateX(4px);
}
.dropdown-body .povesti_grid_container .povesti-title {
font-size: 0.9em;
color: #1e293b;
font-weight: 500;
}
/* Footer - minimal */
.profesor-footer {
text-align: center;
padding: 12px;
color: #94a3b8;
font-size: 0.8em;
margin-top: auto;
}
/* ============================================
RESPONSIVE - TELEFON
============================================ */
@media (max-width: 768px) {
.profesor-layout {
padding: 8px;
}
.profesor-header {
padding: 10px 14px;
margin-bottom: 10px;
border-radius: 10px;
}
.profesor-header-title { font-size: 1em; }
.profesor-carduri {
grid-template-columns: 1fr;
gap: 10px;
}
.prezenta-dropdown {
margin-bottom: 10px;
border-radius: 10px;
}
.prezenta-dropdown-header {
padding: 12px 14px;
flex-wrap: wrap;
gap: 8px;
}
.prezenta-dropdown-header .left { flex: 1; }
.prezenta-dropdown-header .date {
display: block;
margin-left: 0;
margin-top: 2px;
}
.prezenta-dropdown-body { max-height: 45vh; }
/* Dropdown-uri Imagini, Documente, Povești, Ateliere, Meniu, Mesaje - responsive */
.imagini-dropdown,
.documente-dropdown,
.povesti-dropdown,
.ateliere-dropdown,
.meniu-dropdown,
.mesaje-dropdown {
margin-bottom: 10px;
border-radius: 10px;
}
.dropdown-header {
padding: 12px 14px;
flex-wrap: wrap;
gap: 8px;
}
.dropdown-header .left { flex: 1; }
.dropdown-header .subtitle {
display: block;
margin-top: 2px;
}
.dropdown-body { max-height: 35vh; padding: 12px; }
.dropdown-body .image_grid_container .image-grid-item {
width: 70px;
height: 70px;
}
.hamburger-menu {
width: 85%;
max-width: 300px;
right: -85%;
}
.tabel-prezenta-hibrid th,
.tabel-prezenta-hibrid td {
padding: 8px 10px;
font-size: 0.85em;
}
.avatar-mic {
width: 34px;
height: 34px;
}
.prezenta-actiuni {
flex-direction: column;
gap: 8px;
}
.btn-prezenta-actiune {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.profesor-layout { padding: 6px; }
.profesor-header {
padding: 8px 12px;
}
.profesor-header-title {
font-size: 0.95em;
gap: 6px;
}
.prezenta-dropdown-header { padding: 10px 12px; }
.prezenta-dropdown-header .icon { font-size: 1.2em; }
.prezenta-dropdown-header .title { font-size: 0.9em; }
.prezenta-dropdown-header .contor {
padding: 4px 10px;
font-size: 0.8em;
}
.dropdown-header { padding: 10px 12px; }
.dropdown-header .title { font-size: 0.9em; }
.dropdown-header .contor {
padding: 4px 10px;
font-size: 0.8em;
}
.dropdown-body .image_grid_container .image-grid-item {
width: 60px;
height: 60px;
}
.hamburger-menu { width: 90%; right: -90%; }
}
/* Print */
@media print {
.profesor-layout { background: #fff; padding: 0; }
.profesor-header, .hamburger-menu, .hamburger-menu-overlay,
.imagini-dropdown, .povesti-dropdown, .prezenta-actiuni, .profesor-footer { display: none !important; }
.prezenta-dropdown { box-shadow: none; border: 1px solid #333; }
.prezenta-dropdown-body { display: block !important; max-height: none; }
}
/* ============================================
DESIGN TID4K - VESEL PENTRU EDUCAȚIE
Paletă: Turcoaz, Coral, Verde Mentă, Lavandă
Iconuri: Lucide Style
============================================ */
/* Variabile culori vesele educație */
:root {
--edu-turcoaz: #06b6d4;
--edu-turcoaz-light: #e0f7fa;
--edu-coral: #f97316;
--edu-coral-light: #fff7ed;
--edu-verde: #10b981;
--edu-verde-light: #ecfdf5;
--edu-lavanda: #8b5cf6;
--edu-lavanda-light: #f5f3ff;
--edu-galben: #fbbf24;
--edu-galben-light: #fefce8;
--edu-roz: #ec4899;
--edu-roz-light: #fdf2f8;
--edu-bg: #f8fafc;
--edu-card: #ffffff;
--edu-text: #1e293b;
--edu-text-light: #64748b;
--edu-border: #e2e8f0;
--edu-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
--edu-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
--edu-radius: 16px;
--edu-radius-sm: 12px;
}
/* Body și fundal general */
body {
background: linear-gradient(135deg, var(--edu-turcoaz-light) 0%, var(--edu-lavanda-light) 50%, var(--edu-coral-light) 100%) !important;
background-attachment: fixed !important;
min-height: 100vh;
}
/* Header principal */
header {
background: linear-gradient(135deg, var(--edu-turcoaz) 0%, var(--edu-lavanda) 100%) !important;
border-radius: 0 0 24px 24px !important;
box-shadow: var(--edu-shadow-lg) !important;
padding: 16px 20px !important;
margin-bottom: 20px !important;
}
header h1, header .cancelarie-header, header .header-title {
color: var(--main-blue) !important;
text-shadow: 1px 1px 2px rgba(255,255,255,0.5) !important;
}
/* Container principal */
.container, main .container {
background: transparent !important;
padding: 0 12px !important;
max-width: 1400px !important;
margin: 0 auto !important;
}
/* ============================================
CARDURI PENTRU SECȚIUNI
============================================ */
/* Coloana Documente */
.column.documente {
background: var(--edu-card) !important;
border-radius: var(--edu-radius) !important;
box-shadow: var(--edu-shadow) !important;
padding: 0 !important;
overflow: hidden !important;
border: none !important;
border-top: 4px solid var(--edu-lavanda) !important;
}
.column.documente h2,
.column.documente > a:first-child {
background: linear-gradient(135deg, var(--edu-lavanda) 0%, #a78bfa 100%) !important;
color: #fff !important;
padding: 14px 18px !important;
margin: 0 !important;
font-size: 1em !important;
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.column.documente ul {
list-style: none !important;
padding: 8px !important;
margin: 0 !important;
background: transparent !important;
}
.column.documente li,
.column.documente .doc-item {
background: var(--edu-lavanda-light) !important;
border-radius: var(--edu-radius-sm) !important;
margin: 6px 0 !important;
padding: 0 !important;
border: none !important;
transition: all 0.2s ease !important;
}
.column.documente li:hover,
.column.documente .doc-item:hover {
background: #ede9fe !important;
transform: translateX(4px) !important;
}
.column.documente li a,
.column.documente .doc-item a {
color: var(--edu-text) !important;
padding: 12px 16px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
text-decoration: none !important;
font-weight: 500 !important;
font-size: 0.95em !important;
}
.column.documente li a:hover {
color: var(--edu-lavanda) !important;
}
/* Coloana Imagini */
.column_imagini {
background: var(--edu-card) !important;
border-radius: var(--edu-radius) !important;
box-shadow: var(--edu-shadow) !important;
padding: 0 !important;
overflow: hidden !important;
border: none !important;
border-top: 4px solid var(--edu-coral) !important;
}
.column_imagini h2 {
background: linear-gradient(135deg, var(--edu-coral) 0%, #fb923c 100%) !important;
color: #fff !important;
padding: 14px 18px !important;
margin: 0 !important;
font-size: 1em !important;
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.column_imagini h2 a {
color: #fff !important;
text-decoration: none !important;
}
.column_imagini .image_grid_container {
padding: 12px !important;
display: flex !important;
gap: 10px !important;
flex-wrap: wrap !important;
justify-content: center !important;
background: var(--edu-coral-light) !important;
}
/* Coloana Povești */
.column_povesti {
background: var(--edu-card) !important;
border-radius: var(--edu-radius) !important;
box-shadow: var(--edu-shadow) !important;
padding: 0 !important;
overflow: hidden !important;
border: none !important;
border-top: 4px solid var(--edu-verde) !important;
}
.column_povesti h2 {
background: linear-gradient(135deg, var(--edu-verde) 0%, #34d399 100%) !important;
color: #fff !important;
padding: 14px 18px !important;
margin: 0 !important;
font-size: 1em !important;
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.column_povesti h2 a {
color: #fff !important;
text-decoration: none !important;
}
.column_povesti .povesti_grid_container {
padding: 12px !important;
background: var(--edu-verde-light) !important;
}
/* ============================================
GRID ITEMS - IMAGINI, DOCUMENTE, POVEȘTI
============================================ */
.image-grid-item {
border-radius: var(--edu-radius-sm) !important;
overflow: hidden !important;
box-shadow: var(--edu-shadow) !important;
transition: all 0.3s ease !important;
background: #fff !important;
}
.image-grid-item:hover {
transform: translateY(-4px) scale(1.02) !important;
box-shadow: var(--edu-shadow-lg) !important;
}
.image-grid-item img {
border-radius: var(--edu-radius-sm) !important;
}
.povesti-item {
background: #fff !important;
border-radius: var(--edu-radius-sm) !important;
padding: 12px 14px !important;
margin: 8px 0 !important;
box-shadow: var(--edu-shadow) !important;
border-left: 4px solid var(--edu-verde) !important;
transition: all 0.2s ease !important;
}
.povesti-item:hover {
transform: translateX(4px) !important;
box-shadow: var(--edu-shadow-lg) !important;
}
.povesti-item .povesti-title {
color: var(--edu-text) !important;
font-weight: 600 !important;
}
.iframe-grid-item {
border-radius: var(--edu-radius-sm) !important;
overflow: hidden !important;
box-shadow: var(--edu-shadow) !important;
background: #fff !important;
}
/* ============================================
CHAT SECTION
============================================ */
.column.chat, #column_chat {
background: var(--edu-card) !important;
border-radius: var(--edu-radius) !important;
box-shadow: var(--edu-shadow) !important;
padding: 0 !important;
overflow: hidden !important;
border: none !important;
border-top: 4px solid var(--edu-turcoaz) !important;
}
.column.chat h2, #column_chat h2 {
background: linear-gradient(135deg, var(--edu-turcoaz) 0%, #22d3ee 100%) !important;
color: #fff !important;
padding: 14px 18px !important;
margin: 0 !important;
font-size: 1em !important;
font-weight: 600 !important;
}
.column.chat form, #column_chat form {
padding: 16px !important;
background: var(--edu-turcoaz-light) !important;
}
.column.chat textarea, #column_chat textarea,
#mesajInput {
border: 2px solid var(--edu-border) !important;
border-radius: var(--edu-radius-sm) !important;
padding: 12px 14px !important;
font-size: 0.95em !important;
transition: border-color 0.2s !important;
background: #fff !important;
}
.column.chat textarea:focus, #column_chat textarea:focus,
#mesajInput:focus {
border-color: var(--edu-turcoaz) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1) !important;
}
#trimiteti, .column.chat button[type="submit"] {
background: linear-gradient(135deg, var(--edu-turcoaz) 0%, var(--edu-verde) 100%) !important;
color: #fff !important;
border: none !important;
border-radius: var(--edu-radius-sm) !important;
padding: 12px 24px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.2s !important;
box-shadow: var(--edu-shadow) !important;
}
#trimiteti:hover {
transform: translateY(-2px) !important;
box-shadow: var(--edu-shadow-lg) !important;
}
#istoric_mesaje {
padding: 12px !important;
max-height: 300px !important;
overflow-y: auto !important;
}
/* ============================================
PREZENȚĂ DROPDOWN - VESEL
============================================ */
.prezenta-dropdown {
background: var(--edu-card) !important;
border-radius: var(--edu-radius) !important;
box-shadow: var(--edu-shadow) !important;
overflow: hidden !important;
border-top: 4px solid var(--edu-galben) !important;
}
.prezenta-dropdown-header {
background: linear-gradient(135deg, var(--edu-galben) 0%, #fcd34d 100%) !important;
color: var(--edu-text) !important;
padding: 14px 20px !important;
}
.prezenta-dropdown-header .title {
color: var(--edu-text) !important;
font-weight: 700 !important;
}
.prezenta-dropdown-header .contor {
background: rgba(255,255,255,0.5) !important;
color: var(--edu-text) !important;
}
.prezenta-dropdown-body {
background: var(--edu-galben-light) !important;
}
.tabel-prezenta-hibrid thead {
background: #fef3c7 !important;
}
.tabel-prezenta-hibrid th {
color: var(--edu-text) !important;
}
.btn-salveaza-prezenta {
background: linear-gradient(135deg, var(--edu-verde) 0%, #34d399 100%) !important;
}
.btn-printeaza-prezenta {
background: linear-gradient(135deg, var(--edu-lavanda) 0%, #a78bfa 100%) !important;
color: #fff !important;
}
/* ============================================
BUTOANE GENERALE
============================================ */
button, .btn, input[type="submit"] {
border-radius: var(--edu-radius-sm) !important;
font-weight: 500 !important;
transition: all 0.2s ease !important;
}
/* ============================================
SUPRAPUNERE (OVERLAY) - MODERN
============================================ */
.suprapunere {
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 100%) !important;
border-radius: 0 0 var(--edu-radius-sm) var(--edu-radius-sm) !important;
}
.suprapunere-icon {
background: rgba(255,255,255,0.95) !important;
color: var(--edu-text) !important;
border-radius: 8px !important;
padding: 8px !important;
transition: all 0.2s !important;
}
.suprapunere-icon:hover {
background: #fff !important;
transform: scale(1.1) !important;
}
.suprapunere-icon.descarca-icon:hover {
color: var(--edu-verde) !important;
}
.suprapunere-icon.sterge-icon:hover {
color: var(--edu-coral) !important;
}
/* ============================================
FOOTER
============================================ */
footer, .footer-container {
background: linear-gradient(135deg, var(--edu-turcoaz) 0%, var(--edu-lavanda) 100%) !important;
color: #fff !important;
border-radius: 24px 24px 0 0 !important;
padding: 16px !important;
margin-top: 20px !important;
text-align: center !important;
}
footer p {
margin: 0 !important;
opacity: 0.9 !important;
}
/* ============================================
BARA PREZENȚĂ (DIN HEADER)
============================================ */
.prezenta-bara, [class*="prezenta"] {
border-radius: var(--edu-radius-sm) !important;
}
/* ============================================
MODAL
============================================ */
.modal-content {
border-radius: var(--edu-radius) !important;
box-shadow: var(--edu-shadow-lg) !important;
}
/* ============================================
RESPONSIVE - MOBIL
============================================ */
@media (max-width: 768px) {
:root {
--edu-radius: 12px;
--edu-radius-sm: 8px;
}
body {
background: linear-gradient(180deg, var(--edu-turcoaz-light) 0%, var(--edu-lavanda-light) 100%) !important;
}
header {
border-radius: 0 0 16px 16px !important;
padding: 12px 16px !important;
}
.container, main .container {
padding: 0 8px !important;
}
.column.documente,
.column_imagini,
.column_povesti,
.column.chat,
#column_chat {
margin-bottom: 12px !important;
border-radius: var(--edu-radius) !important;
}
.column.documente h2,
.column_imagini h2,
.column_povesti h2,
.column.chat h2,
#column_chat h2 {
padding: 12px 14px !important;
font-size: 0.95em !important;
}
.image-grid-item {
width: 100px !important;
height: 100px !important;
}
footer, .footer-container {
border-radius: 16px 16px 0 0 !important;
padding: 12px !important;
}
}
@media (max-width: 480px) {
.column.documente li a,
.column.documente .doc-item a {
padding: 10px 12px !important;
font-size: 0.9em !important;
}
.image-grid-item {
width: 85px !important;
height: 85px !important;
}
.povesti-item {
padding: 10px 12px !important;
}
}
/* ============================================
ANIMAȚII SUBTILE
============================================ */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.column.documente,
.column_imagini,
.column_povesti,
.column.chat {
animation: fadeInUp 0.4s ease-out !important;
}
.column_imagini { animation-delay: 0.1s !important; }
.column_povesti { animation-delay: 0.2s !important; }
.column.chat { animation-delay: 0.3s !important; }
/* ============================================
ICONURI LUCIDE - STILIZARE
============================================ */
.lucide-icon {
display: inline-block;
vertical-align: middle;
margin-right: 8px;
flex-shrink: 0;
}
/* Iconuri în headere - albe */
.column_imagini h2 .lucide-icon,
.column_imagini h2 a .lucide-icon,
.column_povesti h2 .lucide-icon,
.column_povesti h2 a .lucide-icon,
.column.chat h2 .lucide-icon,
#column_chat h2 .lucide-icon,
.column_pdf_uri h2 .lucide-icon,
.column_pdf_uri h2 a .lucide-icon {
stroke: #fff !important;
}
/* Iconuri în lista documente - colorate */
.column.documente .lucide-icon {
stroke: var(--edu-lavanda) !important;
transition: transform 0.2s ease !important;
}
/* Hover pe iconuri în lista documente */
.column.documente li:hover .lucide-icon {
transform: scale(1.15) !important;
}
/* Iconuri în butoane */
button .lucide-icon,
.btn .lucide-icon {
margin-right: 6px;
}
/* Link-uri cu iconuri - aliniere */
a .lucide-icon {
vertical-align: -3px;
}
/* ============================================
MESAJE DROPDOWN - DESIGN MODERN
============================================ */
.mesaje-container-modern {
padding: 15px;
}
/* Container input mesaj - layout orizontal */
.mesaj-input-container {
display: flex;
gap: 10px;
align-items: flex-end;
margin-bottom: 15px;
}
.mesaj-input-wrapper {
flex: 1;
position: relative;
display: flex;
align-items: flex-end;
}
.mesaj-input-wrapper textarea {
width: 100%;
min-height: 60px;
max-height: 120px;
padding: 12px 45px 12px 15px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 15px;
font-family: inherit;
resize: none;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
line-height: 1.4;
}
.mesaj-input-wrapper textarea:focus {
outline: none;
border-color: #ec4899;
box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}
.mesaj-input-wrapper textarea::placeholder {
color: #94a3b8;
}
/* Butoane icon */
.btn-icon {
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
flex-shrink: 0;
}
.btn-icon svg {
pointer-events: none;
}
/* Buton + pentru destinatari */
.btn-plus {
position: absolute;
right: 6px;
bottom: 6px;
width: 32px;
height: 32px;
background: #f1f5f9;
color: #64748b;
}
.btn-plus:hover {
background: #e2e8f0;
color: #475569;
}
.btn-plus:active {
transform: scale(0.95);
}
/* Buton trimite */
.btn-send {
background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
color: #fff;
box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}
.btn-send:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4);
}
.btn-send:active {
transform: translateY(0) scale(0.95);
}
/* Chips destinatari selectati */
.destinatari-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
min-height: 0;
}
.destinatari-chips:empty {
display: none;
}
.chip-destinatar {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px 6px 12px;
background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
color: #fff;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
animation: chipIn 0.2s ease-out;
}
@keyframes chipIn {
from { transform: scale(0.8); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.chip-destinatar .chip-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
object-fit: cover;
margin-left: -4px;
}
.chip-destinatar .chip-remove {
background: rgba(255,255,255,0.2);
border: none;
color: #fff;
width: 18px;
height: 18px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
transition: background 0.2s;
}
.chip-destinatar .chip-remove:hover {
background: rgba(255,255,255,0.4);
}
/* Zona afișare destinatari selectați cu iconuri - ca în original */
.destinatari-display-modern {
margin-bottom: 10px;
min-height: 0;
}
.destinatari-display-modern:empty {
display: none;
}
.destinatari-display-row {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.15) 100%);
border: 1px solid rgba(245, 158, 11, 0.3);
border-radius: 8px;
font-size: 13px;
color: #92400e;
}
.destinatari-display-row .dest-icons {
display: flex;
align-items: center;
gap: 6px;
}
.destinatari-display-row .dest-text {
font-weight: 500;
}
/* Fereastra selectie destinatari */
.fereastra-selectie-moderna {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
margin-bottom: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
animation: slideDown 0.2s ease-out;
}
@keyframes slideDown {
from { transform: translateY(-10px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.fereastra-selectie-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
font-weight: 600;
font-size: 14px;
color: #475569;
}
.btn-close-selectie {
background: none;
border: none;
color: #94a3b8;
cursor: pointer;
padding: 4px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.btn-close-selectie:hover {
background: #e2e8f0;
color: #475569;
}
/* Lista destinatari */
.lista-destinatari {
max-height: 200px;
overflow-y: auto;
}
.destinatar-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 15px;
cursor: pointer;
transition: background 0.15s;
border-bottom: 1px solid #f1f5f9;
}
.destinatar-item:last-child {
border-bottom: none;
}
.destinatar-item:hover {
background: #f8fafc;
}
.destinatar-item.selected {
background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(219, 39, 119, 0.1) 100%);
}
.destinatar-item .avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
background: #e2e8f0;
flex-shrink: 0;
}
.destinatar-item .info {
flex: 1;
min-width: 0;
}
.destinatar-item .nume {
font-weight: 500;
font-size: 14px;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.destinatar-item .status-badge {
font-size: 11px;
color: #64748b;
display: flex;
align-items: center;
gap: 4px;
}
.destinatar-item .online-dot {
width: 8px;
height: 8px;
background: #22c55e;
border-radius: 50%;
animation: pulse-online 2s infinite;
}
@keyframes pulse-online {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.destinatar-item .checkbox-indicator {
width: 22px;
height: 22px;
border: 2px solid #cbd5e1;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
flex-shrink: 0;
}
.destinatar-item.selected .checkbox-indicator {
background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
border-color: transparent;
}
.destinatar-item .checkbox-indicator svg {
display: none;
color: #fff;
}
.destinatar-item.selected .checkbox-indicator svg {
display: block;
}
/* Istoric mesaje - compact pentru mobil */
.istoric-mesaje-modern {
max-height: 400px;
overflow-y: auto;
padding-top: 5px;
border-top: 1px solid #e2e8f0;
}
.mesaj-item-modern {
padding: 4px 0;
margin-bottom: 0;
background: transparent;
border-bottom: 1px solid #f1f5f9;
}
.mesaj-item-modern:last-child {
border-bottom: none;
}
.mesaj-item-modern p {
margin: 0;
padding: 0;
font-size: 13px;
line-height: 1.3;
}
/* Responsive mobil - MESAJE */
@media screen and (max-width: 480px) {
.mesaje-container-modern {
padding: 10px;
}
/* Layout fix pentru input + buton Send */
.mesaj-input-container {
display: flex;
gap: 8px;
align-items: flex-end;
flex-wrap: nowrap;
}
.mesaj-input-wrapper {
flex: 1;
min-width: 0; /* Permite compresie */
}
.mesaj-input-wrapper textarea {
min-height: 45px;
max-height: 80px;
padding: 10px 36px 10px 10px;
font-size: 14px;
width: 100%;
box-sizing: border-box;
}
/* Buton Send - mereu vizibil */
.btn-icon.btn-send {
width: 44px;
height: 44px;
flex-shrink: 0;
}
.btn-plus {
width: 26px;
height: 26px;
right: 4px;
bottom: 4px;
}
.btn-plus svg {
width: 16px;
height: 16px;
}
/* Zona destinatari - compactă */
.destinatari-display-modern {
margin-bottom: 8px;
}
.destinatari-display-row {
padding: 6px 10px;
font-size: 12px;
}
/* Fereastra selecție - poziționare corectă */
.fereastra-selectie-moderna {
margin-bottom: 10px;
max-height: 180px;
}
.lista-destinatari {
max-height: 140px;
}
.destinatar-item {
padding: 10px 12px;
gap: 10px;
}
.destinatar-item .avatar {
width: 30px;
height: 30px;
}
.destinatar-item .nume {
font-size: 13px;
}
.checkbox-indicator {
width: 20px;
height: 20px;
}
/* Mesaje - mai compacte */
.mesaj-item-modern {
padding: 8px 10px;
}
.mesaj-item-modern .mesaj-header {
font-size: 11px;
margin-bottom: 3px;
}
.mesaj-item-modern .mesaj-continut {
font-size: 13px;
}
.istoric-mesaje-modern {
max-height: 300px;
}
}
/* ============================================
MODAL MESAJE PROFESOR - STILURI RESPONSIVE
============================================ */
/* Buton trimite mesaj în modal profesor */
.btn-trimite-mesaj {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
color: #fff;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}
.btn-trimite-mesaj:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4);
}
.btn-trimite-mesaj:active {
transform: translateY(0) scale(0.98);
}
.btn-trimite-mesaj svg {
flex-shrink: 0;
}
/* Text din buton - pentru a-l ascunde pe mobil */
.btn-trimite-mesaj .btn-text {
display: inline;
}
/* Modal mesaje profesor - responsive */
@media screen and (max-width: 600px) {
#mesajeProfesorModal .modal-content {
width: 95% !important;
max-width: none !important;
margin: 10px auto;
padding: 15px;
max-height: 90vh !important;
}
#mesajeProfesorModal h2 {
font-size: 1.1em;
margin-bottom: 10px !important;
}
#mesajeProfesorModal h2 svg {
width: 20px;
height: 20px;
}
/* Textarea mai compact */
#mesajInputProfesor {
min-height: 50px !important;
font-size: 14px !important;
padding: 10px 35px 10px 10px !important;
}
/* Buton trimite - doar icon pe mobil */
.btn-trimite-mesaj {
width: 48px !important;
height: 48px !important;
padding: 0 !important;
border-radius: 50% !important;
min-width: unset !important;
}
.btn-trimite-mesaj .btn-text {
display: none !important;
}
.btn-trimite-mesaj svg {
width: 22px;
height: 22px;
}
/* Layout formular - input + buton pe aceeași linie */
.formular-mesaj-profesor {
display: flex;
flex-direction: column;
gap: 8px;
}
.formular-mesaj-profesor .input-wrapper-profesor {
flex: 1;
}
/* Lista destinatari selectați - mai compactă */
#destinatariSelectatiProfesor {
gap: 4px !important;
margin-bottom: 6px !important;
}
#destinatariSelectatiProfesor .chip-destinatar,
#destinatariSelectatiProfesor span[style*="background"] {
font-size: 11px !important;
padding: 4px 8px !important;
}
/* Istoric mesaje - mai mult spațiu */
#istoric_mesaje_profesor {
max-height: 250px !important;
}
#istoric_mesaje_profesor .mesaj-item {
padding: 8px 10px;
font-size: 13px;
}
/* Fereastra selecție destinatari */
#fereastraSelectieProfesor {
max-height: 120px !important;
}
}
/* ============================================
SISTEM NOTIFICĂRI - BUTON CLOPOȚEL ȘI MODAL
============================================ */
/* Buton clopoțel cu badge */
.btn-notificari {
position: relative;
background: transparent;
border: none;
cursor: pointer;
padding: 8px;
border-radius: 50%;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.btn-notificari:hover {
background-color: rgba(236, 72, 153, 0.1);
transform: scale(1.05);
}
.btn-notificari:active {
transform: scale(0.95);
}
.btn-notificari svg {
width: 24px;
height: 24px;
stroke: #64748b;
transition: stroke 0.2s;
}
.btn-notificari:hover svg {
stroke: #ec4899;
}
.btn-notificari.are-notificari svg {
stroke: #ec4899;
animation: bell-ring 0.5s ease-in-out;
}
@keyframes bell-ring {
0%, 100% { transform: rotate(0); }
20% { transform: rotate(15deg); }
40% { transform: rotate(-15deg); }
60% { transform: rotate(10deg); }
80% { transform: rotate(-10deg); }
}
/* Animație pentru notificare nouă primită */
.notificare-noua-animatie {
animation: pulse-notificare 0.5s ease-in-out 3;
}
.notificare-noua-animatie svg {
animation: bell-shake 0.5s ease-in-out 3;
}
@keyframes pulse-notificare {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.7);
}
50% {
transform: scale(1.15);
box-shadow: 0 0 0 10px rgba(236, 72, 153, 0);
}
}
@keyframes bell-shake {
0%, 100% { transform: rotate(0); }
10% { transform: rotate(20deg); }
20% { transform: rotate(-20deg); }
30% { transform: rotate(15deg); }
40% { transform: rotate(-15deg); }
50% { transform: rotate(10deg); }
60% { transform: rotate(-10deg); }
70% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
90% { transform: rotate(2deg); }
}
/* Badge număr notificări */
.badge-notificari {
position: absolute;
top: 2px;
right: 2px;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
font-size: 10px;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
animation: badge-pulse 2s infinite;
}
@keyframes badge-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Modal Notificări */
.modal-notificari {
display: none;
position: fixed;
z-index: 10001;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-notificari-content {
background-color: #ffffff;
margin: 5% auto;
border-radius: 16px;
width: 90%;
max-width: 420px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-notificari-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
color: white;
}
.modal-notificari-header h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.modal-notificari-header h3 svg {
width: 22px;
height: 22px;
}
.modal-notificari-close {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.modal-notificari-close:hover {
background: rgba(255, 255, 255, 0.3);
}
.modal-notificari-body {
max-height: 400px;
overflow-y: auto;
}
.modal-notificari-body::-webkit-scrollbar {
width: 6px;
}
.modal-notificari-body::-webkit-scrollbar-track {
background: #f1f5f9;
}
.modal-notificari-body::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
/* Lista goală */
.notificari-empty {
padding: 40px 20px;
text-align: center;
color: #94a3b8;
}
.notificari-empty svg {
width: 48px;
height: 48px;
stroke: #cbd5e1;
margin-bottom: 12px;
}
.notificari-empty p {
margin: 0;
font-size: 0.95rem;
}
/* Item notificare */
.notificare-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid #f1f5f9;
cursor: pointer;
transition: background-color 0.15s;
}
.notificare-item:hover {
background-color: #f8fafc;
}
.notificare-item:last-child {
border-bottom: none;
}
/* Icon notificare cu culori per tip */
.notificare-icon {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.notificare-icon svg {
width: 22px;
height: 22px;
}
.notificare-icon.prezenta,
.notificare-icon.prezenta_qr {
background: #dcfce7;
color: #16a34a;
}
.notificare-icon.mesaj_nou {
background: #dbeafe;
color: #2563eb;
}
.notificare-icon.atelier_nou,
.notificare-icon.atelier_comentariu {
background: #fef3c7;
color: #d97706;
}
.notificare-icon.poveste_noua {
background: #f3e8ff;
color: #9333ea;
}
.notificare-icon.document_nou {
background: #e0f2fe;
color: #0284c7;
}
.notificare-icon.imagine_noua {
background: #fce7f3;
color: #db2777;
}
.notificare-icon.anunt_nou {
background: #fee2e2;
color: #dc2626;
}
/* Conținut notificare */
.notificare-continut {
flex: 1;
min-width: 0;
}
.notificare-titlu {
font-weight: 600;
color: #1e293b;
font-size: 0.9rem;
margin-bottom: 3px;
line-height: 1.3;
}
.notificare-mesaj {
font-size: 0.85rem;
color: #64748b;
margin-bottom: 4px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.notificare-timp {
font-size: 0.75rem;
color: #94a3b8;
}
/* Footer modal */
.modal-notificari-footer {
padding: 12px 20px;
border-top: 1px solid #f1f5f9;
text-align: center;
background: #f8fafc;
}
.btn-citeste-toate {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: transparent;
color: #64748b;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.btn-citeste-toate:hover {
background: #f1f5f9;
color: #475569;
border-color: #cbd5e1;
}
.btn-citeste-toate svg {
width: 18px;
height: 18px;
}
/* Responsive */
@media (max-width: 480px) {
.modal-notificari-content {
margin: 0;
width: 100%;
max-width: 100%;
height: 100%;
border-radius: 0;
}
.modal-notificari-body {
max-height: calc(100vh - 140px);
}
.notificare-item {
padding: 12px 16px;
}
.notificare-icon {
width: 38px;
height: 38px;
}
}
/* ===============================================
Suprapunere pentru imagini și documente în grid
(Profesori - interfața simplificată)
=============================================== */
/* Position relative pentru containere */
.image-grid-item,
.document-grid-item {
position: relative !important;
}
/* Suprapunere pentru imagini și documente în grid */
.image-grid-item > .suprapunere,
.document-grid-item > .suprapunere {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
z-index: 30;
gap: 10px;
}
/* Desktop: hover pentru afișare suprapunere */
.image-grid-item:hover > .suprapunere,
.document-grid-item:hover > .suprapunere {
display: flex !important;
}
/* Mobil: suprapunere vizibilă permanent cu iconuri compacte */
@media (max-width: 768px) {
.image-grid-item > .suprapunere,
.document-grid-item > .suprapunere {
display: flex !important;
position: absolute;
bottom: 0;
top: auto;
height: auto;
padding: 12px;
background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.85) 100%);
border-radius: 0 0 10px 10px;
}
.image-grid-item > .suprapunere .suprapunere-icon,
.document-grid-item > .suprapunere .suprapunere-icon {
width: 42px;
height: 42px;
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 10px rgba(0,0,0,0.5), 0 0 0 3px rgba(255,255,255,0.3);
}
.image-grid-item > .suprapunere .suprapunere-icon svg,
.document-grid-item > .suprapunere .suprapunere-icon svg {
width: 20px;
height: 20px;
color: #1f2937;
}
}
/* Stil pentru document-grid-item */
.document-grid-item {
flex: 1;
margin: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
overflow: visible;
padding: 10px;
box-shadow: 0 4px 6px rgba(138, 43, 226, 0.1);
transition: box-shadow 0.3s;
border-radius: 10px;
}
.document-grid-item img {
width: 100%;
height: auto;
cursor: pointer;
transition: transform 0.3s;
}
.document-grid-item:hover img {
transform: scale(1.02);
}