Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* Der Hauptbereich zwischen fixiertem Header und Footer */
- .main-between-fixed {
- position: fixed;
- top: 60px; /* Höhe deines Headers anpassen */
- bottom: 40px; /* Höhe deines Footers anpassen */
- left: 50%;
- transform: translateX(-50%);
- width: 100%; /* feste Breite */
- background: #2a2a2a;
- padding: 20px;
- box-sizing: border-box;
- overflow-y: auto;
- border-radius: 8px;
- color: #ddd;
- font-family: Arial, sans-serif;
- z-index: 5;
- }
- .page-title {
- margin-top: 0;
- margin-bottom: 15px;
- color: #ffa500;
- text-align: center;
- user-select: none;
- }
- .top-buttons {
- margin-bottom: 20px;
- display: flex;
- gap: 15px;
- }
- .btn {
- background-color: #ffa500;
- color: #1e1e1e;
- padding: 8px 16px;
- border-radius: 4px;
- text-decoration: none;
- font-weight: bold;
- user-select: none;
- white-space: nowrap;
- transition: background-color 0.3s ease;
- }
- .btn:hover {
- background-color: #cc8400;
- }
- .info-msg {
- background-color: #444;
- padding: 10px;
- border-radius: 5px;
- margin-bottom: 15px;
- color: #eee;
- user-select: none;
- }
- .breadcrumb {
- margin-bottom: 20px;
- color: #aaa;
- user-select: none;
- }
- .breadcrumb a {
- color: #ffa500;
- text-decoration: none;
- }
- .breadcrumb a:hover {
- text-decoration: underline;
- }
- .content-wrapper {
- display: flex;
- gap: 20px;
- height: calc(100% - 170px); /* Höhe anpassen, damit scrollbar bleibt */
- }
- .sidebar {
- width: 400px;
- background-color: #3a3a3a;
- padding: 10px;
- border-radius: 5px;
- overflow-y: auto;
- user-select: none;
- }
- .tree {
- list-style: none;
- padding-left: 0;
- margin-bottom: 20px;
- }
- .tree li.folder {
- margin-bottom: 8px;
- }
- .tree li.folder.active-folder > a {
- font-weight: bold;
- color: #ffa500;
- }
- .new-folder-form {
- display: flex;
- gap: 5px;
- }
- .new-folder-form input[type="text"] {
- flex-grow: 1;
- padding: 6px;
- border-radius: 4px;
- border: none;
- }
- .new-folder-form button {
- background-color: #ffa500;
- border: none;
- padding: 6px 12px;
- cursor: pointer;
- border-radius: 4px;
- font-weight: bold;
- }
- .new-folder-form button:hover {
- background-color: #cc8400;
- }
- .content {
- flex-grow: 1;
- background-color: #404040;
- padding: 15px;
- border-radius: 5px;
- overflow-y: auto;
- user-select: none;
- display: flex;
- flex-direction: column;
- }
- .upload-form {
- margin-bottom: 20px;
- }
- .upload-form input[type="file"] {
- margin-right: 10px;
- }
- .upload-form button {
- background-color: #ffa500;
- border: none;
- padding: 8px 16px;
- cursor: pointer;
- border-radius: 4px;
- font-weight: bold;
- }
- .upload-form button:hover {
- background-color: #cc8400;
- }
- .file-list {
- flex-grow: 1;
- overflow-y: auto;
- user-select: text;
- }
- .file-item,
- .subfolder {
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- gap: 10px;
- }
- .file-placeholder {
- padding: 5px 10px;
- background-color: #555;
- border-radius: 3px;
- color: #ccc;
- }
- .thumb {
- max-width: 100px;
- max-height: 100px;
- border-radius: 4px;
- object-fit: cover;
- }
- .delete-link {
- color: #ff5050;
- margin-left: auto;
- cursor: pointer;
- text-decoration: none;
- }
- .delete-link:hover {
- text-decoration: underline;
- }
- .logout-button {
- background-color: blue;
- color: #fff;
- padding: 8px 16px;
- border-radius: 10px;
- text-decoration: none;
- font-weight: bold;
- user-select: none;
- white-space: nowrap;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement