-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/* Animation-inspector specific theme variables */
-
-.theme-dark,
-.theme-light,
-.theme-firebug {
- --even-animation-timeline-background-color: rgba(160,144,144,0.03);
- --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
- --pause-image: url(chrome://devtools/skin/images/pause.svg);
- --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
- --play-image: url(chrome://devtools/skin/images/play.svg);
-}
-
-:root {
- /* How high should toolbars be */
- --toolbar-height: 20px;
- /* How wide should the sidebar be (should be wide enough to contain long
- property names like 'border-bottom-right-radius' without ellipsis) */
- --timeline-sidebar-width: 200px;
- /* How high should animations displayed in the timeline be */
- --timeline-animation-height: 20px;
- /* The size of a keyframe marker in the keyframes diagram */
- --keyframes-marker-size: 10px;
- /* The color of the time graduation borders */
- --time-graduation-border-color: rgba(160, 144, 144, .5);
-}
-
-.animation {
- --timeline-border-color: var(--theme-body-color);
- --timeline-background-color: var(--theme-splitter-color);
-}
-
-.animation.cssanimation {
- --timeline-border-color: var(--theme-highlight-lightorange);
- --timeline-background-color: var(--theme-contrast-background);
-}
-
-.animation.csstransition {
- --timeline-border-color: var(--theme-highlight-bluegrey);
- --timeline-background-color: var(--theme-highlight-blue);
-}
-
-.animation.scriptanimation {
- --timeline-border-color: var(--theme-highlight-green);
- --timeline-background-color: var(--theme-graphs-green);
-}
-
-html {
- height: 100%;
-}
-
-body {
- margin: 0;
- padding: 0;
- display : flex;
- flex-direction: column;
- height: 100%;
- overflow: hidden;
- color: var(--theme-content-color3);
-}
-
-/* The top toolbar, containing the toggle-all button. And the timeline toolbar,
- containing playback control buttons, shown only when there are animations
- displayed in the timeline */
-
-#global-toolbar,
-#timeline-toolbar {
- border-bottom: 1px solid var(--theme-splitter-color);
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-end;
- height: var(--toolbar-height);
-}
-
-#timeline-toolbar {
- display: none;
- justify-content: flex-start;
-}
-
-[timeline] #global-toolbar {
- display: none;
-}
-
-[timeline] #timeline-toolbar {
- display: flex;
-}
-
-/* The main animations container */
-
-#sidebar-panel-animationinspector {
- height: 100%;
- width: 100%;
-}
-
-#players {
- height: calc(100% - var(--toolbar-height));
- overflow-x: hidden;
- overflow-y: auto;
-}
-
-[empty] #players {
- display: none;
-}
-
-/* The error message, shown when an invalid/unanimated element is selected */
-
-#error-message {
- padding-top: 10%;
- text-align: center;
- flex: 1;
- overflow: auto;
-
- /* The error message is hidden by default */
- display: none;
-}
-
-[empty] #error-message {
- display: block;
-}
-
-/* Element picker, toggle-all buttons, timeline pause button, ... */
-
-#global-toolbar > *,
-#timeline-toolbar > * {
- min-height: var(--toolbar-height);
- border-color: var(--theme-splitter-color);
- border-width: 0 0 0 1px;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-#global-toolbar .label,
-#timeline-toolbar .label {
- padding: 0 5px;
- border-style: solid;
-}
-
-#global-toolbar .devtools-button,
-#timeline-toolbar .devtools-button {
- margin: 0;
- padding: 0;
-}
-
-#timeline-toolbar .devtools-button,
-#timeline-toolbar .label {
- border-width: 0 1px 0 0;
-}
-
-#element-picker {
- height: 18px;
-}
-
-#element-picker::before {
- background-image: var(--command-pick-image);
-}
-
-.pause-button::before {
- background-image: var(--pause-image);
-}
-
-#rewind-timeline::before {
- background-image: var(--rewind-image);
-}
-
-.pause-button.paused::before {
- background-image: var(--play-image);
-}
-
-#timeline-rate select.devtools-button {
- -moz-appearance: none;
- text-align: center;
- font-family: inherit;
- color: var(--theme-body-color);
- font-size: 1em;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-image: url("chrome://devtools/skin/images/dropmarker.svg");
- background-repeat: no-repeat;
- background-position: calc(100% - 4px) center;
- padding-right: 1em;
-}
-
-#timeline-rate {
- position: relative;
- width: 4.5em;
-}
-
-/* Animation timeline component */
-
-.animation-timeline {
- position: relative;
- display: flex;
- flex-direction: column;
-}
-
-/* Useful for positioning animations or keyframes in the timeline */
-.animation-timeline .track-container {
- position: absolute;
- top: 0;
- left: var(--timeline-sidebar-width);
- /* Leave the width of a marker right of a track so the 100% markers can be
- selected easily */
- right: var(--keyframes-marker-size);
- height: var(--timeline-animation-height);
-}
-
-.animation-timeline .scrubber-wrapper {
- position: absolute;
- left: var(--timeline-sidebar-width);
- /* Leave the width of a marker right of a track so the 100% markers can be
- selected easily */
- right: var(--keyframes-marker-size);
- height: 100%;
-}
-
-.animation-timeline .scrubber {
- z-index: 5;
- pointer-events: none;
- position: absolute;
- /* Make the scrubber as tall as the viewport minus the toolbar height and the
- header-wrapper's borders */
- height: calc(100vh - var(--toolbar-height) - 1px);
- min-height: 100%;
- width: 0;
- border-right: 1px solid #FF0000;
- box-sizing: border-box;
-}
-
-/* The scrubber handle is a transparent element displayed on top of the scrubber
- line that allows users to drag it */
-.animation-timeline .scrubber .scrubber-handle {
- position: absolute;
- height: 100%;
- /* Make it thick enough for easy dragging */
- width: 6px;
- right: -1.5px;
- cursor: col-resize;
- pointer-events: all;
-}
-
-.animation-timeline .scrubber .scrubber-handle::before {
- content: "";
- position: sticky;
- top: 0;
- width: 1px;
- border-top: 5px solid red;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
-}
-
-.animation-timeline .time-header {
- min-height: var(--timeline-animation-height);
- cursor: col-resize;
- -moz-user-select: none;
-}
-
-.animation-timeline .time-header .header-item {
- position: absolute;
- height: 100%;
- padding-top: 3px;
- border-left: 0.5px solid var(--time-graduation-border-color);
-}
-
-.animation-timeline .header-wrapper {
- position: sticky;
- top: 0;
- background-color: var(--theme-body-background);
- border-bottom: 1px solid var(--time-graduation-border-color);
- z-index: 3;
- height: var(--timeline-animation-height);
- overflow: hidden;
-}
-
-.animation-timeline .time-body {
- height: 100%;
-}
-
-.animation-timeline .time-header .time-tick {
- -moz-user-select: none;
- position: absolute;
- width: 0;
- /* When scroll bar is shown, make it covers entire time-body */
- height: 100%;
- /* When scroll bar is hidden, make it as tall as the viewport minus the
- timeline animation height and the header-wrapper's borders */
- min-height: calc(100vh - var(--timeline-animation-height) - 1px);
- border-left: 0.5px solid var(--time-graduation-border-color);
-}
-
-.animation-timeline .animations {
- width: 100%;
- height: 100%;
- padding: 0;
- list-style-type: none;
- margin-top: 0;
-}
-
-/* Animation block widgets */
-
-.animation-timeline .animation {
- margin: 2px 0;
- height: var(--timeline-animation-height);
- position: relative;
-}
-
-/* We want animations' background colors to alternate, but each animation has
- a sibling (hidden by default) that contains the animated properties and
- keyframes, so we need to alternate every 4 elements. */
-.animation-timeline .animation:nth-child(4n+1) {
- background-color: var(--even-animation-timeline-background-color);
-}
-
-.animation-timeline .animation .target {
- width: var(--timeline-sidebar-width);
- height: 100%;
- overflow: hidden;
- display: flex;
- align-items: center;
-}
-
-.animation-timeline .animation-target {
- background-color: transparent;
-}
-
-.animation-timeline .animation .time-block {
- cursor: pointer;
-}
-
-/* Animation iterations */
-
-.animation-timeline .animation .iterations {
- position: absolute;
- height: 100%;
- box-sizing: border-box;
-
- /* Iterations of the animation are displayed with a repeating linear-gradient
- which size is dynamically changed from JS. The gradient only draws 1px
- borders between each iteration. These borders must have the same color as
- the border of this element */
- background-image:
- linear-gradient(to left,
- var(--timeline-border-color) 0,
- var(--timeline-border-color) 1px,
- transparent 1px,
- transparent 2px);
- border: 1px solid var(--timeline-border-color);
- /* Border-right is already handled by the gradient */
- border-width: 1px 0 1px 1px;
-
- /* The background color is set independently */
- background-color: var(--timeline-background-color);
-}
-
-.animation-timeline .animation .iterations.infinite::before,
-.animation-timeline .animation .iterations.infinite::after {
- content: "";
- position: absolute;
- top: 0;
- right: 0;
- width: 0;
- height: 0;
- border-right: 4px solid var(--theme-body-background);
- border-top: 4px solid transparent;
- border-bottom: 4px solid transparent;
-}
-
-.animation-timeline .animation .iterations.infinite::after {
- bottom: 0;
- top: unset;
-}
-
-.animation-timeline .animation .name {
- position: absolute;
- color: var(--theme-selection-color);
- height: 100%;
- display: flex;
- align-items: center;
- padding: 0 2px;
- box-sizing: border-box;
- --fast-track-icon-width: 15px;
- z-index: 1;
-}
-
-.animation-timeline .animation .name div {
- /* Flex items don't support text-overflow, so a child div is used */
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.animation-timeline .fast-track .name div {
- width: calc(100% - var(--fast-track-icon-width));
-}
-
-.animation-timeline .fast-track .name::after {
- /* Animations running on the compositor have the fast-track background image*/
- content: "";
- display: block;
- position: absolute;
- top: 1px;
- right: 0;
- height: 100%;
- width: var(--fast-track-icon-width);
- z-index: 1;
-}
-
-.animation-timeline .all-properties .name::after {
- background-color: white;
- clip-path: url(images/animation-fast-track.svg#thunderbolt);
- background-repeat: no-repeat;
- background-position: center;
-}
-
-.animation-timeline .some-properties .name::after {
- background-color: var(--theme-content-color3);
- clip-path: url(images/animation-fast-track.svg#thunderbolt);
- background-repeat: no-repeat;
- background-position: center;
-}
-
-.animation-timeline .animation .delay,
-.animation-timeline .animation .end-delay {
- position: absolute;
- height: 100%;
- border: 1px solid var(--timeline-border-color);
- box-sizing: border-box;
-}
-
-.animation-timeline .animation .delay {
- border-width: 1px 0 1px 1px;
- background-image: repeating-linear-gradient(45deg,
- transparent,
- transparent 1px,
- var(--theme-selection-color) 1px,
- var(--theme-selection-color) 4px);
- background-color: var(--timeline-border-color);
-}
-
-.animation-timeline .animation .end-delay {
- border-width: 1px 1px 1px 0;
- background-image: repeating-linear-gradient(
- -45deg,
- transparent,
- transparent 3px,
- var(--timeline-border-color) 3px,
- var(--timeline-border-color) 4px);
-}
-
-.animation-timeline .animation .delay.negative,
-.animation-timeline .animation .end-delay.negative {
- /* Negative delays are displayed on top of the animation, so they need a
- right border. Whereas normal delays are displayed just before the
- animation, so there's already the animation's left border that serves as
- a separation. */
- border-width: 1px;
-}
-
-/* Animation target node gutter, contains a preview of the dom node */
-
-.animation-target {
- background-color: var(--theme-toolbar-background);
- padding: 0 4px;
- box-sizing: border-box;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- cursor: pointer;
-}
-
-.animation-target .attribute-name {
- padding-left: 4px;
-}
-
-.animation-target .node-highlighter {
- background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
- padding-left: 16px;
- margin-right: 5px;
- cursor: pointer;
-}
-
-.animation-target .node-highlighter:hover {
- filter: url(images/filters.svg#checked-icon-state);
-}
-
-.animation-target .node-highlighter:active,
-.animation-target .node-highlighter.selected {
- filter: url(images/filters.svg#checked-icon-state);
-}
-
-/* Inline keyframes info in the timeline */
-
-.animation-timeline .animated-properties:not(.selected) {
- display: none;
-}
-
-.animation-timeline .animated-properties {
- background-color: var(--theme-selection-background-semitransparent);
-}
-
-.animation-timeline .animated-properties ul {
- margin: 0;
- padding: 0;
- list-style-type: none;
-}
-
-.animation-timeline .animated-properties .property {
- height: var(--timeline-animation-height);
- position: relative;
-}
-
-.animation-timeline .animated-properties .property:nth-child(2n) {
- background-color: var(--even-animation-timeline-background-color);
-}
-
-.animation-timeline .animated-properties .name {
- width: var(--timeline-sidebar-width);
- padding-right: var(--keyframes-marker-size);
- box-sizing: border-box;
- height: 100%;
- color: var(--theme-body-color-alt);
- white-space: nowrap;
- display: flex;
- justify-content: flex-end;
- align-items: center;
-}
-
-.animation-timeline .animated-properties .name div {
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.animated-properties.cssanimation {
- --background-color: var(--theme-contrast-background);
-}
-
-.animated-properties.csstransition {
- --background-color: var(--theme-highlight-blue);
-}
-
-.animated-properties.scriptanimation {
- --background-color: var(--theme-graphs-green);
-}
-
-.animation-timeline .animated-properties .oncompositor::before {
- content: "";
- display: inline-block;
- width: 17px;
- height: 17px;
- background-color: var(--background-color);
- clip-path: url(images/animation-fast-track.svg#thunderbolt);
- vertical-align: middle;
-}
-
-.animation-timeline .animated-properties .warning {
- text-decoration: underline dotted;
-}
-
-.animation-timeline .animated-properties .frames {
- /* The frames list is absolutely positioned and the left and width properties
- are dynamically set from javascript to match the animation's startTime and
- duration */
- position: absolute;
- top: 0;
- height: 100%;
- /* Using flexbox to vertically center the frames */
- display: flex;
- align-items: center;
-}
-
-/* Keyframes diagram, displayed below the timeline, inside the animation-details
- element. */
-
-.keyframes {
- /* Actual keyframe markers are positioned absolutely within this container and
- their position is relative to its size (we know the offset of each frame
- in percentage) */
- position: relative;
- width: 100%;
- height: 0;
-}
-
-.keyframes.cssanimation {
- background-color: var(--theme-contrast-background);
-}
-
-.keyframes.csstransition {
- background-color: var(--theme-highlight-blue);
-}
-
-.keyframes.scriptanimation {
- background-color: var(--theme-graphs-green);
-}
-
-.keyframes .frame {
- position: absolute;
- top: 0;
- width: 0;
- height: 0;
- background-color: inherit;
- cursor: pointer;
-}
-
-.keyframes .frame::before {
- content: "";
- display: block;
- transform:
- translateX(calc(var(--keyframes-marker-size) * -.5))
- /* The extra pixel on the Y axis is so that markers are centered on the
- horizontal line in the keyframes diagram. */
- translateY(calc(var(--keyframes-marker-size) * -.5 + 1px));
- width: var(--keyframes-marker-size);
- height: var(--keyframes-marker-size);
- border-radius: 100%;
- background-color: inherit;
-}
projects / themes.git / blobdiff