diff options
Diffstat (limited to 'templates/fluid/styles.css')
| -rw-r--r-- | templates/fluid/styles.css | 757 |
1 files changed, 757 insertions, 0 deletions
diff --git a/templates/fluid/styles.css b/templates/fluid/styles.css new file mode 100644 index 0000000..547ff6f --- /dev/null +++ b/templates/fluid/styles.css @@ -0,0 +1,757 @@ +@import url(fonts.css); + +html, body { + margin-top: 0; + margin-bottom: 0; + padding: 0; + height: 100%; + background: #000000; +} + +/* for the footer to stay down */ +div.content-wrapper { + min-height: 100%; + position: relative; +} + +div.content { + padding: 15px; +} + +div.content div.title { + padding-top: 50px; + font-weight: 600; + font-family: 'Hind', sans-serif; + font-size: 46px; + color: #EEEEEE; +/* text-shadow: rgba(240, 230, 199, 0.5) 0 0 2px; */ +} + +/* Size buttons tend to show color frame in Firefox */ +a:active, a:visited { + color: rgba(0, 255, 0, 0); +} + +div.content div.title a, +div.content div.text a, +div.photo div.photo-title a, +div.photo div.photo-text a, +div.interspace a, +div.separator a, +div.albums div.footnote a { + color: #CCCCCC; + text-decoration: underline; + transition-property: color, text-shadow; + transition-duration: 0.5s; +} + +div.content div.title a:hover, +div.content div.text a:hover, +div.photo div.photo-title a:hover, +div.photo div.photo-text a:hover, +div.interspace a:hover, +div.separator a:hover, +div.albums div.footnote a:hover { + color: #D0D0D0; + text-decoration: underline; + text-shadow: 0 0 4px rgba(240, 230, 220, 1.0); +} + +div.content div.text { + padding-top: 15px; + padding-left: 25px; + padding-right: 50px; + padding-bottom: 50px; + font-family: 'Open Sans', sans-serif; + font-size: 14px; + color: #C3C3C3; +} + + +/******************************* NAVIGATION *******************************/ + +div.navigation { + font-size: 14px; + font-family: 'Open Sans', sans-serif; + background-color: rgba(50, 50, 50, 1.0); + color: #E0E0E0; + white-space: nowrap; + overflow: hidden; +} + +div.navigation div.navbar { + position: fixed; + z-index: 100; + top: 0; + left: 0; + line-height: 36px; + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7); + border-right: 1px solid rgba(100, 100, 100, 1.0); + border-bottom: 1px solid rgba(100, 100, 100, 1.0); + border-bottom-right-radius: 6px; + -moz-border-radius: 0 0 6px 0; + -webkit-border-radius: 0 0 6px 0; + box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4); + -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4); + -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4); + background: linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -webkit-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -moz-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -o-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + transition: box-shadow 0.3s; +} + +div.navigation div.navbar:hover { + box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); + -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); + -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); +} + +div.navigation div.nav-right { + position: fixed; + z-index: 100; + top: 0; + right: 0; + padding: 8px; + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7); + border-left: 1px solid rgba(100, 100, 100, 1.0); + border-bottom: 1px solid rgba(100, 100, 100, 1.0); + border-bottom-left-radius: 6px; + -moz-border-radius: 0 0 0 6px; + -webkit-border-radius: 0 0 0 6px; + box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4); + -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4); + -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4); + background: linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -webkit-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -moz-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -o-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + transition: box-shadow 0.3s; +} + +div.navigation div.nav-right:hover { + box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); + -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); + -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); +} + +/* The following navbar code is a heavily modified example from + * http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation + * Copyright 2014 TheCodePlayer. All Rights Reserved. + */ +div.navbar a { + text-decoration: none; + float: left; + color: white; + padding: 0 8px 0 27px; + position: relative; +} + +div.navbar .nav-current { + float: left; + color: #CACACA; + padding: 0 14px 0 4px; +} + +div.navbar:hover .nav-current, +div.navbar .nav-current.av { + padding-left: 27px; +} + +div.navbar .nav-current.nav-root, +div.navbar:hover .nav-current.nav-root { + padding-left: 12px; +} + +div.navbar .nav-hidden, +div.navbar:hover .nav-revhidden { + display: none; +} + +div.navbar .nav-revhidden, +div.navbar:hover .nav-hidden { + display: inline; +} + +div.navbar a:first-child { + padding-left: 12px; +} + +div.navbar a:hover { + background: linear-gradient(top, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%); + background: -webkit-linear-gradient(top, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%); + background: -moz-linear-gradient(top, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%); + background: -o-linear-gradient(top, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%); +} + +div.navbar a:hover:after { + background: linear-gradient(325deg, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%) !important; + background: -webkit-linear-gradient(325deg, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%) !important; + background: -moz-linear-gradient(325deg, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%) !important; + background: -o-linear-gradient(325deg, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%) !important; +} + +div.navbar a:nth-child(n+2):after, +div.navbar:hover a:first-child:after, +div.navbar a.av:after { + content: ''; + position: absolute; + top: 0; + right: -17px; + width: 34px; + height: 34px; + transform: scale(0.707) rotate(45deg); + -webkit-transform: scale(0.707) rotate(45deg); + -moz-transform: scale(0.707) rotate(45deg); + -o-transform: scale(0.707) rotate(45deg); + z-index: 2; + background: linear-gradient(325deg, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -webkit-linear-gradient(325deg, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -moz-linear-gradient(325deg, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -o-linear-gradient(325deg, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1); + -webkit-box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1); + -moz-box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1); + border-radius: 0 5px 0 50px; + -webkit-border-radius: 0 5px 0 50px; + -moz-border-radius: 0 5px 0 50px; +} + +div.navbar a .vert-sep { + display: inline-block; + position: absolute; + top: 6px; + right: 6px; + width: 1px; + height: 23px; + background-image: linear-gradient(top, rgba(120, 120, 120, 1.0) 35%, rgba(50, 50, 50, 1.0) 100%); + background-image: -webkit-linear-gradient(top, rgba(120, 120, 120, 1.0) 35%, rgba(50, 50, 50, 1.0) 100%); + background-image: -moz-linear-gradient(top, rgba(120, 120, 120, 1.0) 35%, rgba(50, 50, 50, 1.0) 100%); + background-image: -o-linear-gradient(top, rgba(120, 120, 120, 1.0) 35%, rgba(50, 50, 50, 1.0) 100%); + background-repeat: no-repeat; +} + +/* navbar icons */ +div.navbar i.fa { + font-size: 24px; + opacity: 0.7; + transition: opacity 0.3s; +} + +div.navbar:hover a i.fa { + opacity: 1.0; +} + +div.navbar i.fa-home { + position: relative; + top: 2px; +} + + +/******************************* FOOTER ***********************************/ + +div.footer { + clear: both; + position: absolute; + bottom: 0; + width: 100%; + text-align: center; + padding-top: 5px; + padding-bottom: 16px; + font-size: 13px; + font-family: 'Open Sans', sans-serif; + line-height: 1.4; + color: #A0A0A0; +} + +div.footer a { + color: #CCCCCC; + text-decoration: none; + transition-property: color, text-shadow; + transition-duration: 0.5s; +} + +div.footer a:hover { + color: #D0D0D0; + text-decoration: underline; + text-shadow: 0 0 4px rgba(240, 230, 220, 1.0); +} + +div.footer hr { + margin-left: 150px; + margin-right: 150px; + border: 0; + height: 1px; + background-image: linear-gradient(left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75) 25%, rgba(128, 128, 128, 0.75) 75%, rgba(128, 128, 128, 0)); + background-image: -webkit-linear-gradient(left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75) 25%, rgba(128, 128, 128, 0.75) 75%, rgba(128, 128, 128, 0)); + background-image: -moz-linear-gradient(left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75) 25%, rgba(128, 128, 128, 0.75) 75%, rgba(128, 128, 128, 0)); + background-image: -o-linear-gradient(left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75) 25%, rgba(128, 128, 128, 0.75) 75%, rgba(128, 128, 128, 0)); +} + +div.footer i.fa { + padding-right: 3px; +} + + +/******************************* BUTTONS **********************************/ + +div.buttons { + position: fixed; + overflow: hidden; + bottom: 30px; + left: 30px; + z-index: 1; + font-size: 13px; + box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3); + -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3); + -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3); + border: solid 1px rgba(100, 100, 100, 1.0); + border-radius: 3px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + transition: box-shadow 0.3s; +} + +div.buttons:hover { + box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.45); + -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.45); + -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.45); +} + +div.buttons a { + width: 30px; + height: 30px; + text-decoration: none; + white-space: nowrap; + position: relative; + float: left; + background-color: #404040; + background: linear-gradient(top, rgba(70, 70, 70, 1.0) 15%, rgba(5, 5, 5, 1.0) 100%); + background: -webkit-linear-gradient(top, rgba(70, 70, 70, 1.0) 15%, rgba(5, 5, 5, 1.0) 100%); + background: -moz-linear-gradient(top, rgba(70, 70, 70, 1.0) 15%, rgba(5, 5, 5, 1.0) 100%); + background: -o-linear-gradient(top, rgba(70, 70, 70, 1.0) 15%, rgba(5, 5, 5, 1.0) 100%); + border-right: solid 1px rgba(90, 90, 90, 1.0); +} + +div.buttons a:last-child { + border-right: none; +} + +div.buttons a i.fa { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + color: white; + text-align: center; + vertical-align: middle; + line-height: 30px; + opacity: 0.3; + transition: opacity 0.3s; +} + +div.buttons a i.fa.small { + font-size: 80%; +} + +div.buttons a i.fa.big { + font-size: 120%; +} + +div.buttons a i.fa.active { + opacity: 0.75; +} + +div.buttons a:hover i.fa { + opacity: 1.0; + text-shadow: 0 0 4px rgba(240, 230, 199, 0.8); +} + + +/******************************* IMAGES ***********************************/ + +.position_marker { + position: relative; + top: -100px; +} + +div.photos { + text-align: center; + padding-bottom: 50px; +} + +div.photos div.photo { + margin-top: 60px; + margin-bottom: 80px; + display: inline-block; + text-align: left; +} + +div.photo img { + display: block; + margin-bottom: 4px; +} + +div.photo div.photo-title { + font-family: 'Open Sans', sans-serif; + text-align: center; + color: #E0E0E0; + font-size: 17px; + float: left; + display: block; + margin-top: 4px; + margin-bottom: 4px; +} + +div.photo a.exif-icon { + text-decoration: none; + float: right; + display: block; + color: #EEEEEE; + padding-right: 2px; + padding-top: 2px; + padding-bottom: 4px; + opacity: 0.3; + transition-property: opacity, text-shadow; + transition-duration: 0.3s; +} + +div.photo a.exif-icon:hover { + opacity: 1.0 !important; + text-shadow: 0 0 4px rgba(240, 230, 199, 0.8); +} + +div.photo div.photo-text { + font-family: 'Open Sans', sans-serif; + color: #B0B0B0; + font-size: 13px; + clear: both; + margin-top: 3px; + margin-bottom: 3px; +} + +div.photo div.photo-exif { + display: none; + clear: both; + margin-top: 7px; + margin-bottom: 2px; + background: #303030; +} + +/* this is nested in order to have the parent div fully expanded according + to the image width (including variable border size) */ +div.photo div.photo-exif-sub { + font-family: 'Open Sans', sans-serif; + color: #CCCCCC; + font-size: 13px; + padding-top: 4px; + padding-bottom: 4px; +} + +div.photo div.photo-exif-sub .seg { + padding-left: 10px; + padding-right: 12px; + display: inline-block; + white-space: nowrap; + line-height: 1.7; + transition: color 0.3s; +} + +div.photo div.photo-exif-sub .seg:last-child { + padding-right: 3px; +} + +div.photo div.photo-exif-sub .seg i.fa { + padding-right: 5px; +} + +div.photo div.photo-exif-sub .seg:hover { + color: #E0E0E0; +} + +div.photo div.photo-exif-sub a { + color: #D0D0D0; + text-decoration: none; + transition-property: color, text-shadow; + transition-duration: 0.5s; +} + +div.photo div.photo-exif-sub a:hover { + color: #E0E0E0; + text-decoration: underline; + text-shadow: 0 0 4px rgba(240, 230, 220, 1.0); +} + + +/*************************** IMAGE BORDER STYLES **************************/ + +div.photo img#border_single { + border: solid 1px rgb(128, 128, 128); +} + +div.photo img#border_none { +} + +div.photo img#frame_black { + background-color: #909090; + padding: 1px; + border: 20px solid black; +} + +div.photo img#frame_white { + background-color: #444444; + padding: 1px; + border: 20px solid white; +} + +div.photo img#frame_black_horiz { + background-color: #A0A0A0; + padding: 1px 0 1px 0; + border-top: 35px solid black; + border-bottom: 35px solid black; +} + +div.photo img#frame_white_horiz { + background-color: #444444; + padding: 1px 0 1px 0; + border-top: 35px solid white; + border-bottom: 35px solid white; +} + +div.photo img#frame_black_vert { + background-color: #A0A0A0; + padding: 0 1px 0 1px; + border-left: 40px solid black; + border-right: 40px solid black; +} + +div.photo img#frame_white_vert { + background-color: #444444; + padding: 0 1px 0 1px; + border-left: 40px solid white; + border-right: 40px solid white; +} + +div.photo img#border_black { + border: 15px solid black; +} + +div.photo img#border_white { + border: 15px solid white; +} + + +/******************************* SEPARATORS *******************************/ + +div.separator { + clear: both; + text-align: left; + font-variant: small-caps; + font-family: 'Open Sans', sans-serif; + font-size: 32px; + color: #EEEEEE; +/* text-shadow: rgba(240, 230, 199, 0.6) 0 0 2px; */ + margin-top: 50px; + margin-left: 20px; + margin-right: 50px; + border-bottom: 1px solid #606060; +} + +div.albums div.separator { + padding-top: 40px; + margin-left: 0; + margin-right: 10px; +} + +div.interspace { + clear: both; + text-align: left; + margin-left: 30px; + margin-right: 60px; + margin-top: 10px; + font-family: 'Open Sans', sans-serif; + font-size: 14px; + color: #CACACA; +} + +div.albums div.interspace { + padding-bottom: 35px; + margin-left: 15px; + margin-right: 20px; +} + +div.albums div.footnote { + clear: both; + text-align: left; + padding-bottom: 35px; + padding-top: 10px; + margin-left: 15px; + margin-right: 20px; + font-family: 'Open Sans', sans-serif; + font-size: 14px; + color: #CACACA; +} + + +/******************************* INDEX ITEMS ******************************/ + +div.albums { + text-align: left; +} + +div.index_item { + display: block; + overflow: hidden; + float: left; + margin: 20px; + border-radius: 8px; + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + border: 1px solid #6b6c69; + background-position: 50% 50%; + background-repeat: no-repeat; + box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3); + -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3); + -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3); + transition-property: box-shadow; + transition-duration: 0.3s; +} + +div.index_item:hover { + border: 1px solid #AAAAAA; + box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); + -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); + -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); +} + +div.index_item a { + display: block; + position: relative; + width: 495px; + height: 330px; + text-align: left; + text-decoration: none; + background: linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); + background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); + background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); + background: -o-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); + transition-property: background; + transition-duration: 0.3s; +} + +div.index_item a:hover { + background: linear-gradient(top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); + background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); + background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); + background: -o-linear-gradient(top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); +} + +div.index_item span.album_text { + font-family: 'Hind', sans-serif; + font-size: 34px; + font-weight: 700; + color: #F3F3F3; + text-shadow: 0 0 2px rgba(0, 0, 0, 1); + position: absolute; + bottom: 55px; + left: 15px; + line-height: 1.1; + padding-right: 15px; + transition-property: text-shadow, color; + transition-duration: 0.3s; +} + +div.index_item a:hover .album_text { + color: #FFFFFF; +} + +div.index_item .album_subtext { + font-family: 'Open Sans', sans-serif; + font-size: 15px; + color: #D0D0D0; + text-shadow: 0 0 1px rgba(0, 0, 0, 0.7); + position: absolute; + top: 277px; + left: 15px; + padding-right: 15px; + line-height: 1.3; + transition-property: color; + transition-duration: 0.3s; +} + +div.index_item:hover .album_subtext { + color: #E9E9E9; +} + +div.index_item .album_note { + font-family: 'Open Sans', sans-serif; + font-size: 11px; + color: #B0B0B0; + text-shadow: 0 0 1px rgba(0, 0, 0, 0.7); + position: absolute; + right: 12px; + bottom: 10px; +} + +div.index_item .album_protected_note { + font-family: 'Open Sans', sans-serif; + color: #c8bc00; + font-size: 80%; + position: absolute; + bottom: 7px; + left: 15px; +} + + +/****************************** PHOTOSTREAM *******************************/ + +.photostream-force-show { + visibility: visible !important; +} +.photostream-force-hide { + visibility: hidden !important; +} + +.photostream-hide { +} + +#photostream-close { + position: fixed; + z-index: 100; + top: 10px; + right: 15px; + font-size: 32px; + text-decoration: none; + color: #EEEEEE; + opacity: 0.4; + transition-property: opacity, text-shadow; + transition-duration: 0.3s; +} + +#photostream-close:hover { + text-shadow: 0 0 7px rgba(240, 230, 199, 0.8); + opacity: 1; +} + +#photostream-position-label { + position: fixed; + z-index: 101; + bottom: 15px; + right: 15px; + font-family: 'Open Sans', sans-serif; + font-weight: 600; + font-size: 12px; + text-decoration: none; + color: #EEEEEE; + opacity: 0.5; + transition-property: opacity, text-shadow; + transition-duration: 0.3s; +} + +#photostream-position-label:hover { + opacity: 1; + text-shadow: 0 0 7px rgba(240, 230, 199, 0.4); +} + |
