Mercurial > snowl
view content/river.css @ 376:9fd0f639c0ec
make the content div inflexible again in columns mode, while leaving it inflexible in non-columns mode, so we have the best (to the extent possible at the moment) of both worlds
author | Myk Melez <myk@mozilla.org> |
---|---|
date | Fri, 07 Nov 2008 16:59:04 -0800 |
parents | 7ea8b9746fa4 |
children | cbff17233e63 |
line wrap: on
line source
/* ***** BEGIN LICENSE BLOCK ***** * Version: MPL 1.1/GPL 2.0/LGPL 2.1 * * The contents of this file are subject to the Mozilla Public License Version * 1.1 (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.mozilla.org/MPL/ * * Software distributed under the License is distributed on an "AS IS" basis, * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License * for the specific language governing rights and limitations under the * License. * * The Original Code is Snowl. * * The Initial Developer of the Original Code is Mozilla. * Portions created by the Initial Developer are Copyright (C) 2008 * the Initial Developer. All Rights Reserved. * * Contributor(s): * Myk Melez <myk@mozilla.org> * * Alternatively, the contents of this file may be used under the terms of * either the GNU General Public License Version 2 or later (the "GPL"), or * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), * in which case the provisions of the GPL or the LGPL are applicable instead * of those above. If you wish to allow use of your version of this file only * under the terms of either the GPL or the LGPL, and not to allow others to * use your version of this file under the terms of the MPL, indicate your * decision by deleting the provisions above and replace them with the notice * and other provisions required by the GPL or the LGPL. If you do not delete * the provisions above, a recipient may use your version of this file under * the terms of any one of the MPL, the GPL or the LGPL. * * ***** END LICENSE BLOCK ***** */ /******************************************************************************/ /* Toolbar */ #toolbar { font: message-box; -moz-box-align: center; width: 100%; } /* Don't style the buttons natively because they look ugly on Linux. * FIXME: test on other platforms and style conditionally as appropriate, * and figure out how to make them look pretty on Linux. */ toolbarbutton { -moz-appearance: none; min-width: 24px; min-height: 24px; } /* Hide the button labels, since they would otherwise take up space, * even if empty, and throw off the centering of the button icons. */ .toolbarbutton-text { display: none; } /******************************************************************************/ /* Period Menu */ #periodMenu menupopup > menuitem { -moz-padding-start: 23px; } #periodMenu menupopup > menuitem.menuitem-iconic { -moz-padding-start: 2px; } #periodMenu menupopup > .menuitem-iconic > .menu-iconic-left { display: -moz-box; min-width: 16px; -moz-padding-end: 2px; } #periodMenu .menulist-icon, #periodMenu menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { width: 16px; height: 16px; } /******************************************************************************/ /* Content Stack, Box, Splitter */ /* Rules updated dynamically are defined in riverContent.css. */ #contentBox { padding: 7px; -moz-column-gap: 2em; -moz-user-focus: normal; -moz-user-select: -moz-all; /* Make it look like content rather than the chrome in which it is embedded. */ color: black; background-color: white; font: normal normal normal medium serif; /* This gets set programmatically on load, since setting it in CSS doesn't work. */ height: 0; /* We need this in order for content to wrap in non-columns mode. */ -moz-box-flex: 1; } #contentStack[columns] #contentBox { /* In columns mode, flex creates a bunch of empty space after the content, * so we turn it off. */ -moz-box-flex: 0; } #columnResizeSplitter { display: none; } #contentStack[columns] > #columnResizeSplitter { display: -moz-box; } /******************************************************************************/ /* Group Headers */ /* FIXME: factor this out with the almost identical code in stream.css. */ .groupHeader { -moz-appearance: none; background-color: darkgrey; color: white; width: 99%; } .groupHeader > .checkbox-spacer-box { -moz-appearance: none; } .groupHeader > .checkbox-spacer-box > .checkbox-check { -moz-appearance: treetwisty; background-image: none; border: none; } .groupHeader[checked="true"] > .checkbox-spacer-box > .checkbox-check { -moz-appearance: treetwistyopen; } /******************************************************************************/ /* Message */ .message { /* Clear the float on the previous message's icon. */ clear: both; margin-bottom: 1em; } /* The selector has to include #contentBox here so the rule takes precedence * over the ones in riverContent.css. */ #contentBox .messageIcon { max-width: 100px; max-height: 100px; float: right; margin-bottom: 1em; } .byline { font-size: smaller; font-family: sans-serif; color: grey; } .title { font-size: 100%; margin: 0; } /* Specify the margins above and below the message bodies. In order to control * these more consistently, we remove margins on the content they contain. */ .body > *:first-child { margin-top: 0; } .body > *:last-child { margin-bottom: 0; } .body { margin-top: 0.2em; margin-bottom: 0.2em; } /* Make the title and source links look less like links to differentiate * between the links in the content and these links that are in chrome. */ .source > a, .title > a { font-family: sans-serif; text-decoration: none; color: black; } .source > a:visited, .title > a:visited { color: #555; } .excerpt { font-style: italic; } /* Show/hide elements based on whether we're displaying full content. */ #contentBox .body { display: none; } #contentBox .title { display: inline; } #contentBox.showBody .body { display: block; } #contentBox.showBody .title { display: block; } #contentBox.showBody .excerpt { display: none; } #contentBox.showBody .messageIcon { display: none; } /* Separate the title and excerpt with a colon when the body is hidden. */ #contentBox .title:after { content: ": " } #contentBox.showBody .title:after { content: none } /* Don't draw borders around hyperlinked favicons, but do pad them a bit * between the end of the favicon and the start of the source name. */ a > img { border: 0; -moz-padding-end: 1px; }