guziki
This commit is contained in:
parent
1ee04d3740
commit
3a82b8d3cc
|
|
@ -0,0 +1,275 @@
|
|||
/* 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;
|
||||
}
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ header {
|
|||
|
||||
|
||||
.up-button button {
|
||||
background: #FEE715;
|
||||
background: #0c0c0c;
|
||||
color: black;
|
||||
padding: 10px 15px;
|
||||
font-size: 16px;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ocena Zachowania</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/styl.css">
|
||||
<link rel="icon" type="image/x-icon" href="ikona.png">
|
||||
<style>
|
||||
table {
|
||||
|
|
@ -146,7 +146,7 @@
|
|||
|
||||
<!-- Zakładka "Kryteria oceny zachowania" -->
|
||||
<div id="criteria" class="tab active">
|
||||
<h2>Kryteria oceny zachowania - <span id="current-date"></span></h2>
|
||||
<h2 id="clear">Kryteria oceny zachowania - <span id="current-date"></span></h2>
|
||||
|
||||
|
||||
<div class="select-role">
|
||||
|
|
@ -196,7 +196,7 @@
|
|||
<div class="footer-left">
|
||||
<p>B. Hrynowiecki</p>
|
||||
<p>K. Michalak</p>
|
||||
<p>J. Kukiela Z miłością wpisany na listę</p>
|
||||
<p>J. Kukiela</p>
|
||||
<p>A. Guzik</p>
|
||||
<p>F. Kowalski</p>
|
||||
<p>S. Ptak</p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue