mirror of
https://github.com/XFox111/TabsAsideExtension.git
synced 2026-04-22 07:58:01 +03:00
Minor 1.5 (#18)
- Updated repository documentation: added contribution guidelines, Code of Conduct, GitHub templates - Updated README - Added confirmation dialog for tabs and collections deletion (#17) - Complete code refactoring (HTML/JS/CSS) - Implemented <iframe> base for embedded pane (#13) (Fixed CSS instability on some websites) - Improved dark theme - Added opensource fonts to replace Segoe UI on Unix systems (#11, #17) - Fixed invisible vertical scrollbar - Code polish and improvement Co-authored-by: Amine A. <15179425+AmineI@users.noreply.github.com> Co-Authored-By: Michael Gordeev <michael@xfox111.net>
This commit is contained in:
Michael Gordeev
GitHub
+123
-143
@@ -1,260 +1,240 @@
|
||||
.tabsAside.background
|
||||
{
|
||||
z-index: 9999 !important;
|
||||
background-color: rgba(255, 255, 255, .5) !important;
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
bottom: 0 !important;
|
||||
right: 0 !important;
|
||||
left: 0 !important;
|
||||
transition: .2s !important;
|
||||
opacity: 0;
|
||||
color: black !important;
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
transition: .2s;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.tabsAside.pane
|
||||
{
|
||||
font-family: 'Segoe UI', 'Segoe MDL2 Assets' !important;
|
||||
user-select: none !important;
|
||||
position: fixed !important;
|
||||
user-select: none;
|
||||
position: fixed;
|
||||
|
||||
right: 0px !important;
|
||||
top: 0px !important;
|
||||
bottom: 0px !important;
|
||||
overflow: auto !important;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
overflow: auto;
|
||||
|
||||
width: 40%;
|
||||
min-width: 500px !important;
|
||||
width: 100%;
|
||||
min-width: 500px;
|
||||
|
||||
background-color: #f7f7f7 !important;
|
||||
border: 1px solid rgba(100, 100, 100, .5) !important;
|
||||
border-width: 0px 0px 0px 1px !important;
|
||||
box-sizing: border-box !important;
|
||||
box-shadow: 6px 0px 12px black !important;
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid rgba(100, 100, 100, .5);
|
||||
border-width: 0px 0px 0px 1px;
|
||||
box-shadow: 6px 0px 12px black;
|
||||
|
||||
font-size: small !important;
|
||||
font-size: 13px;
|
||||
|
||||
transform: translateX(110%); /* Pane is hidden */
|
||||
transition: .2s !important;
|
||||
text-align: initial !important;
|
||||
transform: translateX(110%); /* pane is hidded */
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
aside[embedded]
|
||||
{
|
||||
width: 40% !important;
|
||||
}
|
||||
|
||||
.tabsAside.pane[opened]
|
||||
{
|
||||
transform: translateX(0px) !important;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
/* Pane header*/
|
||||
.tabsAside.pane > header
|
||||
{
|
||||
margin: 20px 40px !important;
|
||||
line-height: initial !important;
|
||||
height: initial !important;
|
||||
margin: 20px 40px;
|
||||
}
|
||||
.tabsAside.pane > header > div
|
||||
{
|
||||
display: grid !important;
|
||||
grid-template-columns: 1fr auto !important;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
.tabsAside.pane > header > div > h1
|
||||
{
|
||||
margin: 10px 0px !important;
|
||||
font-weight: normal !important;
|
||||
font-size: 21pt !important;
|
||||
direction: initial !important;
|
||||
color: inherit !important;
|
||||
line-height: initial !important;
|
||||
font-family: inherit !important;
|
||||
margin: 10px 0px;
|
||||
font-weight: normal;
|
||||
font-size: 21pt;
|
||||
}
|
||||
|
||||
.tabsAside.pane > header > div > button
|
||||
{
|
||||
margin: auto !important;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.tabsAside.pane > header > div > nav
|
||||
{
|
||||
top: 70px !important;
|
||||
right: 40px !important;
|
||||
top: 70px;
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
.tabsAside.pane > header > div > nav > div
|
||||
.tabsAside.pane > header nav > div
|
||||
{
|
||||
box-shadow: 0px 4px 5px -2px rgba(100, 100, 100, .5) !important;
|
||||
cursor: initial !important;
|
||||
overflow: hidden !important;
|
||||
box-shadow: 0px 4px 5px -2px rgba(100, 100, 100, .5);
|
||||
}
|
||||
|
||||
.tabsAside.pane > header > div > nav > p
|
||||
.tabsAside.pane > header nav > p
|
||||
{
|
||||
margin: 10px !important;
|
||||
font-family: inherit !important;
|
||||
font-size: inherit !important;
|
||||
line-height: initial !important;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.tabsAside.pane > header > div > nav > p > small
|
||||
{
|
||||
font-size: inherit !important;
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
.tabsAside.pane > header > div > nav > p > a
|
||||
.tabsAside.pane > header nav > p > a
|
||||
{
|
||||
text-decoration: none;
|
||||
font-size: inherit !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.tabsAside.pane > header > a
|
||||
.iconArrowRight
|
||||
{
|
||||
font-size: inherit;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 13px;
|
||||
background-position: center;
|
||||
background-image: url("chrome-extension://__MSG_@@extension_id__/icons/arrowRight.svg");
|
||||
}
|
||||
|
||||
.tabsAside.pane > header > hr
|
||||
{
|
||||
border: 1px solid #8a8a8a !important;
|
||||
direction: initial !important;
|
||||
color: inherit !important;
|
||||
height: initial !important;
|
||||
margin: 6.5px 0px !important;
|
||||
border: 1px solid #8a8a8a;
|
||||
}
|
||||
|
||||
.tabsAside.pane > section > h2
|
||||
{
|
||||
color: inherit !important;
|
||||
margin: 0px 40px !important;
|
||||
font-weight: normal !important;
|
||||
font-size: 1.5em !important;
|
||||
line-height: normal !important;
|
||||
margin: 0px 40px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Collection header */
|
||||
.tabsAside.pane > section > div
|
||||
{
|
||||
transition: .2s !important;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
.tabsAside.pane > section > div > div:first-child
|
||||
.collectionSet > .header
|
||||
{
|
||||
margin: 0px 20px !important;
|
||||
display: grid !important;
|
||||
grid-template-columns: auto 1fr auto auto auto !important;
|
||||
grid-column-gap: 10px !important;
|
||||
align-items: center !important;
|
||||
margin: 0px 20px;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto auto auto;
|
||||
grid-column-gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tabsAside.pane > section > div > div:first-child > small
|
||||
.collectionSet > .header > small
|
||||
{
|
||||
color: gray !important;
|
||||
font-size: smaller !important;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.tabsAside.pane > section > div > div:first-child > span
|
||||
.collectionSet > .header > span
|
||||
{
|
||||
font-weight: 600 !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tabsAside.pane > section > div > div:first-child > a
|
||||
.collectionSet > .header > a
|
||||
{
|
||||
font-size: 11pt !important;
|
||||
line-height: initial !important;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.tabsAside.pane > section > div > div:first-child > div > nav
|
||||
{
|
||||
width: 250px !important;
|
||||
margin-top: 40px !important;
|
||||
right: 50px !important;
|
||||
}
|
||||
.collectionSet > .header > div > nav
|
||||
{
|
||||
width: 250px;
|
||||
right: 60px;
|
||||
}
|
||||
|
||||
/* Tabs collection */
|
||||
.tabsAside.pane > section > div > div:last-child
|
||||
.collectionSet > .set
|
||||
{
|
||||
margin: 0px 0px 0px 20px !important;
|
||||
padding: 10px 40px 10px 20px !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: auto !important;
|
||||
margin: 0px 0px 0px 20px;
|
||||
padding: 10px 40px 10px 20px;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.tabsAside.pane > section > div > div:last-child:hover::-webkit-scrollbar-thumb
|
||||
.collectionSet > .set::-webkit-scrollbar-thumb
|
||||
{
|
||||
visibility: visible !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.tabsAside.pane > section > div > div:last-child > div
|
||||
.collectionSet > .set:hover::-webkit-scrollbar-thumb
|
||||
{
|
||||
width: 175px !important;
|
||||
height: 148px !important;
|
||||
margin: 5px !important;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
background-color: #c2c2c2 !important;
|
||||
.collectionSet > .set > div
|
||||
{
|
||||
width: 175px;
|
||||
height: 148px;
|
||||
margin: 5px;
|
||||
|
||||
background-color: #c2c2c2;
|
||||
background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_thumbnail.png");
|
||||
background-size: cover !important;
|
||||
background-position-x: center !important;
|
||||
background-size: cover;
|
||||
background-position-x: center;
|
||||
|
||||
display: inline-grid !important;
|
||||
grid-template-rows: 1fr auto !important;
|
||||
display: inline-grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
|
||||
box-shadow: 0px 0px 5px rgba(100, 100, 100, .5) !important;
|
||||
transition: .25s !important;
|
||||
cursor: pointer !important;
|
||||
box-shadow: 0px 0px 5px rgba(100, 100, 100, .5);
|
||||
transition: .25s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tabsAside.pane > section > div > div:last-child > div:hover
|
||||
.collectionSet > .set > div:hover
|
||||
{
|
||||
filter: brightness(120%) !important;
|
||||
box-shadow: 0px 0px 15px rgba(100, 100, 100, .5) !important;
|
||||
filter: brightness(120%);
|
||||
box-shadow: 0px 0px 15px rgba(100, 100, 100, .5);
|
||||
}
|
||||
|
||||
.tabsAside.pane > section > div > div:last-child > div > div
|
||||
.collectionSet > .set > div > div
|
||||
{
|
||||
background-color: rgba(233, 233, 233, .75) !important;
|
||||
grid-row: 2 !important;
|
||||
display: grid !important;
|
||||
grid-template-columns: auto 1fr auto !important;
|
||||
background-color: rgba(233, 233, 233, .75);
|
||||
grid-row: 2;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
|
||||
.tabsAside.pane > section > div > div:last-child > div > div > button
|
||||
.collectionSet > .set > div > div > button
|
||||
{
|
||||
margin: auto !important;
|
||||
margin-right: 5px !important;
|
||||
display: none !important;
|
||||
margin: auto;
|
||||
margin-right: 5px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabsAside.pane > section > div > div:last-child > div:hover > div > button
|
||||
.collectionSet > .set > div:hover > div > button
|
||||
{
|
||||
display: initial !important;
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.tabsAside.pane > section > div > div:last-child > div > div > div
|
||||
.collectionSet > .set > div > div > div
|
||||
{
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
margin: 10px !important;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 10px;
|
||||
|
||||
background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_icon.png");
|
||||
background-size: 20px !important;
|
||||
background-size: 20px;
|
||||
}
|
||||
|
||||
.tabsAside.pane > section > div > div:last-child > div > div > span
|
||||
.collectionSet > .set > div > div > span
|
||||
{
|
||||
overflow: hidden !important;
|
||||
margin: auto 0px !important;
|
||||
margin-right: 10px !important;
|
||||
line-height: initial !important;
|
||||
overflow: hidden;
|
||||
margin: auto 0px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.tabsAside.pane > section > div > div:last-child > div:hover > div > span
|
||||
.collectionSet > .set > div:hover > div > span
|
||||
{
|
||||
margin-right: 5px !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px)
|
||||
{
|
||||
.tabsAside.pane
|
||||
{
|
||||
width: initial !important;
|
||||
left: 0px !important;
|
||||
min-width: initial !important;
|
||||
width: 100% !important;
|
||||
min-width: initial;
|
||||
}
|
||||
}
|
||||
+31
-16
@@ -1,59 +1,74 @@
|
||||
.tabsAside[darkmode].background
|
||||
{
|
||||
background-color: rgba(0, 0, 0, .5) !important;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.tabsAside[darkmode] .pane
|
||||
{
|
||||
background-color: #333333 !important;
|
||||
color: white !important;
|
||||
background-color: #333333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tabsAside[darkmode] .saveTabs > div
|
||||
{
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
/* Button style */
|
||||
.tabsAside[darkmode] .pane button
|
||||
{
|
||||
color: white !important;
|
||||
filter: invert();
|
||||
}
|
||||
.tabsAside[darkmode] .pane button:hover
|
||||
{
|
||||
background-color: gray !important;
|
||||
background-color: gray;
|
||||
}
|
||||
.tabsAside[darkmode] .pane button:active
|
||||
{
|
||||
background-color: dimgray !important;
|
||||
background-color: dimgray;
|
||||
}
|
||||
|
||||
.tabsAside[darkmode] .pane > section > div > div:first-child > div:first-child > small
|
||||
.tabsAside[darkmode] a
|
||||
{
|
||||
color: #48adff;
|
||||
}
|
||||
|
||||
/* Timestamp label */
|
||||
.tabsAside[darkmode] > .pane > section small
|
||||
{
|
||||
color: lightgray !important;
|
||||
}
|
||||
|
||||
/* Scrollbar style */
|
||||
.tabsAside[darkmode] .pane ::-webkit-scrollbar-thumb
|
||||
{
|
||||
background: gray !important;
|
||||
border-radius: 3px !important;
|
||||
background: gray;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.tabsAside[darkmode] .pane ::-webkit-scrollbar-thumb:hover
|
||||
{
|
||||
background: dimgray !important;
|
||||
background: dimgray;
|
||||
}
|
||||
|
||||
.tabsAside[darkmode] .pane > section > div > div:last-child > div
|
||||
/* Tab style */
|
||||
.tabsAside[darkmode] .pane .collectionSet > .set > div
|
||||
{
|
||||
background-color: #0c0c0c !important;
|
||||
background-color: #0c0c0c;
|
||||
background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_thumbnail_dark.png");
|
||||
}
|
||||
|
||||
.tabsAside[darkmode] .pane > section > div > div:last-child > div > div
|
||||
.tabsAside[darkmode] .pane .collectionSet > .set > div > div
|
||||
{
|
||||
background-color: rgba(50, 50, 50, .75) !important;
|
||||
background-color: rgba(50, 50, 50, .75);
|
||||
}
|
||||
|
||||
.tabsAside[darkmode] .pane > section > div > div:last-child > div > div > div
|
||||
.tabsAside[darkmode] .pane .collectionSet > .set > div > div > div
|
||||
{
|
||||
background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_icon_dark.png");
|
||||
}
|
||||
|
||||
/* Context menu style */
|
||||
.tabsAside[darkmode] .pane nav
|
||||
{
|
||||
background-color: #3f3f3f !important;
|
||||
background-color: #3f3f3f;
|
||||
}
|
||||
+61
-72
@@ -1,126 +1,115 @@
|
||||
/* Custom scrollbar */
|
||||
.tabsAside ::-webkit-scrollbar
|
||||
{
|
||||
height: 6px !important;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.tabsAside ::-webkit-scrollbar-thumb
|
||||
{
|
||||
visibility: hidden !important;
|
||||
background: darkgray !important;
|
||||
border-radius: 3px !important;
|
||||
background: darkgray;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.tabsAside ::-webkit-scrollbar-thumb:hover
|
||||
{
|
||||
background: gray !important;
|
||||
background: gray;
|
||||
}
|
||||
|
||||
.tabsAside::-webkit-scrollbar
|
||||
.tabsAside
|
||||
{
|
||||
width: 6px !important;
|
||||
font-family: 'DefaultFont';
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tabsAside::-webkit-scrollbar-thumb
|
||||
{
|
||||
background: gray !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
.tabsAside::-webkit-scrollbar-thumb:hover
|
||||
{
|
||||
background: darkgray !important;
|
||||
}
|
||||
|
||||
/* Links style */
|
||||
.tabsAside a
|
||||
{
|
||||
font-family: 'Segoe UI', 'Segoe MDL2 Assets' !important;
|
||||
color: #0078d7 !important;
|
||||
font-weight: 400 !important;
|
||||
color: #0078d7;
|
||||
}
|
||||
.tabsAside a:hover
|
||||
{
|
||||
text-decoration: underline !important;
|
||||
cursor: pointer !important;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabsAside a:visited
|
||||
{
|
||||
color: #0078d7 !important;
|
||||
color: #0078d7;
|
||||
}
|
||||
|
||||
/* Buttons style */
|
||||
.tabsAside button
|
||||
{
|
||||
font-family: 'Segoe MDL2 Assets' !important;
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
cursor: pointer !important;
|
||||
box-shadow: initial !important;
|
||||
font-size: inherit !important;
|
||||
padding: initial !important;
|
||||
position: initial !important;
|
||||
box-sizing: initial !important;
|
||||
line-height: initial !important;
|
||||
text-align: center !important;
|
||||
border-radius: 2px !important;
|
||||
min-height: initial !important;
|
||||
display: initial !important;
|
||||
min-width: initial !important;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tabsAside button:hover
|
||||
{
|
||||
background-color: #c6c6c6 !important;
|
||||
background-color: #c6c6c6;
|
||||
}
|
||||
.tabsAside button:active
|
||||
{
|
||||
background-color: gray !important;
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
/* Context menus style */
|
||||
.tabsAside nav
|
||||
{
|
||||
font-family: 'Segoe UI' !important;
|
||||
user-select: none !important;
|
||||
user-select: none;
|
||||
|
||||
position: absolute !important;
|
||||
width: 250px !important;
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
|
||||
box-shadow: 0px 0px 10px black !important;
|
||||
background-color: white !important;
|
||||
border-radius: 5px !important;
|
||||
box-shadow: 0px 0px 10px black;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
|
||||
z-index: 10 !important;
|
||||
z-index: 10;
|
||||
|
||||
visibility: hidden !important;
|
||||
|
||||
display: initial !important;
|
||||
left: initial !important;
|
||||
bottom: initial !important;
|
||||
padding: initial !important;
|
||||
min-height: initial !important;
|
||||
font-size: inherit !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.tabsAside nav button
|
||||
{
|
||||
font-family: 'Segoe UI' !important;
|
||||
cursor: pointer !important;
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
box-sizing: border-box !important;
|
||||
|
||||
font-size: medium !important;
|
||||
text-align: start !important;
|
||||
{
|
||||
text-align: start;
|
||||
|
||||
padding: 10px !important;
|
||||
width: 100% !important;
|
||||
height: initial !important;
|
||||
padding: 0px 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabsAside button + nav:active,
|
||||
.tabsAside button:focus + nav
|
||||
{
|
||||
visibility: visible !important;
|
||||
}
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Icon buttons style */
|
||||
.btn
|
||||
{
|
||||
background-repeat: no-repeat;
|
||||
background-size: 15px;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.btn.more
|
||||
{
|
||||
background-image: url("chrome-extension://__MSG_@@extension_id__/icons/more.svg");
|
||||
}
|
||||
|
||||
.btn.remove
|
||||
{
|
||||
background-image: url("chrome-extension://__MSG_@@extension_id__/icons/cancel.svg");
|
||||
}
|
||||
|
||||
@font-face
|
||||
{
|
||||
font-family: 'DefaultFont';
|
||||
src: local("Segoe UI"),
|
||||
url("chrome-extension://__MSG_@@extension_id__/fonts/WeblySleekUI/weblysleekuisemilight.ttf") format("truetype"),
|
||||
url("chrome-extension://__MSG_@@extension_id__/fonts/WeblySleekUI/weblysleekuisemilight.woff") format("woff"),
|
||||
url("chrome-extension://__MSG_@@extension_id__/fonts/WeblySleekUI/weblysleekuisemilight.woff2") format("woff2");
|
||||
}
|
||||
Reference in New Issue
Block a user