Skip to content

GitLab

Commit 7c679f20 authored by Thomas Park's avatar Thomas Park
Browse files

darkly: tweaks

parent 39a44964
Hide whitespace changes
Inline Side-by-side
darkly/bootstrap.css
View file @ 7c679f20
@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600);
@import url("//fonts.googleapis.com/css?family=Lato:400,700,400italic");
/*!
* Bootswatch v3.1.1
* Homepage: http://bootswatch.com
......@@ -273,7 +273,7 @@ html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.42857143;
color: #ffffff;
......@@ -362,8 +362,8 @@ h6,
.h4,
.h5,
.h6 {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1.1;
color: inherit;
}
......@@ -565,7 +565,7 @@ a.bg-danger:hover {
.page-header {
padding-bottom: 9.5px;
margin: 42px 0 21px;
border-bottom: 1px solid #464545;
border-bottom: 1px solid transparent;
}
ul,
ol {
......@@ -1644,7 +1644,7 @@ legend {
line-height: inherit;
color: #ffffff;
border: 0;
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid transparent;
}
label {
display: inline-block;
......@@ -3936,15 +3936,15 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
}
.navbar-default {
background-color: #00bc8c;
border-color: #009b73;
background-color: #375a7f;
border-color: transparent;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #005640;
color: #00bc8c;
background-color: transparent;
}
.navbar-default .navbar-text {
......@@ -3955,14 +3955,14 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #005640;
color: #00bc8c;
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #008966;
background-color: #28415b;
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
......@@ -3971,23 +3971,23 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
background-color: transparent;
}
.navbar-default .navbar-toggle {
border-color: #008966;
border-color: #28415b;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #008966;
background-color: #28415b;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #009b73;
border-color: transparent;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: #008966;
background-color: #28415b;
color: #ffffff;
}
@media (max-width: 767px) {
......@@ -3996,14 +3996,14 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #005640;
color: #00bc8c;
background-color: transparent;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #008966;
background-color: #28415b;
}
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
......@@ -4016,18 +4016,18 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
color: #ffffff;
}
.navbar-default .navbar-link:hover {
color: #005640;
color: #00bc8c;
}
.navbar-inverse {
background-color: #375a7f;
border-color: #28415b;
background-color: #00bc8c;
border-color: transparent;
}
.navbar-inverse .navbar-brand {
color: #ffffff;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
color: #00bc8c;
color: #375a7f;
background-color: transparent;
}
.navbar-inverse .navbar-text {
......@@ -4038,14 +4038,14 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #00bc8c;
color: #375a7f;
background-color: transparent;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #2f4d6d;
background-color: #00a379;
}
.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:hover,
......@@ -4054,45 +4054,45 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
background-color: transparent;
}
.navbar-inverse .navbar-toggle {
border-color: #28415b;
border-color: #008966;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
background-color: #28415b;
background-color: #008966;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: #2c4866;
border-color: #009871;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
background-color: #2f4d6d;
background-color: #00a379;
color: #ffffff;
}
@media (max-width: 767px) {
.navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
border-color: #28415b;
border-color: transparent;
}
.navbar-inverse .navbar-nav .open .dropdown-menu .divider {
background-color: #28415b;
background-color: transparent;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
color: #00bc8c;
color: #375a7f;
background-color: transparent;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #2f4d6d;
background-color: #00a379;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
......@@ -4105,7 +4105,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
color: #ffffff;
}
.navbar-inverse .navbar-link:hover {
color: #00bc8c;
color: #375a7f;
}
.breadcrumb {
padding: 8px 15px;
......@@ -5060,7 +5060,7 @@ a.list-group-item-danger.active:focus {
font-weight: bold;
line-height: 1;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
text-shadow: none;
opacity: 0.2;
filter: alpha(opacity=20);
}
......@@ -5116,9 +5116,9 @@ button.close {
}
.modal-content {
position: relative;
background-color: #ffffff;
background-color: #303030;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.8);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
......@@ -5299,9 +5299,9 @@ button.close {
max-width: 276px;
padding: 1px;
text-align: left;
background-color: #ffffff;
background-color: #303030;
background-clip: padding-box;
border: 1px solid #cccccc;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
......@@ -5326,8 +5326,8 @@ button.close {
font-size: 15px;
font-weight: normal;
line-height: 18px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
background-color: #282828;
border-bottom: 1px solid #1c1c1c;
border-radius: 5px 5px 0 0;
}
.popover-content {
......@@ -5353,7 +5353,7 @@ button.close {
left: 50%;
margin-left: -11px;
border-bottom-width: 0;
border-top-color: #999999;
border-top-color: #666666;
border-top-color: rgba(0, 0, 0, 0.25);
bottom: -11px;
}
......@@ -5362,14 +5362,14 @@ button.close {
bottom: 1px;
margin-left: -10px;
border-bottom-width: 0;
border-top-color: #ffffff;
border-top-color: #303030;
}
.popover.right > .arrow {
top: 50%;
left: -11px;
margin-top: -11px;
border-left-width: 0;
border-right-color: #999999;
border-right-color: #666666;
border-right-color: rgba(0, 0, 0, 0.25);
}
.popover.right > .arrow:after {
......@@ -5377,13 +5377,13 @@ button.close {
left: 1px;
bottom: -10px;
border-left-width: 0;
border-right-color: #ffffff;
border-right-color: #303030;
}
.popover.bottom > .arrow {
left: 50%;
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #999999;
border-bottom-color: #666666;
border-bottom-color: rgba(0, 0, 0, 0.25);
top: -11px;
}
......@@ -5392,21 +5392,21 @@ button.close {
top: 1px;
margin-left: -10px;
border-top-width: 0;
border-bottom-color: #ffffff;
border-bottom-color: #303030;
}
.popover.left > .arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #999999;
border-left-color: #666666;
border-left-color: rgba(0, 0, 0, 0.25);
}
.popover.left > .arrow:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: #ffffff;
border-left-color: #303030;
bottom: -10px;
}
.carousel {
......@@ -5699,6 +5699,12 @@ button.close {
display: none !important;
}
}
.navbar {
border-width: 0;
}
.navbar-brand {
padding: 18.5px 15px 20.5px;
}
.navbar-form .form-control {
background-color: white;
}
......@@ -5786,43 +5792,13 @@ table-bordered > tfoot > tr > td,
border: 1px solid #464545;
}
.form-control,
textarea.form-control,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
border-width: 2px;
input {
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.form-control:focus,
textarea.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
input:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
......@@ -5832,7 +5808,6 @@ input[type="color"]:focus,
}
.has-warning .form-control,
.has-warning .form-control:focus {
border: 2px solid #f39c12;
-webkit-box-shadow: none;
box-shadow: none;
}
......@@ -5842,7 +5817,6 @@ input[type="color"]:focus,
}
.has-error .form-control,
.has-error .form-control:focus {
border: 2px solid #e74c3c;
-webkit-box-shadow: none;
box-shadow: none;
}
......@@ -5852,7 +5826,6 @@ input[type="color"]:focus,
}
.has-success .form-control,
.has-success .form-control:focus {
border: 2px solid #00bc8c;
-webkit-box-shadow: none;
box-shadow: none;
}
......@@ -5902,6 +5875,16 @@ input[type="color"]:focus,
.panel-default > .panel-heading {
background-color: #464545;
}
.modal {
color: #ffffff;
}
.modal-header,
.modal-footer {
border-color: #464545;
}
.popover {
color: #ffffff;
}
.clearfix:before,
.clearfix:after,
.container:before,
......
darkly/bootstrap.min.css
View file @ 7c679f20
This source diff could not be displayed because it is too large. You can view the blob instead.
darkly/bootswatch.less
View file @ 7c679f20
......@@ -2,14 +2,24 @@
// Bootswatch
// -----------------------------------------------------
@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600);
@import url("//fonts.googleapis.com/css?family=Lato:400,700,400italic");
// Navbar =====================================================================
.navbar-form {
.form-control {
background-color: white;
&:focus {
border-color: white;
.navbar {
border-width: 0;
&-brand {
padding: 18.5px 15px 20.5px;
}
&-form {
.form-control {
background-color: white;
&:focus {
border-color: white;
}
}
}
}
......@@ -93,23 +103,8 @@ table,
// Forms ======================================================================
.form-control,
textarea.form-control,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
border-width: 2px;
input {
border: none;
.box-shadow(none);
&:focus {
......@@ -125,7 +120,6 @@ input[type="color"],
.form-control,
.form-control:focus {
border: 2px solid @brand-warning;
.box-shadow(none);
}
}
......@@ -138,7 +132,6 @@ input[type="color"],
.form-control,
.form-control:focus {
border: 2px solid @brand-danger;
.box-shadow(none);
}
}
......@@ -151,7 +144,6 @@ input[type="color"],
.form-control,
.form-control:focus {
border: 2px solid @brand-success;
.box-shadow(none);
}
}
......@@ -228,3 +220,15 @@ input[type="color"],
background-color: @panel-footer-bg;
}
.modal {
color: @text-color;
&-header,
&-footer {
border-color: @gray;
}
}
.popover {
color: @text-color;
}
darkly/index.html
View file @ 7c679f20
<!DOCTYPE html>
<html lang="en">
<head>
......@@ -97,7 +96,7 @@
<div class="row">
<div class="col-lg-6">
<h1>Darkly</h1>
<p class="lead">Night-mode of Flatly</p>
<p class="lead">Flatly in night mode</p>
</div>
<div class="col-lg-6" style="padding: 15px 15px 0 15px;">
<div class="well sponsor">
......@@ -1285,6 +1284,8 @@
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../assets/js/bootswatch.js"></script>
......
darkly/thumbnail.png
View replaced file @ 39a44964 View file @ 7c679f20
darkly/thumbnail.png

27.7 KB | W: | H:

darkly/thumbnail.png

28.6 KB | W: | H:

darkly/thumbnail.png
darkly/thumbnail.png
darkly/thumbnail.png
darkly/thumbnail.png
  • 2-up
  • Swipe
  • Onion skin
darkly/variables.less
View file @ 7c679f20
......@@ -39,7 +39,7 @@
//
//## Font, line-height, and color for body text, headings, and more.
@font-family-sans-serif: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-sans-serif: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
......@@ -63,7 +63,7 @@
//** By default, this inherits from the `<body>`.
@headings-font-family: @font-family-base;
@headings-font-weight: 300;
@headings-font-weight: 400;
@headings-line-height: 1.1;
@headings-color: inherit;
......@@ -193,7 +193,7 @@
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@legend-color: @text-color;
@legend-border-color: #e5e5e5;
@legend-border-color: transparent;
//** Background color for textual input addons
@input-group-addon-bg: @gray-dark;
......@@ -334,12 +334,12 @@
@navbar-collapse-max-height: 340px;
@navbar-default-color: #777;
@navbar-default-bg: @brand-success;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
@navbar-default-bg: @brand-primary;
@navbar-default-border: transparent;
// Navbar links
@navbar-default-link-color: #fff;
@navbar-default-link-hover-color: darken(@navbar-default-bg, 20%);
@navbar-default-link-hover-color: @brand-success;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #fff;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 10%);
......@@ -360,12 +360,12 @@
// Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color: #fff;
@navbar-inverse-bg: @brand-primary;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-bg: @brand-success;
@navbar-inverse-border: transparent;
// Inverted navbar links
@navbar-inverse-link-color: @navbar-inverse-color;
@navbar-inverse-link-hover-color: @brand-success;
@navbar-inverse-link-hover-color: @brand-primary;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-color;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 5%);
......@@ -506,13 +506,13 @@
//##
//** Popover body background color
@popover-bg: #fff;
@popover-bg: @gray-dark;
//** Popover maximum width
@popover-max-width: 276px;
//** Popover border color
@popover-border-color: rgba(0,0,0,.2);
//** Popover fallback border color
@popover-fallback-border-color: #ccc;
@popover-fallback-border-color: #999;
//** Popover title background color
@popover-title-bg: darken(@popover-bg, 3%);
......@@ -520,7 +520,7 @@
//** Popover arrow width
@popover-arrow-width: 10px;
//** Popover arrow color
@popover-arrow-color: #fff;
@popover-arrow-color: @popover-bg;
//** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1);
......@@ -566,9 +566,9 @@
@modal-title-line-height: @line-height-base;
//** Background color of modal content area
@modal-content-bg: #fff;
@modal-content-bg: @gray-dark;
//** Modal content border color
@modal-content-border-color: rgba(0,0,0,.8);
@modal-content-border-color: rgba(0,0,0,.2);
//** Modal content border color **for IE8**