xfox111/TabsAsideExtension
1
0
Fork 0
mirror of https://github.com/XFox111/TabsAsideExtension.git synced 2026-04-22 07:58:01 +03:00
Code Wiki Activity

Major 2.0 (#51)

Browse Source 
- Added cloud storage for sets
- WeblySleek UI font replaced with Segoe fonts
- Reworked icons (#55)
- Removed changelog auto-opening on install
- 'Contributors' option replaced with 'Changelog' one
- Added icons to menu items
- Updated UI with Fluent UI compliance
- Added tooltip on how to use selective activation (#57)
- Added Italian language (#52) by @blackcat-917
- Added Brazilian Portuguese language (#53) by @amandafilizola
- Updated Firefox CI/CD config
- Updated README: rearranged badges and added demo GIF
- Updated documentation

Co-authored-by: Michael Gordeev <michael@xfox111.net>
Co-authored-by: blackcat-917 <53786619+blackcat-917@users.noreply.github.com>
Co-authored-by: Amanda de Paiva Filizola <amandapaivafilizola@gmail.com>
Co-authored-by: Amine A <15179425+AmineI@users.noreply.github.com>
Co-authored-by: Dustin Jiang <56217843+Dustin-Jiang@users.noreply.github.com>
This commit is contained in:
Michael Gordeev
2021-03-03 17:06:30 +03:00
committed by GitHub
parent 4559b25739
commit 8da01f34e1
55 changed files with 1019 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+37 -20
View File
@@ -41,8 +41,6 @@
border-width: 0px 0px 0px 1px;
box-shadow: 6px 0px 12px black;
font-size: 13px;
transform: translateX(110%); /* pane is hidded */
transition: .2s;
}
@@ -67,14 +65,21 @@
display: grid;
grid-template-columns: 1fr auto auto;
grid-column-gap: 10px;
grid-row-gap: 30px;
grid-row-gap: 20px;
}
.tabsAside.pane > header > h1
{
margin: 0px 5px;
font-weight: 500;
font-size: 15pt;
font-weight: 400;
font-size: 24px;
}
.tabsAside.pane > header > button .updateBadge
{
position: absolute;
bottom: 2px;
right: 2px;
}
.tabsAside.pane > header > nav
@@ -93,28 +98,44 @@
text-decoration: none;
}
.tabsAside.pane > header nav > p > a:hover
{
text-decoration: underline;
}
.saveTabs
{
display: inline-grid;
grid-template-columns: 16px auto;
grid-template-columns: 16px auto 16px;
grid-column-gap: 15px;
font-weight: 600;
margin-right: auto;
}
.iconArrowRight
.saveTabs:hover
{
text-decoration: none !important;
}
.saveTabs:hover span:nth-child(2)
{
text-decoration: underline;
}
.iconArrowRight,.iconQuestionCircle
{
width: 16px;
height: 16px;
display: inline-block;
background-repeat: no-repeat;
background-size: 16px;
background-position: center;
background-image: url("chrome-extension://__MSG_@@extension_id__/icons/arrowRight.svg"),
url("moz-extension://__MSG_@@extension_id__/icons/arrowRight.svg");
font-family: "Segoe MDL2 Assets";
margin: 2px;
}
.iconQuestionCircle
{
font-size: small;
padding-top: 2px;
margin-bottom: 0;
}
.tabsAside.pane section
{
@@ -175,7 +196,7 @@
{
margin: 0px;
visibility: visible !important;
font-weight: 500;
font-weight: 600;
border: none;
background: transparent;
}
@@ -185,11 +206,6 @@
border: 1px solid black;
}
.collectionSet > .header > a
{
font-size: 11pt;
}
.collectionSet > .header > div > nav
{
width: 250px;
@@ -276,6 +292,7 @@
overflow: hidden;
margin: auto 0px;
margin-right: 10px;
font-size: 12px;
}
.collectionSet > .set > div:hover > div > span
{
@@ -289,4 +306,4 @@
width: 100% !important;
min-width: initial;
}
}
}
css/style.dark.css
+15 -9
View File
@@ -9,30 +9,36 @@
color: white;
}
.tabsAside[darkmode] .pane header .iconArrowRight
{
filter: invert();
}
.tabsAside[darkmode] .pane header
{
background-color: #3b3b3b;
}
.tabsAside[darkmode] nav hr
{
filter: invert(1);
}
.tabsAside[darkmode] .saveTabs > div
{
filter: invert();
}
/* Button style */
.tabsAside[darkmode] .pane button
.tabsAside[darkmode] button
{
filter: invert();
color: white;
}
.tabsAside[darkmode] .pane button:hover
.tabsAside[darkmode] .pane button:hover,
.tabsAside[darkmode] .pane .control.checkbox:hover
{
background-color: gray;
}
.tabsAside[darkmode] .pane button img,
.tabsAside[darkmode] .pane label > input + span
{
filter: invert();
}
.tabsAside[darkmode] .pane button:active
{
background-color: dimgray;
@@ -105,5 +111,5 @@
/* Context menu style */
.tabsAside[darkmode] .pane nav
{
background-color: #3f3f3f;
background-color: #4a4a4a;
}
css/style.generic.css
+106 -20
View File
@@ -1,3 +1,16 @@
.updateBadge
{
display: none;
}
.tabsAside[updated] .updateBadge
{
width: 10px;
height: 10px;
background-color: #0078d7;
border-radius: 5px;
display: block;
}
/* Custom scrollbar */
.tabsAside ::-webkit-scrollbar
{
@@ -17,7 +30,7 @@
.tabsAside
{
font-family: 'Segoe UI' ,'DefaultFont';
font-family: "Segoe UI", "Segoe MDL2 Assets" !important;
font-size: 14px;
user-select: none;
}
@@ -46,6 +59,8 @@
background-color: transparent;
border: none;
cursor: pointer;
outline: none !important;
position: relative;
}
.tabsAside button:hover
{
@@ -62,9 +77,10 @@
user-select: none;
position: absolute;
width: 290px;
width: 390px;
font-size: 12px;
box-shadow: 0px 0px 10px rgba(0,0,0,.5);
box-shadow: 0px 4px 10px rgba(0,0,0,.25);
background-color: white;
border-radius: 5px;
@@ -78,18 +94,25 @@
{
border: none;
height: 1px;
background-color: lightgray;
background-color: rgba(0, 0, 0, .1);
margin: 4px 0px
}
.tabsAside nav button
{
align-content: center;
text-align: start;
padding: 0px 10px;
padding: 0px 12px;
width: 100%;
height: 32px;
font-family: 'Segoe UI' ,'DefaultFont';
font-family: "Segoe UI";
font-size: 12px;
display: grid;
grid-template-columns: auto 1fr auto;
grid-column-gap: 14px;
}
.tabsAside nav button:hover
@@ -97,6 +120,23 @@
background-color: #eeee;
}
.tabsAside nav button img:first-child
{
width: 16px;
height: 16px;
}
.tabsAside nav button img:nth-child(3)
{
width: 12px;
height: 12px;
}
.tabsAside nav button *:nth-child(3)
{
align-self: center;
}
.tabsAside button + nav:active,
.tabsAside button:focus + nav
{
@@ -109,29 +149,75 @@
background-repeat: no-repeat;
background-size: 12px;
background-position: center;
font-family: "Segoe UI", "Segoe MDL2 Assets";
}
.btn.more
.control.checkbox
{
display: block;
position: relative;
padding: 8px 12px 8px 42px;
box-sizing: border-box;
cursor: pointer;
min-height: 32px;
}
.control.checkbox:hover
{
background-image: url("chrome-extension://__MSG_@@extension_id__/icons/more.svg"),
url("moz-extension://__MSG_@@extension_id__/icons/more.svg");
background-color: #eeeeee;
}
.control.checkbox input
{
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.control.checkbox input + span
{
position: absolute;
left: 12px;
height: 16px;
width: 16px;
.btn.remove
{
background-image: url("chrome-extension://__MSG_@@extension_id__/icons/cancel.svg"),
url("moz-extension://__MSG_@@extension_id__/icons/cancel.svg");
transition-property: background, border, border-color;
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
}
.control.checkbox input + span::after
{
position: absolute;
color: rgba(0, 0, 0, .4);
font-family: "Segoe MDL2 Assets";
content: "\E001";
width: 16px;
height: 16px;
font-size: 16px;
text-align: center;
display: none;
}
.control.checkbox input:checked + span::after
{
display: block;
color: black;
}
.control.checkbox:hover input + span::after
{
display: block;
}
@font-face
{
font-family: 'DefaultFont';
font-family: "Segoe UI";
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"),
url("fonts/segoeui.ttf") format("truetype"),
}
url("moz-extension://__MSG_@@extension_id__/fonts/WeblySleekUI/weblysleekuisemilight.ttf") format("truetype"),
url("moz-extension://__MSG_@@extension_id__/fonts/WeblySleekUI/weblysleekuisemilight.woff") format("woff"),
url("moz-extension://__MSG_@@extension_id__/fonts/WeblySleekUI/weblysleekuisemilight.woff2") format("woff2");
@font-face
{
font-family: "Segoe MDL2 Assets";
src: local("Segoe MDL2 Assets"),
url("fonts/segoemdl2.ttf") format("truetype"),
}
css/style.listview.css
+1
View File
@@ -24,6 +24,7 @@
grid-row-gap: 2px;
grid-column-gap: 2px;
cursor: pointer;
margin: 0px auto;
}
.listviewSwitch.tile