github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/dimmer.css (about)

     1  /*!
     2   * # Semantic UI x.x - Dimmer
     3   * http://github.com/semantic-org/semantic-ui/
     4   *
     5   *
     6   * Copyright 2014 Contributors
     7   * Released under the MIT license
     8   * http://opensource.org/licenses/MIT
     9   *
    10   */
    11  
    12  
    13  /*******************************
    14              Dimmer
    15  *******************************/
    16  
    17  .dimmable {
    18    position: relative;
    19  }
    20  .ui.dimmer {
    21    display: none;
    22    position: absolute;
    23    top: 0em !important;
    24    left: 0em !important;
    25    width: 100%;
    26    height: 100%;
    27    text-align: center;
    28    vertical-align: middle;
    29    background: rgba(0, 0, 0, 0.85);
    30    opacity: 0;
    31    line-height: 1;
    32    -webkit-animation-fill-mode: both;
    33            animation-fill-mode: both;
    34    -webkit-animation-duration: 0.5s;
    35            animation-duration: 0.5s;
    36    -webkit-transition: background-color 0.5s linear;
    37            transition: background-color 0.5s linear;
    38    -webkit-user-select: none;
    39       -moz-user-select: none;
    40        -ms-user-select: none;
    41            user-select: none;
    42    will-change: opacity;
    43    z-index: 1000;
    44  }
    45  
    46  /* Dimmer Content */
    47  .ui.dimmer > .content {
    48    width: 100%;
    49    height: 100%;
    50    display: table;
    51    -webkit-user-select: text;
    52       -moz-user-select: text;
    53        -ms-user-select: text;
    54            user-select: text;
    55  }
    56  .ui.dimmer > .content > div {
    57    display: table-cell;
    58    vertical-align: middle;
    59    color: #ffffff;
    60  }
    61  
    62  /* Loose Coupling */
    63  .ui.segment > .ui.dimmer {
    64    border-radius: inherit !important;
    65  }
    66  
    67  
    68  /*******************************
    69              States
    70  *******************************/
    71  
    72  .animating.dimmable:not(body),
    73  .dimmed.dimmable:not(body) {
    74    overflow: hidden;
    75  }
    76  .dimmed.dimmable > .ui.animating.dimmer,
    77  .dimmed.dimmable > .ui.visible.dimmer,
    78  .ui.active.dimmer {
    79    display: block;
    80    opacity: 1;
    81  }
    82  .ui.disabled.dimmer {
    83    width: 0 !important;
    84    height: 0 !important;
    85  }
    86  
    87  
    88  /*******************************
    89             Variations
    90  *******************************/
    91  
    92  
    93  /*--------------
    94        Page
    95  ---------------*/
    96  
    97  .ui.page.dimmer {
    98    position: fixed;
    99    -webkit-transform-style: '';
   100            transform-style: '';
   101    -webkit-perspective: 2000px;
   102            perspective: 2000px;
   103    -webkit-transform-origin: center center;
   104        -ms-transform-origin: center center;
   105            transform-origin: center center;
   106  }
   107  body.animating.in.dimmable,
   108  body.dimmed.dimmable {
   109    overflow: hidden;
   110  }
   111  body.dimmable > .dimmer {
   112    position: fixed;
   113  }
   114  /*
   115  body.dimmable > :not(.dimmer) {
   116    filter: @elementStartFilter;
   117  }
   118  body.dimmed.dimmable > :not(.dimmer) {
   119    filter: @elementEndFilter;
   120    transition: @elementTransition;
   121  }
   122  */
   123  
   124  /*--------------
   125      Aligned
   126  ---------------*/
   127  
   128  .ui.dimmer > .top.aligned.content > * {
   129    vertical-align: top;
   130  }
   131  .ui.dimmer > .bottom.aligned.content > * {
   132    vertical-align: bottom;
   133  }
   134  
   135  /*--------------
   136      Inverted
   137  ---------------*/
   138  
   139  .ui.inverted.dimmer {
   140    background: rgba(255, 255, 255, 0.85);
   141  }
   142  .ui.inverted.dimmer > .content > * {
   143    color: #ffffff;
   144  }
   145  
   146  /*--------------
   147       Simple
   148  ---------------*/
   149  
   150  
   151  /* Displays without javascript */
   152  .ui.simple.dimmer {
   153    display: block;
   154    overflow: hidden;
   155    opacity: 1;
   156    width: 0%;
   157    height: 0%;
   158    z-index: -100;
   159    background-color: rgba(0, 0, 0, 0);
   160  }
   161  .dimmed.dimmable > .ui.simple.dimmer {
   162    overflow: visible;
   163    opacity: 1;
   164    width: 100%;
   165    height: 100%;
   166    background: rgba(0, 0, 0, 0.85);
   167    z-index: 1;
   168  }
   169  .ui.simple.inverted.dimmer {
   170    background: rgba(255, 255, 255, 0);
   171  }
   172  .dimmed.dimmable > .ui.simple.inverted.dimmer {
   173    background: rgba(255, 255, 255, 0.85);
   174  }
   175  
   176  
   177  /*******************************
   178           Theme Overrides
   179  *******************************/
   180  
   181  
   182  
   183  /*******************************
   184          User Overrides
   185  *******************************/
   186