/* CSS Document */ /* Analyse av filen: Denne CSS-filen styrer designet for torsjonsfjær-kalkulatoren. */ /* * 1. Hva gjør denne filen? * - Gir skjemaet en moderne og responsiv stil. * - Sørger for at elementer som knapper, input-felt og valg er tydelige og brukervennlige. * 2. Hvordan fungerer den med andre filer? * - Lastes inn av `/index.php` via ``-elementet i ``. * - Styling brukes på HTML-elementer generert av PHP. * 3. Er det sikkerhetsproblemer? * - Ingen, CSS påvirker kun utseendet og har ingen direkte sikkerhetsimplikasjoner. * 4. Forslag til forbedringer: * - Legg til flere visuelle tilbakemeldinger for brukerinteraksjoner (f.eks. hover-effekter). * - Optimaliser for mobilvisning med media queries. /* * Document Type: CSS Document * File Name: styles.css * File Path: /script/css/styles.css * Description: Denne filen styrer designet og utseendet for torsjonsfjær-kalkulatoren. * Den gir en moderne og responsiv stil til skjemaelementene. * Author: Leon/Webmasterinfo * Last Modified: 25.7.2025 */ /* Generell styling for kroppen */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } /* Styling for kalkulator-diven */ .calculator { background: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 100%; max-width: 400px; text-align: left; /* Endret fra center til left for venstrestilling */ } /* Tittelen */ .calculator h1 { margin-bottom: 20px; font-size: 24px; color: #333; text-align: left; /* Beholder tittelen sentrert */ } /* Input-felt og select-bokser */ .calculator input[type="number"], .calculator select { width: 100%; padding: 10px; margin-bottom: 15px; font-size: 16px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; text-align: left; /* Venstrestiller tekst i input-felt */ } /* Radioknapper og tilhørende etiketter */ .calculator fieldset { margin: 20px 0; border: none; text-align: left; /* Sørger for venstrestilling */ } .calculator fieldset legend { font-size: 18px; font-weight: bold; color: #555; } .calculator input[type="radio"], .calculator input[type="checkbox"] { margin-right: 10px; } .calculator label { display: block; /* Sørger for at etiketten står alene */ margin-bottom: 10px; font-size: 16px; color: #333; text-align: left; /* Venstrestiller etiketter */ } .button-group { display: flex; gap: 10px; /* Avstand mellom knappene */ } .calculate-button { background-color: #4CAF50; /* Grønn farge */ color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } .calculate-button:hover { background-color: #45a049; /* Mørkere grønn ved hover */ } .cancel-button { background-color: #f44336; /* Rød farge */ color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } .cancel-button:hover { background-color: #d32f2f; /* Mørkere rød ved hover */ } /* Feilmeldinger og resultater */ .result { padding-right: 2px; margin-top: 20px; font-size: 18px; font-weight: bold; color: #000000; text-align: left; /* Sørger for venstrestilling av resultater */ } .result p { margin: 5px 0; } .button-group { display: flex; justify-content: flex-start; /* Plasser knappene venstrestilt */ gap: 2px; /* Sett mellomrom mellom knappene */ }