FitTrackee/fittrackee_client/src/components/App.css

595 lines
8.2 KiB
CSS
Raw Normal View History

2019-01-06 21:44:38 +01:00
html {
height: 100vh;
}
body {
background-color: #eaeaea;
2019-01-06 21:44:38 +01:00
margin: 0;
min-height: 100vh;
2019-01-06 21:44:38 +01:00
padding-bottom: 50px;
position: relative;
}
.App {
padding-bottom: 20px;
2018-01-01 11:10:39 +01:00
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
2018-01-01 21:54:03 +01:00
.App-nav-profile-img {
max-width: 35px;
max-height: 35px;
border-radius: 50%;
2018-01-01 21:54:03 +01:00
}
.App-profile-img-small {
max-width: 150px;
max-height: 150px;
border-radius: 50%;
2018-01-01 21:54:03 +01:00
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
2017-12-31 18:43:24 +01:00
2018-06-07 12:58:23 +02:00
a {
color: #40578a;
}
input[type="text"], textarea {
2018-01-01 16:59:46 +01:00
width: 100%;
}
label {
width: 100%;
2017-12-31 18:43:24 +01:00
}
2018-05-01 19:29:21 +02:00
.activities-result {
font-size: 0.85em;
}
2018-05-09 10:25:08 +02:00
.activity-card {
2018-05-10 17:21:19 +02:00
margin-bottom: 15px;
2018-05-09 10:25:08 +02:00
}
.activity-details {
font-size: 0.95em;
}
2018-05-16 23:52:55 +02:00
.activity-date {
font-size: 0.75em;
}
2018-06-07 17:50:22 +02:00
.activity-filter {
font-size: 0.9em;
}
.activity-filter .col-2, .col-5{
padding: 0;
}
.activity-label {
font-size: 0.8em;
color: #666
}
.activity-logo {
margin: 0 5px;
max-width: 20px;
max-height: 20px;
}
2018-06-15 09:36:14 +02:00
.activity-no-map {
background-color: #eaeaea;
color: #666666;
font-style: italic;
height: 400px;
line-height: 400px;
}
2019-08-25 20:23:11 +02:00
.activity-notes, .actvitiy-segments {
font-size: 0.9em;
font-style: italic;
margin-top: 10px;
padding: 5px;
}
2018-05-16 23:52:55 +02:00
.activity-page {
margin-top: 20px;
}
.activity-segments-list {
list-style: square;
2018-06-11 22:42:04 +02:00
}
.activity-sport {
margin-right: 1px;
2018-07-29 11:50:45 +02:00
max-width: 18px;
max-height: 18px;
}
2019-08-31 22:11:08 +02:00
.activity-title img, .activity-title .map-attribution-list {
display: none;
}
.activity-title img {
border: 1px solid lightgrey;
border-radius: 4px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: none;
margin-left: 20px;
position: absolute;
z-index: 1000;
}
.activity-title .map-attribution-list {
display: none;
font-size: 11px;
margin-left: 20px;
position: absolute;
z-index: 1000;
}
.activity-title:hover img, .activity-title:hover .map-attribution-list {
display: block;
}
2018-05-01 19:29:21 +02:00
.add-activity {
margin-top: 50px;
}
2018-05-03 14:07:31 +02:00
2018-06-15 09:36:14 +02:00
.add-activity-radio {
margin-right: 10px;
}
2018-05-16 23:52:55 +02:00
.admin-img {
max-width: 35px;
max-height: 35px;
}
.card {
text-align: left;
2018-05-08 18:20:41 +02:00
}
.chart {
font-size: 0.9em;
}
.chart-activities {
margin-left: 60px;
}
2019-01-05 13:02:55 +01:00
.chart-arrows {
margin-top: 7px;
}
.chart-filters {
padding-bottom: 10px;
}
.chart-info {
font-size: 0.8em;
font-style: italic;
}
.chart-radio {
display: flex;
2018-06-07 12:42:30 +02:00
font-size: 0.9em;
}
.chart-radio label {
2019-01-05 13:02:55 +01:00
/* display: flex; */
}
.chart-radio input {
margin-right: 10px;
}
2019-01-03 11:16:46 +01:00
.chart-stats {
font-size: 0.8em;
}
.chart-title {
font-size: 1.1em;
margin-bottom: 10px;
}
.col-activity-logo{
padding-right: 0;
}
.custom-modal {
background-color: #fff;
border-radius: 5px;
max-width: 500px;
margin: 20% auto;
z-index: 1250;
}
.custom-modal-backdrop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.3);
padding: 50px;
z-index: 1240;
}
2018-05-10 16:56:45 +02:00
.custom-fa {
margin-right: 5px;
}
2018-07-29 11:50:45 +02:00
.custom-fa-small {
font-size: 0.8em;
}
.custom-tooltip {
background-color: #fff;
border: 1px solid lightgrey;
padding: 10px;
}
.custom-tooltip p {
margin: 5px;
}
.custom-tooltip-label {
font-weight: bold;
}
.dashboard, .history {
2018-05-30 17:48:58 +02:00
margin-top: 30px;
}
2019-09-08 15:16:27 +02:00
.dropdown-wrapper {
width: 50px;
}
.dropdown-list {
2019-09-08 16:53:23 +02:00
background-color: #f8f9fa;
2019-09-08 15:16:27 +02:00
padding: 5px 0;
position: absolute;
2019-09-08 16:53:23 +02:00
text-align: left;
2019-09-08 15:16:27 +02:00
z-index: 10;
}
2019-09-08 16:53:23 +02:00
2019-09-08 15:16:27 +02:00
.dropdown-item {
cursor: default;
font-size: 0.9em;
2019-09-08 16:53:23 +02:00
}
.dropdown-item-selected {
2019-12-28 22:46:02 +01:00
font-weight: bold;
}
.dropdown-item-selected::after {
content: " ✔";
2019-09-08 15:16:27 +02:00
}
2019-08-31 19:15:37 +02:00
.fa-question-circle {
color: #6c757d;
margin-left: 3px;
}
.fa-trophy {
color: goldenrod;
}
.fa-color {
color: #405976;
2018-05-16 23:52:55 +02:00
}
2019-01-06 21:44:38 +01:00
.footer {
background-color: #f8f9fa;
bottom: 0;
color: #8b8c8c;
font-size: 0.9em;
height: 50px;
line-height: 50px;
position: absolute;
width: 100%;
}
2019-01-07 11:47:51 +01:00
.gpx-file {
height: inherit;
}
2018-06-05 19:37:10 +02:00
.huge {
font-size: 25px;
}
2019-09-08 15:16:27 +02:00
.i18n-flag svg {
height: 100%;
opacity: .9;
width: 15px;
}
2018-05-17 15:13:53 +02:00
.inactive-link {
color: lightgrey;
}
.leaflet-container {
height: 400px;
}
.loader {
animation: spin 2s linear infinite;
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
height: 120px;
margin-left: 41%;
width: 120px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.map-attribution {
font-size: 11px;
position:relative;
top: -15px;
}
.map-attribution-text {
background-color: rgba(255, 255, 255, .5);
padding-left: 2px;
padding-right: 2px;
}
.page-title {
font-size: 2em;
margin: 1em;
text-align: center;
}
.radioLabel {
text-align: center;
}
2018-05-20 13:12:35 +02:00
.record-logo {
margin-right: 5px;
max-width: 25px;
max-height: 25px;
}
.record-table table, .record-table th, .record-table td{
font-size: 0.9em;
padding: 0.1em;
}
.sport-img {
max-width: 35px;
max-height: 35px;
}
2018-05-16 23:52:55 +02:00
.sport-img-medium {
max-width: 45px;
max-height: 45px;
}
.time-frames {
align-items: center;
display: inline-flex;
}
.time-frame label {
float: left;
padding: 0 5px;
}
.time-frame label input {
display: none;
}
.time-frame label span {
border: #a9a9a9 solid 1px;
border-radius: 9%;
color: #7b7b7b;
display: block;
font-size: 0.9em;
2019-09-16 10:26:02 +02:00
padding: 2px 6px;
text-align: center;
}
.time-frame input:checked + span {
background-color: #a9a9a9;
color: #ffffff;
}
.timezone-custom {
font-size: .9em !important;
height: inherit !important;
}
.timezone-custom input {
border: 0 !important;
padding: 5px 1px !important;
}
.timezone-custom ul {
background: white;
2019-01-07 11:47:51 +01:00
}
.timezone-picker {
padding: 0;
}
.timezone-picker-textfield {
font-size: 15px;
}
2018-05-10 16:56:45 +02:00
.unlink {
color: black;
}
.weather-img {
max-width: 35px;
max-height: 35px;
}
.weather-img-small {
max-width: 20px;
max-height: 20px;
}
.weather-table {
margin-bottom: 0;
}
.weather-table table, .weather-table th, .weather-table td{
font-size: 0.9em;
padding: 0.1em;
}
2018-05-31 22:39:50 +02:00
/* calendar */
:root {
--main-color: #1a8fff;
--text-color: #777;
--text-color-light: #ccc;
--border-color: #eee;
--bg-color: #f9f9f9;
--neutral-color: #fff;
}
.calendar .col-start {
justify-content: flex-start;
text-align: left;
}
.calendar .col-center {
justify-content: center;
text-align: center;
}
.calendar .col-end {
justify-content: flex-end;
text-align: right;
}
.calendar {
display: block;
position: relative;
width: 100%;
background: var(--neutral-color);
border: 1px solid var(--border-color);
}
.calendar .header {
text-transform: uppercase;
font-weight: 700;
/*font-size: 115%;*/
padding: 0.5em 0;
border-bottom: 1px solid var(--border-color);
}
.calendar .header .icon {
cursor: pointer;
transition: .15s ease-out;
}
.calendar .header .icon:hover {
transform: scale(1.75);
transition: .25s ease-out;
color: var(--main-color);
}
.calendar .header .icon:first-of-type {
margin-left: 1em;
}
.calendar .header .icon:last-of-type {
margin-right: 1em;
}
.calendar .days {
text-transform: uppercase;
font-weight: 400;
color: var(--text-color-light);
font-size: 70%;
padding: .75em 0;
border-bottom: 1px solid var(--border-color);
}
.calendar .body .cell {
position: relative;
height: 3em;
border-right: 1px solid var(--border-color);
overflow: hidden;
background: var(--neutral-color);
}
.calendar .body .cell:hover {
background: var(--bg-color);
}
.calendar .body .selected {
border-left: 10px solid transparent;
border-image: linear-gradient(45deg, #1a8fff 0%,#53cbf1 40%);
}
.calendar .body .row {
border-bottom: 1px solid var(--border-color);
margin: 0;
}
.calendar .body .row:last-child {
border-bottom: none;
}
.calendar .body .cell:last-child {
border-right: none;
}
.calendar .body .cell .number {
position: absolute;
font-size: 82.5%;
line-height: 1;
top: .75em;
right: .75em;
font-weight: 700;
}
.calendar .body .disabled {
color: var(--text-color-light);
pointer-events: none;
}
.calendar .body .col {
flex-grow: 0;
flex-basis: calc(100%/7);
width: calc(100%/7);
}
.calendar .body .img-disabled {
opacity: .4;
}
.calendar .body .weekend {
background: #f5f5f5;
}