javaquery/demo-twitter/src/main/resources/org/apidesign/bck2brwsr/demo/twitter/twitterExample.css
author Jaroslav Tulach <jaroslav.tulach@apidesign.org>
Thu, 04 Apr 2013 13:12:17 +0200
branchmodel
changeset 931 9a7df12648b9
permissions -rw-r--r--
Knockout.js Twitter client example rewritten to Bck2Brwsr (just missing JSON access to tweets)
jaroslav@931
     1
/**
jaroslav@931
     2
 * Back 2 Browser Bytecode Translator
jaroslav@931
     3
 * Copyright (C) 2012 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
jaroslav@931
     4
 *
jaroslav@931
     5
 * This program is free software: you can redistribute it and/or modify
jaroslav@931
     6
 * it under the terms of the GNU General Public License as published by
jaroslav@931
     7
 * the Free Software Foundation, version 2 of the License.
jaroslav@931
     8
 *
jaroslav@931
     9
 * This program is distributed in the hope that it will be useful,
jaroslav@931
    10
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
jaroslav@931
    11
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
jaroslav@931
    12
 * GNU General Public License for more details.
jaroslav@931
    13
 *
jaroslav@931
    14
 * You should have received a copy of the GNU General Public License
jaroslav@931
    15
 * along with this program. Look for COPYING file in the top folder.
jaroslav@931
    16
 * If not, see http://opensource.org/licenses/GPL-2.0.
jaroslav@931
    17
 */
jaroslav@931
    18
jaroslav@931
    19
/*
jaroslav@931
    20
    Copied from knockout.js Twitter example:
jaroslav@931
    21
    http://knockoutjs.com/examples/twitter.html
jaroslav@931
    22
*/
jaroslav@931
    23
jaroslav@931
    24
.configuration, .tweets, .tweets td { font-family: Verdana; font-size: 13px; }
jaroslav@931
    25
.configuration { background-color: #DEDEDE; border: 2px solid gray; float:left; height: 40em; width: 40%; padding: 0.5em; border-right-width:0; }
jaroslav@931
    26
.tweets { width: 55%; border: 2px solid gray; height: 40em; overflow: scroll; overflow-x: hidden; background-color: Black; color: White; padding: 0.5em; position: relative; }
jaroslav@931
    27
.tweets table { border-width: 0;}
jaroslav@931
    28
.tweets tr { vertical-align: top; }
jaroslav@931
    29
.tweets td { padding: 0.4em 0.3em 1em 0.4em; border-width: 0; }
jaroslav@931
    30
.tweets img { width: 4em; }
jaroslav@931
    31
.tweetInfo { color: Gray; font-size: 0.9em; }
jaroslav@931
    32
.twitterUser { color: #77AAFF; text-decoration: none; font-size: 1.1em; font-weight: bold; }
jaroslav@931
    33
input.invalid { border: 1px solid red !important; background-color: #FFAAAA !important; }
jaroslav@931
    34
jaroslav@931
    35
.listChooser select, .listChooser button { vertical-align:top; }
jaroslav@931
    36
.listChooser select { width: 60%; font-size:1.2em; height:1.4em; }
jaroslav@931
    37
.listChooser button { width: 19%; height:1.68em; float:right; }
jaroslav@931
    38
jaroslav@931
    39
.currentUsers { height: 28em; overflow-y: auto; overflow-x: hidden; }
jaroslav@931
    40
.currentUsers button { float: right; height: 2.5em; margin: 0.1em; padding-left: 1em; padding-right: 1em; }
jaroslav@931
    41
.currentUsers ul, .configuration li { list-style: none; margin: 0; padding: 0 }
jaroslav@931
    42
.currentUsers li { height: 2.4em; font-size: 1.2em; background-color: #A7D0E3; border: 1px solid gray; margin-bottom: 0.3em; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-box-shadow: 0 0.2em 0.5em gray; -moz-box-shadow: 0 0.2em 0.5em gray; }
jaroslav@931
    43
.currentUsers li div { padding: 0.6em; }
jaroslav@931
    44
.currentUsers li:hover { background-color: #EEC; }
jaroslav@931
    45
jaroslav@931
    46
.configuration form label { width: 25%; display: inline-block; text-align:right; overflow: hidden; }
jaroslav@931
    47
.configuration form input { width:40%; font-size: 1.3em; border:1px solid silver; background-color: White; padding: 0.1em; }
jaroslav@931
    48
.configuration form button { width: 20%; margin-left: 0.3em; height: 2em; }
jaroslav@931
    49
jaroslav@931
    50
.loadingIndicator { position: absolute; top: 0.1em; left: 0.1em; font: 0.8em Arial; background-color: #229; color: White; padding: 0.2em 0.5em 0.2em 0.5em; display: none; }