browser/components/colorways/colorwaycloset.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 :root {
   6   height: 100%;
   7 }
   8
   9 body {
  10   height: 100%;
  11   display: grid;
  12   grid-template-columns: 50% 50%;
  13   grid-template-rows: 75px auto 60px;
  14   grid-template-areas:
  15     "title title"
  16     "figure main"
  17     "footer footer";
  18 }
  19
  20 body > header {
  21   grid-area: title;
  22   margin: 2em 2em 0;
  23 }
  24
  25 figure {
  26   grid-area: figure;
  27   margin: 0;
  28   display: flex;
  29   align-items: center;
  30   justify-content: center;
  31 }
  32
  33 figure > img {
  34   max-width: 288px;
  35   max-height: 288px;
  36 }
  37
  38 #collection-title {
  39   display: inline-block;
  40   margin: 0;
  41   padding: 0;
  42   font-size: 1.8em;
  43   font-weight: bold;
  44 }
  45
  46 #collection-expiry-date {
  47   display: inline-block;
  48   background: linear-gradient(to right, purple, pink, orange);
  49   background-origin: border-box;
  50   border-radius: 1.5em;
  51   padding: 1px;
  52   margin: 0.2em 1em;
  53   vertical-align: bottom;
  54 }
  55
  56 #collection-expiry-date > span {
  57   display: inline-block;
  58   color: var(--in-content-page-color);
  59   background: var(--in-content-page-background);
  60   border-radius: 1.5em;
  61   padding: .2em 1em;
  62 }
  63
  64 #use-fx-home-controls:not([hidden]) {
  65   grid-area: footer;
  66   display: flex;
  67   align-items: flex-end;
  68   justify-content: flex-end;
  69   padding: 2em;
  70 }
  71
  72 #use-fx-home-controls:not(.success) > .success-prompt,
  73 #use-fx-home-controls.success > .reset-prompt {
  74   display: none;
  75 }
  76
  77 #use-fx-home-controls > .success-prompt::before {
  78   display: inline-block;
  79   content: "";
  80   background: var(--green-50) url('chrome://global/skin/icons/check.svg') center center no-repeat;
  81   -moz-context-properties: fill;
  82   fill: white;
  83   width: 22px;
  84   height: 22px;
  85   border-radius: 15px;
  86   vertical-align: middle;
  87   margin-inline-end: 0.5em;
  88 }
  89
  90 #colorway-selector {
  91   border: none;
  92   display: flex;
  93   flex-direction: row;
  94   padding: 0;
  95 }
  96
  97 #colorway-selector > input[type="radio"],
  98 #colorway-selector > input[type="radio"]:checked {
  99   box-sizing: content-box;
 100   padding: 2px;
 101   border: 2px solid transparent;
 102   height: 24px;
 103   width: 24px;
 104   --colorway-icon: none;
 105   appearance: none;
 106   background-color: unset;
 107   background-image: var(--colorway-icon);
 108   background-origin: content-box;
 109   background-position: center;
 110   background-repeat: no-repeat;
 111   /* The icon may not be a perfect circle, so we render it bigger and clipped using background-clip and border-radius: */
 112   background-clip: content-box;
 113   background-size: 105%;
 114   border-radius: 50%;
 115 }
 116
 117 #colorway-selector > input[type="radio"]:enabled:checked,
 118 #colorway-selector > input[type="radio"]:enabled:checked:hover {
 119   border-color: var(--in-content-accent-color);
 120 }
 121
 122 /* override common-shared.css */
 123 #colorway-selector > input[type="radio"]:is(:enabled:hover, :enabled:hover:active, :checked, :enabled:checked:hover, :enabled:checked:hover:active) {
 124   background-color: unset;
 125 }
 126
 127 #colorway-customization-panel {
 128   grid-area: main;
 129   padding-inline: 24px;
 130 }
 131
 132 #colorway-name {
 133   font-size: 2em;
 134   margin-block: 0 37px;
 135   margin-top: 50px;
 136 }
 137
 138 #colorway-description {
 139   font-size: 1.1em;
 140   margin-block: 0 24px;
 141 }
 142
 143 /* Intensity Picker */
 144 #colorway-intensities {
 145   border: unset;
 146   margin-inline: 0;
 147   padding-inline: 0;
 148 }
 149
 150 #colorway-intensities > legend {
 151   padding-inline-start: 0;
 152 }
 153
 154 #colorway-intensity-radios {
 155   display: flex;
 156   justify-content: space-between;
 157   gap: 16px;
 158 }
 159
 160 #colorway-intensity-radios > label {
 161   background-color: var(--in-content-box-background-color);
 162   border-radius: 4px;
 163   border: 1px solid var(--in-content-box-border-color);
 164   color: var(--in-content-text-color);
 165   display: flex;
 166   overflow: clip;
 167   padding: 4px 8px;
 168   width: 100%;
 169 }
 170
 171 #set-colorway {
 172   margin-inline-start: 0;
 173 }