Created
May 21, 2012 21:47
-
-
Save boxmein/2764927 to your computer and use it in GitHub Desktop.
Stylesheet for The Powder Toy's web site powdertoy.co.uk. I'll keep it updated less and less, please use https://github.com/boxmein/UserEdits/blob/master/userstyles/powdertoy.co.uk/tpt-redo-dark.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * The Powder Toy style re-write in LESS. | |
| * Uses pattern from noqta.it | |
| * 2012: boxmein. Remixing allowed, but credit is needed. | |
| * | |
| * To stylers: hope you won't get a headache reading this code. | |
| * In redo progress, new front page and all :O | |
| * | |
| * Please use https://github.com/boxmein/UserEdits/blob/master/userstyles/powdertoy.co.uk/tpt-redo-dark.less for the latest, this won't be updated as much. | |
| */ | |
| /* Constants */ | |
| /* Variable names pretty self-explaining or whatnot */ | |
| @bg-image: url('http://www.noqta.it/dromoscopio/img/pattern_40.gif'); | |
| @border-dark: #222; | |
| @bg-bright: #383838; | |
| @link-color: #96979A; | |
| @unread-red: #8B0000; | |
| @warning-color: @border-dark; | |
| @body-font-color: #FFF; | |
| @top-bar-g-top: lighten(@border-dark, 5%); | |
| @top-bar-g-btm: @border-dark; | |
| @own-post-color: #333; | |
| @mod-post-color: rgba(0, 255, 0, 0.1); | |
| @dev-post-color: rgba(0, 150, 255, 0.3); | |
| @admin-post-color: rgba(0, 0, 255, 0.1); | |
| @op-post-color: #555; | |
| /* Newest main page stuff */ | |
| .main-menu { | |
| width: 100%; | |
| height: 34px; | |
| background-color: @bg-bright !important; | |
| background-repeat: repeat-x; | |
| .linGradient (); | |
| border: 1px solid @border-dark !important; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| border-radius: 4px; | |
| box-shadow: 0px 3px 27px rgba(0, 0, 0, 0.08); | |
| } | |
| .active a { | |
| .brighterGradient (); | |
| } | |
| .btn-info { | |
| .brighterGradient (); | |
| background-color: #484848 !important; | |
| border-color: @border-dark !important; | |
| } | |
| .btn-info:hover { | |
| .brighterGradient (); | |
| } | |
| .btn-group > .dropdown-toggle { | |
| .brighterGradient (); | |
| background-color: #484848 !important; | |
| border-color: @border-dark !important; | |
| } | |
| .dropdown-menu { | |
| background-color: @bg-bright !important; | |
| } | |
| .main-menu a { | |
| background-color: none !important; | |
| border-color: @border-dark !important; | |
| } | |
| .container { | |
| border-color: @border-dark !important; | |
| } | |
| a:hover { | |
| .brighterGradient (); | |
| } | |
| html, body { | |
| background-image: @bg-image !important; | |
| background-attachment: fixed !important; | |
| } | |
| body { | |
| color: @body-font-color !important; | |
| } | |
| a { | |
| color: @link-color !important; | |
| .smallshadow (); | |
| } | |
| input, button, textarea { | |
| background-image: none !important; | |
| } | |
| a:hover { | |
| /* omg, addition! */ | |
| color: @link-color + #222 !important; | |
| } | |
| a.Link { | |
| color: #CCC !important; | |
| } | |
| /* Mixins */ | |
| .border { | |
| border: 1px solid @border-dark !important; | |
| } | |
| /* Vendor prefix stuff, repetitive code [Remember to call with .something () so it gets the values OK]*/ | |
| .smallshadow (@x: 1px, @y: 1px, @blur: 1px, @color: #000) { | |
| -webkit-text-shadow: @arguments !important; | |
| -moz-text-shadow: @arguments !important; | |
| -ms-text-shadow: @arguments !important; | |
| -o-text-shadow: @arguments !important; | |
| text-shadow: @arguments !important; | |
| } | |
| .bigshadow (@x: 2px, @y: 2px, @blur: 3px, @color: rgba(0,0,0,0.7)) { | |
| -webkit-text-shadow: @arguments !important; | |
| -moz-text-shadow: @arguments !important; | |
| -ms-text-shadow: @arguments !important; | |
| -o-text-shadow: @arguments !important; | |
| text-shadow: @arguments !important; | |
| } | |
| .linGradient (@colortop: @top-bar-g-top, @point1: 0%, @colorbottom: @top-bar-g-btm, @point2: 100%) { | |
| background-image: linear-gradient(bottom, @colortop @point1, @colorbottom @point2) !important; | |
| background-image: -o-linear-gradient(bottom, @colortop @point1, @colorbottom @point2) !important; | |
| background-image: -ms-linear-gradient(bottom, @colortop @point1, @colorbottom @point2) !important; | |
| background-image: -moz-linear-gradient(bottom, @colortop @point1, @colorbottom @point2) !important; | |
| background-image: -webkit-linear-gradient(bottom, @colortop @point1, @colorbottom @point2) !important; | |
| background-image: -webkit-gradient(linear, left bottom, left top, color-stop(@point1, @colortop), color-stop(@point2, @colorbottom)) !important; | |
| } | |
| .brighterGradient (@percent: 10%) { | |
| .linGradient (lighten(@top-bar-g-top, @percent), 0%, lighten(@top-bar-g-btm, @percent), 100%); | |
| } | |
| input, textarea, .Tag { | |
| background-color: #404040 !important; | |
| color: #FFF !important; | |
| resize: vertical; | |
| .border; | |
| } | |
| .Conversation { | |
| .border; | |
| margin-bottom: -1px; | |
| } | |
| .Pageheader *, .Pageheader { | |
| text-shadow: none !important; | |
| } | |
| #PageheaderSearch input { | |
| border-bottom: none !important; | |
| } | |
| a.Item{ | |
| .bigshadow; | |
| } | |
| .ScoreMeh { | |
| color: @body-font-color !important; | |
| } | |
| .ButtonLink, .fSaveDetails, .GroupInfo, .Pageheader, .Pageheader *, .PostForm, .ButtonLink { | |
| background-color: @bg-bright !important; | |
| color: @link-color; | |
| background-image: none !important; | |
| } | |
| .CUnreadCount { | |
| background-color: @unread-red !important; | |
| } | |
| .Item, .Active, .TopContainer { | |
| .bigshadow; | |
| } | |
| /* Awesome code tag vs pre tag thread test (Yay, this is official!) */ | |
| code, pre { | |
| background-color: @border-dark !important; | |
| border: 1px solid rgb(204,204,204); | |
| white-space: pre; /* No wrap, saves spaces to correct level */ | |
| padding: 1px 2px; | |
| margin: 1px; | |
| } | |
| code { | |
| display: block; | |
| } | |
| pre { | |
| display: inline; | |
| color: #FFF !important; | |
| } | |
| /* Copyright and footer messages */ | |
| .Copyright, .FooterExtra, .Header li a { | |
| .smallshadow; | |
| } | |
| /* Various warning / error messages */ | |
| .Warning, .Error, .Information { | |
| background-color: @warning-color !important; | |
| border: none !important; | |
| margin-bottom: 5px; | |
| } | |
| .ParentCategory { | |
| color: #DDD !important; | |
| } | |
| .Item, .Active { | |
| .bigshadow (2px, 0px); | |
| } | |
| .TopContainer { | |
| color: #CCC; | |
| .bigshadow; | |
| } | |
| /* Make block quotes not take up half the post screen */ | |
| blockquote { | |
| margin: -30px 10px; | |
| } | |
| /* Those "Unread" and "New" notices in Recents and categories */ | |
| .Meta span em { | |
| box-shadow: 0px 0px 5px #FFF !important; | |
| color: #FFF !important; | |
| } | |
| .Meta { | |
| border-color: @border-dark !important; | |
| } | |
| /* New */ | |
| a.Link, .Download, input.EditPlain, .Meta em, .Page, .SaveDetails, .Subpage, .View *, .container.contents { | |
| background-color: @bg-bright !important; | |
| } | |
| /* In forums perhaps */ | |
| li { | |
| background-color: #272727 !important; | |
| } | |
| /* Top links, eg "Download", "Forum", ... */ | |
| #Header li { | |
| background: none !important; | |
| } | |
| h1, .download-buttons { | |
| color: #FFF !important; | |
| font-weight: normal; | |
| } | |
| .MessageList { | |
| border-radius: 3px; | |
| } | |
| /* Forum post colors: */ | |
| .Mine { | |
| background-color: @own-post-color !important; | |
| } | |
| .Developer { | |
| background-color: @dev-post-color !important; | |
| } | |
| .Moderator { | |
| background-color: @mod-post-color !important; | |
| } | |
| .Administrator { | |
| background-color: @admin-post-color !important; | |
| } | |
| .Op { | |
| background-color: @op-post-color !important; | |
| } | |
| /* TinyMCE colours and stuff */ | |
| a.NPage,.ConUnread,.mceLayout,.Pagefooter,.mceToolbar,.mceToolbar *,#AddReplyMessage_ifr { | |
| background-color:#555 !important; | |
| } | |
| .MessageList,.Subpage,.Page,.Pageheader,li,.Item,.Active,input,a.Link,.Download,.RecentContainer,.PostForm,.Meta em,ul,.mceToolbar,.mceToolbar *,.Pagefooter, .View * { | |
| border-color:#222 !important; | |
| } | |
| .mceLayout,#AddReplyMessage_ifr html,#AddReplyMessage_ifr p { | |
| background-image:none !important; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* This beautiful CSS-File has been crafted with LESS (lesscss.org) and compiled by simpLESS (wearekiss.com/simpless) */ | |
| /* Please use https://github.com/boxmein/UserEdits/blob/master/userstyles/powdertoy.co.uk/tpt-redo-dark.css for the latest */ | |
| .main-menu{width:100%;height:34px;background-color:#383838!important;background-repeat:repeat-x;background-image:linear-gradient(bottom, #2f2f2f 0, #222 100%)!important;background-image:-o-linear-gradient(bottom, #2f2f2f 0, #222 100%)!important;background-image:-ms-linear-gradient(bottom, #2f2f2f 0, #222 100%)!important;background-image:-moz-linear-gradient(bottom, #2f2f2f 0, #222 100%)!important;background-image:-webkit-linear-gradient(bottom, #2f2f2f 0, #222 100%)!important;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0%, #2f2f2f),color-stop(100%, #222))!important;border:1px solid #222!important;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;box-shadow:0 3px 27px rgba(0,0,0,.08)}.active a{background-image:linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-o-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-ms-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-moz-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-webkit-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0%, #484848),color-stop(100%, #3c3c3c))!important}.btn-info{background-image:linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-o-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-ms-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-moz-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-webkit-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0%, #484848),color-stop(100%, #3c3c3c))!important;background-color:#484848!important;border-color:#222!important}.btn-info:hover{background-image:linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-o-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-ms-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-moz-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-webkit-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0%, #484848),color-stop(100%, #3c3c3c))!important}.btn-group>.dropdown-toggle{background-image:linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-o-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-ms-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-moz-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-webkit-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0%, #484848),color-stop(100%, #3c3c3c))!important;background-color:#484848!important;border-color:#222!important}.dropdown-menu{background-color:#383838!important}.main-menu a{background-color:none!important;border-color:#222!important}.container{border-color:#222!important}a:hover{background-image:linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-o-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-ms-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-moz-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-webkit-linear-gradient(bottom, #484848 0, #3c3c3c 100%)!important;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0%, #484848),color-stop(100%, #3c3c3c))!important}html,body{background-image:url('http://www.noqta.it/dromoscopio/img/pattern_40.gif')!important;background-attachment:fixed!important}body{color:#fff!important}a{color:#96979a!important;-webkit-text-shadow:1px 1px 1px #000!important;-moz-text-shadow:1px 1px 1px #000!important;-ms-text-shadow:1px 1px 1px #000!important;-o-text-shadow:1px 1px 1px #000!important;text-shadow:1px 1px 1px #000!important}input,button,textarea{background-image:none!important}a:hover{color:#b8b9bc!important}a.Link{color:#CCC!important}.border{border:1px solid #222!important}input,textarea,.Tag{background-color:#404040!important;color:#FFF!important;resize:vertical;border:1px solid #222!important}.Conversation{border:1px solid #222!important;margin-bottom:-1px}.Pageheader *,.Pageheader{text-shadow:none!important}#PageheaderSearch input{border-bottom:0!important}a.Item{-webkit-text-shadow:!important;-moz-text-shadow:!important;-ms-text-shadow:!important;-o-text-shadow:!important;text-shadow:!important}.ScoreMeh{color:#fff!important}.ButtonLink,.fSaveDetails,.GroupInfo,.Pageheader,.Pageheader *,.PostForm,.ButtonLink{background-color:#383838!important;color:#96979a;background-image:none!important}.CUnreadCount{background-color:#8b0000!important}.Item,.Active,.TopContainer{-webkit-text-shadow:!important;-moz-text-shadow:!important;-ms-text-shadow:!important;-o-text-shadow:!important;text-shadow:!important}code,pre{background-color:#222!important;border:1px solid #ccc;white-space:pre;padding:1px 2px;margin:1px}code{display:block}pre{display:inline;color:#FFF!important}.Copyright,.FooterExtra,.Header li a{-webkit-text-shadow:!important;-moz-text-shadow:!important;-ms-text-shadow:!important;-o-text-shadow:!important;text-shadow:!important}.Warning,.Error,.Information{background-color:#222!important;border:0!important;margin-bottom:5px}.ParentCategory{color:#DDD!important}.Item,.Active{-webkit-text-shadow:2px 0 3px rgba(0,0,0,.7)!important;-moz-text-shadow:2px 0 3px rgba(0,0,0,.7)!important;-ms-text-shadow:2px 0 3px rgba(0,0,0,.7)!important;-o-text-shadow:2px 0 3px rgba(0,0,0,.7)!important;text-shadow:2px 0 3px rgba(0,0,0,.7)!important}.TopContainer{color:#CCC;-webkit-text-shadow:!important;-moz-text-shadow:!important;-ms-text-shadow:!important;-o-text-shadow:!important;text-shadow:!important}blockquote{margin:-30px 10px}.Meta span em{box-shadow:0 0 5px #FFF!important;color:#FFF!important}.Meta{border-color:#222!important}a.Link,.Download,input.EditPlain,.Meta em,.Page,.SaveDetails,.Subpage,.View *,.container.contents{background-color:#383838!important}li{background-color:#272727!important}#Header li{background:none!important}h1,.download-buttons{color:#FFF!important;font-weight:400}.MessageList{border-radius:3px}.Mine{background-color:#333!important}.Developer{background-color:rgba(0,150,255,.3)!important}.Moderator{background-color:rgba(0,255,0,.1)!important}.Administrator{background-color:rgba(0,0,255,.1)!important}.Op{background-color:#555!important}a.NPage,.ConUnread,.mceLayout,.Pagefooter,.mceToolbar,.mceToolbar *,#AddReplyMessage_ifr{background-color:#555!important}.MessageList,.Subpage,.Page,.Pageheader,li,.Item,.Active,input,a.Link,.Download,.RecentContainer,.PostForm,.Meta em,ul,.mceToolbar,.mceToolbar *,.Pagefooter,.View *{border-color:#222!important}.mceLayout,#AddReplyMessage_ifr html,#AddReplyMessage_ifr p{background-image:none!important} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment