Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
cu-links/style.css
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
401 lines (325 sloc)
8.05 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background-image: url('https://hpc.coventry.domains/test/CU_logo.png'),linear-gradient(#2c5da9, #000000); /* CU logo */ | |
background-repeat: no-repeat; | |
background-attachment: fixed; | |
background-position: right top; | |
/*background-color: #2c5da9;*/ | |
color:#cccccc; | |
font-family:"Segoe UI Light","Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif; | |
margin: 0px; | |
position:absolute; | |
overflow-x: hidden; | |
width:100%; | |
} | |
html, body { | |
height: 100%; margin:0px;box-sizing: border-box; | |
} | |
/* spacer */ | |
.empty {width:0px;height:100px;border:none;position:inline} | |
.footer, .footer > a { | |
width:100%;height:20px; | |
border:none; | |
position:inline; | |
color: #80b3ff; | |
font-weight: 100; | |
font-size:xx-small; | |
font-family: 'Raleway'; | |
text-shadow: 2px 2px 4px #000000; | |
} | |
/* links */ | |
a {color:#ffffff;text-decoration: none;font-family: Helvetica; font-size:10pt;vertical-aligm:middle;} | |
/* outer div with background picture */ | |
.bodydiv { | |
height:inherit; | |
min-height: 100vh; | |
width:100%; | |
text-align: center; | |
z-index:1; | |
background-repeat: no-repeat; | |
background-attachment: fixed; | |
background-position: left bottom; | |
position: relative; | |
} | |
.bodydiv::before { | |
content: ""; | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height:inherit; | |
min-height: 100vh; | |
opacity: .2; | |
z-index: -1; | |
background: url('https://hpc.coventry.domains/test/bg.jpeg'); /* background photo */ | |
} | |
/* forms */ | |
input:hover {opacity:100%;} | |
input {transition: all .2s;} | |
input[type=text], select { | |
opacity:0.5; | |
width: 30%; | |
padding: 8px 12px; | |
margin: 8px 0; | |
display: inline-block; | |
border: 1px solid #0047b3; | |
border-radius: 6px;outline:none; | |
box-sizing: border-box; | |
background-color:#80b3ff; | |
} | |
form { | |
font-size:small; | |
} | |
.google { /* google button */ | |
width: 100px; | |
/*background-color: #1d4b8f;*/ | |
color: white; | |
padding: 8px 12px; | |
margin: 8px 0; | |
border: none; | |
border-radius: 6px; | |
cursor: pointer; | |
background-image: url('https://hpc.coventry.domains/test/googlelogo.png'); | |
background-repeat: no-repeat; | |
background-position: center; | |
background-origin: border-box; | |
/* border:solid #122d59 1px; */ | |
opacity:0.65; | |
border-collapse:separate; | |
border-radius:20px; | |
background-color: rgba(255,255,255,0.15); | |
} | |
.duck { /* DuckDuckGo button */ | |
width: 30px; | |
/*background-color: #1d4b8f;*/ | |
color: white; | |
padding: 8px 12px; | |
margin: 8px 0; | |
border: none; | |
border-radius: 12px; | |
cursor: pointer; | |
background-image: url('https://hpc.coventry.domains/test/duck.png'); | |
background-repeat: no-repeat; | |
background-position: center; | |
background-origin: border-box; | |
/* border:solid #122d59 1px; */ | |
opacity: 0.65; | |
border-collapse:separate; | |
border-radius:20px; | |
background-color: rgba(255,255,255,0.25); | |
} | |
input[type=submit]:hover, input[type=button]:hover { | |
/*background-color: #003380;*/ | |
opacity: 1; | |
transform: scale(1.2); | |
background-color: rgba(25,113,167,0.3); | |
} | |
::-moz-selection { /* Code for Firefox */ | |
color: red; | |
background: #ffffff; | |
} | |
::selection { | |
color: red; | |
background: #ffffff; | |
} | |
input[type=button] { | |
background-color: #1d4b8f; | |
color: white; | |
padding: 4px 4px; | |
margin: 4px 0; | |
border: none; | |
border-radius: 6px; | |
cursor: pointer; | |
font-size:large; | |
} | |
/******** form css ends ***********/ | |
/***** main container ******/ | |
.maintable { | |
max-width: calc(80% - 40px); | |
display: flex; | |
flex-wrap: wrap; | |
text-align: left; | |
border:solid #162E54 0px; | |
border-radius:30px; | |
background: rgba(0,0,0,0); | |
justify-content: left; | |
/*justify-content: space-between;*/ | |
padding-top: 0px; | |
padding-bottom:40px; | |
padding-right:0px; | |
padding-left:0px; | |
box-sizing: border-box; | |
row-gap: -10px; | |
column-gap: 0; | |
margin: 0px -20px 30px -20px; | |
} | |
/****** text in each tile *******/ | |
.caption { | |
transition: all 1s; | |
vertical-align: middle; | |
font-size: 10pt; | |
width:100%; | |
opacity: 1; | |
color: #dddddd; | |
transition: color .25s; | |
text-shadow: 2px 2px 4px #000000; | |
position: relative; | |
bottom: 0; | |
} | |
/****** caption of the groups ********/ | |
.groupcaption { | |
position: relative; | |
top: 20px; | |
left:0px; | |
height:15px; | |
display: inline-block; | |
background: rgba(0,0,0,0.3); | |
border-collapse:separate; | |
border-radius:16px 16px 0 0; | |
padding-top:12px; | |
padding-left:15px; | |
padding-right:15px; | |
color: #80b3ff; /* blue */ | |
/*color:#91ff00; /* yellow */ | |
font-weight: 100; | |
font-size: normal; | |
font-family: 'Raleway'; | |
text-shadow: 2px 2px 4px #000000; | |
/*box-shadow: 3px 3px 15px 3px black; | |
clip-path: inset(-25px -25px -0px -25px);*/ | |
/*z-index:-1;*/ | |
} | |
.groupcaptiontext { | |
display: inline-block; | |
position:relative; | |
top: -8px; | |
} | |
/***** group container ******/ | |
.groups { | |
background: rgba(0,0,0,0.3); | |
text-align: center; | |
vertical-align: middle; | |
align-items:left; | |
/*z-index:-1; */ | |
margin: 0px; | |
margin-top:20px; | |
border-collapse:separate; | |
border-radius:0px 20px 20px 20px; | |
/*border: 1px solid #000000;*/ | |
width: 100%; | |
color: #dddddd; | |
display: flex; | |
/*justify-content: left;*/ | |
justify-content: space-between; | |
padding-top: 25px; | |
padding-bottom:20px; | |
padding-right:20px; | |
padding-left:20px; | |
box-sizing: border-box; | |
row-gap: 25px; | |
column-gap: 20px; | |
flex-wrap:wrap; | |
/*box-shadow:3px 3px 15px 3px black;*/ | |
/*clip-path: inset(0px -25px -25px -25px);*/ | |
} | |
.no_tab_group { | |
background: rgba(0,0,0,0.3); | |
text-align: center; | |
vertical-align: middle; | |
align-items:left; | |
margin: 0px; | |
margin-top:20px; | |
border-collapse:separate; | |
border-radius:20px; | |
/*border: 1px solid #000000;*/ | |
width: 100%; | |
color: #dddddd; | |
display: flex; | |
justify-content: left; | |
justify-content: space-between; | |
padding-top: 20px; | |
padding-bottom:20px; | |
padding-right:20px; | |
padding-left:20px; | |
box-sizing: border-box; | |
row-gap: 25px; | |
column-gap: 20px; | |
flex-wrap:wrap; | |
box-shadow:3px 3px 15px 3px black; | |
} | |
/* tiles */ | |
.tiles { | |
transition: all .25s; | |
background: rgba(255,255,255,0.25); | |
text-align: center; | |
vertical-align: middle; | |
align-items:center; | |
padding: 0 auto; | |
margin: 0px; | |
border-collapse:separate; | |
border-radius:20px; | |
min-width:130px; | |
max-height:110px; | |
min-height: 80px; | |
height:110px; | |
color:#dddddd; | |
display: flex; | |
justify-content: center; | |
flex-wrap: nowrap; | |
scale: 1; | |
/*flex: 1 0 calc(20% - 10px);*/ | |
box-shadow:3px 3px 15px 3px black; | |
} | |
.tiles:hover { | |
transform: scale(1.25); | |
background: rgba(25,113,167,0.3); | |
color:#91ff00; | |
border-radius:10px; | |
box-shadow:3px 3px 15px 5px rgba(255,255,255,.7); | |
} | |
/* inside the tile */ | |
.innertile { | |
vertical-align: middle; | |
max-height:100px; | |
max-width:100px; | |
min-width:95%; | |
display:block; | |
justify-content: center; | |
border: 0px solid #ffffff; | |
padding:1px 1px 1px 1px; | |
} | |
/* change opacity of icon when hovering on innertile */ | |
.innertile:hover .icons { | |
opacity: 1; | |
} | |
/* pictures on tiles */ | |
.icons { | |
max-height:70px;max-width:80%; | |
border:0px solid #ffffff; | |
vertical-align: middle; | |
margin: 2px; | |
opacity: 0.6; | |
transition: all 0.8s ease-in-out; | |
} | |
.icons:hover { | |
max-height:70px;max-width:80%; | |
border:0px solid #ffffff; | |
vertical-align: middle; | |
margin: 2px; | |
opacity: 1; | |
transform: scale(1.15); | |
} | |
.innertile:hover .caption { | |
color:#91ff00; | |
} | |
/* mobile css */ | |
@media screen and (max-width: 1280px) { | |
.maintable { | |
max-width: 95%; | |
/* row-gap: 30px; | |
column-gap: 3%;*/ | |
background: rgba(0,0,0,0.0); | |
} | |
.tiles { | |
background: rgba(255,255,255,0.25); | |
} | |
} |