mirror of
https://github.com/freedombox/FreedomBox.git
synced 2026-09-12 04:52:45 +00:00
dca149821b
Reuse bootstrap .container class to perform the width calculations instead of explicitly setting it. This makes the size of card list match the rest of the content like navigation and text content. Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org> Reviewed-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
417 lines
7.3 KiB
CSS
417 lines
7.3 KiB
CSS
@font-face {
|
|
font-family: 'Lato';
|
|
src: url('../lato/Lato-Italic.woff2') format('woff2');
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Lato';
|
|
src: url('../lato/Lato-Regular.woff2') format('woff2');
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Lato';
|
|
src: url('../lato/Lato-Semibold.woff2') format('woff2');
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Lato';
|
|
src: url('../lato/Lato-SemiboldItalic.woff2') format('woff2');
|
|
font-style: italic;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Lato';
|
|
src: url('../lato/Lato-Bold.woff2') format('woff2');
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Lato';
|
|
src: url('../lato/Lato-BoldItalic.woff2') format('woff2');
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Lato';
|
|
src: url('../lato/Lato-Heavy.woff2') format('woff2');
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Lato';
|
|
src: url('../lato/Lato-HeavyItalic.woff2') format('woff2');
|
|
font-style: italic;
|
|
font-weight: 800;
|
|
}
|
|
|
|
|
|
body {
|
|
padding-top: 6em;
|
|
position: relative;
|
|
font-family: Lato, sans-serif;
|
|
font-size: 15px;
|
|
background: url('../img/noise.png') #f1f1f1;
|
|
}
|
|
|
|
.multiple-checkbox li {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.nav .fa {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.navbar-brand .fa {
|
|
float: left;
|
|
margin-top: -19px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.navbar-brand {
|
|
height: 53px;
|
|
margin-right: -30px;
|
|
}
|
|
|
|
.nav-tabs {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.running-status-parent {
|
|
display: inline-block;
|
|
}
|
|
|
|
.running-status {
|
|
border-radius: 50%;
|
|
border: 1px solid black;
|
|
width: 8px;
|
|
height: 8px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.running-status.active {
|
|
background-color: rgb(0, 167, 0);
|
|
}
|
|
|
|
.running-status.inactive {
|
|
background-color: rgb(228, 66, 66);
|
|
}
|
|
|
|
.running-status.loading {
|
|
border: 4px solid #f3f3f3; /* Light grey */
|
|
border-top: 4px solid #3498db; /* Blue */
|
|
border-radius: 50%;
|
|
width: 16px;
|
|
height: 16px;
|
|
display: inline-block;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
.nav-link:hover, .nav-link:visited, .nav-link:link, .nav-link:active {
|
|
text-decoration: none;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.form-diagnostics-button {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Hide log out button if user dropdown is available */
|
|
.js #logout-nojs {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide the dropdown icon when javascript is not available */
|
|
.no-js .nav .dropdown .caret {
|
|
display: none;
|
|
}
|
|
|
|
.diagnostics-results .diagnostics-result {
|
|
width: 60px;
|
|
}
|
|
|
|
/* Sticky footer styles
|
|
-------------------------------------------------- */
|
|
footer .license-info {
|
|
opacity: 0.5;
|
|
margin-right: 20px;
|
|
text-align: right;
|
|
}
|
|
|
|
.footer-logo {
|
|
width: 140px;
|
|
}
|
|
|
|
html {
|
|
position: relative;
|
|
}
|
|
|
|
body,
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
#wrapper {
|
|
min-height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1000px;
|
|
}
|
|
|
|
.content-container {
|
|
padding: 25px 50px 50px;
|
|
background-color: white;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
position: relative;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 150px;
|
|
padding-top: 150px;
|
|
}
|
|
|
|
footer license-info p {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.shortcut-label {
|
|
min-height: 50px;
|
|
}
|
|
|
|
/*
|
|
* Clients information
|
|
*/
|
|
.client-icon {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 20px;
|
|
max-width: 20px;
|
|
margin: auto;
|
|
}
|
|
|
|
#clients .btn {
|
|
width: 8em;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
#clients th, #clients td {
|
|
line-height: 3.1em;
|
|
}
|
|
|
|
/* Icon when collapsible content is shown */
|
|
#clients-button .fa {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
#clients-button .fa:before,
|
|
.no-js #clients-button.collapsed .fa:before {
|
|
content: "\f078";
|
|
}
|
|
|
|
#clients-button.collapsed .fa:before {
|
|
content: "\f054";
|
|
}
|
|
|
|
/* No-JS fallbacks for collapsible content in clients.html */
|
|
.no-js .collapse {
|
|
display: block;
|
|
}
|
|
|
|
.manual-page {
|
|
text-align: right;
|
|
}
|
|
|
|
/* applying styles to header - begin */
|
|
.main-header {
|
|
background: #4989D4;
|
|
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.25);
|
|
border: none;
|
|
}
|
|
|
|
.main-header .navbar-nav>li>a {
|
|
color: #FFF;
|
|
}
|
|
|
|
.main-header.navbar-default .navbar-nav>li>a:focus,
|
|
.main-header.navbar-default .navbar-nav>li>a:hover,
|
|
.main-header.navbar-default .navbar-nav>.active>a,
|
|
.main-header.navbar-default .navbar-nav>.active>a:hover,
|
|
.main-header.navbar-default .navbar-nav>.active>a:focus,
|
|
.main-header.navbar-default .navbar-nav>.open>a,
|
|
.main-header.navbar-default .navbar-nav>.open>a:hover,
|
|
.main-header.navbar-default .navbar-nav>.open>a:focus {
|
|
color: #FFF;
|
|
background: transparent;
|
|
}
|
|
|
|
.navbar-default .navbar-toggle .icon-bar {
|
|
background-color: #FFF;
|
|
}
|
|
|
|
/* applying styles to header - end */
|
|
|
|
.card-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: left;
|
|
}
|
|
|
|
.card-icon img {
|
|
transition: filter 0.3s;
|
|
|
|
/* --- .installed ---*/
|
|
filter: contrast(0.2) sepia(1) hue-rotate(171deg) contrast(2);
|
|
|
|
/* TODO #1309: uninstalled state */
|
|
/* --- .uninstalled ---*/
|
|
/* filter: grayscale(1) opacity(0.5); */
|
|
/* --- .uninstalled:hover ---*/
|
|
/* filter: grayscale(1) opacity(1); */
|
|
}
|
|
|
|
.card:hover .card-icon img {
|
|
filter: none;
|
|
}
|
|
|
|
a.menu_link {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.menu_link:hover,a.menu_link:active {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.menu_link_active {
|
|
border-bottom: white 3px solid;
|
|
}
|
|
|
|
.card {
|
|
text-align: center;
|
|
box-shadow: 0 3px 5px 0 rgba(0,0,0,0.12);
|
|
transition: box-shadow 0.3s ease-in-out;
|
|
width: 16rem;
|
|
padding: 0;
|
|
margin: 0 10px 20px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 5px 15px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.card .nav-link {
|
|
display: block;
|
|
padding: 4px;
|
|
color: #646464;
|
|
}
|
|
|
|
.card-title {
|
|
font-style: italic;
|
|
font-weight: 800;
|
|
font-size: 20px;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.card-description {
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.card-description {
|
|
color: #646464;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.card-icon {
|
|
background: radial-gradient(farthest-side at bottom,#eefff0, white);
|
|
background-position: 50% 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: 150% 25%;
|
|
}
|
|
|
|
.card-icon span {
|
|
width: 100px;
|
|
height: 100px;
|
|
font-size: 80px;
|
|
}
|
|
|
|
.card-icon img {
|
|
width: 100px;
|
|
height: 100px;
|
|
font-size: 80px;
|
|
}
|
|
|
|
/* Button table - Tables with a list of actions as buttons on top */
|
|
.button-table > .button-row + .table {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.bg-warning {
|
|
margin: 10px 0;
|
|
padding: 15px;
|
|
}
|
|
|
|
.bg-warning p:last-child {
|
|
margin: 0;
|
|
}
|
|
|
|
.index-page .card-list:before,
|
|
.apps-page .card-list:before,
|
|
.system-page .card-list:before {
|
|
position: relative;
|
|
width: 40rem;
|
|
height: 40rem;
|
|
margin-left: -40rem;
|
|
margin-bottom: -40rem;
|
|
left: 30rem;
|
|
top: -2rem;
|
|
content: " ";
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
z-index: -1;
|
|
}
|
|
|
|
.index-page .card-list:before {
|
|
background-image: url('../img/freedombox-logo-background.svg');
|
|
}
|
|
|
|
.apps-page .card-list:before {
|
|
background-image: url('../img/apps-background.svg');
|
|
}
|
|
|
|
.system-page .card-list:before {
|
|
background-image: url('../img/system-background.svg');
|
|
}
|
|
|
|
.turbolinks-progress-bar {
|
|
height: 3px;
|
|
background-color: white;
|
|
}
|