thingspeak/app/assets/stylesheets/custom.css.erb
2014-05-22 13:14:24 -04:00

583 lines
19 KiB
Plaintext

/* bootstrap overrides */
code { word-wrap: break-word; white-space: normal; }
.navbar-collapse { max-height: 350px; }
.breadcrumb { margin-top: 10px; margin-bottom: 20px; } /* margins to make sure breadcrumb and h4.breadcrumb line up properly */
.table td { word-break: break-word; }
/* table sorting */
.tablesorter thead { cursor: pointer; background-color: #f0f0f0; }
.tablesorter thead i { float: right; margin-top: 2px; visibility: hidden; }
.tablesorter thead tr th:hover i { visibility: visible; }
/* homepage */
#home-motto { font-size: 2em; }
#home-motto h1 { font-size: 2em; color: #fff; }
#home-top { display: table; height: 500px; width: 100%; background: url('<%= asset_path("thingspeak_stars_bg.jpg") %>') no-repeat; background-size: 100% 500px; text-align: center; color: #fff; }
#home-top a { color: #fff; }
#home-top-center { display: table-cell; vertical-align: middle; position: relative; top: -20px; }
.panel-home { min-height: 180px; }
/* misc */
body { padding-top: 70px; }
#cheerlights_row { text-align: center; height: 180px; }
#cheerlights_row img { margin-top: 40px; }
.break-word { word-break: break-word; }
.btn-margin { margin: 2px; }
.col-pad { padding: 0 15px; }
.dismiss { float: right; cursor: pointer; position: relative; top: -12px; left: 7px; }
/* contact form */
#contact_form { display: none; }
#contact_link { cursor: pointer; }
#contact_link:hover { text-decoration: none; }
/* multiline forms */
.form-horizontal .multiline-label { margin-top: -10px; }
/* nested fields */
.nested-fields { border: 1px solid #d6d6d6; padding: 10px 10px 0 10px; max-width: 275px; }
/* prettify code */
.customcode,
.customcode .str,
.customcode .lit,
.customcode .pln { color: #00ab9b; }
/* response types */
.response-div { margin-top: 12px; font-size: 0.8em; }
.response { background-color: #ddd; margin: 0 1px; border: 1px solid #555; padding: 2px; font-weight: bold; color: #555; cursor: pointer; }
.response:hover { background-color: #eeb; }
.response.active { background-color: #beb; cursor: initial; }
.format-json,
.format-xml { display: none; }
.format-block { min-height: 200px; }
.format-block-lg { min-height: 350px; }
.format-block-xl { min-height: 400px; }
.format-block-xxl { min-height: 600px; }
.format-block-xxxl { min-height: 1000px; }
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -30px;
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
padding-top: 5px;
border-top: 1px solid #ddd;
height: 30px;
background-color: #f5f5f5;
}
#footer .container { background-color: #f5f5f5; }
@media (max-width: 767px) {
#footer span { display: block; text-align: center; float: none !important; }
}
/* old styles */
.infobox {
vertical-align:bottom;
}
.spanlink { cursor: pointer; }
.boldlink { font-weight: bold; }
.apps a:hover,
.apps:hover div { text-decoration: none; }
.commentarea { width: 300px; height: 80px; }
#login {
padding: 6px;
border: 1px solid #bbbbbb;
border-collapse: separate;
border-spacing: 3px;
background-color: #eeeeee;
background: -webkit-gradient(linear, left top, right top, from(#dddddd), to(#f5f5f5));
background: -moz-linear-gradient(left, #dddddd, #f5f5f5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#f5f5f5', GradientType=1);
}
#channel_info { padding-bottom: 20px; }
.signed_in_channel_header {display:inline-block; }
.public_private_icon {display:inline-block;}
.signed_in_channel_header { width:300px;height: 10px;}
#list_progress_bar { width:300px;height: 10px;}
.public_channel_box {
margin:5px;border-radius:7px;height:300px;border:solid 1px red;display:inline-block;width:260px;vertical-align:top
}
.public_channel_inner {
margin-left:10px;
margin-right:5px
}
.public_channel_name {
height: 11px;
font-size: 1.3em;
font-weight:bold;
color: #2565A5;
}
.public_channel_user {
height:15px;
margin-left:7px;
font-size: 0.9em;
}
.progressbar {
height:10px;
}
.public_channel_desc {
height:140px;
word-break:break-all;
}
.public_channel_url {
height:10px;
}
.public_channel_tags {
height:57px;
margin-bottom:10px;
overflow: hidden;
}
.public_channel_thumbnail {
position:absolute;border:2px solid red;display:none
}
h1.channel_info {
margin:0;
padding-top: 10px
}
div.list_tags {
padding-top:20px;
}
.channelLinks {
padding: 0 0 0 0;
margin-bottom: 15px;
}
.channelLinks li {
padding : 7px;
border: 1px solid #CCC ;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
display:inline;
margin:0 0 0 0;
list-style: none;
}
#comments { width: 100%; }
#commentsmain { float:left; width: 190px; background-color: #fffff9; border: 1px dashed #d0d0d0; padding: 5px; margin-right: 16px; overflow: hidden; display:none }
.commentlink { float:left;width:100%}
#public_statuses { width: 455px; height: 380px; overflow: auto; font-size: 1.5em; }
#public_statuses div { margin-left: 15px; }
.statusIFrame {
border : 1px solid #cccccc ;
background-color: #ffffff;
}
.userlogin { display:none; }
.login_info { font-weight: bold; text-align: right; font-size: 12px; }
.round { -moz-border-radius: 7px; -webkit-border-radius: 7px; }
.text_center { text-align: center; }
.big { font-size: 18px; }
.large { font-size: 20px; }
.xlarge { font-size: 30px; }
.small { font-size: 12px; }
.action { margin-right: 20px; position: relative; top: 35px; font-weight: bold; padding:10px;}
.action_reverse { margin-right: 20px; position: relative; top: 35px; font-weight: bold; background-color: #d62020; padding:8px; color: #000000;}
.action_reverse a { color: #FFFFFF;}
.section_header_reverse { margin: 15px 0 5px 0; display: inline-block; font-weight: bold; color:#FFFFFF; background-color: #d62020; padding:8px;}
.nicetable { font-size: 14px; border: 1px solid #bbbbbb; }
.nicetable-borderless { font-size: 14px; border: none; }
.nicetable-borderless p { margin-left:20px; margin-top:5px; margin-bottom:10px; }
.nicetable-borderless h3 { margin-bottom:0; }
.nicetable-borderless h3.signed_in_channel_header { margin-bottom:10px; }
.nicetable .header { font-weight: bold; background-color: #e5e5e5; }
.nicetable .header td { padding-top: 3px; }
.nicetable td { padding: 2px 10px; border-bottom: 1px solid #bbbbbb; word-wrap:word}
.nicetable .stripe { background-color: #f9f9f9; }
.nicetable .disabled { background-color: #eee; }
.nicetable .disabled a { color: #888; }
.fulltable { width: 95%; }
.fullform { width: 100%; margin-bottom: 1.5em;}
.deletecol { width: 1em; }
.table_no_header { font-size: 14px; }
.table_no_header td { padding: 2px 10px; }
.table_no_header .left { font-weight: bold; }
.max_width_400 { max-width:40; word-wrap:break-word; }
.helplink { float: right; margin-top: 3px; }
.votediv,
.votedivphoto,
.votedivlink { color: #3478e3; }
.votedivlink { padding-right: 20px; }
.votediv { float: right; display: none;}
.voteicon { padding: 2px; background: #f8f8f8; border: 1px solid #ddd; cursor: pointer; }
.voteicon:hover { text-decoration: none; }
.voteicon img { position: relative; top: 3px; }
.nestedcomment { padding-left: 30px; }
.commenttable { padding: 0; margin: 0; width: 100%; }
.commenttable td { padding: 4px 10px 4px 5px; }
.commentchannel { color: #f08600; font-weight: bold; }
.commentbody { color: #333333; }
.commentdiv { width:100%; padding: 5px 0 5px 0;
font-size: 12px;
border-top: 1px solid #aaa; }
.gravatar { border: 1px solid #999; }
.noavatar { width: 50px; height: 50px; border: 1px solid #ddd; color: #ddd; text-align: center; }
.noavatartext { padding-top: 5px; }
.prettydate { color: #aaa; }
.username a { color: #3478E3; font-weight: bold; }
.timeago {
font-size: 0.8em;
color: #ccc;
}
.pagination { font-size: 14px; }
.centerme { display: table; margin: 0 auto; }
.fixedwidth { width: 960px; display: table; margin: 0 auto; }
.code { margin: 10px 0; background-color: #fafafa; white-space: pre-wrap; font: 12px Monaco, Lucida Console, monospace; color: #000000; border: 1px solid #bbbbbb; padding: 10px; }
.apps { padding: 0 30px 40px 0; font-size: 20px; float: left; text-align: center; margin: 0 auto; width: 150px; }
input[type="text"].shortfield { width: 30px; }
input[type="text"].midfield { width: 120px; }
textarea.tweet { margin-top: 0.5em; width: 40em; height: 3em; }
/* error messages */
.errorExplanation,
#error_explanation { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; background-color: #f2dede; border-color: #ebccd1; color: #a94442; }
#error { color: red; }
.field_with_errors { display: inline; }
/*.error_box { margin-top: 15px; padding: 5px; background-color: #f99; color: #300; border: 1px solid #f66; }*/
.warning_box { margin: 15px 0 15px 0; padding: 10px; background-color: #fc3; color: #000; border: 1px solid #f90; }
/* main layout */
#maincontent { float: left; width:980px; padding-bottom: 20px; margin-left:10px; overflow:false}
#maincontent.thin { width: 400px; }
#maincontent.medium {
width: 500px;
}
#maincontent .thinghttptable { table-layout:fixed; width: 400px; word-wrap: break-word; }
#maincontent .thinghttptable .url { width: 100px; }
#maincontent .thinghttptable .apikey { width: 80px; }
input#upload_csv { padding-top:5px;margin:20px 0;}
#sidebar_old {
font-size: 14px;
width:50%;
padding-right: 10px ;
margin-top: 10px;
margin-left: 460px;
margin-right: 0;
border: 1px solid #CCC ;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
#sidebar_old ul {
list-style: none;
margin: 15px 20px 30px 0 ;}
#sidebar_old ul li ul li { margin:0; }
#sidebar_old h2 {
color:#666;
margin: 0 0 6px 0;
padding: 0 0;
}
#sidebar_old.wide { width: 520px; }
#sidebar_old.medium { width: 470px; }
#sidebar_old.narrow { width: 470px; margin-left: 520px;}
#sidebar .helplink,
#sidebar_old .helplink { float: right; margin-top: 5px; font-weight: normal; font-size: 12px; }
/* shortcuts */
.FL { float: left; }
.FR { float: right; }
.FN { float: none; }
.DT { display: table; }
.CL { clear: left; }
.CR { clear: right; }
.CB { clear: both; }
.UL { text-decoration: underline; }
.TAR { text-align: right; }
.TAC { text-align: center; }
.VAT { vertical-align: top; }
.PB10 { padding-bottom: 10px; }
.PR20 { padding-right: 20px; }
.PL20 { padding-left: 20px; }
.PL30 { padding-left: 30px; }
.MT10 { margin-top: 5px; }
.MR20 { margin-right: 20px; }
.MR60 { margin-right: 60px; margin-bottom: 20px; }
.ML20 { margin-left: 20px; }
.ML60 { margin-left: 60px; }
.W50 { width: 50%; }
.W100 { width: 100%; }
.left20 { position: relative; left: -20px; }
.up2 { position: relative; top: -2px; }
.up20 { position: relative; top: -20px; }
/* form styling */
input.video_narrow {width:100px; }
/* jQuery Nav */
#nav { list-style: none; padding:0 10px 0 92px; margin: 0;}
#nav li { float:left; margin: 0px 0px 0px 10px;padding:0px 15px 0px 0px;position:relative;font-size:14px;line-height: 1.4;zoom: 1}
#nav li:last-child {padding:0;}
#nav .current-cat a,
#nav .current_page_item a {color: #d62020; border-bottom:5px solid #2565A5;}
#nav .current-cat li a,
#nav .current_page_item li a {color: #000}
#nav .current-cat li a:hover,
#nav .current_page_item li a:hover {color: #d62020; border-bottom:5px solid #2565A5;}
#nav li a { text-transform: uppercase; font-weight: bold; text-decoration: none; color: #000;border:none; text-decoration: none; float: left; border-bottom:5px solid #FFFFFF;}
#nav li a:hover {color:#d62020; border-bottom:5px solid #aaa;}
#nav li span { width: 12px; height:20px; background: url('arrow-down.gif') no-repeat left 7px;margin:0;padding:0;position: absolute;right:0;top:0}
#nav ul {display:none}
#nav li span.child { width: 12px; height: 20px; background: url('arrow-right.gif') no-repeat left 10px;margin:0;padding:0;position: absolute;right:0;top:0; }
#nav li a.rss {background: url(rss_feed.png) right 0px no-repeat; padding:0px 30px 0px 0;}
#nav li a.rss:hover {background: url(rss_feed.png) right -24px no-repeat; padding:0px 30px 0px 0; border-bottom:0 solid #aaa;}
/* jQuery Overrides */
.ui-widget { font-size: .8em; }
.ui-widget-header {
border: 1px solid #0867A3;
background: #0867a3 none top right no-repeat;
}
.ui-progressbar {
height: 5px;
}
.ui-progressbar-value {
background-color: green;
}
.ui-widget-content a{
color:blue;
text-decoration: underline;
margin:0;
}
.ui-widget-content p {
margin:0 0 10px 10px;
}
.column { width: 470px; float: left; padding-bottom: 50px; padding-left: 5px; }
.portlet { margin: 0 1em 1em 0; }
.portlet-header { margin: 0.3em; padding: 7px 7px 7px 7px; }
.portlet-header .ui-icon { float: right; margin-top: -2px; cursor:pointer; cursor:hand;}
.portlet-content { padding: 0.4em; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }
.buttonlets {
float:left;
overflow:hidden;
max-width:95px;
}
.tweetButton {
width:80px;
}
.facebookButton {
width:85px;
}
.googleplusButton {
width:70px;
}
.padded {
margin-top:2px;
}
.ui-button {
height: 19px;
line-height:1em;
}
.ui-button-text-only .ui-button-text {
padding: 0.2em 1em 0.2em 0.4em ;
font-size: 12px;
}
.ui-state-active {
border: 1px solid #2565a5;
background: #ddd none 50% 50% repeat-x;
color: #2565a5;
}
.ui-state-default {
border: 1px solid #ccc;
color: #2565a5;
}
.ui-state-hover {
background: #ccc none 50% 50% repeat-x;
}
.topLink {
font-size: 16px;
}
.developerlink {
padding:7px;
margin-left:10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-bottom-left-radius: 15px;
-moz-border-bottom-right-radius: 15px;
background-color:#aaa;
}
.addpluginlink {
color:white;
padding:7px;
margin-left:10px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background-color:#aaa;
cursor:pointer;
}
.addpluginlink:hover {
background-color: #ccc;
}
.pluginrectangle {
display:none;
background-color:#aaa;
border-radius:5px;
position:absolute;
height:70%;
width:100%;
top:30px;
right:0;
}
.developerlink:hover {
background-color: #ccc;
}
.developerlink a {
color : white;
text-decoration:none;
}
.channelInfo {
max-width: 500px;
}
.channelDescription {
width: 450px;
height: 60px;
}
.socialButtons {
float:right;
display:inline;
}
.dev-info-dialog {
border : 2px solid #bbb;
}
.dev-info-dialog .ui-dialog-titlebar {
background-color: #aaa;
color : white;
}
.dev-info-dialog a {
text-decoration : underline;
}
.ui-tabs {
height:100%;
}
.dev-info-dialog ul {
/* display: inline; */
list-style-type: none;
background-color: whitesmoke;
}
#devInfo {
font-size: 1.2em;
}
.dev-info-dialog ul li {
display: inline;
list-style-type: none;
}
.dev_info_table1 {
margin-bottom:10px;
}
.dev_info_table2 {
margin-left: 10px;
}
.dev_info_table2 td {
max-width:300px;
}
.watchButtonLabel {
white-space: nowrap;
padding-right:10px;
}
.watchButtonImage {
float:left;background-position:left;background-image:url('eye.png');background-repeat:no-repeat;width:19px;height:16px;
}
.watchButtonPadding {
padding-right : 5px;
}
.chartOptions {
display: none;
}
.fade {
display: none;
font-size : 1.2em;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #d82020; background: #f5cece url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #d82020; }
.ui-state-hover a, .ui-state-hover a:hover { color: #d82020; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #d82020; background: #f5cece url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #d82020; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #d82020; text-decoration: none; }
.ui-widget :active { outline: none; }
.ui-tabs .ui-tabs-panel {
padding-top:0;
}
.addportlet {
padding:5px;
width:50px;
margin:5px;
border-radius:5px;
border : 2px solid red;
cursor: pointer;
display:inline-block;
}
.channel_stats_location {
clear:right; float:right;width:475px;padding-top:23px
}
.channel_stats_text {
font-weight:bold;font-size:1.2em
}
.channel_time_text {
color:black !important; font-size:1em !important;
}