root / tei / css / layout-default-latest.css @ 2
Historique | Voir | Annoter | Télécharger (3,98 ko)
| 1 |
/*
|
|---|---|
| 2 |
* Default Layout Theme
|
| 3 |
*
|
| 4 |
* Created for jquery.layout
|
| 5 |
*
|
| 6 |
* Copyright (c) 2010
|
| 7 |
* Fabrizio Balliano (http://www.fabrizioballiano.net)
|
| 8 |
* Kevin Dalman (http://allpro.net)
|
| 9 |
*
|
| 10 |
* Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
|
| 11 |
* and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
|
| 12 |
*
|
| 13 |
* Last Updated: 2010-02-10
|
| 14 |
* NOTE: For best code readability, view this with a fixed-space font and tabs equal to 4-chars
|
| 15 |
*/
|
| 16 |
|
| 17 |
/*
|
| 18 |
* DEFAULT FONT
|
| 19 |
* Just to make demo-pages look better - not actually relevant to Layout!
|
| 20 |
*/
|
| 21 |
body {
|
| 22 |
font-family: Geneva, Arial, Helvetica, sans-serif; |
| 23 |
font-size: 100%; |
| 24 |
*font-size: 80%; |
| 25 |
} |
| 26 |
|
| 27 |
/*
|
| 28 |
* PANES & CONTENT-DIVs
|
| 29 |
*/
|
| 30 |
.ui-layout-pane { /* all 'panes' */ |
| 31 |
background: #FFF; |
| 32 |
border: 1px solid #BBB; |
| 33 |
/* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
|
| 34 |
otherwise you may get double-scrollbars - on the pane AND on the content-div
|
| 35 |
*/
|
| 36 |
padding: 10px; |
| 37 |
overflow: auto; |
| 38 |
} |
| 39 |
/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
|
| 40 |
.ui-layout-content {
|
| 41 |
padding: 5px; |
| 42 |
position: relative; /* contain floated or positioned elements */ |
| 43 |
overflow: auto; /* add scrolling to content-div */ |
| 44 |
} |
| 45 |
|
| 46 |
/*
|
| 47 |
* RESIZER-BARS
|
| 48 |
*/
|
| 49 |
.ui-layout-resizer { /* all 'resizer-bars' */ |
| 50 |
background: #DDD; |
| 51 |
border: 1px solid #BBB; |
| 52 |
border-width: 0; |
| 53 |
} |
| 54 |
.ui-layout-resizer-drag { /* REAL resizer while resize in progress */ |
| 55 |
} |
| 56 |
.ui-layout-resizer-hover { /* affects both open and closed states */ |
| 57 |
} |
| 58 |
/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
|
| 59 |
otherwise color shifts while dragging when bar can't keep up with mouse */
|
| 60 |
.ui-layout-resizer-open-hover , /* hover-color to 'resize' */ |
| 61 |
.ui-layout-resizer-dragging { /* resizer beging 'dragging' */ |
| 62 |
background: #EBA60B; |
| 63 |
} |
| 64 |
.ui-layout-resizer-dragging { /* CLONED resizer being dragged */ |
| 65 |
border-left: 1px solid #BBB; |
| 66 |
border-right: 1px solid #BBB; |
| 67 |
} |
| 68 |
/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
|
| 69 |
.ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */ |
| 70 |
background: #E1A4A4; /* red */ |
| 71 |
} |
| 72 |
|
| 73 |
.ui-layout-resizer-closed-hover { /* hover-color to 'slide open' */ |
| 74 |
background: #EBD5AA; |
| 75 |
} |
| 76 |
.ui-layout-resizer-sliding { /* resizer when pane is 'slid open' */ |
| 77 |
opacity: .10; /* show only a slight shadow */ |
| 78 |
filter: alpha(opacity=10); |
| 79 |
} |
| 80 |
.ui-layout-resizer-sliding-hover { /* sliding resizer - hover */ |
| 81 |
opacity: 1.00; /* on-hover, show the resizer-bar normally */ |
| 82 |
filter: alpha(opacity=100); |
| 83 |
} |
| 84 |
/* sliding resizer - add 'outside-border' to resizer on-hover
|
| 85 |
* this sample illustrates how to target specific panes and states */
|
| 86 |
.ui-layout-resizer-north-sliding-hover { border-bottom-width: 1px; } |
| 87 |
.ui-layout-resizer-south-sliding-hover { border-top-width: 1px; } |
| 88 |
.ui-layout-resizer-west-sliding-hover { border-right-width: 1px; } |
| 89 |
.ui-layout-resizer-east-sliding-hover { border-left-width: 1px; } |
| 90 |
|
| 91 |
/*
|
| 92 |
* TOGGLER-BUTTONS
|
| 93 |
*/
|
| 94 |
.ui-layout-toggler {
|
| 95 |
border: 1px solid #BBB; /* match pane-border */ |
| 96 |
background-color: #BBB; |
| 97 |
} |
| 98 |
.ui-layout-resizer-hover .ui-layout-toggler { |
| 99 |
opacity: .60; |
| 100 |
filter: alpha(opacity=60); |
| 101 |
} |
| 102 |
.ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity */ |
| 103 |
background-color: #FC6; |
| 104 |
opacity: 1.00; |
| 105 |
filter: alpha(opacity=100); |
| 106 |
} |
| 107 |
.ui-layout-toggler-north ,
|
| 108 |
.ui-layout-toggler-south {
|
| 109 |
border-width: 0 1px; /* left/right borders */ |
| 110 |
} |
| 111 |
.ui-layout-toggler-west ,
|
| 112 |
.ui-layout-toggler-east {
|
| 113 |
border-width: 1px 0; /* top/bottom borders */ |
| 114 |
} |
| 115 |
/* hide the toggler-button when the pane is 'slid open' */
|
| 116 |
.ui-layout-resizer-sliding ui-layout-toggler { |
| 117 |
display: none; |
| 118 |
} |
| 119 |
/*
|
| 120 |
* style the text we put INSIDE the togglers
|
| 121 |
*/
|
| 122 |
.ui-layout-toggler .content { |
| 123 |
color: #666; |
| 124 |
font-size: 12px; |
| 125 |
font-weight: bold; |
| 126 |
width: 100%; |
| 127 |
padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */ |
| 128 |
} |
| 129 |
|