diff --git a/admin_ui/src/components/RowFilter.vue b/admin_ui/src/components/RowFilter.vue index 88552f65..287ab9a4 100644 --- a/admin_ui/src/components/RowFilter.vue +++ b/admin_ui/src/components/RowFilter.vue @@ -131,6 +131,16 @@ div.filter_wrapper { position: absolute; top: 0.5rem; right: 0.5rem; + background-color: rgb(147, 41, 41); + font-weight: bolder; + + &:hover { + background-color: lighten(rgb(147, 41, 41), 10%); + } + + &:active { + outline: 0.2rem solid rgb(207, 118, 118); + } } } diff --git a/admin_ui/src/components/SidebarNav.vue b/admin_ui/src/components/SidebarNav.vue index e777c4a7..92bc349a 100644 --- a/admin_ui/src/components/SidebarNav.vue +++ b/admin_ui/src/components/SidebarNav.vue @@ -88,7 +88,7 @@ export default defineComponent({ div.sidebar { background-color: rgba(0, 0, 0, 0.1); overflow-y: auto; - height: 100%; + height: calc(100vh - 5rem); p { padding: 0.5rem; diff --git a/admin_ui/src/main.less b/admin_ui/src/main.less index f1cee557..80263609 100644 --- a/admin_ui/src/main.less +++ b/admin_ui/src/main.less @@ -64,7 +64,15 @@ button { a { color: @dark_blue; - &:hover { + &.button:hover { + background-color: lighten(@dark_blue, 10%); + } + + &.button:active { + outline: 0.2rem solid lightblue; + } + + &:not(.button):hover { color: lighten(@dark_blue, 10%); } @@ -120,10 +128,14 @@ button { a { color: @light_blue; - &:hover { + &:not(.button):hover { color: lighten(@light_blue, 10%); } + &.button:hover { + background-color: lighten(@light_blue, 10%); + } + &.subtle { color: @off_white; @@ -221,6 +233,7 @@ textarea { button { width: 100%; + border-radius: 0.5rem; } textarea { @@ -254,6 +267,10 @@ button { transition: background-color 0.5s; } + &:active { + outline: 0.2rem solid lightblue; + } + &:disabled { opacity: 0.8; } @@ -270,11 +287,18 @@ a { background-color: @dark_blue; color: white; font-size: 0.7em; - padding: 0.3rem 0.5rem; + padding: 0.5rem 0.8rem; text-transform: uppercase; + border-radius: 0.5rem; + font-size: 0.8rem; - &:hover { - color: white; + + &.button:hover { + background-color: lighten(@dark_blue, 10%); + } + + &:active { + outline: 0.2rem solid lightblue; } } } @@ -295,4 +319,4 @@ div.quillWrapper .ql-snow.ql-toolbar .ql-formats { .ql-snow .ql-picker.ql-header { margin-top: 1rem; } -} \ No newline at end of file +} diff --git a/admin_ui/src/views/RowListing.vue b/admin_ui/src/views/RowListing.vue index 8550fb57..28522c13 100644 --- a/admin_ui/src/views/RowListing.vue +++ b/admin_ui/src/views/RowListing.vue @@ -815,6 +815,7 @@ div.wrapper { cursor: pointer; display: flex; flex-direction: row; + column-gap: 0.5rem; @media (max-width: @mobile_width) { width: 100%; @@ -827,12 +828,9 @@ div.wrapper { text-decoration: none; margin-left: 0.25rem; box-sizing: border-box; - padding: 0.2rem 0.5rem; + padding: 0.5rem 0.8rem; text-align: center; - - &:hover { - color: white; - } + font-size: 0.8rem; @media (max-width: @mobile_width) { flex-grow: 1; @@ -858,6 +856,7 @@ div.wrapper { div.left_column, div.right_column { overflow: auto; + height: calc(100vh - 5rem); padding: 0.5rem; } @@ -867,6 +866,7 @@ div.wrapper { div.table_wrapper { position: relative; + overflow: auto; p#loading_indicator { position: absolute;