aboutsummaryrefslogtreecommitdiff
path: root/ext/bg/css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-11-19 18:37:02 -0500
committerGitHub <noreply@github.com>2020-11-19 18:37:02 -0500
commite5255a03e68574afecced794f8092bf76ec241a3 (patch)
tree0f27eeb7f733765823b9b99921893d998f9a1664 /ext/bg/css
parentb0a565062524f74b973071f259a2c0d7a577c372 (diff)
Context popup improvements (#1039)
* Refactor context-main.js * Simplify tags * Use flex layout * Use image masks for icons, update styles * Remove old classes * Add profile button * Add support for profile selection * Add title * Swap the options and search link order * Fix title
Diffstat (limited to 'ext/bg/css')
-rw-r--r--ext/bg/css/context.css75
1 files changed, 66 insertions, 9 deletions
diff --git a/ext/bg/css/context.css b/ext/bg/css/context.css
index 2d42dd16..c1e88ef5 100644
--- a/ext/bg/css/context.css
+++ b/ext/bg/css/context.css
@@ -35,7 +35,9 @@ label {
}
#mini {
- text-align: center;
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: center;
}
#full {
display: none;
@@ -243,10 +245,17 @@ body[data-loaded=true] .toggle-group {
display: block;
width: 16px;
height: 16px;
- background-position: center center;
- background-size: 16px 16px;
- background-repeat: no-repeat;
box-sizing: content-box;
+ background-color: #333333;
+ mask-repeat: no-repeat;
+ mask-position: center center;
+ mask-mode: alpha;
+ mask-size: 16px 16px;
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-position: center center;
+ -webkit-mask-mode: alpha;
+ -webkit-mask-size: 16px 16px;
+ pointer-events: none;
}
.nav-button:hover {
z-index: 1;
@@ -264,19 +273,67 @@ body[data-loaded=true] .toggle-group {
outline: none;
}
.nav-button[data-icon=magnifying-glass]::after {
- background-image: url(/mixed/img/magnifying-glass.svg);
+ mask-image: url(/mixed/img/magnifying-glass.svg);
+ -webkit-mask-image: url(/mixed/img/magnifying-glass.svg);
}
.nav-button[data-icon=cog]::after {
- background-image: url(/mixed/img/cog.svg);
+ mask-image: url(/mixed/img/cog.svg);
+ -webkit-mask-image: url(/mixed/img/cog.svg);
}
.nav-button[data-icon=question-mark]::after {
- background-image: url(/mixed/img/question-mark-circle.svg);
+ mask-image: url(/mixed/img/question-mark-circle.svg);
+ -webkit-mask-image: url(/mixed/img/question-mark-circle.svg);
}
-.nav-button:first-of-type {
+.nav-button[data-icon=profile]::after {
+ mask-image: url(/mixed/img/profile.svg);
+ -webkit-mask-image: url(/mixed/img/profile.svg);
+}
+.nav-button:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
-.nav-button:last-of-type {
+.nav-button:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
+
+.action-select-profile {
+ position: relative;
+}
+.profile-select-container {
+ position: absolute;
+ left: -1px;
+ top: -1px;
+ right: -1px;
+ bottom: -1px;
+}
+select.profile-select {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ border: 0;
+ margin: 0;
+ padding: 0.375em;
+ appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ opacity: 0;
+ outline: none;
+ cursor: pointer;
+ font-size: 14px;
+}
+.profile-select optgroup {
+ color: #666666;
+ font-weight: normal;
+ font-style: normal;
+ background-color: #f2f2f2;
+}
+.profile-select option {
+ color: #333333;
+ font-weight: normal;
+ font-style: normal;
+ background-color: initial;
+}