Initial commit - Typo3 11.5.41
This commit is contained in:
Matteo Gallo
408
web/css/sm-grey/sm-grey.css
Normal file
408
web/css/sm-grey/sm-grey.css
Normal file
@@ -0,0 +1,408 @@
|
||||
/*
|
||||
---------------------------------------------------------------
|
||||
Note that styles you apply to the main menu items are inherited by the sub menus items too.
|
||||
If you'd like to avoid this, you could use child selectors (not supported by IE6) - for example:
|
||||
.sm-grey > li > a { ... } instead of .sm-grey a { ... }
|
||||
---------------------------------------------------------------*/
|
||||
|
||||
|
||||
/* Menu box
|
||||
===================*/
|
||||
|
||||
|
||||
.sm-grey {
|
||||
|
||||
}
|
||||
|
||||
.sm-grey ul {
|
||||
background:#fff;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.sm-grey ul a {
|
||||
color: #4c75ad;
|
||||
}
|
||||
|
||||
.sm-grey ul a:hover {
|
||||
color: #333;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.sm-grey ul a.current,
|
||||
.sm-grey ul a.current:hover {
|
||||
color: #000;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
|
||||
/* Menu items
|
||||
===================*/
|
||||
|
||||
.sm-grey a {
|
||||
padding:11px 20px;
|
||||
color:#fff;
|
||||
font-size:14px;
|
||||
line-height:17px;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.sm-grey a i {
|
||||
margin-right: 6px;
|
||||
color: #698CA8;
|
||||
font-size: 14px;
|
||||
}
|
||||
.sm-grey a.current i {
|
||||
margin: 0px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sm-grey li {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sm-grey a:hover, .sm-grey a:focus, .sm-grey a:active,
|
||||
.sm-grey a.highlighted {
|
||||
background:#114773;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
/* current items - add the class manually to some item or check the "markCurrentItem" script option */
|
||||
.sm-grey a.current, .sm-grey a.current:hover, .sm-grey a.current:focus, .sm-grey a.current:active {
|
||||
background: #114773; /* Old browsers */
|
||||
color:#fff;
|
||||
font-size:14px;
|
||||
line-height:17px;
|
||||
}
|
||||
|
||||
.sm-grey a.has-submenu {
|
||||
padding-right:32px;
|
||||
}
|
||||
|
||||
.sm-grey ul a.has-submenu,
|
||||
.sm-grey-vertical a.has-submenu {
|
||||
padding-right:23px;
|
||||
}
|
||||
|
||||
|
||||
/* Sub menu indicators
|
||||
===================*/
|
||||
|
||||
.sm-grey a span.sub-arrow {
|
||||
position:absolute;
|
||||
right:12px;
|
||||
top:50%;
|
||||
margin-top:-3px;
|
||||
/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
|
||||
width:0;
|
||||
height:0;
|
||||
overflow:hidden;
|
||||
border-width:4px; /* tweak size of the arrow */
|
||||
border-style:solid dashed dashed dashed;
|
||||
border-color:#fff transparent transparent transparent;
|
||||
}
|
||||
|
||||
.sm-grey-vertical a span.sub-arrow,
|
||||
.sm-grey ul a span.sub-arrow {
|
||||
right:15px;
|
||||
top:50%;
|
||||
margin-top:-5px;
|
||||
border-width:4px;
|
||||
border-style:dashed dashed dashed solid;
|
||||
border-color:transparent transparent transparent #888;
|
||||
}
|
||||
|
||||
.sm-grey a:hover span.sub-arrow {
|
||||
border-width:4px; /* tweak size of the arrow */
|
||||
border-style:solid dashed dashed dashed;
|
||||
border-color:#fff transparent transparent transparent;
|
||||
}
|
||||
|
||||
.sm-grey-vertical a:hover span.sub-arrow,
|
||||
.sm-grey ul a:hover span.sub-arrow {
|
||||
border-width:4px;
|
||||
border-style:dashed dashed dashed solid;
|
||||
border-color:transparent transparent transparent #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Items separators
|
||||
===================*/
|
||||
|
||||
.sm-grey li {
|
||||
border-left:0px solid #d9d9d9;
|
||||
}
|
||||
.sm-grey li:first-child {
|
||||
border-left:0;
|
||||
}
|
||||
.sm-grey ul li,
|
||||
.sm-grey-vertical li {
|
||||
border-left:0;
|
||||
border-top:1px solid #d9d9d9;
|
||||
}
|
||||
.sm-grey ul li:first-child,
|
||||
.sm-grey-vertical li:first-child {
|
||||
border-top:0;
|
||||
}
|
||||
|
||||
|
||||
/* Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." -> "more..." in the default download package
|
||||
===================*/
|
||||
|
||||
.sm-grey span.scroll-up, .sm-grey span.scroll-down {
|
||||
position:absolute;
|
||||
display:none;
|
||||
visibility:hidden;
|
||||
overflow:hidden;
|
||||
border:solid #bbb;
|
||||
border-width:1px 0;
|
||||
background:#fff;
|
||||
height:20px;
|
||||
/* width and position will be automatically set by the script */
|
||||
}
|
||||
.sm-grey span.scroll-up-arrow, .sm-grey span.scroll-down-arrow {
|
||||
position:absolute;
|
||||
top:-2px;
|
||||
left:50%;
|
||||
margin-left:-8px;
|
||||
/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
|
||||
width:0;
|
||||
height:0;
|
||||
overflow:hidden;
|
||||
border-width:8px; /* tweak size of the arrow */
|
||||
border-style:dashed dashed solid dashed;
|
||||
border-color:transparent transparent #555 transparent;
|
||||
}
|
||||
.sm-grey span.scroll-down-arrow {
|
||||
top:6px;
|
||||
border-style:solid dashed dashed dashed;
|
||||
border-color:#555 transparent transparent transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
---------------------------------------------------------------
|
||||
SEARCH
|
||||
---------------------------------------------------------------*/
|
||||
|
||||
.sm-grey .search {
|
||||
border-top:0;
|
||||
float: right;
|
||||
border: 0px;
|
||||
padding-top: 1px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
.sm-grey form {
|
||||
margin: 4px 0px 0px 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.sm-grey fieldset {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.sm-grey input {
|
||||
font-size: 13px;
|
||||
border: 1px solid #ccc;
|
||||
padding: 6px 4px;
|
||||
outline: none;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
color: #777;
|
||||
width: 150px;
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
margin: 0px;
|
||||
margin-left: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
|
||||
.button,
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/*
|
||||
---------------------------------------------------------------
|
||||
Responsiveness
|
||||
These will make the sub menus collapsible when the screen width is too small.
|
||||
---------------------------------------------------------------*/
|
||||
|
||||
@media screen and (min-width: 767px) and (max-width: 960px) {
|
||||
|
||||
.sm-grey input {
|
||||
width: 60px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.sm-grey li:first-child a i {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.sm-grey a i {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sm-grey a.current i {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* #Mobile (Portrait)
|
||||
================================================== */
|
||||
|
||||
@media screen and (min-width: 320px) and (max-width: 767px) {
|
||||
|
||||
/* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */
|
||||
ul.sm-grey{width:auto !important; border: 0px;}
|
||||
ul.sm-grey ul{display:none;position:static !important;top:auto !important;left:auto !important;margin-left:0 !important;margin-top:0 !important;width:auto !important;min-width:0 !important;max-width:none !important; }
|
||||
ul.sm-grey>li{float:none; border: 1px solid #306b9c;}
|
||||
ul.sm-grey>li>a,ul.sm-grey ul.sm-nowrap>li>a{white-space:normal;}
|
||||
ul.sm-grey iframe{display:none;}
|
||||
|
||||
/* Uncomment this rule to disable completely the sub menus for small screen devices */
|
||||
/*.sm-grey ul, .sm-grey span.sub-arrow, .sm-grey iframe {
|
||||
display:none !important;
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
/* Menu box
|
||||
===================*/
|
||||
|
||||
.sm-grey ul {
|
||||
border:0;
|
||||
/* darken the background of the sub menus */
|
||||
/*background:rgba(100,100,100,0.1);*/
|
||||
background-color: #fff;
|
||||
-moz-box-shadow:none;
|
||||
-webkit-box-shadow:none;
|
||||
box-shadow:none;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
|
||||
/* Menu items
|
||||
===================*/
|
||||
|
||||
.sm-grey a {
|
||||
padding-top:13px;
|
||||
padding-bottom:13px;
|
||||
/*background:transparent !important;*/
|
||||
color:#fff;
|
||||
background-color: #195586;
|
||||
}
|
||||
|
||||
.sm-grey ul {
|
||||
background:#fff;
|
||||
/*border: 1px solid #d9d9d9;*/
|
||||
}
|
||||
|
||||
.sm-grey ul a {
|
||||
color: #4c75ad;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.sm-grey ul a.current,
|
||||
.sm-grey ul a.current:hover {
|
||||
color: #000;
|
||||
background-color: #f8f8f8 !important;
|
||||
}
|
||||
|
||||
|
||||
.sm-grey a.current {
|
||||
color:#fff;
|
||||
background: #114773 !important; /* Old browsers */
|
||||
}
|
||||
|
||||
.sm-grey a.has-submenu {
|
||||
padding-right:23px;
|
||||
}
|
||||
/* add some text indentation for the 2+ level sub menu items */
|
||||
.sm-grey ul a {
|
||||
border-left:8px solid transparent;
|
||||
}
|
||||
.sm-grey ul ul a {
|
||||
border-left:16px solid transparent;
|
||||
}
|
||||
.sm-grey ul ul ul a {
|
||||
border-left:24px solid transparent;
|
||||
}
|
||||
.sm-grey ul ul ul ul a {
|
||||
border-left:32px solid transparent;
|
||||
}
|
||||
.sm-grey ul ul ul ul ul a {
|
||||
border-left:40px solid transparent;
|
||||
}
|
||||
|
||||
|
||||
/* Sub menu indicators
|
||||
===================*/
|
||||
|
||||
.sm-grey a span.sub-arrow {
|
||||
right:auto;
|
||||
margin-left:-14px;
|
||||
}
|
||||
/* Hide sub indicator when item is expanded - we enable the item link when it's expanded */
|
||||
.sm-grey a.highlighted span.sub-arrow {
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
|
||||
/* Items separators
|
||||
===================*/
|
||||
|
||||
.sm-grey li {
|
||||
border-left:0;
|
||||
border-top:1px solid rgba(0,0,0,0.05) !important;
|
||||
}
|
||||
.sm-grey li:first-child {
|
||||
border-top:0 !important;
|
||||
border-left:1px solid #306b9c !important;
|
||||
}
|
||||
|
||||
.sm-grey ul li:first-child {
|
||||
border-top:0 !important;
|
||||
border-left:1px solid #ffffff !important;
|
||||
}
|
||||
|
||||
.sm-grey ul li {
|
||||
border-top:1px solid #d9d9d9 !important;
|
||||
}
|
||||
|
||||
.sm-grey .search {
|
||||
text-align: left !important;
|
||||
padding-left: 0px;
|
||||
margin: 10px 0px 10px 10px;
|
||||
border: 0px !important;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.sm-grey .search form {
|
||||
text-align: left !important;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.sm-grey input {
|
||||
width: 200px;
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
margin: 0px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user