152 lines
2.6 KiB
CSS
152 lines
2.6 KiB
CSS
.page {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: rgb(50,50,50);
|
|
color: lightgrey;
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
}
|
|
|
|
.sidebar {
|
|
background-image: linear-gradient(180deg, rgb(0 0 0) 0%, #932c36 70%);
|
|
}
|
|
|
|
.loginText {
|
|
color: lightgrey;
|
|
}
|
|
|
|
::deep .nav-link {
|
|
color: lightskyblue;
|
|
width: fit-content;
|
|
}
|
|
|
|
::deep input {
|
|
background-color: #555555;
|
|
border: none;
|
|
color: lightgray;
|
|
border-radius: 6px;
|
|
padding: 4px;
|
|
}
|
|
|
|
::deep input:disabled {
|
|
background-color: #777777;
|
|
color: darkgrey;
|
|
}
|
|
|
|
::deep textarea {
|
|
background-color: #555555;
|
|
border: none;
|
|
color: lightgray;
|
|
border-radius: 6px;
|
|
padding: 4px;
|
|
}
|
|
|
|
::deep textarea:disabled {
|
|
background-color: #777777;
|
|
color: darkgrey;
|
|
}
|
|
|
|
::deep select {
|
|
background-color: #555555;
|
|
border: none;
|
|
color: lightgray;
|
|
border-radius: 6px;
|
|
padding: 4px;
|
|
}
|
|
|
|
::deep select:disabled {
|
|
background-color: #777777;
|
|
color: darkgrey;
|
|
}
|
|
|
|
::deep button {
|
|
color: lightgray;
|
|
background-color: #555555;
|
|
width: 130px;
|
|
/*border: none;*/
|
|
padding: 8px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
margin: 4px 2px;
|
|
cursor: pointer;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
::deep button:disabled {
|
|
/*background-color: #777777;
|
|
color: darkgrey;*/
|
|
background-color: rgb(38,38,38);
|
|
color: rgb(38,38,38);
|
|
}
|
|
|
|
::deep button[type="submit"] {
|
|
color: lightgray;
|
|
background-color: #355835;
|
|
border: none;
|
|
}
|
|
|
|
::deep button[type="delete"] {
|
|
color: lightgray;
|
|
background-color: #6e2424;
|
|
border: none;
|
|
}
|
|
|
|
.top-row {
|
|
background-color: #202020;
|
|
border-bottom: 1px solid #d6d5d5;
|
|
justify-content: flex-end;
|
|
height: 3.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.top-row ::deep a, .top-row .btn-link {
|
|
white-space: nowrap;
|
|
margin-left: 1.5rem;
|
|
}
|
|
|
|
.top-row a:first-child {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
@media (max-width: 640.98px) {
|
|
.top-row:not(.auth) {
|
|
display: none;
|
|
}
|
|
|
|
.top-row.auth {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.top-row a, .top-row .btn-link {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 641px) {
|
|
.page {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 250px;
|
|
height: 100vh;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
.top-row {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.top-row, article {
|
|
padding-left: 2rem !important;
|
|
padding-right: 1.5rem !important;
|
|
}
|
|
}
|