Advertisement
Guest User

Untitled

a guest
Mar 21st, 2018
39
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 23.50 KB | None | 0 0
  1. %if 0
  2. /* This Source Code Form is subject to the terms of the Mozilla Public
  3.  * License, v. 2.0. If a copy of the MPL was not distributed with this
  4.  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
  5. %endif
  6. @namespace html "http://www.w3.org/1999/xhtml";
  7. @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
  8.  
  9. *|*:root {
  10.   --in-content-page-text-category-text-active-color: #0c0c0d;
  11.   --in-content-page-background: #f9f9fa;
  12.   --in-content-selected-box-background-text: #fff;
  13.   --in-content-box-background-odd: #f3f6fa;
  14.   --in-content-box-background-hover: #ebebeb;
  15.   --in-content-box-background-active: #dadada;
  16.   --in-content-box-border-color: #d7d7db;    
  17.   --in-content-item-hover: rgba(0,149,221,0.25);
  18.   --in-content-item-selected-border-highlight-focus-text-selected-header-button-background: #0a84ff;
  19.   --in-content-category-outline-focus: 1px dotted #0a84ff;
  20.   --in-content-category-text: rgba(12,12,13);
  21.   --in-content-category-text-selected-active-link-color-hover: #0060df;
  22.   --in-content-category-background-hover: rgba(12,12,13,0.1);
  23.   --in-content-category-background-active-selected-hover: rgba(12,12,13,0.15);
  24.   --in-content-category-background-selected-active: rgba(12,12,13,0.2);
  25.   --in-content-tab-color: #424f5a;
  26.   --in-content-link-color-visited: #0a8dff;
  27.   --in-content-link-color-button-background-active: #003eaa;
  28.   --in-content-primary-button-background-hover: #0060df;
  29.   --in-content-table-border-dark-color: #d1d1d1;
  30. }
  31.  
  32. html|html,
  33. xul|page,
  34. xul|window {
  35.   font: message-box;
  36.   -moz-appearance: none;
  37.   background-color: var(--in-content-page-background);
  38.   color: var(--in-content-page-text-category-text-active-color);
  39. }
  40.  
  41. html|body {
  42.   font-size: 15px;
  43.   font-weight: normal;
  44.   margin: 0;
  45. }
  46.  
  47. html|h1 {
  48.   font-size: 2.5em;
  49.   font-weight: lighter;
  50.   line-height: 1.2;
  51.   color: var( --in-content-page-text-category-text-active-color);
  52.   margin: 0;
  53.   margin-bottom: .5em;
  54. }
  55.  
  56. html|hr {
  57.   border-style: solid none none none;
  58.   border-color: var(--in-content-box-border-color);
  59. }
  60.  
  61. xul|caption {
  62.   -moz-appearance: none;
  63.   font-size: 1.14em;
  64.   margin: 0;
  65. }
  66.  
  67. html|h2,
  68. xul|caption xul|checkbox,
  69. xul|caption xul|label {
  70.   font-weight: 600;
  71.   line-height: 1.4em;
  72. }
  73.  
  74. xul|caption xul|checkbox,
  75. xul|caption xul|label {
  76.   margin: 0 !important;
  77. }
  78.  
  79. *|*.main-content {
  80.   padding: 40px 28px;
  81.   overflow: auto;
  82. }
  83.  
  84. /* groupboxes */
  85.  
  86. xul|groupbox {
  87.   -moz-appearance: none;
  88.   border: none;
  89.   margin: 0;
  90.   padding: 0;
  91. }
  92.  
  93. xul|groupbox > xul|caption {
  94.   padding: 4px 0;
  95. }
  96.  
  97. xul|groupbox xul|label:not(.menu-accel):not(.menu-text):not(.indent):not(.learnMore):not(.tail-with-learn-more),
  98. xul|groupbox xul|description {
  99.   /* !important needed to override toolkit !important rule */
  100.   margin-inline-start: 0 !important;
  101.   margin-inline-end: 0 !important;
  102. }
  103.  
  104. /* tabpanels and tabs */
  105.  
  106. xul|tabpanels {
  107.   -moz-appearance: none;
  108.   border: none;
  109.   padding: 0;
  110.   background-color: transparent;
  111.   color: inherit;
  112. }
  113.  
  114. xul|tabs {
  115.   margin-bottom: 15px;
  116.   border-top: 1px solid var(--in-content-box-border-color);
  117.   border-bottom: 1px solid var(--in-content-box-border-color);
  118.   background-color: var(--in-content-page-background);
  119. }
  120.  
  121. xul|tab {
  122.   -moz-appearance: none;
  123.   margin-top: 0;
  124.   padding: 4px 20px;
  125.   min-height: 44px;
  126.   color: var(--in-content-tab-color);
  127.   background-color: var(--in-content-page-background);
  128.   border-width: 0;
  129.   /* !important overrides tabbox.css RTL and visuallyselected rules */
  130.   border-radius: 0 !important;
  131.   transition: background-color 50ms ease 0s;
  132. }
  133.  
  134. xul|tab:hover {
  135.   background-color: var(--in-content-box-background-hover);
  136. }
  137.  
  138. xul|tab[selected] {
  139.   background-color: var(--in-content-box-background-hover);
  140.   padding-bottom: 0; /* compensate the 4px border */
  141.   border-bottom: 4px solid var(--in-content-item-selected-border-highlight-focus-text-selected-header-button-background);
  142. }
  143.  
  144. /* html buttons */
  145.  
  146. html|button {
  147.   padding: 3px;
  148. }
  149.  
  150. /* xul buttons and menulists */
  151.  
  152. *|button,
  153. html|select,
  154. xul|colorpicker[type="button"],
  155. xul|menulist,
  156. html|*.numberbox-input::-moz-number-spin-up,
  157. html|*.numberbox-input::-moz-number-spin-down {
  158.   -moz-appearance: none;
  159.   min-height: 30px;
  160.   color: var(--in-content-page-text-category-text-active-color);
  161.   border: 1px solid var(--in-content-box-border-color);
  162.   border-radius: 2px;
  163.   background-color: var(--in-content-page-background);
  164.   margin: 4px 8px;
  165.   /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
  166.   font-size: 1em;
  167. }
  168.  
  169. xul|button,
  170. html|button {
  171.   /* use the same margin of other elements for the alignment */
  172.   margin-left: 4px;
  173.   margin-right: 4px;
  174. }
  175.  
  176. html|select:not([size]):not([multiple]) {
  177.   background-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
  178.   background-position: right 3px center;
  179.   background-repeat: no-repeat;
  180.   background-size: auto 18px;
  181.   font-size: inherit;
  182.   padding-inline-start: 5px;
  183.   padding-inline-end: 24px;
  184.   text-overflow: ellipsis;
  185. }
  186.  
  187. html|select:not([size]):not([multiple]):dir(rtl){
  188.   background-position: left 3px center;
  189. }
  190.  
  191. html|button:enabled:hover,
  192. html|select:not([size]):not([multiple]):enabled:hover,
  193. html|*.numberbox-input::-moz-number-spin-up:hover,
  194. html|*.numberbox-input::-moz-number-spin-down:hover,
  195. xul|button:not([disabled="true"]):hover,
  196. xul|colorpicker[type="button"]:not([disabled="true"]):hover,
  197. xul|menulist:not([disabled="true"]):hover {
  198.   background-color: var(--in-content-box-background-hover);
  199. }
  200.  
  201. html|button:enabled:hover:active,
  202. html|select:not([size]):not([multiple]):enabled:hover:active,
  203. html|*.numberbox-input::-moz-number-spin-up:hover:active,
  204. html|*.numberbox-input::-moz-number-spin-down:hover:active,
  205. xul|button:not([disabled="true"]):hover:active,
  206. xul|colorpicker[type="button"]:not([disabled="true"]):hover:active,
  207. xul|menulist[open="true"]:not([disabled="true"]) {
  208.   background-color: var(--in-content-box-background-active);
  209. }
  210.  
  211. html|button:disabled,
  212. html|select:disabled,
  213. html|*.numberbox-input:disabled::-moz-number-spin-box,
  214. xul|button[disabled="true"],
  215. xul|colorpicker[type="button"][disabled="true"],
  216. xul|menulist[disabled="true"],
  217. xul|listbox[disabled="true"] {
  218.   opacity: 0.5;
  219. }
  220.  
  221. xul|listbox[disabled="true"] xul|listitem:hover {
  222.   background-color: transparent;
  223. }
  224.  
  225. *|button.primary {
  226.   background-color: var(--in-content-item-selected-border-highlight-focus-text-selected-header-button-background);
  227.   border-color: transparent;
  228.   color: var(--in-content-selected-box-background-text);
  229. }
  230.  
  231. html|button.primary:enabled:hover,
  232. xul|button.primary:not([disabled="true"]):hover {
  233.   background-color: var(--in-content-primary-button-background-hover);
  234. }
  235.  
  236. html|button.primary:enabled:hover:active,
  237. xul|button.primary:not([disabled="true"]):hover:active {
  238.   background-color: var(--in-content-link-color-button-background-active);
  239. }
  240.  
  241. xul|colorpicker[type="button"] {
  242.   padding: 6px;
  243.   width: 50px;
  244. }
  245.  
  246. xul|button > xul|*.button-box,
  247. xul|menulist > xul|*.menulist-label-box {
  248.   padding-right: 10px !important;
  249.   padding-left: 10px !important;
  250. }
  251.  
  252. xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] {
  253.   margin-inline-end: 5px;
  254. }
  255.  
  256. xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
  257.   -moz-appearance: none;
  258.   margin: 1px 0;
  259.   margin-inline-start: 10px;
  260.   padding: 0;
  261.   width: 10px;
  262.   height: 16px;
  263.   border: none;
  264.   background-color: transparent;
  265.   list-style-image: url("chrome://global/skin/in-content/dropdown.svg");
  266.   -moz-context-properties: fill;
  267.   fill: -moz-DialogText;
  268. }
  269.  
  270. xul|*.help-button {
  271.   min-width: 16px;
  272.   margin-inline-end: 0;
  273.   border-width: 0;
  274.   background-image: none;
  275.   box-shadow: none;
  276.   list-style-image: url("chrome://global/skin/in-content/help-glyph.svg");
  277.   -moz-context-properties: fill, stroke, stroke-opacity;
  278.   fill: #999;
  279.   stroke: #999;
  280.   stroke-opacity: 0;
  281. }
  282.  
  283. xul|*.help-button:not([disabled="true"]):hover {
  284.   background-image: none;
  285.   /* Override default button background */
  286.   background-color: transparent;
  287.   fill: white;
  288.   stroke: #808080;
  289.   stroke-opacity: 1;
  290. }
  291.  
  292. xul|*.help-button:not([disabled="true"]):hover:active {
  293.   background-image: none;
  294.   /* Override default button background */
  295.   background-color: transparent;
  296.   stroke: #666;
  297. }
  298.  
  299. xul|*.close-icon > xul|*.button-box,
  300. xul|*.help-button > xul|*.button-box {
  301.   padding-top: 0;
  302.   padding-bottom: 0;
  303.   padding-right: 0 !important;
  304.   padding-left: 0 !important;
  305. }
  306.  
  307. xul|*.help-button > xul|*.button-box > xul|*.button-icon {
  308.   width: 16px;
  309.   height: 16px;
  310. }
  311.  
  312. xul|*.help-button > xul|*.button-box > xul|*.button-text {
  313.   display: none;
  314. }
  315.  
  316. html|*.help-button {
  317.   width: 16px;
  318.   height: 16px;
  319.   border: 0;
  320.   padding: 0;
  321.   display: inline-block;
  322.   background-image: url("chrome://global/skin/in-content/help-glyph.svg");
  323.   -moz-context-properties: fill, stroke, stroke-opacity;
  324.   fill: #999;
  325.   stroke: #999;
  326.   stroke-opacity: 0;
  327.   background-repeat: no-repeat;
  328.   background-position: center center;
  329.   background-size: contain;
  330. }
  331.  
  332. html|*.help-button:hover {
  333.   fill: white;
  334.   stroke: #808080;
  335.   stroke-opacity: 1;
  336.   background-color: var(--in-content-category-background-hover);
  337. }
  338.  
  339. html|*.help-button:hover:active {
  340.   stroke: #666;
  341.   background-color: var(--in-content-category-background-active-selected-hover);
  342. }
  343.  
  344. html|*.numberbox-input::-moz-number-spin-box {
  345.   margin-inline-end: 1px;
  346. }
  347.  
  348. html|*.numberbox-input::-moz-number-spin-up,
  349. html|*.numberbox-input::-moz-number-spin-down {
  350.   padding: 5px 8px;
  351.   margin: 0;
  352.   min-height: initial;
  353.   background-position: center;
  354. }
  355.  
  356. html|*.numberbox-input::-moz-number-spin-up {
  357.   border-radius: 1px 1px 0 0;
  358.   background-image: url("chrome://global/skin/arrow/arrow-up.gif");
  359. }
  360.  
  361. html|*.numberbox-input::-moz-number-spin-down  {
  362.   border-radius: 0 0 1px 1px;
  363.   background-image: url("chrome://global/skin/arrow/arrow-dn.gif");
  364. }
  365.  
  366. xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
  367.   -moz-appearance: none;
  368.   margin-inline-end: 4px;
  369.   padding: 0;
  370.   border: none;
  371.   background-color: transparent;
  372.   list-style-image: url("chrome://global/skin/in-content/dropdown.svg");
  373.   -moz-context-properties: fill;
  374.   fill: -moz-DialogText;
  375. }
  376.  
  377. xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker > xul|*.dropmarker-icon {
  378.   width: 18px;
  379.   height: 18px;
  380. }
  381.  
  382. xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker {
  383.   fill: GrayText;
  384. }
  385.  
  386. xul|menulist > xul|menupopup,
  387. xul|button[type="menu"] > xul|menupopup {
  388.   -moz-appearance: none;
  389.   border: 1px solid var(--in-content-box-border-color);
  390.   border-radius: 2px;
  391.   background-color: var(--in-content-selected-box-background-text);
  392. }
  393.  
  394. xul|menulist > xul|menupopup xul|menu,
  395. xul|menulist > xul|menupopup xul|menuitem,
  396. xul|button[type="menu"] > xul|menupopup xul|menu,
  397. xul|button[type="menu"] > xul|menupopup xul|menuitem {
  398.   -moz-appearance: none;
  399.   font-size: 1em;
  400.   color: var(--in-content-page-text-category-text-active-color);
  401.   padding-top: 0.2em;
  402.   padding-bottom: 0.2em;
  403.   padding-inline-start: 10px;
  404.   padding-inline-end: 30px;
  405. }
  406.  
  407. xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
  408. xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"],
  409. xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
  410. xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] {
  411.   color: var(--in-content-page-text-category-text-active-color);
  412.   background-color: var(--in-content-item-hover);
  413. }
  414.  
  415. xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
  416. xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"],
  417. xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
  418. xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
  419.   color: var(--in-content-selected-box-background-text);
  420.   background-color: var(--in-content-item-selected-border-highlight-focus-text-selected-header-button-background);
  421. }
  422.  
  423. xul|menulist > xul|menupopup > xul|menu[disabled="true"],
  424. xul|menulist > xul|menupopup > xul|menuitem[disabled="true"],
  425. xul|button[type="menu"] > xul|menupopup > xul|menu[disabled="true"],
  426. xul|button[type="menu"] > xul|menupopup > xul|menuitem[disabled="true"] {
  427.   color: #999;
  428.   /* override the [_moz-menuactive="true"] background color from
  429.      global/menu.css */
  430.   background-color: transparent;
  431. }
  432.  
  433. xul|menulist > xul|menupopup xul|menuseparator,
  434. xul|button[type="menu"] > xul|menupopup xul|menuseparator {
  435.   -moz-appearance: none;
  436.   margin: 0;
  437.   padding: 0;
  438.   border-top: 1px solid var(--in-content-box-border-color);
  439.   border-bottom: none;
  440. }
  441.  
  442. /* textboxes */
  443.  
  444. html|input[type="email"],
  445. html|input[type="tel"],
  446. html|input[type="text"],
  447. html|textarea,
  448. xul|textbox {
  449.   -moz-appearance: none;
  450.   color: var(--in-content-page-text-category-text-active-color);
  451.   border: 1px solid var(--in-content-box-border-color);
  452.   border-radius: 2px;
  453.   background-color: var(--in-content-selected-box-background-text);
  454. }
  455.  
  456. xul|textbox {
  457.   min-height: 30px;
  458.   padding-right: 10px;
  459.   padding-left: 10px;
  460. }
  461.  
  462. xul|textbox[type="number"] {
  463.   padding-inline-end: 0;
  464. }
  465.  
  466. html|*.numberbox-input::-moz-number-text {
  467.   margin-inline-end: 10px;
  468. }
  469.  
  470. /* Create a separate rule to unset these styles on .tree-input instead of
  471.    using :not(.tree-input) so the selector specifity doesn't change. */
  472. xul|textbox.tree-input {
  473.   min-height: unset;
  474.   padding-right: unset;
  475.   padding-left: unset;
  476. }
  477.  
  478. html|input[type="email"],
  479. html|input[type="tel"],
  480. html|input[type="text"],
  481. html|textarea {
  482.   font-family: inherit;
  483.   font-size: inherit;
  484.   padding: 5px 10px;
  485. }
  486.  
  487. html|input[type="email"]:focus,
  488. html|input[type="tel"]:focus,
  489. html|input[type="text"]:focus,
  490. html|textarea:focus,
  491. xul|textbox[focused] {
  492.   border-color: var(--in-content-item-selected-border-highlight-focus-text-selected-header-button-background);
  493. }
  494.  
  495. html|input[type="email"]:disabled,
  496. html|input[type="tel"]:disabled,
  497. html|input[type="text"]:disabled,
  498. html|textarea:disabled,
  499. xul|textbox[disabled="true"] {
  500.   opacity: 0.5;
  501. }
  502.  
  503. /* Links */
  504.  
  505. html|a,
  506. .text-link {
  507.   color: var(--in-content-link-color-visited);
  508.   text-decoration: none;
  509. }
  510.  
  511. html|a:hover,
  512. .text-link:hover {
  513.   color: var(--in-content-category-text-selected-active-link-color-hover);
  514.   text-decoration: underline;
  515. }
  516.  
  517. html|a:visited {
  518.   color: var(--in-content-link-color-visited);
  519. }
  520.  
  521. html|a:hover:active,
  522. .text-link:hover:active {
  523.   color: var(--in-content-link-color-button-background-active);
  524.   text-decoration: none;
  525. }
  526.  
  527. /* Checkboxes and radio buttons */
  528.  
  529. xul|checkbox {
  530.   -moz-appearance: none;
  531.   height: 30px;
  532.   margin: 2px 0;
  533. }
  534.  
  535. xul|*.checkbox-check,
  536. html|input[type="checkbox"] {
  537.   -moz-appearance: none;
  538.   width: 23px;
  539.   height: 23px;
  540.   border: 1px solid var(--in-content-box-border-color);
  541.   border-radius: 2px;
  542.   margin: 0;
  543.   margin-inline-end: 10px;
  544.   background-color: #f1f1f1;
  545.   background-image: linear-gradient(#fff, rgba(255,255,255,0.8));
  546.   background-position: center center;
  547.   background-repeat: no-repeat;
  548.   box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
  549. }
  550.  
  551. xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check,
  552. html|input[type="checkbox"]:not(:disabled):hover {
  553.   border-color: var(--in-content-item-selected-border-highlight-focus-text-selected-header-button-background);
  554. }
  555.  
  556. xul|*.checkbox-check[checked] {
  557.   list-style-image: url("chrome://global/skin/in-content/check.svg");
  558.   -moz-context-properties: fill, stroke;
  559.   fill: #2292d0;
  560.   stroke: none;
  561. }
  562.  
  563. html|input[type="checkbox"]:checked {
  564.   background-image: url("chrome://global/skin/in-content/check.svg"), linear-gradient(#fff, rgba(255,255,255,0.8));
  565.   -moz-context-properties: fill, stroke;
  566.   fill: #2292d0;
  567.   stroke: none;
  568. }
  569.  
  570. xul|checkbox[disabled="true"] > xul|*.checkbox-check,
  571. html|input[type="checkbox"]:disabled {
  572.   opacity: 0.5;
  573. }
  574.  
  575. xul|richlistitem > xul|*.checkbox-check {
  576.   margin: 3px 6px;
  577. }
  578.  
  579. html|*.toggle-container-with-text {
  580.   display: flex;
  581.   align-items: center;
  582. }
  583.  
  584. xul|radio {
  585.   margin-inline-start: 0;
  586.   -moz-appearance: none;
  587. }
  588.  
  589. xul|*.radio-check {
  590.   -moz-appearance: none;
  591.   width: 20px;
  592.   height: 20px;
  593.   border: 1px solid var(--in-content-box-border-color);
  594.   border-radius: 50%;
  595.   margin: 0;
  596.   margin-inline-end: 10px;
  597.   background-color: #f1f1f1;
  598.   background-image: linear-gradient(#fff, rgba(255,255,255,0.80));
  599.   box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
  600. }
  601.  
  602. xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
  603.   border-color: var(--in-content-item-selected-border-highlight-focus-text-selected-header-button-background);
  604. }
  605.  
  606. xul|*.radio-check[selected] {
  607.   list-style-image: url("chrome://global/skin/in-content/radio.svg");
  608.   -moz-context-properties: fill;
  609.   fill: #2292d0;
  610. }
  611.  
  612. xul|radio[disabled="true"] > xul|*.radio-check {
  613.   opacity: 0.5;
  614. }
  615.  
  616. xul|*.radio-label-box {
  617.   margin-inline-start: -1px; /* negative margin for the transparent border */
  618.   margin-inline-end: 8px;
  619.   padding-inline-start: 0;
  620. }
  621.  
  622. /* Category List */
  623.  
  624. *|*#categories {
  625.   -moz-appearance: none;
  626.   background-color: initial; /* override the background-color set on all richlistboxes in common.inc.css */
  627.   padding-top: 70px;
  628.   margin: 0;
  629.   border-width: 0;
  630.   width: 240px;
  631. }
  632.  
  633. *|*.category {
  634.   min-height: 48px;
  635.   -moz-appearance: none;
  636.   color: var(--in-content-category-text);
  637.   margin-inline-start: 34px;
  638.   padding-inline-end: 10px;
  639.   padding-inline-start: 10px;
  640.   transition: background-color 150ms;
  641. }
  642.  
  643. *|*.category:hover {
  644.   background-color: var(--in-content-category-background-hover);
  645.   border-radius: 2px;
  646. }
  647.  
  648. *|*.category:hover:active {
  649.   background-color: var(--in-content-category-background-active-selected-hover);
  650. }
  651.  
  652. *|*.category[selected],
  653. *|*.category.selected {
  654.   color: var(--in-content-item-selected-border-highlight-focus-text-selected-header-button-background);
  655.   background: none;
  656. }
  657.  
  658. *|*.category[selected]:hover,
  659. *|*.category.selected:hover {
  660.   background-color: var(--in-content-category-background-active-selected-hover);
  661. }
  662.  
  663. *|*.category[selected]:hover:active,
  664. *|*.category.selected:hover:active {
  665.   color: var(--in-content-category-text-selected-active-link-color-hover);
  666.   background-color: var(--in-content-category-background-selected-active);
  667. }
  668.  
  669. *|*#categories[keyboard-navigation="true"]:-moz-focusring > *|*.category[current] {
  670.   outline: var(--in-content-category-outline-focus);
  671. }
  672.  
  673. *|*.category-name {
  674.   font-size: 1.07em;
  675.   line-height: 1.4em;
  676.   padding-bottom: 2px;
  677.   padding-inline-start: 9px;
  678.   margin: 0;
  679.   -moz-user-select: none;
  680. }
  681.  
  682. *|*.category-icon {
  683.   width: 24px;
  684.   height: 24px;
  685.   -moz-context-properties: fill, fill-opacity;
  686.   fill: currentColor;
  687. }
  688.  
  689. *|*.category[selected] > *|*.category-icon,
  690. *|*.category.selected > *|*.category-icon {
  691.   fill-opacity: 1;
  692. }
  693.  
  694. @media (max-width: 830px) {
  695.   #categories {
  696.     width: 118px;
  697.   }
  698.  
  699.   .category-icon + .category-name {
  700.     display: none;
  701.   }
  702.  
  703.   .category {
  704.     padding-inline-start: 13px; /* make category icons align center */
  705.     margin-inline-end: 33px;
  706.   }
  707.  
  708.   .main-content {
  709.     padding-left: 0;
  710.     padding-right: 0;
  711.   }
  712.  
  713.   .pane-container {
  714.     margin-inline-end: 10px;
  715.   }
  716. }
  717.  
  718. /* header */
  719.  
  720. *|*.header {
  721.   margin-inline-end: 4px; /* add the 4px end-margin of other elements */
  722.   margin-bottom: 15px;
  723.   padding-bottom: 15px;
  724.   -moz-box-align: baseline;
  725. }
  726.  
  727. *|*.header-name {
  728.   font-size: 1.46em;
  729.   font-weight: 300;
  730.   line-height: 1.3em;
  731.   margin: 0;
  732.   -moz-user-select: none;
  733. }
  734.  
  735. /* File fields */
  736.  
  737. xul|filefield {
  738.   -moz-appearance: none;
  739.   background-color: transparent;
  740.   border: none;
  741.   padding: 0;
  742. }
  743.  
  744. xul|*.fileFieldContentBox {
  745.   background-color: transparent;
  746. }
  747.  
  748. xul|*.fileFieldIcon {
  749.   margin-inline-start: 10px;
  750.   margin-inline-end: 0;
  751. }
  752.  
  753. xul|*.fileFieldLabel {
  754.   margin-inline-start: -26px;
  755.   padding-inline-start: 36px;
  756. }
  757.  
  758. xul|*.fileFieldLabel:-moz-locale-dir(rtl),
  759. xul|filefield + xul|button:-moz-locale-dir(ltr) {
  760.   border-top-left-radius: 0;
  761.   border-bottom-left-radius: 0;
  762. }
  763.  
  764. xul|*.fileFieldLabel:-moz-locale-dir(ltr),
  765. xul|filefield + xul|button:-moz-locale-dir(rtl) {
  766.   border-top-right-radius: 0;
  767.   border-bottom-right-radius: 0;
  768. }
  769.  
  770. xul|filefield + xul|button {
  771.   border-inline-start: none;
  772. }
  773.  
  774. /* List boxes */
  775.  
  776. html|select[size][multiple],
  777. xul|richlistbox,
  778. xul|listbox {
  779.   -moz-appearance: none;
  780.   margin-inline-start: 0;
  781.   background-color: var(--in-content-selected-box-background-text);
  782.   border: 1px solid var(--in-content-box-border-color);
  783.   border-radius: 2px;
  784.   color: var(--in-content-page-text-category-text-active-color);
  785. }
  786.  
  787. html|select[size][multiple] > html|option,
  788. xul|treechildren::-moz-tree-row,
  789. xul|listbox xul|listitem {
  790.   padding: 0.3em;
  791.   margin: 0;
  792.   border: none;
  793.   border-radius: 0;
  794.   background-image: none;
  795. }
  796.  
  797. html|select[size][multiple] > html|option:hover,
  798. xul|treechildren::-moz-tree-row(hover),
  799. xul|listbox xul|listitem:hover {
  800.   background-color: var(--in-content-item-hover);
  801. }
  802.  
  803. xul|treechildren::-moz-tree-row(selected),
  804. xul|listbox xul|listitem[selected="true"] {
  805.   background-color: var(--in-content-item-selected-border-highlight-focus-text-selected-header-button-background);
  806.   color: var(--in-content-selected-box-background-text);
  807. }
  808.  
  809. /* Trees */
  810.  
  811. xul|tree {
  812.   -moz-appearance: none;
  813.   font-size: 1em;
  814.   border: 1px solid var(--in-content-box-border-color);
  815.   border-radius: 2px;
  816.   background-color: var(--in-content-selected-box-background-text);
  817.   margin: 0;
  818. }
  819.  
  820. xul|tree:-moz-focusring,
  821. xul|richlistbox:-moz-focusring {
  822.   border: 1px dotted var(--in-content-item-selected-border-highlight-focus-text-selected-header-button-background);
  823. }
  824.  
  825. xul|listheader,
  826. xul|treecols {
  827.   -moz-appearance: none;
  828.   border: none;
  829.   border-bottom: 1px solid var(--in-content-box-border-color);
  830.   padding: 0;
  831. }
  832.  
  833. xul|treecol:not([hideheader="true"]),
  834. xul|treecolpicker {
  835.   -moz-appearance: none;
  836.   border: none;
  837.   background-color: var(--in-content-box-background-hover);
  838.   color: #808080;
  839.   padding: 5px 10px;
  840. }
  841.  
  842. xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover,
  843. xul|treecolpicker:hover {
  844.   background-color: var(--in-content-box-background-active);
  845.   color: var(--in-content-page-text-category-text-active-color);
  846. }
  847.  
  848. xul|treecol:not([hideheader="true"]):not(:first-child),
  849. xul|treecolpicker {
  850.   border-inline-start-width: 1px;
  851.   border-inline-start-style: solid;
  852.   border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
  853. }
  854.  
  855. xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
  856.   list-style-image: url("chrome://global/skin/in-content/dropdown.svg");
  857.   -moz-context-properties: fill;
  858.   fill: -moz-DialogText;
  859.   width: 18px;
  860.   height: 18px;
  861. }
  862.  
  863. xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] {
  864.   transform: scaleY(-1);
  865. }
  866.  
  867. /* This is the only way to increase the height of a tree row unfortunately */
  868. xul|treechildren::-moz-tree-row {
  869.   min-height: 2em;
  870. }
  871.  
  872. /* Color needs to be set on tree cell in order to be applied */
  873. xul|treechildren::-moz-tree-cell-text,
  874. xul|treechildren::-moz-tree-image {
  875.   color: var(--in-content-page-text-category-text-active-color);
  876. }
  877.  
  878. xul|treechildren::-moz-tree-cell-text(selected),
  879. xul|treechildren::-moz-tree-image(selected) {
  880.   color: var(--in-content-selected-box-background-text);
  881. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement