granica

css/styl.css

@@ -1,275 +0,0 @@
-/* Podstawowe style dla zakładek */
-.tab {
-    display: none;
-}
-
-.tab.active {
-    display: block;
-}
-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: right;
-}
-.header-box {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color:  #101820; /* Kolor tła nagłówka */
-    padding: px; /* Padding wewnętrzny dla lepszego wyglądu */
-    color: whitesmoke; /* Kolor tekstu */
-    padding-bottom: 10px;
-    padding-top: 10px;
-    border-radius: 2px;
-}
-
-.header-title {
-    margin-left: auto; /* Przesuwa tytuł na prawo */
-    user-select: none;
-    margin-right: 25px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-}
-
-/* Style dla przycisków kategorii */
-.category-buttons {
-    margin: 10px 0;
-    text-align: center;
-    background-color: s;
-
-   
-}
-
-.category-buttons button {
-    margin: 5px;
-    padding: 10px 15px;
-    font-size: 16px;
-    cursor: pointer;
-    background-color: lightgray;
-    border: 1px solid black;
-    border-radius: 4px;
-    transition: background-color 0.3s, color 0.3s, border 0.3s;
-    user-select: none;
-    font-weight: bold;
-}
-
-.category-buttons button.active {
-    background-color: #FEE715;
-    color: black;
-    font-weight: bold;
-    border: 10px solid #FEE715;
-}
-
-
-
-.up-button button {
-    background:  #FEE715;
-    color: black;
-    padding: 10px 15px;
-    font-size: 16px;
-    font-weight: bold;
-    cursor: pointer;
-    border-radius: 4px;
-    text-align: left;
-    user-select: none;
-    margin-left: 15px;
-    display: inline-block;
-    outline: 0;
-    border: 0;
-    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 0px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset;
-}
-
-
-
-.up-button button:hover {
-    opacity: 0.8;
-    transition: 0.4s;
-    
-}
-
-.up-button button:active {
-    opacity: 0.4;
-}
-
-.button1 button {
-    float: right;
-    background-color: #dbdbdb;
-    color: color;
-    border: none;
-    margin: 5px;
-    padding: 10px 15px;
-    font-size: 16px;
-    font-weight: bold;
-    cursor: pointer;
-    border-radius: 4px;
-    margin-left: 12.5px;
-    user-select: none;
-    margin-top: 15px;
-    margin-left: 15px;
-}
-
-#clear {
-    clear: both;
-}
-
-.button1 button:hover {
-    opacity: 0.8;
-    transition: 0.2s;
-}
-
-.button1 button:active {
-    opacity: 0.5;
-}
-
-.tag {
-    color: white;
-    user-select: none;
-}
-
-.container {
-    display: flex;
-    flex-direction: column; /* Elementy jeden pod drugim */
-    align-items: flex-start; /* Ustawia elementy po lewej stronie */
-    margin-left: 20px; /* Możesz dostosować margines według potrzeb */
-}
-
-.select-class {
-    margin: 10px 0; /* Dostosuj odstęp między elementami */
-}
-
-
-/* Stylizacja tabeli */
-table {
-    clear: both;
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 20px;
-    background-color: whitesmoke;
-    user-select: none;
-}
-
-th, td {
-    border: 1px solid grey;
-    padding: 8px;
-    text-align: center;
-}
-
-th {
-    background-color: whitesmoke;
-}
-
-tr:nth-child(even) {
-    background-color: whitesmoke;
-}
-
-/* Stylizacja kontenera klasy */
-.select-class {
-    text-align: center;
-}
-
-.select-role {
-    text-align: center;
-    user-select: none;
-}
-
-.select-class select {
-    padding: 5px;
-    font-size: 16px;
-    border: 1px solid lightgray;
-    border-radius: 4px;
-    user-select: none;
-}
-
-.select-role select {
-    padding: 5px;
-    font-size: 16px;
-    border: 1px solid lightgray;
-    border-radius: 4px;
-}
-
-/* Stylizacja nagłówków */
-h1, h2, h3 {
-    text-align: center;
-    color: whitesmoke;
-    user-select: none;
-}
-
-/* Dodatkowe style dla układu */
-body {
-    font-family: Arial, sans-serif;
-    margin: 20px;
-    background-color: gray;
-    user-select: none;
-}
-
-/* Stylizacja stopki */
-footer.footer {
-    width: 100%;
-    padding: 5px 0;
-    background-color: #101820;
-    color: white;
-}
-
-.footer-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-}
-
-.footer-left, .footer-right {
-    width: 100%;
-}
-
-.footer-left {
-    text-align: left;
-}
-
-.footer-right {
-    text-align: right;
-}
-
-.footer-line {
-    border: none;
-    border-top: 2px solid black;
-    margin: 20px 0;
-    width: 100%;
-}
-
-/* Dodatkowe style dla estetyki */
-.footer-left p,
-.footer-right p {
-    margin: 5px 0;
-    font-size: 10px;
-    font-weight: bold;
-    color: whitesmoke;
-    background-color: #101820;
-    
-    
-}
-
-/* Stylizacja checkboxów */
-input[type="checkbox"] {
-    transform: scale(1.2);
-    cursor: pointer;
-}
-.sticky {
-    position: sticky;
-    top: 0;
-    background-color: white; /* lub inny kolor, aby tło było widoczne */
-    z-index: 1000; /* zapewnia, że będzie na wierzchu */
-    border-bottom: 1px solid #ccc; /* opcjonalnie, aby oddzielić od treści */
-}
-
-.dark-background {
-    background-color: #2e2e2e; /* Ciemnoszare tło */
-    color: black; /* Jasny kolor tekstu dla lepszej czytelności */
-    margin: 0;
-    padding: 0;
-    font-family: Arial, sans-serif;
-}
-.lead {
-    background-color: #555;
-}
-

