Spaces:
Running
Running
| :root { | |
| --primary-color: #4fd1c5; | |
| --secondary-color: #4fd1c5; | |
| --background-color: #1f4037; | |
| --control-color: #2d9d78; | |
| } | |
| body { | |
| font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; | |
| background-image: linear-gradient( | |
| 135deg, | |
| var(--background-color) 0%, | |
| #1e5372 100% | |
| ); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| color: white; | |
| } | |
| #logo-link { | |
| position: absolute; | |
| top: 10px; /* Prilagodite ovo kako biste logo postavili na željenu poziciju */ | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 1000; /* Ako je potrebno da bude iznad ostalih elemenata */ | |
| } | |
| #logo-img { | |
| width: 200px; /* Prilagodite širinu */ | |
| height: auto; | |
| opacity: 0.5; /* Prilagodite prozirnost */ | |
| transition: opacity 0.3s ease; | |
| /* Ako želite da logo malo zasvetli kada se pređe mišem preko njega */ | |
| &:hover { | |
| opacity: 0.8; | |
| } | |
| } | |
| .container { | |
| text-align: center; | |
| padding: 20px; | |
| border-radius: 15px; | |
| box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(5px); | |
| } | |
| #questionInput { | |
| border: 2px solid var(--primary-color); | |
| background: transparent; | |
| color: white; | |
| transition: all 0.3s ease; | |
| margin-bottom: 10px; | |
| } | |
| #questionInput { | |
| padding: 10px 15px; | |
| border-radius: 20px; | |
| width: 300px; | |
| margin-right: 10px; | |
| } | |
| #questionInput:focus { | |
| outline: none; | |
| border-color: var(--secondary-color); | |
| box-shadow: 0 0 10px var(--secondary-color); | |
| } | |
| #audioResponse { | |
| display: none; | |
| margin-top: 15px; | |
| width: 100%; | |
| outline: none; | |
| border-radius: 10px; | |
| background: rgba(255, 255, 255, 0.2); | |
| box-shadow: 0 0 10px var(--primary-color); | |
| height: 40px; | |
| overflow: hidden; | |
| } | |
| #audioResponse::-webkit-media-controls-panel { | |
| background-color: var(--control-color); | |
| border-radius: 10px; | |
| } | |
| #audioResponse::-webkit-media-controls-play-button, | |
| #audioResponse::-webkit-media-controls-volume-slider, | |
| #audioResponse::-webkit-media-controls-current-time-display, | |
| #audioResponse::-webkit-media-controls-time-remaining-display, | |
| #audioResponse::-webkit-media-controls-timeline, | |
| #audioResponse::-webkit-media-controls-timeline-container { | |
| color: var(--primary-color); | |
| } | |
| h1 { | |
| margin-bottom: 20px; | |
| } | |
| @keyframes spinning { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| button { | |
| padding: 10px; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| border: 2px solid var(--primary-color); | |
| background: transparent; | |
| color: white; | |
| transition: all 0.3s ease; | |
| display: inline-flex; /* Omogućava fleksibilno prilagođavanje sadržaju */ | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| button:hover { | |
| background-color: var(--control-color); | |
| } | |
| .button-content { | |
| /* Ne postavljamo fiksnu širinu, dozvoljavamo da se prilagođava sadržaju */ | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 20px; /* Fiksna visina */ | |
| } | |
| .loading-spinner { | |
| /* Stilizacija spinner-a */ | |
| border: 4px solid #f3f3f3; | |
| border-top: 4px solid var(--control-color); | |
| border-radius: 50%; | |
| width: 16px; | |
| height: 16px; | |
| animation: spinning 2s linear infinite; | |
| margin-left: 10px; | |
| } | |
| button:disabled { | |
| background-color: #aaa; | |
| color: #666; | |
| cursor: not-allowed; | |
| border: 2px solid #888; | |
| } | |
| .powered-by { | |
| margin-top: 20px; | |
| font-size: 0.9em; | |
| text-align: center; | |
| color: white; | |
| } | |
| .labsoft-link { | |
| color: var(--primary-color); /* Boja teksta */ | |
| text-decoration: none; | |
| display: inline-flex; /* Za vertikalno poravnanje loga i teksta */ | |
| align-items: center; /* Vertikalno centriranje */ | |
| } | |
| .labsoft-link:hover { | |
| text-decoration: underline; | |
| } | |
| .logo-img-pb { | |
| width: 20px; /* Prilagodite veličinu loga */ | |
| height: auto; | |
| margin-left: 5px; /* Razmak između loga i teksta */ | |
| } | |
| @media only screen and (max-width: 600px) { | |
| .container { | |
| width: 85%; /* Širina kontejnera na manjim uređajima */ | |
| margin: 10px auto; | |
| padding: 10px; | |
| } | |
| #questionInput { | |
| width: 80%; /* Punu širinu na malim uređajima */ | |
| margin-bottom: 10px; /* Dodatni razmak između elemenata */ | |
| margin-right: 0; | |
| padding: 8px 10px; | |
| } | |
| button { | |
| width: 50%; /* Punu širinu na malim uređajima */ | |
| margin-bottom: 10px; /* Dodatni razmak između elemenata */ | |
| margin-right: 0; | |
| padding: 8px 10px; /* Manje padding na malim uređajima */ | |
| } | |
| .button-content { | |
| justify-content: center; /* Centriranje sadržaja na malim uređajima */ | |
| width: auto; /* Automatska širina sadržaja */ | |
| } | |
| .loading-spinner { | |
| margin-left: 5px; /* Manji razmak za spinner */ | |
| } | |
| } | |
| @media only screen and (min-width: 601px) and (max-width: 1024px) { | |
| .container { | |
| width: 80%; /* Širina kontejnera na srednjim uređajima */ | |
| padding: 15px; | |
| } | |
| #questionInput { | |
| width: calc(100% - 20px); /* Prilagođena širina na srednjim uređajima */ | |
| } | |
| button { | |
| width: auto; /* Auto širina na srednjim uređajima */ | |
| padding: 10px 15px; | |
| } | |
| } | |