rework preferences tabs

diff --git a/prefs.php b/prefs.php
index 7ca10af357abc538e5fc1bc3f38123c472e5e3ae..8e16a6d8652ab69854af5404eb90a96391081cbb 100644 (file)
--- a/prefs.php
+++ b/prefs.php
@@ -104,30 +104,30 @@ window.onload = init;
        <img src="<?php echo $theme_image_path ?>images/ttrss_logo.png" alt="Tiny Tiny RSS"/>   
 </div>
 
-<div id="prefTabs">
                <div class="return">
                        <a href="#" onclick="gotoMain()">Exit preferences</a>
                </div>
 
-               <input id="genConfigTab" class="prefsTab" type="submit" value="Preferences"
-                       onclick="selectTab('genConfig')">
-               <input id="feedConfigTab" class="prefsTab" type="submit" value="My Feeds"
-                       onclick="selectTab('feedConfig')">
+               <div class="firstTab">&nbsp;</div>
+
+               <div id="genConfigTab" class="prefsTab" 
+                       onclick="selectTab('genConfig')">Preferences</div>
+               <div id="feedConfigTab" class="prefsTab" 
+                       onclick="selectTab('feedConfig')">My Feeds</div>
                <?php if (ENABLE_FEED_BROWSER && !SINGLE_USER_MODE) { ?>
-               <input id="feedBrowserTab" class="prefsTab" type="submit" value="Other Feeds"
-                       onclick="selectTab('feedBrowser')">
+               <div id="feedBrowserTab" class="prefsTab" 
+                       onclick="selectTab('feedBrowser')">Other Feeds</div>
                <?php } ?>
-               <input id="filterConfigTab" class="prefsTab" type="submit" value="Content Filtering"
-                       onclick="selectTab('filterConfig')">
+               <div id="filterConfigTab" class="prefsTab" 
+                       onclick="selectTab('filterConfig')">Content Filtering</div>
                <?php if (get_pref($link, 'ENABLE_LABELS')) { ?>
-               <input id="labelConfigTab" class="prefsTab" type="submit" value="Label Editor"
-                       onclick="selectTab('labelConfig')">
+               <div id="labelConfigTab" class="prefsTab" 
+                       onclick="selectTab('labelConfig')">Label Editor</div>
                <?php } ?>
                <?php if ($_SESSION["access_level"] >= 10) { ?>
-               <input id="userConfigTab" class="prefsTab" type="submit" value="User Manager"
-                       onclick="selectTab('userConfig')">
+               <div id="userConfigTab" class="prefsTab" 
+                       onclick="selectTab('userConfig')">User Manager</div>
                <?php } ?>              
-</div>
 
 <div id="prefContent">
        <p>Loading, please wait...</p>

diff --git a/themes/compat/theme.css b/themes/compat/theme.css
index e3546017f42d44561bf4d64d147195d6b5f7e90c..29a57af8195c6c30136b2769771e6f3ae5617e57 100644 (file)
--- a/themes/compat/theme.css
+++ b/themes/compat/theme.css
@@ -422,8 +422,39 @@ div.helpResponse h2, div.infoBoxContents h2 {
        font-size : 12pt;
 }
 