css/style.css

@@ -57,13 +57,13 @@ header {
     background-color: #FEE715;
     color: black;
     font-weight: bold;
-    border: 1px solid #FEE715;
+    border: 10px solid #FEE715;
 }
 
 
 
 .up-button button {
-    background:  #0c0c0c;
+    background:  #FEE715;
     color: black;
     padding: 10px 15px;
     font-size: 16px;
@@ -92,7 +92,8 @@ header {
 }
 
 .button1 button {
-    background-color: #FEE715;
+    float: right;
+    background-color: #dbdbdb;
     color: color;
     border: none;
     margin: 5px;
@@ -107,6 +108,10 @@ header {
     margin-left: 15px;
 }
 
+#clear {
+    clear: both;
+}
+
 .button1 button:hover {
     opacity: 0.8;
     transition: 0.2s;
@@ -121,8 +126,6 @@ header {
     user-select: none;
 }
 
-
-
 .container {
     display: flex;
     flex-direction: column; /* Elementy jeden pod drugim */
@@ -137,6 +140,7 @@ header {
 
 /* Stylizacja tabeli */
 table {
+    clear: both;
     width: 100%;
     border-collapse: collapse;
     margin-top: 20px;

index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Ocena Zachowania</title>
-    <link rel="stylesheet" href="css/styl.css">
+    <link rel="stylesheet" href="css/style.css">
     <link rel="icon" type="image/x-icon" href="ikona.png">
     <style>
         table {
@@ -15,7 +15,7 @@
             top: 0;
             background-color: lightgray; /* Kolor tła nagłówka */
             z-index: 10; /* Zapewnia, że nagłówek będzie nad innymi elementami */
-            border: 1px solid #ddd; /* Opcjonalnie: Dodanie obramowania */
+            border: 1px solid black; /* Opcjonalnie: Dodanie obramowania */
             padding: 8px;
         }
     </style>