@ -1,10 +1,14 @@
. formulaire_spip textarea . markItUpEditor ,
. formulaire_spip textarea . markItUpEditor ,
. formulaire_spip li . editer_texte textarea {
/ * width : 96 % ;
clear : both ; * /
}
. markItUpHeader { text-align : left ; } /* fix dir=ltr */
. markItUpHeader {
text-align : left ;
}
/* fix dir=ltr */
/ * -------------------------------------------------------------------
@ -12,257 +16,384 @@
/ / By Jay Salvat - http : / / markitup . jaysalvat . com /
/ / ------------------------------------------------------------------ * /
. markItUp . markItUpHeader a ,
. markItUp . markItUpTabs a ,
. markItUp . markItUpFooter a {
color : # 000 ;
text-decoration : none ;
color : # 000 ;
text-decoration : none ;
}
. markItUp {
margin : 5px 0 5px 0 ;
. markItUp {
margin : 5px 0 5px 0 ;
position : relative ;
}
. markItUp . markItUpContainer {
margin : 0 ; padding : 0 ;
}
. markItUp . markItUpEditor {
clear : both ;
display : block ;
overflow : auto ;
. markItUp . markItUpContainer {
margin : 0 ;
padding : 0 ;
}
# text_area { /* cas tres particulier champs texte de spip */
height : 300px ;
}
. markItUp . markItUpPreviewFrame { }
. markItUp . markItUpFooter {
margin : 0 ; padding : 0 ;
width : 100 % ;
/ * = = = = = = = = = = = = = = = = =
* Onglets + boutons
* = = = = = = = = = = = = = = = = = * /
. markItUp . markItUpTabs a ,
. markItUp . markItUpHeader a {
transition : background 0 . 2s , color 0 . 2s ;
}
. markItUp . markItUpResizeHandle {
overflow : hidden ;
width : 22px ; height : 5px ;
margin-left : auto ;
margin-right : auto ;
background-image : url ( img / handle . png ) ;
cursor : ns-resize ;
. markItUp . markItUpTabs a : hover ,
. markItUp . markItUpTabs a : focus ,
. markItUp . markItUpTabs a : active ,
. markItUp . markItUpHeader ul a . active ,
. markItUp . markItUpHeader ul a : focus ,
. markItUp . markItUpHeader ul a : focus-within ,
. markItUp . markItUpHeader ul a : active ,
. markItUp . markItUpHeader ul a : hover {
background-color : # eee ;
background-color : var ( --couleur-claire2 , hsla ( 0 , 0 % , 0 % , 0 . 05 ) ) ; /* Amélioration progressive nav récents */
outline : none ! important ;
}
/***************************/
/* tabs */
/ * = = = = = = =
* Onglets
* = = = = = = = * /
. markItUp . markItUpTabs {
font-size : 12px ;
line-height : 18px ;
text-align : right ;
padding : 1px 1px 0 ;
margin-bottom : -2px ;
top : 6px ;
overflow : hidden ;
position : absolute ;
right : 30px ;
clear : right ;
z-index : 5 ; /* Un rien plus que .markItUpPreview */
/* line-height: 18px; */
text-align : right ;
/* overflow: hidden; */
position : absolute ;
right : 10px ;
clear : right ;
z-index : 5 ; /* Un rien plus que .markItUpPreview */
}
. markItUp . markItUpTabs a {
display : block ;
float : right ;
border : 1px solid # ccc ;
border-bottom : 0 ;
margin : 0px 1px ;
padding : 3px 4px 2px ;
background : # EEE ;
border-radius : 5px 5px 0 0 ;
}
. markItUp . markItUpTabs a . on { background-color : #fff ; border-bottom : 1 px solid #fff ; box-shadow : 1 px 1 px #eee inset ; }
. markItUp . markItUpTabs a : hover { background-color : #fff ; }
/***************************/
/* previsu */
. markItUp . markItUpPreview {
clear : both ;
border : 1px solid # ccc ;
background : # fff ;
overflow : auto ;
padding : 1em ;
display : block ;
float : right ;
padding : 1em 0 . 5em ;
position : relative ;
font-size : 12px ;
}
. markItUp . markItUpTabs a . on : after ,
. markItUp . markItUpTabs a : hover : after ,
. markItUp . markItUpTabs a : focus : after ,
. markItUp . markItUpTabs a : active : after {
content : '' ;
display : block ;
position : absolute ;
left : 0 ;
right : 0 ;
bottom : -2px ;
border-bottom : 2px solid # 888 ;
border-bottom-color : var ( --couleur-foncee , hsla ( 0 , 0 % , 0 % , 0 . 66 ) ) ; /* amélioration progressive */
}
/* correction des styles spip_formulaires appliques par defaut (grr) */
. markItUp . preview p { margin-bottom : 1 em ; }
. markItUp . preview ul { margin-bottom : 1 em ; margin-top : .5 em ; }
. markItUp . preview li { border : none ; padding : 1 px ; }
/* coloration code */
. markItUp . preview . cadre ol ,
. markItUp . preview . cadre ul { padding : .5 em ; }
/ * = = = = = =
* Entete
* = = = = = = * /
/***************************************************************************************/
/* first row of buttons */
. markItUp . markItUpHeader {
display : block ;
margin : 0 ;
padding : 0 ;
background-color : # F5F5F5 ;
background : -webkit-gradient ( linear , left top , left bottom , from ( # F1F1F1 ) , to ( # DDD ) ) ;
background : -moz-linear-gradient ( top , # F1F1F1 , # DDD ) ;
border : 1px solid # ccc ;
border-color : # F1F1F1 # EEE # CCC ;
border-color : # ddd # ddd # ccc ;
min-height : 3 . 2em ;
background : white ;
border : 1px solid # ddd ;
border-color : hsla ( 0 , 0 % , 0 % , 0 . 1 ) ; /* navs modernes */
border-bottom-color : hsla ( 0 , 0 % , 0 % , 0 . 05 ) ; /* navs modernes */
border-radius : 6px 6px 0 0 ;
min-height : 29px ;
}
. markItUp . markItUpHeader : after {
content : "\0020" ;
display : block ;
height : 0 ;
clear : both ;
visibility : hidden ;
overflow : hidden ;
}
. lte7 . markItUp . markItUpHeader ul { height : 29 px ; }
content : "\0020" ;
display : block ;
height : 0 ;
clear : both ;
visibility : hidden ;
overflow : hidden ;
}
. lte7 . markItUp . markItUpHeader ul {
height : 3 . 2em ;
}
. markItUp . markItUpHeader ul {
display : block ;
margin : 0 ! important ;
padding : 0 ;
}
/* Boutons : tous */
. markItUp . markItUpHeader ul li {
list-style : none ;
float : left ;
position : relative ;
clear : none ;
border : 0 ;
margin : 0 ;
padding : 0 ;
overflow : visible ;
}
. markItUp . markItUpHeader ul li : first-child { /* annuler un reglage des forms prive */
padding-top : 0 ;
}
. markItUp . markItUpHeader ul . markItUpDropMenu {
/ * background : inherit url ( img / menu . png ) no-repeat 100 % 80 % ;
padding-right : 10px ; * /
}
. markItUp . markItUpHeader ul . markItUpDropMenu ul { border-left : 1 px solid #CCC ; }
. markItUp . markItUpHeader ul . markItUpDropMenu li {
list-style : none ;
float : left ;
position : relative ;
clear : none ;
border : 0 ;
margin : 0 ;
padding : 0 ;
overflow : visible ;
}
. markItUp . markItUpHeader ul li : first-child {
/* annuler un reglage des forms prive */
padding-top : 0 ;
}
. markItUp . markItUpHeader ul a {
clear : none ;
display : block ;
margin : 0 ;
padding : 1em 0 . 5em ;
}
. markItUp . markItUpHeader ul a em {
display : block ;
background-repeat : no-repeat ;
width : 1rem ;
height : 1rem ;
text-indent : -10000px ;
}
. markItUp . markItUpHeader > ul > li : first-child > a {
padding-left : 10px ; /* idem texarea */
}
/* Boutons niveau 2 */
/* FIME : indiquer les entrées possédant un menu déroulant */
. markItUp . markItUpHeader ul . markItUpDropMenu > a {
/* background-image: url(img/menu.svg); */
/* background-repeat: no-repeat; */
/* background-position: right 0.25em center; */
/* background-color: inherit; */
/* padding-right: 1em; */
}
. markItUp . markItUpHeader ul . markItUpDropMenu ul {
display : none ;
/* opacity: 0; */
/* pointer-events: none; */
/* transition: opacity 0.1s; */
position : absolute ;
top : 3 . 15em ;
width : 8rem ;
z-index : 3 ;
}
. markItUp . markItUpHeader ul . markItUpDropMenu ul . expanded {
display : block ;
/* opacity: 1; */
/* pointer-events: all; */
width : 12em ; /* = 5 items par ligne */
}
. markItUp . markItUpHeader ul . markItUpDropMenu ul li {
float : left ;
margin-right : 0 ;
padding : 0 1px 1px 0 ;
background-color : # CCC ;
}
. markItUp . markItUpHeader ul ul a {
background-color : # F1F1F1 ;
}
/* next rows of buttons */
. markItUp . markItUpHeader ul ul {
display : none ;
position : absolute ;
top : 29px ; left : -1px ;
width : 150px ;
z-index : 3 ;
padding-top : 2px ;
background-color : white ;
}
/* le padding rompt la continuite du hover sous IE7&8 */
. lte8 . markItUp . markItUpHeader ul ul { padding-top : 0 ; border-top : 1 px solid #ccc ; }
. markItUp . markItUpHeader ul ul li {
float : left ;
. markItUp . markItUpHeader ul . markItUpDropMenu ul a {
background-color : # eee ;
background-color : var ( --couleur-claire2 , hsla ( 0 , 0 % , 0 % , 0 . 05 ) ) ; /* Amélioration progressive navs récents */
}
. markItUp . markItUpHeader ul ul . markItUpDropMenu {
background : # F5F5F5 url ( img / submenu . png ) no-repeat 50 % 50 % ;
. markItUp . markItUpHeader ul . markItUpDropMenu ul a : hover ,
. markItUp . markItUpHeader ul . markItUpDropMenu ul a : focus ,
. markItUp . markItUpHeader ul . markItUpDropMenu ul a : active {
background-color : # ccc ;
background-color : var ( --couleur-claire1 , hsla ( 0 , 0 % , 0 % , 0 . 15 ) ) ; /* Amélioration progressive navs récents */
}
/* le padding rompt la continuite du hover sous IE7&8 */
. lte8 . markItUp . markItUpHeader ul . markItUpDropMenu ul {
padding-top : 0 ;
border-top : 1px solid # ccc ;
}
. markItUp . markItUpHeader ul . separateur {
border-left : 1px solid # d2d2d2 ;
/* Boutons niveau 3 */
. markItUp . markItUpHeader ul ul . markItUpDropMenu {
background : # F5F5F5 url ( img / submenu . png ) no-repeat 50 % 50 % ;
}
. markItUp . markItUpHeader ul . separateur { }
. markItUp . markItUpHeader ul ul . separateur {
margin : 0 ; border : 0 ;
margin : 0 ;
border : 0 ;
}
. markItUp . markItUpHeader ul a {
clear : none ;
/ * = = = = = = =
* Editeur
* = = = = = = = * /
. markItUp . markItUpEditor {
clear : both ;
display : block ;
overflow : auto ;
margin : 0 ;
padding : 7px 6px 6px ;
}
. markItUp . markItUpHeader ul a : focus ,
. markItUp . markItUpHeader ul a : active { -moz- transform : translateY ( 1 px ) ; outline : none !important ; }
. markItUp . markItUpHeader ul a : hover { background-color : #fff ; }
. markItUp . markItUpHeader ul a em {
display : block ;
background-repeat : no-repeat ;
width : 16px ; height : 16px ;
text-indent : -10000px ;
/* cas très particulier champs texte de spip */
. markItUp . markItUpEditor # text_area {
height : 300px ;
border-color : hsla ( 0 , 0 % , 0 % , 0 . 1 ) ; /* Amélioration progressive nav récents */
border-top : 0 ;
}
/ * = = = = = = =
* Prévisu
* = = = = = = = * /
. markItUp . markItUpPreview {
clear : both ;
border : 1px solid # ddd ;
border-color : hsla ( 0 , 0 % , 0 % , 0 . 1 ) ; /* Amélioration progressive */
border-top : 0 ;
background : # fff ;
overflow : auto ;
padding : 1em ;
}
/* correction des styles spip_formulaires appliques par defaut (grr) */
. markItUp . preview p {
margin-bottom : 1em ;
}
/******************************************************************************/
/* Fullscreen */
. markItUp . preview ul {
margin-bottom : 1em ;
margin-top : . 5em ;
}
. markItUp . preview li {
border : none ;
padding : 1px ;
}
/* coloration code */
. markItUp . preview . cadre ol ,
. markItUp . preview . cadre ul {
padding : . 5em ;
}
/ * = = = = = = = = = =
* Fullscreen
* = = = = = = = = = = * /
. markItUp . markItUpContainer . fullscreen {
position : fixed ;
top : 0 ;
left : 0 ;
height : 100 % ;
width : 100 % ;
background : # DDD ;
z-index : 1002 ; /* par dessus le bandeau nav */
}
. markItUp . fullscreen . markItUpHeader {
position : absolute ;
top : 0 ;
right : 50 % ;
width : 50 % ;
max-width : 40em ;
display : block ! important ;
}
. markItUp . fullscreen . markItUpEditor {
position : absolute ! important ;
top : 0 ;
right : 50 % ;
width : 50 % ;
max-width : 40em ;
height : 95 % ! important ;
margin-top : 30px ;
display : block ! important ;
}
. markItUp . fullscreen . markItUpPreview {
position : absolute ;
top : 0 ;
left : 50 % ;
width : 50 % ;
max-width : 40em ;
height : 95 % ! important ;
margin-top : 30px ;
display : block ! important ;
-moz-box-sizing : border-box ;
-webkit-box-sizing : border-box ;
box-sizing : border-box ;
position : fixed ;
top : 0 ;
left : 0 ;
height : 100 % ;
width : 100 % ;
background : # DDD ;
z-index : 1002 ; /* par dessus le bandeau nav */
}
. markItUp . fullscreen . markItUpHeader {
position : absolute ;
top : 0 ;
right : 50 % ;
width : 50 % ;
max-width : 40em ;
display : block ! important ;
}
. markItUp . fullscreen . markItUpEditor ,
. markItUp . fullscreen . markItUpPreview {
margin-top : 3 . 4em ;
top : 0 ;
width : 50 % ;
max-width : 40em ;
height : 95 % ! important ;
display : block ! important ;
border : 0 ;
}
. markItUp . fullscreen . markItUpEditor {
position : absolute ! important ;
right : 50 % ;
}
. markItUp . fullscreen . markItUpPreview {
position : absolute ;
left : 50 % ;
-moz-box-sizing : border-box ;
-webkit-box-sizing : border-box ;
box-sizing : border-box ;
border-left : 1px solid # eee ;
border-left-color : hsla ( 0 , 0 % , 0 % , 0 . 1 ) ;
}
. markItUp . fullscreen . markItUpTabs {
position : absolute ;
left : 50 % ;
width : 50 % ;
max-width : 40em ;
position : absolute ;
left : 50 % ;
width : 50 % ;
max-width : 40em ;
}
. markItUp . fullscreen . markItUpTabs . previsuVoir ,
. markItUp . fullscreen . markItUpTabs . previsuEditer ,
. markItUp . fullscreen . markItUpFooter {
display : none ;
display : none ;
}
. markItUp . markItUpTabs . fullscreen {
text-indent : -1000em ;
text-align : left ;
background-image : url ( img / arrow_out . pn g) ! important ;
background-position : center center ! important ;
background-repeat : no-repeat ! important ;
background-image : url ( img / arrow_out . sv g) ! important ;
background-position : center center ! important ;
background-repeat : no-repeat ! important ;
-moz-box-sizing : content-box ;
-webkit-box-sizing : content-box ;
box-sizing : content-box ;
-webkit-box-sizing : content-box ;
box-sizing : content-box ;
width : 16px ;
}
. markItUp . fullscreen . markItUpTabs . fullscreen {
background-image : url ( img / arrow_in . pn g) ! important ;
background-image : url ( img / arrow_in . sv g) ! important ;
}
/* end */
/ * = = = =
* Pied
* = = = = * /
. markItUp . markItUpFooter {
margin : 0 ;
padding : 0 ;
width : 100 % ;
}
/ * = = = = = = =
* Poignée
* = = = = = = = * /
. markItUp . markItUpResizeHandle {
overflow : hidden ;
width : 21px ;
height : 6px ;
margin-left : auto ;
margin-right : auto ;
background-image : url ( img / handle . svg ) ;
cursor : ns-resize ;
}
