* { box-sizing: border-box; } body { font-family: Arial, sans-serif; font-size: 100%; color: #000000; background-color: #FFFFFF; } h1 { font-family: Garamond, serif; font-size: 2.5rem; } h2 { font-family: Garamond, serif; font-size: 1.875rem; } h3 { font-family: Garamond, serif; font-size: 1.3rem; } table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #004080; } tr:nth-child(odd) { background-color: rgba(120, 120, 170, 0.4); } /* Logo: data/versiune; titlu; subtitlu */ .logo1p { margin: 5px 10px 0px 15px; font-size: 0.8rem; line-height: 10px; text-align: right; color: #90909F; } .logo2p { margin: -10px 10px 0px 15px; font-family: Arial; font-size: 3rem; line-height: 50px; text-align: left; color: #303050; } .logo3p { margin: -20px 10px 0px 100px; font-size: 2.5rem; line-height: 35px; text-align: left; color: #90909F; } /* Bara meniu orizontal: setari fundal */ .menu_bar { display: flex; flex-direction: row; align-items: center; color: #90909F; background-color: #303050; /* ignorata */ background: linear-gradient(to left, #00000F, #505070); height: 50px; position: sticky; top: 0; padding: 0; } /* Bara meniu orizontal: Container Buton Meniu */ .menu_ctn { display: none; height: 100%; width: 60px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; position: relative; } /* Bara meniu orizontal: Buton Meniu */ .menu_btn, .menu_btn::before, .menu_btn::after { display: block; background-color: #90909F; position: absolute; height: 4px; width: 30px; border-radius: 2px; transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1); } .menu_btn::before { content: ''; margin-top: -8px; } .menu_btn::after { content: ''; margin-top: 8px; } #menu_tog { display: none; } #menu_tog:checked + .menu_ctn .menu_btn { background: transparent; } #menu_tog:checked + .menu_ctn .menu_btn::before { margin-top: 0; transform: rotate(45deg); } #menu_tog:checked + .menu_ctn .menu_btn::after { margin-top: 0; transform: rotate(-45deg); } /* Bara meniu orizontal: lista orizontala */ .menu_lst { display: flex; flex-direction: row; list-style-type: none; margin: 0; padding: 0; } /* Bara meniu orizontal: setari elemente lista li */ .menu_lst > li { margin: 0; overflow: hidden; } .menu_lst li:hover { background: #303040; } .menu_lst li.active { background-color: #6060A0; } /* Bara meniu orizontal: setari aliniat li */ .menu_lst li a { display: block; color: #F4F4FF; background: transparent; border: none; text-align: left; text-decoration: none; font-size: 1rem; padding: 14px; } .menu_lst li a:hover{ background-color: #404040;} .menu_lst li button { display: block; color: #F4F4FF; background: transparent; /* border: none; */ text-align: left; text-decoration: none; font-size: 1rem; /* padding: 5px 5px; */ } .menu_lst li button:hover{ background-color: #404040; } .menu_lst li button:hover .tooltiptext { visibility: visible; } /* ToolTips */ .tooltiptext { visibility: hidden; width: 130px; background-color: black; color: #fff; text-align: center; border-radius: 3px; padding: 5px 0; position: absolute; z-index: 1; top: -15px; } /* Element principal tip 1 */ .elem_top { background: url("images/header.png") center; background-size: cover; padding: 0rem 2rem; padding-bottom: 10rem; display: grid; align-items: center; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .elem_top > * { color: white; } .elem_top > h1 { font-size: 3rem; padding-bottom: 0.5rem; background-color: rgba(0,0,0,0.5); color: #F0F0FF; } /* Element principal tip 2 */ .elem_tos { padding: 0rem; margin: 0rem; } .elem_tos > figure { height: 340px; overflow: hidden; margin:0rem; } /* Element lista 2*/ .elem_lst { padding: 0.2rem; margin 0.2rem; } .elem_lst > ul { list-style-type: none; display: list-item; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); padding: 0.2rem; } .elem_lst > ul > li { border: 0px solid #90909F; border-bottom: 1px solid #90909F; } .elem_lst > ul > li > figure { height: 200px; overflow: hidden; margin:0.1rem; } .elem_lst > ul > li > figure > img { width: 100%; } .elem_lst > ul > li > figure > figcaption { position: absolute; bottom: 0; background-color: rgba(0,0,0,0.7); width: 100%; } .elem_lst > ul > li > figure > figcaption > h3 { color: white; padding: .75rem; font-size: 1.25rem; } .elem_lst > ul > li > p { font-size: 1rem; line-height: 1.1rem; padding: 0.2rem 0.2rem; /* color: #90909F; */ } .elem_lst > ul > li > p > a { font-size: 0.8rem; line-height: 1; text-decoration: none; text-align: center; padding: 0.5rem; color: #FFFFFF; background-color: #40404F; border-radius: .25rem; display: inline-block; } .mono { font-family: monospace; margin-left: 20px; } .par1 { margin-left: 20px; } .maxp { max-width: 100%; } .footer { background-color: #40404F; color: white; padding: .25rem; text-align: right; font-size: .5rem; } @media (max-width: 800px) { .menu_ctn { display: flex; } #menu_tog ~ .menu_lst li { height: 0; margin: 0; padding: 0; border: 0; transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1); } #menu_tog:checked ~ .menu_lst li { border: 1px solid #30303F; height: 2.5rem; transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1); } .menu_lst { position: absolute; top: 0; margin-top: 50px; left: 0; flex-direction: column; width: 100%; justify-content: center; align-items: center; } .menu_lst > li { display: flex; justify-content: left; margin: 0; padding: 0.5rem 0; width: 100%; color: white; background-color: #10102F; } } .darkmode { @media (prefers-color-scheme: light) { color: #FFFFFF; background-color: #000000; } @media (prefers-color-scheme: dark) { color: #000000; background-color: #FFFFFF; } } @media (prefers-color-scheme: light) { body {color: #000000; background-color: #FFFFFF;} table, td, th {color: #000000} } @media (prefers-color-scheme: dark) { body {color: #FFFFFF; background-color: #000000;} table, td, th {color: #FFFFFF} }
v24.01.21; Ian.2024
Cam410
Ajutor

Cam410


alxcor@yahoo.com