Skip to content
Browse files

extracted all Endless Tweets styles to an external .sass file

Ability to load sass files as CSS in user scripts is awesome
  • Loading branch information...
1 parent 8117be2 commit a8db21698bd3e52cab9404341c1c7a3b0a155f0b @mislav committed
Showing with 255 additions and 89 deletions.
  1. +10 −0 Thorfile
  2. +2 −89 endless_tweets/endless_tweets.js
  3. +243 −0 endless_tweets/endless_tweets.sass
View
10 Thorfile
@@ -2,6 +2,7 @@
require 'net/http'
require 'curl'
require 'cgi'
+require 'sass'
class Gm < Thor
desc 'build', %(Builds the *.user.js files from *.js sources)
@@ -98,5 +99,14 @@ class Gm < Thor
def read_partial(path, indentation = nil)
source = File.read(path)
+ extension = path =~ /\.(\w{2,5})$/ && $1
+
+ case extension
+ when 'sass'
+ css = Sass::Engine.new(source, :style => :compact).to_css
+ %[addCSS("#{css.gsub(/\n+/, "\\\n").gsub('"', '\"')}")\n]
+ else
+ source
+ end
end
end
View
91 endless_tweets/endless_tweets.js
@@ -251,35 +251,7 @@ if (timeline) {
}
}, false)
}
-
- addCSS("\
- #timeline .status-body .meta { white-space: nowrap }\
- #timeline .status.last-read { background: #ffffe8 }\
- #timeline .status.aready-read { color: #555 }\
- #timeline .status.aready-read a { color: #444 !important; }\
- #timeline .status.aready-read td.content strong a { text-decoration: none }\
- #timeline .status.aready-read td.thumb img { opacity: .6 }\
- #timeline .status.hentry_hover.last-read:hover { background: #ffc }\
- #pagination-message { font-style:italic; text-align:right; margin:1em 0 !important; }\
- #pagination-message + div.bottom_nav { margin-top: 0 !important; }\
- a.googlemap { display: block; margin-top: 4px; }\
- #auto_update { margin: 0.5em 14px 1em; display: block; padding: 2px 0; }\
- #auto_update input[type=checkbox] { vertical-align: top; }\
- ")
} else if (singleTweetPage) {
- addCSS("\
- body#show .user-info { border-top-color: white }\
- body#show ol.statuses .status-body, body#show ol.statuses .screen-name { font-size: inherit; }\
- body#show ol.statuses .status-body { padding-bottom: 0; }\
- body#show #content ol.statuses .entry-content {\
- font-size: inherit; font-family: inherit; font-weight: normal;\
- background: transparent; display: inline; line-height: 1.2em;\
- }\
- body#show ol.statuses .actions a { padding: 3px 8px; }\
- body#show #content ol.statuses .meta { font-size: 0.8em; white-space: nowrap; }\
- #status_update_form #chars_left_notice { top: -4px !important; }\
- ")
-
var actions = find('permalink', '.actions')
if (actions) {
actions.style.top = document.defaultView.getComputedStyle(actions, null).top
@@ -373,10 +345,6 @@ if (timeline) {
}
}
-if ('profile' == currentPage) addCSS("\
- body#profile ol.statuses .thumb + span.status-body { margin-left: 55px; min-height: 50px; }\
- ")
-
var content = $('content')
if (content) {
// catch click to "in reply to ..." links
@@ -457,51 +425,6 @@ function checkViewportWidth() {
window.addEventListener('resize', checkViewportWidth, false)
checkViewportWidth()
-addCSS("\
- body.mini #side_base {\
- -moz-border-radius: 0 !important; border-left: none !important; -webkit-border-radius: 0 !important;\
- display: block;\ position: absolute; left: 0; top: 0;\
- height: 40px; width: 423px; padding-left: 140px;\
- }\
- body.mini ul#primary_nav li { border: none; display: inline; width: auto; }\
- body.mini #primary_nav a { display: block !important; float: left; clear: none !important; font-size: 10px !important; padding: 9px 4px !important; }\
- body.mini #primary_nav #direct_messages_tab a + a { display:none !important; }\
- body.mini #side #primary_nav ~ *, body.mini #side #message_count, body.mini #side .about, body.mini #navigation, body.mini #footer { display: none }\
- body.mini ul.sidebar-menu li.active a { font-weight: normal; }\
- body.mini #side { margin-bottom: 0; padding-top: 5px; width: auto !important; }\
- body.mini #side #profile #me_name, body.mini #side .promotion { display: none; }\
- body.mini #side #profile .section-links { margin-right: 4px; }\
- body.mini #side div.section { padding: 0; }\
- body.mini #side div#profile.section { padding: 0; }\
- body.mini #side div#profile.profile-side { margin-bottom: 0 !important; }\
- body.mini #side .stats { clear: none; float: left; margin: 5px 7px; }\
- body.mini #side .stats td + td + td, body.mini #side .stats a .label { display: none; }\
- body.mini #side .stats td + td { border-right: none; padding-right: 0; }\
- body.mini #side .user_icon { clear: none !important; float: left !important; width: 31px; position: static !important; }\
- body.mini #side #custom_search { display: block; padding: 0; }\
- body.mini #side #custom_search.active { background: none !important; }\
- body.mini #side #custom_search input[name=q] { margin: 0; width: 60px !important; }\
- body.mini #content { padding-top: 40px; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; }\
- body.mini #content .wrapper { padding: 0; }\
- body.mini #status_update_box { max-width: 540px; }\
- body.mini #status_update_box h3 { font-size: 1.1em; }\
- body.mini #status_update_box #chars_left_notice { font: 1.2em \"Lucida Grande\", Helvetica, sans-serif; }\
- body.mini #status_update_box div.info { text-align: left; }\
- body.mini #status_update_box textarea { width: 374px; margin-left: 10px; float: left; }\
- body.mini #status_update_box #currently { min-height: auto; width: auto; float: none; clear: both; padding-top: 6px; }\
- body.mini #status_update_box ~ .section { padding: 0 7px; }\
- body.mini #container { width: 564px; padding: 0; margin: 0; }\
- body.mini #container > .columns { margin-bottom: 0; }\
- body.mini #container > .content-bubble-arrow { display: none; }\
- body.mini #header { margin: 0 !important; }\
- body.mini #header #logo { position: absolute; top: 0; left: 0; z-index: 1; }\
- body.mini #header #logo img { margin-top: 0; padding: 5px 8px; width:125px; height:29px; }\
- body.mini #header #logo ~ * { display: none; }\
- body.mini #loader { right: 5px; top: 5px; }\
- body#show.mini #container { width: 564px; }\
- body#show.mini #content { width: 534px; padding-top: 40px; }\
- ")
-
// *** JSON to HTML markup for a single update *** //
var buildUpdateFromJSON = (function() {
@@ -640,11 +563,6 @@ if (sidebar) {
scriptInfo.appendChild(document.createTextNode(' v' + scriptVersion))
var section = $('rssfeed') || find(sidebar, '.section')
section.appendChild(scriptInfo)
-
- addCSS("\
- #endless_tweets { margin: 0 14px; font-size: 11px; font-variant: small-caps; }\
- #endless_tweets a { font-size: 12px; }\
- ")
}
if (wrapper) checkUserscriptUpdate(scriptURL, scriptLength, function() {
@@ -657,13 +575,6 @@ if (wrapper) checkUserscriptUpdate(scriptURL, scriptLength, function() {
if (!topAlert && home) topAlert = insertTop($E('div', { 'class': 'bulletin info' }), find(wrapper, '.section'))
if (topAlert) topAlert.appendChild(notice)
else insertTop(notice, wrapper)
-
- addCSS("\
- #userscript_update { display: block }\
- .wrapper > #userscript_update { text-align: right; color: gray; padding: 0; font-size: 90% }\
- .bulletin.info #userscript_update { text-align: inherit }\
- body#show #userscript_update { margin: -.6em 0 .6em 0; }\
- ")
})
//= toolkit/toolkit.js
@@ -676,6 +587,8 @@ function reveal(element) {
jQuery(element).hide().slideDown()
}
+//= endless_tweets.sass
+
// get a reference to the jQuery object, even if it requires
// breaking out of the GreaseMonkey sandbox in Firefox
// (we need to trust Twitter.com)
View
243 endless_tweets/endless_tweets.sass
@@ -0,0 +1,243 @@
+=no_rounded_borders
+ :-moz-border-radius 0 !important
+ :-webkit-border-radius 0 !important
+
+#timeline
+ .status-body .meta
+ :white-space nowrap
+ .status
+ &.last-read
+ :background #ffffe8
+ &.hentry_hover:hover
+ :background #ffc
+ &.aready-read
+ :color #555
+ a
+ :color #444 !important
+ td
+ &.content strong a
+ :text-decoration none
+ &.thumb img
+ :opacity .6
+
+#pagination-message
+ :font-style italic
+ :text-align right
+ :margin 1em 0 !important
+ + div.bottom_nav
+ :margin-top 0 !important
+
+a.googlemap
+ :display block
+ :margin-top 4px
+
+#auto_update
+ :margin 0.5em 14px 1em
+ :display block
+ :padding 2px 0
+ input[type=checkbox]
+ :vertical-align top
+
+body#show
+ .user-info
+ :border-top-color white
+
+ ol.statuses
+ .status-body
+ :font-size inherit
+ :padding-bottom 0
+ .screen-name
+ :font-size inherit
+ .actions a
+ :padding 3px 8px
+
+ #content ol.statuses
+ .entry-content
+ :font-size inherit
+ :font-family inherit
+ :font-weight normal
+ :background transparent
+ :display inline
+ :line-height 1.2em
+ .meta
+ :font-size 0.8em
+ :white-space nowrap
+
+ #status_update_form #chars_left_notice
+ :top -4px !important
+
+body#profile ol.statuses .thumb + span.status-body
+ :margin-left 55px
+ :min-height 50px
+
+body.mini
+ #side_base
+ +no_rounded_borders
+ :border-left none !important
+ :display block
+ :position absolute
+ :left 0
+ :top 0
+ :height 40px
+ :width 423px
+ :padding-left 140px
+
+ &#show
+ #container
+ :width 564px
+ #content
+ :width 534px
+ :padding-top 40px
+
+ ul
+ &#primary_nav li
+ :border none
+ :display inline
+ :width auto
+
+ &.sidebar-menu li.active a
+ :font-weight normal
+
+ #primary_nav
+ a
+ :display block !important
+ :float left
+ :clear none !important
+ :font-size 10px !important
+ :padding 9px 4px !important
+ #direct_messages_tab a + a
+ :display none !important
+
+ #side
+ :margin-bottom 0
+ :padding-top 5px
+ :width auto !important
+
+ div.section
+ :padding 0
+
+ #primary_nav ~ *, #message_count, .about, .promotion
+ :display none
+
+ #profile
+ #me_name
+ :display none
+ .section-links
+ :margin-right 4px
+ &.section
+ :padding 0
+ &.profile-side
+ :margin-bottom 0 !important
+
+ .stats
+ :clear none
+ :float left
+ :margin 5px 7px
+
+ td + td
+ :border-right none
+ :padding-right 0
+ + td
+ :display none
+
+ a .label
+ :display none
+
+ .user_icon
+ :clear none !important
+ :float left !important
+ :width 31px
+ :position static !important
+
+ #custom_search
+ :display block
+ :padding 0
+ &.active
+ :background none !important
+ input[name=q]
+ :margin 0
+ :width 60px !important
+
+ #navigation, #footer
+ :display none
+
+ #content
+ +no_rounded_borders
+ :padding-top 40px
+ .wrapper
+ :padding 0
+
+ #status_update_box
+ :max-width 540px
+
+ h3
+ :font-size 1.1em
+
+ #chars_left_notice
+ :font 1.2em "Lucida Grande", Helvetica, sans-serif
+
+ div.info
+ :text-align left
+
+ textarea
+ :width 374px
+ :margin-left 10px
+ :float left
+
+ #currently
+ :min-height auto
+ :width auto
+ :float none
+ :clear both
+ :padding-top 6px
+
+ ~ .section
+ :padding 0 7px
+
+ #container
+ :width 564px
+ :padding 0
+ :margin 0
+ >
+ .columns
+ :margin-bottom 0
+ .content-bubble-arrow
+ :display none
+
+ #header
+ :margin 0 !important
+ #logo
+ :position absolute
+ :top 0
+ :left 0
+ :z-index 1
+ img
+ :margin-top 0
+ :padding 5px 8px
+ :width 125px
+ :height 29px
+ ~ *
+ :display none
+
+ #loader
+ :right 5px
+ :top 5px
+
+#endless_tweets
+ :margin 0 14px
+ :font-size 11px
+ :font-variant small-caps
+ a
+ :font-size 12px
+
+#userscript_update
+ :display block
+ .wrapper > &
+ :text-align right
+ :color gray
+ :padding 0
+ :font-size 90%
+ .bulletin.info &
+ :text-align inherit
+ body#show &
+ :margin -0.6em 0 0.6em 0

0 comments on commit a8db216

Please sign in to comment.
Something went wrong with that request. Please try again.