personal note display for viewmode cardfull

sites/all/modules/gui/materiobasemod/js/dist/materio_personalnotes.min.js

@@ -4,7 +4,7 @@
 +'materio_personalnotes/form/'+action
 +'/'+src_nid;if(action=='edit'){url+='/'+note_nid;}
 $.getJSON(url,function(json){trace('MaterioPersonalNotes :: '+action+' : json',json);if(json.new_note_nid){updateNoteLink($link,json.new_note_nid);}
-showNoteForm($link,json);});return false;};function updateNoteLink($link,new_note_nid){trace('MaterioPersonalNotes :: updateNoteLink : new_note_nid',new_note_nid);$link.attr('note_nid',new_note_nid);$link.attr('href',Drupal.settings.pathPrefix+'node/'+new_note_nid+'/edit');};function showNoteForm($link,json){trace('MaterioPersonalNotes :: showNoteForm');$.event.trigger({type:"record-stat",categorie:"PersonalNotes",action:'show create form'});var $card=$link.parents('.node-materiau');if($card.is('.vm-cardmedium')||$card.is('.vm-cardbig')){var $note=$('<div class="note-wrapper"/>').append($('<div class="close"></i><div>').bind('click',function(){trace('close note');$(this).parents('.node-materiau').removeClass('note-opened');setTimeout((function(that){$(that).parents('.note-wrapper').remove();})(this),300);}));$note.append(json.rendered_form).find('textarea').focus().bind('change keyup paste',function(event){var note_nid=$(this).parents('form').find('input[name="note_nid"]').val();saveNote($(this).val(),note_nid);});$note.find('input[type="submit"], .homepage-textfield').hide();$note.appendTo($card.addClass('note-opened'));$note.find('textarea').focus();}else{}};function saveNote(text,note_nid){trace(text,'MaterioPersonalNotes :: saveNote : text');var url=Drupal.settings.basePath
+showNoteForm($link,json);});return false;};function updateNoteLink($link,new_note_nid){trace('MaterioPersonalNotes :: updateNoteLink : new_note_nid',new_note_nid);$link.attr('note_nid',new_note_nid);$link.attr('href',Drupal.settings.pathPrefix+'node/'+new_note_nid+'/edit');};function showNoteForm($link,json){trace('MaterioPersonalNotes :: showNoteForm');$.event.trigger({type:"record-stat",categorie:"PersonalNotes",action:'show create form'});var $card=$link.parents('.node-materiau');if($card.is('.vm-cardmedium')||$card.is('.vm-cardbig')||$card.is('.vm-cardfull')){var $note=$('<div class="note-wrapper"/>').append($('<div class="close"></i><div>').bind('click',function(){trace('close note');$(this).parents('.node-materiau').removeClass('note-opened');setTimeout((function(that){$(that).parents('.note-wrapper').remove();})(this),300);}));$note.append(json.rendered_form).find('textarea').focus().bind('change keyup paste',function(event){var note_nid=$(this).parents('form').find('input[name="note_nid"]').val();saveNote($(this).val(),note_nid);});$note.find('input[type="submit"], .homepage-textfield').hide();$note.appendTo($card.addClass('note-opened'));$note.find('textarea').focus();}else{}};function saveNote(text,note_nid){trace(text,'MaterioPersonalNotes :: saveNote : text');var url=Drupal.settings.basePath
 +Drupal.settings.pathPrefix
 +'materio_personalnotes/save'
 +'/'+note_nid;$.post(url,{'content':text},function(data,status){trace('MaterioPersonalNotes :: save : status',status);});};init();};$(document).ready(function(){var materioflag=new MaterioPersonalNotes();});})(jQuery);

sites/all/modules/gui/materiobasemod/js/materio_personalnotes.js

