mycelia-front-app/staticApp/default/theme/style.styl

Visualisation de graph sociaux

mainToolsHeight = 45px
advencedToolsHeight = 90px
toolsPanelHeight = mainToolsHeight + advencedToolsHeight
legendWidth = 180px
logoAreaWidth = legendWidth
logoAreaHeight = 100px
detailsSmallWidth = 300px
detailsBigWidth = 600px
footerHeight = 30px
footerWidth = detailsSmallWidth

panelSizeChangerSize = 30px
transitionDuration = 0.5s
sizeChangerBg = #888

mainToolsHeight=45px
pictoButtonSize=mainToolsHeight*0.85


@require "../../layerEngine/legendView.styl"


hide()
	display none

.hidden
	display none
*
	font-family Calibri, sans-serif
	font-size 11pt
	box-sizing border-box
	margin 0
	padding 0

a
	cursor pointer
body
	background-color #eee


.LoD_hover
	.link:hover
		cursor pointer
	.node
		circle
			opacity 0.5 // 0.5
		path
			opacity 0.7 // 0.7
			display none
		&:hover
			cursor pointer
			circle
				opacity 0.8 // 0.8
		&.fixed
			path
				display block
			circle
				display none
			&:hover
				path
					opacity 1 // 1
		&.selected path, &.selected circle
			opacity 0.7
		&.selected:hover *
			opacity 1

.node
	path
		display none
	&.fixed
		path
			display block
		circle
			display none
	&.selected path, &.selected circle
		stroke-width 4px
		stroke #CC4444

.LoD_hover#viz .nearlyHidden
	opacity 0.2

#viz .nearlyHidden
	text, title, &.link use
		display none
.LoD_alwaysArrow#viz .nearlyHidden
	&.link use
		display initial

#viz.loading
	top mainToolsHeight
	left legendWidth
	width unquote("calc(100% - "+(legendWidth+detailsSmallWidth)+")")
	height unquote("calc(100% - "+mainToolsHeight+")")

noscript
	position fixed
	top mainToolsHeight+50px
	left legendWidth
	width unquote("calc(100% - "+(legendWidth+detailsSmallWidth)+")")
	text-align center
	z-index 100
	color #A22

.picto
	width 24px
	float left
	margin-top 3px
	margin-right 5px
	margin-left 5px

a
	text-decoration none
	font-weight bold
	color #333
	&:hover
		text-decoration underline
#logoArea
	background-color #a5bfc0
	position: fixed
	top:0
	left:0
	height: logoAreaHeight
	width: logoAreaWidth
	z-index 2
	*
		display block
		width 100%
		max-height logoAreaHeight

