Last active
October 8, 2015 19:31
-
-
Save fwenzel/c6aebbc93de695914508 to your computer and use it in GitHub Desktop.
A dark user style for irccloud, based on "Dark Matter", tweaked for irccloud.mozilla.com
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
| @-moz-document domain("irccloud.com"), domain("irccloud.mozilla.com") { | |
| /* Dark Matter Reloaded | |
| * Version 2.3 - 03/02/2015 | |
| * | |
| * Author: @xupisco - xupisco.net */ | |
| /* Square corners, pls */ | |
| * { | |
| border-radius: 0 !important; | |
| border-top-right-radius: 0 !important; | |
| border-top-left-radius: 0 !important; | |
| border-bottom-right-radius: 0 !important; | |
| border-bottom-left-radius: 0 !important; | |
| } | |
| ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track-piece { border-radius: 0; } | |
| ::-webkit-scrollbar { width: 10px; } | |
| ::-webkit-scrollbar-thumb { background-color: #47545A; border: 0; } | |
| ::-webkit-scrollbar-track-piece { background-color: transparent; border: 0; } | |
| ::-webkit-scrollbar-thumb:window-inactive { background-color: #202020; } | |
| /* Form */ | |
| .form .input:focus { border: 2px solid #3F7AA8; } | |
| /* Default links */ | |
| a { color: #76C8FF; text-decoration: none; } | |
| a:hover { color: #FFC305; text-decoration: underline; } | |
| /* Buttons */ | |
| button b.bullet { color: #FFF; } | |
| button span, button a { background-color: transparent; background-image: none; box-shadow: none; border: 0; border-color: transparent; } | |
| button:not([disabled]):hover span, button:not([disabled]):hover a { border-color: transparent; background-color: #385A88; background-image: none; } | |
| /* Logotype */ | |
| h1#title span.logotype { color: #C3C8D5; } | |
| h1#title span.logotype span.cloud { color: #96ACF1; } | |
| #mainwrapper { background-color: #202020; padding-right: 0; padding-left: 201px;} | |
| /* Header */ | |
| #headercell { background-color: #262626; font-size: 12px; } | |
| #headercell a, h1#title a, #footer a, #sidebar #limits a { color: #76C8FF; } | |
| #headercell a:hover { color: #FFC305; text-decoration: underline; } | |
| #statusActions { color: #777777; margin-right: 13px; } | |
| #statusActions b, #statusActions strong { color: #97E25C; font-weight: normal; } | |
| #invites span.numInvites { font-size: 90%; border: 0; font-weight: normal; line-height: 1.3; padding: 1px 4px 1px 4px; } | |
| h1#title span.logo { display: none; } | |
| /* Topic */ | |
| .bufferHead { background-color: #323232; border: 0; } | |
| .mainContainer, table.buffer { border: 0; } | |
| td.statuscell div.status h2.bufferHeading { padding: 0px 0px 4px 1px; font-size: 13px; color: #C7C7C7; } | |
| td.statuscell div.status h2.bufferHeading span.label { font-weight: normal; color: #FAFAFA; } | |
| td.statuscell div.status p.buttons button span, td.statuscell div.status p.buttons button a { background-color: #5F6E7C; color: #F1F1F1; } | |
| td.statuscell div.status p.buttons button span:hover, td.statuscell div.status p.buttons button a:hover { background-color: #385A88; color: #F1F1F1; } | |
| #channelContextMenu.active.mod ul.actions li a.topic { color: #fff; } | |
| #channelContextMenu.active.mod ul.actions li a.topic:hover { background-color: #414852; } | |
| /* Sidebar */ | |
| div#sidebarwrapper { left: 0; opacity: 0.3; } | |
| div#sidebarwrapper:hover { opacity: 1; } | |
| #sidebar #limits a { background-color: #383838; font-size: 11px; color: #ccc; } | |
| #sidebar #limits a span.highlight { color: #FFD21E; } | |
| #sidebar #limits h2.limitedTrial { border: 0; background-color: #A7211E; font-size: 12px; } | |
| #sidebar #limits .price { width: 40px ;} | |
| #sidebar #limits .price .badge { width: 43px; height: 28px; line-height: 30px; font-size: 13px; background-color: #A7211E; } | |
| #sidebar #limits a:hover { color: #fff; background-color: #4a4a4a; } | |
| #sidebar #limits a:hover span.highlight { color: #fff; } | |
| #sidebar #limits a:hover h2.limitedTrial { background-color: #A7211E; } | |
| #sidebar #limits a:hover .price .badge { background-color: #A7211E; } | |
| /* Sidebar - Buffers */ | |
| #buffers .active a.buffer { color: #9E9E9E; font-size: 14px; } | |
| #buffers a.buffer, #buffers p.join a, #buffers p.archiveToggle a { color: #9CC7FF; font-size: 13px; } | |
| #buffers ul.buffers .active.unread a.buffer, #buffers h2.active.unread { color: #fff; font-weight: normal; } | |
| #buffers li.connection { background-color: #383838; } | |
| #buffers h2 a.buffer { background-color: #5F6E7C; border: 0; color: #fff; } | |
| #bufferList h2 a.buffer span.label { color: #fff; } | |
| #buffers .active.selected a.buffer, #buffers .active.selected a.buffer:hover { border: 0; color: #FFF; font-weight: normal; } | |
| #buffers a.buffer:hover { background-color: #385A88; } | |
| .buffers.channels { padding: 5px 0; } | |
| #buffers p.archiveToggle a { padding: 5px 7px 5px 24px; color: #EBEBEB; background-color: #474747; font-size: 12px; } | |
| #buffers p.archiveToggle a:hover { background-color: #385A88; color: #fff } | |
| #buffers span.badge { background-color: #C2130F; font-weight: normal; padding: 0px 4px 0px 4px; } | |
| .buffer.channel.deferred { padding-bottom: 8px; } | |
| #buffers ul.archives { background-color: #38393A; padding: 2px 0; } | |
| #buffers ul.archives .active a.buffer { color: #979797; font-size: 12px; } | |
| #buffers ul.archives a:hover { background-color: #585858; color: #fff; } | |
| #buffers ul.archives .active.selected a.buffer, #buffers ul.archives .active.selected a.buffer:hover { color: #FFF; } | |
| div#buffersFooter p a { background-color: #46515d; color: #FFF; line-height: 1.4; margin-bottom: 1px; font-size: 13px; border: 0; } | |
| div#buffersFooter p a:hover { background-color: #385A88; } | |
| /* Main */ | |
| div.buffermain { background-color: #202020 } | |
| .showMembers div.buffermain { background-color: #202020; } | |
| div.dateWrapper { margin-top: -7px; } | |
| div.log { background-color: #202020; } | |
| div.log div.dateChange p, div.dateWrapper table { border: 0; box-shadow: none; background-image: none; font-size: 12px; background-color: #3D4E3D; color: #fff; padding: 4px 0; margin: 7px 0; margin-bottom: 0; } | |
| div.log div.chat, div.log div.status, div.log div.notice, div.log div.groupedLines, div.log div.warning, div.log div.error, div.log div.table, div.log div.me { color: #EEE; } | |
| div.log div.chat a, div.log div.status a, div.log div.notice a, div.log div.groupedLines a, div.log div.warning a, div.log div.error a, div.log div.table a, div.log div.me a { color: #7ABFE6; } | |
| div.log span.date { color: #555; } | |
| div.log div.hover span.date { color: #fff; } | |
| div.log span.prefix { color: #F1F1F1; } | |
| div.log div.row.highlight { background-color: #313336; } | |
| div.log div.highlight { background-color: #29382B; } | |
| div.log div.highlight span.date { color: #E0E0E0; } | |
| div.log div.row span a.author, td.nickcell a.nick { color: #CBF6A8; } | |
| div.log div.row span a.user.hover, div.log div.row span a.user.hover:hover { color: #CBF6A8; } | |
| div.log div.groupedJoinPart { border-top: 1px dashed #505050; border-bottom: 1px dashed #505050; margin: 7px 0; padding: 2px 0; opacity: 0.3; } | |
| div.log div.groupedJoinPart:hover, div.log div.groupedJoinPart.expanded { background-color: #252525; border-top: 1px dashed #686868; border-bottom: 1px dashed #686868; opacity: 1; } | |
| div.log div.joinPartGroup.expanded { border-bottom: 1px dashed #DDD; margin-top: -8px; margin-bottom: 7px; } | |
| div.log div.joinPartGroup.expanded div.messageRow { background-color: #2B2B2B; } | |
| div.log div.groupedJoinPart span.mode { color: #DDD; } | |
| div.log div.status { color: #383838; background-color: #181818; } | |
| div.log div.backlogDivider hr, div.log div.fetch hr { border-color: #FF9C1E; } | |
| /* HRs */ | |
| div.log div.lastSeen hr, div.log div.bottomSeen hr, div.log div.focusSeen hr { border-top: 1px solid #8168A2; margin: 3px 0; } | |
| div.log div.lastSeen p, div.log div.bottomSeen p, div.log div.focusSeen p { margin-top: -5px; margin-bottom: 3px; padding: 0; } | |
| div.log div.lastSeen span.text, div.log div.bottomSeen span, div.log div.focusSeen span { padding: 0 10px; background-color: #8168A2; color: #FFF; padding: 2px 6px; } | |
| div.log div.part hr { border-top: 4px double #414141; margin: 5px; margin-top: 13px; } | |
| div.log div.backlogDivider hr, div.log div.fetch hr { border-color: #8DC57F; margin: 15px 0; margin-bottom: 7px; } | |
| div.log div.messageRow, div.log div.me a.user, div.log div.me a.server { padding: 2px 0; } | |
| div.log div.messageRow { background-color: #262626 } | |
| div.log div.self { background-color: #202020; } | |
| .extras span.extrasBar { background-color: #344C77; font-weight: normal; padding-left: 52px; } | |
| /* Main - Nicks */ | |
| div.log div.row span a.author, td.nickcell a.nick { font-weight: normal; } | |
| .nick-colors div.log div.row span a.c0, .nick-colors div.log div.row span a.c0:hover, .nick-colors div.log div.row span a.hover.c0:hover, .nick-colors div.log div.row span a.hover.c0, .nick-colors ul.memberList li.hover a.c0, .nick-colors ul.memberList li a.c0:hover { color: #fc80e2; } | |
| .nick-colors div.log div.row span a.c1, .nick-colors div.log div.row span a.c1:hover, .nick-colors div.log div.row span a.hover.c1:hover, .nick-colors div.log div.row span a.hover.c1, .nick-colors ul.memberList li.hover a.c1, .nick-colors ul.memberList li a.c1:hover { color: #ff7b68; } | |
| .nick-colors div.log div.row span a.c2, .nick-colors div.log div.row span a.c2:hover, .nick-colors div.log div.row span a.hover.c2:hover, .nick-colors div.log div.row span a.hover.c2, .nick-colors ul.memberList li.hover a.c2, .nick-colors ul.memberList li a.c2:hover { color: #d22f37; } | |
| .nick-colors div.log div.row span a.c3, .nick-colors div.log div.row span a.c3:hover, .nick-colors div.log div.row span a.hover.c3:hover, .nick-colors div.log div.row span a.hover.c3, .nick-colors ul.memberList li.hover a.c3, .nick-colors ul.memberList li a.c3:hover { color: #fd8e38; } | |
| .nick-colors div.log div.row span a.c4, .nick-colors div.log div.row span a.c4:hover, .nick-colors div.log div.row span a.hover.c4:hover, .nick-colors div.log div.row span a.hover.c4, .nick-colors ul.memberList li.hover a.c4, .nick-colors ul.memberList li a.c4:hover { color: #c83d4f; } | |
| .nick-colors div.log div.row span a.c5, .nick-colors div.log div.row span a.c5:hover, .nick-colors div.log div.row span a.hover.c5:hover, .nick-colors div.log div.row span a.hover.c5, .nick-colors ul.memberList li.hover a.c5, .nick-colors ul.memberList li a.c5:hover { color: #c74faf; } | |
| .nick-colors div.log div.row span a.c6, .nick-colors div.log div.row span a.c6:hover, .nick-colors div.log div.row span a.hover.c6:hover, .nick-colors div.log div.row span a.hover.c6, .nick-colors ul.memberList li.hover a.c6, .nick-colors ul.memberList li a.c6:hover { color: #9a5ef0; } | |
| .nick-colors div.log div.row span a.c7, .nick-colors div.log div.row span a.c7:hover, .nick-colors div.log div.row span a.hover.c7:hover, .nick-colors div.log div.row span a.hover.c7, .nick-colors ul.memberList li.hover a.c7, .nick-colors ul.memberList li a.c7:hover { color: #7250e2; } | |
| .nick-colors div.log div.row span a.c8, .nick-colors div.log div.row span a.c8:hover, .nick-colors div.log div.row span a.hover.c8:hover, .nick-colors div.log div.row span a.hover.c8, .nick-colors ul.memberList li.hover a.c8, .nick-colors ul.memberList li a.c8:hover { color: #3f74c3; } | |
| .nick-colors div.log div.row span a.c9, .nick-colors div.log div.row span a.c9:hover, .nick-colors div.log div.row span a.hover.c9:hover, .nick-colors div.log div.row span a.hover.c9, .nick-colors ul.memberList li.hover a.c9, .nick-colors ul.memberList li a.c9:hover { color: #5893ff; } | |
| .nick-colors div.log div.row span a.c10, .nick-colors div.log div.row span a.c10:hover, .nick-colors div.log div.row span a.hover.c10:hover, .nick-colors div.log div.row span a.hover.c10, .nick-colors ul.memberList li.hover a.c10, .nick-colors ul.memberList li a.c10:hover { color: #15b8a5; } | |
| .nick-colors div.log div.row span a.c11, .nick-colors div.log div.row span a.c11:hover, .nick-colors div.log div.row span a.hover.c11:hover, .nick-colors div.log div.row span a.hover.c11, .nick-colors ul.memberList li.hover a.c11, .nick-colors ul.memberList li a.c11:hover { color: #49b93a; } | |
| .nick-colors div.log div.row span a.c12, .nick-colors div.log div.row span a.c12:hover, .nick-colors div.log div.row span a.hover.c12:hover, .nick-colors div.log div.row span a.hover.c12, .nick-colors ul.memberList li.hover a.c12, .nick-colors ul.memberList li a.c12:hover { color: #46a139; } | |
| .nick-colors div.log div.row span a.c13, .nick-colors div.log div.row span a.c13:hover, .nick-colors div.log div.row span a.hover.c13:hover, .nick-colors div.log div.row span a.hover.c13, .nick-colors ul.memberList li.hover a.c13, .nick-colors ul.memberList li a.c13:hover { color: #25a694; } | |
| /* Members */ | |
| div.memberwrapper { background-color: #202020; border: 0; } | |
| ul.memberList a { color: #AAA; font-size: 12px; } | |
| span.mode_symbol, span.mode_pill { font-size: 12px; } | |
| /* Members - Owner */ | |
| ul.memberList li.category.owner h2 { color: #BA1719; background-color: #292929; border: 0; font-size: 12px; padding: 10px 7px; } | |
| ul.memberList li.owner ul { border: 0; background-color: #202020; } | |
| /* Members - Admin */ | |
| ul.memberList li.category.admin h2 { color: #D6A4F6; background-color: #292929; border: 0; font-size: 12px; padding: 10px 7px; } | |
| ul.memberList li.admin ul { border: 0; background-color: #202020; } | |
| /* Members - Ops */ | |
| ul.memberList li.category.ops h2 { color: #E7AA00; background-color: #292929; border: 0; font-size: 12px; padding: 10px 7px; } | |
| ul.memberList li.ops ul { border: 0; background-color: #202020; } | |
| /* Members - HalfOps */ | |
| ul.memberList li.category.halfops h2 { color: #A26D39; background-color: #292929; border: 0; font-size: 12px; padding: 10px 7px; } | |
| ul.memberList li.halfops ul { border: 0; background-color: #202020; } | |
| /* Members - Voiced */ | |
| ul.memberList li.category.voiced h2 { color: #66DA48; background-color: #292929; border: 0; font-size: 12px; padding: 10px 7px; } | |
| ul.memberList li.voiced ul { border: 0; background-color: #202020; } | |
| /* Members - Default */ | |
| ul.memberList li.category h2 { color: #fff; background-color: #292929; border: 0; font-size: 12px; padding: 10px 7px; } | |
| /* Input */ | |
| td.nickcell { border: 0; background-image: none; background-color: transparent; } | |
| div.nickinputwrapper { border: 0; background-color: transparent; background-image: none; } | |
| td.inputcell { background-color: #181818; } | |
| td.inputcell form.input { background-color: #181818; } | |
| td.inputcell textarea { background-color: #181818; color: #e1e1e1; } | |
| .hiddenUploads td.inputcell { border: 0; } | |
| .inputInfo { box-shadow: none; border: 8px solid #202020; margin-left: 0px; margin-bottom: -11px; background-image: none; background-color: #181818; padding: 10px; padding-right: 4px; } | |
| .inputInfo span.item a { text-decoration: none; color: #EEE; } | |
| /* Warnings */ | |
| p#xhrWarning { border: 0; padding: 10px; background-color: #B60000; color: #fff; } | |
| p#xhrWarning a { color: #FDDF00; } | |
| p#xhrWarning a:hover { color: #FDDF00; text-decoration: underline; } | |
| /* Messages */ | |
| div.log div.groupedLines { border: 1px dashed #4E4E4E; background-color: #161616; } | |
| div.log div.loadMore button { background-color: #F0CB35; } | |
| button:not([disabled]):hover span, button:not([disabled]):hover a { background-color: #FFD977; } | |
| /* Footer */ | |
| #footer { color: #CFCFCF; width: 190px; } | |
| #footer a { font-size: 11px; color: #7D848B} | |
| #footer a:hover { color: #FFC305; text-decoration: underline; } | |
| /* Popups */ | |
| .overlayHead { background-color: #319C39; background-image: none; } | |
| .overlaycontainer, .editNetworkOverlay { border: 10px solid #1D1D1D; box-shadow: none; background-color: #242424; } | |
| .overlay_container_prompt .overlayHead { background-image: none; background-color: #333; border-color: #494949 } | |
| .overlay_container_prompt .overlaycontents input.prompt { width: 98%; background-color: #161616; border: 0; padding: 5px; color: #FFF; } | |
| .overlay { color: #BBB; } | |
| .overlay_container_head button.close { background-color: #642E2E; } | |
| .overlay_container_head button.confirm { background-color: #168A40; } | |
| .overlaycontents button.close span { color: #F8F8F8; } | |
| button.action span, button.action a { background-image: none; box-shadow: none; background-color: #0E5D00; border: 0; color: #FFF; } | |
| button:not([disabled]).action:hover span, button:not([disabled]).action:hover a { background-color: #0A5717; background-image: none; box-shadow: none; border: 0; color: #FFF; } | |
| button:not([disabled]):hover span, button:not([disabled]):hover a { background-color: #4D0F0F; background-image: none; } | |
| .contextMenu { background-color: #242424; border: 10px solid #1D1D1D; } | |
| .contextMenu ul.actions { margin-bottom: -5px; } | |
| .contextMenu .info { color: #B9B9B9; font-size: 12px; line-height: 10px; } | |
| .contextMenu a { color: #7BB0D3; } | |
| .contextMenu form.messageForm { padding: 10px 15px; } | |
| .contextMenu input.message { background-color: #161616; border: 0; color: #FAFAFA; padding: 4px 6px; padding-right: 0px; } | |
| #memberContextMenu, .accountContainer { box-shadow: none; border: 10px solid #1D1D1D; } | |
| #memberContextMenu div.userContext { background-color: #181818; } | |
| #memberContextMenu h3 { color: #DDD; margin-bottom: 10px; } | |
| #memberContextMenu ul.actions { border-top: 1px solid #333; } | |
| #memberContextMenu ul.actions li a { color: #fafafa; } | |
| #memberContextMenu ul.actions li a:hover { background-color: #414852; } | |
| .bufferContextMenu.active ul.actions li a { background-color: #2E2E2E; color: #fff; } | |
| .bufferContextMenu.active ul.actions li a:hover { background-color: #414852; } | |
| #channelContextMenu ul.modeList { color: #868686; } | |
| #channelContextMenu .modeLine { border-top: 1px solid #3D3C3C; } | |
| /* Assorted */ | |
| #reorderNetworksDone > span { background-color: green; color: #fff; } | |
| #reorderNetworksDone > span:hover { background-color: #024702; } | |
| /* Settings */ | |
| #settingsContainer, #invitesContainer, #shortcutsContainer, #orgsContainer { font-size: 16px; background-color: #242424; color: #fff; } | |
| .accountContainer button.close { background-color: #852C2C; } | |
| .accountContainer button.close > span { color: #fff; } | |
| table.form td .input { background-color: #161616; border: 0; color: #FAFAFA; border: 2px solid #161616; } | |
| table.form td .input:focus { border: 2px solid #3F7AA8; margin: 0; } | |
| #settingsDeleteAccount { background-color: #830505; color: #fff; border: 0; } | |
| #settingsDeleteAccount h2 { color: #FFF; background-color: #660200; background-image: none; } | |
| .editNetworkOverlay { border: 10px solid #1D1D1D; box-shadow: none; background-color: #242424; color: #999; } | |
| form.addNetworkForm h2.addNetworkIdentityHeading span, form.addNetworkForm h2.addNetworkAdvancedHeading a { padding: 0; background-image: none; } | |
| form.addNetworkForm h2 span { background-color: #242424; color: #FFF; } | |
| #addNetworkContainer { background-color: #242424; color: #B1B1B1; } | |
| /* Fred's additions */ | |
| /* hide flash crap */ | |
| #sm2-container { display: none; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I guess line 153 should be
span.mode_symbol, span.mode_pill { font-size: 12px; }