gui/app/assets/stylesheets/application.css

   1 /*
   2  * Generic throught the Application
   3  *
   4  *= require_tree .
   5  *= require_self
   6  */
   7 body {
   8     background-image: url('/images/bg.jpg');
   9     background-repeat: no-repeat; background-position: top; background-attachment: fixed;
  10     background-size: 100%;
  11     color: #24244F;
  12 }
  13
  14 body {
  15     background-image: url('/images/bg.jpg'), url('/images/bg-bottom.jpg');
  16     background-repeat: no-repeat, repeat-y;
  17     background-position: top, bottom;
  18     background-attachment: fixed;
  19     background-size: 100%;
  20     color: #24244F;
  21 }
  22
  23 a { color: #5a64f1; font-weight: bold; text-decoration: none; }
  24
  25 .symbol { font-family: monospace; }
  26
  27 /*
  28  * Navigation
  29  *
  30  * */
  31 ul#smr_menu {
  32     color: white;
  33     position: absolute; top:0; right:0; min-width: 8em;
  34     margin: 0;
  35     padding-top: 10px; padding-bottom: 10px; padding-right: 15px;
  36     background-color: #A8914C; opacity: 0.9;
  37     border-bottom-left-radius: 30px;
  38     font-size: smaller; z-index: 100;
  39 }
  40 ul#smr_menu a { color: white; white-space: nowrap; }
  41 ul#smr_menu a:hover { color: lightgray;}
  42
  43
  44 div#date_nav { position: absolute; top: 2em; left: 8px;
  45     height: 2em; min-width: 10em; margin-bottom: 3em; }
  46 div#date_nav form { display: inline; }
  47 div#date_nav button,
  48 div#date_nav input { position: relative; top: 0px; bottom: 0px;
  49     height: 98%; padding: 1px 6px; margin: 0px; border-width: 2px; }
  50 div#date_nav input { font-size: 1.05em; font-weight: bold;
  51     text-align: center; cursor: default;
  52     color: buttontext; background-color: buttonface;
  53     box-sizing: border-box;
  54     border-style: ridge; border-color: buttonface; border-image: initial; }
  55
  56 td.smr_topic_menu { padding-bottom: 5px; }
  57 td.smr_topic_menu > a {
  58     padding: 1px 1px 2px 15px;
  59     display: block; float: left; width: 10em;
  60     color: grey; border-top: dashed 1px grey; border-right: dashed 1px grey;
  61     border-top-right-radius: 30px; }
  62
  63 div#smart_links_head span.symbol { display: block; font-size: larger; }
  64
  65 /*
  66  * Input Forms
  67  *
  68  * */
  69 fieldset { border: 1px solid; border-radius: 15px; }
  70 fieldset legend { color: #A8914C; font-weight: bold;
  71     background-color: #1d1c1c; border-radius: 15px;
  72     padding: 5px; }
  73 fieldset legend span { display: block; font-size: smaller;  }
  74 fieldset h3, fieldset h4 { margin-top: 5px; margin-bottom: 2px; }
  75
  76 form.filter_form input { }
  77 form.filter_form div > h5 { margin: 2px; font-color: white; }
  78
  79 form input,textarea, select { background-color: #d5d5d5; border-radius: 5px; }
  80 form input[type="submit"], select { padding: 2px 3px; }
  81
  82 // BUGFIX: make firefox 40 show form elements the way I said
  83 form input,
  84 form select,
  85 form textarea { -moz-appearance: none !important; }
  86
  87 /* Filter Form made by Controllers for filtering Items on the page
  88  * - there can be only one per page
  89  * - each controller is free to style its contents
  90  * - it should be positioned at the same place throughout the app
  91  * */
  92 form#controller_filter { position: fixed; top: 0px; right: 0px; width: 40%;
  93     max-height: 10em; overflow: hidden;
  94     padding-left: 5px; padding-top: 10px;
  95     background-color: #676767; opacity: 0.9; z-index: 20;
  96     border-bottom-left-radius: 15px;
  97     border-bottom-right-radius: 15px;
  98 }
  99 form#controller_filter > p,
 100 //form#controller_filter > div { overflow: auto; margin-right: 14em; }
 101
 102 form#controller_filter > div { height: 10em; overflow: auto; margin-right: 15em; }
 103 form#controller_filter > div > table { width: 100%; }
 104 form#controller_filter > div > table th { background-color: #515151; }
 105
 106 form#controller_filter > p select { display: block; }
 107
 108 /*
 109  * Table Generics
 110  *
 111  * */
 112 table { margin-left:auto; margin-right:auto; }
 113 table tr.separaterows > td { border-bottom: dashed 1px grey; }
 114 table tr.separaterows_rowspan > td:first-child { border-bottom: dashed 1px grey; }
 115 table tr.separaterows_rowspan + tr > td { border-bottom: dashed 1px grey; }
 116
 117 table thead th { color: #A8914C; padding: 0 1em 0 1em; }
 118 table thead th a { color: #A8914C; border-bottom: 1px dotted; }
 119 table thead th span { display: block; font-size: smaller; }
 120
 121 table tbody td:first-child span a,
 122 table tbody td:first-child a { font-size: smaller; }
 123
 124 /*
 125  * Heading Generics
 126  *
 127  * */
 128 h1, h2, h3, h4 { color: #A8914C; }
 129 h1 > em, h2 > em, h3 > em, h4 > em {
 130     font-size: smaller; display: block; margin: 0 0 1em 0.5em; font-weight: normal;
 131 }
 132
 133 /*
 134  * Notifications Area
 135  *
 136  * */
 137 ul#smr_notifications {
 138     position: fixed; bottom:0; right:0; width: 50%; z-index: 80;
 139     background-color: white; opacity: 0.9;
 140     border-top-left-radius: 30px;
 141     font-size: smaller; font-weight: bold;
 142     margin: 0;
 143     max-height: 20em; overflow: auto;
 144     padding-top: 10px; padding-bottom: 10px; padding-right: 15px; }
 145 ul#smr_notifications li { margin-right: 2em; }
 146 ul#smr_notifications li.notice { color: orange; }
 147 ul#smr_notifications li.alert { color: red; }
 148
 149 /*
 150  * Pagination
 151  *
 152  * */
 153 div.pagination { overflow: hidden; text-align: center; float: right; width: 66%; }
 154 div.pagination li {     float: left; padding: 0 0 0.5em 0.5em; list-style-type: none; }
 155
 156 /*
 157  * Area filled by Controllers (whichever was called)
 158  *
 159  * */
 160 div#controller_area {
 161     color: white;
 162     margin-top: 50px;
 163     padding: 1px 2% 0 2%;
 164     overflow: visible;
 165     background-color: black; opacity: 0.8; z-index: 1;
 166     border-radius: 30px;
 167     padding-bottom: 20px;
 168 }
 169
 170 /*
 171  * Topic related color indicators
 172  *
 173  * */
 174 .quote_today,.quote_within20min { color: darkgreen; }
 175 .quote_withinweek,.quote_withinhour { color: darkorange; }
 176 .quote_outdated { color: darkred; }
 177 .quote_empty { color: #1d1c1c; }
 178
 179 .profit { color: green; }
 180 .loss { color: red; }
 181 .even { color: darkorange; }
 182 .unvalued { color: grey; }
 183
 184 .comment_text { display:block; font-style: italic;
 185     padding: 1px 3px; white-space:pre-wrap; text-align: justify;
 186     background-color: #1d1c1c; border-radius: 5px; }
 187
 188 .pattern_match { color: black; background-color: yellow; display: inline;
 189     font-style: inherit; font-weight: inherit; font-size: inherit;
 190     text-decoration: inherit;
 191     padding: 0; margin: 0; }
 192
 193 /*
 194  * Layout for Overview Boxes
 195  * - there can be only one such layout per page
 196  * - for clarity, each sub-box should have a class or id named 'overview_XXX'
 197  *   to apply specific styles
 198  * - see controller .css files
 199  * */
 200
 201 div#overview { position: relative; width:100%; float:left; margin-bottom: 10px; }
 202 div#overview > div { position: relative; left:31%; clear:left; float:left; }
 203 div#overview > div > div { position: relative; right:25%; }
 204 div#overview div.overview_container { position:relative; float:left; height: 19em; width: 18em;
 205     background-color: #1d1c1c; border-radius: 15px; padding: 5px; margin: 5px; }
 206 div#overview div.overview_container table { width: 100%; }
 207
 208 /*
 209  * Summary Counter Boxes
 210  * - multiple boxes, each presenting one counter (li element)
 211  * - such as asset totals, etc ...
 212  * */
 213 div.overview_counters {
 214     position: relative; width:100%; overflow: hidden; float:left; }
 215 div.overview_counters ul {
 216     position: relative; left:50%; clear:left; float:left;
 217     list-style:none; margin:0; padding:0; text-align:center; }
 218 div.overview_counters ul li {
 219     position: relative; right:50%;
 220     border-radius: 30px;
 221     display:block; float:left; list-style:none; margin:0;
 222     padding: 5px 10px 5px 10px; margin-right: 10px; }
 223 div.overview_counters ul li { background-color: #1d1c1c; color: white; margin: 10px; }
 224 div.overview_counters ul li.profit { background-color: green; opacity: 0.6; color: white; }
 225 div.overview_counters ul li.loss { background-color: red; opacity: 0.6; color: white; }
 226 div.overview_counters ul li span { font-size: 1.5em; font-style: bold; }