sunburst.css 106 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567
  1. /*-- HIGHLIGHT CHILDREN --*/
  2. .panel.elements /deep/ .parent + .children {
  3. -webkit-transition: 0.5s ease-in 0.25s;
  4. }
  5. .panel.elements /deep/ .hovered.parent.expanded + .children > li:last-of-type .webkit-html-tag.close,
  6. .panel.elements /deep/ .selected.parent.expanded + .children > li:last-of-type .webkit-html-tag.close {
  7. -webkit-transition: opacity 0.5s ease-in-out 0.25s;
  8. }
  9. .panel.elements .parent.selected.expanded + .children,
  10. .panel.elements .parent.hovered.expanded + .children {
  11. border-bottom-left-radius: 5px;
  12. border-bottom-right-radius: 5px;
  13. padding-bottom: 5px !important;
  14. box-shadow: inset 0px 0px 3px 0px #a6f2f8 !important;
  15. border-bottom: 1px solid #2f3740 !important;
  16. }
  17. .panel.elements .parent.selected.expanded + .children > li .webkit-html-pseudo-element:first-child,
  18. .panel.elements .parent.hovered.expanded + .children > li .webkit-html-pseudo-element:first-child {
  19. color: #80cbc4 !important;
  20. }
  21. .panel.elements .parent.selected.expanded + .children > :last-child *,
  22. .panel.elements .parent.hovered.expanded + .children > :last-child * {
  23. opacity: .6;
  24. }
  25. .panel.elements /deep/ .parent.selected.expanded + .children,
  26. .panel.elements /deep/ .parent.hovered.expanded + .children {
  27. border-bottom-left-radius: 5px;
  28. border-bottom-right-radius: 5px;
  29. padding-bottom: 5px !important;
  30. box-shadow: inset 0px 0px 3px 0px #a6f2f8 !important;
  31. border-bottom: none !important;
  32. }
  33. .panel.elements /deep/ .parent.selected.expanded + .children > li .webkit-html-pseudo-element:first-child,
  34. .panel.elements /deep/ .parent.hovered.expanded + .children > li .webkit-html-pseudo-element:first-child {
  35. color: #80cbc4 !important;
  36. }
  37. .panel.elements /deep/ .parent.selected.expanded + .children > li:last-of-type .webkit-html-tag.close,
  38. .panel.elements /deep/ .parent.hovered.expanded + .children > li:last-of-type .webkit-html-tag.close {
  39. opacity: 0.5 !important;
  40. }
  41. .cm-breakpoint .CodeMirror-gutter-elt {
  42. color: #000 !important;
  43. font-weight: 700 !important;
  44. }
  45. .CodeMirror-cursor {
  46. border-left: 1px solid #cdd3de !important;
  47. }
  48. .cm-error {
  49. background: #9d1e15 !important;
  50. border-radius: 2px !important;
  51. color: #eee !important;
  52. }
  53. .CodeMirror-gutter-elt {
  54. color: #546e7a !important;
  55. }
  56. .CodeMirror-gutters {
  57. background: #111 !important;
  58. border-right: 2px solid #2e3c43 !important;
  59. }
  60. .CodeMirror-selected,
  61. span.CodeMirror-selectedtext {
  62. background: #2e3c43 !important;
  63. }
  64. .CodeMirror-code .CodeMirror-matchingbracket {
  65. color: #80cbc4 !important;
  66. text-shadow: 0 0 3px #80cbc4 !important;
  67. border-bottom: none !important;
  68. font-weight: 800 !important;
  69. }
  70. .CodeMirror-code .CodeMirror-nonmatchingbracket {
  71. color: #db0404 !important;
  72. text-shadow: 0 0 3px #db0404 !important;
  73. border-bottom: none !important;
  74. font-weight: 800 !important;
  75. }
  76. .cm-search-highlight-start:before {
  77. border-color: #80cbc4 !important;
  78. }
  79. .cm-search-highlight-end:before {
  80. border-color: #80cbc4 !important;
  81. }
  82. .cm-search-highlight:before {
  83. border-color: #80cbc4 !important;
  84. padding: 2px !important;
  85. }
  86. .cm-line-with-selection .cm-column-with-selection.cm-search-highlight:before {
  87. background-color: #80cbc4 !important;
  88. border-radius: 2px !important;
  89. }
  90. span.cm-token-highlight {
  91. background-color: transparent !important;
  92. padding: 0px !important;
  93. }
  94. span.cm-token-highlight:before {
  95. border-color: #80cbc4 !important;
  96. }
  97. .cm-line-with-selection span.cm-column-with-selection {
  98. color: #000 !important;
  99. background-color: #80cbc4 !important;
  100. }
  101. .cm-whitespace:before {
  102. color: #2e3c43 !important;
  103. }
  104. .cm-tab:before {
  105. border-bottom: 1px solid #2e3c43 !important;
  106. }
  107. .cm-highlight {
  108. -webkit-animation: "fadeout-revised" 3s 0s !important;
  109. }
  110. .cm-highlight *:not(.CodeMirror-linenumber) {
  111. color: #e6e6e6 !important;
  112. }
  113. .cm-execution-line {
  114. background-color: #3e4c58 !important;
  115. outline: 1px solid #2e3c43 !important;
  116. }
  117. .CodeMirror-linenumber {
  118. border-right: none !important;
  119. }
  120. .cm-line-without-source-mapping {
  121. background-color: #222 !important;
  122. }
  123. @-webkit-keyframes fadeout-revised {
  124. 0% {
  125. background-color: #3e4c58;
  126. }
  127. 50% {
  128. background-color: #3e4c58;
  129. }
  130. 100% {
  131. background-color: #263238;
  132. outline: 1px solid #263238;
  133. }
  134. }
  135. /************************************************
  136. /* Elements Crumbs
  137. /************************************************/
  138. #elements-crumbs {
  139. background: #111 !important;
  140. border-top: 1px solid #2e3c43 !important;
  141. border-top: none !important;
  142. height: 19px !important;
  143. }
  144. #elements-crumbs .crumbs {
  145. text-shadow: none !important;
  146. color: #b1bdc4 !important;
  147. }
  148. #elements-crumbs .crumbs .crumb {
  149. -webkit-border-image: none !important;
  150. border-left: 1px solid #2e3c43 !important;
  151. border-right: 1px solid #282e35 !important;
  152. padding: 0 10px !important;
  153. margin: 0 !important;
  154. line-height: 18px !important;
  155. }
  156. #elements-crumbs .crumbs .crumb:hover {
  157. color: #f8f8f8 !important;
  158. background-color: #b1bdc4 !important;
  159. }
  160. #elements-crumbs .crumbs .crumb.selected {
  161. background-color: #3e4c58 !important;
  162. text-shadow: none !important;
  163. color: #f8f8f8 !important;
  164. cursor: default;
  165. }
  166. /***************************************************
  167. /* Dialog Boxes
  168. /* -------------------------------------------
  169. /* Search Functions/Selectors in File [Ctrl+Shift+O]
  170. /***************************************************/
  171. .dialog {
  172. background: #282e35 !important;
  173. box-shadow: 0 5px 15px 5px rgba(0, 0, 0, 0.6) !important;
  174. border: 1px solid #2e3c43 !important;
  175. }
  176. .dialog .fill {
  177. border: none !important;
  178. }
  179. .dialog .selected {
  180. background-color: #3e4c58 !important;
  181. box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.3) !important;
  182. color: #cdd3de !important;
  183. }
  184. .dialog input,
  185. .dialog input:focus {
  186. background-color: #222 !important;
  187. border: none !important;
  188. color: #e6e6e6 !important;
  189. padding: 0 5px;
  190. }
  191. .filtered-item-list-dialog-item {
  192. background-color: #222 !important;
  193. border-top: 1px solid #2e3c43 !important;
  194. border-bottom: 1px solid #2e3c43 !important;
  195. }
  196. .filtered-item-list-dialog-item .filtered-item-list-dialog-subtitle {
  197. color: #808080 !important;
  198. }
  199. .filtered-item-list-dialog-item:not(.selected):hover {
  200. background-color: #282e35 !important;
  201. box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.8) !important;
  202. }
  203. .filtered-item-list-dialog-item .filtered-item-list-dialog-title,
  204. .filtered-item-list-dialog-item span {
  205. color: #e6e6e6 !important;
  206. }
  207. .filtered-item-list-dialog-item .highlight {
  208. color: #80cbc4 !important;
  209. }
  210. .filtered-item-list-dialog > div.container {
  211. background-color: #222 !important;
  212. }
  213. .text-button,
  214. [is="text-button"] {
  215. background: #111 !important;
  216. color: #cdd3de !important;
  217. border: none !important;
  218. border-radius: 3px !important;
  219. cursor: pointer !important;
  220. box-shadow: none !important;
  221. text-shadow: none !important;
  222. }
  223. .text-button:disabled,
  224. [is="text-button"]:disabled {
  225. cursor: default !important;
  226. opacity: 0.3 !important;
  227. }
  228. .text-button:not(:disabled):active,
  229. [is="text-button"]:not(:disabled):active {
  230. box-shadow: inset 0 1px 1px 0 #151515, 0 1px 1px 0 #6f6f6f !important;
  231. }
  232. .chrome-select {
  233. background-color: #282e35 !important;
  234. border-color: #2e3c43 !important;
  235. color: #e6e6e6 !important;
  236. background-image: none !important;
  237. text-shadow: none !important;
  238. -webkit-appearance: menulist !important;
  239. box-shadow: none !important;
  240. }
  241. .chrome-select:disabled {
  242. opacity: .3 !important !important;
  243. }
  244. .chrome-select:focus {
  245. outline-color: none !important !important;
  246. }
  247. .search-drawer-header label.search-config-label,
  248. .drawer .settings-tab label,
  249. #drawer-footer td label {
  250. text-shadow: none !important;
  251. color: #b1bdc4 !important;
  252. }
  253. .overrides-view .tabbed-pane-header-tab {
  254. color: #b1bdc4 !important;
  255. }
  256. .overrides-view .tabbed-pane-content {
  257. color: #b1bdc4 !important;
  258. }
  259. .overrides-view .tabbed-pane-content :disabled {
  260. color: rgba(204, 204, 204, 0.3) !important;
  261. }
  262. .overrides-view input,
  263. .overrides-view select {
  264. background-color: #282e35 !important;
  265. border-color: #2e3c43 !important;
  266. color: #e6e6e6 !important;
  267. }
  268. .overrides-view input:disabled,
  269. .overrides-view select:disabled {
  270. opacity: .3 !important !important;
  271. }
  272. .overrides-view input:focus,
  273. .overrides-view select:focus {
  274. outline-color: none !important !important;
  275. }
  276. input[type="range"]::-webkit-slider-runnable-track {
  277. background: #111 !important;
  278. border-top: 1px solid #2e3c43 !important;
  279. height: 5px !important;
  280. text-align: center !important;
  281. margin: 10px 0 !important;
  282. }
  283. input[type='range']::-webkit-slider-thumb {
  284. position: relative !important;
  285. top: -5px !important;
  286. }
  287. .revision-history-link {
  288. color: #80cbc4 !important;
  289. }
  290. .outline-disclosure.revision-history-drawer ol li {
  291. padding-top: 2px !important;
  292. line-height: 15px !important;
  293. }
  294. .revision-history-drawer > ol > .parent {
  295. background-color: #2a2a2a !important;
  296. color: #b1bdc4 !important;
  297. border-top: 1px solid #2e3c43 !important;
  298. border-bottom: 1px solid #151515 !important;
  299. margin: 0 !important;
  300. height: 22px !important;
  301. }
  302. .revision-history-drawer > ol > .parent + .children {
  303. margin-bottom: 10px !important;
  304. }
  305. .revision-history-drawer .revision-history-revision {
  306. color: #b1bdc4 !important;
  307. background-color: #222 !important;
  308. border-top: 1px solid #363636 !important;
  309. border-bottom: 1px solid #1a1a1a !important;
  310. height: 22px !important;
  311. line-height: 20px !important;
  312. }
  313. .revision-history-drawer .webkit-line-number {
  314. background: #111 !important;
  315. border-right: 1px solid #2e3c43 !important;
  316. padding: 1px 5px 1px 0 !important;
  317. display: inline-block;
  318. color: #546e7a !important;
  319. }
  320. .revision-history-drawer .source-code {
  321. margin: 5px 0 15px 10px !important;
  322. }
  323. .revision-history-drawer .source-code .revision-history-line-separator:nth-child(1) {
  324. background-color: #222 !important;
  325. }
  326. .revision-history-drawer .revision-history-line-separator {
  327. margin-top: 4px !important;
  328. }
  329. .revision-history-drawer .revision-history-line-removed,
  330. .revision-history-drawer .revision-history-line-added {
  331. background-color: #222 !important;
  332. }
  333. .revision-history-drawer .revision-history-line-removed span:last-child,
  334. .revision-history-drawer .revision-history-line-added span:last-child {
  335. margin-left: 2px;
  336. }
  337. .revision-history-drawer .revision-history-line-removed {
  338. color: #ff5a5a !important;
  339. }
  340. .revision-history-drawer .revision-history-line-added {
  341. color: #7eb17e !important;
  342. }
  343. .help-footnote {
  344. border-top: none !important;
  345. }
  346. .help-footnote a {
  347. color: #80cbc4;
  348. }
  349. button.overrides-swap {
  350. background: #111 !important;
  351. color: #cdd3de !important;
  352. border: none !important;
  353. border-radius: 3px !important;
  354. cursor: pointer !important;
  355. box-shadow: none !important;
  356. text-shadow: none !important;
  357. }
  358. button.overrides-swap:disabled {
  359. cursor: default !important;
  360. opacity: 0.3 !important;
  361. }
  362. button.overrides-swap:not(:disabled):active {
  363. box-shadow: inset 0 1px 1px 0 #151515, 0 1px 1px 0 #6f6f6f !important;
  364. }
  365. .overrides-activate-device #tab-device .tabbed-pane-header-tab-title::after,
  366. .overrides-activate-media #tab-media .tabbed-pane-header-tab-title::after,
  367. .overrides-activate-network #tab-network .tabbed-pane-header-tab-title::after,
  368. .overrides-activate-sensors #tab-sensors .tabbed-pane-header-tab-title::after {
  369. color: #80cbc4 !important;
  370. }
  371. /**********************************************/
  372. /* Find Module [ctrl+shift+F / cmd+shift+F]
  373. /**********************************************/
  374. #search-results-pane-file-based .search-result,
  375. ::shadow #search-results-pane-file-based .search-result {
  376. background-color: #2a2a2a !important;
  377. color: #b1bdc4 !important;
  378. border-top: 1px solid #363636 !important;
  379. border-bottom: 1px solid #2e3c43 !important;
  380. line-height: 18px !important;
  381. margin: 0 !important;
  382. }
  383. #search-results-pane-file-based .show-more-matches,
  384. ::shadow #search-results-pane-file-based .show-more-matches {
  385. color: #80cbc4 !important;
  386. }
  387. #search-results-pane-file-based .parent:hover,
  388. ::shadow #search-results-pane-file-based .parent:hover {
  389. background-color: #282e35 !important;
  390. color: #d9d9d9 !important;
  391. }
  392. #search-results-pane-file-based .parent .search-result-file-name,
  393. ::shadow #search-results-pane-file-based .parent .search-result-file-name {
  394. color: #546e7a !important;
  395. }
  396. #search-results-pane-file-based .parent .search-result-matches-count,
  397. ::shadow #search-results-pane-file-based .parent .search-result-matches-count {
  398. color: #71f38f !important;
  399. }
  400. .toolbar-search button,
  401. ::shadow .search-action-button {
  402. background: #111 !important;
  403. color: #cdd3de !important;
  404. border: none!important;
  405. border-radius: 3px !important;
  406. cursor: pointer !important;
  407. box-shadow: none !important;
  408. text-shadow: none !important;
  409. }
  410. .toolbar-search button:disabled {
  411. cursor: default !important;
  412. opacity: 0.3 !important;
  413. }
  414. .toolbar-search button:not(:disabled):active {
  415. box-shadow: inset 0 1px 1px 0 #151515, 0 1px 1px 0 #6f6f6f !important;
  416. }
  417. .toolbar-search-control,
  418. ::shadow .toolbar-search-control {
  419. background-color: #282e35 !important;
  420. border: 1px solid #2e3c43 !important;
  421. }
  422. .toolbar-search-control input,
  423. ::shadow .toolbar-search-control input {
  424. background-color: #282e35 !important;
  425. border-color: #2e3c43 !important;
  426. color: #e6e6e6 !important;
  427. border-color: none !important;
  428. }
  429. .toolbar-search-control input:disabled,
  430. ::shadow .toolbar-search-control input:disabled {
  431. opacity: .3 !important;
  432. }
  433. .toolbar-search-control input:focus,
  434. ::shadow .toolbar-search-control input:focus {
  435. outline-color: none !important;
  436. }
  437. .toolbar-search-control .toolbar-search-navigation-controls,
  438. ::shadow .toolbar-search-control .toolbar-search-navigation-controls {
  439. background: #111 !important;
  440. }
  441. .toolbar-search-control .toolbar-search-navigation.toolbar-search-navigation-prev,
  442. .toolbar-search-control .toolbar-search-navigation.toolbar-search-navigation-next,
  443. ::shadow .toolbar-search-control .toolbar-search-navigation.toolbar-search-navigation-prev,
  444. ::shadow .toolbar-search-control .toolbar-search-navigation.toolbar-search-navigation-next {
  445. border: 1px solid #363636 !important;
  446. }
  447. ::shadow .search-replace.toolbar-replace-control {
  448. background-color: #282e35 !important;
  449. border-color: #2e3c43 !important;
  450. color: #e6e6e6 !important;
  451. }
  452. ::shadow .search-replace.toolbar-replace-control:disabled {
  453. opacity: .3 !important;
  454. }
  455. ::shadow .search-replace.toolbar-replace-control:focus {
  456. outline-color: none !important;
  457. }
  458. .search-drawer-header input[type="text"].search-config-search,
  459. ::shadow .search-config-search {
  460. background-color: #282e35 !important;
  461. color: #e6e6e6 !important;
  462. border: 1px solid #2e3c43 !important;
  463. }
  464. .search-drawer-header input[type="text"].search-config-search:focus,
  465. ::shadow .search-config-search:focus {
  466. outline-color: #80cbc4 !important;
  467. }
  468. #drawer-contents .search-match-line-number,
  469. ::shadow .search-match-line-number {
  470. background: #111 !important;
  471. border-right: 1px solid #2e3c43 !important;
  472. padding: 1px 5px 1px 0 !important;
  473. display: inline-block;
  474. color: #546e7a !important;
  475. }
  476. #search-results-pane-file-based .search-match .highlighted-match,
  477. .highlighted-search-result,
  478. .webkit-highlighted-line.webkit-line-content,
  479. ::shadow #search-results-pane-file-based .search-match .highlighted-match {
  480. color: #000000 !important;
  481. border-radius: 2px !important;
  482. font-size: 1em !important;
  483. background-color: #80cbc4 !important;
  484. box-shadow: rgba(0, 0, 0, 0.498039) 3px 3px 4px 0px !important;
  485. }
  486. .search-match:hover {
  487. background-color: #282e35 !important;
  488. box-shadow: inset 0 1px 0 0 #282e35, inset 0 -1px 0 0 #282e35;
  489. }
  490. .status-bar,
  491. ::shadow .search-bar {
  492. background-color: #282e35 !important;
  493. border-top: none !important;
  494. border-bottom: none !important;
  495. }
  496. .search-results-matches {
  497. color: #b1bdc4 !important;
  498. }
  499. .search-match-content,
  500. ::shadow .search-match-content {
  501. color: #b1bdc4 !important;
  502. }
  503. .search-status-bar-summary,
  504. ::shadow .search-status-bar-summary {
  505. background: linear-gradient(#505050, #363636) !important;
  506. border-top: 1px solid #505050 !important;
  507. }
  508. .search-drawer-header input[type="checkbox"].search-config-checkbox {
  509. vertical-align: middle !important;
  510. }
  511. .sidebar-pane-filter-box {
  512. border-top: 1px solid #2e3c43 !important;
  513. }
  514. .sidebar-pane-filter-box.styles-filter-engaged {
  515. background-color: transparent !important;
  516. }
  517. .sidebar-pane-filter-box > input {
  518. color: #b1bdc4 !important;
  519. }
  520. .styles-section .properties li.filter-match,
  521. .styles-section .simple-selector.filter-match {
  522. background-color: #3e4c58 !important;
  523. box-shadow: 0 0 0 1px #2e3c43 !important;
  524. border-radius: 2px;
  525. }
  526. ::shadow ::shadow .regex-search-status-bar-item.status-bar-item.toggled-off .status-bar-button-text,
  527. ::shadow ::shadow .case-sensitive-search-status-bar-item.status-bar-item.toggled-off .status-bar-button-text {
  528. color: #b1bdc4 !important;
  529. }
  530. ::shadow ::shadow .regex-search-status-bar-item.status-bar-item.toggled-on .status-bar-button-text,
  531. ::shadow ::shadow .case-sensitive-search-status-bar-item.status-bar-item.toggled-on .status-bar-button-text {
  532. color: #80cbc4 !important;
  533. }
  534. ::shadow ::shadow .status-bar-item .status-bar-button-text {
  535. color: #b1bdc4 !important;
  536. }
  537. /**********************************************
  538. /* DevTool Chrome
  539. /**********************************************/
  540. #console-messages,
  541. #console-view,
  542. #network-views .CodeMirror-lines,
  543. #script-view-fallback,
  544. .console-view-wrapper,
  545. .dialog .fill,
  546. .drawer .revision-history-drawer,
  547. .help-window-main,
  548. .panel .split-view-contents,
  549. .panel,
  550. .panel-enabler-view,
  551. .profiles-sidebar-tree-box,
  552. .resource-view .script-view,
  553. .sidebar-overlay,
  554. .split-view-vertical .sidebar-pane.composite .properties-tree,
  555. .styles-section.read-only,
  556. .tabbed-pane-content,
  557. .tabbed-pane-content.has-no-tabs .timeline-records-title,
  558. .timeline-records-list,
  559. #timeline-overview-sidebar {
  560. background-color: #000 !important;
  561. z-index: 0;
  562. }
  563. .panel-enabler-view {
  564. color: #b1bdc4;
  565. }
  566. .panel .sidebar-tree-item.selected {
  567. background-color: #3e4c58 !important;
  568. color: #e6e6e6 !important;
  569. box-shadow: inset 0 1px 0 0 #2e3c43, inset 0 -1px 0 0 #2e3c43;
  570. }
  571. .panel .sidebar-tree-item:not(.selected):hover {
  572. background-color: #282e35 !important;
  573. color: #b1bdc4 !important;
  574. box-shadow: inset 0 1px 0 0 #282e35, inset 0 -1px 0 0 #282e35;
  575. }
  576. .panel .sidebar-tree-item .disclosure-button {
  577. background-color: #8c8c8c !important;
  578. }
  579. .panel .data-grid th {
  580. border: none !important;
  581. }
  582. .panel .status-bar {
  583. border-bottom: 1px solid #505050;
  584. }
  585. .panel .status-bar-text {
  586. color: #b1bdc4 !important;
  587. }
  588. body.dock-to-right.inactive:not(.undocked):not(.overlay-contents),
  589. body.dock-to-right:not(.undocked):not(.overlay-contents) {
  590. border-left: transparent !important;
  591. }
  592. .split-view.vbox > .split-view-sidebar.split-view-contents-second:not(.maximized) {
  593. border-top: none !important;
  594. }
  595. .tabbed-pane-content .settings-tab-text-button {
  596. background: #111 !important;
  597. border-top: 1px solid #2e3c43 !important;
  598. color: #cdd3de !important;
  599. border-radius: 3px !important;
  600. cursor: pointer !important;
  601. box-shadow: none !important;
  602. text-shadow: none !important;
  603. }
  604. .tabbed-pane-content .settings-tab-text-button:disabled {
  605. cursor: default !important;
  606. opacity: 0.3 !important;
  607. }
  608. .tabbed-pane-content .settings-tab-text-button:not(:disabled):active {
  609. box-shadow: inset 0 1px 1px 0 #151515, 0 1px 1px 0 #6f6f6f !important;
  610. }
  611. .split-view.vbox > .split-view-resizer > .split-view-resizer-border,
  612. .split-view.hbox > .split-view-resizer > .split-view-resizer-border {
  613. border: none !important;
  614. }
  615. .sidebar {
  616. background: none !important;
  617. }
  618. .editing {
  619. background-color: #222 !important;
  620. outline: 1px solid #80cbc4 !important;
  621. color: #b1bdc4 !important;
  622. }
  623. /**********************************************/
  624. /* Navigation Arrows
  625. /**********************************************/
  626. .styles-section.matched-styles .properties li.parent.expanded .expand-element,
  627. #console-messages .console-group-messages .section.expanded .header::before,
  628. #console-messages .properties-tree li.parent.expanded::before,
  629. .outline-disclosure li.parent.expanded::before,
  630. .properties-tree li.parent.expanded::before,
  631. .section.expanded > .header::before,
  632. .section .event-bar.expanded .header::before,
  633. .sidebar-pane .parent.expanded::before,
  634. .sidebar-pane-stack .sidebar-pane-title.expanded::before,
  635. .timeline-expandable-expanded .timeline-expandable-arrow,
  636. .styles-section.matched-styles .style-properties li.parent.expanded .expand-element {
  637. background-color: #8c8c8c !important;
  638. background-image: none !important;
  639. -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important;
  640. -webkit-transition: -webkit-transform 0.1s ease-in-out;
  641. -webkit-mask-position: -4px -96px;
  642. -webkit-transform: rotate(90deg);
  643. }
  644. .sidebar-pane-stack .sidebar-pane-title.expanded::before {
  645. -webkit-transform: rotate(90deg) translateX(2px);
  646. }
  647. .styles-section.matched-styles .properties li.parent .expand-element,
  648. #console-messages .console-group-messages .section .header::before,
  649. #console-messages .properties-tree li.parent::before,
  650. .outline-disclosure li.parent::before,
  651. #search-results-pane-file-based .parent::before,
  652. .properties-tree li.parent::before,
  653. .section > .header::before,
  654. .section .event-bar .header::before,
  655. .sidebar-pane .parent::before,
  656. .sidebar-pane-stack .sidebar-pane-title::before,
  657. .timeline-expandable-collapsed .timeline-expandable-arrow,
  658. ::shadow #search-results-pane-file-based .parent::before,
  659. .styles-section.matched-styles .style-properties li.parent .expand-element {
  660. background-color: #8c8c8c !important;
  661. background-image: none !important;
  662. -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important;
  663. -webkit-transition: -webkit-transform 0.1s ease-in-out;
  664. -webkit-mask-position: -4px -96px;
  665. -webkit-transform: rotate(0deg);
  666. }
  667. .data-grid th.sort-ascending > div::after {
  668. background-color: #8c8c8c !important;
  669. background-image: none !important;
  670. -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important;
  671. -webkit-transition: -webkit-transform 0.1s ease-in-out;
  672. -webkit-mask-position: -4px -108px !important;
  673. }
  674. .data-grid th.sort-descending > div::after {
  675. background-color: #8c8c8c !important;
  676. background-image: none !important;
  677. -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important;
  678. -webkit-transition: -webkit-transform 0.1s ease-in-out;
  679. -webkit-mask-position: -20px -96px !important;
  680. }
  681. #search-results-pane-file-based .parent.expanded::before,
  682. ::shadow #search-results-pane-file-based .parent.expanded::before {
  683. -webkit-mask-position: -20px -96px !important;
  684. }
  685. #search-results-pane-file-based .parent.expanded::before,
  686. ::shadow #search-results-pane-file-based .parent.expanded::before {
  687. -webkit-mask-position: -20px -93px !important;
  688. }
  689. #search-results-pane-file-based .parent::before,
  690. ::shadow #search-results-pane-file-based .parent::before {
  691. -webkit-mask-position: -4px -93px !important;
  692. }
  693. .panel.network . li.parent::before {
  694. top: 3px !important;
  695. }
  696. .sidebar-tabbed-pane .section > .header::before,
  697. .event-bars .event-bar .header::before {
  698. margin-top: 3px !important;
  699. }
  700. .status-bar-select-arrow {
  701. background-color: #8c8c8c !important;
  702. background-image: none !important;
  703. -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important;
  704. -webkit-transition: -webkit-transform 0.1s ease-in-out;
  705. -webkit-mask-position: -20px -96px !important;
  706. }
  707. /**********************************************
  708. /* Element Highlighter
  709. /**********************************************/
  710. .panel.elements #elements-content .CodeMirror {
  711. outline: none !important;
  712. }
  713. .panel.elements ::shadow .outline-disclosure ol:focus li.selected .selection,
  714. .panel.console ::shadow .outline-disclosure ol:focus li.selected .selection,
  715. .panel.elements ::shadow .elements-disclosure ol:focus li.selected .selection,
  716. .panel.console ::shadow .elements-disclosure ol:focus li.selected .selection,
  717. .panel.elements ::shadow .outline-disclosure li.selected .selection,
  718. .panel.console ::shadow .outline-disclosure li.selected .selection,
  719. .panel.elements ::shadow .elements-disclosure li.selected .selection,
  720. .panel.console ::shadow .elements-disclosure li.selected .selection {
  721. /* outline: 1px solid #2e3c43 !important; */
  722. background-color: #3e4c58 !important;
  723. }
  724. .panel.elements ::shadow .outline-disclosure li.hovered:not(.selected) .selection,
  725. .panel.console ::shadow .outline-disclosure li.hovered:not(.selected) .selection,
  726. .panel.elements ::shadow .elements-disclosure li.hovered:not(.selected) .selection,
  727. .panel.console ::shadow .elements-disclosure li.hovered:not(.selected) .selection {
  728. border-radius: 0 !important;
  729. background-color: #282e35 !important;
  730. border-top: 1px solid #282e35 !important;
  731. border-bottom: 1px solid #282e35 !important;
  732. }
  733. .outline-disclosure li.in-clipboard .highlight {
  734. outline: 1px dashed #546e7a !important;
  735. }
  736. /**********************************************
  737. /* Element Highlighter
  738. /**********************************************/
  739. .paint-profiler-overview,
  740. .paint-profiler-canvas-container canvas,
  741. .paint-profiler-view canvas {
  742. background-color: #222 !important;
  743. }
  744. .progress-banner {
  745. background-color: rgba(111, 111, 111, 0.5) !important;
  746. color: #b1bdc4 !important;
  747. }
  748. .layers.panel .outline-disclosure li {
  749. margin-top: 2px !important;
  750. }
  751. .layers.panel .selection {
  752. height: 18px !important;
  753. }
  754. .sidebar-tree li {
  755. color: #b1bdc4 !important;
  756. }
  757. /**********************************************
  758. /* Network Tab (uses _tables.less for list of nodes)
  759. /**********************************************/
  760. #network-container {
  761. border-top: none !important;
  762. }
  763. #network-container:not(.brief-mode) .network-log-grid.data-grid td.name-column:hover {
  764. text-decoration: none !important;
  765. }
  766. .data-grid {
  767. border: none !important;
  768. }
  769. .data-grid th.sort-ascending,
  770. .data-grid th.sort-descending,
  771. .data-grid th.sortable,
  772. .data-grid .timeline-column {
  773. border-right: 1px solid #2e3c43 !important;
  774. }
  775. .data-grid .network-timeline-grid .resources-divider-label {
  776. color: #b1bdc4 !important;
  777. }
  778. .data-grid .network-timeline-grid .resources-divider {
  779. border-right: 1px solid #2e3c43;
  780. }
  781. .highlighted-row {
  782. -webkit-animation: "fadeout-revised" 2s 0s !important;
  783. }
  784. /*dropdownlist in network panel*/
  785. .timeline-column option {
  786. color: #b1bdc4 !important;
  787. background: #111 !important;
  788. }
  789. .resource-view.image .title {
  790. color: #b1bdc4 !important;
  791. }
  792. .resource-view.image .infoList dt {
  793. color: #626262 !important;
  794. margin-bottom: 5px !important;
  795. }
  796. .resource-view.image .infoList dd {
  797. color: #b1bdc4 !important;
  798. margin-bottom: 5px !important;
  799. }
  800. .request-headers-view .header-name {
  801. color: #626262 !important;
  802. }
  803. .request-headers-view .header-value {
  804. color: #b1bdc4 !important;
  805. }
  806. .request-headers-view .caution {
  807. color: #ddbb00 !important;
  808. }
  809. /* Fallback Support */
  810. .resource-source-frame-fallback {
  811. background-color: #282e35 !important;
  812. color: #b1bdc4 !important;
  813. }
  814. /* Network Timing Pane */
  815. .resource-timing-view table {
  816. background-color: #282e35 !important;
  817. padding: 20px !important;
  818. border-radius: 4px;
  819. margin: 20px !important;
  820. }
  821. .resource-timing-view table td .network-timing-bar-title {
  822. color: #b1bdc4 !important;
  823. text-shadow: 0 1px 1px #2e3c43 !important;
  824. }
  825. .resource-timing-view .network-timing-table .footnote a,
  826. .resource-timing-view .network-timing-table .network-timing-footer a {
  827. color: #c792ea;
  828. }
  829. #network-views .request-headers-view .parent,
  830. .network .request-headers-view .parent {
  831. background-color: #282828 !important;
  832. color: #b1bdc4 !important;
  833. border-top: 1px solid #2e3c43 !important;
  834. border-bottom: 1px solid #151515 !important;
  835. line-height: 18px;
  836. }
  837. #network-views .script-view-fallback {
  838. background-color: #222 !important;
  839. color: #b1bdc4 !important;
  840. }
  841. .request-headers-view .outline-disclosure .header-count,
  842. .request-headers-view .outline-disclosure .header-toggle {
  843. color: #80cbc4 !important;
  844. margin-left: 4px !important;
  845. }
  846. .request-headers-view .outline-disclosure .header-toggle:hover {
  847. text-shadow: 0 0 10px #80cbc4;
  848. }
  849. .network-cell-subtitle {
  850. color: #bfbfbf !important;
  851. }
  852. .network-log-grid.data-grid th {
  853. border-bottom: transparent !important;
  854. }
  855. .network.panel .panel-status-bar {
  856. border-bottom: none !important;
  857. }
  858. .data-grid .network-error-row,
  859. .data-grid .network-error-row > td,
  860. .data-grid .network-error-row .network-cell-subtitle {
  861. color: #ff5a5a !important;
  862. }
  863. /**********************************************/
  864. /* Elements/Network
  865. /**********************************************/
  866. .panel:not(.timeline):not(.audits):not(.profiles):not(.cpu-profiler):not(.css-profiler):not(.heap-profiler):not(.canvas-profiler) table,
  867. .network-graph-bar,
  868. .network-graph-label,
  869. .network-graph-bar-area {
  870. color: #b1bdc4 !important;
  871. }
  872. .network-summary-bar {
  873. background: #111 !important;
  874. border-top: 1px solid #2e3c43 !important;
  875. border-top: none !important;
  876. color: #b1bdc4 !important;
  877. }
  878. .network-log-grid.data-grid .bottom-filler-td {
  879. background: none !important;
  880. }
  881. #network-views .resource-view.html {
  882. background-color: #fff !important;
  883. }
  884. /**********************************************
  885. /* Profilers
  886. /**********************************************/
  887. #profile-views .data-grid td > div,
  888. .profile-launcher-view label,
  889. .retainers-view-header,
  890. .profile-launcher-view-tree-item,
  891. .sidebar-tree-section,
  892. .resources-divider-label,
  893. .panel:not(.timeline) .sidebar-tree-item,
  894. .profile-entry-info,
  895. ::shadow .flame-chart-entry-info {
  896. color: #b1bdc4 !important;
  897. }
  898. .profile-entry-info,
  899. ::shadow .flame-chart-entry-info {
  900. text-shadow: 0 0 1px #263238;
  901. background-color: rgba(34, 34, 34, 0.9) !important;
  902. border-radius: 4px;
  903. }
  904. #profile-views .data-grid button {
  905. color: #bfbfbf !important;
  906. }
  907. .heap-snapshot-view tr:not(.selected) td.object-column span.highlight {
  908. background-color: #3e4c58 !important;
  909. border-radius: 3px;
  910. }
  911. .profiles-status-bar {
  912. background: #111 !important;
  913. border-top: 1px solid #2e3c43 !important;
  914. box-shadow: none !important;
  915. border-bottom: none !important;
  916. }
  917. .profiles-status-bar .status-bar {
  918. background-color: transparent !important;
  919. }
  920. .profiles-status-bar .status-bar,
  921. .retainers-view-header,
  922. .heap-snapshot-view .class-view-toolbar {
  923. border-top: none !important;
  924. border-bottom: none !important;
  925. }
  926. input.status-bar-item {
  927. background-color: #2e3c43;
  928. color: #e6e6e6;
  929. border: 1px solid #2e3c43;
  930. }
  931. input.status-bar-item:hover,
  932. input.status-bar-item:focus {
  933. border: 1px solid #2e3c43 !important;
  934. }
  935. .heap-snapshot-view .heap-snapshot-view-resizer {
  936. background: #111 !important;
  937. border-top: 1px solid #2e3c43 !important;
  938. box-shadow: none !important;
  939. border-top: none !important;
  940. border-bottom: none !important;
  941. color: #b1bdc4;
  942. }
  943. #profile-views .data-container .object-column {
  944. color: #b1bdc4;
  945. }
  946. #profile-views .data-container .object-column button {
  947. background: #111 !important;
  948. color: #cdd3de !important;
  949. border: none !important;
  950. border-radius: 3px !important;
  951. cursor: pointer !important;
  952. box-shadow: none !important;
  953. text-shadow: none !important;
  954. }
  955. #profile-views .data-container .object-column button:disabled {
  956. cursor: default !important;
  957. opacity: 0.3 !important;
  958. }
  959. #profile-views .data-container .object-column button:not(:disabled):active {
  960. box-shadow: inset 0 1px 1px 0 #151515, 0 1px 1px 0 #6f6f6f !important;
  961. }
  962. .data-grid td,
  963. .heap-snapshot-stats-name,
  964. .heap-snapshot-stats-size {
  965. color: #b1bdc4 !important;
  966. }
  967. /**********************************************
  968. /* Resources Tab
  969. /**********************************************/
  970. .resources-status-bar .status-bar {
  971. background: #111 !important;
  972. border-top: 1px solid #2e3c43 !important;
  973. box-shadow: none !important;
  974. border-top: none !important;
  975. }
  976. /*-- WEB SQL --*/
  977. .database-query-prompt {
  978. color: #b1bdc4 !important;
  979. }
  980. .database-user-query {
  981. border-top: 1px solid #263238 !important;
  982. border-bottom: 1px solid #080808 !important;
  983. padding-bottom: 10px !important;
  984. }
  985. .database-user-query + span {
  986. padding: 2px 0 !important;
  987. border-top: 1px solid #263238 !important;
  988. border-bottom: 1px solid #080808 !important;
  989. background-color: #282e35 !important;
  990. width: 100% !important;
  991. }
  992. .database-user-query .database-query-text {
  993. color: #b1bdc4 !important;
  994. width: 100% !important;
  995. display: inline-block !important;
  996. margin-bottom: 5px;
  997. margin-top: 2px;
  998. }
  999. .database-user-query::before,
  1000. .database-query-result::before {
  1001. margin-top: -5px !important;
  1002. }
  1003. .database-user-query .error {
  1004. color: #ff5a5a !important;
  1005. }
  1006. .indexed-db-database-view .outline-disclosure .attribute-name {
  1007. color: #ffcb6b !important;
  1008. }
  1009. .indexed-db-database-view .outline-disclosure .attribute-value {
  1010. color: #c3e88d !important;
  1011. }
  1012. /*************************************
  1013. * Help/Settings Overlay
  1014. *************************************/
  1015. .help-window-main {
  1016. color: #b1bdc4 !important;
  1017. /***************************************************
  1018. /* Workspaces Dialog Box
  1019. ****************************************************/
  1020. }
  1021. .help-window-main .settings-tab-container header {
  1022. border-bottom: 1px solid #6f6f6f !important;
  1023. }
  1024. .help-window-main .help-footnote {
  1025. border-top: 1px solid #6f6f6f !important;
  1026. }
  1027. .help-window-main label,
  1028. .help-window-main label:hover {
  1029. color: #b1bdc4 !important;
  1030. }
  1031. .help-window-main .tabbed-pane-header-tab.selected {
  1032. color: #80cbc4 !important;
  1033. }
  1034. .help-window-main .help-section-title {
  1035. color: #80cbc4 !important;
  1036. }
  1037. .help-window-main .help-block label,
  1038. .help-window-main .help-block td {
  1039. color: #b1bdc4 !important;
  1040. }
  1041. .help-window-main select,
  1042. .help-window-main input,
  1043. .help-window-main option {
  1044. background-color: #282e35 !important;
  1045. border-color: #2e3c43 !important;
  1046. color: #e6e6e6 !important;
  1047. }
  1048. .help-window-main select:disabled,
  1049. .help-window-main input:disabled,
  1050. .help-window-main option:disabled {
  1051. opacity: .3 !important;
  1052. }
  1053. .help-window-main select:focus,
  1054. .help-window-main input:focus,
  1055. .help-window-main option:focus {
  1056. outline-color: none !important;
  1057. }
  1058. .help-window-main fieldset:disabled label {
  1059. color: rgba(204, 204, 204, 0.3) !important;
  1060. }
  1061. .help-window-main select:disabled,
  1062. .help-window-main input:disabled,
  1063. .help-window-main .settings-tab-text-button:disabled {
  1064. background-image: none !important;
  1065. box-shadow: none !important;
  1066. text-shadow: none !important;
  1067. }
  1068. .help-window-main .help-key-cell .help-key {
  1069. color: #333333 !important;
  1070. }
  1071. .help-window-main .help-key-cell span {
  1072. color: #eeeeee !important;
  1073. }
  1074. .help-window-main .settings-list-container {
  1075. padding: 10px !important;
  1076. background-color: #222 !important;
  1077. }
  1078. .help-window-main .settings-list {
  1079. border: 1px solid #454545 !important;
  1080. }
  1081. .help-window-main .settings-list-item {
  1082. background-color: #282e35 !important;
  1083. border-top: 1px solid #2e3c43 !important;
  1084. border-bottom: 1px solid #2e3c43 !important;
  1085. }
  1086. .help-window-main .settings-list-item.selected {
  1087. background-color: rgba(150, 255, 150, 0.2) !important;
  1088. }
  1089. .help-window-main .settings-list-item:nth-child(1) {
  1090. border-top: none !important;
  1091. }
  1092. .help-window-main .settings-list-item:last-child {
  1093. border-bottom: none !important;
  1094. }
  1095. .help-window-main .file-system-path-name {
  1096. color: #80cbc4 !important;
  1097. }
  1098. .file-system-path,
  1099. .list-column-text,
  1100. .settings-list-column-path {
  1101. color: #b1bdc4 !important;
  1102. }
  1103. .list-column-editor {
  1104. background-color: #282e35 !important;
  1105. border: 1px solid #2e3c43 !important;
  1106. color: #e6e6e6 !important;
  1107. }
  1108. .settings-dialog {
  1109. border: 1px solid #454545 !important;
  1110. background-color: #222 !important;
  1111. border-radius: 4px !important;
  1112. }
  1113. .settings-dialog .dialog-contents label {
  1114. color: #b1bdc4;
  1115. }
  1116. .settings-dialog .dialog-contents .header {
  1117. color: #eeeeee !important;
  1118. }
  1119. .settings-dialog .dialog-contents .block-header {
  1120. color: #80cbc4 !important;
  1121. }
  1122. .settings-dialog .settings-list-container {
  1123. background-color: #444444 !important;
  1124. }
  1125. .settings-dialog .settings-list {
  1126. border-color: #444444 !important;
  1127. border-radius: 2px !important;
  1128. }
  1129. .settings-dialog .settings-list-item {
  1130. background-color: #444444 !important;
  1131. border-top: 1px solid #2e3c43 !important;
  1132. /* testsasdf */
  1133. border-bottom: 1px solid #2e3c43 !important;
  1134. /* testsasdf */
  1135. color: #333333 !important;
  1136. }
  1137. .settings-dialog .add-list-item {
  1138. border-bottom: none !important;
  1139. }
  1140. .settings-dialog .file-mappings-list .settings-list-item:first-child,
  1141. .settings-dialog .excluded-folders-section .settings-list-item:first-child {
  1142. border-top: none !important;
  1143. }
  1144. .swatch {
  1145. width: 12px !important;
  1146. height: 12px !important;
  1147. }
  1148. .blackbox-dialog .columns-header {
  1149. color: #80cbc4 !important;
  1150. }
  1151. /**********************************************
  1152. /* Sources Tab
  1153. /**********************************************/
  1154. /*placeholder text when no file is open*/
  1155. .tabbed-pane-placeholder,
  1156. ::shadow .tabbed-pane-placeholder {
  1157. text-shadow: 0 1px 0 #181818 !important;
  1158. color: #999999 !important;
  1159. }
  1160. /*-- Save Problem Overlay --*/
  1161. .source-frame-unsaved-committed-changes {
  1162. background-color: #222 !important;
  1163. }
  1164. .source-frame-debugger-script {
  1165. background-color: #222 !important;
  1166. }
  1167. .sidebar-pane {
  1168. /* Breakpoints/Dom Breakpoints */
  1169. /* Call Stack */
  1170. }
  1171. .sidebar-pane .breakpoints-list-deactivated {
  1172. background-color: #282e35 !important;
  1173. opacity: 0.3 !important;
  1174. }
  1175. .sidebar-pane .breakpoint-list li {
  1176. color: #80cbc4 !important;
  1177. border-top: 1px solid #343434 !important;
  1178. border-bottom: 1px solid #101010 !important;
  1179. }
  1180. .sidebar-pane .breakpoint-list li:not(.breakpoint-hit):hover {
  1181. background-color: #282e35 !important;
  1182. border-top: 1px solid #343434 !important;
  1183. border-bottom: 1px solid #101010 !important;
  1184. }
  1185. .sidebar-pane .breakpoint-hit {
  1186. background: #3e4c58 !important;
  1187. border-top: 1px solid #2e3c43 !important;
  1188. border-bottom: 1px solid #2e3c43 !important;
  1189. color: #eee !important;
  1190. }
  1191. .sidebar-pane .placard .title,
  1192. .sidebar-pane .placard .subtitle,
  1193. .sidebar-pane ::shadow .list-item .title,
  1194. .sidebar-pane ::shadow .list-item .subtitle {
  1195. color: #b1bdc4 !important;
  1196. }
  1197. .sidebar-pane .placard:nth-of-type(2n),
  1198. .sidebar-pane ::shadow .list-item:nth-of-type(2n) {
  1199. background: #2a2a2a !important;
  1200. }
  1201. .sidebar-pane .placard.selected,
  1202. .sidebar-pane ::shadow .list-item.selected {
  1203. background: #3e4c58 !important;
  1204. color: #e6e6e6 !important;
  1205. border-top: 1px solid #2e3c43 !important;
  1206. border-bottom: 1px solid #2e3c43 !important;
  1207. }
  1208. .sidebar-pane .placard.selected .title,
  1209. .sidebar-pane .placard.selected .subtitle,
  1210. .sidebar-pane ::shadow .list-item.selected .title,
  1211. .sidebar-pane ::shadow .list-item.selected .subtitle {
  1212. color: #e6e6e6 !important;
  1213. }
  1214. .sidebar-pane .hidden-placards-message,
  1215. .sidebar-pane .callstack-info.status {
  1216. background-color: #2e3c43 !important;
  1217. color: #ddbb00;
  1218. }
  1219. .sidebar-pane .hidden-placards-message .node-link,
  1220. .sidebar-pane .callstack-info.status .node-link {
  1221. color: #80cbc4;
  1222. }
  1223. .sidebar-pane > .body .placard + .info,
  1224. .sidebar-pane > .body ::shadow .list-item + .info {
  1225. background: #111 !important;
  1226. border-top: 0 !important;
  1227. color: #80cbc4 !important;
  1228. font-style: normal !important;
  1229. }
  1230. .breakpoints-deactivated .breakpoint-list {
  1231. background-color: #b1bdc4 !important;
  1232. opacity: .3 !important;
  1233. }
  1234. /*Pane Headers*/
  1235. .sidebar-pane-title {
  1236. background: #111 !important;
  1237. border-top: 1px solid #2e3c43 !important;
  1238. color: #b1bdc4;
  1239. border-top: none !important;
  1240. border-bottom: 1px solid #2e3c43 !important;
  1241. }
  1242. .sidebar-pane-stack > .sidebar-pane.visible:nth-last-of-type(1) {
  1243. border-bottom: none !important;
  1244. }
  1245. .sidebar-pane .children.expanded,
  1246. li.breakpoint-hit .breakpoint-hit-marker {
  1247. background-color: transparent !important;
  1248. }
  1249. .pane-title-button.add,
  1250. .sidebar-pane-toolbar > .pane-title-button.refresh {
  1251. /*background-image: none !important;*/
  1252. -webkit-background-position: -24px 0 !important;
  1253. background-color: #b1bdc4 !important;
  1254. -webkit-mask-repeat: no-repeat !important;
  1255. }
  1256. .pane-title-button.add {
  1257. -webkit-mask-image: url(Images/paneAddButtons.png) !important;
  1258. }
  1259. .sidebar-pane-toolbar > .pane-title-button.refresh {
  1260. -webkit-mask-image: url(Images/paneRefreshButtons.png) !important;
  1261. }
  1262. .panel.elements .sidebar-pane .sidebar-pane-toolbar .pane-title-button.element-state,
  1263. .panel.elements .sidebar-pane .sidebar-pane-toolbar .pane-title-button.animations-controls,
  1264. .panel.elements .sidebar-pane .sidebar-pane-toolbar .pane-title-button.add {
  1265. background-color: #cdd3de !important;
  1266. }
  1267. .panel.elements .sidebar-pane .sidebar-pane-toolbar > .pane-title-button.element-state,
  1268. .panel.elements .sidebar-pane .sidebar-pane-toolbar > .pane-title-button.animations-controls,
  1269. .panel.elements .sidebar-pane .sidebar-pane-toolbar > .pane-title-button.add {
  1270. background-image: none !important;
  1271. }
  1272. .panel.elements .sidebar-pane-toolbar > select > option,
  1273. .panel.elements .sidebar-pane-toolbar > select > hr {
  1274. color: #b1bdc4 !important;
  1275. background-color: #222 !important;
  1276. }
  1277. .panel.elements .sidebar-pane-toolbar > select.select-settings {
  1278. /*background-image: none !important; */
  1279. -webkit-background-position: -24px 0 !important;
  1280. background-color: #b1bdc4 !important;
  1281. -webkit-mask-repeat: no-repeat !important;
  1282. -webkit-mask-image: url(Images/paneSettingsButtons.png) !important;
  1283. }
  1284. .panel.elements .sidebar-pane-toolbar .pane-title-button.element-state {
  1285. -webkit-mask-image: url(Images/paneElementStateButtons.png) !important;
  1286. }
  1287. .panel.elements .sidebar-pane-toolbar .pane-title-button.animations-controls {
  1288. -webkit-mask-image: url(Images/paneAnimationsButtons.png) !important;
  1289. }
  1290. .panel.elements .sidebar-pane-toolbar .pane-title-button.animations-controls {
  1291. background-color: #000000 !important;
  1292. }
  1293. .panel.elements .sidebar-pane-toolbar .pane-title-button.element-state,
  1294. .panel.elements .sidebar-pane-toolbar .pane-title-button.animations-controls,
  1295. .panel.elements .sidebar-pane-toolbar .pane-title-button.add {
  1296. background-color: #546e7a !important;
  1297. }
  1298. /* Highlight in Scripts */
  1299. .webkit-highlighted-line.webkit-line-content {
  1300. border-radius: 2px;
  1301. }
  1302. .webkit-highlighted-line.webkit-line-content * {
  1303. color: #181818 !important;
  1304. }
  1305. /*exception icon state colors */
  1306. .scripts-pause-on-exceptions-status-bar-item.toggled-all .glyph {
  1307. background-color: #dc0303 !important;
  1308. }
  1309. .scripts-pause-on-exceptions-status-bar-item.toggled-uncaught .glyph {
  1310. background-color: #d5bf00 !important;
  1311. }
  1312. .webkit-highlighted-line {
  1313. background-color: #80cbc4 !important;
  1314. }
  1315. .alternate-status-bar-buttons-bar .scripts-pause,
  1316. .alternate-status-bar-buttons-bar .scripts-long-resume,
  1317. .alternate-status-bar-buttons-bar .status-bar-item {
  1318. background-color: #282e35 !important;
  1319. border: 1px solid #263238 !important;
  1320. }
  1321. .alternate-status-bar-buttons-bar .status-bar-item.emulate-active {
  1322. background-color: #222 !important;
  1323. border: 1px solid #2e3c43 !important;
  1324. }
  1325. .properties-tree li,
  1326. .outline-disclosure li::before,
  1327. .properties-tree li.parent {
  1328. background-color: inherit !important;
  1329. line-height: inherit !important;
  1330. }
  1331. .event-listener-breakpoints.properties-tree li {
  1332. height: auto !important;
  1333. padding-top: 0 !important;
  1334. }
  1335. .event-listener-breakpoints.properties-tree li:before {
  1336. -webkit-mask-position: -4px -93px !important;
  1337. }
  1338. .event-listener-breakpoints.properties-tree li .checkbox-elem {
  1339. top: 2px !important;
  1340. }
  1341. .event-listener-breakpoints.properties-tree li.parent .checkbox-elem {
  1342. top: 3px !important;
  1343. }
  1344. .source-frame-infobar {
  1345. color: #ddbb00;
  1346. border-bottom: 1px solid #2e3c43 !important;
  1347. background-color: #2e3c43 !important;
  1348. }
  1349. .source-frame-infobar-toggle-link {
  1350. color: #80cbc4 !important;
  1351. }
  1352. .sidebar-pane-button-new-rule {
  1353. background-color: #546e7a !important;
  1354. background-image: none;
  1355. -webkit-mask-image: url(Images/paneAddButtons.png) !important;
  1356. -webkit-mask-position: 0 0 !important;
  1357. }
  1358. .sidebar-pane-button-new-rule:hover {
  1359. -webkit-mask-position: -23px 0 !important;
  1360. }
  1361. .text-editor-value-decoration {
  1362. background-color: #282e35 !important;
  1363. color: #b1bdc4 !important;
  1364. padding: 0 5px;
  1365. border-radius: 2px !important;
  1366. box-shadow: 0 1px 0 0 #2e3c43 !important;
  1367. border-top: 1px solid #1c1c1c !important;
  1368. }
  1369. /**********************************************
  1370. /* Sources Panel Controls
  1371. /**********************************************/
  1372. .scripts-status-bar {
  1373. background: #111 !important;
  1374. border-top: 1px solid #2e3c43 !important;
  1375. overflow: none !important;
  1376. }
  1377. .scripts-debug-toolbar {
  1378. background: #111 !important;
  1379. border-top: 1px solid #2e3c43 !important;
  1380. }
  1381. .help-indent-labels label {
  1382. color: #b1bdc4 !important;
  1383. }
  1384. .scripts-debug-toolbar-drawer {
  1385. background-color: transparent !important;
  1386. border-bottom: none !important;
  1387. color: #b1bdc4 !important;
  1388. }
  1389. .CodeMirror .webkit-html-message-bubble {
  1390. color: #111 !important;
  1391. border-radius: 2px !important;
  1392. padding: 2px !important;
  1393. }
  1394. .CodeMirror-linewidget .source-frame-breakpoint-condition {
  1395. border-radius: 4px !important;
  1396. background: #111 !important;
  1397. border-top: 1px solid #2e3c43 !important;
  1398. }
  1399. .CodeMirror-linewidget .source-frame-breakpoint-condition input {
  1400. color: #b1bdc4 !important;
  1401. }
  1402. .CodeMirror-linewidget .source-frame-breakpoint-message {
  1403. color: #80cbc4 !important;
  1404. }
  1405. .CodeMirror-linewidget #source-frame-breakpoint-condition {
  1406. background-color: #222 !important;
  1407. border: none !important;
  1408. height: 22px !important;
  1409. }
  1410. /**********************************************
  1411. /* Timeline Tab
  1412. /**********************************************/
  1413. .timeline .panel-status-bar {
  1414. color: #b1bdc4 !important;
  1415. }
  1416. .timeline-category-statusbar-item,
  1417. .timeline-records-stats,
  1418. .record-title,
  1419. .timeline-aggregated-category {
  1420. text-shadow: none !important;
  1421. color: #b1bdc4 !important;
  1422. }
  1423. #timeline-graphs .timeline-graph-side.hovered,
  1424. .timeline-records-list .timeline-tree-item.hovered:not(.selected) {
  1425. background-color: #282e35 !important;
  1426. outline: 1px solid #282e35 !important;
  1427. }
  1428. #timeline-graphs .timeline-graph-side.selected,
  1429. .timeline-records-list .timeline-tree-item.selected {
  1430. background-color: #3e4c58 !important;
  1431. outline: 1px solid #2e3c43 !important;
  1432. }
  1433. .timeline-records-list .timeline-tree-item {
  1434. color: #b1bdc4 !important;
  1435. }
  1436. .timeline-records-list .timeline-tree-item .data.dimmed {
  1437. color: #b1bdc4 !important;
  1438. opacity: .7 !important;
  1439. }
  1440. /* Timeline */
  1441. .sidebar-tree-section {
  1442. text-shadow: none !important;
  1443. }
  1444. .timeline-tree-item.selected .timeline-tree-item-expand-arrow,
  1445. .timeline-tree-item-expand-arrow {
  1446. background-color: #8c8c8c !important;
  1447. }
  1448. #counter-values-bar,
  1449. #memory-graphs-container .sidebar-tree-section,
  1450. .timeline-records-title,
  1451. .timeline-details-view-title {
  1452. background: #111 !important;
  1453. border-top: 1px solid #2e3c43 !important;
  1454. color: #b1bdc4 !important;
  1455. text-shadow: none !important;
  1456. }
  1457. #counter-values-bar {
  1458. position: relative !important;
  1459. top: 1px !important;
  1460. border-bottom: none !important;
  1461. }
  1462. .timeline-aggregated-info-legend > div,
  1463. .memory-counter-sidebar-info {
  1464. color: #b1bdc4 !important;
  1465. }
  1466. .timeline-details-view-row-title {
  1467. color: #626262 !important;
  1468. }
  1469. .timeline-details-view-title {
  1470. border-bottom: none !important;
  1471. }
  1472. .timeline-details-view-row-value,
  1473. .timeline-details-view-row-stack-trace {
  1474. color: #b1bdc4 !important;
  1475. }
  1476. .timeline-details-view-row .timeline-details-view-row-stack-trace .webkit-html-resource-link {
  1477. color: #c792ea !important;
  1478. }
  1479. #timeline-overview-sidebar {
  1480. padding-right: 0 !important;
  1481. border-right: 1px solid #263238 !important;
  1482. }
  1483. #timeline-overview-sidebar .sidebar-tree-item:hover {
  1484. border-left: 6px solid #282e35 !important;
  1485. }
  1486. #timeline-overview-sidebar .sidebar-tree-item.selected {
  1487. border-left: 6px solid #2e3c43 !important;
  1488. }
  1489. #timeline-overview-sidebar .sidebar-tree-item.selected .icon {
  1490. background-color: #e6e6e6 !important;
  1491. }
  1492. #timeline-overview-sidebar .sidebar-tree-item.selected .title {
  1493. color: #e6e6e6 !important;
  1494. }
  1495. #timeline-overview-sidebar .icon {
  1496. background-color: #cdd3de !important;
  1497. }
  1498. #timeline-overview-sidebar .title {
  1499. color: #cdd3de !important;
  1500. }
  1501. .timeline-cpu-curtain-left,
  1502. .timeline-cpu-curtain-right {
  1503. background-color: #b1bdc4 !important;
  1504. opacity: 0.3 !important;
  1505. }
  1506. .timeline-expandable {
  1507. border-left: 1px solid #919#2e3c43598 !important;
  1508. }
  1509. .timeline-expandable-left {
  1510. border-top: 1px solid #b1bdc4 !important;
  1511. border-bottom: 1px solid #b1bdc4 !important;
  1512. }
  1513. .timeline-utilization-strip .timeline-graph-bar {
  1514. border-color: rgba(200, 200, 200, 0.3) !important;
  1515. background-color: rgba(200, 200, 200, 0.2) !important;
  1516. }
  1517. #timeline-overview-panel {
  1518. border-bottom: 1px solid #505050 !important;
  1519. }
  1520. .timeline .resources-event-divider.timeline-frame-divider,
  1521. .resources-divider {
  1522. background-color: #2a2a2a !important;
  1523. }
  1524. .panel:not(.network) .resources-dividers-label-bar {
  1525. background: transparent !important;
  1526. border-bottom: 1px solid #2e3c43 !important;
  1527. }
  1528. .panel #timeline-grid-header .resources-dividers-label-bar {
  1529. background: #111 !important;
  1530. border-top: 1px solid #2e3c43 !important;
  1531. }
  1532. .overview-grid-dividers-background {
  1533. background-color: red !important;
  1534. }
  1535. #timeline-overview-container {
  1536. background-color: #222 !important;
  1537. }
  1538. #timeline-overview-container canvas {
  1539. background-color: transparent !important;
  1540. }
  1541. .overview-grid-window-resizer {
  1542. box-shadow: none !important;
  1543. }
  1544. .overview-grid-window-rulers {
  1545. border-right: 1px solid #80cbc4;
  1546. border-left: 1px solid #80cbc4;
  1547. background: #80cbc4 !important;
  1548. opacity: 0.2 !important;
  1549. }
  1550. .timeline-frame-strip {
  1551. color: #b1bdc4 !important;
  1552. }
  1553. .overview-grid-dividers-background {
  1554. background-color: #282e35 !important;
  1555. }
  1556. .overview-grid-window {
  1557. background-color: #222 !important;
  1558. }
  1559. #memory-counters-graph {
  1560. border-right: 1px solid #2a2a2a !important;
  1561. }
  1562. .timeline-frame-container {
  1563. background: none !important;
  1564. }
  1565. #timeline-overview-panel .split-view-sidebar > label {
  1566. color: #b1bdc4 !important;
  1567. }
  1568. .timeline-range-summary > div {
  1569. color: #b1bdc4 !important;
  1570. }
  1571. .pie-chart-foreground {
  1572. color: #b1bdc4;
  1573. }
  1574. .timeline-progress-pane {
  1575. background-color: rgba(111, 111, 111, 0.5) !important;
  1576. color: #b1bdc4 !important;
  1577. }
  1578. /* ==========================================================================
  1579. Popovers
  1580. ========================================================================== */
  1581. .popover {
  1582. border-width: 0 !important;
  1583. background: #282e35 !important;
  1584. }
  1585. .popover .arrow {
  1586. background-image: url() !important;
  1587. }
  1588. .popover .content {
  1589. border-radius: 3px !important;
  1590. color: #b1bdc4 !important;
  1591. }
  1592. .popover .content .source-frame-popover-title {
  1593. color: #ff8b3e !important;
  1594. }
  1595. .popover .content .source-frame-popover-tree {
  1596. border-top: 1px solid #546e7a !important;
  1597. }
  1598. .popover .content .popover-details-title {
  1599. color: #ddbb00 !important;
  1600. }
  1601. .popover .content .popover-details-row-title {
  1602. color: #929ba2 !important;
  1603. }
  1604. .popover .content .network-timing-bar {
  1605. background-color: #80cbc4 !important;
  1606. border-left-color: #80cbc4 !important;
  1607. }
  1608. .popover .content .network-timing-bar-title {
  1609. color: #b1bdc4 !important;
  1610. text-shadow: 0 1px 1px #2e3c43;
  1611. }
  1612. .popover a.undefined {
  1613. color: #c792ea !important;
  1614. }
  1615. .webkit-line-content .text-editor-overlay-highlight {
  1616. background-color: #3e4c58 !important;
  1617. outline: 1px solid #2e3c43 !important;
  1618. }
  1619. .spectrum-container {
  1620. border: none !important;
  1621. background: #111 !important;
  1622. border-radius: 3px !important;
  1623. padding: 7px 10px !important;
  1624. }
  1625. .spectrum-container .swatch {
  1626. margin-right: 3px !important;
  1627. }
  1628. .spectrum-range-container {
  1629. padding-bottom: 0 !important;
  1630. }
  1631. .spectrum-range-container input {
  1632. position: static !important;
  1633. }
  1634. .bezier-icon {
  1635. background-color: #80cbc4 !important;
  1636. }
  1637. .bezier-icon path {
  1638. stroke: #263238 !important;
  1639. }
  1640. ::shadow .bezier-preview-container {
  1641. background: #b1bdc4 !important;
  1642. }
  1643. ::shadow .bezier-preview-animation {
  1644. background-color: #80cbc4 !important;
  1645. }
  1646. ::shadow .bezier-curve circle.bezier-control-circle {
  1647. fill: #80cbc4 !important;
  1648. }
  1649. ::shadow .bezier-curve line.bezier-control-line {
  1650. stroke: #80cbc4 !important;
  1651. }
  1652. ::shadow .bezier-curve line.bezier-control-accent {
  1653. stroke: #b1bdc4 !important;
  1654. }
  1655. ::shadow .bezier-curve line.linear-line {
  1656. stroke: #282e35 !important;
  1657. }
  1658. ::shadow .bezier-curve path.bezier-path {
  1659. stroke: #000 !important;
  1660. }
  1661. /**********************************************
  1662. /* Readability
  1663. /* -------------------------------------------
  1664. /* Adjust the line height for elements|sources
  1665. /* tab, find, and console. Adjust margin-top
  1666. /* to line up expand/collapse arrow in
  1667. /* elements panel
  1668. /**********************************************/
  1669. .text-editor .inner-container .webkit-line-content,
  1670. .text-editor-lines .inner-container .webkit-line-number,
  1671. .styles-section .properties li,
  1672. .CodeMirror-lines,
  1673. #search-results-pane-file-based .search-match,
  1674. ::shadow #search-results-pane-file-based .search-match {
  1675. line-height: 14px !important;
  1676. }
  1677. .panel.elements .outline-disclosure li.parent::before {
  1678. margin-top: 1px;
  1679. }
  1680. /**********************************************
  1681. /* Screencast
  1682. /**********************************************/
  1683. .screencast {
  1684. background-color: #222 !important;
  1685. }
  1686. .screencast .screencast-viewport {
  1687. background-color: #2e3c43;
  1688. box-shadow: 0 0 2px 0 #80cbc4;
  1689. margin: auto !important;
  1690. }
  1691. .screencast .screencast-navigation button {
  1692. background-color: #80cbc4 !important;
  1693. -webkit-mask-image: -webkit-image-set(url(Images/navigationControls.png) 1x, url(Images/navigationControls_2x.png) 2x);
  1694. background-image: none !important;
  1695. border: none !important;
  1696. width: 21px !important;
  1697. height: 21px !important;
  1698. cursor: pointer !important;
  1699. }
  1700. .screencast .screencast-navigation button.back {
  1701. -webkit-mask-position: 0 2px;
  1702. }
  1703. .screencast .screencast-navigation button.forward {
  1704. -webkit-mask-position: -17px 2px;
  1705. }
  1706. .screencast .screencast-navigation button.reload {
  1707. -webkit-mask-position: -36px 2px;
  1708. }
  1709. .screencast .screencast-navigation button[disabled] {
  1710. background-color: #b1bdc4 !important;
  1711. opacity: 1 !important;
  1712. cursor: default !important;
  1713. }
  1714. .screencast .screencast-navigation .progress {
  1715. background-color: #80cbc4 !important;
  1716. }
  1717. .screencast .screencast-navigation input {
  1718. background: #282e35 !important;
  1719. color: #e6e6e6 !important;
  1720. border: 1px solid #2e3c43 !important;
  1721. }
  1722. /**********************************************
  1723. /* Scrollbars
  1724. /**********************************************/
  1725. ::-webkit-scrollbar,
  1726. .CodeMirror-scrollbar-filler,
  1727. .CodeMirror-gutter-filler {
  1728. width: 6px !important;
  1729. height: 12px !important;
  1730. border-radius: 25px !important;
  1731. background-color: #37474f !important;
  1732. }
  1733. ::-webkit-scrollbar-track:horizontal,
  1734. .custom-popup-horizontal-scroll ::-webkit-scrollbar-track:horizontal,
  1735. .custom-popup-vertical-scroll ::-webkit-scrollbar-track:horizontal,
  1736. .custom-popup-vertical-scroll .custom-popup-horizontal-scroll ::-webkit-scrollbar-track:horizontal,
  1737. .custom-popup-horizontal-scroll .custom-popup-vertical-scroll ::-webkit-scrollbar-track:horizontal {
  1738. -webkit-box-shadow: none !important;
  1739. background: #111 !important;
  1740. }
  1741. ::-webkit-scrollbar-track:vertical,
  1742. .custom-popup-horizontal-scroll ::-webkit-scrollbar-track:vertical,
  1743. .custom-popup-vertical-scroll ::-webkit-scrollbar-track:vertical,
  1744. .custom-popup-vertical-scroll .custom-popup-horizontal-scroll ::-webkit-scrollbar-track:vertical,
  1745. .custom-popup-horizontal-scroll .custom-popup-vertical-scroll ::-webkit-scrollbar-track:vertical {
  1746. -webkit-box-shadow: none !important;
  1747. background: #111 !important;
  1748. }
  1749. ::-webkit-scrollbar-corner,
  1750. .CodeMirror-scrollbar-filler,
  1751. .CodeMirror-gutter-filler {
  1752. -webkit-box-shadow: inset 1px 5px 6px rgba(0, 0, 0, 0.3) !important;
  1753. }
  1754. ::-webkit-scrollbar-thumb {
  1755. border-radius: 0px !important;
  1756. background-color: #37474f !important;
  1757. border: none!important;
  1758. }
  1759. ::-webkit-scrollbar-thumb:horizontal {
  1760. -webkit-box-shadow: none !important;
  1761. }
  1762. ::-webkit-scrollbar-thumb:vertical {
  1763. -webkit-box-shadow: none !important;
  1764. }
  1765. /*Popover scrollbar overrides */
  1766. .custom-popup-horizontal-scroll ::-webkit-scrollbar-track,
  1767. .custom-popup-vertical-scroll ::-webkit-scrollbar-track,
  1768. .custom-popup-vertical-scroll .custom-popup-horizontal-scroll ::-webkit-scrollbar-track,
  1769. .custom-popup-horizontal-scroll .custom-popup-vertical-scroll ::-webkit-scrollbar-track {
  1770. -webkit-box-shadow: none !important;
  1771. background-image: none !important;
  1772. }
  1773. .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb {
  1774. -webkit-border-image: none !important;
  1775. }
  1776. .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical {
  1777. -webkit-box-shadow: inset 4px 1px 8px 1px rgba(0, 0, 0, 0.3) !important;
  1778. }
  1779. .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal {
  1780. -webkit-box-shadow: inset 1px 5px 6px rgba(0, 0, 0, 0.3) !important;
  1781. }
  1782. .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal:active,
  1783. .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal:hover,
  1784. .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:decrement,
  1785. .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:increment,
  1786. .custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical:active,
  1787. .custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical:hover,
  1788. .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:decrement,
  1789. .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:increment {
  1790. -webkit-border-image: none !important;
  1791. }
  1792. .custom-popup-horizontal-scroll ::-webkit-scrollbar,
  1793. .custom-popup-vertical-scroll ::-webkit-scrollbar {
  1794. background: none !important;
  1795. }
  1796. /**********************************************
  1797. /* Elements/Sources Right Sidebar
  1798. /**********************************************/
  1799. .styles-section {
  1800. padding: 4px 0 !important;
  1801. margin: 0 10px;
  1802. border-top: 1px solid #2e3c43 !important;
  1803. border-bottom: none !important;
  1804. }
  1805. .styles-section:first-child {
  1806. border-top: none !important;
  1807. }
  1808. .styles-section.read-only:not(.computed-style) {
  1809. background-color: #222 !important;
  1810. margin: 0;
  1811. padding-left: 10px !important;
  1812. padding-right: 10px !important;
  1813. }
  1814. .styles-section .value {
  1815. color: #fbe793 !important;
  1816. font-weight: 600;
  1817. }
  1818. .styles-section .child-editing,
  1819. .styles-section .header .subtitle {
  1820. color: #999999 !important;
  1821. }
  1822. .styles-section .properties .overloaded,
  1823. .styles-section .properties .inactive,
  1824. .styles-section .properties .disabled,
  1825. .styles-section .properties .not-parsed-ok {
  1826. opacity: .5 !important;
  1827. }
  1828. .event-bars .event-bar .header .title {
  1829. text-shadow: none !important;
  1830. color: #b1bdc4 !important;
  1831. }
  1832. .sidebar-pane {
  1833. /*-- METRICS--*/
  1834. }
  1835. .sidebar-pane .body,
  1836. .sidebar-pane .monospace {
  1837. color: #b1bdc4 !important;
  1838. }
  1839. .sidebar-pane .section.expanded > .header {
  1840. border-bottom: 1px solid #2e3c43 !important;
  1841. }
  1842. .sidebar-pane .section.expanded > .properties-tree {
  1843. background-color: #222 !important;
  1844. }
  1845. .sidebar-pane .body .metrics {
  1846. color: #000 !important;
  1847. border-top: 1px solid #2e3c43 !important;
  1848. border-bottom: 1px solid #2e3c43 !important;
  1849. margin-top: 5px !important;
  1850. }
  1851. .sidebar-pane .body .metrics .position,
  1852. .sidebar-pane .body .metrics .margin:not([style^=background-color]),
  1853. .sidebar-pane .body .metrics .border:not([style^=background-color]),
  1854. .sidebar-pane .body .metrics .padding:not([style^=background-color]),
  1855. .sidebar-pane .body .metrics .margin:not([style^=background-color]),
  1856. .sidebar-pane .body .metrics .content:not([style^=background-color]) {
  1857. background-color: #546e7a !important;
  1858. }
  1859. .sidebar-pane .section:first-child {
  1860. border-top: none !important;
  1861. }
  1862. .styles-section.first-styles-section,
  1863. .sidebar-separator + .styles-section {
  1864. border-top: none !important;
  1865. }
  1866. .sidebar-separator {
  1867. background: #111 !important;
  1868. border-top: 1px solid #2e3c43 !important;
  1869. color: #b1bdc4 !important;
  1870. text-shadow: none !important;
  1871. border-top: none !important;
  1872. border-bottom: none !important;
  1873. }
  1874. /*-- PSEUDO STATE DISPLAY --*/
  1875. .styles-element-state-pane {
  1876. background: #313131 !important;
  1877. padding: 4px 0 !important;
  1878. border-bottom: 1px solid #2e3c43 !important;
  1879. }
  1880. .styles-element-state-pane.expanded {
  1881. margin-top: 0 !important;
  1882. }
  1883. .sidebar-pane-stack .event-category,
  1884. .sidebar-pane .section,
  1885. .events-pane > ol > li.parent {
  1886. border-top: 1px solid #343434 !important;
  1887. border-bottom: 1px solid #101010 !important;
  1888. margin-top: 0 !important;
  1889. }
  1890. /**********************************************
  1891. /* Resources & Sources Sidebar
  1892. /**********************************************/
  1893. .panel:not(.elements):not(.console) {
  1894. /*-- currently selected element --*/
  1895. }
  1896. .panel:not(.elements):not(.console) .base-storage-tree-element-title,
  1897. .panel:not(.elements):not(.console) .base-storage-tree-element-subtitle,
  1898. .panel:not(.elements):not(.console) .base-navigator-tree-element-title {
  1899. color: #b1bdc4 !important;
  1900. top: 0 !important;
  1901. }
  1902. .panel:not(.elements):not(.console) .selected .base-storage-tree-element-title,
  1903. .panel:not(.elements):not(.console) .selected .base-storage-tree-element-subtitle,
  1904. .panel:not(.elements):not(.console) .selected .base-navigator-tree-element-title {
  1905. color: #e6e6e6 !important;
  1906. text-shadow: none !important;
  1907. }
  1908. .panel:not(.elements):not(.console) .sidebar li {
  1909. color: #b1bdc4 !important;
  1910. }
  1911. .panel:not(.elements):not(.console) .outline-disclosure li.selected .selection {
  1912. background: #3e4c58 !important;
  1913. color: #e6e6e6 !important;
  1914. border-top: 1px solid #2e3c43 !important;
  1915. border-bottom: 1px solid #2e3c43 !important;
  1916. margin-top: -1px !important;
  1917. }
  1918. .panel:not(.elements):not(.console) .outline-disclosure li:hover:not(.selected) .selection,
  1919. .panel:not(.elements):not(.console) .outline-disclosure li.hovered:not(.selected) .selection {
  1920. display: block !important;
  1921. background: #282e35 !important;
  1922. border-top: 1px solid #282e35 !important;
  1923. border-bottom: 1px solid #282e35 !important;
  1924. margin-top: -1px !important;
  1925. height: 18px !important;
  1926. border-radius: 0 !important;
  1927. }
  1928. .panel:not(.elements):not(.console) .outline-disclosure ol:focus li.selected .selection {
  1929. background: #3e4c58 !important;
  1930. color: #e6e6e6 !important;
  1931. border-top: 1px solid #2e3c43 !important;
  1932. border-bottom: 1px solid #2e3c43 !important;
  1933. margin-top: -1px !important;
  1934. text-shadow: none !important;
  1935. }
  1936. .panel:not(.elements):not(.console) .sidebar-overlay {
  1937. border-right: 1px solid #2a2a2a !important;
  1938. box-shadow: #141414 5px 0px 22px 3px !important;
  1939. }
  1940. .sidebar li.selected .selection {
  1941. background-image: none !important;
  1942. border: none !important;
  1943. }
  1944. /************************************************
  1945. /* Status bar
  1946. /************************************************/
  1947. select.status-bar-item,
  1948. select.status-bar-item:hover,
  1949. ::shadow select.status-bar-item,
  1950. .toolbar::shadow select.toolbar-item,
  1951. .toolbar::shadow select.toolbar-item:hover,
  1952. ::shadow .toolbar::shadow select.toolbar-item {
  1953. color: #b1bdc4 !important;
  1954. text-shadow: none !important;
  1955. border-left: 1px solid #2e3c43 !important;
  1956. border-right: 1px solid #2e3c43 !important;
  1957. background: inherit !important;
  1958. border-top: none !important;
  1959. border-bottom: none !important;
  1960. }
  1961. select.status-bar-item option,
  1962. .toolbar::shadow select.toolbar-item option {
  1963. background-color: #222 !important;
  1964. }
  1965. .status-bar-items {
  1966. border-left: none !important;
  1967. }
  1968. /*text color of status bar labels */
  1969. .status-bar label[for=search-replace-trigger],
  1970. #bottom-status-bar-container .type,
  1971. #bottom-status-bar-container .timeline-records-stats,
  1972. .source-frame-cursor-position,
  1973. .search-status-bar-summary .search-message,
  1974. .search-results-status-bar-message,
  1975. ::shadow .search-status-bar-summary .search-message {
  1976. text-shadow: none !important;
  1977. color: #b1bdc4 !important;
  1978. }
  1979. /*-- GLYPHS --*/
  1980. button.scripts-step-over .glyph .toggled-on .long-click-glyph,
  1981. button.scripts-step-into .glyph .toggled-on .long-click-glyph,
  1982. button.scripts-step-out .glyph .toggled-on .long-click-glyph,
  1983. .filters-toggle.toggled-active .glyph .toggled-on .long-click-glyph,
  1984. button.status-bar-item.toggled-on .glyph .toggled-on .long-click-glyph,
  1985. button.status-bar-item.toggled-on .glyph:not(.shadow) .toggled-on .long-click-glyph,
  1986. button.clear-status-bar-item:active .glyph .toggled-on .long-click-glyph,
  1987. button.garbage-collect-status-bar-item:active .glyph .toggled-on .long-click-glyph,
  1988. button.glue-async-status-bar-item:active .glyph .toggled-on .long-click-glyph,
  1989. .filters-toggle.toggled-shown .glyph .toggled-on .long-click-glyph,
  1990. ::shadow .toggled-on .long-click-glyph {
  1991. background-color: #80cbc4 !important;
  1992. }
  1993. button.scripts-step-over .glyph .long-click-glyph,
  1994. button.scripts-step-into .glyph .long-click-glyph,
  1995. button.scripts-step-out .glyph .long-click-glyph,
  1996. .filters-toggle.toggled-active .glyph .long-click-glyph,
  1997. button.status-bar-item.toggled-on .glyph .long-click-glyph,
  1998. button.status-bar-item.toggled-on .glyph:not(.shadow) .long-click-glyph,
  1999. button.clear-status-bar-item:active .glyph .long-click-glyph,
  2000. button.garbage-collect-status-bar-item:active .glyph .long-click-glyph,
  2001. button.glue-async-status-bar-item:active .glyph .long-click-glyph,
  2002. .filters-toggle.toggled-shown .glyph .long-click-glyph,
  2003. ::shadow .long-click-glyph {
  2004. background-color: #b1bdc4 !important;
  2005. }
  2006. .toolbar-background button.status-bar-item .glyph,
  2007. .toolbar-background button.status-bar-item .long-click-glyph {
  2008. background-color: #b1bdc4 !important;
  2009. }
  2010. #scripts-debugger-status {
  2011. color: #80cbc4 !important;
  2012. }
  2013. button.scripts-step-over:disabled .glyph,
  2014. button.scripts-step-into:disabled .glyph,
  2015. button.scripts-step-out:disabled .glyph {
  2016. background-color: #222 !important;
  2017. }
  2018. .sources-status-bar,
  2019. .panel-status-bar,
  2020. .resources-status-bar .status-bar,
  2021. .overrides-footer,
  2022. .status-bar,
  2023. ::shadow .search-bar {
  2024. background: #111 !important;
  2025. border-top: 1px solid #2e3c43 !important;
  2026. border-top: none!important;
  2027. color: #b1bdc4 !important;
  2028. }
  2029. .checkbox-filter-checkbox,
  2030. label.checkbox,
  2031. .checkbox-filter-checkbox-check,
  2032. .filter-checkbox-filter .type,
  2033. #text-filter-regex + label {
  2034. color: #b1bdc4 !important;
  2035. }
  2036. .checkbox-filter-checkbox {
  2037. background: #fff !important;
  2038. }
  2039. .filter-bitset-filter li {
  2040. padding: 2px 6px !important;
  2041. margin: auto 2px !important;
  2042. border-radius: 8px !important;
  2043. }
  2044. .status-bar-select-arrow {
  2045. position: relative !important;
  2046. right: 5px !important;
  2047. }
  2048. .event-listener-breakpoints .checkbox-elem {
  2049. top: 0 !important;
  2050. }
  2051. .save-device-button,
  2052. .remove-device-button {
  2053. background: #111 !important;
  2054. color: #cdd3de !important;
  2055. border: none !important;
  2056. border-radius: 3px !important;
  2057. cursor: pointer !important;
  2058. box-shadow: none !important;
  2059. text-shadow: none !important;
  2060. }
  2061. .save-device-button:disabled,
  2062. .remove-device-button:disabled {
  2063. cursor: default !important;
  2064. opacity: 0.3 !important;
  2065. }
  2066. .save-device-button:not(:disabled):active,
  2067. .remove-device-button:not(:disabled):active {
  2068. box-shadow: inset 0 1px 1px 0 #151515, 0 1px 1px 0 #6f6f6f !important;
  2069. }
  2070. /**********************************************
  2071. /* Suggest Box
  2072. /**********************************************/
  2073. .suggest-box {
  2074. color: #000 !important;
  2075. background-color: #222 !important;
  2076. border: 2px rgba(0, 0, 0, 0.2) solid !important;
  2077. box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.1) !important;
  2078. }
  2079. .suggest-box-content-item.source-code:hover {
  2080. background-color: #282e35 !important;
  2081. border: 1px solid #b1bdc4 !important;
  2082. }
  2083. .suggest-box-content-item.source-code.selected {
  2084. background-color: #282e35 !important;
  2085. }
  2086. .suggest-box .source-code .prefix {
  2087. color: #80cbc4 !important;
  2088. }
  2089. .suggest-box .source-code .suffix {
  2090. color: #d9d9d9 !important;
  2091. }
  2092. /**********************************************
  2093. /* Code Highlighting
  2094. /**********************************************/
  2095. .cm-js-atom {
  2096. color: #80cbc4 !important;
  2097. }
  2098. .cm-js-attribute {
  2099. color: #4e87bf !important;
  2100. }
  2101. .cm-js-builtin {
  2102. color: #8da6ce !important;
  2103. }
  2104. .cm-js-comment {
  2105. color: #546e7a !important;
  2106. font-style: italic;
  2107. }
  2108. .cm-js-def {
  2109. color: #c792ea !important;
  2110. font-weight: 600;
  2111. }
  2112. .cm-js-error {
  2113. background: #9D1E15 !important;
  2114. color: #f8f8f8 !important;
  2115. }
  2116. .cm-js-header {
  2117. color: #ff6400 !important;
  2118. }
  2119. .cm-js-hr {
  2120. color: #aeaeae !important;
  2121. }
  2122. .cm-js-keyword {
  2123. color: #c792ea !important;
  2124. font-style: italic;
  2125. }
  2126. .cm-js-link {
  2127. color: #8da6ce !important;
  2128. }
  2129. .cm-js-meta {
  2130. color: #d8fa3c !important;
  2131. }
  2132. .cm-js-number,
  2133. .section .properties .number,
  2134. .event-properties .number {
  2135. color: #80cbc4 !important;
  2136. }
  2137. .cm-js-operator {
  2138. color: #c3e88b !important;
  2139. }
  2140. .cm-js-property {
  2141. color: #76aeff !important;
  2142. }
  2143. .cm-js-string {
  2144. color: #c792ea !important;
  2145. }
  2146. .cm-js-string-2 {
  2147. color: #c792ea !important;
  2148. }
  2149. .cm-js-tag {
  2150. color: #929ba2 !important;
  2151. }
  2152. .cm-js-variable {
  2153. color: #80cbc4 !important;
  2154. }
  2155. .cm-js-variable-2 {
  2156. color: #ffcb6b !important;
  2157. }
  2158. .source-frame-eval-expression {
  2159. background-color: #3e4c58 !important;
  2160. border-color: #2e3c43 !important;
  2161. }
  2162. .cm-atom {
  2163. color: #80cbc4 !important;
  2164. }
  2165. .cm-comment {
  2166. color: #546e7a !important;
  2167. font-style: italic;
  2168. }
  2169. .cm-variable {
  2170. color: #b1bdc4 !important;
  2171. }
  2172. .cm-string {
  2173. color: #c792ea !important;
  2174. }
  2175. .cm-keyword {
  2176. color: #fbe793 !important;
  2177. font-style: italic;
  2178. }
  2179. .cm-number {
  2180. color: #80cbc4 !important;
  2181. }
  2182. .cm-operator {
  2183. color: #80cbc4 !important;
  2184. }
  2185. .cm-error {
  2186. background: #9D1E15 !important;
  2187. color: #f8f8f8 !important;
  2188. }
  2189. .cm-s-default .cm-property {
  2190. color: #b1bdc4 !important;
  2191. }
  2192. /*--CSS--*/
  2193. .cm-css-atom {
  2194. color: #80cbc4 !important;
  2195. }
  2196. .cm-css-builtin {
  2197. color: #fad431 !important;
  2198. }
  2199. .cm-css-def {
  2200. color: #fad431 !important;
  2201. }
  2202. .cm-css-comment {
  2203. color: #546e7a !important;
  2204. font-style: italic;
  2205. }
  2206. .cm-css-meta {
  2207. color: #fbe793 !important;
  2208. }
  2209. .cm-css-number {
  2210. color: #fb516d !important;
  2211. }
  2212. .cm-css-operator {
  2213. color: #fad431 !important;
  2214. }
  2215. .cm-css-property {
  2216. color: #fad431 !important;
  2217. }
  2218. .cm-css-qualifier {
  2219. color: #fad431 !important;
  2220. }
  2221. .cm-css-string {
  2222. color: #c792ea !important;
  2223. }
  2224. .cm-css-string-2 {
  2225. color: #80cbc4 !important;
  2226. }
  2227. .cm-css-tag {
  2228. color: #fad431 !important;
  2229. }
  2230. .cm-css-variable {
  2231. color: #fad431 !important;
  2232. }
  2233. .cm-css-variable-2 {
  2234. color: #fad431 !important;
  2235. }
  2236. /*--HTML--*/
  2237. .cm-xml-comment {
  2238. color: #6c6c6c !important;
  2239. font-style: italic !important;
  2240. }
  2241. .cm-xml-error {
  2242. color: #bf4c4c !important;
  2243. }
  2244. .cm-xml-string {
  2245. color: #fbe793 !important;
  2246. }
  2247. .cm-xml-tag {
  2248. color: #929ba2 !important;
  2249. }
  2250. .cm-xml-attribute {
  2251. color: #80cbc4 !important;
  2252. }
  2253. .cm-xml-link {
  2254. color: #c792ea !important;
  2255. }
  2256. ::shadow .webkit-html-fragment {
  2257. color: #ddbb00 !important;
  2258. }
  2259. .outline-disclosure ol li .highlight {
  2260. color: #ddbb00 !important;
  2261. }
  2262. /*--GLOBAL--*/
  2263. .CodeMirror-code {
  2264. color: #b1bdc4;
  2265. }
  2266. /**********************************************
  2267. /* Code Highlighting [WEBKIT]
  2268. /**********************************************/
  2269. .cm-js-atom {
  2270. color: #89f5a2 !important;
  2271. }
  2272. .cm-js-attribute {
  2273. color: #4e87bf !important;
  2274. }
  2275. .cm-js-builtin {
  2276. color: #8da6ce !important;
  2277. }
  2278. .cm-js-comment {
  2279. color: #676767 !important;
  2280. font-style: italic;
  2281. }
  2282. .cm-js-def {
  2283. color: #49a6d2 !important;
  2284. }
  2285. .cm-js-error {
  2286. background: #9D1E15 !important;
  2287. color: #f8f8f8 !important;
  2288. }
  2289. .cm-js-header {
  2290. color: #ff6400 !important;
  2291. }
  2292. .cm-js-hr {
  2293. color: #aeaeae !important;
  2294. }
  2295. .cm-js-keyword {
  2296. color: #8b6ccf !important;
  2297. font-style: italic;
  2298. }
  2299. .cm-js-link {
  2300. color: #8da6ce !important;
  2301. }
  2302. .cm-js-meta {
  2303. color: #d8fa3c !important;
  2304. }
  2305. .cm-js-number {
  2306. color: #89f5a2 !important;
  2307. }
  2308. .cm-js-operator {
  2309. color: #cdb943 !important;
  2310. }
  2311. .cm-js-property {
  2312. color: #cdb943 !important;
  2313. }
  2314. .cm-js-string {
  2315. color: #f07b3c !important;
  2316. }
  2317. .cm-js-string-2 {
  2318. color: #f07b3c !important;
  2319. }
  2320. .cm-js-tag {
  2321. color: #49a6d2 !important;
  2322. }
  2323. .cm-js-variable {
  2324. color: #EDDFAF !important;
  2325. }
  2326. .cm-js-variable-2 {
  2327. color: #EDDFAF !important;
  2328. }
  2329. .source-frame-eval-expression {
  2330. background-color: #424242 !important;
  2331. border-color: #686868 !important;
  2332. }
  2333. .cm-atom {
  2334. color: #89f5a2 !important;
  2335. }
  2336. .cm-comment {
  2337. color: #676767 !important;
  2338. font-style: italic;
  2339. }
  2340. .cm-variable {
  2341. color: #EDDFAF !important;
  2342. }
  2343. .cm-string {
  2344. color: #f07b3c !important;
  2345. }
  2346. .cm-keyword {
  2347. color: #8b6ccf !important;
  2348. font-style: italic;
  2349. }
  2350. .cm-number {
  2351. color: #89f5a2 !important;
  2352. }
  2353. .cm-operator {
  2354. color: #cdb943 !important;
  2355. }
  2356. .cm-error {
  2357. background: #9D1E15 !important;
  2358. color: #f8f8f8 !important;
  2359. }
  2360. .cm-s-default .cm-property {
  2361. color: #EDDFAF !important;
  2362. }
  2363. .cm-css-atom {
  2364. color: #EDDFAF !important;
  2365. }
  2366. .cm-css-builtin {
  2367. color: #ff9635 !important;
  2368. }
  2369. .cm-css-def {
  2370. color: #ff9635 !important;
  2371. }
  2372. .cm-css-comment {
  2373. color: #676767 !important;
  2374. font-style: italic;
  2375. }
  2376. .cm-css-meta {
  2377. color: #EDBF82 !important;
  2378. }
  2379. .cm-css-number {
  2380. color: #EDDFAF !important;
  2381. }
  2382. .cm-css-operator {
  2383. color: #EDDFAF !important;
  2384. }
  2385. .cm-css-property {
  2386. color: #EDBF82 !important;
  2387. }
  2388. .cm-css-qualifier {
  2389. color: #ff9635 !important;
  2390. }
  2391. .cm-css-string {
  2392. color: #e3b959 !important;
  2393. }
  2394. .cm-css-string-2 {
  2395. color: #EDDFAF !important;
  2396. }
  2397. .cm-css-tag {
  2398. color: #ff9635 !important;
  2399. }
  2400. .cm-css-variable {
  2401. color: #ff9635 !important;
  2402. }
  2403. .cm-css-variable-2 {
  2404. color: #ff9635 !important;
  2405. }
  2406. .cm-xml-comment {
  2407. color: #969896 !important;
  2408. font-style: italic !important;
  2409. }
  2410. .cm-xml-error {
  2411. color: #bf4c4c !important;
  2412. }
  2413. .cm-xml-string {
  2414. color: #b9ca4a !important;
  2415. }
  2416. .cm-xml-tag {
  2417. color: #d54e53 !important;
  2418. }
  2419. .cm-xml-attribute {
  2420. color: #e78c45 !important;
  2421. }
  2422. .cm-xml-link {
  2423. color: #7aa6da !important;
  2424. }
  2425. .shadow-root .webkit-html-fragment.shadow-root {
  2426. color: #ddbb00 !important;
  2427. }
  2428. .outline-disclosure ol li .highlight {
  2429. color: #ddbb00 !important;
  2430. }
  2431. .CodeMirror-code {
  2432. color: #EDDFAF;
  2433. }
  2434. .webkit-html-attribute-name {
  2435. color: #90BDE8 !important;
  2436. }
  2437. .webkit-html-attribute-value {
  2438. color: #76BA53 !important;
  2439. }
  2440. .webkit-html-comment {
  2441. color: #969896 !important;
  2442. font-style: italic;
  2443. }
  2444. .webkit-html-resource-link,
  2445. .webkit-html-external-link {
  2446. color: #EA9C77 !important;
  2447. text-decoration: none !important;
  2448. }
  2449. .webkit-line-gutter-backdrop + table .webkit-html-external-link {
  2450. color: #d33682 !important; }
  2451. .webkit-html-tag,
  2452. .webkit-html-tag-name {
  2453. color: #4B9CE9 !important;
  2454. }
  2455. .webkit-html-text-node,
  2456. .webkit-html-css-node,
  2457. .webkit-html-js-node {
  2458. color: #85b7f1 !important;
  2459. }
  2460. .webkit-html-pseudo-element {
  2461. color: #c3d7ee !important;
  2462. }
  2463. .selector-matches {
  2464. color: #ff9635 !important;
  2465. }
  2466. .webkit-css-selector {
  2467. color: #ff9635 !important;
  2468. }
  2469. .webkit-css-at-rule {
  2470. color: #b094bb !important;
  2471. }
  2472. .webkit-css-color {
  2473. color: #ff9635 !important;
  2474. }
  2475. .webkit-css-comment {
  2476. color: #676767 !important;
  2477. }
  2478. .webkit-css-important {
  2479. color: #ff0000 !important;
  2480. }
  2481. .webkit-css-keyword {
  2482. color: #EA9C77 !important;
  2483. }
  2484. .webkit-css-number {
  2485. color: #EDDFAF !important;
  2486. }
  2487. .webkit-css-property,
  2488. .styles-section .properties > li .webkit-css-property {
  2489. color: #EDBF82 !important;
  2490. font-weight: 400;
  2491. }
  2492. .webkit-css-string {
  2493. color: #e3b959 !important;
  2494. }
  2495. .webkit-css-url {
  2496. color: #7aa6da !important;
  2497. }
  2498. .section .properties .name,
  2499. .event-properties .name,
  2500. .console-formatted-object .name {
  2501. color: #77a8c6 !important;
  2502. }
  2503. .console-formatted-object,
  2504. .console-formatted-array {
  2505. color: #7c7c7c !important;
  2506. }
  2507. .console-formatted-function {
  2508. color: #8b6ccf !important;
  2509. }
  2510. .console-formatted-number {
  2511. color: #89f5a2 !important;
  2512. }
  2513. .console-formatted-boolean {
  2514. color: #89f5a2 !important;
  2515. }
  2516. .console-object-preview {
  2517. color: #dddddd !important;
  2518. }
  2519. .console-formatted-regexp {
  2520. color: #ff54e8 !important;
  2521. }
  2522. .console-formatted-string {
  2523. color: #ff8737 !important;
  2524. }
  2525. .console-formatted-undefined {
  2526. color: #ad4e4e !important;
  2527. }
  2528. .json .title {
  2529. color: #EDDFAF !important;
  2530. }
  2531. .json .separator {
  2532. color: #919191 !important;
  2533. }
  2534. /**********************************************/
  2535. /* Tables
  2536. /**********************************************/
  2537. .data-grid {
  2538. border: 1px solid #151515 !important;
  2539. background-color: transparent !important;
  2540. background-image: none !important;
  2541. }
  2542. .data-grid th,
  2543. .data-grid .data {
  2544. background: none !important;
  2545. border-left: 1px solid #2e3c43 !important;
  2546. }
  2547. .data-grid .header {
  2548. background: #111 !important;
  2549. border-top: 1px solid #2e3c43 !important;
  2550. }
  2551. .data-grid .header th {
  2552. color: #80cbc4 !important;
  2553. }
  2554. .data-grid .header .key-column,
  2555. .data-grid .header .value-column {
  2556. border: none !important;
  2557. }
  2558. .data-grid td {
  2559. border-left: 1px solid #282828 !important;
  2560. }
  2561. .data-grid .data-container a {
  2562. text-decoration: none;
  2563. color: #c792ea !important;
  2564. }
  2565. .data-grid .data-container tr:nth-child(odd) {
  2566. background-color: #222 !important;
  2567. }
  2568. .data-grid .data-container tr:nth-child(even) {
  2569. background-color: #282e35 !important;
  2570. }
  2571. .data-grid .data-container tr:not(.selected):not(.filler):hover {
  2572. background-color: #282e35 !important;
  2573. outline: 1px solid #414141 !important;
  2574. }
  2575. .data-grid .data-container tr.selected {
  2576. background-color: #3e4c58 !important;
  2577. outline: 1px solid #2e3c43 !important;
  2578. }
  2579. .data-grid .data-container tr .editing * {
  2580. color: #FFF !important;
  2581. background-color: #222 !important;
  2582. }
  2583. /***********************/
  2584. /* Tabbed Panes
  2585. /***********************/
  2586. .tabbed-pane:not(.help-window-main) .tabbed-pane-header {
  2587. background: #111 !important;
  2588. border-top: 1px solid #2e3c43 !important;
  2589. border-bottom: none;
  2590. }
  2591. .tabbed-pane:not(.help-window-main) .tabbed-pane-header .tabbed-pane-header-tab {
  2592. border-top: 2px solid #b1bdc4 !important;
  2593. border-left: none !important;
  2594. border-right: none !important;
  2595. padding: 2px 7px !important;
  2596. margin: 0 !important;
  2597. margin-top: 0 !important;
  2598. margin-bottom: 1px !important;
  2599. border-color: transparent !important;
  2600. }
  2601. .tabbed-pane:not(.help-window-main) .tabbed-pane-header .tabbed-pane-header-tab:hover {
  2602. color: #f8f8f8 !important;
  2603. }
  2604. .tabbed-pane:not(.help-window-main) .tabbed-pane-header .tabbed-pane-header-tab.selected {
  2605. background: none !important;
  2606. border-top: 2px solid #80cbc4 !important;
  2607. color: #f8f8f8 !important;
  2608. font-size: 1em;
  2609. }
  2610. .tabbed-pane:not(.help-window-main) .tabbed-pane-header .editor-container-unsaved-committed-changes-icon + .tabbed-pane-header-tab-title {
  2611. color: #ddbb00;
  2612. }
  2613. .tabbed-pane:not(.help-window-main) .tabbed-pane-header .tabbed-pane-header-contents {
  2614. color: #999999 !important;
  2615. }
  2616. .tabbed-pane:not(.help-window-main) .tabbed-pane-header .tabbed-pane-header-tab-title {
  2617. line-height: 16px !important;
  2618. }
  2619. .tabbed-pane:not(.help-window-main) .overrides-view .tabbed-pane-header-tab {
  2620. border-top: none !important;
  2621. margin-left: 6px !important;
  2622. }
  2623. .tabbed-pane:not(.help-window-main) .overrides-view .tabbed-pane-header-tab.selected {
  2624. border-top: none !important;
  2625. border-left: 6px solid #80cbc4 !important;
  2626. margin-left: 0 !important;
  2627. }
  2628. .tabbed-pane-content not(.overrides-view) .tabbed-pane-header {
  2629. flex: 0 0 25px !important;
  2630. }
  2631. .tabbed-pane-content not(.overrides-view) .tabbed-pane-header .tabbed-pane-header-tab {
  2632. height: 25px !important;
  2633. line-height: 18.75px !important;
  2634. cursor: pointer !important;
  2635. }
  2636. #drawer-contents .tabbed-pane-header,
  2637. .inactive #drawer-contents .tabbed-pane-header {
  2638. border-top: none !important;
  2639. border-bottom: #b1bdc4 !important;
  2640. }
  2641. .tabbed-pane-tab-slider,
  2642. ::shadow .tabbed-pane-tab-slider {
  2643. display: none !important;
  2644. }
  2645. body .toolbar-background,
  2646. body.undocked.platform-mac-mountain-lion.inactive .toolbar-background,
  2647. body.undocked.platform-mac-mountain-lion .toolbar-background,
  2648. body.platform-mac-mountain-lion.inactive .toolbar-background,
  2649. body.platform-mac-mountain-lion .toolbar-background,
  2650. body.undocked.platform-mac.inactive .toolbar-background,
  2651. body.undocked.platform-mac .toolbar-background,
  2652. body.inactive .toolbar-background,
  2653. body:not(.undocked) .toolbar-background {
  2654. background: #111 !important;
  2655. border-top: 1px solid #2e3c43 !important;
  2656. border-bottom: none !important;
  2657. }
  2658. select.tabbed-pane-header-tabs-drop-down-select {
  2659. background-color: #222 !important;
  2660. color: #b1bdc4 !important;
  2661. }
  2662. .toolbar .tabbed-pane-header .tabbed-pane-header-tab {
  2663. height: 34px !important;
  2664. line-height: 25.5px !important;
  2665. padding: 2px 4px !important;
  2666. cursor: pointer !important;
  2667. border-image: none !important;
  2668. }
  2669. .toolbar .tabbed-pane-header .tabbed-pane-header-tabs-drop-down {
  2670. line-height: 30.6px;
  2671. }
  2672. .toolbar .toolbar-controls-left,
  2673. .toolbar .toolbar-controls-right {
  2674. padding-top: 6px !important;
  2675. border-bottom: 1px solid #2e3c43 !important;
  2676. }
  2677. #network-views .network-item-view .tabbed-pane-header {
  2678. padding-top: 0 !important;
  2679. }
  2680. #network-views .network-item-view .tabbed-pane-header .tabbed-pane-header-tab {
  2681. height: 31px !important;
  2682. }
  2683. #network-views .network-item-view .tabbed-pane-header .tabbed-pane-header-tab-title {
  2684. line-height: 21px !important;
  2685. }
  2686. #network-views.small .network-item-view .tabbed-pane-header .tabbed-pane-header-tab-title {
  2687. line-height: 12px !important;
  2688. }
  2689. .tabbed-pane-header-tabs-drop-down {
  2690. color: #999 !important;
  2691. }
  2692. .split-view.hbox > .split-view-sidebar.split-view-contents-second:not(.maximized) {
  2693. border-left: 2px solid #2e3c43 !important;
  2694. }
  2695. .split-view.hbox > .split-view-sidebar.split-view-contents-first:not(.maximized) {
  2696. border-right: 2px solid #2e3c43 !important;
  2697. }
  2698. .tabbed-pane-header-tab {
  2699. width: auto !important;
  2700. }
  2701. .filter-bitset-filter li,
  2702. .filter-bitset-filter li.selected,
  2703. .filter-bitset-filter li:hover,
  2704. .filter-bitset-filter li:active {
  2705. text-shadow: 0 0 0 #b1bdc4 !important;
  2706. color: #b1bdc4 !important;
  2707. }
  2708. .filter-bitset-filter li:hover {
  2709. background: #2e3c43 !important;
  2710. }
  2711. .filter-bitset-filter li.selected {
  2712. color: #f2f2f2 !important;
  2713. background: #282e35 !important;
  2714. }
  2715. .filter-bitset-filter li.selected.error {
  2716. background: #ff5a5a !important;
  2717. }
  2718. .filter-bitset-filter li.selected.warning {
  2719. background: #ddbb00 !important;
  2720. }
  2721. .filter-bitset-filter li.selected.info {
  2722. background: #80cbc4 !important;
  2723. }
  2724. .filter-bitset-filter li.selected.log {
  2725. background: #929ba2 !important;
  2726. }
  2727. .filter-bitset-filter li.selected.debug {
  2728. background: #fc844c !important;
  2729. }
  2730. .network-filters-header,
  2731. .console-filters-header,
  2732. .timeline-filters-header {
  2733. background: #2e3c43;
  2734. }
  2735. /*separator between all | rest of options*/
  2736. .filter-bitset-filter-divider {
  2737. background-color: #2e3c43 !important;
  2738. }
  2739. .status-bar-counter,
  2740. body .inspector-view-toolbar.status-bar::shadow .status-bar-item {
  2741. color: #b1bdc4 !important;
  2742. }
  2743. .status-bar-counter:hover {
  2744. border-bottom: none !important;
  2745. }
  2746. .tabbed-pane-header-tabs-drop-down > select.drop-down-menu option {
  2747. background-color: #222 !important;
  2748. color: #b1bdc4 !important;
  2749. }
  2750. .overrides-splash-screen {
  2751. color: #b1bdc4 !important;
  2752. }
  2753. .overrides-splash-screen .glyph {
  2754. background-color: #b1bdc4 !important;
  2755. }
  2756. .tabbed-pane-header-tab.overrides-activate .tabbed-pane-header-tab-title::after {
  2757. color: #80cbc4 !important;
  2758. }
  2759. ::shadow .shadow-split-view.hbox.shadow-split-view-first-is-sidebar > .shadow-split-view-sidebar:not(.maximized) {
  2760. border-right: 2px solid #2e3c43 !important;
  2761. }
  2762. ::shadow .shadow-split-view.hbox > .shadow-split-view-sidebar:not(.maximized) {
  2763. border-left: 2px solid #2e3c43 !important;
  2764. }
  2765. ::shadow .shadow-split-view.vbox > .shadow-split-view-resizer > .shadow-split-view-resizer-border {
  2766. border-top: none !important;
  2767. }
  2768. ::shadow .status-bar-item > .glyph,
  2769. ::shadow .shadow-split-view button.sidebar-show-hide-button {
  2770. background-color: #b1bdc4 !important;
  2771. }
  2772. ::shadow .status-bar-item[disabled] {
  2773. opacity: 0.5 !important;
  2774. }
  2775. ::shadow button.status-bar-item.toggled-on .glyph,
  2776. ::shadow .filter-status-bar-item.toggled-shown .glyph,
  2777. ::shadow button.status-bar-item:not([disabled]):active .glyph {
  2778. background-color: #80cbc4 !important;
  2779. }
  2780. @-webkit-keyframes fadeout-revised {
  2781. 0% {
  2782. background-color: #3e4c58;
  2783. }
  2784. 50% {
  2785. background-color: #3e4c58;
  2786. }
  2787. 100% {
  2788. background-color: #263238;
  2789. outline: 1px solid #263238;
  2790. }
  2791. }
  2792. body ::shadow .editing {
  2793. background-color: #222 !important;
  2794. outline: 1px solid #80cbc4 !important;
  2795. color: #b1bdc4 !important;
  2796. }
  2797. body ::shadow .CodeMirror {
  2798. outline: none !important;
  2799. border: 1px solid #2e3c43 !important;
  2800. border-radius: 5px;
  2801. box-shadow: inset 0 0 15px 0 rgba(17, 17, 17, 0.6) !important;
  2802. margin: 10px 0;
  2803. padding: 10px 0 0 10px !important;
  2804. color: #b1bdc4 !important;
  2805. }
  2806. body ::shadow ::-webkit-scrollbar,
  2807. body ::shadow .CodeMirror-scrollbar-filler,
  2808. body ::shadow .CodeMirror-gutter-filler {
  2809. width: 12px !important;
  2810. height: 12px !important;
  2811. background-color: #222 !important;
  2812. }
  2813. body ::shadow ::-webkit-scrollbar-track:horizontal,
  2814. body ::shadow .custom-popup-horizontal-scroll ::-webkit-scrollbar-track:horizontal,
  2815. body ::shadow .custom-popup-vertical-scroll ::-webkit-scrollbar-track:horizontal,
  2816. body ::shadow .custom-popup-vertical-scroll .custom-popup-horizontal-scroll ::-webkit-scrollbar-track:horizontal,
  2817. body ::shadow .custom-popup-horizontal-scroll .custom-popup-vertical-scroll ::-webkit-scrollbar-track:horizontal {
  2818. -webkit-box-shadow: none !important;
  2819. background: #282e35 !important;
  2820. }
  2821. body ::shadow ::-webkit-scrollbar-track:vertical,
  2822. body ::shadow .custom-popup-horizontal-scroll ::-webkit-scrollbar-track:vertical,
  2823. body ::shadow .custom-popup-vertical-scroll ::-webkit-scrollbar-track:vertical,
  2824. body ::shadow .custom-popup-vertical-scroll .custom-popup-horizontal-scroll ::-webkit-scrollbar-track:vertical,
  2825. body ::shadow .custom-popup-horizontal-scroll .custom-popup-vertical-scroll ::-webkit-scrollbar-track:vertical {
  2826. -webkit-box-shadow: none !important;
  2827. background: #282e35 !important;
  2828. }
  2829. body ::shadow ::-webkit-scrollbar-corner,
  2830. body ::shadow .CodeMirror-scrollbar-filler,
  2831. body ::shadow .CodeMirror-gutter-filler {
  2832. -webkit-box-shadow: none !important;
  2833. background: #282e35 !important;
  2834. }
  2835. body ::shadow ::-webkit-scrollbar-thumb {
  2836. border-radius: 0px !important;
  2837. background-color: #222 !important;
  2838. border: none !important;
  2839. }
  2840. body ::shadow ::-webkit-scrollbar-thumb:horizontal {
  2841. -webkit-box-shadow: none !important;
  2842. }
  2843. body ::shadow ::-webkit-scrollbar-thumb:vertical {
  2844. -webkit-box-shadow: none !important;
  2845. }
  2846. body ::shadow .styles-section.matched-styles .properties li.parent.expanded .expand-element,
  2847. body ::shadow #console-messages .console-group-messages .section.expanded .header::before,
  2848. body ::shadow #console-messages .properties-tree li.parent.expanded::before,
  2849. body ::shadow .outline-disclosure li.parent.expanded::before,
  2850. body ::shadow .properties-tree li.parent.expanded::before,
  2851. body ::shadow .section.expanded > .header::before,
  2852. body ::shadow .section .event-bar.expanded .header::before,
  2853. body ::shadow .sidebar-pane .parent.expanded::before,
  2854. body ::shadow .sidebar-pane-stack .sidebar-pane-title.expanded::before,
  2855. body ::shadow .timeline-expandable-expanded .timeline-expandable-arrow {
  2856. background-color: #8c8c8c !important;
  2857. background-image: none !important;
  2858. -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important;
  2859. -webkit-mask-position: -4px -96px !important;
  2860. -webkit-mask-repeat: no-repeat !important;
  2861. -webkit-transition: -webkit-transform 0.1s ease-in-out;
  2862. -webkit-transform: rotate(90deg);
  2863. }
  2864. body ::shadow .sidebar-pane-stack .sidebar-pane-title.expanded::before {
  2865. -webkit-transform: rotate(90deg) translateX(2px);
  2866. }
  2867. body ::shadow .styles-section.matched-styles .properties li.parent .expand-element,
  2868. body ::shadow #console-messages .console-group-messages .section .header::before,
  2869. body ::shadow #console-messages .properties-tree li.parent::before,
  2870. body ::shadow .outline-disclosure li.parent::before,
  2871. body ::shadow #search-results-pane-file-based .parent::before,
  2872. body ::shadow .properties-tree li.parent::before,
  2873. body ::shadow .section > .header::before,
  2874. body ::shadow .section .event-bar .header::before,
  2875. body ::shadow .sidebar-pane .parent::before,
  2876. body ::shadow .sidebar-pane-stack .sidebar-pane-title::before,
  2877. body ::shadow .timeline-expandable-collapsed .timeline-expandable-arrow,
  2878. body ::shadow ::shadow #search-results-pane-file-based .parent::before {
  2879. background-color: #8c8c8c !important;
  2880. background-image: none !important;
  2881. -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important;
  2882. -webkit-mask-position: -4px -96px !important;
  2883. -webkit-mask-repeat: no-repeat !important;
  2884. -webkit-transition: -webkit-transform 0.1s ease-in-out;
  2885. -webkit-transform: rotate(0deg);
  2886. }
  2887. body ::shadow .data-grid th.sort-ascending > div::after {
  2888. background-color: #8c8c8c !important;
  2889. background-image: none !important;
  2890. -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important;
  2891. -webkit-mask-position: -4px -96px !important;
  2892. -webkit-mask-repeat: no-repeat !important;
  2893. -webkit-transition: -webkit-transform 0.1s ease-in-out;
  2894. -webkit-mask-position: -4px -108px !important;
  2895. }
  2896. body ::shadow .data-grid th.sort-descending > div::after {
  2897. background-color: #8c8c8c !important;
  2898. background-image: none !important;
  2899. -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important;
  2900. -webkit-mask-position: -4px -96px !important;
  2901. -webkit-mask-repeat: no-repeat !important;
  2902. -webkit-transition: -webkit-transform 0.1s ease-in-out;
  2903. -webkit-mask-position: -20px -96px !important;
  2904. }
  2905. body ::shadow #search-results-pane-file-based .parent.expanded::before,
  2906. body ::shadow ::shadow #search-results-pane-file-based .parent.expanded::before {
  2907. -webkit-mask-position: -20px -96px !important;
  2908. }
  2909. body ::shadow #search-results-pane-file-based .parent.expanded::before,
  2910. body ::shadow ::shadow #search-results-pane-file-based .parent.expanded::before {
  2911. -webkit-mask-position: -20px -93px !important;
  2912. }
  2913. body ::shadow #search-results-pane-file-based .parent::before,
  2914. body ::shadow ::shadow #search-results-pane-file-based .parent::before {
  2915. -webkit-mask-position: -4px -93px !important;
  2916. }
  2917. body ::shadow .panel.network .outline-disclosure li.parent::before {
  2918. top: 3px !important;
  2919. }
  2920. body ::shadow .sidebar-tabbed-pane .section > .header::before,
  2921. body ::shadow .event-bars .event-bar .header::before {
  2922. margin-top: 3px !important;
  2923. }
  2924. body ::shadow .status-bar-select-arrow {
  2925. background-color: #8c8c8c !important;
  2926. background-image: none !important;
  2927. -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important;
  2928. -webkit-mask-position: -4px -96px !important;
  2929. -webkit-mask-repeat: no-repeat !important;
  2930. -webkit-transition: -webkit-transform 0.1s ease-in-out;
  2931. -webkit-mask-position: -20px -96px !important;
  2932. }
  2933. body /deep/ .highlighted-search-result {
  2934. color: #000000 !important;
  2935. border-radius: 2px !important;
  2936. font-size: 1em !important;
  2937. background-color: #80cbc4 !important;
  2938. box-shadow: rgba(0, 0, 0, 0.498039) 3px 3px 4px 0px !important;
  2939. }
  2940. .timeline-aggregated-category + span {
  2941. text-shadow: none !important;
  2942. color: #b1bdc4 !important;
  2943. }
  2944. .glyph {
  2945. background-color: rgba(140, 140, 140, 0.7) !important;
  2946. }
  2947. ::shadow .crumbs {
  2948. text-shadow: none !important;
  2949. color: #b1bdc4 !important;
  2950. }
  2951. ::shadow .crumbs .crumb {
  2952. -webkit-border-image: none !important;
  2953. border-left: 1px solid #2e3c43 !important;
  2954. border-right: 1px solid #282e35 !important;
  2955. padding: 0 10px !important;
  2956. margin: 0 !important;
  2957. line-height: 18px !important;
  2958. }
  2959. ::shadow .crumbs .crumb:hover {
  2960. color: #f8f8f8 !important;
  2961. background-color: #b1bdc4 !important;
  2962. }
  2963. ::shadow .crumbs .crumb.selected {
  2964. background-color: #3e4c58 !important;
  2965. text-shadow: none !important;
  2966. color: #f8f8f8 !important;
  2967. cursor: default;
  2968. }
  2969. .image-view .title {
  2970. color: #b1bdc4 !important;
  2971. }
  2972. .image-view .infoList dt {
  2973. color: #626262 !important;
  2974. margin-bottom: 5px !important;
  2975. }
  2976. .image-view .infoList dd {
  2977. color: #b1bdc4 !important;
  2978. margin-bottom: 5px !important;
  2979. }
  2980. .image-view dd > a.undefined {
  2981. color: #c792ea !important;
  2982. }
  2983. .timeline-details-view-body {
  2984. background-color: #222 !important;
  2985. }
  2986. .timeline-details-view-row {
  2987. border-bottom: 1px solid #2e3c43 !important;
  2988. }
  2989. .timeline-details-view-row-value {
  2990. border-left: 1px solid #2e3c43 !important;
  2991. color: #b1bdc4 !important;
  2992. }
  2993. .timeline-details-view-row-title {
  2994. color: #626262 !important;
  2995. }
  2996. .timeline-aggregated-info-legend > div,
  2997. .memory-counter-sidebar-info {
  2998. color: #b1bdc4 !important;
  2999. }
  3000. ::shadow .flame-chart-selected-element {
  3001. border-color: #3e4c58 !important;
  3002. background-color: rgba(54, 76, 59, 0.6) !important;
  3003. }
  3004. .layer-tree.outline-disclosure li,
  3005. .profiler-log-view li {
  3006. color: #b1bdc4 !important;
  3007. }
  3008. .timeline-layers-view-properties table tr td:nth-child(1) {
  3009. color: #626262 !important;
  3010. }
  3011. .timeline-layers-view-properties table tr td:nth-child(2) {
  3012. color: #b1bdc4 !important;
  3013. }
  3014. .timeline-layers-view-properties td {
  3015. border: 1px solid #2e3c43 !important;
  3016. }
  3017. ::shadow .spectrum-display-value,
  3018. ::shadow .spectrum-range-container {
  3019. color: #b1bdc4 !important;
  3020. }
  3021. .toolbar > .status-bar {
  3022. background-color: transparent !important;
  3023. height: inherit !important;
  3024. padding-top: 6px !important;
  3025. border-bottom: 1px solid #2e3c43 !important;
  3026. box-shadow: inset 0 1px 0 #626262 !important;
  3027. }
  3028. .filter-bar.hbox {
  3029. padding: 2px 0;
  3030. }
  3031. ::shadow .toolbar-search-control {
  3032. background-color: #282e35 !important;
  3033. border-color: #2e3c43 !important;
  3034. color: #e6e6e6 !important;
  3035. }
  3036. ::shadow .toolbar-search-control:disabled,
  3037. ::shadow ::shadow .toolbar-search-control:disabled {
  3038. opacity: .3 !important;
  3039. }
  3040. ::shadow .toolbar-search-control:focus,
  3041. ::shadow ::shadow .toolbar-search-control:focus {
  3042. outline-color: none !important;
  3043. }
  3044. ::shadow #search-results-pane-file-based .search-match:hover,
  3045. ::shadow ::shadow #search-results-pane-file-based .search-match:hover {
  3046. box-shadow: inset 0 1px 0 #282e35, inset 0 -1px 0 #282e35 !important;
  3047. background-color: #2e3c43;
  3048. color: #b1bdc4;
  3049. }
  3050. html /deep/ .component-root {
  3051. color: #b1bdc4 !important;
  3052. }
  3053. .filter-input-field {
  3054. background-color: #282e35 !important;
  3055. border-color: #2e3c43 !important;
  3056. color: #e6e6e6 !important;
  3057. }
  3058. .filter-input-field:disabled {
  3059. opacity: .3 !important !important;
  3060. }
  3061. .filter-input-field:focus {
  3062. outline-color: none !important !important;
  3063. }
  3064. ::shadow select.status-bar-item,
  3065. ::shadow .toolbar::shadow select.toolbar-item {
  3066. margin-right: -15px !important;
  3067. }
  3068. ::shadow select.status-bar-item /deep/ option,
  3069. ::shadow .toolbar::shadow select.toolbar-item /deep/ option {
  3070. background-color: #222 !important;
  3071. }
  3072. #glass-pane .status-bar.fill {
  3073. background-image: none !important;
  3074. background-color: transparent !important;
  3075. }
  3076. ::shadow .status-bar-shadow.floating {
  3077. background-color: #282e35 !important;
  3078. border: none !important;
  3079. }
  3080. ::shadow .status-bar-shadow.floating .status-bar-item {
  3081. border: 1px solid #263238 !important;
  3082. }
  3083. #memory-graphs-container > div:last-child {
  3084. background: #111 !important;
  3085. }
  3086. .timeline-layers-view > div:last-child,
  3087. .timeline-layers-view-properties > div:last-child {
  3088. background-color: #222 !important;
  3089. }
  3090. body.undocked.platform-mac.inactive .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header,
  3091. body.undocked.platform-mac .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header,
  3092. body.platform-mac.inactive .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header,
  3093. body.platform-mac .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header,
  3094. body .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header {
  3095. background: #111 !important;
  3096. }
  3097. ::shadow .tabbed-pane-header {
  3098. background: #111 !important;
  3099. }
  3100. ::shadow .tabbed-pane-header-contents {
  3101. color: #999999 !important;
  3102. }
  3103. .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header {
  3104. flex: 0 0 34px !important;
  3105. }
  3106. .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header-tabs-drop-down-container {
  3107. padding-top: 6px !important;
  3108. }
  3109. .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header-contents .tabbed-pane-header-tab {
  3110. height: 34px !important;
  3111. line-height: 25.5px !important;
  3112. }
  3113. ::shadow .tabbed-pane-header-tabs-drop-down-container {
  3114. color: #999999 !important;
  3115. }
  3116. .tabbed-pane::shadow .tabbed-pane-header {
  3117. border-bottom: 1px solid #263238 !important;
  3118. border: none;
  3119. }
  3120. .tabbed-pane::shadow .tabbed-pane-header-tab {
  3121. border-color: transparent !important;
  3122. border-image: none !important;
  3123. border-left: none !important;
  3124. border-right: none !important;
  3125. border-top: 2px solid #b1bdc4 !important;
  3126. cursor: pointer !important;
  3127. margin: 0 !important;
  3128. margin-bottom: 1px !important;
  3129. margin-top: 0 !important;
  3130. padding: 2px 4px !important;
  3131. width: auto !important;
  3132. color: #b1bdc4 !important;
  3133. }
  3134. .tabbed-pane::shadow .tabbed-pane-header-tab:hover {
  3135. color: #f8f8f8 !important;
  3136. }
  3137. .tabbed-pane::shadow .tabbed-pane-header-tab.selected {
  3138. background: none !important;
  3139. border-top: 2px solid #80cbc4 !important;
  3140. color: #f8f8f8 !important;
  3141. font-size: 1em;
  3142. }
  3143. ::shadow .tabbed-pane-content {
  3144. background-color: #222 !important;
  3145. }
  3146. ::shadow .search-drawer-header label.search-config-label {
  3147. color: #b1bdc4 !important;
  3148. }
  3149. .panel .status-bar::shadow .status-bar-shadow {
  3150. background: #111 !important;
  3151. border-top: 1px solid #2e3c43 !important;
  3152. box-shadow: none !important;
  3153. border-bottom: none !important;
  3154. }
  3155. .tabbed-pane-header-before::shadow .status-bar-shadow,
  3156. .tabbed-pane-header-after::shadow .status-bar-shadow {
  3157. height: 34px !important;
  3158. }
  3159. ::shadow .shadow-split-view.vbox > .shadow-split-view-sidebar:not(.maximized) {
  3160. border-top: none !important;
  3161. }
  3162. .device-name {
  3163. color: #626262 !important;
  3164. }
  3165. .device-serial {
  3166. color: #b1bdc4 !important;
  3167. }
  3168. .overrides-splash-screen .status-bar {
  3169. background-color: #222 !important;
  3170. background-image: none !important;
  3171. }
  3172. .overrides-view {
  3173. padding-top: 0 !important;
  3174. }
  3175. .overrides-view ::shadow .tabbed-pane-content {
  3176. padding: 10px;
  3177. }
  3178. .network-details-view-tall-header .network-item-view::shadow .tabbed-pane-header {
  3179. padding-top: 0 !important;
  3180. }
  3181. .network-details-view-tall-header .network-item-view::shadow .tabbed-pane-header-tab {
  3182. height: 31px !important;
  3183. padding-top: 5px !important;
  3184. }
  3185. .network .request-headers-view .parent {
  3186. margin-top: 1px !important;
  3187. }
  3188. ::shadow .suggest-box {
  3189. color: #000 !important;
  3190. background-color: #222 !important;
  3191. border: 2px rgba(0, 0, 0, 0.2) solid !important;
  3192. box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.1) !important;
  3193. }
  3194. ::shadow .suggest-box-content-item.source-code:hover {
  3195. background-color: #282e35 !important;
  3196. border: 1px solid #b1bdc4 !important;
  3197. }
  3198. ::shadow .suggest-box-content-item.source-code.selected {
  3199. background-color: #282e35 !important;
  3200. }
  3201. ::shadow .suggest-box .source-code .prefix {
  3202. color: #80cbc4 !important;
  3203. }
  3204. ::shadow .suggest-box .source-code .suffix {
  3205. color: #d9d9d9 !important;
  3206. }
  3207. ::shadow .vertical-tab-layout .tabbed-pane-header-tab {
  3208. padding-left: 20px !important;
  3209. border-top: none !important;
  3210. color: #b1bdc4 !important;
  3211. }
  3212. ::shadow .vertical-tab-layout .tabbed-pane-header-tab.selected {
  3213. border-top: none !important;
  3214. border-left: 7px solid #80cbc4 !important;
  3215. padding-left: 13px !important;
  3216. }
  3217. .help-window-main ::shadow .tabbed-pane-header {
  3218. background-image: none !important;
  3219. box-shadow: none !important;
  3220. }
  3221. .help-window-main ::shadow .tabbed-pane-header-contents {
  3222. box-shadow: none !important;
  3223. }
  3224. ::shadow style + .text-prompt-editing {
  3225. background-color: #222 !important;
  3226. outline: 1px solid #80cbc4 !important;
  3227. }
  3228. ::shadow .text-prompt-editing > ::content * {
  3229. color: #80cbc4 !important;
  3230. }
  3231. .callstack-info.status {
  3232. border-top: none !important;
  3233. }
  3234. #devices-tab-content .devices-list {
  3235. border: 1px solid #2e3c43 !important;
  3236. }
  3237. #devices-tab-content .devices-title {
  3238. color: #80cbc4 !important;
  3239. }
  3240. #devices-tab-content .devices-list-item {
  3241. color: #b1bdc4;
  3242. }
  3243. #devices-tab-content .devices-list-item:hover {
  3244. background: #282e35 !important;
  3245. border-top: 1px solid #282e35 !important;
  3246. border-bottom: 1px solid #282e35 !important;
  3247. }
  3248. #devices-tab-content .devices-list-item .devices-list-title {
  3249. opacity: 0.2 !important;
  3250. }
  3251. #devices-tab-content .devices-list-item.device-list-item-show .devices-list-title {
  3252. color: #b1bdc4 !important;
  3253. opacity: 1 !important;
  3254. }
  3255. #devices-tab-content .devices-edit-container {
  3256. background: #282e35 !important;
  3257. }
  3258. #devices-tab-content .devices-custom-separator {
  3259. border-top: 1px solid #151515 !important;
  3260. border-bottom: 1px solid #2e3c43 !important;
  3261. }
  3262. #devices-tab-content .devices-list-edit,
  3263. #devices-tab-content .devices-list-remove {
  3264. -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important;
  3265. background-color: #80cbc4 !important;
  3266. background-image: none !important;
  3267. }
  3268. #devices-tab-content .devices-list-edit {
  3269. -webkit-mask-position: -224px -72px;
  3270. }
  3271. #devices-tab-content .devices-list-remove {
  3272. -webkit-mask-position: -128px -24px;
  3273. }
  3274. .events-pane > ol > li.parent {
  3275. margin: 0 !important;
  3276. padding-bottom: 2px !important;
  3277. }
  3278. .events-pane > ol > ol > li {
  3279. border-top: none !important;
  3280. }
  3281. .events-pane .sidebar-pane .section.expanded > .header,
  3282. .events-pane .children .section.event-bar {
  3283. border-bottom: none !important;
  3284. }
  3285. body .sidebar-pane .parent:not(.event-category) + .children.expanded {
  3286. border-left: none !important;
  3287. }
  3288. .hidden-callframes-message {
  3289. background: #2e3c43;
  3290. text-align: center;
  3291. }
  3292. .hidden-callframes-message .link {
  3293. color: #c792ea !important;
  3294. }
  3295. .styles-section-title .media-list.media-matches .media.editable-media,
  3296. .styles-section-title .media-list {
  3297. color: #8c8c8c !important;
  3298. }
  3299. .styles-section-title .media-list.media-matches .media.editable-media.media-matches .media.editable-media .media-text,
  3300. .styles-section-title .media-list.media-matches .media.editable-media .media-text {
  3301. color: #b1bdc4 !important;
  3302. }
  3303. .styles-section .header .title .media-list.media-matches .media.editable-media {
  3304. color: #b1bdc4 !important;
  3305. }
  3306. .watch-expressions {
  3307. margin-top: 0 !important;
  3308. }
  3309. .watch-expressions .name {
  3310. color: #77a8c6 !important;
  3311. }
  3312. .watch-expression .primitive-value:hover,
  3313. .watch-expression .section .header:hover {
  3314. background-color: #282e35 !important;
  3315. box-shadow: inset 0 1px 0 0 #282e35, inset 0 -1px 0 0 #282e35;
  3316. }
  3317. .error-message {
  3318. color: #ff5a5a !important;
  3319. }
  3320. .settings-experiment-hidden label {
  3321. background-color: #222 !important;
  3322. }
  3323. .settings-experiment-hidden label .dt-checkbox-text {
  3324. color: #80cbc4 !important;
  3325. }
  3326. .event-listener-tree > li {
  3327. border-top: none !important;
  3328. }
  3329. .event-listener-tree .name {
  3330. color: #77a8c6 !important;
  3331. }
  3332. #network-overview-container {
  3333. border-bottom: none !important;
  3334. }
  3335. .network-overview-canvas-container {
  3336. background-color: #222 !important;
  3337. }
  3338. /* ==========================================================================
  3339. Find
  3340. ========================================================================== */
  3341. .styles-section .style-properties li.filter-match,
  3342. .styles-section .simple-selector.filter-match {
  3343. background-color: #3e4c58 !important;
  3344. box-shadow: 0 0 0 1px #2e3c43 !important;
  3345. border-radius: 2px;
  3346. }
  3347. /* ==========================================================================
  3348. Sources
  3349. ========================================================================== */
  3350. .text-editor-value-decoration {
  3351. background-color: #282e35 !important;
  3352. color: #b1bdc4 !important;
  3353. padding: 0 5px;
  3354. border-radius: 2px !important;
  3355. box-shadow: 0 1px 0 0 #2e3c43 !important;
  3356. border-top: 1px solid #1c1c1c !important;
  3357. }
  3358. .source-frame-infobar::shadow .infobar-warning {
  3359. color: #ddbb00;
  3360. border-bottom: 1px solid #2e3c43 !important;
  3361. background-color: #2e3c43 !important;
  3362. }
  3363. .source-frame-infobar::shadow .source-frame-infobar-toggle-link {
  3364. color: #80cbc4 !important;
  3365. }
  3366. .cm-execution-line-tail {
  3367. background-color: #212e24 !important;
  3368. border-radius: 2px !important;
  3369. }
  3370. /* ==========================================================================
  3371. Popovers
  3372. ========================================================================== */
  3373. .popover {
  3374. min-height: 0 !important;
  3375. }
  3376. /* ==========================================================================
  3377. Sources (watch)
  3378. ========================================================================== */
  3379. .watch-expression-header:hover {
  3380. background-color: #282e35 !important;
  3381. }
  3382. /* ==========================================================================
  3383. Elements - Accessibility
  3384. ========================================================================== */
  3385. div.ax-computed-name {
  3386. border-bottom: 1px solid #2e3c43 !important;
  3387. }
  3388. ::shadow .ax-name {
  3389. color: #77a8c6 !important;
  3390. }
  3391. ::shadow .ax-role {
  3392. color: #b1bdc4 !important;
  3393. }
  3394. /* ==========================================================================
  3395. Toolbar
  3396. ========================================================================== */
  3397. body .inspector-view-toolbar.toolbar::shadow .toolbar-button-theme {
  3398. background-color: #b1bdc4 !important;
  3399. }
  3400. .inspector-view-toolbar-left,
  3401. .inspector-view-toolbar.tabbed-pane-header-after {
  3402. margin-top: 7px !important;
  3403. }
  3404. .console-view .toolbar,
  3405. .network .toolbar {
  3406. background: #111 !important;
  3407. border-top: 1px solid #2e3c43 !important;
  3408. }
  3409. ::shadow .toolbar-item > .glyph,
  3410. ::shadow .toolbar-item > .glyph:active,
  3411. ::shadow .filter-toolbar-item.toggled-shown .glyph,
  3412. ::shadow button.toolbar-item.toggled-on .glyph {
  3413. background-color: #80cbc4 !important;
  3414. }
  3415. ::shadow .toolbar-item > .glyph,
  3416. ::shadow button.toolbar-item.toggled-off .glyph {
  3417. background-color: #b1bdc4 !important;
  3418. }
  3419. ::shadow .toolbar-counter-item {
  3420. color: #b1bdc4 !important;
  3421. }
  3422. /* ==========================================================================
  3423. Status Bars
  3424. ========================================================================== */
  3425. #sources-panel-sources-view .sources-toolbar {
  3426. background: #111 !important;
  3427. border-top: 1px solid #2e3c43 !important;
  3428. border-top: none !important;
  3429. color: #b1bdc4 !important;
  3430. }
  3431. .toolbar::shadow .toolbar-select-arrow {
  3432. position: relative !important;
  3433. right: 5px !important;
  3434. }
  3435. .resources-toolbar,
  3436. ::shadow .search-toolbar-summary {
  3437. background: #111 !important;
  3438. border-top: 1px solid #2e3c43 !important;
  3439. color: #b1bdc4 !important;
  3440. border-top: none !important;
  3441. }
  3442. .profiles-toolbar {
  3443. background: #111 !important;
  3444. border-top: 1px solid #2e3c43 !important;
  3445. color: #b1bdc4 !important;
  3446. border-bottom: none !important;
  3447. }
  3448. /* ==========================================================================
  3449. Toolbars
  3450. ========================================================================== */
  3451. ::shadow .shadow-split-widget.hbox > .shadow-split-widget-sidebar:not(.maximized) {
  3452. border-left: 2px solid #2e3c43 !important;
  3453. }
  3454. ::shadow .shadow-split-widget.hbox.shadow-split-widget-first-is-sidebar > .shadow-split-widget-sidebar:not(.maximized) {
  3455. border-right: 2px solid #2e3c43 !important;
  3456. }
  3457. /* ==========================================================================
  3458. Elements Sidebar
  3459. ========================================================================== */
  3460. .styles-animations-controls-pane.expanded {
  3461. border-bottom: 1px solid #2e3c43 !important;
  3462. background: #313131 !important;
  3463. }
  3464. .styles-animations-controls-pane > * {
  3465. margin: 3px 4px !important;
  3466. }
  3467. /* ==========================================================================
  3468. Toolbars
  3469. ========================================================================== */
  3470. .dt-checkbox-text,
  3471. ::shadow .dt-checkbox-text,
  3472. ::content .dt-checkbox-text {
  3473. color: #b1bdc4 !important;
  3474. }
  3475. ::shadow .shadow-split-widget button.sidebar-show-hide-button {
  3476. background-color: #b1bdc4 !important;
  3477. }
  3478. /* ==========================================================================
  3479. Console
  3480. ========================================================================== */
  3481. ::shadow .shadow-split-widget.vbox > .shadow-split-widget-sidebar:not(.maximized) {
  3482. border-top: none !important;
  3483. }
  3484. .overrides-view label,
  3485. .overrides-view fieldset > span,
  3486. #metrics-override-section span,
  3487. #metrics-override-section td,
  3488. #geolocation-override-section td {
  3489. color: #626262 !important;
  3490. }
  3491. ::shadow .object-properties-section-name,
  3492. .console-view-object-properties-section span {
  3493. color: #546e7a !important;
  3494. }
  3495. .tabbed-pane::shadow .tabbed-pane-header-tab {
  3496. background: #37474f !important;
  3497. background-color: #37474f !important;
  3498. }
  3499. .request-headers-view .outline-disclosure li.parent.expanded::before
  3500. .data-grid .header-container {
  3501. -webkit-mask-position: -4px -98px !important;
  3502. }
  3503. ::shadow > .toolbar-shadow .toolbar-button.hover .toolbar-glyph {
  3504. background-color: hsl(218, 81%, 59%) !important;
  3505. }
  3506. .filter-bar {
  3507. background-color: #37474f !important;
  3508. }
  3509. .request-headers-view .outline-disclosure li.parent.expanded::before {
  3510. -webkit-mask-position: -4px -98px !important;
  3511. }
  3512. ::shadow > .tree-outline-disclosure .tree-outline li.navigator-folder-tree-item .tree-element-title {
  3513. color: #b1bdc4 !important;
  3514. }
  3515. .scope-chain-sidebar-pane-section-title {
  3516. color: #546e7a !important;
  3517. }
  3518. ::shadow .odd-row {
  3519. background-color: #3e4c58 !important;
  3520. }
  3521. ::shadow .tree-element-title {
  3522. color: #f8f8f8 !important;
  3523. }
  3524. ::shadow .tree-outline li.selected .selection {
  3525. background-color: #546e7a !important;
  3526. }
  3527. ::shadow ol.tree-outline:focus li.selected .selection {
  3528. background-color: hsl(218, 81%, 59%) !important;
  3529. }
  3530. ::shadow .cm-line-without-source-mapping {
  3531. background-color: #222 !important;
  3532. }
  3533. ::shadow .CodeMirror pre {
  3534. background-color: #222 !important;
  3535. }
  3536. .network-status-pane {
  3537. background-color: #2e3c43 !important;
  3538. }
  3539. .resources-dividers-label-bar {
  3540. background-color: #3e4c58 !important;
  3541. }
  3542. * {
  3543. color: #b1bdc4 !important;
  3544. }
  3545. span.being-edited {
  3546. color: #cdd3de !important;
  3547. }