expand_less
body {
font-family: 'Noto Sans', sans-serif;
}
.margin-fix {
margin-top: 65px; //margin fix for conainter as there is fixed navbar
}
/* Background */
.code-bg {
background-image: url(/files/~34336/247958-original.png);
background-position: 0px;
}
.fancy-bg-gradient {
background-color: rgba(249, 248, 252, 0.97);
// background-color: rgba(37, 37, 37, 0.62);
// background-image: linear-gradient(to right, rgba(67, 67, 67, 0.7803921568627451) 0%, rgba(0, 0, 0, 0.8) 100%);
}
/* Nav bar */
header .nav-logo svg {
max-height: 50px;
max-width: 50px;
}
.account-info #logging {
display: flex;
}
/*
LOGO
note: class names for cards starts with svg-card-1 (to 4),
use this class to apply different colours instead of all odd cards.
*/
[id^='svg-card-'] { // animals
fill: $primary;
}
[id^='svg-card-'] use{ // all cards
fill: $primary;
}
[id^='svg-card-']:nth-child(even) use { // even cards
fill: $blue;
}
svg.decko-animated-logo:not(:root) {
overflow: visible;
}
/*
svg in other sections
note: remove the colour selectors if we want to use the same colour as main
*/
.homepage-main-content svg {
max-height: 150px;
max-width: 150px;
[id^='svg-card-'] { // animals
fill: $blue;
}
[id^='svg-card-'] use{ // all cards
fill: $blue;
}
[id^='svg-card-']:nth-child(even) use { // even cards
fill: $white;
}
}
// to apply color in indiviudal cards
[data-card-id='{{browsing butterfly|id}}'] {
}
[data-card-id='{{editing eagle|id}}'] {
}
[data-card-id='{{card shark|id}}'] {
}
[data-card-id='{{code monkey|id}}'] {
}
[data-card-id='{{platform platypus|id}}'] {
}
/* Image shadows */
.drop-image-shadow-lg img {
box-shadow: $box-shadow-lg !important;
}
//floatingCards
@keyframes floatLikeCloud {
0% {
// box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
50% {
// box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
transform: translatey(-10px);
}
100% {
// box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
}
.floatingCard {
width: 150px;
height: 150px;
box-sizing: border-box;
overflow: hidden;
transform: translatey(0px);
animation: floatLikeCloud 15s ease-in-out infinite;
animation-delay: 4s;
img { width: 100%; height: auto; }
}
.decko-logo-animated {
padding: 66px 6rem 0;
width: 400px;
text-align: center;
height: 280px;
margin: -30px 0;
overflow: visible;
}
// sidebar
.decko-sidebar {
order: 0;
// background-color: #f5f2f9;
// border-bottom: 1px solid $border-color;
@include media-breakpoint-up(md) {
@supports (position: fixed) {
position: fixed;
z-index: 1000;
height: calc(100vh - 4rem);
}
// border-right: 1px solid $border-color;
}
.sidebar-links {
padding-top: 1rem;
padding-bottom: 1rem;
margin-right: -15px;
@include media-breakpoint-up(md) {
@supports (position: sticky) {
max-height: calc(100vh - 4rem);
overflow-y: auto;
}
}
// Override collapse behaviors
@include media-breakpoint-up(md) {
display: block !important;
}
}
}
.sidebar-menu-button {
margin-left: -15px;
}
//TODO: Fix on decko framework
a.external-link {
color: $link-color !important;
background: none !important;
padding-right: 2px !important;
position: relative;
}
.card-header{
background-color: $light;
border-bottom-color: $border-color;
border-right: 1px solid $border-color;
margin-right: -1px; //adujustment for border right
}