META-INF.resources.frontend.stickynotes.sticky-board.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of stickynotes Show documentation
Sticky Notes for Vaadin Flow 14.+.
There is a newer version: 0.5.2
@import url('./frontend/stickynotes/fonts/gloria.css');
            
/*.board {
    z-index: var(--sticky-board-z-index,200);
    position: absolute;

    display: flex;                
    flex-wrap: wrap;

    -moz-transition: all 0.218s;
    -o-transition: all 0.218s;
    -webkit-transition: all 0.218s;
    transition: all 0.218s;

    width: 600px;
    height: 500px;

    visibility: hidden;
}

.board.show {
    visibility: visible;
    opacity: 1;
}*/

.boardPopupButton {
    
    content:url("./frontend/stickynotes/icons/pim-notes-32.svg");

    position: absolute;
    width: 24px;
    height: 24px;
    
    /*z-index: var(--sticky-boardPopupButton-z-index,200);*/
}


.stickyArea {
    background-color: burlywood;

    border-radius: 5px;
    border-color: #745f46;
    border-style: solid;
    border-width: 5px;

    display: flex;                
    flex-wrap: wrap;
    flex-shrink: 1;
    flex-grow: 1;
    
    position: absolute;
    
    height: 410px;
    width: 410px;

    margin: 0.5em;
    
    /*z-index: 150;*/
    
    overflow: auto;
    visibility: hidden;
}

.stickyArea.show{
    visibility: visible;
}

.addNote {
    z-index: 10;
    content:url("./frontend/stickynotes/icons/add-24.svg");
    position: absolute;
    top: 0.3em;
    left: calc(50% - 9px);
    flex-grow: 1;
    width: 18px;
    height: 18px;
    
}

.unselectable {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
}

div#addNote:hover{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
}





ul li{
    list-style: none;
    display: inline-block;
}

ul{
    overflow: visible;
    padding: 1em;

}

.note {
    text-decoration: none;
    color: #000;
    background: #ffc;

    display: flex;
    flex-direction: column;

    width: 10em;
    height: 10em;
    padding: 0.5em;
    overflow: hidden;


    /*give the notes a shadow*/
    -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    -moz-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    -o-box-shadow: 5px 5px 7px rgba(33,33,33,.7);

    /*give the tilt effect to your sticky notes*/
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);

    /*apply some smooth transition to the sticky note*/
    -webkit-transition: -webkit-transform .15s linear;
    -moz-transition: -moz-transform .15s linear;
    -o-transition: -o-transform .15s linear;
    
}


.title {
    flex-shrink: 1;
    font-family: "Gloria Hallelujah", cursive;
    font-weight: 1000;
    white-space: pre-wrap;
}

.notearea {
    width: 100%;
    height: calc(100% - 31px);
/*                background-color: aqua;*/
    overflow: auto;
    flex-grow: 1;
    font-family: "Gloria Hallelujah", cursive;
    display: inline-block;
    white-space: pre-wrap;
}

ul li:nth-child(even) div#note{
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -o-transform: rotate(4deg);	
    position: relative;
    top: 5px;
    background: mistyrose;
}

ul li:nth-child(3n) div#note{
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);	
    position: relative;
    top: -5px;	
    background: skyblue;
}

ul li:nth-child(5n) div#note{
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);	
    position: relative;
    top: -10px;	
    background: snow;
}

ul li div#note:hover, ul li div#note:focus{
    -webkit-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    -moz-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    -o-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);

    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);

    position: relative;
    z-index: 5;
}




[contentEditable=true]:empty:not(:focus):before{
    content:attr(data-text)
}


.closeButton {
    content:url("./frontend/stickynotes/icons/close-24.svg");
    position: absolute;
    top: 0px;
    right: 0px;
    width: 18px;
    height: 18px;
    padding: 3px;
}



.confirmDialog {
    display: flex;

    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10;
    justify-content: center;
    
    visibility: hidden;
}

.confirmDialog.show {
    visibility: visible;    
}


.confirmDialogGlass {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: darkgray;
    opacity: 0.5;
}

.confirm {
    content:url("./frontend/stickynotes/icons/trash.svg");
    width: 48px;
    height: 48px;
    align-self: center;
    flex-shrink: 1;
    flex-grow: 1;
    z-index: 10;
    margin: 1em;
}

.cancel {
    content:url("./frontend/stickynotes/icons/back.svg");
    width: 48px;
    height: 48px;
    align-self: center;
    flex-grow: 1;
    flex-shrink: 1;
    z-index: 10;
    margin: 1em;
}

ul li div div div#confirm:hover{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);

    position: relative;
    z-index: 5;
}

ul li div div div#cancel:hover{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);

    position: relative;
    z-index: 5;
}