Skip to content

D
docs
Commit 2ac7105c authored by Julius Volz's avatar Julius Volz
Browse files
Options

Complete site redesign and added non-doc pages.

parent 8780db9d
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1148 additions and 1213 deletions
Rules
View file @ 2ac7105c
......@@ -29,11 +29,13 @@ compile '*' do
filter :bootstrappify
filter :admonition
filter :colorize_syntax, :default_colorizer => :pygmentsrb
layout 'default'
layout 'docs'
elsif item[:extension] == 'css'
# don’t filter stylesheets
elsif item.binary?
# don’t filter binary items
elsif item[:title] == 'Home'
layout 'jumbotron'
else
layout 'default'
end
......
content/community.html 0 → 100644
View file @ 2ac7105c
<div class="row">
<div class="col-md-4">
TODO: Add some text about the community here.
</div>
</div>
content/community/index.md deleted 100644 → 0
View file @ 8780db9d
---
title: Community
sort_rank: 6
nav_icon: users
---
content/contributing/index.md deleted 100644 → 0
View file @ 8780db9d
---
title: Contributing
sort_rank: 7
nav_icon: code-fork
---
content/concepts/automatic.md → content/docs/concepts/automatic.md
View file @ 2ac7105c
---
title: Automatic Labels and Synthetic Metrics
title: Automatic labels and synthetic metrics
sort_rank: 2
---
# Automatic Labels and Synthetic Metrics
# Automatic labels and synthetic metrics
## Automatically Attached Labels
## Automatically attached labels
When Prometheus scrapes a target, it attaches some labels automatically to the
scraped metrics timeseries which serve to identify the scraped target:
......@@ -18,7 +18,7 @@ replaced. Instead, Prometheus adds its own labels with `exporter_` prepended to
the label name: `exporter_job` and `exporter_instance`. The same pattern holds
true for any manually supplied base labels supplied for a target group.
## Synthetic Timeseries
## Synthetic timeseries
Prometheus also generates some timeseries internally which are not directly
taken from the scraped data:
......
content/concepts/metric_types.md → content/docs/concepts/metric_types.md
View file @ 2ac7105c
---
title: Metric Types
title: Metric types
sort_rank: 1
---
......
content/index.md → content/docs/index.md
View file @ 2ac7105c
......@@ -2,7 +2,3 @@
title: Prometheus Documentation
is_hidden: true
---
This is the central home for all Prometheus documentation.
TODO: put some nice intro text here.
content/start/index.md → content/docs/introduction/index.md
View file @ 2ac7105c
---
title: Start Here
title: Introduction
sort_rank: 1
nav_icon: hand-o-right
---
content/start/install.md → content/docs/introduction/install.md
View file @ 2ac7105c
---
title: Download and Install
title: Download and install
sort_rank: 2
---
# Download and Install Prometheus
......
content/start/why.md → content/docs/introduction/overview.md
View file @ 2ac7105c
---
title: Why Prometheus?
title: Overview
sort_rank: 1
---
## What is Prometheus?
......
content/operating/index.md → content/docs/operating/index.md
View file @ 2ac7105c
---
title: For Operators
title: Operating
sort_rank: 3
nav_icon: cog
---
content/practices/index.md → content/docs/practices/index.md
View file @ 2ac7105c
---
title: Best Practices
title: Best practices
sort_rank: 5
nav_icon: thumbs-o-up
---
content/using/codelab.md → content/docs/using/codelab.md
View file @ 2ac7105c
---
title: Intro Codelab
title: Starter codelab
sort_rank: 1
---
......
content/using/graphing/index.md → content/docs/using/graphing/index.md
View file @ 2ac7105c
---
title: Graphing and Dashboards
title: Graphing and dashboards
sort_rank: 3
---
content/using/index.md → content/docs/using/index.md
View file @ 2ac7105c
---
title: For Users
title: Using
sort_rank: 2
nav_icon: line-chart
---
content/using/instrumenting.md → content/docs/using/instrumenting.md
View file @ 2ac7105c
---
title: Instrumenting Your Code
title: Instrumenting your code
sort_rank: 2
---
......
content/using/pushing.md → content/docs/using/pushing.md
View file @ 2ac7105c
---
title: Pushing Data
title: Pushing data
sort_rank: 6
---
......
content/using/querying/index.md → content/docs/using/querying/index.md
View file @ 2ac7105c
---
title: Query Language
title: Query language
sort_rank: 3
---
content/using/rules.md → content/docs/using/rules.md
View file @ 2ac7105c
---
title: Recording and Alerting Rules
title: Recording and alerting rules
sort_rank: 5
---
# Defining Recording and Alerting Rules
# Defining recording and alerting rules
## Configuring Rules
## Configuring rules
Prometheus supports two types of rules which may be configured and then
evaluated at regular intervals: recording rules and alerting rules. To include
rules in Prometheus, create a file containing the necessary rule statements and
have Prometheus load the file via the `rule_files` field in the [Prometheus
configuration](https://github.com/prometheus/prometheus/blob/master/config/config.proto).
## Syntax-Checking Rules
## Syntax-checking rules
To quickly check whether a rule file is syntactically correct without starting
a Prometheus server, install and run Prometheus' `rule_checker` tool:
......@@ -30,7 +30,7 @@ representation of the parsed rules and then exits with an `0` return status.
If there are any syntax errors, it prints an error message and exits with a
`255` return status.
## Recording Rules
## Recording rules
Recording rules allow you to precompute frequently needed or computationally
expensive expressions and save their result as a new set of timeseries.
Querying the precomputed result will then often be much faster than executing
......@@ -58,14 +58,14 @@ evaluated at the current instant in time and the resulting sample vector is
stored as a new set of timeseries with the current timestamp and a new metric
name (and perhaps an overridden set of labels).
## Alerting Rules
## Alerting rules
Alerting rules allow you to define alert conditions based on Prometheus
expression language expressions and to send notifications about firing alerts
to an external service. Whenever the alert expression results in one or more
vector elements at a given point in time, the alert counts as active for these
elements' label sets.
### Defining Alerting Rules
### Defining alerting rules
Alerting rules are defined in the following syntax:
ALERT <alert name>
......@@ -113,12 +113,12 @@ Examples:
SUMMARY "High request latency on {{$labels.instance}}"
DESCRIPTION "{{$labels.instance}} has a median request latency above 1s (current value: {{$value}})"
### Inspecting Alerts During Runtime
### Inspecting alerts during runtime
To manually inspect which alerts are active (pending or firing), navigate to
the "Alerts" tab of your Prometheus instance. This will show you the exact
label sets for which each defined alert is currently active.
### Sending Alert Notifications
### Sending alert notifications
Prometheus's alerting rules are good at figuring what is broken *right now*,
but they are not a fully-fledged notification solution. Another layer is needed
to add summarization, notification rate limiting, silencing and alert
......
content/index.html 0 → 100644
View file @ 2ac7105c
---
title: Home
---
<div class="row">
<div class="col-md-4">
<h2><i class="fa fa-flask"></i> Data Model</h2>
<p>Prometheus implements a highly dimensional data model. Timeseries are identified by a metric name and a set of key-value pairs.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2><i class="fa fa-search"></i> Query Language</h2>
<p>A flexible query languge allows slicing and dicing of collected timeseries data in order to generate ad-hoc graphs, tables, and alerts.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2><i class="fa fa-line-chart"></i> Visualization</h2>
<p>Prometheus supports multiple modes for visualizing data: a built-in expression browser, a GUI-based dashboard builder, and a console template language.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2><i class="fa fa-cloud-download"></i> Pull Model</h2>
<p>Prometheus collects timeseries data by scraping instrumented services via HTTP. Short-lived jobs are supported via a push gateway.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2><i class="fa fa-database"></i> Storage</h2>
<p>Prometheus stores timeseries in memory and on local disk in an efficient custom format. Scaling is achieved by functional sharding and federation.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2><i class="fa fa-cog"></i> Operation</h2>
<p>Prometheus servers are autonomous, with no dependency on distributed storage. Written in Go, all binaries are statically linked and easy to deploy.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2><i class="fa fa-code"></i> Client Libraries</h2>
<p>Client libraries allow easy instrumentation of services. Currently, Go, Java, and Ruby are supported. Custom libraries are easy to implement.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2><i class="fa fa-warning"></i> Alerting</h2>
<p>Alerts are defined based on Prometheus's flexible query language and maintain dimensional information. An alertmanager handles notifications and silencing.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2><i class="fa fa-cloud-upload"></i> Exporters</h2>
<p>Existing exporters allow bridging of third-party data into Prometheus. Examples: system statistics, as well as Docker, HAProxy, StatsD, and JMX metrics. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
layouts/container_footer.html 0 → 100644
View file @ 2ac7105c
<hr>
<footer>
<p class="pull-left">
&copy; Prometheus Authors 2015
</p>
<p class="pull-right">
Sponsored by <a href="http://soundcloud.com/" class="sc-logo" title="Go to SoundCloud.com"><i class="fa fa-soundcloud"></i> SoundCloud</a>
</p>
</footer>
layouts/default.html
View file @ 2ac7105c
<!DOCTYPE html>
<html lang="en">
<%= render 'header' %>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Prometheus Documentation</title>
<!-- Bootstrap Core CSS -->
<link href="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- SB-Admin CSS -->
<link href="/assets/sb-admin.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/assets/docs.css" rel="stylesheet">
<!-- Syntax Highlighting CSS -->
<link href="/assets/monokai.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="/assets/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Prometheus Documentation</a>
</div>
<!-- Top Menu Items -->
<ul class="nav navbar-right top-nav">
<li>
<a href="/about"><i class="fa fa-info-circle"></i></a>
</li>
<li>
<a href="https://github.com/prometheus"><i class="fa fa-github"></i></a>
</li>
</ul>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<%= @items['/'].children.sort_by { |i| i[:sort_rank] || 0 }.map { |i| toc(i, @item) }.join('') %>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div id="page-wrapper">
<div class="container-fluid">
<div class="col-lg-6">
<div class="container">
<%= yield %>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery Version 1.11.1 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</div>
</html>
<%= render 'footer' %>
layouts/docs.html 0 → 100644
View file @ 2ac7105c
<%= render 'header' %>
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav navbar-nav side-nav">
<% @items['/docs/'].children.sort_by { |i| i[:sort_rank] || 0 }.each do |i| %>
<%= toc(i, @item) %>
<% end %>
</ul>
</div>
<div class="col-md-9 doc-content">
<%= yield %>
</div>
</div>
<%= render 'container_footer' %>
</div>
<%= render 'footer' %>
layouts/footer.html 0 → 100644
View file @ 2ac7105c
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/assets/bootstrap-3.3.1/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/assets/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
layouts/header.html 0 → 100644
View file @ 2ac7105c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Prometheus monitoring system">
<meta name="author" content="Prometheus">
<link rel="icon" href="../../favicon.ico">
<title>Prometheus</title>
<!-- Bootstrap core CSS -->
<link href="/assets/bootstrap-3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/assets/docs.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="/assets/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Prometheus</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="/">OVERVIEW</a></li>
<li><a href="/docs">DOCUMENTATION</a></li>
<li><a href="/community">COMMUNITY</a></li>
<li><a href="https://github.com/prometheus"><i class="fa fa-github"></i> GITHUB</a></li>
</ul>
</div>
</div>
</nav>
layouts/jumbotron.html 0 → 100644
View file @ 2ac7105c
<%= render 'header' %>
<div class="jumbotron">
<div class="container">
<h1>Prometheus</h1>
<p>An open-source service monitoring system and timeseries database.</p>
<p><a class="btn btn-default btn-lg" href="/docs/introduction/overview" role="button">Get Started</a></p>
</div>
</div>
<div class="container">
<%= yield %>
<%= render 'container_footer' %>
</div>
<%= render 'footer' %>
lib/default.rb
View file @ 2ac7105c
......@@ -2,3 +2,4 @@
# before nanoc starts compiling.
include Nanoc::Helpers::LinkTo
include Nanoc::Helpers::Rendering
lib/helpers/toc.rb
View file @ 2ac7105c
......@@ -2,18 +2,7 @@ def nav_title_of(i)
i[:nav_title] || i[:title] || ''
end
def decorate_title_for(i, title)
return i[:nav_icon] unless i[:nav_icon].nil?
if !i.children.empty?
if @item_rep.path.start_with?(i.path)
"chevron-down"
else
"chevron-right"
end
end
end
def toc(root_item, focused_item, buffer='', with_children=true)
def toc(root_item, focused_item, buffer='', layer=0)
# Skip non-written or hidden items
return buffer if root_item.nil? || root_item.path.nil? || root_item[:is_hidden]
......@@ -25,32 +14,23 @@ def toc(root_item, focused_item, buffer='', with_children=true)
buffer << "<li>"
end
# Add link
title = nav_title_of(root_item)
if root_item[:nav_icon]
title = "<i class=\"fa fa-fw fa-#{root_item[:nav_icon]}\"></i> " + title
end
if !root_item.children.empty?
icon = if @item_rep.path.start_with?(root_item.path)
if layer == 0
# Add section header.
buffer << "<span class=\"nav-header\"><i class=\"fa fa-#{root_item[:nav_icon]}\"></i> #{title}</span>"
else
"chevron-down"
end
title = title + " <i class=\"pull-right fa fa-fw fa-#{icon}\"></i>"
end
# Add link.
buffer << link_to(title, root_item.path)
end
# Add children to sitemap, recursively
visible_children = root_item.children.select { |child| !child[:is_hidden] && child.path }
visible_children = visible_children.sort_by { |child| child[:sort_rank] || 0 }
visible_children = visible_children.select do |child|
focused_item.identifier.start_with?(child.identifier) ||
focused_item.identifier.start_with?(child.parent.identifier)
end
if with_children && visible_children.size > 0
if visible_children.size > 0
buffer << '<ul class="nav">'
visible_children.each do |child|
toc(child, focused_item, buffer)
toc(child, focused_item, buffer, layer + 1)
end
buffer << '</ul>'
......
static/bootstrap-3.3.1/css/bootstrap-theme.css.map 0 → 100644
View file @ 2ac7105c
This diff is collapsed.
static/bootstrap-3.3.1/css/bootstrap-theme.min.css 0 → 100644
View file @ 2ac7105c
This diff is collapsed.
static/bootstrap-3.3.1/css/bootstrap.css.map 0 → 100644
View file @ 2ac7105c
This source diff could not be displayed because it is too large. You can view the blob instead.
static/bootstrap-3.3.1/css/bootstrap.min.css 0 → 100644
View file @ 2ac7105c
This source diff could not be displayed because it is too large. You can view the blob instead.
static/bootstrap-3.3.1/js/bootstrap.min.js 0 → 100644
View file @ 2ac7105c
This diff is collapsed.
static/bootstrap-3.3.1/js/npm.js 0 → 100644
View file @ 2ac7105c
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
\ No newline at end of file
static/bootstrap/css/bootstrap-theme.css.map deleted 100644 → 0
View file @ 8780db9d
This diff is collapsed.
static/bootstrap/css/bootstrap-theme.min.css deleted 100644 → 0
View file @ 8780db9d
This diff is collapsed.
static/bootstrap/css/bootstrap.css.map deleted 100644 → 0
View file @ 8780db9d
This source diff could not be displayed because it is too large. You can view the blob instead.
static/bootstrap/css/bootstrap.min.css deleted 100644 → 0
View file @ 8780db9d
This source diff could not be displayed because it is too large. You can view the blob instead.
static/bootstrap/js/bootstrap.min.js deleted 100644 → 0
View file @ 8780db9d
This diff is collapsed.
static/docs.css
View file @ 2ac7105c
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
font-family: 'Open Sans', serif;
}
.navbar-brand {
font-size: 20px;
}
.jumbotron {
background-color: #e6522c;
background-image: url("/assets/jumbotron-background.png");
text-align: center;
}
.jumbotron h1 {
color: #fff;
}
.jumbotron p {
color: rgba(255,255,255,0.7);
}
.jumbotron a.btn {
border: none;
background-color: rgba(0,0,0,0.15);
color: #fff;
}
.jumbotron a.btn:hover {
background-color: rgba(0,0,0,0.25);
color: #fff;
}
a.sc-logo {
color: #000;
text-decoration: none;
}
footer p {
float: left;
}
/* Docs-related styles. */
.side-nav {
margin-top: 20px;
padding: 20px 20px 20px 20px;
background-color: #fafafa;
}
.side-nav a {
color: #333;
}
.side-nav .nav-header {
text-transform: uppercase;
padding: 5px 0 5px 0;
border-bottom: 2px solid #e6522c;
font-size: 16px;
display: block;
margin: auto;
}
.side-nav .active {
background-color: #eee;
}
.doc-content {
margin-top: 25px;
}
pre {
background-color: #333;
//color: #f8f8f2;
color: #ccc;
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
background-color: #2f2f2f;
color: #f8f8f2;
}
code {
......
static/ie10-viewport-bug-workaround.js 0 → 100644
View file @ 2ac7105c
/*!
* IE10 viewport hack for Surface/desktop Windows 8 bug
* Copyright 2014 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see http://creativecommons.org/licenses/by/3.0/.
*/
// See the Getting Started docs for more information:
// http://getbootstrap.com/getting-started/#support-ie10-width
(function () {
'use strict';
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'@-ms-viewport{width:auto!important}'
)
)
document.querySelector('head').appendChild(msViewportStyle)
}
})();
static/sb-admin.css deleted 100644 → 0
View file @ 8780db9d
/*!
* Start Bootstrap - SB Admin Bootstrap Admin Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/* Global Styles */
body {
margin-top: 100px;
background-color: #222;
}
@media(min-width:768px) {
body {
margin-top: 50px;
}
}
#wrapper {
padding-left: 0;
}
#page-wrapper {
width: 100%;
padding: 0;
background-color: #fff;
}
.huge {
font-size: 50px;
line-height: normal;
}
@media(min-width:768px) {
#wrapper {
padding-left: 225px;
}
#page-wrapper {
padding: 10px;
}
}
/* Top Navigation */
.top-nav {
padding: 0 15px;
}
.top-nav>li {
display: inline-block;
float: left;
}
.top-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
color: #999;
}
.top-nav>li>a:hover,
.top-nav>li>a:focus,
.top-nav>.open>a,
.top-nav>.open>a:hover,
.top-nav>.open>a:focus {
color: #fff;
background-color: #000;
}
.top-nav>.open>.dropdown-menu {
float: left;
position: absolute;
margin-top: 0;
border: 1px solid rgba(0,0,0,.15);
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: #fff;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.top-nav>.open>.dropdown-menu>li>a {
white-space: normal;
}
ul.message-dropdown {
padding: 0;
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
}
li.message-preview {
width: 275px;
border-bottom: 1px solid rgba(0,0,0,.15);
}
li.message-preview>a {
padding-top: 15px;
padding-bottom: 15px;
}
li.message-footer {
margin: 5px 0;
}
ul.alert-dropdown {
width: 200px;
}
/* Side Navigation */
@media(min-width:768px) {
.side-nav {
position: fixed;
top: 51px;
left: 225px;
width: 225px;
margin-left: -225px;
border: none;
border-radius: 0;
overflow-y: auto;
background-color: #222;
}
.side-nav>li>a {
width: 225px;
}
.side-nav li a:hover,
.side-nav li a:focus {
outline: none;
background-color: #000 !important;
}
}
.side-nav>li>ul {
padding: 0;
}
.side-nav>li>ul>li>a {
display: block;
padding: 10px 15px 10px 38px;
text-decoration: none;
color: #999;
}
.side-nav>li>ul>li>a:hover {
color: #fff;
}
.side-nav>li>ul>li>ul>li>a {
display: block;
padding: 10px 15px 10px 76px;
text-decoration: none;
color: #999;
}
.side-nav>li>ul>li>ul>li>a:hover {
color: #fff;
}
/* Flot Chart Containers */
.flot-chart {
display: block;
height: 400px;
}
.flot-chart-content {
width: 100%;
height: 100%;
}
/* Custom Colored Panels */
.huge {
font-size: 40px;
}
.panel-green {
border-color: #5cb85c;
}
.panel-green .panel-heading {
border-color: #5cb85c;
color: #fff;
background-color: #5cb85c;
}
.panel-green a {
color: #5cb85c;
}
.panel-green a:hover {
color: #3d8b3d;
}
.panel-red {
border-color: #d9534f;
}
.panel-red .panel-heading {
border-color: #d9534f;
color: #fff;
background-color: #d9534f;
}
.panel-red a {
color: #d9534f;
}
.panel-red a:hover {
color: #b52b27;
}
.panel-yellow {
border-color: #f0ad4e;
}
.panel-yellow .panel-heading {
border-color: #f0ad4e;
color: #fff;
background-color: #f0ad4e;
}
.panel-yellow a {
color: #f0ad4e;
}
.panel-yellow a:hover {
color: #df8a13;
}
// Custom SC overrides.
.navbar-inverse .navbar-nav>li>a {
color: #999 !important;
padding: 540px;
}
.top-nav>li>a {
color: #999;
}
.side-nav>li>ul>li>a {
color: #999;
}
.side-nav>li>ul>li>ul>li>a {
color: #999;
}
static/sidebar.css deleted 100644 → 0
View file @ 8780db9d
:focus {
outline: none;
}
.row {
margin-right: 0;
margin-left: 0;
}
/*
Sometimes the sub menus get too large for the page and prevent the menu from scrolling, limiting functionality
A quick fix is to change .side-menu to
-> position:absolute
and uncomment the code below.
You also need to uncomment
-> <div class="absolute-wrapper"> </div> in the html file
you also need to tweek the animation. Just uncomment the code in that section
--------------------------------------------------------------------------------------------------------------------
If you want to make it really neat i suggest you look into an alternative like http://areaaperta.com/nicescroll/
This will allow the menu to say fixed on body scoll and scoll on the side bar if it get to large
*/
/*.absolute-wrapper{
position: fixed;
width: 300px;
height: 100%;
background-color: #f8f8f8;
border-right: 1px solid #e7e7e7;
}*/
.side-menu {
position: fixed;
width: 300px;
height: 100%;
background-color: #f8f8f8;
border-right: 1px solid #e7e7e7;
}
.side-menu .navbar {
border: none;
}
.side-menu .navbar-header {
width: 100%;
border-bottom: 1px solid #e7e7e7;
}
.side-menu .navbar-nav .active a {
background-color: transparent;
margin-right: -1px;
border-right: 5px solid #e7e7e7;
}
.side-menu .navbar-nav li {
display: block;
width: 100%;
border-bottom: 1px solid #e7e7e7;
}
.side-menu .navbar-nav li a {
padding: 15px;
}
.side-menu .navbar-nav li a .glyphicon {
padding-right: 10px;
}
.side-menu #dropdown {
border: 0;
margin-bottom: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
.side-menu #dropdown .caret {
float: right;
margin: 9px 5px 0;
}
.side-menu #dropdown .indicator {
float: right;
}
.side-menu #dropdown > a {
border-bottom: 1px solid #e7e7e7;
}
.side-menu #dropdown .panel-body {
padding: 0;
background-color: #f3f3f3;
}
.side-menu #dropdown .panel-body .navbar-nav {
width: 100%;
}
.side-menu #dropdown .panel-body .navbar-nav li {
padding-left: 15px;
border-bottom: 1px solid #e7e7e7;
}
.side-menu #dropdown .panel-body .navbar-nav li:last-child {
border-bottom: none;
}
.side-menu #dropdown .panel-body .panel > a {
margin-left: -20px;
padding-left: 35px;
}
.side-menu #dropdown .panel-body .panel-body {
margin-left: -15px;
}
.side-menu #dropdown .panel-body .panel-body li {
padding-left: 30px;
}
.side-menu #dropdown .panel-body .panel-body li:last-child {
border-bottom: 1px solid #e7e7e7;
}
.side-menu #search-trigger {
background-color: #f3f3f3;
border: 0;
border-radius: 0;
position: absolute;
top: 0;
right: 0;
padding: 15px 18px;
}
.side-menu .brand-name-wrapper {
min-height: 50px;
}
.side-menu .brand-name-wrapper .navbar-brand {
display: block;
}
.side-menu #search {
position: relative;
z-index: 1000;
}
.side-menu #search .panel-body {
padding: 0;
}
.side-menu #search .panel-body .navbar-form {
padding: 0;
padding-right: 50px;
width: 100%;
margin: 0;
position: relative;
border-top: 1px solid #e7e7e7;
}
.side-menu #search .panel-body .navbar-form .form-group {
width: 100%;
position: relative;
}
.side-menu #search .panel-body .navbar-form input {
border: 0;
border-radius: 0;
box-shadow: none;
width: 100%;
height: 50px;
}
.side-menu #search .panel-body .navbar-form .btn {
position: absolute;
right: 0;
top: 0;
border: 0;
border-radius: 0;
background-color: #f3f3f3;
padding: 15px 18px;
}
/* Main body section */
.side-body {
margin-left: 310px;
}
/* small screen */
@media (max-width: 768px) {
.side-menu {
position: relative;
width: 100%;
height: 0;
border-right: 0;
border-bottom: 1px solid #e7e7e7;
}
.side-menu .brand-name-wrapper .navbar-brand {
display: inline-block;
}
/* Slide in animation */
@-moz-keyframes slidein {
0% {
left: -300px;
}
100% {
left: 10px;
}
}
@-webkit-keyframes slidein {
0% {
left: -300px;
}
100% {
left: 10px;
}
}
@keyframes slidein {
0% {
left: -300px;
}
100% {
left: 10px;
}
}
@-moz-keyframes slideout {
0% {
left: 0;
}
100% {
left: -300px;
}
}
@-webkit-keyframes slideout {
0% {
left: 0;
}
100% {
left: -300px;
}
}
@keyframes slideout {
0% {
left: 0;
}
100% {
left: -300px;
}
}
/* Slide side menu*/
/* Add .absolute-wrapper.slide-in for scrollable menu -> see top comment */
.side-menu-container > .navbar-nav.slide-in {
-moz-animation: slidein 300ms forwards;
-o-animation: slidein 300ms forwards;
-webkit-animation: slidein 300ms forwards;
animation: slidein 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.side-menu-container > .navbar-nav {
/* Add position:absolute for scrollable menu -> see top comment */
position: fixed;
left: -300px;
width: 300px;
top: 43px;
height: 100%;
border-right: 1px solid #e7e7e7;
background-color: #f8f8f8;
-moz-animation: slideout 300ms forwards;
-o-animation: slideout 300ms forwards;
-webkit-animation: slideout 300ms forwards;
animation: slideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Uncomment for scrollable menu -> see top comment */
/*.absolute-wrapper{
width:285px;
-moz-animation: slideout 300ms forwards;
-o-animation: slideout 300ms forwards;
-webkit-animation: slideout 300ms forwards;
animation: slideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}*/
@-moz-keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 300px;
}
}
@-webkit-keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 300px;
}
}
@keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 300px;
}
}
@-moz-keyframes bodyslideout {
0% {
left: 300px;
}
100% {
left: 0;
}
}
@-webkit-keyframes bodyslideout {
0% {
left: 300px;
}
100% {
left: 0;
}
}
@keyframes bodyslideout {
0% {
left: 300px;
}
100% {
left: 0;
}
}
/* Slide side body*/
.side-body {
margin-left: 5px;
margin-top: 70px;
position: relative;
-moz-animation: bodyslideout 300ms forwards;
-o-animation: bodyslideout 300ms forwards;
-webkit-animation: bodyslideout 300ms forwards;
animation: bodyslideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.body-slide-in {
-moz-animation: bodyslidein 300ms forwards;
-o-animation: bodyslidein 300ms forwards;
-webkit-animation: bodyslidein 300ms forwards;
animation: bodyslidein 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Hamburger */
.navbar-toggle {
border: 0;
float: left;
padding: 18px;
margin: 0;
border-radius: 0;
background-color: #f3f3f3;
}
/* Search */
#search .panel-body .navbar-form {
border-bottom: 0;
}
#search .panel-body .navbar-form .form-group {
margin: 0;
}
.navbar-header {
/* this is probably redundant */
position: fixed;
z-index: 3;
background-color: #f8f8f8;
}
/* Dropdown tweek */
#dropdown .panel-body .navbar-nav {
margin: 0;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023