#tools-panel
	background-color: #7c9899
	position: fixed
	top:0
	left: logoAreaWidth
	right: 0
	height: toolsPanelHeight
	//&.hidden
	//	top - toolsPanelHeight
	&.small
		top - advencedToolsHeight
		.reduce
			hide()
	&.big
		top 0
		.expand
			hide()
	#advanced-tools
		height advencedToolsHeight
		background-color #788888
	#main-tools
		height mainToolsHeight
	.expand, .reduce
		top auto
		left 0
		right auto
		bottom 0
		border-radius 0
		border-bottom-right-radius panelSizeChangerSize
		height panelSizeChangerSize
		width panelSizeChangerSize
		line-height panelSizeChangerSize*0.8
		padding-right panelSizeChangerSize*0.2
		padding-bottom panelSizeChangerSize*0.2
		margin-top 0
		margin-left 0
		margin-bottom - panelSizeChangerSize
		background-color #7c9899
		&:hover
			background-color lighten(#7c9899, 30%)


#legend
	background-color #a5bfc0
	position fixed
	display block

	top logoAreaHeight
	left 0
	bottom 0
	width: legendWidth
	&.hidden
		left - legendWidth
	&.small
		left 0
		.expand
			hide()

#tools-panel.hidden ~ #details
	top 0
#tools-panel.small ~ #details
	top mainToolsHeight
#tools-panel.big ~ #details
	top toolsPanelHeight

#details
	background-color #788888
	position fixed
	right 0
	bottom 0
	padding 10px
	padding-top 80px
	padding-bottom 0
	width detailsSmallWidth
	&.hidden
		right - detailsSmallWidth
	&.small
		right 0
	&.big
		width detailsBigWidth
		.expand
			hide()
	section.wrapper
		background-color #d7e1e2
		padding 10px
		height calc(100% - 70px)
		overflow auto
		>:last-child
			margin-bottom footerHeight + 10px
		form a, label
			display block
			clear both
		ul
			padding-left 20px
		h2
			margin-top 20px
			margin-bottom 10px
		p
			text-align justify
			margin-bottom 10px
		a
			font-weight normal
			text-decoration underline
			text-decoration-style dashed
			text-decoration-color alpha(#333,0.5)
			&:hover
				text-decoration-style solid

	.expand, .reduce
		top 0
		left 0
		right auto
		bottom auto
		border-radius 0
		border-bottom-left-radius panelSizeChangerSize
		height panelSizeChangerSize
		width panelSizeChangerSize
		line-height panelSizeChangerSize*0.8
		padding-left panelSizeChangerSize*0.2
		padding-bottom panelSizeChangerSize*0.2
		margin-top 0
		margin-left - footerHeight
		background-color #788888
		&:hover
			background-color lighten(#788888, 30%)

footer
	background-color #7c9899
	position fixed
	bottom:0
	right:0
	height: footerHeight
	width: footerWidth
	z-index 2
	text-align center
	a
		margin 0 10px
		line-height footerHeight
		display inline-block;
	.expand, .reduce
		top 0
		left 0
		bottom 0
		border-radius 0
		border-top-left-radius footerHeight
		height footerHeight
		width footerHeight
		line-height footerHeight
		margin-top 0
		margin-left - footerHeight
		background-color #7c9899
		&:hover
			background-color lighten(#7c9899, 30%)

/*
#search
	position absolute
	right 0
	bottom 0
	height 30px
	width detailsSmallWidth
#langPicker
	position absolute
	right detailsSmallWidth
	bottom 0
	width (detailsSmallWidth / 2)
	height mainToolsHeight
*/
//.LoD_transition
.hidden, .small, .big
	transition all transitionDuration
.LoD_transition#viz
		*
			transition opacity 0.5s
	#errBox
		.err
			transition opacity 5s
#viz
	position fixed
	z-index -2
#errBox
	background-color hsla(0,0,0,0.2);
	position fixed
	left legendWidth
	//width 400px
	bottom 0
	border-top-left-radius 20px
	border-top-right-radius 20px
	.err
		color #900
		padding 0 20px
		display block
		&.fade
			opacity 0

.expand, .reduce
	font-weight bold
	font-size 20px
	//color #eee
	background alpha(sizeChangerBg,0.7)
	border 0
	position absolute
	top 50%
	left 50%
	margin-left - panelSizeChangerSize
	margin-top - panelSizeChangerSize
	width 2 * panelSizeChangerSize
	height 2 * panelSizeChangerSize
	border-radius panelSizeChangerSize
	&.bottom
		top 100%
	&.left
		left 0
	&.right
		left 100%
	&:hover
		cursor pointer
		background sizeChangerBg

.expand.bottom
	margin-top 0
	height panelSizeChangerSize
	border-top-left-radius 0
	border-top-right-radius 0
.reduce.bottom
	height panelSizeChangerSize
	border-bottom-left-radius 0
	border-bottom-right-radius 0
.expand.left, .reduce.right
	width panelSizeChangerSize
	border-top-right-radius 0
	border-bottom-right-radius 0
.reduce.left, .expand.right
	margin-left 0
	width  panelSizeChangerSize
	border-top-left-radius 0
	border-bottom-left-radius 0

#tradForm, form
	label
		display block;
		clear both;
	input
		width 50%;
		float:right;
		&[type="radio"]
			width auto
			float none
			margin-right 5px
	textarea
		display block
		width 100%


fieldset
	margin-top 20px
	padding 5px
	legend
		font-weight bold
		font-size 120%
		padding-left 10px
		padding-right 10px

#logoArea ~ #details .header
	&.page, &.viz
		h2
			padding-left 5px
			background-image none
			overflow hidden
		img
			float left
			height 60px

//FIXME: HORREUR intercidérale ! le customStyle copié en vrac ici !

@font-face {
	font-family: 'Ubuntu';
	src: url('fonts/ubuntu-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Ubuntu';
	src: url('fonts/ubuntu-bold-webfont.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}
*
	font-family Ubuntu, sans-serif

#langPicker
	width 200px
	float right

#details
	padding 10px
	>.header.trad>h2
		background-image url(img/unknow.svg)
	>.header.viz>h2
		background-image url(img/vizMode.svg)
	>.header.edit>h2
		background-image url(img/editMode.svg)
	>.header>h2
		display block
		height 60px
		line-height 60px
		background-size 60px 60px
		background-position 0 0
		background-repeat no-repeat
		margin-bottom 10px
		padding-left 70px
		font-size 20px
	.line
		display flex
		padding-bottom 5px
		border-bottom 1px solid black
		border-bottom-color darken(#d7e1e2, 10%)
		margin-bottom 5px
		>*
			flex 1

#legend>.header>h2
	font-size 20px


.pictoButton
	height mainToolsHeight
	width mainToolsHeight
	background-image url(img/unknow.svg)
	background-size pictoButtonSize pictoButtonSize
	background-position ((mainToolsHeight - pictoButtonSize)/2) ((mainToolsHeight - pictoButtonSize)/2)
	background-repeat no-repeat
	&:hover
		background-color lighten(#7c9899, 70%)
		cursor pointer

#main-tools
	display flex
	.left
		flex 1
		display flex
		text-align left;
		>*
			display block
	.right
		flex 1
		display flex
		justify-content: flex-end;
		>*
			display block
	h1
		line-height mainToolsHeight
		padding 0 20px
		color #dcf69d
		font-size 20px
		font-weight bold
		letter-spacing 2px
		white-space nowrap
	.ghost
		opacity 0.5
		&:hover
			cursor auto
			background-color #7c9899

#loginButton
	background-image url(img/login.svg)
#emailButton
	background-image url(img/email.svg)
#faqButton
	background-image url(img/faq.svg)
#alertsButton
	background-image url(img/alerts.svg)
#visuButton
	background-image url(img/visu.svg)
#vizModeButton
	background-image url(img/vizMode.svg)
#editModeButton
	background-image url(img/editMode.svg)
#diagramGenButton
	background-image url(img/diagramGen.svg)
#printButton
	background-image url(img/print.svg)
#exportData
	background-image url(img/exportData.svg)
#search
	searchDeco=mainToolsHeight*0.9
	background-image url(img/search.svg)
	background-size searchDeco searchDeco
	background-position bottom left
	background-repeat no-repeat
	.decoSearch
		height searchDeco
		width 34px
		background-image url(img/search.svg)
		background-size searchDeco searchDeco
		position absolute
		bottom 0
	input
		height 25px
		width 180px
		margin-left 28px
		margin-top 10px
		margin-right 10px
		padding-left 8px

.LoD_hover
	.link
		opacity 0.7
	.link:hover
		opacity 1

.link
	> line
		stroke grey
	> use
		fill grey

#viz .link.selected
	> line
		stroke red
	> use
		fill red