X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fdevtools%2Fcommon.css;h=d76eda349b8593d266eaa6394cc7ab271ddf3cd3;hp=aead269a0b3aaadebb107ea3078d60e97f556749;hb=d22068c79a3bb7b018bef6d15ff5d985d377ac6f;hpb=dae4507500ac2bc6547a8303851bc9b0bcae5ddf diff --git a/LCARStrek/devtools/common.css b/LCARStrek/devtools/common.css index aead269a..d76eda34 100644 --- a/LCARStrek/devtools/common.css +++ b/LCARStrek/devtools/common.css @@ -34,46 +34,47 @@ notification { .devtools-autocomplete-popup { border-radius: 3px; overflow-x: hidden; - max-height: 40rem; + max-height: 20rem; + + /* Devtools autocompletes display technical english keywords and should be displayed + using LTR direction. */ + direction: ltr !important; +} + +/* Reset list styles. */ +.devtools-autocomplete-popup ul { + list-style: none; +} + +.devtools-autocomplete-popup ul, +.devtools-autocomplete-popup li { + margin: 0; } .devtools-autocomplete-listbox { background-color: transparent; border-width: 0px !important; + margin: 0; } -.devtools-autocomplete-listbox > richlistitem, -.devtools-autocomplete-listbox > richlistitem[selected] { +.devtools-autocomplete-listbox .autocomplete-item { width: 100%; background-color: transparent; border-radius: 4px; } -.devtools-autocomplete-listbox.dark-theme > richlistitem[selected], -.devtools-autocomplete-listbox.dark-theme > richlistitem:hover { -/* background-color: rgba(0,0,0,0.5); */ +.devtools-autocomplete-listbox .autocomplete-selected { +/* background-color: rgba(0,0,0,0.2); */ } -.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > .autocomplete-value, -.devtools-autocomplete-listbox:focus.dark-theme > richlistitem[selected] > .initial-value { -/* color: hsl(208,100%,60%);*/ -} - -.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label { -/* color: #eee;*/ -} - -.devtools-autocomplete-listbox.dark-theme > richlistitem > label { -/* color: #ccc;*/ -} - -.devtools-autocomplete-listbox > richlistitem > .initial-value, -.devtools-autocomplete-listbox > richlistitem > .autocomplete-value { +.devtools-autocomplete-listbox .autocomplete-item > .initial-value, +.devtools-autocomplete-listbox .autocomplete-item > .autocomplete-value { margin: 0; - padding: 1px 0; + padding: 0; + cursor: default; } -.devtools-autocomplete-listbox > richlistitem > .autocomplete-count { +.devtools-autocomplete-listbox .autocomplete-item > .autocomplete-count { text-align: end; } @@ -82,132 +83,24 @@ notification { .devtools-autocomplete-popup, .CodeMirror-hints, .CodeMirror-Tern-tooltip { - border: 1px solid #FF9F00; + border: 1px solid #9C9CFF; background-color: #000000; } -.devtools-autocomplete-popup.light-theme { -} - -.devtools-autocomplete-listbox.firebug-theme > richlistitem[selected], -.devtools-autocomplete-listbox.firebug-theme > richlistitem:hover, -.devtools-autocomplete-listbox.light-theme > richlistitem[selected], -.devtools-autocomplete-listbox.light-theme > richlistitem:hover { -/* background-color: rgba(128,128,128,0.3); */ -} - -.devtools-autocomplete-listbox.firebug-theme > richlistitem[selected] > .autocomplete-value, -.devtools-autocomplete-listbox:focus.firebug-theme > richlistitem[selected] > .initial-value, -.devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value, -.devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value { -/* color: #222;*/ -} - -.devtools-autocomplete-listbox.firebug-theme > richlistitem > label, -.devtools-autocomplete-listbox.light-theme > richlistitem > label { -/* color: #666;*/ -} - -/* Tooltip widget (see devtools/client/shared/widgets/Tooltip.js) */ - -.devtools-tooltip.devtools-tooltip-tooltip { - /* If the tooltip uses a XUL element */ - padding: 4px; - background: #A09090; - border-radius: 3px; -} - -.devtools-tooltip .panel-arrowcontent { - padding: 4px; -} - -.devtools-tooltip .panel-arrowcontainer { - /* Reseting the transition used when panels are shown */ - transition: none; - /* Panels slide up/down/left/right when they appear using a transform. - Since we want to remove the transition, we don't need to transform anymore - plus it can interfeer by causing mouseleave events on the underlying nodes */ - transform: none; -} +/* Autocomplete list clone used for accessibility. */ -.devtools-tooltip[clamped-dimensions] { - min-height: 100px; - max-height: 400px; - min-width: 100px; - max-width: 400px; -} -.devtools-tooltip[clamped-dimensions-no-min-height] { - min-height: 0; - max-height: 400px; - min-width: 100px; - max-width: 400px; -} -.devtools-tooltip[clamped-dimensions-no-max-or-min-height] { - min-width: 400px; - max-width: 400px; -} -.devtools-tooltip[clamped-dimensions] .panel-arrowcontent, -.devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent, -.devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent { +.devtools-autocomplete-list-aria-clone { + /* Cannot use display:none or visibility:hidden : screen readers ignore the element. */ + position: fixed; overflow: hidden; -} -.devtools-tooltip[wide] { - max-width: 600px; -} - -/* Tooltip: Simple Text */ - -.devtools-tooltip-simple-text { - max-width: 400px; - margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */ - padding: 8px 12px; - white-space: pre-wrap; -} - -.devtools-tooltip-simple-text:first-child { - margin-top: -4px; -} - -.devtools-tooltip-simple-text:last-child { - margin-bottom: -4px; -} - -/* Tooltip: Alert Icon */ - -.devtools-tooltip-alert-icon { - width: 32px; - height: 32px; - margin: 6px; - margin-inline-end: 20px; -} - -.devtools-tooltip-alert-icon { - list-style-image: url("chrome://global/skin/icons/alert-exclam.gif"); -} - -/* Tooltip: Variables View */ - -.devtools-tooltip-variables-view-box { - margin: -4px; /* Compensate for the .panel-arrowcontent padding. */ -} - -.devtools-tooltip-variables-view-box .variable-or-property > .title { - padding-inline-end: 6px; -} - -/* Tooltip: Tiles */ - -.devtools-tooltip-tiles { - background-color: #A09090; - background-image: linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF), - linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF); - background-size: 20px 20px; - background-position: 0 0, 10px 10px; + margin: 0; + width: 0; + height: 0; } -.devtools-tooltip-iframe { - border: none; - background: transparent; +.devtools-autocomplete-list-aria-clone li { + /* Prevent screen readers from prefacing every item with 'bullet'. */ + list-style-type: none; } /* links to source code, like displaying `myfile.js:45` */ @@ -240,3 +133,50 @@ notification { margin: 2px 0px; cursor: pointer; } + +/* Keyboard focus highlight styles */ + +:-moz-focusring { + outline: var(--theme-focus-outline); + outline-offset: -1px; +} + +textbox[focused="true"] { + border-color: var(--theme-focus-border-color-textbox); +/* box-shadow: var(--theme-focus-box-shadow-textbox);*/ + transition: all 0.2s ease-in-out +} + +textbox :-moz-focusring { + box-shadow: none; + outline: none; +} + +/* Form fields should already have box-shadow hightlight */ +select:-moz-focusring, +input[type="radio"]:-moz-focusring, +input[type="checkbox"]:-moz-focusring, +checkbox:-moz-focusring { + outline: none; +} + + +:root { + --clear-icon-url: url("chrome://devtools/skin/images/clear.svg"); +} + +.devtools-button.devtools-clear-icon::before { + background-image: var(--clear-icon-url); +} + +.devtools-button.devtools-filter-icon::before { + background-image: var(--filter-image); +} + +.devtools-toolbarbutton.devtools-clear-icon { + list-style-image: var(--clear-icon-url); +} + +.devtools-option-toolbarbutton { + list-style-image: var(--tool-options-image); +}