diff options
Diffstat (limited to 'skins/larry/styles.css')
| -rw-r--r-- | skins/larry/styles.css | 369 |
1 files changed, 369 insertions, 0 deletions
diff --git a/skins/larry/styles.css b/skins/larry/styles.css new file mode 100644 index 000000000..55e174348 --- /dev/null +++ b/skins/larry/styles.css @@ -0,0 +1,369 @@ +/** + * 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; +} + +input[type="text"], +input[type="password"], +textarea { + padding: 4px; + border: 1px solid #666; + border-radius: 4px; + box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2); + -moz-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2); + -webkit-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2); + -o-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2); +} + +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; +} + +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[disabled], +input.button[disabled]:hover, +input.button.mainaction[disabled] { + color: #aaa !important; +} + +input.mainaction { + font-weight: bold; +} + +a { + color: #0069a6; +} + +a:visited { + color: #0186ba; +} + +img { + border: 0; +} + +#message div.loading, +#message div.warning, +#message div.error, +#message div.notice, +#message div.confirmation { + 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; +} + +#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; +} + + +/*** 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; +} + +#toplogo { + padding-top: 2px; +} + +.topleft { + float: left; +} + +.topright { + float: right; +} + +#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/taskbar.png) -6px -367px no-repeat; + color: #fff; +} + +#taskbar a { + display: inline-block; + font-size: 110%; + font-weight: normal; + text-shadow: 1px 1px 1px black; + height: 30px; + padding: 16px 10px 0 40px; + background: url(images/taskbar.png) -1000px 0 no-repeat; +} + +#taskbar a.button-selected { + color: #3cf; + background-color: #2c2c2c; +} + +#taskbar a.button-mail { + background-position: 6px 13px; +} + +#taskbar a.button-mail:hover, +#taskbar a.button-mail.button-selected { + background-position: 6px -33px; +} + +#taskbar a.button-addressbook { + background-position: 6px -80px; +} + +#taskbar a.button-addressbook:hover, +#taskbar a.button-addressbook.button-selected { + background-position: 6px -126px; +} + +#taskbar a.button-settings { + background-position: 6px -172px; +} + +#taskbar a.button-settings:hover, +#taskbar a.button-settings.button-selected { + background-position: 6px -218px; +} + +#taskbar a.button-calendar { + background-position: 6px -264px; +} + +#taskbar a.button-calendar:hover, +#taskbar a.button-calendar.button-selected { + background-position: 6px -310px; +} + +#mainscreen { + position: absolute; + top: 88px; + left: 10px; + right: 10px; + bottom: 20px; +} + +.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; +} + +.listbox { + background: #d9ecf4; +} + + +/*** 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; +} + +#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; +} + |