From 656f4b6cd1de8d15544c57514dd7edd5188a705b Mon Sep 17 00:00:00 2001
From: Andrew Dolgov <fox@bah.spb.su>
Date: Sat, 30 Sep 2006 11:47:46 +0100
Subject: [PATCH] rework preferences tabs

---
 prefs.php               | 28 +++++++-------
 themes/compat/theme.css | 50 +++++++++++++++++-------
 tt-rss.css              | 86 +++++++++++++++++++++--------------------
 3 files changed, 95 insertions(+), 69 deletions(-)

diff --git a/prefs.php b/prefs.php
index 7ca10af3..8e16a6d8 100644
--- 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 e3546017..29a57af8 100644
--- 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 69657619..c6285a33 100644
--- 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;
+
 }
-- 
2.39.5