X-Git-Url: https://git.wh0rd.org/?a=blobdiff_plain;f=tt-rss.css;h=94aa7587453beeb1326dcfebfe8f2e75698fcd57;hb=86edc737f4fb9b035817486d4027f586ac744eb7;hp=35d1095d3a07950fcdc819cfde6c1ea753499664;hpb=2ef5c21f61faba21a33ea60058f0aa0d5ebd2620;p=tt-rss.git diff --git a/tt-rss.css b/tt-rss.css index 35d1095d..94aa7587 100644 --- a/tt-rss.css +++ b/tt-rss.css @@ -1,18 +1,20 @@ -body#ttrssMain, body#ttrssPrefs { +body#ttrssMain, body#ttrssPrefs, body#ttrssLogin, body { background : white; color : black; margin : 0px; padding : 0px; - font-family : "Lucida Grande", Arial, sans-serif; + font-family : sans-serif; + font-size : 12px; } -blockquote { - margin : 0px; - border-width : 0px 0px 0px 8px; - border-color : #e0e0e0; - border-style : solid; - padding : 10px; - background-color : #f0f0f0; +body#ttrssPrefs { + background-color : #ecf4ff; +} + +body#ttrssPrefs #footer, body#ttrssPrefs #header { + background-color : #ecf4ff; + padding-left : 8px; + padding-right : 8px; } div.postReply { @@ -30,11 +32,12 @@ div.postReply a:hover { div.postReply div.postHeader { border-width : 0px 0px 1px 0px; border-style : solid; - border-color : #a0a0a0; - background-color : #f9faff; - margin : 0px 1px 0px 0px; + border-color : #88b0f0; + background-color : white; + background : url("images/toolbar.png"); + background-position : bottom left; + background-repeat : repeat-x; padding : 5px; - /* cursor : move; */ color : #909090; } @@ -71,35 +74,19 @@ div.postReply img.tagsPic { vertical-align : middle; } -div.articleNote div.articleNoteOps { - text-align : center; - color : #9a8c59; - font-style : italic; - margin-top : 5px; -} - -div.articleNote div.articleNoteOps a { - color : #9a8c59; -} - -div.articleNote div.articleNoteOps a:hover { - color : black; -} - div.articleNote { background-color : #fff7d5; - border-width : 1px; padding : 5px; - border-style : dashed; + border-style : none none dashed none; border-color : #e7d796; - font-size : 8px; - margin-bottom : 5px; - margin-top : 5px; - margin-left : 5px; - float : right; + border-width : 1px; + background-color : #fff7d5; color : #9a8c59; - max-width : 150px; - text-align : justify; +} + +div.articleNote div.noteEdit { + float : right; + cursor : pointer; } div.postReply span.author { @@ -146,24 +133,6 @@ a:hover { position : absolute; } -textarea.iedit { - width : 100%; -} - -input.iedit { - width : 100%; - padding-left : 2px; -} - -select.iedit { - width : 100%; -} - -input.editbox { - width : 200px; - padding-left : 2px; -} - #notify { border-width : 0px 1px 1px 1px; border-style : solid; @@ -174,7 +143,7 @@ input.editbox { display : none; float : right; font-size : 12px; - z-index : 998; + z-index : 99; padding : 5px 5px 5px 5px; } @@ -211,20 +180,8 @@ input.editbox { cursor : pointer; } -#dispSwitch { - font-size : 12px; - font-family : "Lucida Grande", Arial, sans-serif; - text-align : right; - float : right; - margin : 5px 5px 0px 0px; -} - -#dispSwitch a { - color : gray; -} - -#dispSwitch a:hover { - color : #4684ff; +.Selected, .Selected td { + background-color : #fff7d5; } .even.Unread.Selected, .even.Unread.Selected td { @@ -309,12 +266,16 @@ input.editbox { /* preferences */ -table.prefPrefsList tr:hover td.prefValue { +/* table.prefPrefsList tr:hover td.prefValue { color : #88b0f0; } table.prefPrefsList tr:hover td.prefValue input { color : #88b0f0; +} */ + +table.prefPrefsList h3 { + margin-top : 0px; } tr.title td { @@ -365,7 +326,11 @@ table.prefUserList tr.oddSelected, table.prefFeedList tr.even, table.prefFeedList tr.odd, table.prefFeedList tr.evenSelected, -table.prefFeedList tr.oddSelected +table.prefFeedList tr.oddSelected, +table.prefInstanceList tr.even, +table.prefInstanceList tr.odd, +table.prefInstanceList tr.evenSelected, +table.prefInstanceList tr.oddSelected { cursor : pointer; } @@ -385,7 +350,11 @@ table.prefUserList tr.oddSelected:hover td, table.prefFeedList tr.even:hover td, table.prefFeedList tr.odd:hover td, table.prefFeedList tr.evenSelected:hover td, -table.prefFeedList tr.oddSelected:hover td +table.prefFeedList tr.oddSelected:hover td, +table.prefInstanceList tr.even:hover td, +table.prefInstanceList tr.odd:hover td, +table.prefInstanceList tr.evenSelected:hover td, +table.prefInstanceList tr.oddSelected:hover td { color : #88b0f0; } @@ -398,12 +367,18 @@ table.prefFeedList td.feedSelect { text-align : center; } -div.prefFeedCatHolder { - height : 250px; +div.prefFeedCatHolder, div.prefFeedOPMLHolder, div.inactiveFeedHolder { + height : 300px; overflow : auto; - border : 1px solid #99d67a; - margin : 5px 0px 5px 0px; - background-color : white; + border-width : 0px 1px 1px 1px; + border-color : #c0c0c0; + border-style : solid; + margin : 0px 0px 5px 0px; + background-color : #ecf4ff; +} + +div.prefFeedOPMLHolder, div.inactiveFeedHolder { + border-width : 1px 1px 1px 1px; } a.helpLink { @@ -414,64 +389,35 @@ a.helpLink:hover { color : #4684ff; } -pre { - margin : 5px; -} - -input.extSearch { - width : 100%; -} - -div.firstTab { - width : 10px; - float : left; -} - -div.prefsTab:hover { - cursor : pointer; -} - -div.prefsTab.Selected:hover { - cursor : pointer; +#content-insert pre, #headlines-frame pre, .dijitContentPane pre { + margin : 0px 0px 0px 1em; + padding : 0px; + font-family : monospace; + font-size : 12px; + background : transparent; + border-width : 0px; + color : gray; } -div.prefsTab { - float : left; - border-width : 1px 1px 0px 1px; - border-color : #C4D1E4; +#content-insert blockquote, #headlines-frame blockquote, .dijitContentPane blockquote { + margin : 0px 0px 0px 1em; + border-width : 0px 0px 0px 2px; + border-color : #c0c0c0; border-style : solid; - margin : 0px 0px 0px 5px; - padding : 3px 5px 3px 5px; + font-style : italic; + padding : 0px 0px 0px 1em; font-size : 12px; - font-family : "Lucida Grande", "Segoe UI", Tahoma, Arial, sans-serif; - border-collapse : collapse; - min-width : 100px; - text-align : center; - cursor : pointer; - position : relative; - bottom : -1px; - height : 30px; + color : gray; } -div.prefsTab.Selected { - float : left; - border-width : 1px 1px 0px 1px; - border-color : #88b0f0; - border-style : solid; - margin : 0px 0px 0px 5px; - padding : 3px 5px 3px 5px; - background-color : #ecf4ff; +#content-insert code, #headlines-frame code, .dijitContentPane code { + background : transparent; + border : 0px solid transparent; + margin : 0px; + font-family : monospace; + padding : 0px; font-size : 12px; - font-family : "Lucida Grande", "Segoe UI", Tahoma, Arial, sans-serif; - border-collapse : collapse; - font-weight : bold; - min-width : 100px; - text-align : center; - cursor : pointer; - position : relative; - bottom : -1px; - z-index : 3; - height : 30px; + color : black; } div.notice { @@ -555,40 +501,80 @@ td.selectPrompt { } div#headlines-toolbar { - border-width : 1px 0px 1px 1px; - background-color : #ecf4ff; + border-width : 0px 0px 1px 0px; + background-color : #f0f0f0; border-color : #88b0f0 #88b0f0 #ecf4ff #88b0f0; font-size : 11px; - font-family : "Lucida Grande", "Segoe UI", Tahoma, Arial, sans-serif; + font-family : "Segoe UI", Tahoma, sans-serif; color : gray; padding : 0px; margin : 0px; overflow : hidden; - height : 23px; + height : 25px; + line-height : 25px; + padding-left : 4px; } div#headlines-toolbar .dijitSelect { font-size : 11px; + position : relative; + top : -2px; } -div#headlines-toolbar div#subtoolbar_main { - display : table-cell; - width : 100%; - white-space : nowrap; - vertical-align : middle; - padding-left : 5px; +div#headlines-toolbar span.r { + float: right; + position: relative; + background : #ecf4ff; + border-left: 5px solid white; + padding : 0 4px 0px 4px; + text-align : right; +} + +/* http://css-tricks.com/adobe-like-arrow-headers/ */ + +@media screen and (-webkit-min-device-pixel-ratio:0) { + div#headlines-toolbar span.r:before, + div#headlines-toolbar span.r:after { + content: ""; + position: absolute; + /* Pushed down half way, will get pulled back up half height of triangle + ensures centering if font-size or line-height changes */ + top: 50%; + width: 0; + height: 0; + } + div#headlines-toolbar span.r:before { + left: -12px; + /* Triangle */ + border-top: 8px solid transparent; + border-bottom: 8px solid transparent; + border-right: 8px solid white; + /* Pull-up */ + margin-top: -8px; + } + div#headlines-toolbar span.r:after { + /* Smaller and different position triangle */ + left: -5px; + border-top: 6px solid transparent; + border-bottom: 6px solid transparent; + border-right: 6px solid #ecf4ff; + margin-top: -6px; + } +} + +div#headlines-toolbar span.r span.error { + color : red; +} + +div#headlines-toolbar span.r a { + color : gray; } -div#headlines-toolbar div#subtoolbar_ftitle { - display : table-cell; - text-align : right; - vertical-align : middle; - white-space : nowrap; - padding-right : 5px; +div#headlines-toolbar span.r a:hover { + color : black; } span.contentPreview { - font-size : 12px; color : gray; font-weight : normal; } @@ -599,7 +585,7 @@ span.contentPreview:hover { span.hlLabelRef { background-color : #fff7d5; - font-height : 8px; + font-size : 8px; color : #063064; font-weight : normal; margin : 0px 3px 0px 3px; @@ -627,7 +613,6 @@ div.postHeader div.postDateRTL { div.postHeader div { padding-bottom : 3px; font-size : 12px; - /* font-family : "Lucida Grande", Tahoma, sans-serif; */ } #feedUpdateErrors { @@ -668,46 +653,40 @@ a.warning { color : #f04040; } -img.closeButton { - border-width : 0px; - float : right; -} - -span.groupPrompt { - font-size : 12px; - color : #4684ff; -} - div.tagCloudContainer { - border : 1px solid gray; - background-color : white; + border : 1px solid #c0c0c0; + background-color : #ecf4ff; margin : 5px 0px 5px 0px; padding : 5px; text-align : center; } div.errorExplained { - border : 1px solid #99d67a; - background-color : white; + border : 1px solid #c0c0c0; + background-color : #ecf4ff; margin : 5px 0px 5px 0px; padding : 5px; } ul.feedErrorsList { - height : 300px; + max-height : 300px; overflow : auto; list-style-type : none; - border : 1px solid #99d67a; - background-color : white; + border : 1px solid #c0c0c0; + background-color : #ecf4ff; margin : 0px 0px 5px 0px; - padding : 0px; + padding : 5px; +} + +ul.feedErrorsList em { + color : gray; } ul.userFeedList { height : 300px; overflow : auto; list-style-type : none; - border : 1px solid #99d67a; + border : 1px solid gray; background-color : white; margin : 0px 0px 5px 0px; padding : 0px; @@ -716,16 +695,19 @@ ul.userFeedList { ul.browseFeedList { height : 300px; overflow : auto; - list-style-type : none; + border-width : 0px 1px 1px 1px; + border-color : #c0c0c0; + border-style : solid; margin : 0px 0px 5px 0px; - padding : 0px; - border : 1px solid #99d67a; background-color : white; + list-style-type : none; + padding : 0px; + } ul.browseFeedList li { margin : 0px; - padding : 0px; + padding : 2px 4px 2px 4px; } span.subscribers { @@ -738,10 +720,6 @@ div.subscribers { float : right; } -input.feedBrowseCB { - margin-right : 1em; -} - div.browserDetails { margin : 5px 5px 5px 5px; padding : 5px; @@ -758,32 +736,10 @@ ul.compact li { padding : 0px; } -div.browserFeedInfo { - font-size : 12px; -/* border : 1px solid #88b0f0; - background-color : #ecf4ff; - -moz-border-radius : 5px; */ - padding : 5px; -} - -div.browserFeedInfo div.detailsPart { - margin : 5px 0px 5px 5px; -} - .noborder { border-width : 0px; } -#dialog_overlay { - left : 0; - top : 0; - height : 100%; - width : 100%; - z-index : 4; - position : absolute; - background-image : url("images/shadow_white.png"); -} - #overlay { background : white; left : 0; @@ -796,21 +752,7 @@ div.browserFeedInfo div.detailsPart { #overlay_inner { font-weight : bold; - margin : 10px; -} - -#noDaemonWarning { - position : absolute; - background-color : #ecf4ff; - border : 1px solid #88b0f0; - padding : 10px; - margin : 5px; - z-index : 2; - display : none; -} - -#qafInput { - width : 100%; + margin : 1em; } form { @@ -826,42 +768,9 @@ form { width : 100%; } -div.feedExtInfo { - margin-left : 2em; - font-size : 7pt; - color : gray; - font-weight : normal; -} - -span.debugTS { - color : #4684ff; -} - -#backReqBox { - display : none; -} - -/*.scriptWarn:before { - content : "Disabled script:"; -}*/ - -.scriptWarn { - color : white; - background-color : #903030; - border : 1px solid #601010; - padding : 3px; - font-weight : bold; - display : none; -} - -.objectWarn { - color : gray; - font-style: italic; - text-align : center; -} - table.loginForm2 { padding : 1em; + width : 100%; } table.loginForm2 .loginTop { @@ -902,10 +811,6 @@ table.loginForm2 .innerLoginCell { padding-top : 0.5em; } -#milestoneDetails { - display : none; -} - div.loadingPrompt { padding : 1em; text-align : center; @@ -926,54 +831,22 @@ html, body#ttrssMain, #main { margin: 0; } +html, body#ttrssPrefs, #main { + width: 100%; + height: 100%; + border: 0; + padding: 0; + margin: 0; +} + #toolbar div.actionChooser { display : table-cell; text-align : right; - padding-right : 5px; + padding-right : 3px; } /* preferences layout */ -#prefFooter { - position : absolute; - bottom : 0px; - height : 20px; - text-align : center; - color : gray; - font-size : 12px; - background-image : url("images/footer.png"); - background-position : top left; - background-repeat : repeat-x; - background-color : white; - right : 0px; - left : 261px; - padding : 10px; - border-collapse : collapse; - border-width : 1px 0px 0px 0px; - border-style : solid; - border-color : #88b0f0; - -} - -#prefFooter { - left : 0px; -} - -#footer a, #prefFooter a { - color : gray; -} - -#footer a:hover, #prefFooter a:hover { - color : black; -} - -#prefHeader { - color : #4684ff; - font-size : 12px; - margin : 10px; - height : 33px; -} - div.return { float : right; font-size : 12px; @@ -988,36 +861,20 @@ div.return a:hover { color : black; } -#prefContentOuter { - clear : left; - position : absolute; - bottom : 41px; - top : 75px; - left : 0px; - right : 0px; - min-height : 300px; - border-width : 1px 0px 0px 0px; - border-color : #88b0f0; - border-style : solid; - font-size : 12px; +#header .logo { + float : right; + margin-left : 10px; } -#prefContent { - z-index : 4; - background-image : url("images/prefs-content.png"); - background-position : top left; - background-repeat : repeat-x; - position : absolute; - bottom : 0px; - top : 0px; - left : 0px; - right : 0px; - padding : 1em; - overflow : auto; +#header a { + color : #4684ff; +} +#header a:hover { + color : black; } -div.topLinks img { +#header img { vertical-align : middle; cursor : pointer; } @@ -1027,10 +884,6 @@ a.helpLinkPic img { vertical-align : middle; } -table.prefFeedCatList { - background-color : white; -} - div.autocomplete { position : absolute; width : 250px; @@ -1063,21 +916,7 @@ div.autocomplete ul li { float : right; } -div.topLinks { - float : right; - color : gray; - font-size : 12px; -} - -div.topLinks a { - color : #4684ff; -} - -div.topLinks a:hover { - color : black; -} - -div.topLinks a.feedback { +#header a.feedback { color : #009900; } @@ -1127,6 +966,9 @@ div#hotkey_help_overlay { z-index : 999; color : white; font-size : 15px; + background : black; + border-radius : 30px; + padding : 10px; } div#hotkey_help_overlay h1 { @@ -1138,6 +980,14 @@ div#hotkey_help_overlay ul { margin : 0px; } +div#hotkey_help_overlay a { + color : #88b0f0; +} + +div#hotkey_help_overlay a:hover { + color : white; +} + div#hotkey_help_overlay li { margin : 0px; } @@ -1170,82 +1020,12 @@ div#hotkey_help_overlay h2 { color : #88b0f0; } -div#hotkey_help_overlay table.hho td.c1 { - height : 30px; - width : 30px; - background : url("images/c1.png"); - background-repeat : no-repeat; - -} - -div#hotkey_help_overlay table.hho td.c2 { - height : 30px; - width : 30px; - background : url("images/c2.png"); - background-repeat : no-repeat; -} - -div#hotkey_help_overlay table.hho td.c3 { - height : 30px; - width : 30px; - background : url("images/c3.png"); - background-repeat : no-repeat; -} - -div#hotkey_help_overlay table.hho td.c4 { - height : 30px; - width : 30px; - background : url("images/c4.png"); - background-repeat : no-repeat; -} - -div#hotkey_help_overlay table.hho td.top, -div#hotkey_help_overlay table.hho td.left, -div#hotkey_help_overlay table.hho td.right, -div#hotkey_help_overlay table.hho td.bottom, -div#hotkey_help_overlay table.hho td.content { - background : url("images/shadow_dark.png"); -} - div#hotkey_help_overlay table.hho td.top, div#hotkey_help_overlay table.hho td.bottom { text-align : center; font-size : 11px; } -div.prefKbdHelp { - float : right; - font-size : 12px; - margin-right : 15px; -} - -div.prefKbdHelp img { - vertical-align : middle; -} - -div#l_progress_o { - width : 200px; - border : 1px solid black; - background-color : white; - margin-top : 10px; -} - -div#l_progress_i { - width : 10px; - background-color : #88b0f0; - height : 10px; -} - -/* #content-insert { - background-color : white; - overflow : auto; - position : absolute; - left : 0px; - right : 0px; - bottom : 0px; - top : 6px; -} */ - div.dlgSec { font-size : 12px; color : gray; @@ -1261,74 +1041,49 @@ div.dlgSecCont { float : left; font-size : 12px; font-weight : normal; - line-height : 200%; } -div.dlgButtons { - text-align : right; - clear : both; +div.dlgSecCont hr { + height : 0px; + line-height : 0px; + border : 0px solid transparent; + margin : 2px; } -pre, code { - font-size : 12px; - font-family : monospace; +div.dlgSecCont > * { + position : relative; + top : -2px; } -span.prefsLabelEntry { - padding : 2px; +div.dlgButtons { + text-align : right; + clear : both; } -div.labelColorIndicator { +span.labelColorIndicator { height : 14px; width : 14px; line-height : 14px; - font-height : 9px; - text-align : center; + font-size : 9px; + display : inline-block; border : 1px solid black; - float : left; background-color : #fff7d5; color : #063064; - margin-right : 10px; -} - -div.colorPicker div.colorPickerEntry:hover { - border : 1px solid #88b0f0; -} - -div.colorPicker div.ccPrompt:hover { - color : black; -} - -div.colorPicker div.colorPickerEntry { - height : 15px; - width : 15px; - line-height : 13px; - font-height : 9px; text-align : center; - border : 1px solid black; - margin : 5px 5px 0px 0px; - float : left; -} - -div.colorPicker { - border : 1px solid #cccccc; - background : #f0f0f0; - width : 110px; - padding : 0px 0px 5px 5px; - position : absolute; - left : auto; - top : auto; - z-index : 3; - color : #909090; + margin-right : 2px; } -optgroup { - color : #4684ff; - font-style : normal; -} - -option { - color : black; +span.labelColorIndicator2 { + height : 14px; + width : 14px; + font-size : 9px; + display : inline-block; + border : 1px solid black; + background-color : #fff7d5; + color : #063064; + text-align : center; + margin-right : 2px; + vertical-align : bottom; } div#cmdline { @@ -1398,9 +1153,13 @@ div.hlRight img { span.hlUpdated { color : gray; - font-weight : medium; - width : 100px; - display : inline-block; + min-width : 100px; + display : table-cell; + width : 100%; + vertical-align : middle; + padding-top : 4px; + padding-bottom : 4px; + text-align : right; } div.hlLeft input { @@ -1425,6 +1184,9 @@ div.hlUpdPic img { max-width : 16px; } +div.fatalError { + margin-bottom : 10px; +} div.fatalError button { margin-top : 5px; @@ -1441,6 +1203,12 @@ div.fatalError textarea { padding : 0px; } +#header-wrap { + border-width : 0px; + margin : 0px; + padding : 0px; +} + #content-wrap { padding : 0px; border-width : 0px; @@ -1452,6 +1220,8 @@ div.fatalError textarea { border-color : #88b0f0; border-left-width : 0px; border-bottom-width : 0px; + border-top-width : 0px; + overflow : auto; } #headlines-wrap-inner { @@ -1463,17 +1233,20 @@ div.fatalError textarea { #headlines-frame { padding : 0px; border-color : #88b0f0; + border-left-width : 0px; border-right-width : 0px; margin-top : 0px; border-top-width : 0px; } -#headlines-toolbar_splitter { +#headlines-toolbar_splitter, #toolbar_splitter { display : none; } -#headlinesInnerContainer { - font-size : 12px; +#content-tabs { + margin : 0px; + padding : 0px; + border-width : 0px; } #toolbar { @@ -1485,14 +1258,21 @@ div.fatalError textarea { } #header { - padding : 4px; border-width : 0px; + text-align : right; + color : gray; + padding : 5px 5px 0px 0px; + margin : 0px; + position : absolute; + right : 0px; + top : 0px; + z-index : 5; } #footer { text-align : center; color : gray; - padding : 4px; + padding : 4px 4px 8px 4px; border-width : 0px; } @@ -1501,12 +1281,24 @@ div.fatalError textarea { border-color : #88b0f0; border-bottom-width : 0px; border-right-width : 0px; + border-left-width : 0px; + overflow : auto; } .dijitTreeLabel.Unread { font-weight : bold; } +.feedParam { + color : gray; + float : right; + margin-right : 1em; +} + +.dijitTreeLabel.Disabled, .labelParam.Disabled { + color : gray; +} + .dijitTreeRow.Error { color : red; } @@ -1515,7 +1307,103 @@ div.fatalError textarea { display : none; } -img.feedIcon { - max-width : 16px; - max-height : 16px; +img.feedIcon, img.tinyFeedIcon { + width : 16px; + height : 16px; +} + +div#feedlistLoading, div#filterlistLoading, div#labellistLoading { + text-align : center; + padding : 5px; + color : gray; +} + +div#feedlistLoading img, div#filterlistLoading img, div#labellistLoading { + margin-right : 5px; +} + +div#pref-tabs .dijitContentPane { + font-size : 12px; +} + +div#pref-tabs { + margin : 0px 5px 0px 5px; +} + +div#pref-tabs .dijitContentPane h3 { + font-size : 14px; + font-weight : bold; +} + +#pref-filter-wrap, #pref-filter-header, #pref-filter-content, +#pref-label-wrap, #pref-label-header, #pref-label-content, +#pref-user-wrap, #pref-user-header, #pref-user-content, +#pref-instance-wrap, #pref-instance-header, #pref-instance-content { + margin : 0px; + padding : 0px; + border-width : 0px; +} + +#userConfigTab, #labelConfigTab, #filterConfigTab, #pref-feeds-feeds, #instanceConfigTab { + padding : 0px; +} + +#errorButton { + color : red; +} + +span.labelFixedLength { + display : inline-block; + width : 70%; +} + +#filter_dlg_date_chk_box { + display : inline-block; +} + +.dijitDialog .dijitToolbar { + border : 1px solid #c0c0c0; +} + +a.bookmarklet { + color : #4684ff; + border : 1px solid #ecf4ff; + padding : 2px; +} + +#newVersionIcon { + margin-left : 5px; + vertical-align : middle; + position : relative; + top : -1px; +} + +.player { + display : inline-block; + color : gray; + font-size : 11px; + font-family : sans-serif; + border : 1px solid gray; + padding : 0px 4px 0px 4px; + margin : 0px 2px 0px 2px; + width : 50px; + text-align : center; + background : white; +} +.player.playing { + color : #00c000; + border-color : #00c000; +} + +.player:hover { + background : #f0f0f0; + cursor : pointer; +} + +#headlines-spacer { + height : 100%; + margin-left : 1px; + text-align : center; + padding : 1em; + color : gray; }