github/reddit
1
1
Fork 0
mirror of https://github.com/reddit-archive/reddit.git synced 2026-04-27 03:00:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

Changed compact top bar to be cross-browser friendly

Browse Source 
Replaced fancy display-box system with a more robust, but less flexible, absolute layout.

Also, added the default flair styles to compact.scss, as they appear to have been missed earlier, and compass was clobbering them out of compact.css
This commit is contained in:
Paradox
2011-08-10 12:09:01 -07:00
committed by Max Goodman
parent 9e098475b1
commit f87ec2c89c
2 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
r2/r2/public/static/css/compact.css
View File

@@ -89,9 +89,11 @@ button.button { padding: 0 5px; }
.unhide-icon { background-image: url("/static/compact/unhide.png"); /*SPRITE*/ }
/*Toolbar*/
#topbar { background-color: #A8C4E0; background-color: #7f7f7f; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cee3f8), color-stop(100%, #a8c4e0)); background: -webkit-linear-gradient(top, #cee3f8, #a8c4e0); background: -moz-linear-gradient(top, #cee3f8, #a8c4e0); background: -o-linear-gradient(top, #cee3f8, #a8c4e0); background: linear-gradient(top, #cee3f8, #a8c4e0); border-bottom: 1px solid #7599BD; border-top: 1px solid #DCEAF7; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0px 10px; display: -moz-box; display: -webkit-box; display: box; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; box-orient: horizontal; -moz-box-pack: justify; -webkit-box-pack: justify; box-pack: justify; -moz-box-align: center; -webkit-box-align: center; box-align: center; }
#topbar { background-color: #A8C4E0; background-color: #7f7f7f; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cee3f8), color-stop(100%, #a8c4e0)); background: -webkit-linear-gradient(top, #cee3f8, #a8c4e0); background: -moz-linear-gradient(top, #cee3f8, #a8c4e0); background: -o-linear-gradient(top, #cee3f8, #a8c4e0); background: -ms-linear-gradient(top, #cee3f8, #a8c4e0); background: linear-gradient(top, #cee3f8, #a8c4e0); border-bottom: 1px solid #7599BD; border-top: 1px solid #DCEAF7; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0px 10px; height: 40px; position: relative; }
#topbar #header-img { width: 90px; }
#topbar > h1 { color: #444; font-size: 18px; font-weight: bold; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 0 10px; padding: 0; padding-top: 16px; text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px; -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; }
#topbar .left { position: absolute; left: 0; bottom: 3px; overflow: hidden; max-height: 40px; }
#topbar .right { position: absolute; right: 10px; bottom: 1px; }
#topbar > h1 { color: #444; font-size: 18px; font-weight: bold; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 0 10px; padding: 0; padding-top: 16px; text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px; -moz-box-flex: 1; -webkit-box-flex: 1; -ms-box-flex: 1; box-flex: 1; }
#topbar > h1 a { color: inherit; text-decoration: inherit; }

28
r2/r2/public/static/css/compact.scss
View File

@@ -317,20 +317,25 @@ button.button {
border-bottom: 1px solid #7599BD; border-top: 1px solid #DCEAF7;
@include box-sizing(border-box);
padding: 0px 10px; //Left and right padding
height: 40px;
position: relative;
@include display-box();
@include box-orient(horizontal); //Horizontal spread
@include box-pack(justify); //Divide the space up as best we can
@include box-align(center); //Put everything in the middle of the box
#header-img {
width: 90px;
}
.left {
position: absolute;
left: 0;
bottom: 3px;
overflow: hidden;
max-height: 40px;
}
.right {
position: absolute;
right: 10px;
bottom: 1px;
}
& > h1 {
@@ -343,13 +348,10 @@ button.button {
overflow: hidden;
margin: 0 10px;
padding: 0;
padding-top: 16px;
padding-top: 16px;
text-shadow: hsla(0, 100%, 100%, 0.5) 0px 1px 0px, hsla(0, 0%, 0%, 0.1) 0px -1px 0px;
@include box-flex(1); //This box will flex to fill avalible space
}
.right {
}
}
#topbar > h1 a {
@@ -1502,4 +1504,6 @@ body.toolbar {
color: white !important;
}
a.author { margin-right: 0.5em; }
.flair { margin-right: 0.5em; }