Popup: remove bullshit scrollbars in Chrome. Move scrollbar in site lists to the left.

This commit is contained in:
Tamius Han 2019-07-06 22:39:59 +02:00
parent 9cbd2fc34c
commit 4cd67161ba
3 changed files with 19 additions and 7 deletions

View File

@ -28,10 +28,10 @@
class="" class=""
> >
<small>Select site to control:</small> <small>Select site to control:</small>
<div class="site-list overflow-y-auto scrollbar-darker"> <div class="site-list overflow-y-auto scrollbar-darker rtl no-overflow-x">
<div v-for="site of activeSites" <div v-for="site of activeSites"
:key="site.host" :key="site.host"
class="tabitem" class="tabitem ltr"
:class="{ :class="{
'tabitem-selected': site.host === selectedSite, 'tabitem-selected': site.host === selectedSite,
'tabitem-disabled': !settings.canStartExtension(site.host) 'tabitem-disabled': !settings.canStartExtension(site.host)
@ -54,9 +54,9 @@
class="" class=""
> >
<small>Select embedded frame to control:</small> <small>Select embedded frame to control:</small>
<div class="site-list overflow-y-auto scrollbar-darker"> <div class="site-list overflow-y-auto scrollbar-darker rtl no-overflow-x">
<div v-for="frame of activeFrames" <div v-for="frame of activeFrames"
class="tabitem" class="tabitem ltr"
:class="{ :class="{
'tabitem-selected': selectedFrame === frame.id, 'tabitem-selected': selectedFrame === frame.id,
'disabled': !isDefaultFrame(frame.id) && !settings.canStartExtension(frame.label) 'disabled': !isDefaultFrame(frame.id) && !settings.canStartExtension(frame.label)
@ -81,10 +81,10 @@
class="" class=""
> >
<small>Select site to control:</small> <small>Select site to control:</small>
<div class="site-list overflow-y-auto scrollbar-darker"> <div class="site-list overflow-y-auto scrollbar-darker rtl no-overflow-x">
<div v-for="site of activeSites" <div v-for="site of activeSites"
:key="site.host" :key="site.host"
class="tabitem" class="tabitem ltr"
:class="{'tabitem-selected': site.host === selectedSite}" :class="{'tabitem-selected': site.host === selectedSite}"
@click="selectSite(site.host)" @click="selectSite(site.host)"
> >

View File

@ -9,7 +9,7 @@
<!-- Load some resources only in development environment --> <!-- Load some resources only in development environment -->
<% } %> <% } %>
</head> </head>
<body style="width: 800px; height: 600px; overflow-x: hidden"> <body style="width: 800px; height: 600px; overflow: hidden !important">
<div id="app"> <div id="app">
</div> </div>

View File

@ -74,6 +74,10 @@ body {
overflow: hidden; overflow: hidden;
} }
.no-overflow-x {
overflow-x: hidden;
}
.no-overflow-y { .no-overflow-y {
overflow-y: hidden; overflow-y: hidden;
} }
@ -362,3 +366,11 @@ small {
bottom: 0px; bottom: 0px;
background-color: rgba($background-primary, 0.7); background-color: rgba($background-primary, 0.7);
} }
.rtl {
direction: rtl;
}
.ltr {
direction: ltr;
}