elbaitemoon

Elbaite theme for Pale Moon
Log | Files | Refs

alert-common.css (2790B)

      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 /* ===== alert.css =====================================================
      6   == Shared styles specific to the alerts dialog.
      7   ======================================================================= */
      8 
      9 @import url("chrome://global/skin/");
     10 
     11 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
     12 
     13 #alertBox[animate] {
     14   animation-timing-function: cubic-bezier(.12,1.23,.48,1.09);
     15 }
     16 
     17 #alertBox[animate][clicked] {
     18   animation-duration: .6s;
     19   animation-name: alert-clicked-animation;
     20 }
     21 
     22 /* This is used if the close button is clicked
     23    before the animation has finished. */
     24 #alertBox[animate][closing] {
     25   animation-duration: .6s;
     26   animation-name: alert-closing-animation;
     27 }
     28 
     29 @keyframes alert-animation {
     30   from {
     31     opacity: 0;
     32   }
     33   5% {
     34     opacity: 1;
     35   }
     36   95% {
     37     opacity: 1;
     38   }
     39   to {
     40     opacity: 0;
     41   }
     42 }
     43 
     44 @keyframes alert-clicked-animation {
     45   to {
     46     opacity: 0;
     47   }
     48 }
     49 
     50 @keyframes alert-closing-animation {
     51   to {
     52     opacity: 0;
     53   }
     54 }
     55 
     56 #alertIcon {
     57   margin-top: 6px;
     58   margin-inline-start: 8px;
     59   margin-inline-end: 0;
     60   margin-bottom: 0;
     61   width: 16px;
     62   min-height: 16px;
     63   max-height: 16px;
     64 }
     65 
     66 #alertImage {
     67   width: 80px;
     68   height: 80px;
     69   max-width: 80px;
     70   max-height: 80px;
     71   object-fit: scale-down;
     72   margin: 0 7px 7px;
     73 }
     74 
     75 .alertTextBox {
     76   padding-top: 4px;
     77   /* The text box width is increased to make up for the lack of image when one
     78      is not provided. 349px is the text box width when a picture is present,
     79      255px, plus the width of the image, 80px, and the margins, 7px each. */
     80   width: 349px;
     81 }
     82 
     83 #alertBox[hasImage] > box > #alertTextBox {
     84   width: 255px;
     85 }
     86 
     87 #alertBox:not([hasImage]) > box > #alertTextBox {
     88   padding-inline-start: 8px;
     89 }
     90 
     91 #alertTextLabel {
     92   padding-inline-end: 8px;
     93 }
     94 
     95 .alertTitle {
     96   -moz-box-flex: 1;
     97   font-weight: bold;
     98   padding: 6px 8px 0;
     99   width: 255px;
    100 }
    101 
    102 #alertFooter {
    103   -moz-box-align: start;
    104 }
    105 
    106 #alertBox:not([hasOrigin]) > box > #alertTextBox,
    107 #alertFooter {
    108   padding-bottom: 5px;
    109 }
    110 
    111 #alertSourceLabel {
    112   -moz-box-flex: 1;
    113   font-size: 83.334%;
    114   color: rgb(200,200,200);
    115 }
    116 
    117 #alertSettings {
    118   -moz-appearance: none;
    119   background-color: transparent;
    120   border-width: 0;
    121   min-width: 0;
    122   list-style-image: url("chrome://browser/skin/toolbar/options.svg");
    123   margin-inline-end: 0;
    124   margin-bottom: 0;
    125 }
    126 
    127 #alertSettings > .button-box {
    128   padding: 0;
    129 }
    130 
    131 #alertSettings[focusedViaMouse]:-moz-focusring > .button-box {
    132   border-color: transparent;
    133 }
    134 
    135 #alertSettings > .button-box > .button-menu-dropmarker,
    136 #alertSettings > .button-box > .box-inherit > .button-text {
    137   display: none;
    138 }