summaryrefslogtreecommitdiff
path: root/ext/mixed/css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-12-29 23:38:44 -0500
committerGitHub <noreply@github.com>2020-12-29 23:38:44 -0500
commitad90bad05782d275970a196817802ca9c7b6e735 (patch)
treef82eca7ab42ad778d23e6565669d84355e533e64 /ext/mixed/css
parentae36cccc361aaee4ea33cae4e37a1ad47f999a34 (diff)
Display profile panel (#1178)
* Expose Display.displayGenerator * Update search when assigning options context * Don't clear selection unless the popup changes * Merge search styles * Create panel for changing the profile
Diffstat (limited to 'ext/mixed/css')
-rw-r--r--ext/mixed/css/display.css94
-rw-r--r--ext/mixed/css/search.css8
2 files changed, 90 insertions, 12 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 63eb6cb3..8ebdf756 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -38,6 +38,7 @@
--action-button-padding: 0.3em;
--list-margin: 0.72em;
+ --main-content-size: 100%;
--main-content-vertical-padding: 0em;
--main-content-horizontal-padding: 0em;
--entry-horizontal-padding: 0.72em;
@@ -77,6 +78,7 @@
--entry-current-indicator-triangle-size: calc(1em * (var(--entry-current-indicator-triangle-size-no-units) / var(--font-size-no-units)));
--animation-duration: 0.125s;
+ --animation-duration2: calc(2 * var(--animation-duration));
/* Colors */
--background-color: #ffffff;
@@ -239,6 +241,12 @@ h2 {
margin: 0.25em 0 0;
border-bottom: calc(1em / (var(--font-size-no-units) * var(--h2-font-size-no-units))) solid var(--light-border-color);
}
+h3 {
+ font-size: 1em;
+ font-weight: bold;
+ margin: 0.25em 0 0.375em;
+ padding: 0;
+}
a {
color: var(--link-color);
text-decoration: underline;
@@ -323,7 +331,10 @@ a {
position: relative;
}
.content-body-inner {
- width: 100%;
+ width: var(--main-content-size);
+ max-width: 100%;
+ box-sizing: border-box;
+ margin: 0 auto;
padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);
}
.content-footer-container1 {
@@ -344,8 +355,8 @@ a {
flex: 1 1 auto;
}
.content-footer {
- max-width: var(--main-content-size);
- width: 100%;
+ width: var(--main-content-size);
+ max-width: 100%;
}
@@ -365,7 +376,7 @@ a {
overflow-x: hidden;
overflow-y: auto;
background-color: var(--sidebar-background-color);
- z-index: 1;
+ z-index: 10;
position: relative;
display: block;
}
@@ -502,6 +513,9 @@ button.sidebar-button.danger:hover .sidebar-button-icon,
button.sidebar-button.danger:focus .sidebar-button-icon {
background-color: var(--sidebar-button-danger-icon-color);
}
+button.sidebar-button.sidebar-button-highlight>.sidebar-button-icon {
+ background-color: var(--accent-color);
+}
.sidebar-button-icon[data-icon=cross] {
mask-image: url(/mixed/img/cross.svg);
-webkit-mask-image: url(/mixed/img/cross.svg);
@@ -1459,6 +1473,78 @@ button.action-button[data-icon=source-term]::before {
}
+/* Overlays */
+.overlay-panel-container {
+ pointer-events: none;
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 6;
+}
+.overlay-panel {
+ pointer-events: auto;
+ background-color: var(--background-color);
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: var(--main-content-size);
+ max-width: 100%;
+ box-sizing: border-box;
+ margin: 0 auto;
+ padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);
+ overflow-y: scroll;
+ transform: none;
+ opacity: 1;
+ visibility: visible;
+ transition:
+ opacity var(--animation-duration2) ease-out,
+ visibility 0s linear,
+ transform var(--animation-duration2) ease-out;
+}
+.overlay-panel[hidden] {
+ transform: translate(4em, 0);
+ opacity: 0;
+ visibility: hidden;
+ transition:
+ opacity var(--animation-duration2) ease-in,
+ visibility 0s linear var(--animation-duration2),
+ transform var(--animation-duration2) ease-in;
+}
+.overlay-panel[hidden]:not(.hidden-animating) {
+ display: none;
+}
+.overlay-panel-inner {
+ padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);
+}
+
+
+/* Profile panel */
+.profile-list {
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: stretch;
+}
+.profile-list-item {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ cursor: pointer;
+}
+.profile-list-item-selection {
+ flex: 0 0 auto;
+ text-align: center;
+ padding: 0.25em 0.5em 0.25em 0;
+}
+.profile-list-item-name {
+ flex: 1 1 auto;
+ padding: 0.25em 0;
+}
+
+
/* Conditional styles */
:root:not([data-enable-search-tags=true]) .tag[data-category=search] {
display: none;
diff --git a/ext/mixed/css/search.css b/ext/mixed/css/search.css
index 5d4a8f78..6527f920 100644
--- a/ext/mixed/css/search.css
+++ b/ext/mixed/css/search.css
@@ -57,14 +57,6 @@ h1 {
border-bottom: calc(1em / (var(--font-size-no-units) * 2)) solid var(--separator-color1);
}
-/* Content layout */
-.content-body-inner {
- width: var(--main-content-size);
- max-width: 100%;
- box-sizing: border-box;
- margin: 0 auto;
-}
-
/* Search bar */
.search-textbox-container {
display: flex;