(15 intermediate revisions by 3 users not shown) | |||
Line 204: | Line 204: | ||
background:#8A2BE2; | background:#8A2BE2; | ||
} | } | ||
+ | |||
+ | .table-scrollable { | ||
+ | width: 100%; | ||
+ | overflow-y: auto; | ||
+ | margin: 0 0 1em; | ||
+ | } | ||
+ | |||
+ | .table-scrollable::-webkit-scrollbar { | ||
+ | -webkit-appearance: none; | ||
+ | width: 14px; | ||
+ | height: 14px; | ||
+ | } | ||
+ | |||
+ | .table-scrollable::-webkit-scrollbar-thumb { | ||
+ | border-radius: 8px; | ||
+ | border: 3px solid #fff; | ||
+ | background-color: rgba(0, 0, 0, .3); | ||
+ | } | ||
+ | |||
.contentbox p, .contentbox .pdf-resources, .contentbox .excel-resources, .contentbox ul, .contentbox ol, .contentbox .read-more { | .contentbox p, .contentbox .pdf-resources, .contentbox .excel-resources, .contentbox ul, .contentbox ol, .contentbox .read-more { | ||
display: block; | display: block; | ||
Line 290: | Line 309: | ||
transition: .5s; | transition: .5s; | ||
width: 200px; | width: 200px; | ||
− | margin-left: calc(100% - | + | margin-left: calc(100% - 220px); |
} | } | ||
Line 512: | Line 531: | ||
} | } | ||
− | nav ul a:hover, nav ul li:hover .dropbtn{ | + | nav ul a:hover, nav ul li:hover .dropbtn, .show .dropbtn{ |
background-color: var(--logo-pink); | background-color: var(--logo-pink); | ||
box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1); | box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1); | ||
Line 524: | Line 543: | ||
} | } | ||
− | nav ul li:hover .nav-dropdown { | + | nav ul li:hover .nav-dropdown, .show .nav-dropdown { |
display: block; | display: block; | ||
box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1); | box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1); | ||
Line 575: | Line 594: | ||
box-shadow: 0 3px 6px rgba(0,0,0,0.25),0 6px 16px rgba(0,0,0,0.05); | box-shadow: 0 3px 6px rgba(0,0,0,0.25),0 6px 16px rgba(0,0,0,0.05); | ||
height: 45px; | height: 45px; | ||
+ | } | ||
+ | |||
+ | @media (pointer: coarse) { | ||
+ | .dropbtn span { | ||
+ | padding-top: 26px; | ||
+ | padding-bottom: 26px; | ||
+ | margin-top: -26px; | ||
+ | margin-bottom: -26px; | ||
+ | padding-left: 10px; | ||
+ | padding-right: 10px; | ||
+ | } | ||
+ | .dropbtn span:after { | ||
+ | transform: rotate(-90deg); | ||
+ | display: inline-block; | ||
+ | font-weight: bold; | ||
+ | font-family: var(--headfont); | ||
+ | content: '\2039'; | ||
+ | } | ||
} | } | ||
Line 638: | Line 675: | ||
height: 210px; | height: 210px; | ||
border-radius: 105px; | border-radius: 105px; | ||
− | background: | + | background: rgb(28, 20, 68); |
box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1); | box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1); | ||
z-index: 3; | z-index: 3; | ||
Line 699: | Line 736: | ||
text-align: center; | text-align: center; | ||
width: 100%; | width: 100%; | ||
− | |||
position: absolute; | position: absolute; | ||
} | } | ||
Line 982: | Line 1,018: | ||
width: 100%; | width: 100%; | ||
box-shadow: none; | box-shadow: none; | ||
− | |||
} | } | ||
Line 998: | Line 1,033: | ||
.navbar { | .navbar { | ||
display: none; | display: none; | ||
+ | } | ||
+ | |||
+ | nav ul a:hover, nav ul li:hover .dropbtn, .show .dropbtn{ | ||
+ | height: 70px; | ||
+ | } | ||
+ | |||
+ | a.active, nav ul li.active .dropbtn{ | ||
+ | height: 70px; | ||
} | } | ||
Line 1,017: | Line 1,060: | ||
.view { | .view { | ||
width: 400px; | width: 400px; | ||
− | height: | + | height: 450px; |
− | + | ||
float: left; | float: left; | ||
overflow: hidden; | overflow: hidden; | ||
Line 1,039: | Line 1,081: | ||
} | } | ||
.view h2 { | .view h2 { | ||
− | |||
color: #fff; | color: #fff; | ||
text-align: center; | text-align: center; | ||
Line 1,063: | Line 1,104: | ||
background: #000; | background: #000; | ||
color: #fff; | color: #fff; | ||
− | |||
} | } | ||
.view a.info:hover { | .view a.info:hover { | ||
Line 1,111: | Line 1,151: | ||
92% { transform: translateY(-12px);} | 92% { transform: translateY(-12px);} | ||
55%, 75%, 87%, 97%, 100% { transform: translateY(0px);} | 55%, 75%, 87%, 97%, 100% { transform: translateY(0px);} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 23:25, 15 December 2017