mirror of
https://github.com/XFox111/TabsAsideExtension.git
synced 2026-04-22 07:58:01 +03:00
Done extension UI and basic interactions
This commit is contained in:
Michael Gordeev
+178
@@ -0,0 +1,178 @@
|
||||
.aside.pane
|
||||
{
|
||||
font-family: 'Segoe UI', 'Segoe MDL2 Assets';
|
||||
user-select: none;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 40%;
|
||||
min-width: 500px;
|
||||
min-height: 100%;
|
||||
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid rgba(100, 100, 100, .5);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 6px 0px 12px black;
|
||||
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
.aside.pane > .header
|
||||
{
|
||||
margin: 20px 40px;
|
||||
}
|
||||
.aside.pane > .header > .title
|
||||
{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
.aside.pane > .header > .title > h1
|
||||
{
|
||||
margin: 10px 0px;
|
||||
font-weight: normal;
|
||||
font-size: 21pt;
|
||||
}
|
||||
|
||||
.aside.pane > .header > .title > button
|
||||
{
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.aside.pane > .header > .title > nav
|
||||
{
|
||||
top: 70px;
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
.aside.pane > .header > .title > nav > div
|
||||
{
|
||||
box-shadow: 0px 4px 5px -2px rgba(100, 100, 100, .5);
|
||||
}
|
||||
|
||||
.aside.pane > .header > .title > nav > p
|
||||
{
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.aside.pane > .header > hr
|
||||
{
|
||||
border: 1px solid #8a8a8a;
|
||||
}
|
||||
|
||||
.aside.pane > #content > h2
|
||||
{
|
||||
margin: 0px 40px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.aside.pane > #content > .set > .setHeader
|
||||
{
|
||||
margin: 0px 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
.aside.pane > #content > .set > .setHeader small
|
||||
{
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.aside.pane > #content > .set > .setHeader span
|
||||
{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.aside.pane > #content > .set > .setHeader a
|
||||
{
|
||||
font-size: 11pt;
|
||||
font-weight: 500;
|
||||
}
|
||||
.aside.pane > #content > .set > .setHeader nav
|
||||
{
|
||||
width: 200px;
|
||||
margin-top: 10px;
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
.aside.pane > #content > .set > .setHeader > div:first-child
|
||||
{
|
||||
margin: auto 0px;
|
||||
}
|
||||
|
||||
.aside.pane > #content > .set > .collection
|
||||
{
|
||||
padding: 10px 0px;
|
||||
padding-left: 40px;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.aside.pane > #content > .set > .collection > .item
|
||||
{
|
||||
width: 175px;
|
||||
height: 148px;
|
||||
margin: 5px;
|
||||
|
||||
background-color: #c2c2c2;
|
||||
background-image: url("../images/tab_thumbnail.png");
|
||||
|
||||
display: inline-grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
|
||||
box-shadow: 0px 0px 5px rgba(100, 100, 100, .5);
|
||||
transition: .25s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.aside.pane > #content > .set > .collection > .item:hover
|
||||
{
|
||||
filter: brightness(120%);
|
||||
box-shadow: 0px 0px 15px rgba(100, 100, 100, .5);
|
||||
}
|
||||
|
||||
.aside.pane > #content > .set > .collection > .item > .caption
|
||||
{
|
||||
background-color: rgba(233, 233, 233, .75);
|
||||
grid-row: 2;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
|
||||
.aside.pane > #content > .set > .collection > .item > .caption > button
|
||||
{
|
||||
margin: auto;
|
||||
margin-right: 5px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.aside.pane > #content > .set > .collection > .item:hover > .caption > button
|
||||
{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.aside.pane > #content > .set > .collection > .item > .caption > div
|
||||
{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 10px;
|
||||
|
||||
background-image: url("../images/tab_icon.png");
|
||||
}
|
||||
|
||||
.aside.pane > #content > .set > .collection > .item > .caption > span
|
||||
{
|
||||
margin: auto 0px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px)
|
||||
{
|
||||
.aside.pane
|
||||
{
|
||||
right: initial;
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
min-width: initial;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
.aside.pane
|
||||
{
|
||||
background-color: #333333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.aside button
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
.aside button:hover
|
||||
{
|
||||
background-color: gray;
|
||||
}
|
||||
.aside button:active
|
||||
{
|
||||
background-color: dimgray;
|
||||
}
|
||||
|
||||
.aside.pane > #content > .set > .setHeader small
|
||||
{
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.aside ::-webkit-scrollbar-thumb
|
||||
{
|
||||
background: gray;
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover
|
||||
{
|
||||
background: dimgray;
|
||||
}
|
||||
|
||||
.aside.pane > #content > .set > .collection > .item
|
||||
{
|
||||
background-color: #0c0c0c;
|
||||
background-image: url("../images/tab_thumbnail_dark.png");
|
||||
}
|
||||
|
||||
.aside.pane > #content > .set > .collection > .item > .caption
|
||||
{
|
||||
background-color: rgba(50, 50, 50, .75);
|
||||
}
|
||||
|
||||
.aside nav
|
||||
{
|
||||
background-color: #3f3f3f;
|
||||
}
|
||||
|
||||
.aside.pane > #content > .set > .collection > .item > .caption > div
|
||||
{
|
||||
background-image: url("../images/tab_icon_dark.png");
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
.aside ::-webkit-scrollbar
|
||||
{
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.aside ::-webkit-scrollbar-thumb
|
||||
{
|
||||
background: darkgray;
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover
|
||||
{
|
||||
background: gray;
|
||||
}
|
||||
|
||||
.aside a
|
||||
{
|
||||
font-family: 'Segoe UI', 'Segoe MDL2 Assets';
|
||||
color: #0078d7;
|
||||
}
|
||||
.aside a:hover
|
||||
{
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aside .slider
|
||||
{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
border-radius: 13px;
|
||||
width: 50px;
|
||||
height: 26px;
|
||||
|
||||
background-color: #cccccc;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.aside .slider:before
|
||||
{
|
||||
position: absolute;
|
||||
content: "";
|
||||
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
border-radius: 50%;
|
||||
|
||||
margin: auto;
|
||||
|
||||
background-color: white;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.aside input:checked + .slider,
|
||||
.aside input:focus + .slider
|
||||
{
|
||||
background-color: #0078d7;
|
||||
}
|
||||
|
||||
.aside input:checked + .slider:before
|
||||
{
|
||||
transform: translateX(24px);
|
||||
background-color: #3f3f3f;
|
||||
}
|
||||
|
||||
.aside nav
|
||||
{
|
||||
font-family: 'Segoe UI';
|
||||
user-select: none;
|
||||
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
|
||||
box-shadow: 0px 0px 10px black;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.aside nav button
|
||||
{
|
||||
font-family: 'Segoe UI';
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
||||
font-size: medium;
|
||||
text-align: start;
|
||||
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
height: initial;
|
||||
}
|
||||
|
||||
.aside button + nav:active,
|
||||
.aside button:focus + nav
|
||||
{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.aside button
|
||||
{
|
||||
font-family: 'Segoe MDL2 Assets';
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.aside button:hover
|
||||
{
|
||||
background-color: #c6c6c6;
|
||||
}
|
||||
.aside button:active
|
||||
{
|
||||
background-color: gray;
|
||||
}
|
||||
Reference in New Issue
Block a user