From a3644638aaf0418598196a870204e0b632a4c8ad Mon Sep 17 00:00:00 2001 From: Thomas Bruederli <thomas@roundcube.net> Date: Fri, 17 Apr 2015 06:28:40 -0400 Subject: [PATCH] Allow preference sections to define CSS class names --- skins/larry/settings.css | 301 +++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 239 insertions(+), 62 deletions(-) diff --git a/skins/larry/settings.css b/skins/larry/settings.css index 8de91d8..f889ef1 100644 --- a/skins/larry/settings.css +++ b/skins/larry/settings.css @@ -1,22 +1,20 @@ /** * Roundcube webmail styles for the Settings section * - * Copyright (c) 2011, The Roundcube Dev Team - * Screendesign by FLINT / B�ro f�r Gestaltung, bueroflint.com + * Copyright (c) 2012, 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$ */ #settings-sections { position: absolute; top: 0; left: 0; - width: 220px; + width: 200px; bottom: 0; } @@ -24,7 +22,7 @@ #settings-right { position: absolute; top: 0; - left: 232px; + left: 212px; right: 0; bottom: 0; } @@ -40,130 +38,211 @@ #preferences-box { position: absolute; top: 0; - left: 270px; + left: 272px; right: 0; bottom: 0; } #preferences-frame { border: 0; - border-radius: 4px 4px 0 0; + border-radius: 4px; } -#sections-table tbody td.section, -#settings-sections span.listitem a, -#settings-sections span.tablink a { +#preferences-details fieldset.advanced legend { + position: relative; + display: block; + width: 100%; + cursor: pointer; +} + +#preferences-details fieldset.advanced .propform { + display: none; +} + +#preferences-details fieldset.advanced .advanced-toggle { + position: absolute; + display: block; + top: 0px; + right: 6px; + text-decoration: none; + color: #666; + font-size: 11px; + width: 20px; + height: 18px; + background: url('images/listicons.png') 0 -1157px no-repeat; + text-indent: -5000px; + overflow: hidden; +} + +#preferences-details fieldset.advanced .collapsed .advanced-toggle { + background-position: -24px -1137px; +} + +#sections-table tbody td, +#sections-table .listitem span, +#settings-sections .listitem a, +#settings-sections .tablink a { padding-left: 36px; - background: url(images/listicons.png) -100px 0 no-repeat; + background-image: url(images/listicons.png); + background-position: -100px 0; + background-repeat: no-repeat; } /* note: support span.tablink because this is used by plugins */ -#settings-sections span.listitem a, -#settings-sections span.tablink a { +#settings-sections .listitem a, +#settings-sections .tablink a { background-position: 6px -862px; } -#settings-sections span.selected a, -#settings-sections span.tablink.selected a { +#settings-sections .selected a, +#settings-sections .tablink.selected a { background-position: 6px -887px; } -#settings-sections span.preferences a { +#settings-sections .preferences a { background-position: 6px -431px; } -#settings-sections span.preferences.selected a { +#settings-sections .preferences.selected a { background-position: 6px -455px; } -#settings-sections span.folders a, -#sections-table #rcmrowfolders td.section { +#settings-sections .folders a { background-position: 6px 2px; } -#settings-sections span.folders.selected a, -#sections-table #rcmrowfolders.selected td.section { +#settings-sections .folders.selected a { background-position: 6px -22px; } -#settings-sections span.identities a { +#sections-table #rcmrowfolders .section { + background-position: 4px 2px; +} + +#sections-table #rcmrowfolders.selected .section { + background-position: 4px -22px; +} + +#settings-sections .identities a { background-position: 6px -478px; } -#settings-sections span.identities.selected a { +#settings-sections .identities.selected a { background-position: 6px -502px; } -#settings-sections span.filter a { +#settings-sections .filter a { background-position: 6px -1746px; } -#settings-sections span.filter.selected a { +#settings-sections .filter.selected a { background-position: 6px -1770px; } -#settings-sections span.password a { +#settings-sections .password a { background-position: 6px -1795px; } -#settings-sections span.password.selected a { +#settings-sections .password.selected a { background-position: 6px -1819px; } -#sections-table #rcmrowgeneral td.section { - background-position: 6px -573px; +#settings-sections .responses a { + background-position: 6px -1972px; } -#sections-table #rcmrowgeneral.selected td.section { - background-position: 6px -598px; +#settings-sections .responses.selected a { + background-position: 6px -1996px; } -#sections-table #rcmrowmailbox td.section { - background-position: 6px -621px; +#sections-table.iconized .section:before { + display: inline-block; + font-family: 'FontAwesome'; + font-style: normal; + font-weight: normal; + font-size: 16px; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + transform: translate(0, 0); + position: relative; + top: 2px; + left: -2px; + width: 24px; + margin-left: -30px; + margin-right: 6px; + text-align: center; + text-shadow: 0px 1px 1px #fff; } -#sections-table #rcmrowmailbox.selected td.section { - background-position: 6px -646px; +#sections-table.iconized .section.general:before { + content: "\f108"; } -#sections-table #rcmrowcompose td.section { - background-position: 6px -670px; +#sections-table #rcmrowmailbox .section { + background-position: 4px -621px; } -#sections-table #rcmrowcompose.selected td.section { - background-position: 6px -695px; +#sections-table #rcmrowmailbox.selected .section { + background-position: 4px -646px; } -#sections-table #rcmrowmailview td.section { - background-position: 6px -718px; +#sections-table #rcmrowcompose .section { + background-position: 4px -670px; } -#sections-table #rcmrowmailview.selected td.section { - background-position: 6px -742px; +#sections-table #rcmrowcompose.selected .section { + background-position: 4px -695px; } -#sections-table #rcmrowaddressbook td.section { - background-position: 6px -766px; +#sections-table #rcmrowmailview .section { + background-position: 4px -718px; } -#sections-table #rcmrowaddressbook.selected td.section { - background-position: 6px -791px; +#sections-table #rcmrowmailview.selected .section { + background-position: 4px -742px; } -#sections-table #rcmrowserver td.section { - background-position: 6px -814px; +#sections-table #rcmrowaddressbook .section { + background-position: 4px -766px; } -#sections-table #rcmrowserver.selected td.section { - background-position: 6px -838px; +#sections-table #rcmrowaddressbook.selected .section { + background-position: 4px -791px; } -#sections-table #rcmrowcalendar td.section { - background-position: 6px -526px; +#sections-table #rcmrowserver .section { + background-position: 4px -814px; } -#sections-table #rcmrowcalendar.selected td.section { - background-position: 6px -550px; +#sections-table #rcmrowserver.selected .section { + background-position: 4px -838px; +} + +#sections-table #rcmrowcalendar .section { + background-position: 4px -526px; +} + +#sections-table #rcmrowcalendar.selected .section { + background-position: 4px -550px; +} + +#folderslist .boxtitle a.iconbutton.search { + background-position: -2px -317px; + cursor: pointer; + position: absolute; + right: 8px; + top: 8px; + width: 16px; +} + +#folderslist .listsearchbox + .scroller { + top: 34px; +} + +.listsearchbox select { + width: 100%; + margin: 0 0 4px 0; } #folderslist, @@ -171,32 +250,91 @@ position: absolute; top: 0; left: 0; - width: 300px; + width: 260px; bottom: 0; +} + +#identities-table { + width: 100%; + table-layout: fixed; +} + +#identities-table tbody td.mail { + width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +#identities-table tbody tr.readonly td { + font-style: italic; } #folder-details, #identity-details { position: absolute; top: 0; - left: 310px; + left: 272px; right: 0; bottom: 0; } -#subscription-table tr.root td { +#subscription-table li.root { font-size: 5%; + line-height: 5px; height: 5px; padding: 2px; } -#subscription-table td.subscribed { - padding: 3px 12px 3px 3px; - text-align: right; +#subscription-table li input { + position: absolute; + right: 8px; + top: 4px; + margin-right: 0; +} + +#subscription-table li a { + padding-right: 28px; +} + +.skinselection { + display: block; +} + +.skinselection span { + display: inline-block; + vertical-align: middle; + padding-right: 1em; +} + +.skinselection .skinname { + font-weight: bold; +} + +.skinselection .skinlicense, +.skinselection .skinlicense a { + font-style: italic; + color: #666; + text-decoration: none; +} + +.skinselection .skinlicense a:hover { + text-decoration: underline; +} + +img.skinthumbnail { + width: 64px; + height: 64px; + border: 1px solid #ccc; + background: #fff; + border-radius: 4px; } #pluginlist td.version { width: 5em; +} + +.webkit #pluginlist td.version { + width: 6em; } #pluginlist td.license, @@ -204,3 +342,42 @@ width: 8em; } +.webkit #pluginlist td.license, +.webkit #pluginlist td.source { + width: 9em; +} + +#rcmfd_signature { + width: 99%; + min-width: 390px; +} + +#rcmfd_signature_toolbar1 td, +#rcmfd_signature_toolbar2 td { + width: auto; +} + +.mailtoprotohandler-status { + padding-left: 1em; + font-style: italic; +} + +#pluginlist { + table-layout: auto; +} + +#pluginlist th.version { + width: 1%; +} + +.readtext { + width: 45em; + padding: 12px; + font-size: 12px; +} + +.readtext > h1, +.readtext > h2, +.readtext > h3 { + margin-top: 0; +} -- Gitblit v1.9.1