Difference between revisions of "Template:Tartu TUIT/style"
| Line 16: | Line 16: | ||
cursor: pointer; } | cursor: pointer; } | ||
| − | .cols::after, .header::after, #process .content::after, #molecule .map .card::after, .notebook .images-two::after, .notebook .images-height::after, .notebook .event .details::after, .clearfix::after { | + | .cols::after, header.header::after, #process .content::after, #molecule .map .card::after, .notebook .images-two::after, .notebook .images-height::after, .notebook .event .details::after, .clearfix::after { |
content: ''; | content: ''; | ||
display: table; | display: table; | ||
clear: both; } | clear: both; } | ||
| − | .cols, .header .menu, .header .menu .submenu { | + | .cols, header.header .menu, header.header .menu .submenu { |
list-style-type: none; | list-style-type: none; | ||
padding: 0; | padding: 0; | ||
| Line 165: | Line 165: | ||
color: #dde5ee; } | color: #dde5ee; } | ||
| − | .header { | + | header.header { |
padding-top: 18px; | padding-top: 18px; | ||
background-color: #181e33; | background-color: #181e33; | ||
| Line 175: | Line 175: | ||
top: 0; | top: 0; | ||
z-index: 200; } | z-index: 200; } | ||
| − | .header .logo { | + | header.header .logo { |
background-color: #181e33; | background-color: #181e33; | ||
display: block; | display: block; | ||
| Line 184: | Line 184: | ||
padding: 7px; | padding: 7px; | ||
height: 80px; } | height: 80px; } | ||
| − | .header .logo img { | + | header.header .logo img { |
height: 100%; | height: 100%; | ||
width: auto; } | width: auto; } | ||
| − | .header .menu li { | + | header.header .menu li { |
cursor: default; | cursor: default; | ||
white-space: nowrap; } | white-space: nowrap; } | ||
| − | .header .menu > li { | + | header.header .menu > li { |
position: relative; } | position: relative; } | ||
| − | .header .menu .submenu { | + | header.header .menu .submenu { |
display: none; } | display: none; } | ||
| − | .header .menu .submenu a { | + | header.header .menu .submenu a { |
display: block; } | display: block; } | ||
| − | .header .nav-button { | + | header.header .nav-button { |
display: none; | display: none; | ||
height: 80px; | height: 80px; | ||
| Line 204: | Line 204: | ||
top: 18px; | top: 18px; | ||
width: 80px; } | width: 80px; } | ||
| − | .header .nav-button i { | + | header.header .nav-button i { |
background-color: #dde5ee; | background-color: #dde5ee; | ||
height: 2px; | height: 2px; | ||
| Line 214: | Line 214: | ||
transition: background-color 0.3s 0s; | transition: background-color 0.3s 0s; | ||
width: 30px; } | width: 30px; } | ||
| − | .header .nav-button i::before, .header .nav-button i::after { | + | header.header .nav-button i::before, header.header .nav-button i::after { |
background-color: #dde5ee; | background-color: #dde5ee; | ||
backface-visibility: hidden; | backface-visibility: hidden; | ||
| Line 223: | Line 223: | ||
transition: transform 0.3s 0s; | transition: transform 0.3s 0s; | ||
width: 100%; } | width: 100%; } | ||
| − | .header .nav-button i::before { | + | header.header .nav-button i::before { |
transform: translateY(-8px); } | transform: translateY(-8px); } | ||
| − | .header .nav-button i::after { | + | header.header .nav-button i::after { |
transform: translateY(8px); } | transform: translateY(8px); } | ||
| − | .header.sticky { | + | header.header.sticky { |
position: fixed; | position: fixed; | ||
top: 0; | top: 0; | ||
| Line 239: | Line 239: | ||
@media (min-width: 769px) { | @media (min-width: 769px) { | ||
| − | .header .navigation { | + | header.header .navigation { |
position: relative; | position: relative; | ||
z-index: 200; | z-index: 200; | ||
| Line 246: | Line 246: | ||
font-size: 18px; | font-size: 18px; | ||
font-weight: 400; } | font-weight: 400; } | ||
| − | .header .menu { | + | header.header .menu { |
width: 40%; } | width: 40%; } | ||
| − | .header .menu > li { | + | header.header .menu > li { |
float: left; | float: left; | ||
height: 80px; } | height: 80px; } | ||
| − | .header .menu > li > span { | + | header.header .menu > li > span { |
color: #dde5ee; | color: #dde5ee; | ||
line-height: 80px; | line-height: 80px; | ||
padding: 0px 20px; } | padding: 0px 20px; } | ||
| − | .header .menu > li .submenu { | + | header.header .menu > li .submenu { |
position: absolute; | position: absolute; | ||
top: 80px; | top: 80px; | ||
| Line 263: | Line 263: | ||
z-index: -1; | z-index: -1; | ||
min-width: 200px; } | min-width: 200px; } | ||
| − | .header .menu > li .submenu a { | + | header.header .menu > li .submenu a { |
color: #dde5ee; | color: #dde5ee; | ||
padding: 15px 20px; | padding: 15px 20px; | ||
text-decoration: none; } | text-decoration: none; } | ||
| − | .header .menu > li .submenu a:hover { | + | header.header .menu > li .submenu a:hover { |
background-color: rgba(80, 177, 190, 0.1); } | background-color: rgba(80, 177, 190, 0.1); } | ||
| − | .header .menu > li:hover { | + | header.header .menu > li:hover { |
background-color: rgba(80, 177, 190, 0.1); } | background-color: rgba(80, 177, 190, 0.1); } | ||
| − | .header .menu > li:hover .submenu { | + | header.header .menu > li:hover .submenu { |
display: block; } | display: block; } | ||
| − | .header .menu-left { | + | header.header .menu-left { |
float: left; } | float: left; } | ||
| − | .header .menu-left .submenu { | + | header.header .menu-left .submenu { |
left: 0; } | left: 0; } | ||
| − | .header .menu-right { | + | header.header .menu-right { |
float: right; } | float: right; } | ||
| − | .header .menu-right > li { | + | header.header .menu-right > li { |
float: right; } | float: right; } | ||
| − | .header .menu-right .submenu { | + | header.header .menu-right .submenu { |
right: 0; } } | right: 0; } } | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
| − | .header .nav-button { | + | header.header .nav-button { |
display: block; } | display: block; } | ||
| − | .header .navigation { | + | header.header .navigation { |
background-color: #181e33; | background-color: #181e33; | ||
border-top: 2px solid #50b1be; | border-top: 2px solid #50b1be; | ||
| Line 304: | Line 304: | ||
z-index: 100; | z-index: 100; | ||
padding-top: 10px; } | padding-top: 10px; } | ||
| − | .header .menu > li > span { | + | header.header .menu > li > span { |
padding: 0 20px; | padding: 0 20px; | ||
line-height: 60px; | line-height: 60px; | ||
display: block; } | display: block; } | ||
| − | .header .menu .submenu { | + | header.header .menu .submenu { |
background-color: rgba(80, 177, 190, 0.1); } | background-color: rgba(80, 177, 190, 0.1); } | ||
| − | .header .menu .submenu a { | + | header.header .menu .submenu a { |
padding: 0 30px; | padding: 0 30px; | ||
line-height: 60px; | line-height: 60px; | ||
color: #dde5ee; } | color: #dde5ee; } | ||
| − | .header .menu .menu-item-branch .label::before { | + | header.header .menu .menu-item-branch .label::before { |
content: '+'; | content: '+'; | ||
padding-right: 10px; } | padding-right: 10px; } | ||
| − | .header .menu .menu-item-branch.open .label::before { | + | header.header .menu .menu-item-branch.open .label::before { |
content: '-'; } | content: '-'; } | ||
| − | .header .menu .menu-item-branch.open .submenu { | + | header.header .menu .menu-item-branch.open .submenu { |
display: block; } | display: block; } | ||
.nav-shown { | .nav-shown { | ||
| Line 739: | Line 739: | ||
text-decoration: none; | text-decoration: none; | ||
padding: 20px; } | padding: 20px; } | ||
| + | |||
</style> | </style> | ||
Revision as of 23:45, 17 October 2018