mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-18 15:55:36 +00:00
e54b6b68dd
- Remane --theme-toolbar-icon-color to just --theme-icon-color - Rename --theme-toolbar-checked-color to --theme-icon-checked-color - Introduce a --theme-icon-dimmed-color that is less contrasted (e.g. for Rules icon buttons) - Remove icon color duplication for twisties, console icons - Avoid partial opacity variants of Photon Grey as global variables in variables.css Differential Revision: https://phabricator.services.mozilla.com/D17075 --HG-- extra : moz-landing-system : lando
503 lines
8.8 KiB
CSS
503 lines
8.8 KiB
CSS
/* TODO: May break up into component local CSS. Pending future discussions by
|
|
* React component group on how to best handle CSS. */
|
|
|
|
/**
|
|
* CSS Variables specific to the responsive design mode
|
|
*/
|
|
|
|
:root {
|
|
--rdm-box-shadow: 0 4px 4px 0 rgba(155, 155, 155, 0.26);
|
|
--submit-button-active-background-color: rgba(0,0,0,0.12);
|
|
--submit-button-active-color: var(--theme-body-color);
|
|
--viewport-active-color: #3b3b3b;
|
|
--input-invalid-border-color: var(--red-60);
|
|
}
|
|
|
|
:root.theme-dark {
|
|
--rdm-box-shadow: 0 4px 4px 0 rgba(105, 105, 105, 0.26);
|
|
--submit-button-active-background-color: var(--theme-toolbar-hover-active);
|
|
--submit-button-active-color: var(--theme-selection-color);
|
|
--viewport-active-color: #fcfcfc;
|
|
--input-invalid-border-color: var(--red-50);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root,
|
|
input,
|
|
button {
|
|
font-size: 12px;
|
|
}
|
|
|
|
input,
|
|
button {
|
|
color: var(--theme-toolbar-color);
|
|
background-color: var(--theme-tab-toolbar-background);
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.text-input {
|
|
border: 1px solid var(--theme-splitter-color);
|
|
padding: 2px;
|
|
}
|
|
|
|
.text-input:focus {
|
|
outline: none;
|
|
border-color: var(--theme-selection-background);
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.text-input.invalid {
|
|
border-color: var(--input-invalid-border-color);
|
|
}
|
|
|
|
#app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/**
|
|
* Common styles for shared components
|
|
*/
|
|
|
|
.devtools-separator {
|
|
height: 100%;
|
|
margin: 0 1px;
|
|
}
|
|
|
|
/**
|
|
* Toolbar
|
|
*/
|
|
|
|
#toolbar {
|
|
background-color: var(--theme-tab-toolbar-background);
|
|
border-bottom: 1px solid var(--theme-splitter-color);
|
|
display: grid;
|
|
grid-template-columns: auto min-content;
|
|
width: 100%;
|
|
min-height: 29px;
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
#toolbar-center-controls,
|
|
#toolbar-end-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#toolbar-center-controls {
|
|
flex: 1;
|
|
justify-content: center;
|
|
margin: 1px;
|
|
}
|
|
|
|
#toolbar.left-aligned #toolbar-center-controls {
|
|
justify-content: start;
|
|
}
|
|
|
|
#toolbar.left-aligned #toolbar-end-controls {
|
|
justify-self: end;
|
|
}
|
|
|
|
#rotate-button::before {
|
|
background-image: url("./images/rotate-viewport.svg");
|
|
}
|
|
|
|
#user-agent-label {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-inline-start: 3px;
|
|
margin-inline-end: 3px;
|
|
width: 300px;
|
|
}
|
|
|
|
#user-agent-label:focus-within {
|
|
flex: 1;
|
|
}
|
|
|
|
#user-agent-input {
|
|
margin-inline-start: 3px;;
|
|
width: 100%;
|
|
}
|
|
|
|
#touch-simulation-button::before {
|
|
background-image: url("./images/touch-events.svg");
|
|
}
|
|
|
|
#screenshot-button::before {
|
|
background-image: url("chrome://devtools/skin/images/command-screenshot.svg");
|
|
}
|
|
|
|
#settings-button::before {
|
|
background-image: url("chrome://devtools/skin/images/settings.svg");
|
|
}
|
|
|
|
#exit-button::before {
|
|
background-image: url("chrome://devtools/skin/images/close.svg");
|
|
}
|
|
|
|
/* Briefly animate screenshot button when clicked */
|
|
#screenshot-button:disabled {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
#screenshot-button:disabled::before {
|
|
fill: var(--theme-icon-checked-color);
|
|
}
|
|
|
|
#device-selector {
|
|
margin-inline-start: 4px;
|
|
}
|
|
|
|
#viewports-container {
|
|
display: flex;
|
|
overflow: auto;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.theme-light #viewports-container {
|
|
background-color: #F5F5F6;
|
|
}
|
|
|
|
#viewports {
|
|
/* Individual viewports are inline elements, make sure they stay on a single
|
|
line */
|
|
white-space: nowrap;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
#viewports.left-aligned {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
/**
|
|
* Viewport Container
|
|
*/
|
|
|
|
.viewport {
|
|
display: inline-block;
|
|
/* Align all viewports to the top */
|
|
vertical-align: top;
|
|
}
|
|
|
|
.resizable-viewport {
|
|
border: 1px solid var(--theme-splitter-color);
|
|
box-shadow: var(--rdm-box-shadow);
|
|
position: relative;
|
|
}
|
|
|
|
/**
|
|
* Viewport Content
|
|
*/
|
|
|
|
.viewport-content.resizing {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/**
|
|
* Viewport Browser
|
|
*/
|
|
|
|
.browser {
|
|
display: block;
|
|
border: 0;
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
.browser:-moz-focusring {
|
|
outline: none;
|
|
}
|
|
|
|
/**
|
|
* Viewport Resize Handles
|
|
*/
|
|
|
|
.viewport-resize-handle {
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-image: url("./images/grippers.svg");
|
|
background-position: bottom right;
|
|
padding: 0 1px 1px 0;
|
|
background-repeat: no-repeat;
|
|
background-origin: content-box;
|
|
cursor: se-resize;
|
|
}
|
|
|
|
.viewport-resize-handle.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.viewport-horizontal-resize-handle {
|
|
position: absolute;
|
|
width: 5px;
|
|
height: calc(100% - 16px);
|
|
right: -4px;
|
|
top: 0;
|
|
cursor: e-resize;
|
|
}
|
|
|
|
.viewport-vertical-resize-handle {
|
|
position: absolute;
|
|
width: calc(100% - 16px);
|
|
height: 5px;
|
|
left: 0;
|
|
bottom: -4px;
|
|
cursor: s-resize;
|
|
}
|
|
|
|
/**
|
|
* Viewport Dimension Input
|
|
*/
|
|
|
|
.viewport-dimension {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 1px;
|
|
}
|
|
|
|
.viewport-dimension-input {
|
|
text-align: center;
|
|
width: 3em;
|
|
}
|
|
|
|
.viewport-dimension-separator {
|
|
-moz-user-select: none;
|
|
padding: 0 0.3em;
|
|
}
|
|
|
|
/**
|
|
* Device Modal
|
|
*/
|
|
|
|
@keyframes fade-in-and-up {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(5px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0px);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-down-and-out {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0px);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(5px);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.device-modal {
|
|
background-color: var(--theme-toolbar-background);
|
|
border: 1px solid var(--theme-splitter-color);
|
|
border-radius: 2px;
|
|
box-shadow: var(--rdm-box-shadow);
|
|
position: absolute;
|
|
margin: auto;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 800px;
|
|
max-width: 90%;
|
|
height: 650px;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Handles the opening/closing of the modal */
|
|
#device-modal-wrapper.opened .device-modal {
|
|
animation: fade-in-and-up 0.3s ease forwards;
|
|
}
|
|
|
|
#device-modal-wrapper.closed .device-modal {
|
|
animation: fade-down-and-out 0.3s ease forwards;
|
|
}
|
|
|
|
#device-modal-wrapper.opened .modal-overlay {
|
|
background-color: var(--theme-splitter-color);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 0;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.device-modal-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
overflow: auto;
|
|
height: 515px;
|
|
margin: 20px 20px 0;
|
|
}
|
|
|
|
#device-close-button {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 2px;
|
|
}
|
|
|
|
#device-close-button::before {
|
|
background-image: url("chrome://devtools/skin/images/close.svg");
|
|
}
|
|
|
|
.device-type {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10px;
|
|
}
|
|
|
|
.device-header {
|
|
font-weight: bold;
|
|
text-transform: capitalize;
|
|
padding: 0 0 3px 23px;
|
|
}
|
|
|
|
.device-label {
|
|
color: var(--theme-body-color);
|
|
padding-bottom: 3px;
|
|
display: flex;
|
|
align-items: center;
|
|
/* Largest size without horizontal scrollbars */
|
|
max-width: 181px;
|
|
}
|
|
|
|
.device-input-checkbox {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.device-name {
|
|
flex: 1;
|
|
}
|
|
|
|
.device-remove-button:empty::before {
|
|
background-image: url("chrome://devtools/skin/images/close.svg");
|
|
}
|
|
|
|
#device-submit-button {
|
|
background-color: var(--theme-tab-toolbar-background);
|
|
border-width: 1px 0 0 0;
|
|
border-top-width: 1px;
|
|
border-top-style: solid;
|
|
border-top-color: var(--theme-splitter-color);
|
|
color: var(--theme-body-color);
|
|
width: 100%;
|
|
height: 20px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
#device-submit-button:hover {
|
|
background-color: var(--theme-toolbar-hover);
|
|
}
|
|
|
|
#device-submit-button:hover:active {
|
|
background-color: var(--submit-button-active-background-color);
|
|
color: var(--submit-button-active-color);
|
|
}
|
|
|
|
/**
|
|
* Device Adder
|
|
*/
|
|
|
|
#device-adder {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0 20px;
|
|
}
|
|
|
|
#device-adder-content {
|
|
display: flex;
|
|
}
|
|
|
|
#device-adder-column-1 {
|
|
flex: 1;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#device-adder-column-2 {
|
|
flex: 2;
|
|
}
|
|
|
|
#device-adder button {
|
|
background-color: var(--theme-tab-toolbar-background);
|
|
border: 1px solid var(--theme-splitter-color);
|
|
border-radius: 2px;
|
|
color: var(--theme-body-color);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#device-adder label {
|
|
display: flex;
|
|
margin-bottom: 5px;
|
|
align-items: center;
|
|
}
|
|
|
|
#device-adder label > input,
|
|
#device-adder label > .viewport-dimension {
|
|
flex: 1;
|
|
margin: 0;
|
|
}
|
|
|
|
#device-adder label > .viewport-dimension {
|
|
border-bottom: 1px solid transparent;
|
|
color: var(--theme-body-color-inactive);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
#device-adder label > .viewport-dimension.editing {
|
|
border-bottom-color: var(--theme-selection-background);
|
|
}
|
|
|
|
#device-adder label > .viewport-dimension.editing.invalid {
|
|
border-bottom-color: #d92215;
|
|
}
|
|
|
|
#device-adder input {
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
text-align: center;
|
|
color: var(--theme-body-color-inactive);
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
#device-adder input:focus {
|
|
color: var(--viewport-active-color);
|
|
}
|
|
|
|
#device-adder label > input:focus,
|
|
#device-adder label > .viewport-dimension:focus {
|
|
border-bottom: 1px solid var(--theme-selection-background);
|
|
outline: none;
|
|
}
|
|
|
|
.device-adder-label {
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
min-width: 35px;
|
|
}
|