@@ -98,7 +98,7 @@ MaterioPersonalNotes = function(){
 
     var $card = $link.parents('.node-materiau');
 
-    if($card.is('.vm-cardmedium') || $card.is('.vm-cardbig')){
+    if($card.is('.vm-cardmedium') || $card.is('.vm-cardbig') || $card.is('.vm-cardfull')){
       var $note = $('<div class="note-wrapper"/>')
         .append($('<div class="close"></i><div>')
           .bind('click', function(){

sites/all/modules/gui/materiobasemod/materio_personalnotes.module

@@ -65,7 +65,7 @@ function materio_personalnotes_menu(){
  */
 function materio_personalnotes_entity_view($entity, $type, $view_mode, $langcode) {
   // dsm($entity, 'entity');
-  if($type == 'node' && $entity->type == "materiau"){
+  if($type == 'node' && $entity->type == "materiau" && in_array($view_mode, array('cardmedium', 'cardbig', 'cardfull'))){
     if(user_access('create own personal notes') && $view_mode != 'print'){
       $entity->content['personalnotelink'] = materio_personalnotes_get_note_link($entity);
 

sites/all/themes/gui/materiobasetheme/css/styles.css

@@ -4305,8 +4305,6 @@ article.node-materiau.vm-bookmark, article.node-breve.vm-bookmark {
   transition: -webkit-box-shadow 0.3s ease-out;
   transition: box-shadow 0.3s ease-out;
   transition: box-shadow 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
-  -webkit-transition: width 0.3s ease-in-out;
-  transition: width 0.3s ease-in-out;
   margin: 3px; }
   article.node-materiau.vm-bookmark > div.side, article.node-breve.vm-bookmark > div.side {
     border-radius: 5px;
@@ -4482,45 +4480,62 @@ article.node-materiau.vm-bookmark, article.node-breve.vm-bookmark {
         -webkit-transition: text-shadow 0s ease-out;
         transition: text-shadow 0s ease-out;
         text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); }
-  article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened {
-    width: 114px; }
-    article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened > div.side, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened > div.side, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened > div.side, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened > div.side {
-      width: 50px; }
-    article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened nav.nav, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened nav.nav {
-      border-radius: 0 0 0 3px; }
-    article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper {
-      width: 64px;
-      height: 70px;
+  article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium, article.node-breve.vm-bookmark.node-materiau.vm-cardbig {
+    -webkit-transition: width 0.3s ease-in-out;
+    transition: width 0.3s ease-in-out; }
+    article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened {
+      width: 114px; }
+      article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened > div.side, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened > div.side, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened > div.side, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened > div.side {
+        width: 50px; }
+      article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened nav.nav, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened nav.nav {
+        border-radius: 0 0 0 3px; }
+  article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-materiau.vm-bookmark.node-materiau.vm-cardfull.note-opened .note-wrapper, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-breve.vm-bookmark.node-materiau.vm-cardfull.note-opened .note-wrapper {
+    z-index: 10;
+    position: absolute; }
+    article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper .close, article.node-materiau.vm-bookmark.node-materiau.vm-cardfull.note-opened .note-wrapper .close, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper .close, article.node-breve.vm-bookmark.node-materiau.vm-cardfull.note-opened .note-wrapper .close {
       position: absolute;
-      top: 0;
-      right: 0; }
-      article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper .close, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper .close {
-        position: absolute;
-        width: 15px;
-        height: 15px;
-        top: 5px;
-        right: 5px;
-        background-color: #fff !important;
-        background-image: url(../img/close2.png);
-        background-size: contain;
-        background-position: center;
-        cursor: pointer; }
-      article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item {
-        margin: 0; }
-      article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper label, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper label {
-        height: 20px;
-        font-size: 14px;
-        margin: 0 5px;
-        line-height: 1.6; }
-      article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper textarea, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper textarea {
-        border: #ccc 1px solid;
-        border-radius: 0 7px 7px 0;
-        resize: none;
-        padding: 5px;
-        margin: 5px;
-        height: 40px;
-        width: 54px;
-        font-size: 12px; }
+      width: 15px;
+      height: 15px;
+      top: 5px;
+      right: 5px;
+      background-color: #fff !important;
+      background-image: url(../img/close2.png);
+      background-size: contain;
+      background-position: center;
+      cursor: pointer; }
+    article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item, article.node-materiau.vm-bookmark.node-materiau.vm-cardfull.note-opened .note-wrapper .form-item, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item, article.node-breve.vm-bookmark.node-materiau.vm-cardfull.note-opened .note-wrapper .form-item {
+      margin: 0; }
+    article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper label, article.node-materiau.vm-bookmark.node-materiau.vm-cardfull.note-opened .note-wrapper label, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper label, article.node-breve.vm-bookmark.node-materiau.vm-cardfull.note-opened .note-wrapper label {
+      height: 20px;
+      font-size: 14px;
+      margin: 0 5px;
+      line-height: 1.6; }
+    article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper textarea, article.node-materiau.vm-bookmark.node-materiau.vm-cardfull.note-opened .note-wrapper textarea, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper textarea, article.node-breve.vm-bookmark.node-materiau.vm-cardfull.note-opened .note-wrapper textarea {
+      border: #ccc 1px solid;
+      resize: none;
+      padding: 5px;
+      margin: 5px;
+      font-size: 12px; }
+  article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened .note-wrapper {
+    width: 64px;
+    height: 70px;
+    top: 0;
+    right: 0; }
+  article.node-materiau.vm-bookmark.node-materiau.vm-cardmedium.note-opened textarea, article.node-materiau.vm-bookmark.node-materiau.vm-cardbig.note-opened textarea, article.node-breve.vm-bookmark.node-materiau.vm-cardmedium.note-opened textarea, article.node-breve.vm-bookmark.node-materiau.vm-cardbig.note-opened textarea {
+    width: 54px;
+    border-radius: 0 7px 7px 0;
+    height: 40px; }
+  article.node-materiau.vm-bookmark.node-materiau.vm-cardfull.note-opened .note-wrapper, article.node-breve.vm-bookmark.node-materiau.vm-cardfull.note-opened .note-wrapper {
+    width: 25px;
+    left: 0;
+    height: 35px;
+    top: 35px;
+    background-color: #fff;
+    border-radius: 0 0 0 7px; }
+  article.node-materiau.vm-bookmark.node-materiau.vm-cardfull.note-opened textarea, article.node-breve.vm-bookmark.node-materiau.vm-cardfull.note-opened textarea {
+    width: 15px;
+    border-radius: 0 0 0 7px;
+    height: 5px; }
   article.node-materiau.vm-bookmark .group-header, article.node-breve.vm-bookmark .group-header {
     display: none; }
   article.node-materiau.vm-bookmark .group-images, article.node-breve.vm-bookmark .group-images {
@@ -4562,9 +4577,7 @@ article.node-materiau.vm-cardsmall, article.node-breve.vm-cardsmall {
   -webkit-transition: -webkit-box-shadow 0.3s ease-out;
   transition: -webkit-box-shadow 0.3s ease-out;
   transition: box-shadow 0.3s ease-out;
-  transition: box-shadow 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
-  -webkit-transition: width 0.3s ease-in-out;
-  transition: width 0.3s ease-in-out; }
+  transition: box-shadow 0.3s ease-out, -webkit-box-shadow 0.3s ease-out; }
   article.node-materiau.vm-cardsmall > div.side, article.node-breve.vm-cardsmall > div.side {
     border-radius: 5px;
     background-clip: padding-box;
@@ -4739,45 +4752,62 @@ article.node-materiau.vm-cardsmall, article.node-breve.vm-cardsmall {
         -webkit-transition: text-shadow 0s ease-out;
         transition: text-shadow 0s ease-out;
         text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); }
-  article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened {
-    width: 214px; }
-    article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened > div.side, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened > div.side, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened > div.side, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened > div.side {
-      width: 100px; }
-    article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened nav.nav, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened nav.nav {
-      border-radius: 0 0 0 3px; }
-    article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper {
-      width: 114px;
-      height: 140px;
+  article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig {
+    -webkit-transition: width 0.3s ease-in-out;
+    transition: width 0.3s ease-in-out; }
+    article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened {
+      width: 214px; }
+      article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened > div.side, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened > div.side, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened > div.side, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened > div.side {
+        width: 100px; }
+      article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened nav.nav, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened nav.nav {
+        border-radius: 0 0 0 3px; }
+  article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-materiau.vm-cardsmall.node-materiau.vm-cardfull.note-opened .note-wrapper, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-breve.vm-cardsmall.node-materiau.vm-cardfull.note-opened .note-wrapper {
+    z-index: 10;
+    position: absolute; }
+    article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper .close, article.node-materiau.vm-cardsmall.node-materiau.vm-cardfull.note-opened .note-wrapper .close, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper .close, article.node-breve.vm-cardsmall.node-materiau.vm-cardfull.note-opened .note-wrapper .close {
       position: absolute;
-      top: 0;
-      right: 0; }
-      article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper .close, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper .close {
-        position: absolute;
-        width: 15px;
-        height: 15px;
-        top: 5px;
-        right: 5px;
-        background-color: #fff !important;
-        background-image: url(../img/close2.png);
-        background-size: contain;
-        background-position: center;
-        cursor: pointer; }
-      article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item {
-        margin: 0; }
-      article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper label, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper label {
-        height: 20px;
-        font-size: 14px;
-        margin: 0 5px;
-        line-height: 1.6; }
-      article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper textarea, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper textarea {
-        border: #ccc 1px solid;
-        border-radius: 0 7px 7px 0;
-        resize: none;
-        padding: 5px;
-        margin: 5px;
-        height: 110px;
-        width: 104px;
-        font-size: 12px; }
+      width: 15px;
+      height: 15px;
+      top: 5px;
+      right: 5px;
+      background-color: #fff !important;
+      background-image: url(../img/close2.png);
+      background-size: contain;
+      background-position: center;
+      cursor: pointer; }
+    article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item, article.node-materiau.vm-cardsmall.node-materiau.vm-cardfull.note-opened .note-wrapper .form-item, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item, article.node-breve.vm-cardsmall.node-materiau.vm-cardfull.note-opened .note-wrapper .form-item {
+      margin: 0; }
+    article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper label, article.node-materiau.vm-cardsmall.node-materiau.vm-cardfull.note-opened .note-wrapper label, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper label, article.node-breve.vm-cardsmall.node-materiau.vm-cardfull.note-opened .note-wrapper label {
+      height: 20px;
+      font-size: 14px;
+      margin: 0 5px;
+      line-height: 1.6; }
+    article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper textarea, article.node-materiau.vm-cardsmall.node-materiau.vm-cardfull.note-opened .note-wrapper textarea, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper textarea, article.node-breve.vm-cardsmall.node-materiau.vm-cardfull.note-opened .note-wrapper textarea {
+      border: #ccc 1px solid;
+      resize: none;
+      padding: 5px;
+      margin: 5px;
+      font-size: 12px; }
+  article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened .note-wrapper {
+    width: 114px;
+    height: 140px;
+    top: 0;
+    right: 0; }
+  article.node-materiau.vm-cardsmall.node-materiau.vm-cardmedium.note-opened textarea, article.node-materiau.vm-cardsmall.node-materiau.vm-cardbig.note-opened textarea, article.node-breve.vm-cardsmall.node-materiau.vm-cardmedium.note-opened textarea, article.node-breve.vm-cardsmall.node-materiau.vm-cardbig.note-opened textarea {
+    width: 104px;
+    border-radius: 0 7px 7px 0;
+    height: 110px; }
+  article.node-materiau.vm-cardsmall.node-materiau.vm-cardfull.note-opened .note-wrapper, article.node-breve.vm-cardsmall.node-materiau.vm-cardfull.note-opened .note-wrapper {
+    width: 50px;
+    left: 0;
+    height: 70px;
+    top: 70px;
+    background-color: #fff;
+    border-radius: 0 0 0 7px; }
+  article.node-materiau.vm-cardsmall.node-materiau.vm-cardfull.note-opened textarea, article.node-breve.vm-cardsmall.node-materiau.vm-cardfull.note-opened textarea {
+    width: 40px;
+    border-radius: 0 0 0 7px;
+    height: 40px; }
   article.node-materiau.vm-cardsmall .group-header, article.node-breve.vm-cardsmall .group-header {
     display: none;
     position: absolute;
@@ -4885,9 +4915,7 @@ article.node-materiau.vm-cardmedium, article.node-breve.vm-cardmedium {
   -webkit-transition: -webkit-box-shadow 0.3s ease-out;
   transition: -webkit-box-shadow 0.3s ease-out;
   transition: box-shadow 0.3s ease-out;
-  transition: box-shadow 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
-  -webkit-transition: width 0.3s ease-in-out;
-  transition: width 0.3s ease-in-out; }
+  transition: box-shadow 0.3s ease-out, -webkit-box-shadow 0.3s ease-out; }
   article.node-materiau.vm-cardmedium > div.side, article.node-breve.vm-cardmedium > div.side {
     border-radius: 5px;
     background-clip: padding-box;
@@ -5062,45 +5090,62 @@ article.node-materiau.vm-cardmedium, article.node-breve.vm-cardmedium {
         -webkit-transition: text-shadow 0s ease-out;
         transition: text-shadow 0s ease-out;
         text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); }
-  article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened {
-    width: 434px; }
-    article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened > div.side, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened > div.side, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened > div.side, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened > div.side {
-      width: 210px; }
-    article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened nav.nav, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened nav.nav {
-      border-radius: 0 0 0 3px; }
-    article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper {
-      width: 224px;
-      height: 295px;
+  article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig {
+    -webkit-transition: width 0.3s ease-in-out;
+    transition: width 0.3s ease-in-out; }
+    article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened {
+      width: 434px; }
+      article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened > div.side, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened > div.side, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened > div.side, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened > div.side {
+        width: 210px; }
+      article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened nav.nav, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened nav.nav {
+        border-radius: 0 0 0 3px; }
+  article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-materiau.vm-cardmedium.node-materiau.vm-cardfull.note-opened .note-wrapper, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-breve.vm-cardmedium.node-materiau.vm-cardfull.note-opened .note-wrapper {
+    z-index: 10;
+    position: absolute; }
+    article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper .close, article.node-materiau.vm-cardmedium.node-materiau.vm-cardfull.note-opened .note-wrapper .close, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper .close, article.node-breve.vm-cardmedium.node-materiau.vm-cardfull.note-opened .note-wrapper .close {
       position: absolute;
-      top: 0;
-      right: 0; }
-      article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper .close, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper .close {
-        position: absolute;
-        width: 15px;
-        height: 15px;
-        top: 5px;
-        right: 5px;
-        background-color: #fff !important;
-        background-image: url(../img/close2.png);
-        background-size: contain;
-        background-position: center;
-        cursor: pointer; }
-      article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item {
-        margin: 0; }
-      article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper label, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper label {
-        height: 20px;
-        font-size: 14px;
-        margin: 0 5px;
-        line-height: 1.6; }
-      article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper textarea, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper textarea {
-        border: #ccc 1px solid;
-        border-radius: 0 7px 7px 0;
-        resize: none;
-        padding: 5px;
-        margin: 5px;
-        height: 265px;
-        width: 214px;
-        font-size: 12px; }
+      width: 15px;
+      height: 15px;
+      top: 5px;
+      right: 5px;
+      background-color: #fff !important;
+      background-image: url(../img/close2.png);
+      background-size: contain;
+      background-position: center;
+      cursor: pointer; }
+    article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item, article.node-materiau.vm-cardmedium.node-materiau.vm-cardfull.note-opened .note-wrapper .form-item, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item, article.node-breve.vm-cardmedium.node-materiau.vm-cardfull.note-opened .note-wrapper .form-item {
+      margin: 0; }
+    article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper label, article.node-materiau.vm-cardmedium.node-materiau.vm-cardfull.note-opened .note-wrapper label, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper label, article.node-breve.vm-cardmedium.node-materiau.vm-cardfull.note-opened .note-wrapper label {
+      height: 20px;
+      font-size: 14px;
+      margin: 0 5px;
+      line-height: 1.6; }
+    article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper textarea, article.node-materiau.vm-cardmedium.node-materiau.vm-cardfull.note-opened .note-wrapper textarea, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper textarea, article.node-breve.vm-cardmedium.node-materiau.vm-cardfull.note-opened .note-wrapper textarea {
+      border: #ccc 1px solid;
+      resize: none;
+      padding: 5px;
+      margin: 5px;
+      font-size: 12px; }
+  article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened .note-wrapper {
+    width: 224px;
+    height: 295px;
+    top: 0;
+    right: 0; }
+  article.node-materiau.vm-cardmedium.node-materiau.vm-cardmedium.note-opened textarea, article.node-materiau.vm-cardmedium.node-materiau.vm-cardbig.note-opened textarea, article.node-breve.vm-cardmedium.node-materiau.vm-cardmedium.note-opened textarea, article.node-breve.vm-cardmedium.node-materiau.vm-cardbig.note-opened textarea {
+    width: 214px;
+    border-radius: 0 7px 7px 0;
+    height: 265px; }
+  article.node-materiau.vm-cardmedium.node-materiau.vm-cardfull.note-opened .note-wrapper, article.node-breve.vm-cardmedium.node-materiau.vm-cardfull.note-opened .note-wrapper {
+    width: 105px;
+    left: 0;
+    height: 147.5px;
+    top: 147.5px;
+    background-color: #fff;
+    border-radius: 0 0 0 7px; }
+  article.node-materiau.vm-cardmedium.node-materiau.vm-cardfull.note-opened textarea, article.node-breve.vm-cardmedium.node-materiau.vm-cardfull.note-opened textarea {
+    width: 95px;
+    border-radius: 0 0 0 7px;
+    height: 117.5px; }
   article.node-materiau.vm-cardmedium .side, article.node-breve.vm-cardmedium .side {
     position: absolute;
     width: 100%;
@@ -5304,9 +5349,7 @@ article.node-materiau.vm-cardbig, article.node-breve.vm-cardbig {
   -webkit-transition: -webkit-box-shadow 0.3s ease-out;
   transition: -webkit-box-shadow 0.3s ease-out;
   transition: box-shadow 0.3s ease-out;
-  transition: box-shadow 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
-  -webkit-transition: width 0.3s ease-in-out;
-  transition: width 0.3s ease-in-out; }
+  transition: box-shadow 0.3s ease-out, -webkit-box-shadow 0.3s ease-out; }
   article.node-materiau.vm-cardbig > div.side, article.node-breve.vm-cardbig > div.side {
     border-radius: 5px;
     background-clip: padding-box;
@@ -5481,45 +5524,62 @@ article.node-materiau.vm-cardbig, article.node-breve.vm-cardbig {
         -webkit-transition: text-shadow 0s ease-out;
         transition: text-shadow 0s ease-out;
         text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); }
-  article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened {
-    width: 864px; }
-    article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened > div.side, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened > div.side, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened > div.side, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened > div.side {
-      width: 425px; }
-    article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened nav.nav, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened nav.nav {
-      border-radius: 0 0 0 3px; }
-    article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper {
-      width: 439px;
-      height: 610px;
+  article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium, article.node-breve.vm-cardbig.node-materiau.vm-cardbig {
+    -webkit-transition: width 0.3s ease-in-out;
+    transition: width 0.3s ease-in-out; }
+    article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened {
+      width: 864px; }
+      article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened > div.side, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened > div.side, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened > div.side, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened > div.side {
+        width: 425px; }
+      article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened nav.nav, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened nav.nav {
+        border-radius: 0 0 0 3px; }
+  article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-materiau.vm-cardbig.node-materiau.vm-cardfull.note-opened .note-wrapper, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-breve.vm-cardbig.node-materiau.vm-cardfull.note-opened .note-wrapper {
+    z-index: 10;
+    position: absolute; }
+    article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper .close, article.node-materiau.vm-cardbig.node-materiau.vm-cardfull.note-opened .note-wrapper .close, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper .close, article.node-breve.vm-cardbig.node-materiau.vm-cardfull.note-opened .note-wrapper .close {
       position: absolute;
-      top: 0;
-      right: 0; }
-      article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper .close, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper .close {
-        position: absolute;
-        width: 15px;
-        height: 15px;
-        top: 5px;
-        right: 5px;
-        background-color: #fff !important;
-        background-image: url(../img/close2.png);
-        background-size: contain;
-        background-position: center;
-        cursor: pointer; }
-      article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item {
-        margin: 0; }
-      article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper label, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper label {
-        height: 20px;
-        font-size: 14px;
-        margin: 0 5px;
-        line-height: 1.6; }
-      article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper textarea, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper textarea {
-        border: #ccc 1px solid;
-        border-radius: 0 7px 7px 0;
-        resize: none;
-        padding: 5px;
-        margin: 5px;
-        height: 580px;
-        width: 429px;
-        font-size: 12px; }
+      width: 15px;
+      height: 15px;
+      top: 5px;
+      right: 5px;
+      background-color: #fff !important;
+      background-image: url(../img/close2.png);
+      background-size: contain;
+      background-position: center;
+      cursor: pointer; }
+    article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item, article.node-materiau.vm-cardbig.node-materiau.vm-cardfull.note-opened .note-wrapper .form-item, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item, article.node-breve.vm-cardbig.node-materiau.vm-cardfull.note-opened .note-wrapper .form-item {
+      margin: 0; }
+    article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper label, article.node-materiau.vm-cardbig.node-materiau.vm-cardfull.note-opened .note-wrapper label, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper label, article.node-breve.vm-cardbig.node-materiau.vm-cardfull.note-opened .note-wrapper label {
+      height: 20px;
+      font-size: 14px;
+      margin: 0 5px;
+      line-height: 1.6; }
+    article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper textarea, article.node-materiau.vm-cardbig.node-materiau.vm-cardfull.note-opened .note-wrapper textarea, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper textarea, article.node-breve.vm-cardbig.node-materiau.vm-cardfull.note-opened .note-wrapper textarea {
+      border: #ccc 1px solid;
+      resize: none;
+      padding: 5px;
+      margin: 5px;
+      font-size: 12px; }
+  article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened .note-wrapper {
+    width: 439px;
+    height: 610px;
+    top: 0;
+    right: 0; }
+  article.node-materiau.vm-cardbig.node-materiau.vm-cardmedium.note-opened textarea, article.node-materiau.vm-cardbig.node-materiau.vm-cardbig.note-opened textarea, article.node-breve.vm-cardbig.node-materiau.vm-cardmedium.note-opened textarea, article.node-breve.vm-cardbig.node-materiau.vm-cardbig.note-opened textarea {
+    width: 429px;
+    border-radius: 0 7px 7px 0;
+    height: 580px; }
+  article.node-materiau.vm-cardbig.node-materiau.vm-cardfull.note-opened .note-wrapper, article.node-breve.vm-cardbig.node-materiau.vm-cardfull.note-opened .note-wrapper {
+    width: 212.5px;
+    left: 0;
+    height: 305px;
+    top: 305px;
+    background-color: #fff;
+    border-radius: 0 0 0 7px; }
+  article.node-materiau.vm-cardbig.node-materiau.vm-cardfull.note-opened textarea, article.node-breve.vm-cardbig.node-materiau.vm-cardfull.note-opened textarea {
+    width: 202.5px;
+    border-radius: 0 0 0 7px;
+    height: 275px; }
   article.node-materiau.vm-cardbig > .side, article.node-breve.vm-cardbig > .side {
     position: absolute;
     width: 100%;
@@ -5718,8 +5778,6 @@ article.node-materiau.vm-cardfull, article.node-breve.vm-cardfull {
   transition: -webkit-box-shadow 0.3s ease-out;
   transition: box-shadow 0.3s ease-out;
   transition: box-shadow 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
-  -webkit-transition: width 0.3s ease-in-out;
-  transition: width 0.3s ease-in-out;
   font-size: 0px; }
   article.node-materiau.vm-cardfull > div.side, article.node-breve.vm-cardfull > div.side {
     border-radius: 5px;
@@ -5895,45 +5953,62 @@ article.node-materiau.vm-cardfull, article.node-breve.vm-cardfull {
         -webkit-transition: text-shadow 0s ease-out;
         transition: text-shadow 0s ease-out;
         text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); }
-  article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened {
-    width: 1714px; }
-    article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened > div.side, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened > div.side, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened > div.side, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened > div.side {
-      width: 850px; }
-    article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened nav.nav, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened nav.nav {
-      border-radius: 0 0 0 3px; }
-    article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper {
-      width: 864px;
-      height: 610px;
+  article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium, article.node-breve.vm-cardfull.node-materiau.vm-cardbig {
+    -webkit-transition: width 0.3s ease-in-out;
+    transition: width 0.3s ease-in-out; }
+    article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened {
+      width: 1714px; }
+      article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened > div.side, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened > div.side, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened > div.side, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened > div.side {
+        width: 850px; }
+      article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened nav.nav, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened nav.nav, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened nav.nav {
+        border-radius: 0 0 0 3px; }
+  article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-materiau.vm-cardfull.node-materiau.vm-cardfull.note-opened .note-wrapper, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-breve.vm-cardfull.node-materiau.vm-cardfull.note-opened .note-wrapper {
+    z-index: 10;
+    position: absolute; }
+    article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper .close, article.node-materiau.vm-cardfull.node-materiau.vm-cardfull.note-opened .note-wrapper .close, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper .close, article.node-breve.vm-cardfull.node-materiau.vm-cardfull.note-opened .note-wrapper .close {
       position: absolute;
-      top: 0;
-      right: 0; }
-      article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper .close, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper .close {
-        position: absolute;
-        width: 15px;
-        height: 15px;
-        top: 5px;
-        right: 5px;
-        background-color: #fff !important;
-        background-image: url(../img/close2.png);
-        background-size: contain;
-        background-position: center;
-        cursor: pointer; }
-      article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item {
-        margin: 0; }
-      article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper label, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper label {
-        height: 20px;
-        font-size: 14px;
-        margin: 0 5px;
-        line-height: 1.6; }
-      article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper textarea, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper textarea {
-        border: #ccc 1px solid;
-        border-radius: 0 7px 7px 0;
-        resize: none;
-        padding: 5px;
-        margin: 5px;
-        height: 580px;
-        width: 854px;
-        font-size: 12px; }
+      width: 15px;
+      height: 15px;
+      top: 5px;
+      right: 5px;
+      background-color: #fff !important;
+      background-image: url(../img/close2.png);
+      background-size: contain;
+      background-position: center;
+      cursor: pointer; }
+    article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item, article.node-materiau.vm-cardfull.node-materiau.vm-cardfull.note-opened .note-wrapper .form-item, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item, article.node-breve.vm-cardfull.node-materiau.vm-cardfull.note-opened .note-wrapper .form-item {
+      margin: 0; }
+    article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper label, article.node-materiau.vm-cardfull.node-materiau.vm-cardfull.note-opened .note-wrapper label, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper label, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper label, article.node-breve.vm-cardfull.node-materiau.vm-cardfull.note-opened .note-wrapper label {
+      height: 20px;
+      font-size: 14px;
+      margin: 0 5px;
+      line-height: 1.6; }
+    article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper textarea, article.node-materiau.vm-cardfull.node-materiau.vm-cardfull.note-opened .note-wrapper textarea, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper textarea, article.node-breve.vm-cardfull.node-materiau.vm-cardfull.note-opened .note-wrapper textarea {
+      border: #ccc 1px solid;
+      resize: none;
+      padding: 5px;
+      margin: 5px;
+      font-size: 12px; }
+  article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened .note-wrapper, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened .note-wrapper {
+    width: 864px;
+    height: 610px;
+    top: 0;
+    right: 0; }
+  article.node-materiau.vm-cardfull.node-materiau.vm-cardmedium.note-opened textarea, article.node-materiau.vm-cardfull.node-materiau.vm-cardbig.note-opened textarea, article.node-breve.vm-cardfull.node-materiau.vm-cardmedium.note-opened textarea, article.node-breve.vm-cardfull.node-materiau.vm-cardbig.note-opened textarea {
+    width: 854px;
+    border-radius: 0 7px 7px 0;
+    height: 580px; }
+  article.node-materiau.vm-cardfull.node-materiau.vm-cardfull.note-opened .note-wrapper, article.node-breve.vm-cardfull.node-materiau.vm-cardfull.note-opened .note-wrapper {
+    width: 425px;
+    left: 0;
+    height: 305px;
+    top: 305px;
+    background-color: #fff;
+    border-radius: 0 0 0 7px; }
+  article.node-materiau.vm-cardfull.node-materiau.vm-cardfull.note-opened textarea, article.node-breve.vm-cardfull.node-materiau.vm-cardfull.note-opened textarea {
+    width: 415px;
+    border-radius: 0 0 0 7px;
+    height: 275px; }
   article.node-materiau.vm-cardfull nav.nav, article.node-breve.vm-cardfull nav.nav {
     top: 0; }
   article.node-materiau.vm-cardfull > *, article.node-breve.vm-cardfull > * {
@@ -6079,8 +6154,6 @@ article.node-materiau.vm-cardfull, article.node-breve.vm-cardfull {
       transition: -webkit-box-shadow 0.3s ease-out;
       transition: box-shadow 0.3s ease-out;
       transition: box-shadow 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
-      -webkit-transition: width 0.3s ease-in-out;
-      transition: width 0.3s ease-in-out;
       width: 1024px;
       padding: 1em; }
       .print-node-materiau > div.side {
@@ -6257,45 +6330,62 @@ article.node-materiau.vm-cardfull, article.node-breve.vm-cardfull {
             -webkit-transition: text-shadow 0s ease-out;
             transition: text-shadow 0s ease-out;
             text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); }
-      .print-node-materiau.node-materiau.vm-cardmedium.note-opened, .print-node-materiau.node-materiau.vm-cardbig.note-opened {
-        width: 1714px; }
-        .print-node-materiau.node-materiau.vm-cardmedium.note-opened > div.side, .print-node-materiau.node-materiau.vm-cardbig.note-opened > div.side {
-          width: 850px; }
-        .print-node-materiau.node-materiau.vm-cardmedium.note-opened nav.nav, .print-node-materiau.node-materiau.vm-cardbig.note-opened nav.nav {
-          border-radius: 0 0 0 3px; }
-        .print-node-materiau.node-materiau.vm-cardmedium.note-opened .note-wrapper, .print-node-materiau.node-materiau.vm-cardbig.note-opened .note-wrapper {
-          width: 864px;
-          height: auto;
+      .print-node-materiau.node-materiau.vm-cardmedium, .print-node-materiau.node-materiau.vm-cardbig {
+        -webkit-transition: width 0.3s ease-in-out;
+        transition: width 0.3s ease-in-out; }
+        .print-node-materiau.node-materiau.vm-cardmedium.note-opened, .print-node-materiau.node-materiau.vm-cardbig.note-opened {
+          width: 1714px; }
+          .print-node-materiau.node-materiau.vm-cardmedium.note-opened > div.side, .print-node-materiau.node-materiau.vm-cardbig.note-opened > div.side {
+            width: 850px; }
+          .print-node-materiau.node-materiau.vm-cardmedium.note-opened nav.nav, .print-node-materiau.node-materiau.vm-cardbig.note-opened nav.nav {
+            border-radius: 0 0 0 3px; }
+      .print-node-materiau.node-materiau.vm-cardmedium.note-opened .note-wrapper, .print-node-materiau.node-materiau.vm-cardbig.note-opened .note-wrapper, .print-node-materiau.node-materiau.vm-cardfull.note-opened .note-wrapper {
+        z-index: 10;
+        position: absolute; }
+        .print-node-materiau.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, .print-node-materiau.node-materiau.vm-cardbig.note-opened .note-wrapper .close, .print-node-materiau.node-materiau.vm-cardfull.note-opened .note-wrapper .close {
           position: absolute;
-          top: 0;
-          right: 0; }
-          .print-node-materiau.node-materiau.vm-cardmedium.note-opened .note-wrapper .close, .print-node-materiau.node-materiau.vm-cardbig.note-opened .note-wrapper .close {
-            position: absolute;
-            width: 15px;
-            height: 15px;
-            top: 5px;
-            right: 5px;
-            background-color: #fff !important;
-            background-image: url(../img/close2.png);
-            background-size: contain;
-            background-position: center;
-            cursor: pointer; }
-          .print-node-materiau.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, .print-node-materiau.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item {
-            margin: 0; }
-          .print-node-materiau.node-materiau.vm-cardmedium.note-opened .note-wrapper label, .print-node-materiau.node-materiau.vm-cardbig.note-opened .note-wrapper label {
-            height: 20px;
-            font-size: 14px;
-            margin: 0 5px;
-            line-height: 1.6; }
-          .print-node-materiau.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, .print-node-materiau.node-materiau.vm-cardbig.note-opened .note-wrapper textarea {
-            border: #ccc 1px solid;
-            border-radius: 0 7px 7px 0;
-            resize: none;
-            padding: 5px;
-            margin: 5px;
-            height: auto-10px-20px;
-            width: 854px;
-            font-size: 12px; } }
+          width: 15px;
+          height: 15px;
+          top: 5px;
+          right: 5px;
+          background-color: #fff !important;
+          background-image: url(../img/close2.png);
+          background-size: contain;
+          background-position: center;
+          cursor: pointer; }
+        .print-node-materiau.node-materiau.vm-cardmedium.note-opened .note-wrapper .form-item, .print-node-materiau.node-materiau.vm-cardbig.note-opened .note-wrapper .form-item, .print-node-materiau.node-materiau.vm-cardfull.note-opened .note-wrapper .form-item {
+          margin: 0; }
+        .print-node-materiau.node-materiau.vm-cardmedium.note-opened .note-wrapper label, .print-node-materiau.node-materiau.vm-cardbig.note-opened .note-wrapper label, .print-node-materiau.node-materiau.vm-cardfull.note-opened .note-wrapper label {
+          height: 20px;
+          font-size: 14px;
+          margin: 0 5px;
+          line-height: 1.6; }
+        .print-node-materiau.node-materiau.vm-cardmedium.note-opened .note-wrapper textarea, .print-node-materiau.node-materiau.vm-cardbig.note-opened .note-wrapper textarea, .print-node-materiau.node-materiau.vm-cardfull.note-opened .note-wrapper textarea {
+          border: #ccc 1px solid;
+          resize: none;
+          padding: 5px;
+          margin: 5px;
+          font-size: 12px; }
+      .print-node-materiau.node-materiau.vm-cardmedium.note-opened .note-wrapper, .print-node-materiau.node-materiau.vm-cardbig.note-opened .note-wrapper {
+        width: 864px;
+        height: auto;
+        top: 0;
+        right: 0; }
+      .print-node-materiau.node-materiau.vm-cardmedium.note-opened textarea, .print-node-materiau.node-materiau.vm-cardbig.note-opened textarea {
+        width: 854px;
+        border-radius: 0 7px 7px 0;
+        height: auto-10px-20px; }
+      .print-node-materiau.node-materiau.vm-cardfull.note-opened .note-wrapper {
+        width: 425px;
+        left: 0;
+        height: auto/2;
+        top: auto/2;
+        background-color: #fff;
+        border-radius: 0 0 0 7px; }
+      .print-node-materiau.node-materiau.vm-cardfull.note-opened textarea {
+        width: 415px;
+        border-radius: 0 0 0 7px;
+        height: auto/2-10px-20px; } }
 
 .print-content .node-materiau.vm-print {
   margin: 0;

sites/all/themes/gui/materiobasetheme/scss/styles.scss

@@ -1603,27 +1603,31 @@ $cardmargin:7px;
   }
 
   // NOTES
-  transition: width 0.3s ease-in-out;
-  &.node-materiau.vm-cardmedium.note-opened,
-  &.node-materiau.vm-cardbig.note-opened{
-
-    >div.side{
-      width:$w;
-    }
+  $note_label_h:20px;
+  &.node-materiau.vm-cardmedium,
+  &.node-materiau.vm-cardbig{
+    transition: width 0.3s ease-in-out;
+    &.note-opened{
+      >div.side{
+        width:$w;
+      }
 
-    width:$w*2+$cardmargin*2;
-    nav.nav{
-      border-radius: 0 0 0 3px;
+      width:$w*2+$cardmargin*2;
+      nav.nav{
+        border-radius: 0 0 0 3px;
+      }
     }
+  }
 
+  &.node-materiau.vm-cardmedium.note-opened,
+  &.node-materiau.vm-cardbig.note-opened,
+  &.node-materiau.vm-cardfull.note-opened{
     .note-wrapper{
-      width:$w+$cardmargin*2; height:$h;
-      position :absolute; top:0; right:0;
+      z-index:10; position :absolute;
       .close{
         position: absolute;
-        width:15px; height:15px; top:5px; right:5px;
-        // padding: 3px 3px 0 0;
-        // border-radius: 0 7px 0 0;
+        width:15px; height:15px;
+        top:5px; right:5px;
         background-color: #fff!important;
         background-image: url(../img/close2.png);
         background-size: contain;
@@ -1633,25 +1637,48 @@ $cardmargin:7px;
       .form-item{
         margin:0;
       }
-      $label_h:20px;
       label{
         // display: none;
-        height:$label_h;
+        height:$note_label_h;
         @include fs14;
         margin:0 5px;
         line-height: 1.6;
       }
       textarea{
         border: #ccc 1px solid;
-        border-radius: 0 7px 7px 0;
         resize:none;
         padding:5px; margin:5px;
-        height:$h - 10px - $label_h;
-        width:$w+$cardmargin*2 - 10px;
         @include fs12;
       }
     }
   }
+  &.node-materiau.vm-cardmedium.note-opened,
+  &.node-materiau.vm-cardbig.note-opened{
+    .note-wrapper{
+      width:$w+$cardmargin*2; height:$h;
+      top:0; right:0;
+    }
+    textarea{
+      width:$w+$cardmargin*2 - 10px;
+      border-radius: 0 7px 7px 0;
+      height:$h - 10px - $note_label_h;
+    }
+  }
+  &.node-materiau.vm-cardfull.note-opened{
+    .note-wrapper{
+      width:$w / 2;
+      left:0;
+      height:$h / 2;
+      top:$h / 2;
+      background-color: #fff;
+      border-radius: 0 0 0 7px;
+    }
+    textarea{
+      width:$w / 2 - 10px;
+      border-radius: 0 0 0 7px;
+      height:$h / 2 - 10px - $note_label_h;
+    }
+  }
 }// .card()
 
 /*