Roam - Custom CSS for moving references to a more visible place

Roam-references-left-top.css

/* 		
Author: @CatoMinor3
Version: 0.9 (beta)
Date: July 1st
Paypal support:  https://www.paypal.me/catominor3
What it does: Custom CSS for moving references to a more visible place: 
- if the screen is wide enough, they are on the left; 
- if small, they are on the top.
*/

.rm-ref-page-view-title {
    font-size: small !important;
}

.rm-ref-page-view-title a {
        color: grey !important;
    
}

.rm-ref-page-view-title a:hover {
        color: darkblue !important;
  
    
}

.rm-ref-page-view {
    background-color: #eaeaea;
    border-radius: 8px;
    margin-bottom: 5px;
    
}

.rm-reference-item {
    background-color: inherit !important;
    
}

.rm-reference-main {
    font-size: small;
    
}

.roam-center > div:nth-child(1){
    padding-left: 0 !important;
    padding-right: 0 !important;
    
}

  .roam-article {
        display:flex;
        flex-direction: column;
    }

 .roam-article > div:nth-child(1) {
     
        order:2;

    }

 .roam-article > div:nth-child(2) {
        order:1;
}

@media (min-width : 700px) {
    .roam-article {
        display:flex;
        flex-direction: row;
    }


    .roam-article > div:nth-child(1) {
         flex-grow: 1;
        flex-shrink: 1;
        order:2;

    }

    .roam-article > div:nth-child(2) {
        order:1;
        margin-right: 15px;
        flex-grow: 1;
        flex-shrink: 1;


        min-width: 20vw !important;
        max-width: 25vw;

        height: 90vh !important;
        overflow: auto;
        position: -webkit-sticky;
        position: sticky;
        top: 5vw;
        padding-left: 10px;


    }
}