diff --git a/static/galene.css b/static/galene.css index 322e3ce..539afd5 100644 --- a/static/galene.css +++ b/static/galene.css @@ -1,13 +1,7 @@ - button { background: none; border: 0; -} -.screenreader { - width: 0px; - height: 0px; - overflow: hidden; - margin: 0; + color: inherit; } .nav-fixed .topnav { @@ -129,7 +123,7 @@ button { line-height: .7; } -.sidenav .user-logout button:hover { +.sidenav .user-logout a:hover { color: #ab0659; } @@ -281,12 +275,12 @@ button { } .full-width { - /*width: calc(100vw - 200px);*/ + width: calc(100vw - 200px); height: calc(var(--vh, 1vh) * 100 - 56px); } .full-width-active { -/* width: 100vw;*/ + width: 100vw; } .container { @@ -324,6 +318,7 @@ button { resize: none; overflow: hidden; padding: 5px; + outline: none; border: none; text-indent: 5px; box-shadow: none; @@ -451,13 +446,6 @@ textarea.form-reply { white-space: pre-wrap; } -.message button { - margin: 1em; - padding: .4em .8em; - border-radius: .7em; - background: #a1ceff; -} - .video-container { height: calc(var(--vh, 1vh) * 100 - 56px); position: relative; @@ -485,7 +473,7 @@ textarea.form-reply { } .collapse-video { - left: calc(-100vw); + left: 30px; right: inherit; } @@ -536,7 +524,6 @@ textarea.form-reply { background: linear-gradient(180deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 70%) 100%); } -.peer:focus-within > .video-controls, .peer:focus-within > .top-video-controls, .peer:hover > .video-controls, .peer:hover > .top-video-controls { opacity: 1; } @@ -548,10 +535,6 @@ textarea.form-reply { cursor: pointer; } -.peer button i { - color: #eaeaea; -} - .video-controls span:last-child, .top-video-controls span:last-child { margin-right: 0; } @@ -606,7 +589,6 @@ textarea.form-reply { transition: opacity .5s ease-out; } -.video-controls .volume:focus-within, .video-controls .volume:hover { --ov: 1; --dv: inline; @@ -687,7 +669,7 @@ textarea.form-reply { } .nav-cancel, .muted, .nav-cancel label, .muted label { - color: #d03e3e; + color: #d03e3e } .nav-cancel:hover, .muted:hover, .nav-cancel label:hover, .muted label:hover { @@ -699,7 +681,7 @@ textarea.form-reply { font-size: 25px; } -#openside .nav-more { +.nav-more { padding-top: 5px; margin-left: 0; } @@ -810,25 +792,21 @@ h1 { } #filterselect { - width: 8em; text-align-last: center; margin-right: 0.4em; } #sendselect { - width: 8em; text-align-last: center; margin-right: 0.4em; } #simulcastselect { - width: 8em; text-align-last: center; margin-right: 0.4em; } #requestselect { - width: 8em; text-align-last: center; } @@ -892,6 +870,14 @@ h1 { overflow-y: hidden; } +#input:focus { + outline: none; +} + +#inputbutton:focus { + outline: none; +} + #resizer { width: 4px; margin-left: -4px; @@ -989,10 +975,6 @@ h1 { color: #c2a4e0; } -.sidenav button:hover { - color: #c2a4e0; -} - .sidenav .closebtn { cursor: pointer; position: absolute; @@ -1135,22 +1117,9 @@ header .collapse:hover { } /* Shrinking the sidebar from 200px to 0px */ -#sidebarnav { - display: none; - width: 250px; -} - -#sidebarnav[open=true] { - display: block; -} - #left-sidebar.active { - display: none; -} - -#left-sidebar:not(.active) { - display: block; - width:200px; + min-width: 0; + max-width: 0; } #left-sidebar .sidebar-header strong { @@ -1185,21 +1154,17 @@ header .collapse:hover { cursor: pointer; overflow: hidden; white-space: pre; - display: block; width: 100%; text-align: left; } -#left-sidebar.active #users > button { +#left-sidebar.active #users > div { padding: 10px 5px !important; } -#users > button:hover { +#users > div:hover { background-color: #f2f2f2; } -#users > button:focus, #users > button:focus-visible { - outline-offset: -2px; -} #users > button::before { content: "\f111"; @@ -1274,10 +1239,6 @@ header .collapse:hover { display: none; } - .video-on #chat { - display: none; - } - .video-container { position: fixed; height: calc(var(--vh, 1vh) * 100 - 56px); @@ -1308,7 +1269,7 @@ header .collapse:hover { flex: 100%; width: 100vw; /* chat is always visible here */ - display: block /*!important*/; + display: block !important; } .coln-right { @@ -1320,7 +1281,6 @@ header .collapse:hover { width: 100vw; } -/* #left-sidebar.active { min-width: 200px; max-width: 200px; @@ -1330,11 +1290,10 @@ header .collapse:hover { min-width: 0; max-width: 0; } -*/ + /* Reappearing the sidebar on toggle button click */ #left-sidebar { margin-left: 0; - z-index: 1; } #left-sidebar .sidebar-header strong { @@ -1349,7 +1308,7 @@ header .collapse:hover { display: block; } - .sidenav a {padding: 10px 10px;} + .sidenav button {padding: 10px 10px;} .sidenav-header h2 { line-height: 36px; @@ -1417,12 +1376,6 @@ header .collapse:hover { margin-right: 10px; } -.contextualMenu button { - outline-offset: 3px; - display: inline-block; - width: calc(100% - 2em); -} - #invite-dialog { background-color: #eee; } @@ -1449,28 +1402,3 @@ header .collapse:hover { .toastify.info .toast-close { color: #000; } -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -/* wrong preset for some browser! */ -video::-webkit-media-controls-enclosure { - display: none !important; -} - -video::-webkit-media-controls-panel { - display: none !important; -} - -video::-webkit-media-controls { - display: none !important; -} - diff --git a/static/galene.html b/static/galene.html index b35d76c..dcf997a 100644 --- a/static/galene.html +++ b/static/galene.html @@ -13,26 +13,23 @@ -
- -