Revision 3fc38171
Von Andreas Rudin vor etwa 6 Jahren hinzugefügt
| css/less/menu.less | ||
|---|---|---|
| 112 | 112 |
position: relative; |
| 113 | 113 |
display: none; |
| 114 | 114 |
padding: 0 2em 2em 2em; |
| 115 |
margin: 0 -2em -2em -2.9em;
|
|
| 115 |
margin: 0 -2em -2em -2.8em;
|
|
| 116 | 116 |
|
| 117 | 117 |
|
| 118 | 118 |
li{
|
| ... | ... | |
| 136 | 136 |
// |
| 137 | 137 |
div.x {
|
| 138 | 138 |
background: no-repeat right url("../image/menu-arrow-to-right-5.png");
|
| 139 |
padding-right: 2.0em ; |
|
| 139 | 140 |
} |
| 140 | 141 |
|
| 141 | 142 |
// |
| ... | ... | |
| 186 | 187 |
|
| 187 | 188 |
|
| 188 | 189 |
|
| 190 |
// PENDENT: ??? (ggf. entfernen) |
|
| 191 |
li.sub {
|
|
| 192 |
position: relative; |
|
| 193 |
left: 0.2em; |
|
| 194 |
top: 0px; |
|
| 195 |
background-color: #FFFFFF; |
|
| 196 |
} |
|
| 189 | 197 |
|
| 190 | 198 |
|
| 191 | 199 |
|
| 192 | 200 |
|
| 201 |
// -------------------- |
|
| 202 |
// HTML-MENU (LEFT) |
|
| 203 |
// -------------------- |
|
| 193 | 204 |
|
| 205 |
// Layout Page |
|
| 206 |
|
|
| 207 |
// Left (Menu) area/column |
|
| 208 |
body > #layout-split-left {
|
|
| 209 |
display: block; |
|
| 210 |
//position: relative; |
|
| 211 |
position: fixed !important; |
|
| 212 |
top: 0 ; |
|
| 213 |
left: 0 ; |
|
| 214 |
width: 200px; |
|
| 215 |
//height: 101%; |
|
| 216 |
height: 100%; |
|
| 217 |
z-index: 1; |
|
| 218 |
//overflow: hidden; |
|
| 219 |
overflow: hidden ; |
|
| 220 |
border-right: 1px @gray solid; |
|
| 221 |
background-color: @gray-mediumdark; |
|
| 194 | 222 |
|
| 195 | 223 |
|
| 224 |
} |
|
| 196 | 225 |
|
| 226 |
// Right (Content) area/column |
|
| 227 |
div#layout-split-right {
|
|
| 228 |
margin-left: 200px; |
|
| 229 |
margin-top: 70px; |
|
| 230 |
display: block; |
|
| 231 |
z-index: 1; |
|
| 232 |
overflow: hidden; |
|
| 233 |
// PENDENT: das muss dringend geloest werden, |
|
| 234 |
// siehe z.B. /am.pl?action=edit_account&callback=am.pl%3faction%3dlist_account&id=6130 |
|
| 235 |
// Bearbeitung von Konto (wird unten abgeschnitten, falls nicht mit prov. Behelf wie unten) |
|
| 236 |
min-height: 800px; |
|
| 237 |
height: auto; |
|
| 197 | 238 |
|
| 198 |
// -------------------- |
|
| 199 |
// HTML-MENU |
|
| 200 |
// -------------------- |
|
| 201 |
|
|
| 239 |
.layout-actionbar { top: 36px; }
|
|
| 202 | 240 |
|
| 241 |
& > #content {
|
|
| 242 |
top: 70px ; |
|
| 203 | 243 |
|
| 204 |
div.layout-split-right {
|
|
| 205 |
margin-left: 190px; |
|
| 244 |
h1 { top: 28px !important; }
|
|
| 245 |
& > form > .tabwidget {
|
|
| 246 |
& > ul.ui-tabs-nav{ top: 69px; }
|
|
| 247 |
& > ui-tabs-panel {
|
|
| 248 |
.tabwidget ul.ui-tabs-nav{ position: relative; }
|
|
| 249 |
} |
|
| 250 |
} // / > form > .tabwidget |
|
| 251 |
& > #requirement_spec_tabs.tabwidget {
|
|
| 252 |
& > ul.ui-tabs-nav{ top: 69px !important ; }
|
|
| 253 |
} |
|
| 254 |
} |
|
| 206 | 255 |
} |
| 256 |
|
|
| 257 |
// PENDENT: wo gebraucht im alten Kivi ?? ggf. entfernen |
|
| 207 | 258 |
div.layout-split-right.folded {
|
| 208 | 259 |
margin-left: 40px |
| 209 | 260 |
} |
| 210 | 261 |
|
| 262 |
// Menu itself |
|
| 211 | 263 |
|
| 212 |
|
|
| 213 |
|
|
| 214 |
#html-menu {
|
|
| 215 |
position: fixed; |
|
| 264 |
#layout-split-left #html-menu {
|
|
| 265 |
display: block; |
|
| 216 | 266 |
overflow-y: scroll; |
| 217 | 267 |
overflow-x: hidden; |
| 218 |
height: 95%; |
|
| 219 |
transition: margin-left 0.2s, width 0.2s; |
|
| 220 |
-moz-transition: margin-left 0.2s, width 0.2s; |
|
| 221 |
-webkit-transition: margin-left 0.2s, width 0.2s; |
|
| 222 |
-o-transition: margin-left 0.2s, width 0.2s; |
|
| 223 |
float:left; |
|
| 224 |
width: 183px; |
|
| 268 |
width: 100%; |
|
| 269 |
height: 100%; |
|
| 270 |
margin: 27px 0 0 0; |
|
| 271 |
padding: 0 0 50px 0; |
|
| 272 |
background-color: @menu_link_bg_level1 ; |
|
| 225 | 273 |
font-size: @font-size-small; |
| 226 |
margin-top: 10px; |
|
| 227 | 274 |
|
| 275 |
// scrollbars could be invisible only on Webkit-Browsers |
|
| 276 |
&::-webkit-scrollbar {
|
|
| 277 |
display: none; |
|
| 278 |
} |
|
| 228 | 279 |
|
| 229 |
// PENDENT: noch noetig, oder wird das via JS gesetzt? |
|
| 230 |
&.folded {
|
|
| 231 |
width: 32px; |
|
| 232 |
|
|
| 233 |
&:hover {
|
|
| 234 |
width: 183px; |
|
| 280 |
// ----------------- |
|
| 281 |
// Menue-Items |
|
| 282 |
.mi {
|
|
| 283 |
display: block ; |
|
| 284 |
a {
|
|
| 285 |
display: block; |
|
| 286 |
word-wrap: break-word; |
|
| 235 | 287 |
} |
| 236 |
&+ div.layout-split-right.folded {
|
|
| 237 |
margin-left: 190px ;
|
|
| 288 |
&:first-child {
|
|
| 289 |
border-top: 2px @gray solid ;
|
|
| 238 | 290 |
} |
| 239 | 291 |
} |
| 240 | 292 |
|
| 293 |
// Top/1st Level |
|
| 294 |
.s0 {
|
|
| 295 |
padding: 0 ; |
|
| 296 |
background-color: #cccccc ; |
|
| 297 |
color: @gray-darker; |
|
| 298 |
border-bottom: 1px @gray solid ; |
|
| 299 |
font-size: 90% ; |
|
| 300 |
text-transform: uppercase; |
|
| 301 |
|
|
| 302 |
a {
|
|
| 303 |
padding: 5px 0 6px 8px ; |
|
| 304 |
|
|
| 305 |
&:hover, |
|
| 306 |
&:active{
|
|
| 307 |
background-color: @gray ; |
|
| 308 |
color: #000 ; |
|
| 309 |
} |
|
| 310 |
&:link, |
|
| 311 |
&:visited { color: @gray-mediumdark ; }
|
|
| 312 |
} |
|
| 241 | 313 |
|
| 314 |
&.menu-open{
|
|
| 315 |
font-weight: bold; |
|
| 316 |
background-color: @gray-dark ; |
|
| 317 |
color: #fff ; |
|
| 242 | 318 |
|
| 319 |
a {
|
|
| 320 |
padding: 5px 0 6px 8px ; |
|
| 243 | 321 |
|
| 322 |
&:hover, |
|
| 323 |
&:active{
|
|
| 324 |
background-color: #000 ; |
|
| 325 |
color: #fff ; |
|
| 326 |
} |
|
| 327 |
&:link, |
|
| 328 |
&:visited { color: #fff ; }
|
|
| 329 |
} |
|
| 330 |
} |
|
| 244 | 331 |
|
| 245 |
// types of lines: m sm i (menu submenu item) |
|
| 246 |
// each line is a mi (menuitem) |
|
| 247 |
// - and has one mii (menu-item-icon) |
|
| 248 |
// - which is ms (menu-spacer) |
|
| 249 |
// - and one mic (menu-item-chunk) |
|
| 250 |
// - indenting is done with the levels s0, s1, s2 |
|
| 251 |
|
|
| 252 |
// Menu |
|
| 253 |
div.m {
|
|
| 254 |
height: 24px ; |
|
| 332 |
} // /.s0 |
|
| 255 | 333 |
|
| 256 |
span.ms {
|
|
| 257 |
float: left; |
|
| 258 |
width: 32px |
|
| 259 |
} |
|
| 260 |
&:hover {
|
|
| 261 |
//color:blue; |
|
| 262 |
background-color: #d1d1d1; |
|
| 263 |
cursor: pointer; |
|
| 264 |
} |
|
| 265 |
} |
|
| 334 |
// 2nd level |
|
| 335 |
.s1{
|
|
| 336 |
font-size: 80% ; |
|
| 337 |
padding: 2px 0 3px 8px ; |
|
| 338 |
background-color: @gray-verylight ; |
|
| 339 |
padding: 0 ; |
|
| 340 |
border-top: 1px #bfbfbf solid ; |
|
| 266 | 341 |
|
| 267 |
// Submenu |
|
| 268 |
div.sm {
|
|
| 269 |
font-weight: bold; |
|
| 342 |
a {
|
|
| 343 |
padding: 4px 0 3px 8px ; |
|
| 270 | 344 |
|
| 271 |
span.ms {
|
|
| 272 |
float: left; |
|
| 273 |
width: 24px; |
|
| 274 |
background: url("../image/unterpunkt.png");
|
|
| 345 |
&:hover, |
|
| 346 |
&:active{
|
|
| 347 |
background-color: #D5D5D5 ; |
|
| 348 |
color: #000 ; |
|
| 349 |
} |
|
| 350 |
&:link, |
|
| 351 |
&:visited { color: @gray-mediumdark ; }
|
|
| 275 | 352 |
} |
| 276 |
} |
|
| 277 | 353 |
|
| 278 |
// Item |
|
| 279 |
div.i {
|
|
| 280 |
span.ms {
|
|
| 281 |
float: left; |
|
| 282 |
width: 24px; |
|
| 283 |
margin-bottom: 4px; |
|
| 354 |
// has submenu (has 3rd-Level menu) |
|
| 355 |
&.sm{
|
|
| 356 |
&:after{
|
|
| 357 |
content: "▼" ; |
|
| 358 |
color: @gray ; |
|
| 359 |
font-size: 80% ; |
|
| 360 |
} |
|
| 361 |
a {
|
|
| 362 |
display: inline-block ; |
|
| 363 |
width: 162px; // with scrollbar{ display:none; } 174px is possible, works only with ::-webkit-scrollbar
|
|
| 364 |
color: @gray ; |
|
| 365 |
|
|
| 366 |
&:hover, |
|
| 367 |
&:active{
|
|
| 368 |
background-color: @gray-verylight ; |
|
| 369 |
color: #999 ; |
|
| 370 |
text-decoration: none ; |
|
| 371 |
} |
|
| 372 |
&:link, |
|
| 373 |
&:visited { color: @gray-mediumdark ; }
|
|
| 374 |
|
|
| 375 |
&.ml:link, |
|
| 376 |
&.ml:visited{ color: @gray ; }
|
|
| 377 |
} |
|
| 284 | 378 |
} |
| 285 |
&:hover {
|
|
| 286 |
//color:blue; |
|
| 287 |
background-color: #d1d1d1; |
|
| 288 |
cursor: pointer; |
|
| 379 |
& > .s2:last-child { border-bottom: 1px #bfbfbf solid }
|
|
| 380 |
} // /.s1 |
|
| 381 |
|
|
| 382 |
// 3rd & last level |
|
| 383 |
.s2{
|
|
| 384 |
padding: 0 ; |
|
| 385 |
font-size: 80% ; |
|
| 386 |
background-color: @gray-morelighter ; |
|
| 387 |
|
|
| 388 |
a {
|
|
| 389 |
padding: 2px 0 3px 20px ; |
|
| 390 |
|
|
| 391 |
&:hover, |
|
| 392 |
&:active{
|
|
| 393 |
background-color: #BCBCBC ; |
|
| 394 |
color: #000 ; |
|
| 395 |
} |
|
| 396 |
&:link, |
|
| 397 |
&:visited { color: @gray-mediumdark ; }
|
|
| 289 | 398 |
} |
| 290 |
} |
|
| 291 |
|
|
| 292 | 399 |
|
| 293 |
// Menu-Item |
|
| 294 |
div.mi {
|
|
| 295 |
margin-top: 4px; |
|
| 296 |
margin-bottom: 3px; |
|
| 297 |
white-space: nowrap; |
|
| 298 |
clear:both; |
|
| 299 |
position:relative; |
|
| 300 |
} |
|
| 301 | 400 |
|
| 401 |
} // /.s2 |
|
| 302 | 402 |
|
| 303 |
// Menu-Item-Chunk |
|
| 304 |
span.mic {
|
|
| 305 |
white-space: normal; |
|
| 306 |
display: inline-block; |
|
| 307 |
vertical-align: top; |
|
| 308 |
line-height: 1.2; |
|
| 309 |
} |
|
| 403 |
} // /#html-menu |
|
| 310 | 404 |
|
| 311 |
// Indention |
|
| 312 |
div.s0 { padding-left: 2px ; }
|
|
| 313 |
div.s1 { padding-left: 8px ; }
|
|
| 314 |
div.s2 { padding-left: 22px ; }
|
|
| 315 | 405 |
|
| 316 | 406 |
|
| 317 |
img { vertical-align: top; border: 0; }
|
|
| 407 |
// -------------------- |
|
| 408 |
// DHTML-MENU (TOP WITH ICONS) |
|
| 409 |
// -------------------- |
|
| 318 | 410 |
|
| 319 |
a {
|
|
| 320 |
vertical-align: top ; |
|
| 411 |
#main_menu_div {
|
|
| 321 | 412 |
|
| 322 |
.ml {
|
|
| 323 |
span.mic { width: 145px } // fix deep indents
|
|
| 324 |
} |
|
| 413 |
.DHTMLSuite_menuBar_top {
|
|
| 414 |
top: 30px; |
|
| 325 | 415 |
} |
| 326 | 416 |
|
| 327 |
} // /#html-menu |
|
| 328 |
|
|
| 329 |
|
|
| 330 |
|
|
| 331 |
// PENDENT: ??? |
|
| 332 |
li.sub {
|
|
| 333 |
position: relative; |
|
| 334 |
left: 0.2em; |
|
| 335 |
top: 0px; |
|
| 336 |
background-color: #FFFFFF; |
|
| 337 | 417 |
} |
| 418 |
.DHTMLSuite_menuBar_sub {
|
|
| 419 |
width: auto !important; |
|
| 420 |
padding: 0.1em 0 0.4em 0.4em !important; |
|
| 338 | 421 |
|
| 422 |
.DHTMLSuite_menuItem_sub_regular{
|
|
| 423 |
//display: table-row ; |
|
| 424 |
//vertical-align: middle ; |
|
| 425 |
a.DHTMLSuite_menuItem_textContent{
|
|
| 426 |
//display: table-cell; |
|
| 427 |
//font-size: @font-size-small ; |
|
| 339 | 428 |
|
| 340 |
|
|
| 341 |
|
|
| 342 |
|
|
| 343 |
// -------------------------------------- |
|
| 344 |
// HTML-MENU (Overrides) |
|
| 345 |
// -------------------------------------- |
|
| 346 |
|
|
| 347 |
#layout-split-left {
|
|
| 348 |
width: 180px ; |
|
| 349 |
margin-top: 20px ; |
|
| 350 |
padding: 0 0 0 0 ; |
|
| 351 |
height: 100% ; |
|
| 352 |
overflow: hidden; |
|
| 353 |
display: block ; |
|
| 354 |
|
|
| 355 |
#html-menu {
|
|
| 356 |
// Every menu item |
|
| 357 |
.mi {
|
|
| 358 |
a.ml {
|
|
| 359 |
width: 180px !important; |
|
| 360 |
// Icon |
|
| 361 |
.mii {
|
|
| 362 |
display: none; |
|
| 363 |
} |
|
| 364 |
.mic {
|
|
| 365 |
width: 180px !important; |
|
| 366 |
display: block; |
|
| 367 |
} |
|
| 368 |
} |
|
| 369 |
// First level menu item |
|
| 370 |
&.s0 {
|
|
| 371 |
border-top: 1px #888 solid ; |
|
| 372 |
padding: 0.5em 0 1.0em 0.7em !important; |
|
| 373 |
display: table-cell; |
|
| 374 |
vertical-align: middle; |
|
| 375 |
letter-spacing: 1.4pt; |
|
| 376 |
} |
|
| 377 |
&.s0 a.ml .mic {
|
|
| 378 |
font-size: 120%; |
|
| 379 |
} |
|
| 380 |
&.s1, |
|
| 381 |
&.s2 {
|
|
| 382 |
padding-top: 0.4em ; |
|
| 383 |
padding-bottom: 0.2em ; |
|
| 384 |
} |
|
| 385 |
&.s2{
|
|
| 386 |
padding-left: 32px ; |
|
| 387 |
} |
|
| 388 |
&.sm .ml .mic{
|
|
| 389 |
font-style: normal; |
|
| 390 |
font-weight: normal; |
|
| 391 |
display: table-cell; |
|
| 392 |
vertical-align: middle; |
|
| 393 |
&:hover{
|
|
| 394 |
color: #000000 ; |
|
| 395 |
} |
|
| 396 |
&:after{
|
|
| 397 |
content: " ▼" ; |
|
| 398 |
color: #808080 ; |
|
| 399 |
font-size: 80% ; |
|
| 400 |
} |
|
| 401 |
} |
|
| 402 | 429 |
} |
| 403 |
} |
|
| 404 |
} |
|
| 405 |
|
|
| 406 |
|
|
| 407 |
#layout-split-right {
|
|
| 408 |
margin-left: 180px ; |
|
| 409 |
#content h1 {
|
|
| 410 |
top: 28px ; |
|
| 411 |
} |
|
| 412 |
#content {
|
|
| 413 |
top: 70px ; |
|
| 414 |
} |
|
| 415 |
.layout-actionbar {
|
|
| 416 |
top: 36px; |
|
| 417 | 430 |
} |
| 418 | 431 |
} |
| 419 | 432 |
|
| 420 | 433 |
|
| 421 | 434 |
|
| 422 |
|
|
| 423 |
|
|
| 424 |
|
|
| 425 |
|
|
Auch abrufbar als: Unified diff
HP Aenderungen bis Oktober 2018