elo-rezept-rechner/src/static/style.css

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

form {
    margin-bottom: 20px;
}

input, button {
    padding: 10px;
    margin: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    cursor: pointer;
    background-color: #008C50; /* Helles Blau */
    color: white;
    border: none;
}

button:disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

button:not(:disabled):hover {
    background-color: #007344; /* Dunkleres Blau */
}

button#remove-button {
    background-color: #640000; /* Helles Rot */
}

button#remove-button:disabled {
    background-color: #cccccc;
    color: #666666;
}

button#remove-button:not(:disabled):hover {
    background-color: #490000; /* Dunkleres Rot */
}

table {
    width: 100%;
    border-collapse: separate; /* Erlaubt die Anwendung von border-radius */
    border-spacing: 0;
    border-radius: 10px;
}

table th:first-child {
    border-top-left-radius: 10px;
}

table th:last-child {
    border-top-right-radius: 10px;
}

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}


table, th, td {
    border: 1px solid #ddd;
}

th, td {
    text-align: left;
    padding: 8px;
}

th {
    background-color: #4CAF50; /* Grün */
    color: white;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

.selected, tr.selected {
    background-color: #efcccc; /* Hervorhebung der Auswahl */
}

tr:hover:not(.selected) {
    background-color: #ddd; /* Hover-Effekt für nicht ausgewählte Zeilen */
}

#navbar {
    background-color: #01351d; /* Sehr dunkles Grün */
    color: white;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
}

#navbar .navbar-header {
    display: flex;
    align-items: center;
}

#navbar h1 {
    margin: 0;
    font-size: 24px;
    display: inline-block;
}

#navbar .versionid {
    margin-left: 20px;
    display: inline-block;
}

#navbar ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

#navbar ul li {
    margin-left: 20px;
}

#navbar a {
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

#navbar a:hover, #navbar a.active {
    background-color: #007344; /* Etwas helleres Grün */
}



.content {
    background-color: #ebf2eb; /* Helles Grau */
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}





#nutrition-input-table th, #nutrition-input-table td {
    border: 1px solid #ddd; /* Fügt Ränder hinzu */
    padding: 8px; /* Fügt Innenabstand hinzu */
    text-align: left; /* Ausrichtung des Textes */
}

#nutrition-input-table input {
    width: 100%; /* Eingabefelder nehmen die volle Breite der Zelle ein */
    box-sizing: border-box; /* Box-Modell für die Breitenberechnung */
}

@media screen and (max-width: 600px) {
    #nutrition-input-table {
        display: block;
        overflow-x: auto; /* Ermöglicht horizontales Scrollen auf kleinen Bildschirmen */
    }
}

.table-container {
    overflow-y: auto;
    max-height: 500px; /* Passen Sie die Höhe nach Bedarf an */
    border-radius: 10px;
    margin-top: 20px;
}

#database-nutrition-table {
    width: 100%;
    border-collapse: separate; /* Erlaubt die Anwendung von border-radius */
    border-spacing: 0;
}

#database-nutrition-table th, #database-nutrition-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

#database-nutrition-table tr.selected {
    background-color: #efcccc;
}


#password-prompt {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

button#delete-row-button {
    background-color: #640000; /* Helles Rot */
}

button#delete-row-button:disabled {
    background-color: #cccccc;
    color: #666666;
}

button#delete-row-button:not(:disabled):hover {
    background-color: #490000; /* Dunkleres Rot */
}

button#cancel-button {
    background-color: #640000; /* Helles Rot */
}

button#cancel-button:disabled {
    background-color: #cccccc;
    color: #666666;
}

button#cancel-button:not(:disabled):hover {
    background-color: #490000; /* Dunkleres Rot */
}

.form-layout {
    display: flex;
    flex-direction: column;
}

.form-row {
    margin-bottom: 10px;
}


button#submit-button {
    background-image: url('images/elisa.jpg'); /* Pfad zum Bild */
    background-size: contain; /* Passt das Bild innerhalb des Buttons an, ohne es zu strecken */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
    background-position: center; /* Zentriert das Bild im Button */
    color: transparent; /* Macht den Text unsichtbar, damit nur das Bild sichtbar ist */
    width: 46px; /* Setzt die Breite automatisch entsprechend des Inhalts */
    height: 76px; /* Passt die Höhe an, um das Bild vollständig anzuzeigen */
    padding: 10px 20px; /* Hinzufügen von etwas Platz um das Bild */
}