mirror of
https://github.com/octoleo/syncthing.git
synced 2024-11-13 00:36:28 +00:00
219ece22fc
After the first media break (under 1200px), the footer is too long to fit in a single line, taking up too much space in small screen devices. This makes it so that it will stop being fixed at the bottom, freeing up valuable screen real estate.
257 lines
4.2 KiB
CSS
257 lines
4.2 KiB
CSS
/*
|
|
// 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;
|
|
}
|
|
}
|