-table.main td.prefsTabs {
-       padding-left : 5px;
+div.prefsTab {
+       border-width : 1px 1px 0px 1px;
+       border-color : #c0c0c0;
+       border-style : solid;
+       font-size : small;
+       position : relative;
+       bottom : 0px;
+       border-collapse : collapse;
+       -moz-border-radius : 3px;
+       min-width : 100px;
+       text-align : center;
+       background-image : url("images/vgrad_light_rev2.png");
+       background-position : top left;
+       background-repeat : repeat-x;
+
+}
+
+div.prefsTabSelected {
+       float : left;
+       border-width : 1px 1px 0px 1px;
+       border-color : #c0c0c0;
+       border-style : solid;
+       margin : 0px 0px 0px 5px;
+       padding : 3px 5px 3px 5px;
+       font-size : small;
+       position : relative;
+       bottom : 0px;
+       border-collapse : collapse;
+       -moz-border-radius : 3px;
+       font-weight : bold;
+       min-width : 100px;
+       text-align : center;
+       background : white;
 }
 
 input.prefsTab {
@@ -903,24 +934,16 @@ div.headlines_cdm {
        font-size : small;
 }
 
-#prefTabs {
-       border-width : 0px 0px 1px 0px;
-       border-color : #c0c0c0;
-       border-style : solid;
-       border-collapse : collapse;
-       padding : 0px 10px 0px 10px;
-}
-
-#prefTabs div.return {
+div.return {
        float : right;
        font-size : small;
 }
 
-#prefTabs div.return a {
+div.return a {
        color : #5050aa;
 }
 
-#prefTabs div.return a:hover {
+div.return a:hover {
        color : black;
 }
 
@@ -932,4 +955,5 @@ div.headlines_cdm {
        background-position : top left;
        background-repeat : repeat-x;
        font-size : small;
+       border-color : #c0c0c0;
 }

diff --git a/tt-rss.css b/tt-rss.css
index 69657619fab7bb99b1e8b814dc6ca68c6998acac..c6285a33bb37408fb95c2fa56ce93713f95ce6e5 100644 (file)
--- a/tt-rss.css
+++ b/tt-rss.css
@@ -528,44 +528,48 @@ input.extSearch {
        width : 100%;
 }
 
-table.main td.prefsTabs {
-       padding-left : 5px;
-/*               background-image : url("images/toolbar.png");
-       background-position : bottom left;
-       background-repeat : repeat-x; */
+div.prefsTab:hover {
+       cursor : pointer;
 }
 
-input.prefsTab {               
-       background-image : url("images/prefs_tab.png");
-       background-position : top left;
-       background-repeat : repeat-x;
-       border : 0px solid black;
-       padding : 2px 7px 2px 7px;
-       margin : 0px 1px 0px 0px;
-       width : 130px;
-       font-size : small;
-       background-color : white;
+div.firstTab {
+       float : left;
+       width : 5px;
 }
 
-input.prefsTabSelected {
-
-       background-image : url("images/active_tab.png");
-       background-position : top left;
-       background-repeat : repeat-x;
-       border : 0px solid black;
-       padding : 2px 7px 2px 7px;
-       margin : 0px 1px 0px 0px;
-       width : 130px;
-       font-weight : bold;
-       background-position : top left;
-       background-repeat : repeat-x;
+div.prefsTab {
+       float : left;
+       border-width : 1px 1px 0px 1px;
+       border-color : #88b0f0;
+       border-style : solid;
+       margin : 0px 0px 0px 5px;
+       padding : 3px 5px 3px 5px;
        font-size : small;
+       position : relative;
+       bottom : -1px;
+       border-collapse : collapse;
+       -moz-border-radius : 3px;
+       min-width : 100px;
+       text-align : center;
 }
 
-
-/*input.prefsTab:hover {
-       background : white;
-}*/
+div.prefsTabSelected {
+       float : left;
+       border-width : 1px 1px 0px 1px;
+       border-color : #88b0f0;
+       border-style : solid;
+       margin : 0px 0px 0px 5px;
+       padding : 3px 5px 3px 5px;
+       background-color : #ecf4ff;
+       font-size : small;
+       position : relative;
+       bottom : -1px;
+       border-collapse : collapse;
+       -moz-border-radius : 3px;
+       font-weight : bold;
+       min-width : 100px;
+       text-align : center;
+}
 
 div.warning {
        background : #fff7d5;
@@ -1265,24 +1269,17 @@ div.headlines_cdm {
        font-size : small;
 }
 
-#prefTabs {
-       border-width : 0px 0px 1px 0px;
-       border-color : #88b0f0;
-       border-style : solid;
-       border-collapse : collapse;
-       padding : 0px 10px 0px 10px;
-}
-
-#prefTabs div.return {
+div.return {
        float : right;
        font-size : small;
+       margin-right : 10px;
 }
 
-#prefTabs div.return a {
+div.return a {
        color : #4684ff;
 }
 
-#prefTabs div.return a:hover {
+div.return a:hover {
        color : black;
 }
 
@@ -1291,6 +1288,7 @@ div.headlines_cdm {
 }
 
 #prefContent {
+       clear : left;
        bottom : 20px;
        padding : 1em;
        min-height : 300px;
@@ -1298,4 +1296,8 @@ div.headlines_cdm {
        background-position : top left;
        background-repeat : repeat-x;
        font-size : small;
+       border-width : 1px 0px 0px 0px;
+       border-color : #88b0f0;
+       border-style : solid;
+
 }