-// Slate 2.3.0
+// Slate 3.0.1
// Bootswatch
// -----------------------------------------------------
-
-// TYPOGRAPHY
-// -----------------------------------------------------
-
-h1, h2, h3, h4, h5, h6 {
- text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
-}
-
-code, pre {
- background-color: #F7F7F7;
- border: 1px solid darken(@grayDarker, 5%);
- text-shadow: none;
+.btn-shadow(@color) {
+ #gradient > .vertical-three-colors(lighten(@color, 6%), @color, 60%, darken(@color, 4%));
}
-// SCAFFOLDING
-// -----------------------------------------------------
-
-hr, legend, .page-header {
- border-top: none;
- border-bottom: 1px solid darken(@grayDarker, 5%);
- background-color: transparent;
+.btn-shadow-inverse(@color) {
+ #gradient > .vertical-three-colors(darken(@color, 24%), darken(@color, 18%), 40%, darken(@color, 14%));
}
-// NAVBAR
-// -----------------------------------------------------
+// Navbar =====================================================================
.navbar {
- .navbar-inner {
- #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
- }
-
- .brand {
- font-weight: bold;
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
- border-right: 1px solid darken(@gray, 15%);
- }
+ .btn-shadow(@navbar-default-bg);
+ filter: none;
+ border: 1px solid rgba(0, 0, 0, 0.6);
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
- .navbar-text {
- padding: 0 15px;
- font-weight: bold;
+ &-inverse {
+ .btn-shadow(@navbar-inverse-bg);
+ filter: none;
}
- .nav > li > a {
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+ &-nav > li > a {
border-right: 1px solid rgba(0, 0, 0, 0.2);
border-left: 1px solid rgba(255, 255, 255, 0.1);
&:hover {
- #gradient > .directional(@grayDarker, @grayDark, 280deg);
- border-left: 1px solid transparent;
- border-right: 1px solid transparent;
+ .btn-shadow-inverse(@navbar-default-bg);
+ border-left-color: transparent;
}
}
- .nav > li.active > a,
- .nav > li.active > a:hover {
- color: @grayLighter;
- background-color: @grayDark;
- #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
- border-right: 1px solid darken(@gray, 15%);
+ .nav .open > a {
+ border-color: transparent;
}
- .navbar-search .search-query {
- border: 1px solid darken(@gray, 15%);
+ &-nav > li.active > a {
+ border-left-color: transparent;
}
- .btn,
- .btn-group {
- margin: 4px 0;
+ &-form {
+ margin-left: 5px;
+ margin-right: 5px;
}
+}
- .divider-vertical {
- background-color: transparent;
- border-right: none;
- }
+// Buttons ====================================================================
- .dropdown-menu::after {
- border-bottom: 6px solid @grayDark;
- }
+.btn,
+.btn:hover {
+ border-color: rgba(0, 0, 0, 0.6);
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+}
- &-inverse {
+.btn-default {
+ .btn-shadow(@btn-default-bg);
+}
- .navbar-inner {
- #gradient > .vertical-three-colors(darken(@grayDarker, 3%), darken(@grayDarker, 8%), 70%, darken(@grayDarker, 8%));
- }
+.btn-primary {
+ .btn-shadow(@btn-primary-bg);
+}
- .nav li > a {
- background-image: none;
- background-color: transparent;
- }
+.btn-success {
+ .btn-shadow(@btn-success-bg);
+}
- .nav li > a:hover,
- .nav li.active > a,
- .nav li.active > a:hover {
- #gradient > .directional(darken(@grayDarker, 10%), darken(@grayDarker, 5%), 280deg);
- }
- }
+.btn-info {
+ .btn-shadow(@btn-info-bg);
}
-@media (max-width: @navbarCollapseWidth) {
+.btn-warning {
+ .btn-shadow(@btn-warning-bg);
+}
- .navbar .nav-collapse {
+.btn-danger {
+ .btn-shadow(@btn-danger-bg);
+}
- .nav li > a,
- .nav li > a:hover,
- .nav .active > a,
- .nav .active > a:hover {
- .box-shadow(none);
- color: @grayLighter;
- border: 1px solid transparent;
- background-color: transparent;
- background-image: none;
- }
+.btn-default:hover {
+ .btn-shadow-inverse(@btn-default-bg);
+}
- .nav li > a:hover,
- .nav .active > a:hover {
- background-color: @grayDarker;
- }
+.btn-primary:hover {
+ .btn-shadow-inverse(@btn-primary-bg);
+}
- .navbar-form,
- .navbar-search {
- border-color: transparent;
- .box-shadow(none);
- }
+.btn-success:hover {
+ .btn-shadow-inverse(@btn-success-bg);
+}
- .nav-header {
- color: @grayLight;
- }
- }
+.btn-info:hover {
+ .btn-shadow-inverse(@btn-info-bg);
+}
- .navbar-inverse .nav-collapse {
+.btn-warning:hover {
+ .btn-shadow-inverse(@btn-warning-bg);
+}
- .nav li > a:hover,
- .nav .active > a:hover {
- background-color: @grayDarker !important;
- }
- }
+.btn-danger:hover {
+ .btn-shadow-inverse(@btn-danger-bg);
}
-div.subnav {
+// Typography =================================================================
- margin: 0 1px;
- #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
- border: 1px solid transparent;
- .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
+h1, h2, h3, h4, h5, h6 {
+ text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+}
- .nav > li > a {
- color: @grayLighter;
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
- border-right: 1px solid darken(@gray, 15%);
- border-left: 1px solid @gray;
+.text-primary {
+ color: @brand-primary;
+}
- &:hover {
- color: @grayLighter;
- background-color: @grayDark;
- #gradient > .directional(@grayDarker, @grayDark, 280deg);
- border-left: 1px solid transparent;
- border-right: 1px solid transparent;
- }
- }
+.text-success {
+ color: @brand-success;
+}
- .nav > li.active > a,
- .nav > li.active > a:hover {
- color: @grayLighter;
- background-color: @grayDark;
- #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
- border-right: 1px solid darken(@gray, 15%);
- }
+.text-danger {
+ color: @brand-danger;
+}
- .nav > li:first-child > a,
- .nav > li:first-child > a:hover {
- border-left: 1px solid transparent;
- }
+.text-warning {
+ color: @brand-warning;
+}
- .nav > li.active:last-child > a,
- .nav > li:last-child > a:hover {
- border-right: 1px solid darken(@gray, 15%);
- }
+.text-info {
+ color: @brand-info;
+}
+
+// Tables =====================================================================
+
+.table {
- .open .dropdown-toggle {
- border-right: 1px solid darken(@gray, 15%);
- border-left: 1px solid @gray;
+ tr.success,
+ tr.warning,
+ tr.danger {
+ color: #fff;
}
- &.subnav-fixed {
- top: @navbarHeight;
- margin: 0;
- .box-shadow(none);
+ &-bordered tbody {
- .nav > li.active:first-child > a,
- .nav > li:first-child > a:hover {
- border-left: 1px solid darken(@gray, 15%);
+ tr.success,
+ tr.warning,
+ tr.danger {
+
+ td,
+ &:hover td {
+ border-color: @table-border-color;
+ }
}
}
}
-// NAV
-// -----------------------------------------------------
+.table-responsive > .table {
+ background-color: @table-bg;
+}
-.nav {
+// Forms ======================================================================
- .nav-header {
- text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
+.has-warning {
+ .help-block,
+ .control-label {
+ color: @brand-warning;
}
- & > li > a {
- #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
- .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
- border: none;
- color: @grayLight;
- font-weight: bold;
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+ .form-control,
+ .form-control:focus {
+ border-color: @brand-warning;
}
+}
- li.active > a,
- li.active > a:hover {
- background-color: transparent;
- border: none;
- color: @white;
+.has-error {
+ .help-block,
+ .control-label {
+ color: @brand-danger;
}
- li > a:hover {
- background-color: transparent;
- color: @grayLighter;
+ .form-control,
+ .form-control:focus {
+ border-color: @brand-danger;
}
-
}
-.nav-list {
- background-color: @grayDark;
- .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
-
- li > a {
- background-image: none;
- text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
- }
-
- .nav-header {
- color: @gray;
- text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+.has-success {
+ .help-block,
+ .control-label {
+ color: @brand-success;
}
- .divider {
- border-bottom: 1px solid darken(@grayDarker, 5%);
- background-color: transparent;
+ .form-control,
+ .form-control:focus {
+ border-color: @brand-success;
}
}
-.nav-tabs {
- border-bottom: none;
-}
-
-.tabs-below .nav-tabs {
- border-top: none;
+legend {
+ color: #fff;
}
-.tabs-left .nav-tabs {
- border-right: none;
+.input-group-addon {
+ border-color: rgba(0, 0, 0, 0.6);
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+ .btn-shadow(@btn-default-bg);
}
-.tabs-right .nav-tabs {
- border-left: none;
-}
+// Navs =======================================================================
-.nav-tabs.nav-stacked {
+.nav {
- li > a,
- li > a:hover {
- border: 1px solid darken(@grayDarker, 5%);
- background-image: none;
+ .open > a,
+ .open > a:hover,
+ .open > a:focus {
+ border-color: rgba(0, 0, 0, 0.6);
}
- li > a:hover,
- .active > a,
- .active > a:hover {
- background-color: @wellBackground;
- color: @white;
- }
}
-.breadcrumb {
- border: 1px solid transparent;
- #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
- .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
+.nav-pills {
- a {
- color: @grayLighter;
- font-weight: bold;
+ & > li > a {
+ .btn-shadow(@btn-default-bg);
+ border: 1px solid rgba(0, 0, 0, 0.6);
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+
+ &:hover {
+ .btn-shadow-inverse(@btn-default-bg);
+ border: 1px solid rgba(0, 0, 0, 0.6);
+ }
}
- li {
- color: @grayLight;
- font-weight: bold;
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+ & > li.active > a,
+ & > li.active > a:hover {
+ background-color: none;
+ .btn-shadow-inverse(@btn-default-bg);
+ border: 1px solid rgba(0, 0, 0, 0.6);
+ }
+
+ & > li.disabled > a,
+ & > li.disabled > a:hover {
+ .btn-shadow(@btn-default-bg);
}
}
.pagination {
- ul {
- .box-shadow(none);
- }
-
- ul > li > a,
- ul > li > span {
- border-left: 1px solid @gray;
- border-right: 1px solid darken(@gray, 15%);
- border-top: none;
- border-bottom: none;
- #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
- .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
- color: @grayLighter;
- font-weight: bold;
+ & > li > a {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+ .btn-shadow(@btn-default-bg);
&:hover {
- #gradient > .directional(@grayDarker, @grayDark, 280deg);
- border-left: 1px solid transparent;
+ .btn-shadow-inverse(@btn-default-bg);
}
}
- ul > .active > a,
- ul > .active > a:hover,
- ul > .active > span,
- ul > .active > span:hover {
- color: @grayLighter;
- background-color: @grayDark;
- #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
- border-left: 1px solid transparent;
+ & > li.active > a {
+ .btn-shadow-inverse(@btn-default-bg);
+ border-color: rgba(0, 0, 0, 0.6);
}
- ul > .disabled > a,
- ul > .disabled > a:hover,
- ul > .disabled > span,
- ul > .disabled > span:hover {
- border-left: 1px solid @gray;
- border-right: 1px solid darken(@gray, 15%);
- border-top: none;
- border-bottom: none;
- #gradient > .vertical-three-colors(@grayLight, @gray, 70%, @gray);
+ & > li.disabled > a,
+ & > li.disabled > a:hover {
+ background-color: transparent;
+ .btn-shadow(@btn-default-bg);
}
}
.pager {
- li > a,
- li > span {
- border: 1px solid transparent;
- .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
- #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
+ & > li > a {
+ .btn-shadow(@btn-default-bg);
+ border: 1px solid rgba(0, 0, 0, 0.6);
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
&:hover {
- #gradient > .directional(@grayDarker, @grayDark, 280deg);
- border: 1px solid transparent;
+ .btn-shadow-inverse(@btn-default-bg);
+ border: 1px solid rgba(0, 0, 0, 0.6);
}
- }
-
- .disabled a,
- .disabled a:hover {
- background-color: transparent;
- }
-}
-
-// BUTTONS
-// -----------------------------------------------------
-
-.btn {
- .buttonBackground(@gray, darken(@gray, 10%));
- .border-radius(3px);
- border: 1px solid @grayDarker;
-}
-
-.btn, .btn:hover {
- color: @white;
- font-weight: bold;
- text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3);
-}
-
-.btn-primary {
- .buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
- color: @grayDark;
- text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
-}
-
-.btn-warning {
- .buttonBackground(lighten(@orange, 15%), @orange);
-}
-
-.btn-danger {
- .buttonBackground(@red, #bd362f);
-}
-
-.btn-success {
- .buttonBackground(@green, #51a351);
-}
-
-.btn-info {
- .buttonBackground(@blue, #2f96b4);
-}
-
-.btn-inverse {
- .buttonBackground(@gray, @grayDarker);
-}
-
-.caret {
- border-top-color: @white;
-}
-
-// TABLES
-// -----------------------------------------------------
-
-.table {
-
- tbody tr.success td {
- background-color: @successText;
}
- tbody tr.error td {
- background-color: @errorText;
- }
-
- tbody tr.info td {
- background-color: @infoText;
+ & > li.disabled > a,
+ & > li.disabled > a:hover {
+ background-color: transparent;
+ .btn-shadow(@btn-default-bg);
}
-
-}
-
-
-// FORMS
-// -----------------------------------------------------
-
-label, input, button, select, textarea, legend {
- color: @textColor;
}
-legend, label {
- text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
-}
-
-.input-prepend .add-on,
-.input-append .add-on {
- vertical-align: top;
- background-color: @gray;
- border-top: 1px solid @grayLight;
- border-left: 1px solid @grayLight;
- border-bottom: 1px solid @grayDark;
- border-right: 1px solid @grayDark;
- text-shadow: none;
-}
-
-.input-append .btn,
-.input-prepend .btn {
- margin-top: -1px;
- padding: 5px 14px;
-}
-
-.uneditable-input,
-input[disabled],
-select[disabled],
-textarea[disabled],
-input[readonly],
-select[readonly],
-textarea[readonly] {
- color: @grayLighter;
-}
-
-.form-actions {
- border-top: none;
-}
-
-// DROPDOWNS
-// -----------------------------------------------------
-
-.dropdown-menu {
- .box-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
-}
-
-.dropdown.open .dropdown-toggle {
- background-color: @grayDark;
- color: @grayLighter;
-}
-
-.dropdown-submenu > a::after {
- border-left-color: @white;
+.breadcrumb {
+ border: 1px solid rgba(0, 0, 0, 0.6);
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+ .btn-shadow(@btn-default-bg);
}
-// ALERTS, LABELS, BADGES
-// -----------------------------------------------------
-
-.label, .alert {
- color: rgba(255, 255, 255, 0.9);
- text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
- .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
-}
+// Indicators =================================================================
.alert {
- background-color: @orange;
- border-color: @orange;
- .alert-heading {
- color: rgba(255, 255, 255, 0.9);
- text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
+ .alert-link,
+ a {
+ color: #fff;
+ text-decoration: underline;
}
}
-.alert-success {
- background-color: @successText;
- border-color: @successText;
-}
-
-.alert-error {
- background-color: @errorText;
- border-color: @errorText;
-}
-
-.alert-info {
- background-color: @infoText;
- border-color: @infoText;
-}
-
-// MISC
-// -----------------------------------------------------
-
-.well, .hero-unit {
- .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5));
-}
-
-.thumbnail,
-a.thumbnail:hover {
- border: 1px solid darken(@grayDarker, 5%);
-}
-
-.progress {
- background-color: darken(@grayDarker, 3%);
- #gradient > .vertical(darken(@grayDarker, 3%), darken(@grayDarker, 3%));
- .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5));
-}
+// Progress bars ==============================================================
-.footer {
- border-top: 1px solid darken(@grayDarker, 5%);
+// Containers =================================================================
- p {
- color: @textColor;
- }
+.jumbotron {
+ border: 1px solid rgba(0, 0, 0, 0.6);
}
-.modal {
-
- background-color: darken(@grayDark, 5%);
-
- &-header {
- border-bottom: none;
- }
-
- &-body {
- border-bottom: 1px solid #1C1E22;
- }
-
- &-footer {
- border-top: none;
- background-color: @grayDarker;
- .box-shadow(none);
- }
+.list-group-item {
+ background-color: lighten(@body-bg, 5%);
}
-// MEDIA QUERIES
-// -----------------------------------------------------
-
-@media (max-width: 979px) {
- .navbar .brand {
- border-right: none;
- }
-}
+.panel-primary,
+.panel-success,
+.panel-danger,
+.panel-warning,
+.panel-info {
-@media (max-width: 768px) {
- div.subnav .nav > li + li > a {
- border-top: 1px solid transparent;
+ .panel-heading {
+ border-color: #000;
}
}
\ No newline at end of file