You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
191 lines
2.7 KiB
191 lines
2.7 KiB
body { |
|
font-family: Arial, sans-serif; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
.container { |
|
background: #f9f9f9; |
|
padding: 30px; |
|
border-radius: 8px; |
|
margin-top: 20px; /* Reduced space since header is now sticky */ |
|
} |
|
|
|
.form-group { |
|
margin-bottom: 20px; |
|
} |
|
|
|
label { |
|
display: block; |
|
margin-bottom: 5px; |
|
font-weight: bold; |
|
} |
|
|
|
input, textarea { |
|
width: 100%; |
|
padding: 10px; |
|
border: 1px solid #ddd; |
|
border-radius: 4px; |
|
} |
|
|
|
button { |
|
background: #007cba; |
|
color: white; |
|
padding: 12px 20px; |
|
border: none; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
} |
|
|
|
button:hover { |
|
background: #005a87; |
|
} |
|
|
|
.danger-button { |
|
background: #dc3545; |
|
} |
|
|
|
.danger-button:hover { |
|
background: #c82333; |
|
} |
|
|
|
.status { |
|
margin-top: 20px; |
|
margin-bottom: 20px; |
|
padding: 10px; |
|
border-radius: 4px; |
|
} |
|
|
|
.success { |
|
background: #d4edda; |
|
color: #155724; |
|
} |
|
|
|
.error { |
|
background: #f8d7da; |
|
color: #721c24; |
|
} |
|
|
|
.info { |
|
background: #d1ecf1; |
|
color: #0c5460; |
|
} |
|
|
|
.header-panel { |
|
position: sticky; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
background-color: #f8f9fa; |
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
z-index: 1000; |
|
height: 60px; |
|
display: flex; |
|
align-items: center; |
|
background-size: cover; |
|
background-position: center; |
|
overflow: hidden; |
|
} |
|
|
|
.header-content { |
|
display: flex; |
|
align-items: center; |
|
height: 100%; |
|
padding: 0 0 0 12px; |
|
width: 100%; |
|
margin: 0 auto; |
|
box-sizing: border-box; |
|
} |
|
|
|
.header-left { |
|
display: flex; |
|
align-items: center; |
|
justify-content: flex-start; |
|
height: 100%; |
|
} |
|
|
|
.header-center { |
|
display: flex; |
|
flex-grow: 1; |
|
align-items: center; |
|
justify-content: flex-start; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.header-right { |
|
display: flex; |
|
align-items: center; |
|
justify-content: flex-end; |
|
height: 100%; |
|
} |
|
|
|
.header-logo { |
|
height: 100%; |
|
aspect-ratio: 1 / 1; |
|
width: auto; |
|
border-radius: 0; |
|
object-fit: cover; |
|
flex-shrink: 0; |
|
} |
|
|
|
.user-avatar { |
|
width: 2em; |
|
height: 2em; |
|
border-radius: 50%; |
|
object-fit: cover; |
|
border: 2px solid white; |
|
margin-right: 10px; |
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2); |
|
} |
|
|
|
.user-profile { |
|
display: flex; |
|
align-items: center; |
|
position: relative; |
|
z-index: 1; |
|
} |
|
|
|
.user-info { |
|
font-weight: bold; |
|
font-size: 1.2em; |
|
text-align: left; |
|
} |
|
|
|
.user-name { |
|
font-weight: bold; |
|
font-size: 1em; |
|
display: block; |
|
} |
|
|
|
.profile-banner { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
top: 0; |
|
left: 0; |
|
z-index: -1; |
|
opacity: 0.7; |
|
} |
|
|
|
.logout-button { |
|
background: transparent; |
|
color: #6c757d; |
|
border: none; |
|
font-size: 20px; |
|
cursor: pointer; |
|
padding: 0; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
width: 48px; |
|
height: 100%; |
|
margin-left: 10px; |
|
margin-right: 0; |
|
flex-shrink: 0; |
|
} |
|
|
|
.logout-button:hover { |
|
background: transparent; |
|
color: #343a40; |
|
} |