17,233
edits
User:Locke/Sandbox: Difference between revisions
Jump to navigation
Jump to search
Want an adless experience? Log in or Create an account.
separating styles from functionality
(templates are really cool) |
(separating styles from functionality) |
||
| Line 1: | Line 1: | ||
<css> | <css> | ||
/* layout and borders */ | /* layout and borders */ | ||
.tabtarget { | .tabs2d.tabtarget { | ||
position: relative; | position: relative; | ||
margin-top: 41px; | margin-top: 41px; | ||
| Line 9: | Line 9: | ||
} | } | ||
.tabset { | .tabs2d .tabset { | ||
margin: 0px !important; | margin: 0px !important; | ||
} | } | ||
.tabseth { | .tabs2d .tabseth { | ||
position: absolute; | position: absolute; | ||
top: -42px; | top: -42px; | ||
} | } | ||
.tabsetv { | .tabs2d .tabsetv { | ||
float: left; | float: left; | ||
margin-left: -72px !important; | margin-left: -72px !important; | ||
} | } | ||
.tabset .tab2 { | .tabs2d .tabset .tab2 { | ||
display: block; | display: block; | ||
height: 40px; | height: 40px; | ||
| Line 32: | Line 32: | ||
} | } | ||
.tabsetv .tab2 { | .tabs2d .tabsetv .tab2 { | ||
width: 40px; | width: 40px; | ||
} | } | ||
.tabseth .tab2 { | .tabs2d .tabseth .tab2 { | ||
float: left; | float: left; | ||
} | } | ||
.tabseth .tab2:first-child { | .tabs2d .tabseth .tab2:first-child { | ||
margin-left: 3px; | margin-left: 3px; | ||
} | } | ||
.tabseth .tab2 + .tab2 { | .tabs2d .tabseth .tab2 + .tab2 { | ||
margin-left: -1px; | margin-left: -1px; | ||
} | } | ||
.tabsetv .tab2:first-child { | .tabs2d .tabsetv .tab2:first-child { | ||
margin-top: 3px; | margin-top: 3px; | ||
} | } | ||
.tabsetv .tab2 + .tab2 { | .tabs2d .tabsetv .tab2 + .tab2 { | ||
margin-top: -1px; | margin-top: -1px; | ||
} | } | ||
| Line 58: | Line 58: | ||
/* colors and hover effects */ | /* colors and hover effects */ | ||
.tab2 { | .tabs2d .tab2 { | ||
background-color: #e6e6e6; | background-color: #e6e6e6; | ||
} | } | ||
.tabtarget { | .tabs2d.tabtarget { | ||
background-color: #f6f6f6; | background-color: #f6f6f6; | ||
} | } | ||
.tabset .tab2.active { | .tabs2d .tabset .tab2.active { | ||
background-color: #f6f6f6; | background-color: #f6f6f6; | ||
} | } | ||
.tabseth .tab2.active { | .tabs2d .tabseth .tab2.active { | ||
border-bottom-color: #f6f6f6; | border-bottom-color: #f6f6f6; | ||
} | } | ||
.tabsetv .tab2.active { | .tabs2d .tabsetv .tab2.active { | ||
border-right-color: #f6f6f6; | border-right-color: #f6f6f6; | ||
} | } | ||
.tab2:hover { | .tabs2d .tab2:hover { | ||
background-color: #5a7db5 !important; | background-color: #5a7db5 !important; | ||
color: #fefefe; | color: #fefefe; | ||