From fdc9a5d8b0ff366e396b6eb3190fe917f984f602 Mon Sep 17 00:00:00 2001 From: "alessandro.g89" Date: Sun, 10 Jan 2016 15:40:49 +0000 Subject: [PATCH] Add dark theme by alessandro.g89 Source: https://userstyles.org/styles/122502/syncthing-dark --- AUTHORS | 1 + NICKS | 1 + gui/dark/assets/css/overrides.css | 475 ++++++++++++++++++ .../syncthing/core/aboutModalView.html | 1 + 4 files changed, 478 insertions(+) create mode 100644 gui/dark/assets/css/overrides.css diff --git a/AUTHORS b/AUTHORS index f29908950..e226ad551 100644 --- a/AUTHORS +++ b/AUTHORS @@ -2,6 +2,7 @@ Aaron Bieber Adam Piggott +Alessandro G. Alexander Graf Anderson Mesquita Andrew Dunham diff --git a/NICKS b/NICKS index 676516276..ef6b17614 100644 --- a/NICKS +++ b/NICKS @@ -2,6 +2,7 @@ acogdev alex2108 +alessandro.g89 andersonvom andrew-d asdil12 diff --git a/gui/dark/assets/css/overrides.css b/gui/dark/assets/css/overrides.css new file mode 100644 index 000000000..c8185504f --- /dev/null +++ b/gui/dark/assets/css/overrides.css @@ -0,0 +1,475 @@ +/* +// Copyright (C) 2014 The Syncthing Authors. +// +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this file, +// You can obtain one at http://mozilla.org/MPL/2.0/. + +*/ + +body { + padding-bottom: 70px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +h1, h2, h3, h4, h5 { + font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; + line-height: 1.25; +} + +ul+h5 { + margin-top: 1.5em; +} + +#content { + margin-bottom: 50px; +} + +.panel-progress { + background: #3498db; + height: 3px; + left: 0; + position: absolute; + top: 0; + display: block; +} + +.panel-title { + position: relative; + text-overflow: ellipsis; + overflow: hidden; +} + +identicon { + display: inline-block; + position: relative; + width: 1em; + height: 1em; + line-height: 1; + margin-right: 5px; +} + +.identicon { + width: 1em; + height: 1em; +} + +.identicon rect { + fill: #333; +} + +.checkbox { + margin-top: 0px; +} + +.checkbox input[type="checkbox"], .radio input[type="radio"] { + float: none; /* issue #1197 */ +} + +.popover { + max-width: none; + min-width: 250px; +} + +.panel-heading .fa, .modal-header .fa { + margin-right: 10px; +} + +.panel-heading { + position: relative; + overflow: hidden; +} + +.text-monospace { + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; +} + +.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td { + border-top: none; +} + +.logo { + margin: 0; + padding: 0; + top: -5px; + position: relative; +} + +.list-no-bullet { + list-style-type: none +} + +.li-column { + display: inline-block; + min-width: 7em; + margin-right: 1em; + background-color: rgb(236, 240, 241); + border-radius: 3px; + padding: 1px 4px; + margin: 2px 2px; +} +.li-column span.data { + margin-left: 0.5em; + min-width: 10em; + text-align: right; + display: inline-block; +} + +.ng-cloak { + display: none !important; +} + +.table th { + white-space: nowrap; + font-weight: 400; +} + +.table td { + padding-left: 20px !important; +} + +.table td.small-data { + white-space: nowrap; +} + +table.table-condensed { + table-layout: fixed; +} +table.table-condensed td { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +@media (max-width:767px) { + table.table-condensed td { + /* for mobile phones to allow linebreaks in long repro folder/shared with + * columns. */ + white-space: normal; + } +} + +.navbar-right { + /* to align with panel */ + padding-right: 15px; +} + +/** + * Menu for select language + */ + +@media (min-width:480px) and (max-width:649px) { + *[language-select] > .dropdown-menu { + width: 230px; + } +} + +@media (min-width:650px) { + *[language-select] > .dropdown-menu > li { + width: 50%; + float: left; + } + *[language-select] > .dropdown-menu { + width: 440px; + } +} + + +@media (max-width:479px) { + .dropdown-menu { + padding-top: 55px; + } + + nav .dropdown-toggle { + font-size: 14px; + } + + .dropdown-toggle { + float: left; + } + + .navbar-brand { + padding-left: 0; + padding-top: 16px; + } + + .navbar-nav .open .dropdown-menu > li > a { + padding: 12px 15px 12px 25px; + } +} + + +.panel-body .table-condensed { + margin-bottom: 0; +} + +.dl-horizontal.dl-narrow dt { + width: 40px; +} + +.dl-horizontal.dl-narrow dd { + margin-left: 60px; +} + +/** + * Progress bars with centered text + */ + +.progress { + margin-bottom: 0px; + position: relative; +} + +.progress span.frontal { + text-align: center; + position: absolute; + display: block; + width: 100%; +} + +.three-columns { + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; +} + +.two-columns { + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; +} + +ul.three-columns li, ul.two-columns li { + padding-left: 0.5em; + text-indent: -0.5em; +} + +/** Footer nav on small devices **/ + +@media (max-width: 1199px) { + body { + padding-bottom: 0; + } + + .navbar-fixed-bottom { + position: static; + } +} + + +/** + +Dark theme customizations start here. + +Author: alessandro.g89 +Source: https://userstyles.org/styles/122502/syncthing-dark + +**/ + +body { + color: #aaa !important; + background-color: black !important; +} + +a:hover,a:focus,a.focus{ + outline: none !important; +} + + +/* navbar */ +.navbar { + background-color: #333 !important; + border-color: #333 !important; + border-width: 2px !important; +} + +.navbar-text, .dropdown>a, .dropdown-menu>li>a, .hidden-xs>a, .navbar-link { + color: #aaa !important; +} + +.dropdown-menu { + border-color: #333 !important; + border-width: 2px !important; + background-color: #222 !important; +} + +.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { + color: #fff !important; + background-color: #333 !important; +} + +.open>.dropdown-toggle, .dropdown-toggle:hover { + border-color: #333 !important; + background-color: #222 !important; +} + +.divider { + background-color: #333 !important; + height: 2px !important; +} + +li.hidden-xs:hover, .navbar-link:hover, .navbar-link:focus { + outline: none !important; + border-color: #333 !important; + background-color: #222 !important; +} + +.dropdown-menu>.active>a { + color: #fff !important; + background-color: #217dbb !important; +} + + +/* main panel */ +.panel { + background-color: #111 !important; + border-width: 2px !important; +} + +.panel-default { + border-color: #222 !important; +} + +.panel-default>.panel-heading { + color: #aaa !important; + border-color: #222 !important; + background-color: #222 !important; +} + +.panel-footer { + background-color: #111 !important; + border-width: 0 !important; +} + +.table-striped>tbody>tr:nth-of-type(odd) { + background-color: #181818 !important; +} + +.panel-group .panel-heading+.panel-collapse>.panel-body, .panel-group .panel-heading+.panel-collapse>.list-group { + border-top: 1px solid #222 !important; +} + +.identicon>rect { + fill: #aaa !important; +} + +/* buttons */ +.btn { + border-radius: 3px !important; + border-width: 0px !important; +} + +.btn:hover, .btn:focus, .btn.focus { + outline: none !important; +} +.btn-default { + color: #aaa !important; + background-color: #333 !important; +} + +.btn-default:hover, .btn-default:focus, .btn-default.focus { + color: #fff !important; + background-color: #484848 !important; +} + +.btn-primary { + background-color: #217dbb !important; +} + +.btn-primary:hover, .btn-primary:focus, .btn-primary.focus { + background-color: #3498db !important; +} + +.btn-warning { + background-color: #c29d0b !important; +} + +.btn-warning:hover, .btn-warning:focus, .btn-warning.focus { + background-color: #f1c40f !important; +} + +.btn-danger { + background-color: #d62c1a !important; +} + +.btn-danger:hover, .btn-danger:focus, .btn-danger.focus { + background-color: #e74c3c !important; +} + + +/* modal dialogs */ +.modal-header { + border-color: #222 !important; + background-color: #222; +} + +.modal-content { + border-color: #666 !important; + border-width: 2px !important; + background-color: #111 !important; +} + +.modal-footer { + border-color: #111 !important; + background-color: #111 !important; +} + +.alert-warning { + background-color: #c29d0b !important; +} + +.alert-danger { + background-color: #d62c1a !important; +} + +.help-block { + color: #aaa !important; +} + +.form-control { + color: #aaa !important; + border-color: #444 !important; + background-color: black !important; +} + +code.ng-binding{ + color: #f99 !important; + background-color: #444 !important; +} + +.well, .form-control[readonly="readonly"] { /* read-only fields*/ + color: #444 !important; + border-color: #444 !important; + background-color: #111 !important; +} + +/* buttons for pagination */ +.pagination>li>a, .pagination>li>span { + background-color: #333 !important; + border-color: #484848 !important; +} + +.pagination>li>a:hover, .pagination>li>a:focus, .pagination>li>a.focus { + background-color: #484848 !important; +} + + +/* progess bars */ +.progress-bar { + background-color: #217dbb !important; +} + +.progress-bar-success { + background-color: #0A8522 !important; +} + +.progress-bar-info { + background-color: #9b59b6 !important; +} + +.progress-bar-warning { + background-color: #c29d0b !important; +} + +.progress-bar-danger { + background-color: #d62c1a !important; +} diff --git a/gui/default/syncthing/core/aboutModalView.html b/gui/default/syncthing/core/aboutModalView.html index 9a0f01685..4060e7de7 100644 --- a/gui/default/syncthing/core/aboutModalView.html +++ b/gui/default/syncthing/core/aboutModalView.html @@ -14,6 +14,7 @@
  • Aaron Bieber
  • Adam Piggott
    • +
  • Alessandro G.
  • Alexander Graf
  • Anderson Mesquita
  • Andrew Dunham