You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
roundcubemail/skins/larry/styles.css

898 lines
20 KiB
CSS

/**
* Roundcube webmail styles for skin "Larry"
*
* Copyright (c) 2011, The Roundcube Dev Team
* Screendesign by FLINT / Büro für Gestaltung, bueroflint.com
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original autors in the README file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*
* $Id$
*/
body {
font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
background: url(images/linen.jpg) repeat #d1d5d8;
margin: 0;
}
a {
color: #0069a6;
}
a:visited {
color: #0186ba;
}
img {
border: 0;
}
input[type="text"],
input[type="password"],
textarea {
padding: 4px;
border: 1px solid #b2b2b2;
border-radius: 4px;
box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1);
-moz-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1);
-webkit-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1);
-o-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1);
}
input[type="text"]:focus,
input[type="password"]:focus,
input.button:focus,
textarea {
border-color: #4787b1;
box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
-moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
-webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
-o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
}
input.placeholder,
textarea.placeholder {
color: #aaa;
}
/*** buttons ***/
input.button {
color: #dddddd;
font-size: 110%;
text-shadow: 1px 1px 1px #333;
padding: 4px 12px;
border: 1px solid #465864;
border-radius: 5px;
background: #7a7b7d;
background: -moz-linear-gradient(top, rgba(123,123,123,1) 0%, rgba(96,96,96,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(123,123,123,1)), color-stop(100%,rgba(96,96,96,1))); /* Chrome,Safari4+ */
background: -o-linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* W3C */
}
input.button:hover {
color: #ededed;
box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6);
-moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6);
-webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6);
-o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6);
}
input.button:active {
color: #fff;
background: -moz-linear-gradient(top, rgba(92,92,92,1) 0%, rgba(123,123,123,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(92,92,92,1)), color-stop(100%,rgba(123,123,123,1)));
background: -o-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%);
background: -ms-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%);
background: linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%);
}
input.button.mainaction {
color: #ededed;
border-color: #1f262c;
background: #505050;
background: -moz-linear-gradient(top, rgba(80,80,80,1) 0%, rgba(42,46,49,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(80,80,82,1)), color-stop(100%,rgba(42,46,49,1)));
background: -o-linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%);
background: -ms-linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%);
background: linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%);
}
input.button.mainaction:active {
color: #fff;
background: rgba(42,46,49,1);
background: -moz-linear-gradient(top, rgba(42,46,49,1) 0%, rgba(80,80,80,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(42,46,49,1)), color-stop(100%,rgba(80,80,80,1)));
background: -o-linear-gradient(top, rgba(42,46,49,1) 0%,rgba(80,80,80,1) 100%);
background: -ms-linear-gradient(top, rgba(42,46,49,1) 0%,rgba(80,80,80,1) 100%);
background: linear-gradient(top, rgba(42,46,49,1) 0%,rgba(80,80,80,1) 100%);
}
input.button[disabled],
input.button[disabled]:hover,
input.button.mainaction[disabled] {
color: #aaa !important;
}
input.mainaction {
font-weight: bold;
}
/** link buttons **/
a.button {
display: inline-block;
margin: 0 3px;
padding: 2px 5px;
color: #525252;
text-shadow: 1px 1px 1px #fff;
border: 1px solid #ddd;
border-radius: 4px;
background: #f7f7f7;
background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6));
background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
box-shadow: 0 2px 2px 0 #999;
-o-box-shadow: 0 2px 2px 0 #999;
-webkit-box-shadow: 0 2px 2px 0 #999;
-moz-box-shadow: 0 2px 2px 0 #999;
text-decoration: none;
}
a.button.disabled {
color: #999;
}
a.button.disabled span.inner {
opacity: 0.4;
}
a.button.pressed,
a.button:active {
background: #e6e6e6;
background: -moz-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#f9f9f9));
background: -o-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%);
background: -ms-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%);
background: linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%);
}
.pagenav a.button {
font-weight: bold;
border-color: #e6e6e6;
background: #f7f7f7;
background: -moz-linear-gradient(top, #d8d8d8 0%, #bababa 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d8d8), color-stop(100%,#bababa));
background: -o-linear-gradient(top, #d8d8d8 0%, #bababa 100%);
background: -ms-linear-gradient(top, #d8d8d8 0%, #bababa 100%);
background: linear-gradient(top, #d8d8d8 0%, #bababa 100%);
}
.pagenav a.button.pressed {
background: #bababa;
background: -moz-linear-gradient(top, #bababa 0%, #d8d8d8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%,#d8d8d8));
background: -o-linear-gradient(top, #bababa 0%, #d8d8d8 100%);
background: -ms-linear-gradient(top, #bababa 0%, #d8d8d8 100%);
background: linear-gradient(top, #bababa 0%, #d8d8d8 100%);
}
.pagenav a.button span.inner {
display: inline-block;
width: 12px;
height: 12px;
text-indent: 1000px;
overflow: hidden;
background: url(images/buttons.png) -8px -211px no-repeat;
}
.pagenav a.prevpage span.inner {
background-position: -8px -226px;
}
.pagenav a.nextpage span.inner {
background-position: -30px -226px;
}
.pagenav a.lastpage span.inner {
background-position: -30px -211px;
}
.pagenav .countdisplay {
display: inline-block;
padding:0 0.5em;
font-size: 11px;
text-shadow: 1px 1px 1px #fff;
min-width: 20em;
}
a.iconbutton {
display: inline-block;
width: 24px;
height: 18px;
text-decoration: none;
background: url(images/buttons.png) -1000px 0 no-repeat;
}
a.iconbutton.searchoptions {
background-position: -2px -337px;
}
a.iconbutton.reset {
background-position: -25px -337px;
}
/*** message bar ***/
#message div.loading,
#message div.warning,
#message div.error,
#message div.notice,
#message div.confirmation,
#message-objects div.notice {
color: #555;
font-weight: bold;
padding: 6px 40px 6px 25px;
display: inline-block;
white-space: nowrap;
background: url(images/messages.png) 0 5px no-repeat;
cursor: default;
}
#message div.warning {
color: #960;
background-position: 0 -25px;
}
#message div.error {
color: #cf2734;
background-position: 0 -55px;
}
#message div.confirmation {
color: #093;
background-position: 0 -86px;
}
#message div.loading {
background: url(images/ajaxloader.gif) 2px 6px no-repeat;
}
#message.statusbar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 27px;
padding-left: 8px;
border-top: 1px solid #ddd;
border-radius: 0 0 4px 4px;
background: #eaeaea;
background: -moz-linear-gradient(top, #eaeaea 0%, #c8c8c8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaeaea), color-stop(100%,#c8c8c8));
background: -o-linear-gradient(top, #eaeaea 0%, #c8c8c8 100%);
background: -ms-linear-gradient(top, #eaeaea 0%, #c8c8c8 100%);
background: linear-gradient(top, #eaeaea 0%, #c8c8c8 100%);
}
/*** basic page layout ***/
#topline {
height: 18px;
background: url(images/linen_header.jpg) repeat #666;
border-bottom: 1px solid #4f4f4f;
padding: 2px 0 2px 10px;
font-size: 11px;
color: #aaa;
}
#topnav {
height: 46px;
margin-bottom: 10px;
padding: 0 0 0 10px;
background: #3a3a3a;
background: -moz-linear-gradient(top, rgba(64,64,64,1) 0%, rgba(6,6,6,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,64,64,1)), color-stop(100%,rgba(6,6,6,1)));
background: -o-linear-gradient(top, rgba(64,64,64,1) 0%,rgba(6,6,6,1) 100%);
background: -ms-linear-gradient(top, rgba(64,64,64,1) 0%,rgba(6,6,6,1) 100%);
background: linear-gradient(top, rgba(64,64,64,1) 0%,rgba(6,6,6,1) 100%);
}
#topline a,
#topnav a {
color: #eee;
text-decoration: none;
}
#topline a:hover,
#topnav a:hover {
text-decoration: underline;
}
#toplogo {
padding-top: 2px;
}
.topleft {
float: left;
}
.topright {
float: right;
}
.closelink {
display: inline-block;
padding: 2px 10px 2px 20px;
}
#topline span.username {
padding-right: 1em;
}
#topline a.support-link {
display: inline-block;
padding: 2px 0;
}
#topline a.button-logout {
display: inline-block;
padding: 2px 10px 2px 20px;
background: url(images/buttons.png) -6px -193px no-repeat;
color: #fff;
}
/*** taskbar ***/
#taskbar a {
display: inline-block;
height: 34px;
padding: 12px 10px 0 6px;
}
#taskbar a span.button-inner {
display: inline-block;
font-size: 110%;
font-weight: normal;
text-shadow: 1px 1px 1px black;
padding: 5px 0 0 34px;
height: 19px;
background: url(images/buttons.png) -1000px 0 no-repeat;
}
#taskbar a.button-selected {
color: #3cf;
background-color: #2c2c2c;
}
#taskbar a.button-mail span.button-inner {
background-position: 0 2px;
}
#taskbar a.button-mail:hover span.button-inner,
#taskbar a.button-mail.button-selected span.button-inner {
background-position: 0 -22px;
}
#taskbar a.button-addressbook span.button-inner {
background-position: 0 -48px;
}
#taskbar a.button-addressbook:hover span.button-inner,
#taskbar a.button-addressbook.button-selected span.button-inner {
background-position: 0 -72px;
}
#taskbar a.button-settings span.button-inner {
background-position: 0 -96px;
}
#taskbar a.button-settings:hover span.button-inner,
#taskbar a.button-settings.button-selected span.button-inner {
background-position: 0 -120px;
}
#taskbar a.button-calendar span.button-inner {
background-position: 0 -144px;
}
#taskbar a.button-calendar:hover span.button-inner,
#taskbar a.button-calendar.button-selected span.button-inner {
background-position: 0 -168px;
}
#mainscreen {
position: absolute;
top: 88px;
left: 10px;
right: 10px;
bottom: 20px;
}
#mainscreen.offset {
top: 130px;
}
.uibox {
border: 1px solid #a3a3a3;
border-radius: 4px;
box-shadow: 0 0 2px #999;
-o-box-shadow: 0 0 2px #999;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
background: #fff;
}
/*** lists ***/
.listbox {
background: #d9ecf4;
overflow: hidden;
}
.listbox .scroller {
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
overflow: auto;
}
.listbox .scroller.wfooter {
bottom: 42px;
}
.listbox .boxtitle + .scroller {
top: 34px;
}
.boxtitle,
.uibox .listing thead td {
font-size: 12px;
font-weight: bold;
padding: 10px 8px 8px 8px;
margin: 0;
text-shadow: 1px 1px 1px #fff;
border-bottom: 1px solid #bbd3da;
}
.uibox .boxtitle,
.uibox .listing thead td {
background: #b0ccd7;
color: #004458;
border-radius: 4px 4px 0 0;
}
.listbox .listitem,
.listing tbody td,
.listing li {
font-size: 11px;
display: block;
border-top: 1px solid #fff;
border-bottom: 1px solid #bbd3da;
cursor: default;
font-weight: normal;
}
.listbox .listitem a,
.listing tbody td,
.listing li a {
display: block;
color: #376572;
text-shadow: 1px 1px 1px #fff;
text-decoration: none;
cursor: default;
padding: 8px 8px 4px 8px;
}
.listbox .listitem.selected,
.listing tbody tr.selected td,
.listing li.selected {
color: #004458;
font-weight: bold;
}
ul.listing {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
table.listing {
width: 100%;
border-spacing: 0;
}
.listbox .boxfooter {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 42px;
border-top: 1px solid #ccdde4;
background: #d9ecf4;
-webkit-box-shadow: inset 0 1px 0 0 #fff;
-moz-box-shadow: inset 0 1px 0 0 #fff;
box-shadow: inset 0 1px 0 0 #fff;
}
.boxfooter .listbutton {
display: inline-block;
text-decoration: none;
width: 48px;
border-right: 1px solid #fff;
background: #c7e3ef;
padding: 3px 0;
margin-top: 1px;
}
.boxfooter .listbutton .inner {
display: inline-block;
width: 48px;
height: 35px;
text-indent: -1000px;
background: url(images/buttons.png) -1000px 0 no-repeat;
}
.boxfooter .listbutton.groupactions .inner {
background-position: 4px -1212px;
}
.errobox h3 {
font-size: 16px;
margin-top: 0;
}
/*** iFrames ***/
body.iframe {
background: #fff;
margin: 38px 0 20px 0;
}
body.iframe .boxtitle {
position: fixed;
top: 0;
left: 0;
width: 100%;
color: #777;
background: #eee;
background: -moz-linear-gradient(top, #eee 0%, #dfdfdf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#dfdfdf));
background: -o-linear-gradient(top, #eee 0%, #dfdfdf 100%);
background: -ms-linear-gradient(top, #eee 0%, #dfdfdf 100%);
background: linear-gradient(top, #eee 0%, #dfdfdf 100%);
border-bottom: 1px solid #ccc;
}
.boxcontent {
padding: 10px;
}
.footerleft {
padding: 0 12px;
}
.propform fieldset {
margin-bottom: 20px;
border: 0;
padding: 0;
}
.propform fieldset legend {
display: block;
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
table.propform {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
table.propform td {
width: 80%;
padding: 4px 10px;
background: #eee;
border-bottom: 2px solid #fff;
}
table.propform td.title {
width: 20%;
color: #333;
padding-right: 20px;
white-space: nowrap;
}
/*** Login form ***/
#login-form {
position: relative;
width: 580px;
margin: 20ex auto 2ex auto;
}
#login-form .box-inner {
width: 430px;
background: url(images/linen_login.jpg) top left no-repeat #5c5c5c;
margin: 0 50px;
padding: 10px 24px 24px 24px;
border: 1px solid #333;
border-radius: 5px;
box-shadow: inset 0 0 1px #ccc;
-o-box-shadow: inset 0 0 1px #ccc;
-webkit-box-shadow: inset 0 0 1px #ccc;
-moz-box-shadow: inset 0 0 1px #ccc;
}
#login-form .box-bottom {
background: url(images/login_shadow.png) top center no-repeat;
margin-top: -3px;
padding-top: 10px;
}
#login-form td.input {
padding: 8px;
}
#login-form input[type="text"],
#login-form input[type="password"] {
width: 24em;
border-color: #666;
}
#login-form input.button {
color: #444;
text-shadow: 1px 1px 1px #fff;
border-color: #f9f9f9;
background: #f9f9f9;
background: -moz-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(226,226,226,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(226,226,226,1)));
background: -o-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(226,226,226,1) 100%);
background: -ms-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(226,226,226,1) 100%);
background: linear-gradient(top, rgba(249,249,249,1) 0%,rgba(226,226,226,1) 100%);
}
#login-form input.button:active {
color: #333;
background: -moz-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(249,249,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220,220,220,1)), color-stop(100%,rgba(249,249,249,1)));
background: -o-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(249,249,249,1) 100%);
background: -ms-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(249,249,249,1) 100%);
background: linear-gradient(top, rgba(220,220,220,1) 0%,rgba(249,249,249,1) 100%);
}
#login-form td.title {
color: #cecece;
text-shadow: 1px 1px 1px black;
text-align: right;
padding-right: 1em;
}
#login-form p.buttons {
margin-top: 2em;
text-align: center;
}
#login-form #logo {
margin-bottom: 20px;
}
#login-form #message {
min-height: 40px;
padding: 5px 25px;
}
#login-form #message div {
display: block;
width: 200px;
margin: 0 auto;
}
#bottomline {
font-size: 90%;
text-align: center;
margin-top: 2em;
}
/*** quicksearch **/
#quicksearchbar {
width: 100%;
}
#quicksearchbar input {
width: 176px;
margin: 0;
padding: 5px 26px 5px 38px;
background: #f1f1f1;
border-color: #a3a3a3;
font-weight: bold;
}
#quicksearchbar #searchmenulink {
position: absolute;
top: 5px;
left: 8px;
}
#quicksearchbar #searchreset {
position: absolute;
top: 4px;
right: 3px;
}
/*** toolbar ***/
.toolbar a.button {
text-align: center;
font-size: 10px;
color: #555;
min-width: 55px;
max-width: 75px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 28px 2px 2px 2px;
text-shadow: 1px 1px 1px #eee;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
background: url(images/buttons.png) -100px 0 no-repeat transparent;
border: 0;
}
.toolbar a.button.disabled {
opacity: 0.5;
}
.dropbutton {
display: inline-block;
position: relative;
}
.dropbutton .dropbuttontip {
display: block;
position: absolute;
right: 2px;
top: 0;
height: 42px;
width: 18px;
background: url(images/buttons.png) -24px -1049px no-repeat;
cursor: pointer;
}
.dropbutton .dropbuttontip:hover {
background-position: 0 -1049px;
}
.toolbar a.button.back {
background-position: 0 -370px;
}
.toolbar a.button.checkmail {
background-position: center -410px;
}
.toolbar a.button.compose {
background-position: center -450px;
}
.toolbar a.button.reply {
background-position: center -490px;
}
.toolbar a.button.reply-all {
background-position: center -530px;
}
.toolbar a.button.forward {
background-position: center -570px;
}
.toolbar a.button.delete {
background-position: center -610px;
}
.toolbar a.button.markmessage,
.toolbar a.button.more {
background-position: center -770px;
}
/*** popup menus ***/
.popupmenu {
display: none;
position: absolute;
top: 32px;
left: 90px;
width: auto;
background: #444;
border: 1px solid #999;
z-index: 240;
border-radius: 4px;
box-shadow: 0 2px 6px 0 #333;
-moz-box-shadow: 0 2px 6px 0 #333;
-webkit-box-shadow: 0 2px 6px 0 #333;
-o-box-shadow: 0 2px 6px 0 #333;
}
ul.toolbarmenu {
margin: 0;
padding: 0;
list-style: none;
}
ul.toolbarmenu li {
color: #fff;
font-size: 11px;
white-space: nowrap;
min-width: 130px;
margin: 0;
border-top: 1px solid #5a5a5a;
border-bottom: 1px solid #333;
}
ul.toolbarmenu li:first-child {
border-top: 0;
}
ul.toolbarmenu li:last-child {
border-bottom: 0;
}
ul.toolbarmenu li a {
display: block;
color: #666;
text-shadow: 1px 1px 1px #333;
text-decoration: none;
min-height: 14px;
padding: 6px 10px 6px 10px;
}
ul.toolbarmenu li a.active {
color: #fff;
}
ul.toolbarmenu li a.active:hover {
background-color: #00aad6;
background: -moz-linear-gradient(top, #00aad6 0%, #008fc9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00aad6), color-stop(100%,#008fc9));
background: -o-linear-gradient(top, #00aad6 0%, #008fc9 100%);
background: -ms-linear-gradient(top, #00aad6 0%, #008fc9 100%);
background: linear-gradient(top, #00aad6 0%, #008fc9 100%);
}
ul.toolbarmenu.iconized li a {
padding-left: 28px;
}
ul.toolbarmenu li label {
display: block;
color: #fff;
padding: 4px 8px;
text-shadow: 1px 1px 1px #333;
}