diff --git a/templates/index.html b/templates/index.html
index f35eab3..bdfc0a3 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -120,10 +120,9 @@
}
#search-container {
margin-top: 20px;
- text-align: left;
display: flex;
- justify-content: space-between;
- align-items: center;
+ align-items: center;
+ gap: 10px; /* Расстояние между элементами */
}
#search-container.dark-theme input, #search-container.dark-theme select {
background-color: #333;
@@ -209,71 +208,57 @@
margin-right: 5px;
}
.connection-link.dark-theme { color: #66b3ff; }
- .edit-button {
- background: #fff;
- color: #007bff;
- border: 1px solid #007bff;
- padding: 2px 5px;
+ .edit-button, .copy-button, .action-buttons button, #add-modal button, #note-modal button, .export-import-container button, #import-label, .theme-toggle {
+ background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
+ color: #fff;
+ border: none;
border-radius: 3px;
cursor: pointer;
- margin: 0 2px;
- transition: background 0.2s ease;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ transition: all 0.3s ease;
+ padding: 5px 10px;
+ font-size: 14px;
}
- .edit-button.dark-theme {
- background: #2a2a2a;
- color: #66b3ff;
- border-color: #66b3ff;
+ .edit-button:hover, .copy-button:hover, .action-buttons button:hover, #add-modal button:hover, #note-modal button:hover, .export-import-container button:hover, #import-label:hover, .theme-toggle:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
+ background: linear-gradient(90deg, #3d9afe 0%, #00d4fe 100%);
}
- .edit-button:hover {
- background: #e0e0e0;
- color: #0056b3;
+ .edit-button.dark-theme, .copy-button.dark-theme, .action-buttons button.dark-theme, #add-modal button.dark-theme, #note-modal button.dark-theme, .export-import-container button.dark-theme, #import-label.dark-theme, .theme-toggle.dark-theme {
+ background: linear-gradient(90deg, #2a6eb4 0%, #1e90ff 100%);
}
- .edit-button.dark-theme:hover {
- background: #444;
- color: #99ccff;
+ .edit-button.dark-theme:hover, .copy-button.dark-theme:hover, .action-buttons button.dark-theme:hover, #add-modal button.dark-theme:hover, #note-modal button.dark-theme:hover, .export-import-container button.dark-theme:hover, #import-label.dark-theme:hover, .theme-toggle.dark-theme:hover {
+ background: linear-gradient(90deg, #1e5ea4 0%, #1c7ed6 100%);
}
- .copy-button {
- background: #fff;
- color: #28a745;
- border: 1px solid #28a745;
- padding: 2px 5px;
- border-radius: 3px;
+ #add-record-button {
+ display: block;
+ margin-top: 30px; /* Увеличенный отступ сверху */
+ margin-left: auto; /* Сдвиг вправо */
+ width: 250px;
+ height: 60px;
+ font-size: 18px;
+ font-weight: bold;
+ color: #fff;
+ background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
+ border: none;
+ border-radius: 30px;
cursor: pointer;
- margin: 0 2px;
- transition: background 0.2s ease;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ transition: all 0.3s ease;
}
- .copy-button.dark-theme {
- background: #2a2a2a;
- color: #5cb85c;
- border-color: #5cb85c;
+ #add-record-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+ background: linear-gradient(90deg, #3d9afe 0%, #00d4fe 100%);
}
- .copy-button:hover {
- background: #e0e0e0;
- color: #218838;
+ #add-record-button.dark-theme {
+ background: linear-gradient(90deg, #2a6eb4 0%, #1e90ff 100%);
}
- .copy-button.dark-theme:hover {
- background: #444;
- color: #8de28d;
+ #add-record-button.dark-theme:hover {
+ background: linear-gradient(90deg, #1e5ea4 0%, #1c7ed6 100%);
}
- .action-buttons { margin-left: 5px; }
- .action-buttons button { margin: 0 2px; }
#import-form { margin-top: 5px; }
#import-file { display: none; }
- #import-label {
- cursor: pointer;
- background: #007bff;
- color: white;
- padding: 5px 10px;
- border-radius: 3px;
- margin-left: 5px;
- }
- #import-label.dark-theme {
- background: #004d99;
- border-color: #004d99;
- }
- #import-label:hover { background: #0056b3; }
- #import-label.dark-theme:hover { background: #0066cc; }
- .folder-select { margin-bottom: 5px; width: 150px; }
.time-hint { font-size: 12px; color: #666; margin-top: 5px; }
.time-hint.dark-theme { color: #bbb; }
#notes-panel {
@@ -312,7 +297,7 @@
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
#add-modal .markdown-buttons, #note-modal .markdown-buttons { margin-bottom: 10px; }
- #add-modal .markdown-buttons button, #note-modal .markdown-buttons button { margin-right: 5px; padding: 5px 10px; }
+ #add-modal .markdown-buttons button, #note-modal .markdown-buttons button { margin-right: 5px; }
#add-modal textarea, #note-modal textarea { width: 100%; height: 200px; margin-bottom: 10px; }
#add-modal.dark-theme textarea, #note-modal.dark-theme textarea {
background: #333;
@@ -325,14 +310,6 @@
#add-modal .image-upload input, #note-modal .image-upload input {
margin-right: 10px;
}
- #add-modal button, #note-modal button { margin-right: 10px; }
- #add-modal.dark-theme button, #note-modal.dark-theme button {
- background: #007bff;
- color: white;
- border-color: #007bff;
- }
- #add-modal button:hover, #note-modal button:hover { background: #0056b3; }
- #add-modal.dark-theme button:hover, #note-modal.dark-theme button:hover { background: #004d99; }
#modal-overlay {
display: none;
position: fixed;
@@ -345,61 +322,6 @@
}
.header-logo { display: flex; align-items: center; }
.header-logo img { height: 50px; margin-right: 10px; }
- .theme-toggle {
- cursor: pointer;
- background: #007bff;
- color: white;
- border: 1px solid #007bff;
- padding: 5px 10px;
- border-radius: 3px;
- margin-left: 10px;
- transition: background 0.2s ease;
- }
- .theme-toggle:hover {
- background: #0056b3;
- }
- .theme-toggle.dark-theme {
- background: #004d99;
- border-color: #004d99;
- }
- .theme-toggle.dark-theme:hover {
- background: #0066cc;
- }
- .export-import-container {
- display: flex;
- justify-content: flex-end;
- margin-top: 10px;
- }
- .export-import-container button {
- margin-left: 10px;
- }
- #add-record-button {
- display: block;
- margin-left: 0;
- margin-top: 20px;
- width: 250px;
- height: 60px;
- font-size: 18px;
- font-weight: bold;
- color: #fff;
- background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
- border: none;
- border-radius: 30px;
- cursor: pointer;
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
- transition: all 0.3s ease;
- }
- #add-record-button:hover {
- transform: translateY(-2px);
- box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
- background: linear-gradient(90deg, #3d9afe 0%, #00d4fe 100%);
- }
- #add-record-button.dark-theme {
- background: linear-gradient(90deg, #2a6eb4 0%, #1e90ff 100%);
- }
- #add-record-button.dark-theme:hover {
- background: linear-gradient(90deg, #1e5ea4 0%, #1c7ed6 100%);
- }