app/assets/stylesheets/sail/settings.css
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#settings-dashboard {
max-height: 100vh;
color: var(--main-black);
}
#settings-dashboard #settings-container {
margin-top: 1rem;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding: 0 15px 0 15px;
}
#settings-dashboard #settings-container.empty {
justify-content: center;
}
#settings-dashboard .card {
flex: 0 1 auto;
max-height: 220px;
background-color: white;
margin: 1rem .75rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
padding: 0 10px 0 10px;
z-index: 2;
width: 90%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
transition-duration: 0.6s;
transition-timing-function: ease-in-out;
transform-style: preserve-3d;
}
#settings-dashboard .card .card-title {
transition: color 500ms ease-in;
}
#settings-dashboard .card .card-title:hover {
color: var(--tangerine);
cursor: pointer;
}
#settings-dashboard .card .front,
#settings-dashboard .card .back {
backface-visibility: hidden;
transform: rotateX(0deg);
height: 61%;
}
#settings-dashboard .card .back {
transform: rotateY(-180deg);
position: relative;
bottom: 155px;
}
#settings-dashboard .card.flipped {
transform: rotateY(-180deg);
}
#settings-dashboard .card .relevancy-score {
position: relative;
bottom: 5px;
color: var(--dark-aluminium);
}
@media (min-width: 768px) {
#settings-dashboard .card {
width: 44%;
}
}
@media (min-width: 1200px) {
#settings-dashboard .card {
width: 18%;
}
}
#settings-dashboard .card .tag {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding: 10px;
color: var(--main-black);
font-size: 14px;
margin-left: 5px;
text-decoration: none;
font-weight: bold;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
#settings-dashboard .card .tag.type-label {
background-color: var(--light-yellow);
}
#settings-dashboard .card .tag.group-label {
background-color: var(--cerulean);
}
#settings-dashboard .card .tag.stale-label {
background-color: var(--bright-red);
}
#settings-dashboard .card .setting-description {
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
color: var(--darker-aluminium);
}
@media (max-width: 413px) {
#settings-dashboard .card .tag.stale-label {
position: relative;
top: 8px;
}
}
#settings-dashboard .card .value-input {
width: 95%;
text-align: center;
font-size: 22px;
border: none;
border-bottom: 2px solid var(--aluminium);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
padding: 0;
-webkit-transition : border .25s ease-in;
-moz-transition : border .25s ease-in;
-o-transition : border .25s ease-in;
transition : border .25s ease-in;
outline: none;
}
#settings-dashboard .card .value-input:focus,
#settings-dashboard .card .value-input:hover {
border-color: var(--tangerine);
outline: none;
}
#settings-dashboard .card .value-slider {
-webkit-appearance: none;
height: 15px;
width: 90%;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
#settings-dashboard .card .value-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: var(--tangerine);
cursor: pointer;
}
#settings-dashboard .card .value-slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: var(--tangerine);
cursor: pointer;
}
#settings-dashboard .card .btn-value-submit {
height: 100%;
cursor: pointer;
}
#settings-dashboard .card .submit-container {
height: 35px;
width: 24%;
}
#settings-dashboard .card .switch {
position: relative;
top: 5px;
display: inline-block;
width: 60px;
height: 34px;
}
#settings-dashboard .card .switch input {display:none;}
#settings-dashboard .card .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
#settings-dashboard .card .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
#settings-dashboard .card input:checked + .slider {
background-color: var(--tangerine);
}
#settings-dashboard .card input:focus + .slider {
box-shadow: 0 0 1px var(--tangerine);
}
#settings-dashboard .card input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
#settings-dashboard .card .slider.round {
border-radius: 34px;
}
#settings-dashboard .card .slider.round:before {
border-radius: 50%;
}
#settings-dashboard .card .refresh-button {
border: none;
outline: none;
background: transparent;
}
.flex-container {
display: flex;
align-items: center;
}
.flex-container .flex-grow {
flex-grow: 4;
}
.flex-container-vertical {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.flex-container.space-between {
justify-content: space-between;
}
.flex-container.align-bottom {
align-items: flex-end;
}
.flex-container.padded {
padding: 5px 0 10px 0;
}
.flex-container.justify-end {
justify-content: flex-end;
}
.flex-container > div {
flex: 0 1 auto;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
#settings-dashboard .card .refresh-button img {
height: 30px;
}
#settings-dashboard .card .refresh-button:hover {
cursor: pointer;
}
#settings-dashboard .card .refresh-button.active img {
-webkit-animation:spin 0.5s linear infinite;
-webkit-animation-direction: reverse;
-moz-animation:spin 0.5s linear infinite;
-moz-animation-direction: reverse;
animation:spin 0.5s linear infinite;
animation-direction: reverse;
}
.notice {
display: none;
position: relative;
top: 10px;
text-overflow: ellipsis;
overflow: hidden;
text-transform: uppercase;
font-weight: bolder;
font-size: 18px;
width: 100%;
height: 100%;
text-align: center;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.notice img {
width: 25px;
}
.notice.success img {
fill: var(--dark-green);
}
.notice.alert img {
fill: var(--bright-red);
}
#progress-container {
text-align: center;
}
#progress-container #search-submit-progress {
display: none;
width: 100%;
-webkit-appearance: none;
height: 3px;
position: relative;
bottom: 22px;
left: 3px;
}
#progress-container #search-submit-progress::-webkit-progress-bar {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
background-color: white;
}
#progress-container #search-submit-progress::-webkit-progress-value {
background-color: var(--cerulean);
}
@media (max-width: 991px) {
#settings-dashboard #search-container {
margin-top: 10px;
}
}
#settings-dashboard #search-container .inner-container {
width: 90%;
float: left;
}
@media (min-width: 992px) {
#settings-dashboard #search-container .inner-container {
width: 50%;
}
}
#settings-dashboard #search-container #main-app-link {
margin: 0 0 0 8px;
height: 53px;
}
#settings-dashboard #search-container #btn-profiles {
height: 58px;
margin: 0 0 0 8px;
}
#settings-dashboard #search-container #sort-menu {
background: white;
position: absolute;
right: 30%;
top: 165px;
z-index: 3;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
padding: 10px;
}
#settings-dashboard #search-container #sort-menu button {
outline: none;
border: none;
width: 100%;
font-size: 20px;
background: transparent;
padding: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#settings-dashboard #search-container #sort-menu button:hover {
background-color: var(--tangerine);
}
@media (min-width: 768px) {
#settings-dashboard #search-container #sort-menu {
right: 41%;
}
}
@media (min-width: 1024px) {
#settings-dashboard #search-container #sort-menu {
right: 18%;
}
}
@media (min-width: 1200px) {
#settings-dashboard #search-container #sort-menu {
right: 22%;
}
}
#settings-dashboard #search-container #btn-order {
margin: 0 0 0 15px;
height: 58px;
}
#settings-dashboard #search-container .search-button {
float: left;
border: 3px solid transparent;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition : border .25s ease-in;
-moz-transition : border .25s ease-in;
-o-transition : border .25s ease-in;
transition : border .25s ease-in;
outline: none;
background: white;
}
#settings-dashboard #search-container .search-button:focus,
#settings-dashboard #search-container .search-button:hover {
border-color: var(--tangerine);
outline: none;
}
#settings-dashboard #search-container .search-button img {
height: 100%;
}
@media (max-width: 991px) {
#settings-dashboard #search-container .search-button {
position: relative;
top: 10px;
left: 33vw;
}
}
@media (max-width: 767px) {
#settings-dashboard #search-container .search-button {
left: 20vw;
}
}
@media (max-width: 413px) {
#settings-dashboard #search-container .search-button {
left: 16vw;
}
}
#settings-dashboard #search-container #search-form {
text-align: center;
}
#settings-dashboard #search-container #search-form #query {
height: 50px;
width: 100%;
border: 3px solid transparent;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
font-size: 18px;
text-align: center;
text-overflow: ellipsis;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition : border .25s ease-in;
-moz-transition : border .25s ease-in;
-o-transition : border .25s ease-in;
transition : border .25s ease-in;
outline: none;
}
#settings-dashboard #search-container #search-form #query:focus,
#settings-dashboard #search-container #search-form #query:hover {
border-color: var(--tangerine);
outline: none;
}
#settings-dashboard #search-container .offset-container {
float: left;
width: 3.5%;
height: 50px;
}
@media (min-width: 992px) {
#settings-dashboard #search-container .offset-container {
width: 25%;
}
}
.btn-sail, #settings-dashboard .card .btn-value-submit {
text-align: center;
font-size: 18px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: var(--aluminium);
border: none;
outline: none;
-webkit-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-ms-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
transition: background-color 0.5s;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.btn-sail, #settings-dashboard .card .btn-value-submit.orange {
background-color: var(--tangerine);
}
.btn-sail:active {
color: var(--main-black);
opacity: .8;
}
.btn-sail:hover, #settings-dashboard .card .btn-value-submit.orange:hover {
background-color: var(--dark-tangerine);
}