diff --git a/template/index.html b/template/index.html index 61c5315..f0363ea 100644 --- a/template/index.html +++ b/template/index.html @@ -91,9 +91,8 @@ - -
diff --git a/template/static/stylesheets/app.css b/template/static/stylesheets/app.css index 92d0bb4..93f9e15 100644 --- a/template/static/stylesheets/app.css +++ b/template/static/stylesheets/app.css @@ -1,3 +1,7 @@ +:root { + --color-primary: #007bff; +} + [v-cloak] { display: none !important; } @@ -10,9 +14,18 @@ body { transition: none; } +select.form-control { + -webkit-appearance: none; +} + +select.form-control:not([multiple]):not([size]) { + background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.6rem .6rem; + padding-right: 1.2rem; +} + .form-control:focus { - border-color: #80bdff !important; - box-shadow: inset 0 0 0 2px #80bdff !important; + border-color: var(--color-primary); + box-shadow: 0 0 0 2px rgba(0,123,255,.25), inset 0 1px 1px rgba(16,22,26,.2); } .btn:focus { @@ -67,7 +80,7 @@ body { } .feed-item:active, .nav-select input:checked + .menu-item { - background-color: #007bff; + background-color: var(--color-primary); color: white; } @@ -88,8 +101,7 @@ body { padding-right: 0; } -.settings-dropdown .dropdown-menu { - width: 200px; +.dropdown-menu { box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.07); } @@ -106,10 +118,27 @@ body { color: #dc3545!important; } -.settings-header { - padding: .75rem 0 !important; -} - .modal-backdrop { background-color: rgba(0, 0, 0, 0.7); } + +.nav-tabs .nav-link { + padding: .5rem 0; +} + +.nav-tabs .nav-item + .nav-item { + margin-left: 1rem; +} + +.nav-tabs .nav-link { + border: 0; + border-bottom: 3px solid transparent; + color: inherit; +} + +.nav-tabs .nav-link.active { + color: inherit; + border-radius: 0 !important; + border-color: var(--color-primary); + background-color: transparent; +}