jappixmini/jappix/css/pageswitch.css

   1 /*
   2
   3 Jappix - An open social platform
   4 This is the page-switch CSS stylesheet for Jappix
   5
   6 -------------------------------------------------
   7
   8 License: AGPL
   9 Author: Vanaryon
  10 Last revision: 22/05/11
  11
  12 */
  13
  14 #page-switch {
  15         position: absolute;
  16         top: 15px;
  17         left: 10px;
  18         right: 10px;
  19         z-index: 9;
  20 }
  21
  22 #page-switch .chans {
  23         position: absolute;
  24         left: 0;
  25         right: 40px;
  26         top: 0;
  27         height: 25px;
  28         overflow: hidden;
  29 }
  30
  31 #page-switch .more {
  32         position: absolute;
  33         right: 0;
  34         top: 0;
  35 }
  36
  37 #page-switch .more-button {
  38         background-position: 6px -1372px;
  39         background-color: #d9e7ea;
  40         width: 7px;
  41         height: 17px;
  42         padding: 1px 6px;
  43         font-size: 0.9em;
  44         text-decoration: none;
  45         border-radius: 2px;
  46         -moz-border-radius: 2px;
  47         -webkit-border-radius: 2px;
  48 }
  49
  50 #page-switch .more-content {
  51         background-color: #d9e7ea;
  52         width: 200px;
  53         max-height: 400px;
  54         overflow: auto;
  55         position: absolute;
  56         margin: -2px 0 0 -181px;
  57         padding: 4px 0;
  58         font-size: 0.95em;
  59         border-top-left-radius: 3px;
  60         border-bottom-left-radius: 3px;
  61         border-bottom-right-radius: 3px;
  62         -moz-border-radius-topleft: 3px;
  63         -moz-border-radius-bottomleft: 3px;
  64         -moz-border-radius-bottomright: 3px;
  65         -webkit-border-top-left-radius: 3px;
  66         -webkit-border-bottom-left-radius: 3px;
  67         -webkit-border-bottom-right-radius: 3px;
  68 }
  69
  70 #page-switch .switcher {
  71         background-color: #d9e7ea;
  72         color: #17353b;
  73         height: 15px;
  74         padding: 5px 10px 5px 5px;
  75         margin: 0 2px;
  76         font-size: 0.85em;
  77         float: left;
  78         border-top-right-radius: 3px;
  79         border-top-left-radius: 3px;
  80         -moz-border-radius-topright: 3px;
  81         -moz-border-radius-topleft: 3px;
  82         -webkit-border-top-right-radius: 3px;
  83         -webkit-border-top-left-radius: 3px;
  84 }
  85
  86 #page-switch .more-content .switcher {
  87         background-color: #d9e7ea;
  88         float: none;
  89         margin: 0;
  90         font-size: 0.9em;
  91         border-radius: 0;
  92         -moz-border-radius: 0;
  93         -webkit-border-radius: 0;
  94 }
  95
  96 #page-switch .more-content .switcher .exit {
  97         display: block;
  98 }
  99
 100 #page-switch .more-button:hover,
 101 #page-switch .more-button:focus,
 102 #page-switch .switcher:hover,
 103 #page-switch .switcher:focus,
 104 #page-switch .more-content .switcher:hover,
 105 #page-switch .more-content .switcher:focus {
 106         background-color: #cedee1;
 107         cursor: pointer;
 108 }
 109
 110 #page-switch .more-button:active,
 111 #page-switch .switcher:active,
 112 #page-switch .more-content .switcher:active {
 113         background-color: #c3d3d7;
 114 }
 115
 116 #page-switch .switcher.activechan {
 117         background-color: #e8f1f3;
 118 }
 119
 120 #page-switch .more-content .switcher.activechan {
 121         background-color: #d1e0e3;
 122 }
 123
 124 #page-switch .icon {
 125         height: 16px;
 126         width: 16px;
 127         float: left;
 128 }
 129
 130 #page-switch .name {
 131         float: left;
 132         margin-left: 4px;
 133         max-height: 16px;
 134         max-width: 140px;
 135         overflow: hidden;
 136 }
 137
 138 #page-switch .exit {
 139         display: none;
 140         background-color: #bdd9dc;
 141         border: 1px solid #80aab0;
 142         color: #355e64;
 143         height: 14px;
 144         width: 13px;
 145         margin-left: 10px;
 146         font-size: 0.85em;
 147         text-align: center;
 148         text-decoration: none;
 149         float: right;
 150         border-radius: 2px;
 151         -moz-border-radius: 2px;
 152         -webkit-border-radius: 2px;
 153 }
 154
 155 #page-switch .exit:hover,
 156 #page-switch .exit:focus {
 157         background-color: #aac7cb;
 158 }
 159
 160 #page-switch .exit:active {
 161         background-color: #9bbdc1;
 162 }
 163
 164 #page-switch .activechan .exit {
 165         display: block;
 166         float: right;
 167 }
 168
 169 #page-switch .chan-newmessage {
 170         background-color: #f6edc3 !important;
 171 }
 172
 173 #page-switch .chan-newmessage:hover,
 174 #page-switch .chan-newmessage:focus {
 175         background-color: #f1eac0 !important;
 176 }
 177
 178 #page-switch .chan-newmessage:active {
 179         background-color: #ede4b8 !important;
 180 }
 181
 182 #page-switch .composing,
 183 #page-engine .list .user.composing {
 184         color: #217021 !important;
 185 }
 186
 187 #page-switch .paused,
 188 #page-switch .chan-unread .name,
 189 #page-engine .list .user.paused {
 190         color: #2431ac !important;
 191 }
 192
 193 #page-switch .active,
 194 #page-engine .list .user.active {
 195         color: #353535 !important;
 196 }
 197
 198 #page-switch .inactive,
 199 #page-engine .list .user.inactive {
 200         color: #585858 !important;
 201 }
 202
 203 #page-switch .gone {
 204         color: #851313 !important;
 205 }
 206
 207 #page-switch .channel .icon {
 208         background-position: 0 -55px;
 209 }