45578aa8f5
For now its use is limited to the comment sidebar but it'll be used for the new one containing the thumbnails. And make the sidebar more accessible with the keyboard or a screen reader.
84 lines
2.6 KiB
CSS
84 lines
2.6 KiB
CSS
/* Copyright 2025 Mozilla Foundation
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
.sidebar {
|
|
--sidebar-bg-color: light-dark(#fff, #23222b);
|
|
--sidebar-border-color: light-dark(
|
|
rgb(21 20 26 / 0.1),
|
|
rgb(251 251 254 / 0.1)
|
|
);
|
|
--sidebar-box-shadow:
|
|
0 0.25px 0.75px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)),
|
|
0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4));
|
|
--sidebar-backdrop-filter: none;
|
|
--sidebar-border-radius: 8px;
|
|
--sidebar-padding: 5px;
|
|
--sidebar-min-width: 180px;
|
|
--sidebar-max-width: 632px;
|
|
--sidebar-width: 239px;
|
|
--resizer-width: 4px;
|
|
--resizer-hover-bg-color: light-dark(#0062fa, #00cadb);
|
|
|
|
@media screen and (forced-colors: active) {
|
|
--sidebar-bg-color: Canvas;
|
|
--sidebar-border-color: CanvasText;
|
|
--sidebar-box-shadow: none;
|
|
--resizer-hover-bg-color: CanvasText;
|
|
}
|
|
|
|
border-radius: var(--sidebar-border-radius);
|
|
box-shadow: var(--sidebar-box-shadow);
|
|
border: 1px solid var(--sidebar-border-color);
|
|
background-color: var(--sidebar-bg-color);
|
|
inset-block-start: calc(100% + var(--doorhanger-height) - 2px);
|
|
padding-block: var(--sidebar-padding);
|
|
width: var(--sidebar-width);
|
|
min-width: var(--sidebar-min-width);
|
|
max-width: var(--sidebar-max-width);
|
|
backdrop-filter: var(--sidebar-backdrop-filter);
|
|
|
|
.sidebarResizer {
|
|
width: var(--resizer-width);
|
|
background-color: transparent;
|
|
forced-color-adjust: none;
|
|
cursor: ew-resize;
|
|
position: absolute;
|
|
inset-block: calc(var(--sidebar-padding) + var(--sidebar-border-radius));
|
|
inset-inline-start: calc(0px - var(--resizer-width) / 2);
|
|
transition: background-color 0.5s ease-in-out;
|
|
box-sizing: border-box;
|
|
border: 1px solid transparent;
|
|
border-block-width: 0;
|
|
background-clip: content-box;
|
|
|
|
&:hover {
|
|
background-color: var(--resizer-hover-bg-color);
|
|
}
|
|
&:focus-visible {
|
|
background-color: var(--resizer-hover-bg-color);
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
&.resizing {
|
|
cursor: ew-resize;
|
|
user-select: none;
|
|
|
|
:not(.sidebarResizer) {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|