open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Another popup mockup

Browse Source
This commit is contained in:
narcolepticinsomniac 2017-12-02 02:03:14 -05:00 committed by GitHub
parent db9f086b50
commit 09e47a1c6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 58 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
popup/popup.css
View File

@ -15,8 +15,8 @@ body {
} }
body > div:not(#installed) { body > div:not(#installed) {
margin-left: 0.75em; margin-left: 9px;
margin-right: 0.75em; margin-right: 9px;
} }
.firefox .chromium-only { .firefox .chromium-only {
@ -24,6 +24,7 @@ body > div:not(#installed) {
} }
input[type=checkbox] { input[type=checkbox] {
margin: 0;
outline: none; outline: none;
} }
@ -31,6 +32,14 @@ input[type=checkbox] {
padding: 0.3em 0 0.6em; padding: 0.3em 0 0.6em;
} }
#disable-all-wrapper .main-controls {
display: flex;
}
#disable-all-wrapper .main-controls label{
padding-left: 4px;
}
#no-styles { #no-styles {
font-style: italic; font-style: italic;
} }
@ -39,12 +48,6 @@ input[type=checkbox] {
display: inline; display: inline;
} }
.style-name {
cursor: default;
font-weight: bold;
display: block;
}
a { a {
color: #000; color: #000;
transition: color .5s; transition: color .5s;
@ -55,16 +58,8 @@ a:hover {
color: #666; color: #666;
} }
.left-gutter { .actions > .main-controls {
display: table-cell; padding-left: 16px;
width: 16px;
vertical-align: top;
}
.left-gutter input {
margin-bottom: 1px;
margin-top: 0;
margin-left: 0;
} }
.main-controls { .main-controls {
@ -108,10 +103,53 @@ body.blocked > DIV {
.entry { .entry {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 5px 0.75em; height: 26px;
padding: 0 14px 0 0;
position: relative; position: relative;
} }
html[style] .entry {
padding: 0 16px 0 0;
}
html[style] .entry:nth-child(-n+10):before,
html[style] .entry:nth-child(10):before {
right: 7px;
}
.entry .actions {
display: inline-flex;
}
.style-name .checker {
position: absolute;
top: 7px;
left: 9px;
pointer-events: none;
}
.style-name {
height: 100%;
width: 100%;
line-height: 28px;
cursor: default;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 26px;
position: relative;
}
.entry .main-controls {
height: 100%;
display: inline-flex;
flex-grow: 1;
overflow: hidden;
align-items: center;
padding-right: 5px;
}
.entry:nth-child(even) { .entry:nth-child(even) {
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);
} }
@ -140,20 +178,6 @@ body.blocked > DIV {
padding: 0 1px 0; padding: 0 1px 0;
} }
.entry .main-controls {
display: flex;
width: calc(100% - 20px);
align-items: center;
}
.entry .main-controls label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 5px;
}
.not-applied .checker, .not-applied .checker,
.not-applied .style-name, .not-applied .style-name,
.not-applied .actions > * { .not-applied .actions > * {
@ -253,8 +277,7 @@ body > .actions {
} }
body.blocked #installed > *, body.blocked #installed > *,
body.blocked .actions > .main-controls, body.blocked .actions > .main-controls {
body.blocked .actions > .left-gutter {
display: none; display: none;
} }