html * {
cursor: url(http://topfm.lt/arrowheadsz.svg) 12 12, auto;
}
* {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
*::selection {
background-color: unset;
}
/* Style the body */
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #000;
margin: auto;
max-width: 1920px;
}
img.kosmonautai {
margin-left: -200px;
margin-top: 40px;
float: left;
position: absolute;
}
.header {
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: rgba(133, 0, 0, 0.3);
color: white;
width: 100%;
}
.headerx {
padding: 40px;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: rgba(0, 0, 0, 0.4);
position: relative;
color: white;
width: 100%;
}
.headernaujienos {
padding: 40px;
margin-left: auto;
margin-right: auto;
background-color: rgba(0, 0, 0, 0.4);
position: relative;
color: white;
width: 100%;
}
.ilgisa {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
.headerx textarea {
width: 100%;
height: 240px;
padding: 20px 25px;
box-sizing: border-box;
border: 0px solid #ccc;
border-radius: 20px;
background-color: rgba(0,0,0,0.4);
color: #fff;
resize: none;
}
.headerx button {
margin-top: 10px;
width: 77%;
padding: 15px 25px;
box-sizing: border-box;
border: 0px solid #ccc;
border-radius: 10px;
background-color: rgba(0,0,0,0.6);
color: #fff;
}
.headerx button:hover {
margin-top: 10px;
width: 77%;
padding: 15px 25px;
box-sizing: border-box;
border: 0px solid #ccc;
border-radius: 10px;
background-color: rgba(0,0,0,0.8);
color: #fff;
}
/* Increase the font size of the heading */
.header h1 {
font-size: 40px;
}
/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.ilgis {
margin: auto;
max-width: 1300px;
}
/* Column container */
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
padding-right: 30px;
}
.chato {
max-width: 1200px;
margin: auto;
}
.chatas {
padding: 20px;
-ms-flex: 60%; /* IE10 */
background-color: rgba(133,0,0,0.2);
flex: 60%;
max-width: 800px;
max-height: 360px;
margin-right: 40px;
border-radius: 20px;
overflow: scroll;
/* Hides the scrollbar */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.rasyti {
padding: 30px;
-ms-flex: 30%; /* IE10 */
background-color: rgba(133,0,0,0.2);
flex: 30%;
max-width: 280px;
border-radius: 20px;
}
.zinute {
text-align: left;
height: 55px;
margin-top: 9px;
margin-bottom: 9px;
width: 100%;
display: inline-block;
}
.zinuter {
text-align: right;
height: 60px;
margin-top: 7px;
margin-bottom: 7px;
width: 100%;
display: inline-block;
}
.dainosn {
-ms-flex:32%; /* IE10 */
flex: 32%;
}
.kasgroja {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 350px;
margin-right: -120px;
margin-bottom: -5px;
padding: 0px;
}
img.parasyk {
max-width: 180px;
float: right;
position: relative;
right: 0;
margin-right: -75px;
margin-top: 45px;
}
img.dj{
float: left;
position: absolute;
}
.kasplayeris {
-ms-flex: 50%; /* IE10 */
flex: 50%;
padding-top: 63px;
padding-bottom: 80px;
}
.dainosp {
-ms-flex:32%; /* IE10 */
margin-left: -70px;
flex: 32%;
}
h3.sekite {
padding-left: 28px;
}
.dainosi {
-ms-flex: 42%; /* IE10 */
flex: 42%;
margin-left: -140px;
padding-left: 90px;
padding-right: 70px;
margin-top: auto;
width: 800px;
margin-bottom: auto;
text-align: center;
font-size: 18px;
}
.logo {
text-align: center;
}
.navigacija{
-ms-flex: 80%; /* IE10 */
flex: 80%;
}
/* Main column */
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
}
/* Styling for each news item */
.naujienos {
background-color: rgba(133,0,0,0.1);
border-radius: 10px;
flex: 0 0 calc(50% - 16px); /* Each item takes up 50% width minus margin */
box-sizing: border-box; /* Ensures padding and margin are included in width calculation */
padding: 20px;
margin: 8px;
color: #fff;
font-size: 14px;
transition: background-color 0.3s ease; /* Smooth transition on hover */
}
/* Hover effect for news items */
.naujienos:hover {
background-color: rgba(133,0,0,0.15);
}
/* Container for all news items */
.naujienosvisos {
display: flex; /* Flexbox layout */
flex-wrap: wrap; /* Allow items to wrap into new rows */
justify-content: flex-start; /* Align items to the left */
padding: 20px; /* Padding inside container */
background-color: rgba(0,0,0,0.2);
}
/* News container for the list of items */
#news-container {
display: flex; /* Use flex layout to arrange news items */
flex-wrap: wrap; /* Allow news items to wrap */
width: 100%; /* Ensure it takes full width */
opacity: 0; /* Initially hidden for fade-in effect */
transition: opacity 0.5s ease; /* Smooth fade-in effect */
}
/* Pagination container */
#pagination {
display: flex; /* Align pagination links horizontally */
justify-content: center; /* Center pagination items */
align-items: center;
gap: 10px; /* Add space between pagination items */
width: 100%; /* Make sure pagination takes full width */
margin-top: 20px; /* Optional spacing above pagination */
}
/* Pagination links */
#pagination a {
color: #cecece;
text-decoration: none;
font-size: 16px;
padding: 10px 15px;
border-radius: 5px;
transition: background-color 0.3s ease;
background-color: rgba(133,0,0,0.1);
}
#pagination a:hover {
background-color: rgba(133,0,0,0.2);
}
#pagination a.active {
background-color: rgba(133,0,0,0.3);
}
/* Responsiveness for smaller screens */
/* Responsiveness for smaller screens */
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.text {
color: #f2f2f2;
font-size: 14px;
max-width:500px;
text-align: center;
position: relative;
text-transform: uppercase;
border-radius: 10px;
padding: 20px;
color: #cecece;
padding-bottom: 30px;
}
.text h2{
color: #fff;
font-size: 35px;
margin-top: 10px;
margin-bottom: 5px;
}
.antraste {
text-align: center;
font-size: 20px;
background-color: rgba(133,0,0,0.2);
color: #fff;
padding: 20px 20px;
width: 100%;
border-radius: 0px 10px 0px 0px;
margin-top: 30px;
}
.tekstas {
padding: 20px 30px;
color: #333;
background-color: rgba(0,0,0,0.2);
border-radius: 0px 0px 0px 10px;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
/* Volume Control Overlay */
.volume-control-overlay {
display: none;
position: fixed;
justify-content: center;
align-items: center;
z-index: 10;
opacity: 0;
transition: opacity 0.4s ease;
}
.volume-control-overlay.open {
display: flex;
opacity: 1;
}
.voverlay-content {
background: #111;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
text-align: center;
width: 280px;
position: relative;
color: #fff;
}
.voverlay-content h3 {
margin-bottom: 30px;
color: #fff;
font-size: 22px;
font-weight: 600;
}
/* Horizontal Slider */
input[type="range"] {
width: 200px;
height: 10px; /* Increased height for better visibility */
background: #ddd;
border-radius: 5px;
-webkit-appearance: none;
appearance: none;
outline: none;
transition: background 0.3s ease;
margin: 0;
position: relative;
}
input[type="range"]:focus {
background: #ff7e5f;
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 10px;
background: #ddd;
border-radius: 5px;
position: relative;
}
/* Thumb styling */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #750000;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
transition: background 0.3s ease;
position: relative;
top: -7px; /* Center thumb vertically */
}
input[type="range"]::-webkit-slider-thumb:hover {
background: #550000;
}
#volumeValue {
color: #fff;
font-size: 16px;
font-weight: bold;
margin-top: 10px;
display: block;
}
/* Close button */
.close-btn {
font-size: 25px;
color: #fff;
position: absolute;
top: 10px;
right: 10px;
font-weight: bold;
transition: color 0.3s ease;
}
.close-btn:hover {
color: #fff;
}
.player {
max-width: 680px;
margin: auto;
padding-left: 20px;
max-height: 200px;
.cover {
width: 140px;
height: 140px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 3px 10px 0 #000;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.info {
padding-left: 5px;
margin-top: 20px;
text-align: center;
max-width: 235px;
overflow: hidden;
white-space: nowrap;
.title {
transition: left 5s ease-in-out;
font-size: 14px;
font-weight: 700;
position: relative;
color: #fff;
left: 0;
margin-bottom: 2px;
}
.title:hover {
left: -100%; /* Slide text to the left on hover */
}
.singer {
transition: left 5s ease-in-out;
position: relative;
left: 0;
font-size: 13px;
color: #999;
}
.singer:hover {
left: -100%; /* Slide text to the left on hover */
}
}
.btn-box {
margin-top: 15px;
display: flex;
i:first-child {
font-size: 38px;
color: #850000;
margin: 0 22px 0 20px;
cursor: url(http://topfm.lt/arrowheadsz.svg) 12 12, auto;
}
i {
font-size: 38px;
color: #850000;
margin: 0 22px;
cursor: url(http://topfm.lt/arrowheadsz.svg) 12 12, auto;
}
i.active {
color: #111;
background-color: unset;
}
}
.volume-box.active {
display: block;
background-color: unset;
}
.music-box {
margin-left: 40px;
.play,
.pause {
position: absolute;
box-shadow: 0 3px 10px 0 #000;
width: 140px;
height: 140px;
border-radius: 50%;
background-color: #111;
cursor: url(http://topfm.lt/arrowheadsz.svg) 12 12, auto;
transition: all 0.4s;
i {
font-size: 66px;
color: #850000;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-48%, -50%);
}
}
.pause {
i {
font-size: 66px;
transform: translate(-50%, -50%);
}
}
}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
.visuallyhidden {
position: absolute;
z-index: -1;
right: 0;
opacity: 0;
}
h1 {
color: white;
text-align: center;
margin-top: 1em;
}
.container {
overflow: hidden;
padding: 20px;
margin-top: 2em;
background: rgba(0,0,0,.1)
}
.card-carousel {
--card-width: 80%;
--card-max-width: 280px;
--card-height: 350px;
--carousel-min-width: 600px;
z-index: 1;
position: relative;
margin: 0 auto;
width: 100%;
height: var(--card-height);
min-width: var(--carousel-min-width);
transition: filter .3s ease;
}
.card-carousel.smooth-return {
transition: all .2s ease;
}
.card-carousel .card {
background-color: #111;
width: var(--card-width);
max-width: var(--card-max-width);
text-align: center;
padding: 1em;
min-width: 400px;
height: var(--card-height);
position: absolute;
margin: 0 auto;
color: rgba(255,255,255,.8);
transition: inherit;
-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
border-radius: 1em;
filter: brightness(.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.card.highlight {
filter: brightness(1)
}
.image-container {
width: 12em;
height: 12em;
position: relative;
background-size: cover;
margin-bottom: 2em;
border-radius: 100%;
padding: 1em;
-webkit-box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.5);
}
.image-container::after {
content: "";
background-color: #fff;
z-index: -2;
display: block;
width: 110%;
height: 110%;
border: solid 3px rgba(133,0,0,0.1);
border-radius: 100%;
position: absolute;
top: calc(-5% - 3px);
left: calc(-5% - 3px);
}
/* width */
::-webkit-scrollbar {
width: 14px;
}
/* Track */
::-webkit-scrollbar-track {
background: #111;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #650000;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #85000;
}
.butonai{
position: absolute;
left: 0px;
top: 20%;
}
.fa {
display: initial;
padding: 10px;
font-size: 24px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
opacity: 0.7;
}
.fab {
display: initial;
padding: 10px;
font-size: 24px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
opacity: 0.7;
}
.fab:hover {
opacity: 1;
}
.fa:hover {
opacity: 1;
}
.fa-facebook {
background-color: rgba(0,0,0,0.6);
color: white;
}
.fa-youtube {
background-color: rgba(0,0,0,0.6);
color: white;
}
.fa-discord {
background-color: rgba(0,0,0,0.6);
color: white;
}
.nuotraukyte {
padding-right: 10px;
}
.nuotraukyter {
padding-left: 10px;
}
.parase {
padding-top: 5px;
}
.foniukas {
float: left;
display: flex;
background-color: rgba(0,0,0,0.4);
padding: 12px 20px 5px 10px;
border-radius: 20px;
}
.foniukasz {
display: flex;
float: right;
background-color: rgba(0,0,0,0.4);
padding: 12px 10px 5px 20px;
border-radius: 20px;
}
.naujienos img {
border-radius: 20px;
width: 100%;
max-height: 200px;
margin-bottom: 10px;
border: 2px solid;
border-color: rgba(0,0,0,0.2);
}
.headernaujienos h2 {
text-align: center;
margin: 0px 0px 0px 5px;
padding: 0px;
float: left;
}
.headernaujienos h5 {
text-align: center;
margin: 5px 10px 8px 5px;
padding: 0px;
font-size: 12px;
font-weight: 100;
float: right;
}
.headernaujienos p {
margin: 10px 5px;
padding: 0px;
}
.overlay {
width: 90%;
max-width: 700px;
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 500;
background-color: #111;
text-align: center;
border-radius: 20px;
}
.overlaybig {
width: 100%;
max-width: 800px;
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 500;
background-color: #111;
text-align: left;
border-radius: 20px;
padding: 50px;
}
.overlaybig a{
text-decoration: none;
}
.overlay a{
text-decoration: none;
}
.overlay-content {
position: relative;
text-align: center;
}
.overlay-content i{
padding: 18px 0px 18px 18px;
color: #850000;
postion: absolute;
}
.input_field {
background-color: rgba(255,255,255,1);
margin: auto;
display: flex;
text-align: center;
width: 90%;
max-width: 300px;
margin-top: 15px;
margin-bottom: 15px;
max-height: 65px;
transition: max-height 0.5s;
overflow: hidden;
border-radius: 10px;
}
.input_field input {
width: 100%;
background-color: transparent;
border: 0;
outline: 0;
padding: 18px 15px;
color: #750000;
}
.button_field {
width: 90%;
max-width: 300px;
margin: auto;
display: flex;
}
.button_field button {
background-color:rgba(133,0,0,0.5);
color: #fff;
height: 45px;
border: 0;
outline: 0;
cursor: url(http://topfm.lt/arrowheadsz.svg) 12 12, auto;
transition: background 1s;
width: 100%;
margin: 20px 0px 30px 0px;
border-radius: 10px;
}
.warning {
margin-top: -20px;
color: #fff;
}
.overlay h1 {
margin: 10px;
padding-top: 40px;
padding-bottom: 20px;
}
.sticky {
position: sticky;
top: 0;
z-index: 500;
}
.topnav {
overflow: hidden;
background-color: rgba(0,0,0,0.8);
}
.topnav a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 18px 26px;
text-decoration: none;
font-size: 17px;
}
a.nieko {
display: block;
}
.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown .dropbta {
font-size: 17px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(0,0,0,0.7);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
font-size: 16px;
float: none;
color: #fff;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: rgba(133,0,0,0.5);
color: white;
}
.dropdown-content a:hover {
background-color: rgba(133,0,0,0.5);
color: #fff;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn {
padding: 7px 30px;
display: flex;
align-items: center;
min-width: 160px;
}
.dropbta {
padding: 1px 15px;
align-items: center;
min-width: 60px;
}
.dropbta:hover {
background: rgba(133,0,0,0.5);
}
.kontaktai {
background: rgba(133,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
max-height: 540px;
padding-top: 20px;
padding-bottom: 40px;
}
.slider-container {
width: 1400px;
overflow: hidden;
position: relative;
}
.team-slider {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
flex: 0 0 calc(25% - 20px); /* 4 slides visible at once, with space */
position: relative;
text-align: center;
overflow: hidden;
border-radius: 15px;
margin-right: 20px; /* Adds space between slides */
}
.slide:last-child {
margin-right: 0; /* Removes the space for the last slide */
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
.slide:hover img {
transform: scale(1.1);
}
.sinfo {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 15px 10px;
text-align: center;
transition: 0.3s;
}
.slide:hover .sinfo {
background: rgba(0, 0, 0, 0.9);
color: white;
}
h2 {
font-size: 18px;
margin-bottom: 5px;
}
p {
font-size: 14px;
opacity: 0.8;
}
.social-icons {
margin-top: 10px;
}
.social-icons i {
margin: 0 10px;
color: #fefefe;
font-size: 20px;
text-decoration: none;
transition: color 0.3s;
background-color: unset;
}
.social-icons i:hover {
color: #850000; /* Change to your preferred hover color */
background-color: unset;
}
.footer {
background: rgba(0,0,0,0.5);
color: #fff;
padding: 20px 20px;
text-align: center;
}
.footer .footer-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
max-width: 1400px;
margin: 0 auto;
}
.footer .footer-section {
flex: 1 1 calc(25% - 40px);
padding: 20px;
box-sizing: border-box;
text-align: left;
}
.footer .footer-section a {
color: #cecece;
text-decoration: none;
}
.footer .footer-section img {
width: 80%;
margin-top: 20px;
}
.footer .footer-section h3 {
font-size: 20px;
margin-bottom: 10px;
font-weight: bold;
}
.footer .footer-section p {
margin: 8px 0;
font-size: 14px;
}
.footer .footer-section .social-icons a {
color: #fff;
margin: 10px;
font-size: 20px;
transition: color 0.3s;
}
.footer .footer-section .social-icons a:hover {
color: #1e90ff;
}
.footer .footer-bottom {
margin-top: 20px;
font-size: 14px;
color: #aaa;
max-width: 380px;
margin-left: auto;
margin-right: auto;
}
.footer .footer-bottom a {
color: #1e90ff;
text-decoration: none;
}
.social-iconsz i {
padding: 14px 8px;
color: #111;
background-color: #fff;
font-size: 20px;
text-decoration: none;
transition: color 0.3s;
border-radius: 5px;
}
.social-iconsz i:hover {
color: #850000; /* Change to your preferred hover color */
background-color: #fff;
}
.archyvas {
background: rgba(0,0,0,0.4);
color: white;
display: flex;
justify-content: center;
margin: 0;
padding-top: 30px;
padding-bottom: 40px;
width: 100%;
}
.archyvasa {
background: rgba(0,0,0,0.5);
color: white;
justify-content: center;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
font-size: 40px;
font-weight: 600;
}
.containerz {
width: 1200px;
display: flex;
background: rgba(133,0,0,0.2);
border-radius: 10px;
overflow: hidden;
}
.containerz h2 {
margin: 0px;
padding-bottom: 20px;
padding-top: 10px;
font-size: 40px;
}
/* Left - Video Player */
.video-player {
width: 70%;
padding: 20px;
text-align: center;
}
iframe {
width: 100%;
height: 400px;
border-radius: 10px;
border: none;
}
/* Right - Video List */
.video-list {
width: 30%;
background: rgba(0,0,0,0.2);
padding: 20px;
padding-bottom: 10px;
max-height: 445px; /* Limit height */
overflow: scroll;
/* Hides the scrollbar */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.video-item {
display: flex;
align-items: center;
background: rgba(133,0,0,0.1);
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
transition: background 0.3s;
}
.video-item:hover {
background: rgba(133,0,0,0.2);
}
.video-item img {
width: 80px;
height: 50px;
border-radius: 5px;
margin-right: 10px;
}
.video-item span {
font-size: 14px;
color: #ddd;
}
.programa {
background: rgba(133,0,0,0.2);
color: white;
display: flex;
justify-content: center;
align-items: center;
padding-top: 30px;
padding-bottom: 30px;
}
.programaa {
background: rgba(133,0,0,0.3);
color: white;
justify-content: center;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
font-size: 40px;
font-weight: 600;
}
.program-container {
width: 1200px;
background: rgba(0,0,0,0.3);
border-radius: 10px;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 15px;
}
/* Pirmi 4 blokai užima 25% */
.day-column {
width: calc(24% - 15px);
background: rgba(133,0,0,0.1);
padding: 15px;
border-radius: 8px;
text-align: center;
transition: 0.3s;
}
/* Paskutiniai 3 blokai užima 33.33%, kad užimtų visą eilutę */
.day-column:nth-child(n+5) {
width: calc(32.33% - 15px);
}
.day-column:hover {
background: rgba(133,0,0,0.15);
}
.day-header {
font-size: 18px;
font-weight: bold;
padding: 12px;
background: rgba(0,0,0,0.5);
border-radius: 5px;
margin-bottom: 12px;
}
.event {
background: rgba(0,0,0,0.3);
padding: 10px;
border-radius: 5px;
margin-bottom: 6px;
font-size: 14px;
}
.profile-container {
justify-content: center;
align-items: center;
padding: 20px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 500;
}
.profile-card {
width: 650px;
background: #111; /* Tamsus fonas kortelei */
border-radius: 20px;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
display: flex;
padding: 55px;
transition: transform 0.3s ease;
}
.zinute-card {
width: 460px;
display: block;
background: #111; /* Tamsus fonas kortelei */
border-radius: 20px;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
display: flex;
padding: 55px;
transition: transform 0.3s ease;
}
.profile-card:hover {
}
/* Kairė pusė: Nuotrauka ir socialinių tinklų nuorodos */
.left-side {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 30px;
justify-content: center;
position: relative;
}
/* Profilio nuotrauka */
.profile-img {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
border: 5px solid #333;
margin-bottom: 20px;
position: relative;
}
.profile-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Pakeisti nuotrauką mygtukas */
.change-photo-btn {
position: absolute;
bottom: 10px;
right: 40%;
background-color: #333;
color: #fff;
border: none;
border-radius: 50%;
padding: 10px;
transition: background-color 0.3s ease;
}
.change-photo-btn:hover {
background-color: rgba(133,0,0,0.9);
color: #fff;
}
.change-photo-btn i {
font-size: 20px;
}
/* Socialinių tinklų nuorodos */
.social-links {
display: flex;
gap: 15px;
justify-content: center;
}
.social-links a {
width: 40px;
height: 40px;
background-color: #333;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
transition: background-color 0.3s ease;
text-decoration: none;
}
.social-links a:hover {
background-color: rgba(133,0,0,0.2);
}
.social-links a i {
font-size: 18px;
background-color: rgba(0,0,0,0.0);
}
/* Dešinė pusė: Profilio informacija */
.profile-info {
flex-grow: 1;
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.profile-name {
text-align: center;
font-size: 32px;
font-weight: 600;
color: #fff; /* Balta spalva vardui */
}
.profile-title {
font-size: 14px;
color: #aaa; /* Šviesesnė spalva titului */
}
.profile-details {
margin-bottom: 20px;
}
.profile-details p {
margin: 5px 0;
font-size: 14px;
color: #ccc; /* Šviesus tekstas detalėms */
}
.profile-details strong {
font-weight: 600;
color: #fff;
/* Balta spalva svarbiems tekstams */
}
/* Mygtukai privačiam pranešimui ir nustatymams */
.profile-buttons {
margin-top: 0px;
display: flex;
gap: 15px;
align-self: flex-start;
}
.profile-buttons button {
font-size: 14px;
color: #666;
background-color: #f5f5f5;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-weight: 600;
transition: background-color 0.3s ease;
}
.profile-buttons input {
font-size: 14px;
color: #666;
background-color: #f5f5f5;
border: none;
max-width: 50%;
border-radius: 5px;
padding: 10px 20px;
font-weight: 600;
transition: background-color 0.3s ease;
}
.profile-buttons button:hover {
background-color: #eaeaea;
}
/* Atsakant į mažesnes įrenginių ekrano rezoliucijas */
#notification-bar {
background-color: #111;
color: white;
display: none;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
font-size: 14px;
transition: all 0.3s ease;
z-index: 500;
}
.notification {
display: flex;
align-items: center;
background-color: #111;
padding: 14px 15px;
font-size: 15px;
transition: background-color 0.3s ease;
width: 100%; /* Ensure it stretches within the parent */
}
.notification:hover {
background-color: rgba(133,0,0,0.5);
transition: background-color 0.3s ease;
}
#notification-bar:hover {
background-color: #111;
}
#notification-bar img {
border-radius: 50%;
padding-right: 10px;
}
/* Open Chat Button */
.open-chat-btn {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #ff5722;
color: white;
padding: 14px 18px;
border-radius: 50%;
font-size: 22px;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.open-chat-btn:hover {
background-color: #e64a19;
transform: scale(1.1);
}
/* Chat Box */
#chat-box {
position: fixed;
bottom: 20px;
right: 20px;
width: 340px;
background: #ffffff;
border-radius: 0px 0px 20px 20px;
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
display: none;
flex-direction: column;
overflow: hidden;
border: 0px solid #111;
z-index: 500;
}
/* Chat Header */
#chat-header {
background-color: #111;
color: white;
padding: 14px 20px;
display: flex;
justify-content: space-between; /* Spacing avatar and button */
align-items: center; /* Centering elements vertically */
font-weight: 600;
font-size: 16px;
border-bottom: 1px solid #e0e0e0;
}
#chat-header .avatar {
width: 30px;
height: 30px;
border-radius: 50%;
}
#chat-header .chat-nickname {
flex-grow: 1; /* Allow nickname to take up the remaining space */
text-align: center; /* Center the nickname */
}
#chat-header button {
background-color: transparent;
color: white;
font-size: 18px;
border: none;
transition: color 0.3s ease;
}
#chat-header button:hover {
color: #f1f1f1;
}
/* Chat Messages */
#chat-messages {
height: 300px;
overflow-y: auto;
padding: 15px;
font-size: 14px;
line-height: 1.6;
background-color: #f9f9f9;
flex-grow: 1;
display: flex;
flex-direction: column;
}
/* Message */
.message {
margin-bottom: 12px;
padding: 0px 15px;
border-radius: 10px;
max-width: 80%;
font-size: 14px;
line-height: 1.5;
display: flex;
align-items: center;
word-wrap: break-word; /* Ensures the word wraps to the next line */
word-break: break-word; /* Breaks long words */
}
/* Sent Message */
.message.sender {
background-color: #ff5722;
color: white;
align-self: flex-end;
justify-content: flex-end;
}
/* Received Message */
.message.receiver {
background-color: #e0e0e0;
color: #333;
align-self: flex-start;
justify-content: flex-start;
}
/* Avatar */
.message img {
border-radius: 50%;
width: 30px;
height: 30px;
margin-right: 10px;
}
/* Chat Input */
#chat-input {
display: flex;
padding: 12px;
background-color: #f9f9f9;
border-top: 1px solid #ddd;
}
#chat-input input {
flex: 1;
padding: 10px 15px;
font-size: 14px;
border-radius: 10px;
border: 1px solid #ddd;
outline: none;
transition: border-color 0.3s ease;
}
#chat-input input:focus {
border-color: #ff5722;
}
#chat-input button {
background-color: #111;
color: white;
padding: 10px 15px;
font-size: 14px;
border: none;
border-radius: 10px;
margin-left: 8px;
transition: background-color 0.3s ease;
}
#chat-input button:hover {
background-color: #111;
}
.chat-row {
display: block;
gap: 10px;
width: 330px;
margin: 20px auto;
}
.chat-block p{
margin: 0px;
padding: 0px;
}
.chat-infos {
display: flex;
}
p.nickname {
font-weight: bold;
color: #333;
margin: 0;
font-size: 14px;
}
p.last-message {
color: #666;
font-size: 12px;
margin: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.chat-block {
display: flex;
align-items: center;
background-color: #f5f5f5;
border-radius: 8px;
padding: 8px 10px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
border: 1px solid #ddd;
transition: background 0.2s ease;
margin-bottom: 10px;
}
.chat-block:hover {
background-color: #eaeaea;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
margin-right: 10px;
}
.chat-info {
display: flex;
flex-direction: column;
margin-right: auto; /* Pushes everything else to the right */
}
.friend-actions {
display: flex;
gap: 10px;
}
.accept-friend, .decline-friend {
padding: 5px 10px;
border: none;
border-radius: 5px;
font-size: 12px;
}
.accept-friend {
background-color: #333;
color: white;
}
.decline-friend {
background-color: red;
color: white;
}
/* Responsive design */
.profile-update-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease-in-out;
}
/* Show overlay */
.profile-update-overlay.active {
visibility: visible;
opacity: 1;
}
/* Profile Update Box */
.profile-update-box {
background: #111;
padding: 30px;
width: 500px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
color: white;
font-family: 'Arial', sans-serif;
text-align: center;
position: relative;
animation: fadeIn 0.5s ease-in-out;
}
/* Close Button */
.profile-update-close-btn {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
color: white;
font-size: 20px;
}
/* Form Fields */
.profile-update-box input {
width: 100%;
padding: 12px;
margin: 5px 0;
border: none;
border-radius: 8px;
font-size: 16px;
text-align: center;
box-sizing: border-box;
height: 40px; /* Consistent height for inputs */
}
.profile-update-box select {
width: 100%;
padding: 12px;
margin: 5px 0;
border: none;
border-radius: 8px;
font-size: 16px;
text-align: center;
box-sizing: border-box;
height: 40px; /* Consistent height for inputs */
}
.profile-update-box textarea {
width: 100%;
padding: 12px;
margin-top: 5px;
margin-bottom: -12px;
border: none;
border-radius: 8px;
font-size: 16px;
text-align: center;
box-sizing: border-box;
height: 160px; /* Consistent height for inputs */
}
/* File Input (Hidden) */
.profile-update-file-input {
display: none;
}
/* Profile Picture Upload */
/* Gender Selection */
.profile-update-gender-container {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 0px;
}
.profile-update-gender-btn {
flex: 1;
padding: 12px;
background: #f5f5f5;
border: none;
border-radius: 8px;
font-size: 16px;
color: #333;
box-sizing: border-box;
height: 40px; /* Match height of other inputs */
}
.profile-update-gender-btn.active {
background: #cecece;
}
/* Submit Button */
.profile-update-submit-btn {
width: 100%;
padding: 12px;
background: #f5f5f5;
color: #333;
font-size: 16px;
border: none;
border-radius: 8px;
margin-top: 10px;
}
.profile-update-submit-btn:hover {
background: #cecece;
}
/* Fade-in animation */
@keyframes fadeIn {
from {
transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* Two Column Layout */
.profile-update-form {
display: flex;
justify-content: space-between;
gap: 20px;
margin-top: 20px;
}
/* Left Column */
.profile-update-left,
.profile-update-right {
width: 48%;
}
.profile-update-left input,
.profile-update-right input {
margin-bottom: 15px;
}
/* Gender section */
.profile-update-gender-container {
margin-top: 5px;
}
/* Ensure Submit Button is full width */
.profile-update-submit-btn {
margin-top: 20px;
padding: 12px;
background-color: #f5f5f5;
color: #666;
border: none;
}
.profile-update-submit-btn:hover {
background-color: #cecece;
}
/* Profile Picture Container */
.profile-update-file-label {
position: relative;
display: inline-block;
}
/* Profile Picture Upload */
.profile-update-pic {
width: 140px;
height: 140px;
border-radius: 50%;
border: 3px solid #333;
object-fit: cover;
margin-bottom: 0px;
}
/* Camera Icon over Profile Picture */
.profile-update-camera-icon {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
font-size: 40px; /* Adjust the size of the icon */
color: white;
opacity: 0.8; /* Low opacity */
display: flex;
align-items: center;
justify-content: center;
pointer-events: none; /* Prevent it from blocking clicks on the profile picture */
}
/* Adjust the profile picture to make room for the camera icon */
.profile-update-file-label:hover .profile-update-camera-icon {
opacity: 0.9; /* Optionally increase opacity on hover */
}
.card {
display: flex;
align-items: center;
margin-bottom: 15px;
background-color: #f8f8f8;
padding: 10px;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.image-container {
width: 220px;
height: 220px;
background-size: cover;
background-position: center;
border-radius: 50%;
margin-right: 15px;
}
.text-container {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%; /* Ensure the text container takes up the full width */
}
.text-container p {
margin: 0;
font-size: 15px;
}
.vote-icon {
font-size: 20px; /* Increase the font size of the heart icon */
color: #f5f5f5; /* Red color for the heart icon */
position: absolute;
right: 20px;
bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;/* Makes the icon a circle */ /* Light background color for contrast */ /* Slight shadow */
}
.vote-number {
font-weight: bold;
position: absolute;
top: 5px;
z-index: 20;
font-size: 14px; /* Adjusted size for readability */
}
.vote-icon i {
color: rgba(133,0,0,0.4);
position: absolute;
bottom: 0px;
right: 3px;
font-size: 40px; /* Adjust icon size */
}
.vote-icon i.active {
color: #333;
background-color: rgba(0,0,0,0);
/* Adjust icon size */
}
.search-box {
background-color: rgba(133,0,0,0.2);
color: #fff;
padding: 8px;
width: 100%; /* Ensure the search box is 100% width of the container */
border: 1px solid rgba(133,0,0,0.2);
border-radius: 5px;
font-size: 14px;
outline: none;
margin-bottom: 10px;
box-sizing: border-box; /* Prevent overflow */
}
.search-box:focus {
border-color: rgba(133,0,0,0.3);
}
.song-list {
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto; /* Allow scrolling if necessary */
flex-grow: 1; /* Let the song list take the available space */
max-height: 300px; /* Reduced height to fit inside the 400px box */
}
.song {
display: flex;
align-items: center;
padding: 8px;
border-radius: 8px;
border: 1px solid rgba(133,0,0,0.3);
background-color: rgba(133,0,0,0.2);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
width: 100%; /* Make sure the song takes full width */
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease;
font-size: 14px; /* Ensure text is not too large */
box-sizing: border-box;
}
.song:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.song img {
width: 35px;
height: 35px;
border-radius: 5px;
margin-right: 10px;
object-fit: cover;
}
.song div {
flex-grow: 1;
font-size: 12px;
}
.song p {
margin: 0;
padding: 0;
color: #fff;
}
.song p strong {
font-size: 14px;
color: #fff;
}
.song p em {
font-size:12px;
color: #fff;
}
.request-btn {
background-color: #111;
color: white;
border: none;
padding: 5px 10px;
font-size: 12px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.request-btn:hover {
background-color: #222;
}
.request-btn:disabled {
background-color: #aaa;
cursor: not-allowed;
}
.pagination {
display: flex;
justify-content: space-between;
margin-top: 5px;
font-size: 13px;
}
.pagination button {
padding: 8px 14px;
margin: 0;
background-color: #111;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.pagination button:hover {
background-color: #222;
}
.pagination button:disabled {
background-color: #aaa;
cursor: not-allowed;
}
.wrapperrr {
width: 90%;
max-width: 34.37em;
max-height: 90vh;
background-color: #111;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 3em;
border-radius: 1em;
box-shadow: 0 4em 5em rgba(27, 8, 53, 0.2);
font-family: "Poppins", sans-serif;
display: none;
}
.containerrr {
position: relative;
width: 100%;
height: 100%;
}
#wheel {
max-height: inherit;
width: inherit;
top: 0;
padding: 0;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
#spin-btn {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
height: 26%;
width: 26%;
border-radius: 50%;
border: 0;
background: radial-gradient(#fff 50%, #fff 85%);
color: #650000;
text-transform: uppercase;
font-size: 20px;
letter-spacing: 0.1em;
font-weight: 600;
}
.ratas {
position: absolute;
width: 2.5em;
top: 45%;
right: -4%;
}
#final-value {
font-size: 1.5em;
text-align: center;
margin-top: 1.5em;
color: #202020;
font-weight: 500;
}
#close-btn {
position: absolute;
top: 1em;
right: 1em;
background-color: transparent;
border: none;
font-size: 2em;
color: #fff;
z-index: 10;
}
.laimesratas {
background-color: #450000;
color: #fff;
text-align: center;
font-size: 16px;
padding: 12px 0;
}
.shop-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: auto;
}
.shop-item {
background-color: rgba(133, 0, 0, 0.2);
padding: 15px;
border-radius: 12px;
text-align: center;
width: 24%;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}
.shop-item img {
width: 100%;
height: auto;
object-fit: contain;
margin-bottom: 10px;
}
.price {
font-size: 1.1em;
font-weight: bold;
color: #fff;
margin-bottom: 5px;
}
.desc {
font-size: 1.0em;
color: #ccc;
}
#show-more-container {
text-align: center;
margin: 5px 0;
}
#show-more-btn {
padding: 5px 15px;
background-color: #f1f1f1;
border: 1px solid #ddd;
border-radius: 4px;
}
#show-more-btn:hover {
background-color: #e0e0e0;
}
.no-messages {
text-align: center;
color: #888;
padding: 20px;
}
.profilis-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.profilis-container {
width: 750px;
background: #111;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.5);
position: relative;
max-height: 90vh;
overflow-y: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-48%, -50%);
}
.profilis-cover-photo {
width: 100%;
height: 150px;
background-image: url('img/bg.jpg');
background-size: cover;
background-position: center;
position: relative;
}
.profilis-cover-buttons {
position: absolute;
top: 10px;
left: 20px;
right: 50px; /* Increased from 20px to make room for close button */
display: flex;
justify-content: space-between;
align-items: center;
z-index: 2;
}
.profilis-cover-buttons .profilis-left-button {
padding: 6px 12px;
border: none;
border-radius: 6px;
font-size: 14px;
background-color: rgba(255, 255, 255, 0.85);
color: #050505;
font-weight: 500;
}
.profilis-cover-buttons .profilis-right-buttons a {
padding: 4px 12px;
border: none;
border-radius: 6px;
font-size: 14px;
background-color: rgba(255, 255, 255, 0.85);
font-weight: 500;
}
.profilis-cover-buttons .profilis-right-buttons i {
margin: none;
padding: 0px;
width: auto;
background: none;
color: #050505;
opacity: 1;
}
.profilis-cover-buttons .profilis-right-buttons {
display: flex;
gap: 8px;
}
.profilis-picture {
position: absolute;
left: 30px;
bottom: -60px;
width: 120px;
height: 120px;
border: 5px solid #fff;
border-radius: 50%;
overflow: hidden;
background: #111;
z-index: 1;
}
.profilis-picture img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profilis-info-wrapper {
position: relative;
}
.profilis-info {
padding: 10px 12px;
background-color: rgba(0,0,0,0.5);
border-radius: 10px;
}
/* Desktop profile info */
.profilis-desktop-info {
position: absolute;
bottom: 10px;
left: 170px;
right: 30px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 2;
}
.profilis-desktop-info .profilis-info h1 {
margin: 0;
font-size: 24px;
color: white;
text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
text-align: left;
}
.profilis-desktop-info .profilis-info p {
margin: 5px 0 0;
font-size: 14px;
color: #e4e6eb;
text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}
/* Mobile profile info - hidden by default */
.profilis-mobile-info {
display: none;
padding: 0 15px;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 45px;
}
.profilis-mobile-info .profilis-info {
width: 100%;
text-align: center;
}
.profilis-mobile-info .profilis-info h1 {
color: #333;
font-size: 18px;
margin-bottom: 5px;
}
.profilis-mobile-info .profilis-info p {
color: #666;
font-size: 12px;
}
.profilis-mobile-info .profilis-buttons {
margin-top: 15px;
width: 100%;
justify-content: center;
}
.profilis-buttons {
display: flex;
gap: 10px;
}
.profilis-buttons button {
padding: 8px 16px;
border: none;
border-radius: 6px;
font-weight: bold;
color: white;
}
.profilis-add-friend {
background-color: #1877f2;
}
.profilis-message {
background-color: #42b72a;
}
.profilis-header-spacer {
height: 70px;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 20px;
background: #fff;
border-bottom: 1px solid #ddd;
}
.profilis-header-links a {
margin-left: 10px;
text-decoration: none;
display: inline-block;
background-color: #1877f2;
color: white;
font-weight: 500;
font-size: 14px;
padding: 8px 16px;
border-radius: 6px;
transition: background-color 0.3s;
}
.profilis-header-links a:hover {
background-color: #0e58c7;
}
.profilis-details {
display: flex;
padding: 0;
background: #fff;
border-top: 0px solid #ddd;
position: relative;
}
.profilis-left-details {
flex: 0 0 40%; /* Changed from flex: 2 to exact 40% */
padding: 20px;
box-sizing: border-box;
position: relative;
}
.profilis-left-details::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background-color: #ddd;
}
.profilis-right-details {
flex: 0 0 60%; /* Changed from flex: 1 to exact 60% */
padding: 20px;
box-sizing: border-box;
}
.profilis-left-details p{
margin: 10px 0;
font-size: 15px;
color: #333;
}
.profilis-right-details p {
margin: 5px 0;
font-size: 15px;
color: #333;
}
.profilis-right-details h3 {
margin-top: 0;
margin-bottom: 0;
font-size: 18px;
color: #1877f2;
}
.profilis-slider-wrapper {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 15px 0;
scroll-behavior: smooth;
flex-wrap: nowrap;
width: 100%;
max-width: 410px;
/* Firefox */
scrollbar-width: thin;
scrollbar-color: #ccc transparent;
}
/* Chrome, Edge, Safari */
.profilis-slider-wrapper::-webkit-scrollbar {
height: 8px;
}
.profilis-slider-wrapper::-webkit-scrollbar-track {
background: transparent;
}
.profilis-slider-wrapper::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 4px;
transition: background-color 0.3s;
}
.profilis-slider-wrapper::-webkit-scrollbar-thumb:hover {
background-color: #999;
}
.profilis-slider-item {
position: relative;
flex: 0 0 calc(20% - 8px);
aspect-ratio: 1;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.profilis-slider-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.profilis-slider-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: filter 0.3s ease;
}
.profilis-slider-item:hover img {
filter: brightness(1.1);
}
.profilis-close-btn {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
background: none;
border: none;
color: white;
z-index: 20; /* Increased from 10 to ensure it's above other elements */
text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0); /* Added background for better visibility */
}
.profilis-close-btn:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.profilis-delete-btn {
position: absolute;
top: 6px;
right: 6px;
background-color: rgba(0,0,0,0.6);
color: white;
border: none;
border-radius: 50%;
font-size: 12px;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 4px;
}
.profilis-delete-btn:hover {
background-color: rgba(255,0,0,0.8);
}
/* Add space between the buttons */
.profilis-slider-item .profilis-delete-btn:nth-child(2) {
right: 30px; /* Move the second button to the left a bit */
}
/* Mobile adjustments */
@media (max-width: 768px) {
.profilis-container {
width: 95%;
max-height: 85vh;
}
.profilis-cover-photo {
height: 120px;
}
.profilis-picture {
width: 80px;
height: 80px;
left: 20px;
bottom: -40px;
border-width: 3px;
}
.profilis-desktop-info {
left: 110px;
bottom: 5px;
}
.profilis-desktop-info .profilis-info h1 {
font-size: 18px;
}
.profilis-desktop-info .profilis-info p {
font-size: 12px;
}
.profilis-buttons button {
padding: 6px 12px;
font-size: 12px;
}
.profilis-cover-buttons {
flex-direction: row;
gap: 5px;
right: 40px; /* Adjusted to make room for close button on mobile */
}
.profilis-cover-buttons .profilis-left-button {
padding: 4px 8px;
font-size: 12px;
}
.profilis-cover-buttons .profilis-right-buttons {
gap: 5px;
}
.profilis-cover-buttons .profilis-right-buttons button {
padding: 4px 8px;
font-size: 12px;
}
.profilis-cover-buttons .profilis-right-buttons a {
padding: 0px 8px;
border: none;
border-radius: 6px;
font-size: 12px;
background-color: rgba(255, 255, 255, 0.85);
font-weight: 500;
}
.profilis-cover-buttons .profilis-right-buttons i {
margin: none;
padding: 0px;
width: auto;
background: none;
color: #050505;
opacity: 1;
}
.profilis-header-spacer {
height: auto;
flex-direction: row;
justify-content: center;
padding: 15px 10px;
}
.profilis-header-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.profilis-header-links a {
margin: 0;
padding: 6px 12px;
font-size: 12px;
}
.profilis-details {
flex-direction: column;
}
.profilis-left-details {
flex: 1;
width: 100%;
padding: 15px;
}
.profilis-left-details::after {
width: 100%;
height: 1px;
top: auto;
bottom: 0;
right: 0;
}
.profilis-right-details {
flex: 1;
width: 100%;
padding: 15px;
}
.profilis-image-slider {
height: 80px;
}
.profilis-slider-item {
width: 50%; /* Show exactly 2 items on tablet */
}
.profilis-slider-wrapper img {
height: 70px;
}
.profilis-arrow {
padding: 5px;
font-size: 16px;
}
.profilis-close-btn {
font-size: 20px;
width: 26px;
height: 26px;
}
}
/* Small mobile adjustments */
@media (max-width: 480px) {
.profilis-cover-photo {
height: 100px;
margin-bottom: 60px; /* Make space for profile pic and info */
}
.profilis-picture {
width: 80px;
height: 80px;
left: 50%;
transform: translateX(-50%);
bottom: -40px;
border-width: 4px;
}
/* Switch display between desktop and mobile info */
.profilis-desktop-info {
display: none;
}
.profilis-mobile-info {
display: flex;
}
.profilis-header-spacer {
margin-top: 10px;
border-top: 2px solid #ddd;
}
.profilis-cover-buttons .profilis-right-buttons {
flex-wrap: wrap;
}
.profilis-slider-item {
width: 50%; /* Show exactly 1 item on small mobile */
}
.profilis-cover-buttons {
right: 35px; /* Further adjusted for very small screens */
}
}
.preview-modal {
display: none;
position: fixed;
z-index: 9999;
padding-top: 60px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.8);
justify-content: center;
align-items: center;
}
.preview-modal-content {
max-width: 90%;
max-height: 80%;
border-radius: 8px;
box-shadow: 0 0 20px #000;
}
.preview-close {
position: absolute;
top: 20px;
right: 30px;
font-size: 40px;
color: white;
}
.modal {
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.8);
}
.modal-content {
background-color: #fefefe;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
border-radius: 8px;
}
.close-modal {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close-modal:hover {
color: black;
}
.image-preview-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px 0;
}
#imagePreviewArea {
width: 300px;
height: 300px;
border: 1px solid #ddd;
overflow: hidden;
position: relative;
margin-bottom: 15px;
}
#previewImage {
position: absolute;
transform-origin: center;
}
.position-controls {
display: grid;
grid-template-columns: repeat(3, 40px);
grid-template-rows: repeat(3, 40px);
gap: 5px;
}
.position-controls button {
width: 40px;
height: 40px;
border: 1px solid #ddd;
background-color: #f9f9f9;
border-radius: 4px;
}
.position-controls button:hover {
background-color: #eaeaea;
}
#moveUp { grid-column: 2; grid-row: 1; }
#moveLeft { grid-column: 1; grid-row: 2; }
#moveRight { grid-column: 3; grid-row: 2; }
#moveDown { grid-column: 2; grid-row: 3; }
#zoomIn { grid-column: 3; grid-row: 1; }
#zoomOut { grid-column: 1; grid-row: 3; }
.upload-controls {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
}
.btn-primary {
background-color: #4CAF50;
color: white;
}
.btn-primary:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.nuotrauka .modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
z-index: 1000;
overflow: auto;
}
.nuotrauka .modal-content {
background-color: #fff;
margin: 50px auto;
width: 90%;
max-width: 800px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.nuotrauka .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #eee;
}
.nuotrauka .close-modal {
font-size: 28px;
font-weight: bold;
}
.nuotrauka .modal-body {
padding: 20px;
}
.nuotrauka .upload-container {
display: flex;
flex-direction: column;
gap: 20px;
}
@media (min-width: 768px) {
.nuotrauka .upload-container {
flex-direction: row;
}
.nuotrauka .upload-preview-area,
.nuotrauka .upload-controls {
flex: 1;
}
}
.nuotrauka .upload-preview-area {
border: 2px dashed #ccc;
background-color: #f9f9f9;
border-radius: 8px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
}
.nuotrauka #imagePreviewContainer {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.nuotrauka #imagePreview {
width: 100%;
height: 100%;
object-fit: cover; /* fills the frame */
cursor: grab; /* visual hint */
user-select: none; /* prevent accidental text‑selection */
transition: transform .25s ease;
}
.nuotrauka#imagePreview.dragging { cursor: grabbing; }
.nuotrauka .upload-controls {
display: flex;
flex-direction: column;
gap: 15px;
}
.nuotrauka #imageInput {
display: none;
}
.nuotrauka .upload-btn {
display: inline-block;
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border-radius: 4px;
text-align: center;
}
.nuotrauka .image-adjustments {
border: 1px solid #eee;
border-radius: 4px;
padding: 15px;
}
.nuotrauka .control-group {
margin-bottom: 15px;
}
.nuotrauka .control-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.nuotrauka .control-group button {
width: 40px;
height: 40px;
margin-right: 5px;
border: 1px solid #ddd;
background-color: #f5f5f5;
border-radius: 4px;
}
.nuotrauka .control-group button:hover {
background-color: #e0e0e0;
}
.nuotrauka #zoomSlider {
width: 100%;
}
.nuotrauka .button-group {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.nuotrauka .cancel-btn,
.nuotrauka .save-btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
}
.nuotrauka .cancel-btn {
background-color: #f44336;
color: white;
}
.nuotrauka .save-btn {
background-color: #4CAF50;
color: white;
}
.nuotrauka #imagePreviewContainer {
position: relative;
cursor: grab;
overflow: hidden;
width: 300px;
height: 300px;
margin: 0 auto;
}
.nuotrauka #imagePreviewContainer:active {
cursor: grabbing;
}
.nuotrauka #imagePreview {
pointer-events: auto;
transform-origin: center;
transition: transform 0.05s ease;
}
.nuotrauka .drag-instructions {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 5px;
font-size: 14px;
border-radius: 3px;
opacity: 0.8;
}
/* Ensure touch events work properly on mobile */
.nuotrauka .modal-overlay {
touch-action: none;
}
/* Modal Overlay */
.cover .modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
z-index: 1000;
overflow: auto;
}
/* Modal Content */
.cover .modal-content {
background-color: #fff;
margin: 50px auto;
width: 90%;
max-width: 800px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/* Modal Header */
.cover .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #eee;
}
.cover .close-modal {
font-size: 28px;
font-weight: bold;
color: #666;
}
.cover .close-modal:hover {
color: #000;
}
/* Modal Body */
.cover .modal-body {
padding: 20px;
}
/* Upload Container */
.cover .upload-container {
display: flex;
flex-direction: column;
gap: 20px;
}
@media (min-width: 768px) {
.cover .upload-container {
flex-direction: row;
}
.cover .upload-preview-area,
.cover .upload-controls {
flex: 1;
}
}
/* Preview Area */
.cover .upload-preview-area {
border: 2px dashed #ccc;
background-color: #f9f9f9;
border-radius: 8px;
padding: 15px;
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
}
/* Cover Image Preview Container - Half size 375x75 */
.cover #coverImagePreviewContainer {
width: 375px;
height: 75px;
border: 2px solid #ddd;
border-radius: 4px;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
margin: 0 auto;
background-color: #f5f5f5;
}
.cover #coverImagePreviewContainer:active {
cursor: grabbing;
}
/* Cover Image Preview - Maintains original aspect ratio */
.cover #coverImagePreview {
max-width: none;
max-height: none;
object-fit: none;
cursor: grab;
user-select: none;
pointer-events: auto;
transform-origin: center;
transition: transform 0.05s ease;
position: absolute;
display: block;
}
.cover #coverImagePreview.dragging {
cursor: grabbing;
}
/* Crop preview overlay - Shows the exact 750x150 crop area */
.cover #coverImagePreviewContainer::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid #4CAF50;
background: rgba(76, 175, 80, 0.1);
pointer-events: none;
z-index: 10;
box-sizing: border-box;
}
.cover #coverImagePreviewContainer::before {
content: '375 × 75 Preview (750×150 final)';
position: absolute;
top: 5px;
left: 5px;
background: rgba(76, 175, 80, 0.9);
color: white;
padding: 2px 6px;
border-radius: 3px;
font-size: 10px;
z-index: 11;
pointer-events: none;
font-weight: bold;
}
/* Upload Controls */
.cover .upload-controls {
display: flex;
flex-direction: column;
gap: 15px;
}
.cover #coverImageInput {
display: none;
}
.cover .upload-btn {
display: inline-block;
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border-radius: 4px;
text-align: center;
border: none;
font-size: 14px;
}
.cover .upload-btn:hover {
background-color: #45a049;
}
/* Image Adjustments */
.cover .image-adjustments {
border: 1px solid #eee;
border-radius: 4px;
padding: 15px;
}
.cover .control-group {
margin-bottom: 15px;
}
.cover .control-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.cover .control-group button {
width: 40px;
height: 40px;
margin-right: 5px;
border: 1px solid #ddd;
background-color: #f5f5f5;
border-radius: 4px;
font-size: 16px;
}
.cover .control-group button:hover {
background-color: #e0e0e0;
}
.cover #coverZoomSlider {
width: 100%;
margin: 5px 0;
}
.cover #coverZoomValue {
margin-left: 10px;
font-weight: bold;
}
/* Button Group */
.cover .button-group {
display: flex;
justify-content: space-between;
margin-top: 20px;
gap: 10px;
}
.cover .cancel-btn,
.cover .save-btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
font-size: 14px;
flex: 1;
max-width: 150px;
}
.cover .cancel-btn {
background-color: #f44336;
color: white;
}
.cover .cancel-btn:hover {
background-color: #d32f2f;
}
.cover .save-btn {
background-color: #4CAF50;
color: white;
}
.cover .save-btn:hover {
background-color: #45a049;
}
/* Drag Instructions */
.cover .drag-instructions {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
text-align: center;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0.9;
margin: 0 10px;
z-index: 12;
}
/* Button to trigger cover upload */
.cover-upload-trigger {
background-color: #2196F3;
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
margin: 20px;
font-size: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: background-color 0.3s ease;
}
.cover-upload-trigger:hover {
background-color: #1976D2;
}
/* Upload prompt styling */
.cover #uploadPrompt {
text-align: center;
color: #666;
padding: 20px;
}
.cover #uploadPrompt p {
margin: 10px 0;
font-size: 14px;
}
/* Responsive adjustments */
@media (max-width: 767px) {
.cover .modal-content {
margin: 20px auto;
width: 95%;
}
.cover .upload-container {
gap: 15px;
flex-direction: column;
}
.cover .button-group {
flex-direction: column;
}
.cover .cancel-btn,
.cover .save-btn {
max-width: none;
}
/* Scale down preview container proportionally on mobile */
.cover #coverImagePreviewContainer {
width: 100%;
max-width: 375px;
height: calc(100vw * 75 / 375);
max-height: 75px;
min-width: 280px;
min-height: 56px;
}
.cover .upload-preview-area {
min-height: 100px;
padding: 10px;
}
}
@media (max-width: 480px) {
.cover #coverImagePreviewContainer {
min-width: 250px;
min-height: 50px;
}
.cover #coverImagePreviewContainer::before {
font-size: 9px;
padding: 2px 4px;
}
}
.perziureti-photo-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
animation: perziureti-fadeIn 0.3s ease-in-out;
}
.perziureti-photo-modal.perziureti-show {
display: flex;
align-items: center;
justify-content: center;
}
/* Modal content */
.perziureti-photo-modal-content {
position: relative;
max-width: 90%;
max-height: 90%;
animation: perziureti-zoomIn 0.3s ease-in-out;
}
.perziureti-photo-modal img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
max-width: 500px;
max-height: 500px;
}
/* Close button */
.perziureti-close-btn {
position: absolute;
top: -40px;
right: 0;
color: white;
font-size: 35px;
font-weight: bold;
background: none;
border: none;
padding: 0;
line-height: 1;
transition: color 0.3s ease;
}
.perziureti-close-btn:hover,
.perziureti-close-btn:focus {
color: #ccc;
}
/* Profile image styling */
.perziureti-profile-img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
transition: transform 0.2s ease, box-shadow 0.2s ease;
border: 3px solid #ddd;
}
.perziureti-profile-img:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
/* Animations */
@keyframes perziureti-fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes perziureti-zoomIn {
from {
transform: scale(0.5);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@keyframes perziureti-zoomOut {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(0.5);
opacity: 0;
}
}
.perziureti-photo-modal-content.perziureti-closing {
animation: perziureti-zoomOut 0.3s ease-in-out;
}
/* Responsive design */
@media (max-width: 768px) {
.perziureti-photo-modal-content {
max-width: 95%;
max-height: 85%;
}
.perziureti-close-btn {
top: -50px;
font-size: 40px;
}
}
.partner-link img {
filter: grayscale(40%);
transition: filter 0.3s ease;
}
.partner-link:hover img {
filter: grayscale(0%);
}