ryan/Notes
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

more style to the buttons and form

Browse Source
This commit is contained in:
Ryan Peters
2025-07-17 17:13:27 -04:00
parent 14e56285f5
commit 1279e16fad
2 changed files with 113 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Views/Note/Index.cshtml
View File

@@ -11,10 +11,10 @@
} }
</select> </select>
<a asp-action="Delete" asp-controller="Note" asp-route-noteName="@Model.CurrentNote" class="btn btn-danger">Delete</a> <a asp-action="Delete" asp-controller="Note" asp-route-noteName="@Model.CurrentNote" class="btn-symbol btn-delete" title="Delete Note">✕</a>
<form method="post" class="action-form" asp-action="Create" asp-controller="Note"> <form method="post" class="action-form" asp-action="Create" asp-controller="Note">
<input type="text" name="noteName" placeholder="Note name" /> <input type="text" name="noteName" placeholder="Note name" />
<button type="submit" class="btn btn-primary">Create</button> <button type="submit" class="btn-symbol btn-create" title="Create Note">💾</button>
</form> </form>
</div> </div>

122
wwwroot/css/site.css
View File

@@ -25,11 +25,120 @@ div.note-actions {
bottom: 5px; bottom: 5px;
left: 0; left: 0;
font-size: 14px; font-size: 14px;
} display: flex;
align-items: center;
gap: 8px;
padding: 8px;
}
select.note-dropdown { select.note-dropdown {
padding: 6px; padding: 6px 8px;
border-radius: 5px; border-radius: 5px;
border: 1px solid #ccc;
background-color: #fff;
font-size: 13px;
min-width: 120px;
max-width: 150px;
}
body.dark select.note-dropdown {
background-color: #333;
color: #ddd;
border: 1px solid #555;
}
form.action-form {
display: inline-flex;
align-items: center;
gap: 4px;
}
form.action-form input[type="text"] {
padding: 6px 8px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 13px;
width: 100px;
background-color: #fff;
}
body.dark form.action-form input[type="text"] {
background-color: #333;
color: #ddd;
border: 1px solid #555;
}
form.action-form input[type="text"]:focus {
outline: none;
border-color: #009E60;
box-shadow: 0 0 0 2px rgba(0, 158, 96, 0.2);
}
.btn-symbol {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 5px;
border: 1px solid;
text-decoration: none;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
line-height: 1;
}
.btn-delete {
background-color: #dc3545;
color: #fff;
border-color: #dc3545;
}
.btn-delete:hover {
background-color: #c82333;
border-color: #bd2130;
transform: scale(1.05);
}
.btn-create {
background-color: #009E60;
color: #fff;
border-color: #009E60;
}
.btn-create:hover {
background-color: #007a4d;
border-color: #006b42;
transform: scale(1.05);
}
/* Mobile responsiveness */
@media (max-width: 768px) {
div.note-actions {
gap: 6px;
padding: 6px;
font-size: 12px;
}
select.note-dropdown {
min-width: 100px;
max-width: 120px;
font-size: 12px;
padding: 5px 6px;
}
form.action-form input[type="text"] {
width: 80px;
font-size: 12px;
padding: 5px 6px;
}
.btn-symbol {
width: 24px;
height: 24px;
font-size: 12px;
}
} }
textarea { textarea {
@@ -97,13 +206,4 @@ form.login-form input[type=password] {
button, select { button, select {
cursor: pointer; cursor: pointer;
}
form button {
color: #fff;
background-color: #009E60;
}
form.action-form {
display: inline;
} }