Carnet Additions

carnet-additions.css

/* use a font with better hinting */
 .mdl-layout__container {
    font-family:"Roboto", arial, sans-serif;
}
/* dates are too visible and distract from the important stuff */
 .card-date {
    opacity: 0.5;
    font-size: .9rem;
}
/*keywords are too big and don't breath enough */
 .keyword {
    font-size: .9rem;
    padding: .3rem .5rem !important;
    margin-right: .3rem;
}
.keyword:last-of-type {
    margin-right: 0;
}
/* make borders less present 
-- just restoring the original shadow
*/
 .mdl-card {
    box-shadow: none !important;
    border: 1px solid #e0e0e0;
}
.mdl-card:hover {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !important;
}
/* give cards room to breath */
 .demo-card-wide.mdl-card {
    margin: 1em;
}
/* restore checkboxes label to normal size for consistency */
 .mdl-checkbox__label {
    font-size: inherit;
}
/* make checkboxes less apparent */
 .mdl-checkbox__box-outline {
    opacity: .4;
}
/* remove padding on the card, so we can
put buttons and metadata where we want
easily: */
.mdl-card__supporting-text {
    padding: 0;
    width: 100%;
    padding-bottom: 1em; /* add some padding to the bottom for more breathing */
}
.card-text {
    margin: 0;
}
/* put padding on internal elements instead */
 .mdl-card__supporting-text [class^="card"], .mdl-card__supporting-text .keywords, .mdl-card__supporting-text .todo-list {
    margin-top: .5rem;
}
.mdl-card__supporting-text [class^="card"] {
    padding-right: 1rem;
    padding-left: .9rem;
}
.mdl-card__supporting-text .keywords, .mdl-card__supporting-text .todo-list {
    padding-right: 1rem;
    padding-left: .8rem;
}
.mdl-card__supporting-text .card-audio-list {
    padding-left: 0;
    padding-right: 0;
    margin-left: -.2rem;
}
.note-audio {
    border-top: 0 transparent !important;
}

/* leave some space at the top, even if there's no title */
.card-title{
	min-height: 1em;
}


/* making media take less vertical space */
 .mdl-card__supporting-text .card-medias {
    padding-left:0;
    padding-right:0;
    background: transparent;
    /* remove black bar */
    margin: 0 !important;
    width: 100%;
    display:flex;
    /* this probably needs to be smarter, but for 2 or 3 images, it's ok*/
}
.mdl-card__supporting-text .card-medias img {
    width: 100%;
    object-fit: cover;
}
/* making voice notes nicer */
 .card-audio-list {
    width:100%;
    display: flex;
    flex-direction: column;
    font-size: .9rem;
}
/* reversing the damage that <table>s do */
 .card-audio-list tr, .card-audio-list td {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}
.card-audio-list tr > td:first-of-type {
    width: 36px;
}
.card-audio-list td a {
    color: inherit;
    opacity: .5;
}
.note-audio button {
    min-width: 36px;
    /* countering the md1-button style*/
    width: 36px;
    overflow:hidden;
    margin: 0 !important;
    padding: 0 !important;
    /* restoring margins*/
    opacity: .5;
}
.note-audio button:hover {
    opacity: 1
}

/*******************************************************/
/** EDITOR **/

/* fix sizes of todo lists */
.todo-list .todo-item-text{
	margin-left: 0;
}
.todo-list .mdl-checkbox{
	height: initial;
}

.remove-todo-list.mdl-button{
	font-size: .9rem;
}