diff --git a/css/views.css b/css/views.css new file mode 100644 index 00000000..86e4c0c8 --- /dev/null +++ b/css/views.css @@ -0,0 +1,61 @@ +#available-views { + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: flex-start; + align-items: center; + padding: 8px; + max-height: 90px; + overflow-y: auto; +} + +.view-button { + background-color: #f1f1f1; + border: 1px solid #000; + border-radius: 5px; + padding: 8px; + margin: 8px; + cursor: pointer; + height: fit-content; +} + +#views { + display: none; + flex-direction: column; + position: fixed; + top: 25%; + left: 10px; + width: fit-content; + height: 50%; + background-color: #e1e1e1; + padding: 15px; + border: 1px solid #000; + border-radius: 5px; +} + +#view-selector { + display: flex; + flex-direction: column; + justify-content: flex-start; + overflow-y: auto; + overflow-x: hidden; + width: fit-content; +} + +.view-selector-menu::-webkit-scrollbar { + width: 7px; +} + +.view-selector-menu::-webkit-scrollbar-track { + background: #e1e1e1; + border-radius: 5px; +} + +.view-selector-menu::-webkit-scrollbar-thumb { + background: #afafaf; + border-radius: 5px; +} + +.view-selector-menu::-webkit-scrollbar-thumb:hover { + background: #858585; +} diff --git a/index.html b/index.html index c9dec4db..3cb6744e 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,7 @@ +
@@ -41,6 +42,8 @@ +Select a view:
+ +