| /* |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, |
| * software distributed under the License is distributed on an |
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| * KIND, either express or implied. See the License for the |
| * specific language governing permissions and limitations |
| * under the License. |
| * |
| * CSS Stylesheet for Participants in Conversation Panel head. |
| * |
| * author: hearnden@google.com (David Hearnden) |
| */ |
| |
| /* |
| * <div class='panel'> |
| * <div class='flow'> |
| * <div> |
| * <img class='participant'> |
| * ... |
| * <!-- Button must be sibling of imgs for Webkit to work. --> |
| * <span class='extra'> |
| * <span class='toggleGroup'> |
| * <span class='expandButton'></span> |
| * <span>more</span> |
| * </span> |
| * <span class='add'></span> |
| * </span> |
| * <span class='simple'> |
| * <span class='add'></span> |
| * </span> |
| * </div> |
| * </div> |
| * </div> |
| * |
| * |
| ________________________________________________________________ |
| * || 4 | | | .simple | | |
| * || _________| _________| | |14 | |
| * || | | | | | ___33____| | |
| * || 4 | 42x42 | | | ... | 4 | |24 | |
| * || | | | | | |_________| | |
| * ||____|_________|____|_________|_______|_____________|8___________| |
| * || 4 |
| * ||_______________________________________________________________ |
| * | |
| * |.flow element keeps flowing with overflow. |
| * | |
| * | _____________ |
| * | | _ _______| .extra |
| * | | |+||_______| aligned to bottom |
| * | | __________| of .flow |
| * | | | | |
| * | | |__________| |
| * |______________________________________|_____________|_____________ |
| * V |
| */ |
| |
| /* |
| * Top-level element, toggles between fixed-height and autoheight. |
| */ |
| .panel { |
| border-bottom: 1px solid #B8C6D9; |
| border-left: 1px solid #E4F1FE; |
| background-color: #c9e2fc; |
| overflow: hidden; |
| height: 46px; |
| min-width: 110px; /* 1 avatar, and nice room for buttons. */ |
| |
| /* |
| * Margins on adjacent floated elements do not collapse, so there is a |
| * directional bias (i.e., can only have 1 horizontal and 1 vertical |
| * margin to get a grid-like effect). Arbitrarily, left and top have |
| * been picked for avatar margins. The container must therefore |
| * provide right and bottom margins for the last row and column. |
| * This is done with padding here rather than margin, in order to keep |
| * the background color. |
| */ |
| padding-bottom: 4px; |
| } |
| |
| .flow { |
| /* Expand to floated content. */ |
| overflow: auto; |
| /* Positioned contained for add button. */ |
| position: relative; |
| /* Room for absolutely positioned add button. */ |
| padding-right: 11em; |
| } |
| |
| .participant { |
| float: left; |
| cursor: pointer; |
| } |
| |
| /* Name-based rendering. */ |
| div.participant { |
| line-height: 44px; |
| margin: 4px 0 0 12px; |
| text-decoration: underline; |
| color: blue; |
| } |
| |
| /* Avatar-based rendering. */ |
| img.participant { |
| height: 40px; |
| width: 40px; |
| border: 1px solid #cad0d9; |
| margin: 4px 0 0 4px; |
| } |
| |
| .toggleGroup { |
| position: absolute; |
| top: 0; |
| cursor: pointer; |
| /* As narrow as possible. */ |
| line-height: 1; |
| } |
| |
| /* |
| * Expert trick. |
| * |
| * By floating all the images, and having the add button be an absolutely |
| * positioned span (must be an inline element, not a div), the default |
| * location of the span will be the first inline box generated by the |
| * participant-container div, which occurs immediately after the last |
| * floated image of the first line. Note this does not work if the add |
| * button is a div, because the containing-block rules are different for |
| * default-inline and default-block elements. |
| * See http://www.w3.org/TR/CSS2/visudet.html#containing-block-details |
| */ |
| .simple { |
| position: absolute; |
| /* Padding is used, so that background obscures the other one. |
| * It must stretch to the full height of this block. Values are same |
| * as avatars, but offset by the height difference: |
| * (4px 0 0 4px) + (8px 0 8px 0) + (2px 0 0 0)border |
| */ |
| padding: 14px 0 8px 4px; |
| background-color: #c9e2fc; |
| bottom: 0; |
| width: 10em; |
| } |
| |
| .extra { |
| position: absolute; |
| width: 4em; |
| margin-left: 4px; |
| |
| /* Note that, due to borders and padding being scaled separately, the |
| * theoretical 22px required here causes aliasing errors at some font |
| * sizes (scale(x) + scale(y) != scale(x + y) in general). |
| * Ideally, this value would sum to: |
| * 1px border + 20px space + 1px border |
| * (which is different from 2px border + 20px space). 21px regular |
| * space is about as close as we can get to that value. If the value |
| * used here is too large, it causes some overflow errors (undesirabled |
| * scroll bars) due to 1px aliasing. |
| */ |
| padding-top: 21px; |
| } |
| |
| .newWaveWithParticipantsButton { |
| position: absolute; |
| width: 7em; |
| margin-left: 5px; |
| } |
| |
| /* |
| * Sprites. |
| */ |
| |
| @sprite .expandButton { |
| gwt-image: 'expandButton'; |
| /* Restore img-like flow. Does not work on IE. */ |
| display: inline-block; |
| margin-right: 0.3em; |
| } |
| |
| @sprite .collapseButton { |
| gwt-image: 'collapseButton'; |
| /* Restore img-like flow. Does not work on IE. */ |
| display: inline-block; |
| margin-right: 0.3em; |
| } |
| |
| @sprite .addButton { |
| gwt-image: 'addButton'; |
| /* The button is a span, to conform to HTML's backward schema. */ |
| display: inline-block; |
| cursor: pointer; |
| } |
