browser/fxr/content/fxrui.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 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
   6
   7 html, body {
   8   height: 100%;
   9 }
  10
  11
  12 body {
  13   display: flex;
  14   flex-direction: column;
  15 }
  16
  17 .navbar_container {
  18   width: 100%;
  19
  20   margin-block: 15px;
  21
  22   display: flex;
  23   flex-direction: row;
  24 }
  25
  26 /* Sizing and positioning properties for all icons
  27    Color is determined by enabled/disabled classes below
  28  */
  29 .icon_container {
  30   width: 44px;
  31   height: 44px;
  32   margin: 5px;
  33
  34   border-radius: 22px;
  35   border-width: 2px;
  36   border-style: solid;
  37
  38   background-size: 22px;
  39   background-repeat: no-repeat;
  40   background-position: center;
  41   background-color: inherit;
  42
  43   -moz-context-properties: fill;
  44
  45   transition-property: transform;
  46   transition-duration: 200ms;
  47 }
  48
  49 .icon_container:hover {
  50   transform: scale(1.25);
  51 }
  52
  53 .icon_container:disabled {
  54   transform: unset;
  55 }
  56
  57 .icon_disabled_hide:disabled {
  58   display:none;
  59 }
  60 .icon_backward {
  61   background-image: url("assets/icon-backward.svg");
  62   margin-inline-start: 10px;
  63 }
  64 .icon_forward {
  65   background-image: url("assets/icon-forward.svg");
  66 }
  67 .icon_refresh {
  68   background-image: url("assets/icon-refresh.svg");
  69 }
  70 .icon_stop {
  71   background-image: url("assets/icon-stop-reload.svg");
  72 }
  73 .icon_home {
  74   background-image: url("assets/icon-home.svg");
  75 }
  76 .icon_prefs {
  77   background-image: url("assets/icon-settings.svg");
  78   margin-inline-end: 10px;
  79 }
  80
  81 .urlbar_container {
  82   height: 40px;
  83   flex-grow: 1;
  84
  85   padding: 0;
  86   margin: 5px;
  87
  88   border-radius: 22px;
  89   border: 2px solid transparent;
  90
  91   vertical-align: top;
  92
  93   display: flex;
  94   flex-direction: row;
  95 }
  96
  97 .urlbar_secure_icon {
  98   -moz-context-properties: fill;
  99
 100   height: 32px;
 101   padding: 2px;
 102
 103   visibility: hidden;
 104
 105   display: inline-block;
 106 }
 107
 108 .urlbar_input {
 109   background-color: transparent;
 110
 111   flex-grow: 1;
 112
 113   border: none;
 114
 115   font-size: 18px;
 116   font-family: 'Open Sans', sans-serif;
 117
 118   mask-image: linear-gradient(to left, transparent, black 8ch);
 119 }
 120
 121 .browser_container {
 122   width: 100%;
 123   flex-grow: 1;
 124 }
 125
 126 .browser_instance {
 127   width: 100%;
 128   height: 100%;
 129 }
 130
 131 /* Hide the navbar when in fullscreen so that <browser> can
 132  * fill the entire viewport
 133  */
 134 :root[inFullScreen] .navbar_container {
 135   display:none;
 136 }
 137
 138 .browser_settings {
 139   width: 600px;
 140   height: 400px;
 141   border-radius: 20px;
 142 }
 143
 144 .modal_mask:not([hidden]) {
 145   background-color: var(--num13_alpha);
 146 }