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

     1  /*!
     2   * # Semantic UI x.x - Header
     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              Header
    15  *******************************/
    16  
    17  
    18  /* Standard */
    19  .ui.header {
    20    border: none;
    21    margin: -webkit-calc(2rem -  0.165em ) 0em 1rem;
    22    margin: calc(2rem -  0.165em ) 0em 1rem;
    23    padding: 0em 0em;
    24    font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    25    font-weight: bold;
    26    line-height: 1.33em;
    27    text-transform: none;
    28    color: rgba(0, 0, 0, 0.8);
    29  }
    30  .ui.header:first-child {
    31    margin-top: -0.165em;
    32  }
    33  .ui.header:last-child {
    34    margin-bottom: 0em;
    35  }
    36  
    37  /*--------------
    38     Sub Header
    39  ---------------*/
    40  
    41  .ui.header .sub.header {
    42    font-weight: normal;
    43    margin: 0em;
    44    padding: 0em;
    45    font-size: 1.1428rem;
    46    line-height: 1.2em;
    47    color: rgba(0, 0, 0, 0.5);
    48  }
    49  
    50  /*--------------
    51        Icon
    52  ---------------*/
    53  
    54  .ui.header > .icon {
    55    display: table-cell;
    56    opacity: 1;
    57    font-size: 1.5em;
    58    padding-top: 0.165em;
    59    vertical-align: middle;
    60  }
    61  
    62  /* With Text Node */
    63  .ui.header .icon:only-child {
    64    display: inline-block;
    65    padding: 0em;
    66    margin-right: 0.75rem;
    67  }
    68  
    69  /*-------------------
    70          Image
    71  --------------------*/
    72  
    73  .ui.header > .image,
    74  .ui.header > img {
    75    display: inline-block;
    76    margin-top: 0.165em;
    77    width: 2.5em;
    78    height: auto;
    79    vertical-align: middle;
    80  }
    81  .ui.header > .image:only-child,
    82  .ui.header > img:only-child {
    83    margin-right: 0.75rem;
    84  }
    85  
    86  /*--------------
    87       Content
    88  ---------------*/
    89  
    90  .ui.header .content {
    91    display: inline-block;
    92    vertical-align: top;
    93  }
    94  
    95  /* After Image */
    96  .ui.header > img + .content,
    97  .ui.header > .image + .content {
    98    padding-left: 0.75rem;
    99    vertical-align: middle;
   100  }
   101  
   102  /* After Icon */
   103  .ui.header > .icon + .content {
   104    padding-left: 0.75rem;
   105    display: table-cell;
   106    vertical-align: middle;
   107  }
   108  
   109  /*--------------
   110   Loose Coupling
   111  ---------------*/
   112  
   113  .ui.header .ui.label {
   114    font-size: '';
   115    margin: 0em 0em 0em 0.5rem;
   116    vertical-align: middle;
   117  }
   118  
   119  /* Positioning */
   120  .ui.header + p {
   121    margin-top: 0em;
   122  }
   123  
   124  
   125  /*******************************
   126              Types
   127  *******************************/
   128  
   129  
   130  /*--------------
   131       Page
   132  ---------------*/
   133  
   134  h1.ui.header {
   135    font-size: 2rem;
   136  }
   137  h2.ui.header {
   138    font-size: 1.714rem;
   139  }
   140  h3.ui.header {
   141    font-size: 1.28rem;
   142  }
   143  h4.ui.header {
   144    font-size: 1.071rem;
   145  }
   146  h5.ui.header {
   147    font-size: 1rem;
   148  }
   149  
   150  /* Sub Header */
   151  h1.ui.header .sub.header {
   152    font-size: 1.4285rem;
   153  }
   154  h2.ui.header .sub.header {
   155    font-size: 1.1428rem;
   156  }
   157  h3.ui.header .sub.header {
   158    font-size: 1.1428rem;
   159  }
   160  h4.ui.header .sub.header {
   161    font-size: 1rem;
   162  }
   163  h5.ui.header .sub.header {
   164    font-size: 0.9285rem;
   165  }
   166  
   167  /*--------------
   168   Content Heading
   169  ---------------*/
   170  
   171  .ui.huge.header {
   172    min-height: 1em;
   173    font-size: 2em;
   174  }
   175  .ui.large.header {
   176    font-size: 1.714em;
   177  }
   178  .ui.medium.header {
   179    font-size: 1.28em;
   180  }
   181  .ui.small.header {
   182    font-size: 1.071em;
   183  }
   184  .ui.tiny.header {
   185    font-size: 1em;
   186  }
   187  
   188  /* Sub Header */
   189  .ui.huge.header .sub.header {
   190    font-size: 1.4285rem;
   191  }
   192  .ui.large.header .sub.header {
   193    font-size: 1.4285rem;
   194  }
   195  .ui.header .sub.header {
   196    font-size: 1.1428rem;
   197  }
   198  .ui.small.header .sub.header {
   199    font-size: 1rem;
   200  }
   201  .ui.tiny.header .sub.header {
   202    font-size: 0.9285rem;
   203  }
   204  
   205  /*-------------------
   206          Icon
   207  --------------------*/
   208  
   209  .ui.icon.header {
   210    display: inline-block;
   211    text-align: center;
   212    margin: 2rem 0em 1rem;
   213  }
   214  .ui.icon.header:after {
   215    content: '';
   216    display: block;
   217    height: 0px;
   218    clear: both;
   219    visibility: hidden;
   220  }
   221  .ui.icon.header:first-child {
   222    margin-top: 0em;
   223  }
   224  .ui.icon.header .icon {
   225    float: none;
   226    display: block;
   227    width: auto;
   228    height: auto;
   229    padding: 0em;
   230    font-size: 3em;
   231    margin: 0em auto 0.25rem;
   232    opacity: 1;
   233  }
   234  .ui.icon.header .content {
   235    display: block;
   236  }
   237  .ui.icon.header .circular.icon {
   238    font-size: 2em;
   239  }
   240  .ui.icon.header .square.icon {
   241    font-size: 2em;
   242  }
   243  .ui.block.icon.header .icon {
   244    margin-bottom: 0em;
   245  }
   246  .ui.icon.header.aligned {
   247    margin-left: auto;
   248    margin-right: auto;
   249    display: block;
   250  }
   251  
   252  
   253  /*******************************
   254              States
   255  *******************************/
   256  
   257  .ui.disabled.header {
   258    opacity: 0.3;
   259  }
   260  
   261  
   262  /*******************************
   263             Variations
   264  *******************************/
   265  
   266  
   267  /*-------------------
   268         Colors
   269  --------------------*/
   270  
   271  .ui.black.header {
   272    color: #1b1c1d !important;
   273  }
   274  a.ui.black.header:hover {
   275    color: #1b1c1d !important;
   276  }
   277  .ui.blue.header {
   278    color: #006e93 !important;
   279  }
   280  a.ui.blue.header:hover {
   281    color: #0079a2 !important;
   282  }
   283  .ui.green.header {
   284    color: #5bbd72 !important;
   285  }
   286  a.ui.green.header:hover {
   287    color: #66c17b !important;
   288  }
   289  .ui.orange.header {
   290    color: #e07b53 !important;
   291  }
   292  a.ui.orange.header:hover {
   293    color: #e28560 !important;
   294  }
   295  .ui.pink.header {
   296    color: #d9499a !important;
   297  }
   298  a.ui.pink.header:hover {
   299    color: #dc56a1 !important;
   300  }
   301  .ui.purple.header {
   302    color: #564f8a !important;
   303  }
   304  a.ui.purple.header:hover {
   305    color: #5c5594 !important;
   306  }
   307  .ui.red.header {
   308    color: #d95c5c !important;
   309  }
   310  a.ui.red.header:hover {
   311    color: #dc6868 !important;
   312  }
   313  .ui.teal.header {
   314    color: #00b5ad !important;
   315  }
   316  a.ui.teal.header:hover {
   317    color: #00c4bc !important;
   318  }
   319  .ui.yellow.header {
   320    color: #f2c61f !important;
   321  }
   322  a.ui.yellow.header:hover {
   323    color: #f3ca2d !important;
   324  }
   325  .ui.black.dividing.header {
   326    border-bottom: 2px solid #1b1c1d;
   327  }
   328  .ui.blue.dividing.header {
   329    border-bottom: 2px solid #006e93;
   330  }
   331  .ui.green.dividing.header {
   332    border-bottom: 2px solid #5bbd72;
   333  }
   334  .ui.orange.dividing.header {
   335    border-bottom: 2px solid #e07b53;
   336  }
   337  .ui.pink.dividing.header {
   338    border-bottom: 2px solid #d9499a;
   339  }
   340  .ui.purple.dividing.header {
   341    border-bottom: 2px solid #564f8a;
   342  }
   343  .ui.red.dividing.header {
   344    border-bottom: 2px solid #d95c5c;
   345  }
   346  .ui.teal.dividing.header {
   347    border-bottom: 2px solid #00b5ad;
   348  }
   349  .ui.yellow.dividing.header {
   350    border-bottom: 2px solid #f2c61f;
   351  }
   352  
   353  /*-------------------
   354        Inverted
   355  --------------------*/
   356  
   357  .ui.inverted.header {
   358    color: #ffffff;
   359  }
   360  .ui.inverted.header .sub.header {
   361    color: rgba(255, 255, 255, 0.85);
   362  }
   363  .ui.inverted.attached.header {
   364    background: #333333 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
   365    background: #333333 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
   366    box-shadow: none;
   367  }
   368  .ui.inverted.block.header {
   369    background: #333333 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
   370    background: #333333 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
   371    box-shadow: none;
   372  }
   373  
   374  /*-------------------
   375     Inverted Colors
   376  --------------------*/
   377  
   378  .ui.inverted.black.header {
   379    color: #aaaaaa !important;
   380  }
   381  a.ui.inverted.black.header:hover {
   382    color: #b2b2b2 !important;
   383  }
   384  .ui.inverted.blue.header {
   385    color: #0097c9 !important;
   386  }
   387  a.ui.inverted.blue.header:hover {
   388    color: #00a2d8 !important;
   389  }
   390  .ui.inverted.green.header {
   391    color: #2ecc40 !important;
   392  }
   393  a.ui.inverted.green.header:hover {
   394    color: #37d249 !important;
   395  }
   396  .ui.inverted.orange.header {
   397    color: #ff851b !important;
   398  }
   399  a.ui.inverted.orange.header:hover {
   400    color: #ff8d2a !important;
   401  }
   402  .ui.inverted.pink.header {
   403    color: #ff8edf !important;
   404  }
   405  a.ui.inverted.pink.header:hover {
   406    color: #ff9de3 !important;
   407  }
   408  .ui.inverted.purple.header {
   409    color: #cdc6ff !important;
   410  }
   411  a.ui.inverted.purple.header:hover {
   412    color: #dad5ff !important;
   413  }
   414  .ui.inverted.red.header {
   415    color: #ff695e !important;
   416  }
   417  a.ui.inverted.red.header:hover {
   418    color: #ff776d !important;
   419  }
   420  .ui.inverted.teal.header {
   421    color: #6dffff !important;
   422  }
   423  a.ui.inverted.teal.header:hover {
   424    color: #7cffff !important;
   425  }
   426  .ui.inverted.yellow.header {
   427    color: #ffe21f !important;
   428  }
   429  a.ui.inverted.yellow.header:hover {
   430    color: #ffe42e !important;
   431  }
   432  .ui.inverted.block.header {
   433    border-bottom: none;
   434  }
   435  
   436  /*-------------------
   437         Aligned
   438  --------------------*/
   439  
   440  .ui.left.aligned.header {
   441    text-align: left;
   442  }
   443  .ui.right.aligned.header {
   444    text-align: right;
   445  }
   446  .ui.centered.header,
   447  .ui.center.aligned.header {
   448    text-align: center;
   449  }
   450  .ui.justified.header {
   451    text-align: justify;
   452  }
   453  .ui.justified.header:after {
   454    display: inline-block;
   455    content: '';
   456    width: 100%;
   457  }
   458  
   459  /*-------------------
   460         Floated
   461  --------------------*/
   462  
   463  .ui.floated.header,
   464  .ui[class*="left floated"].header {
   465    float: left;
   466    margin-top: 0em;
   467    margin-right: 0.5em;
   468  }
   469  .ui[class*="right floated"].header {
   470    float: right;
   471    margin-top: 0em;
   472    margin-left: 0.5em;
   473  }
   474  
   475  /*-------------------
   476         Fittted
   477  --------------------*/
   478  
   479  .ui.fitted.header {
   480    padding: 0em;
   481  }
   482  
   483  /*-------------------
   484        Dividing
   485  --------------------*/
   486  
   487  .ui.dividing.header {
   488    padding-bottom: 0.25rem;
   489    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   490  }
   491  .ui.dividing.header .sub.header {
   492    padding-bottom: 0.25rem;
   493  }
   494  .ui.dividing.header .icon {
   495    margin-bottom: 0em;
   496  }
   497  .ui.inverted.dividing.header {
   498    border-bottom-color: rgba(255, 255, 255, 0.2);
   499  }
   500  
   501  /*-------------------
   502          Block
   503  --------------------*/
   504  
   505  .ui.block.header {
   506    background: #f0f0f0;
   507    padding: 0.75rem 1rem;
   508    box-shadow: none;
   509    border: 1px solid #d4d4d5;
   510    border-radius: 0.3125rem;
   511  }
   512  .ui.tiny.block.header {
   513    font-size: 1em;
   514  }
   515  .ui.small.block.header {
   516    font-size: 1.071em;
   517  }
   518  .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
   519    font-size: 1.28em;
   520  }
   521  .ui.large.block.header {
   522    font-size: 1.714em;
   523  }
   524  .ui.huge.block.header {
   525    font-size: 2em;
   526  }
   527  
   528  /*-------------------
   529         Attached
   530  --------------------*/
   531  
   532  .ui.attached.header {
   533    background: #ffffff;
   534    padding: 0.75rem 1rem;
   535    margin-left: -1px;
   536    margin-right: -1px;
   537    box-shadow: none;
   538    border: 1px solid #d4d4d5;
   539  }
   540  .ui.attached.block.header {
   541    background: #f0f0f0;
   542  }
   543  .ui.attached:not(.top):not(.bottom).header {
   544    margin-top: 0em;
   545    margin-bottom: 0em;
   546    border-top: none;
   547    border-bottom: none;
   548    border-radius: 0em;
   549  }
   550  .ui.top.attached.header {
   551    margin-bottom: 0em;
   552    border-bottom: none;
   553    border-radius: 0.3125rem 0.3125rem 0em 0em;
   554  }
   555  .ui.bottom.attached.header {
   556    margin-top: 0em;
   557    border-top: none;
   558    border-radius: 0em 0em 0.3125rem 0.3125rem;
   559  }
   560  
   561  /* Attached Sizes */
   562  .ui.tiny.attached.header {
   563    font-size: 0.8571em;
   564  }
   565  .ui.small.attached.header {
   566    font-size: 0.9285em;
   567  }
   568  .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
   569    font-size: 1em;
   570  }
   571  .ui.large.attached.header {
   572    font-size: 1.0714em;
   573  }
   574  .ui.huge.attached.header {
   575    font-size: 1.1428em;
   576  }
   577  
   578  /*-------------------
   579          Sizing
   580  --------------------*/
   581  
   582  .ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
   583    font-size: 1.28em;
   584  }
   585  
   586  
   587  /*******************************
   588           Theme Overrides
   589  *******************************/
   590  
   591  
   592  
   593  /*******************************
   594           Site Overrides
   595  *******************************/
   596