968 lines
14 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* @font-face */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url('../fonts/Lato-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url('../fonts/Lato-Italic.ttf') format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('../fonts/Lato-BoldItalic.ttf') format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url('../fonts/Lato-Regular.ttf') format('truetype');
}
html, body {
background-color: #161616;
color: #C3C3C3;
padding: 0;
margin: 0px;
height: 100%;
font: 16px 'Lato', 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}
form {
margin: 0px;
padding: 0px;
}
/* text styles */
h1,h2,h3,p {
margin-bottom: 20px;
}
h1,h2,h3 {
font-weight: bold;
}
h1 {
margin-top: 15px;
color: #fff;
font-size: 1.875em;
}
h2 {
font-size: 1.375em;
margin-top: 20px;
color: #fff;
}
h3 {
border-bottom: 1px solid #333;
font-size: 1.125em;
}
p {
margin-top: 0px;
}
a {
color: #86D4B1;
}
a.highlight {
color: #fff;
}
.header_right a {
text-decoration: none;
color: #fff;
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
ul {
list-style: disc inside;
}
ol {
list-style: decimal inside;
}
label {
font-weight: normal;
}
input, textarea {
font-size:1em;
font-family:'Lato', sans-serif;
}
/* website structure */
#wrap {
min-height: 100%;
height: auto;
/* This must be equal to the footer height + 5px */
margin-bottom: -35px;
}
#wrap:after {
content: "";
display: block;
}
footer, #wrap:after {
height: 30px;
}
header {
width: 100%;
padding: 0;
margin-bottom: 42px;
border-bottom: 1px solid #333;
}
.header_left {
width: 47%;
margin: 0 0 0 8px;
display: inline-block;
}
.header_right {
width: 47%;
margin: 8px 8px 4px 0;
display: inline-block;
float: right;
text-align: right;
line-height: 1.6em;
}
#header_dropdown {
margin-bottom: 20px;
padding: 0px 10px 0px 10px;
}
#header_dropdown li {
margin: 4px 0;
list-style: none;
}
#header_dropdown p {
margin-top: 12px;
margin-bottom: 10px;
}
.dropdown_title {
font-size: 20px;
}
a.logo {
color: #fff;
font-weight: bold;
}
.logo img {
vertical-align: middle;
margin: 6px 8px 6px 0;
}
.welcomeimage {
float: right;
}
.fine_print {
font-size: 0.8em;
}
.mediagoblin_content {
width: 100%;
padding-bottom: 74px;
}
footer {
width: 100%;
border-top: 1px solid #333;
padding: 8px 0;
text-align: center;
font-size: 0.875em;
clear: both;
}
.thumb_gallery {
margin-left: 10px;
margin-right: 10px;
}
.profile_showcase .thumb_gallery {
margin-left: 0;
margin-right: 0;
}
.media_image_container {
display: flex;
justify-content: center;
}
.media_image {
max-width: 100%;
}
.media_pane {
/* in place for possible future wide view */
/* border-bottom: 1px solid #333333;*/
}
.media_sidebar {
/* in place for possible future wide view */
/* border-left: 1px solid #333333;*/
/* padding-left: 1em;*/
/* padding-top: 1em;*/
}
.media_comments {
padding-top: 1em;
}
/* common website elements */
.button_action, .button_action_highlight, .button_form {
display: inline-block;
color: #c3c3c3;
background-color: #363636;
border: 1px solid;
border-color: #464646 #2B2B2B #252525;
border-radius: 4px;
padding: 3px 8px;
font-size: 16px;
text-decoration: none;
font-style: normal;
font-weight: bold;
cursor: pointer;
}
.button_action_highlight, .button_form {
background-color: #86D4B1;
border-color: #A2DEC3 #6CAA8E #5C9179;
color: #283F35;
}
.button_info {
background-color: #508BB5;
border-color: #5899C7 #437699 #427496;
color: #C3C3C3;
}
.button_warning {
background-color: #8A2D2D;
border-color: #913030 #451717 #431212;
color: #C3C3C3;
}
.button_form {
min-width: 99px;
margin: 10px 0px 10px 15px;
text-align: center;
font-family: 'Lato', sans-serif;
}
.pagination {
text-align: center;
}
.pagination_arrow {
margin: 5px;
}
.empty_space {
background-image: url("../images/empty_back.png");
font-style: italic;
text-align: center;
height: 160px;
padding-top: 70px;
}
.no_background {
background-image: none;
height: 0;
padding-top: 0;
display: inline-block;
}
.right_align {
float: right;
}
.left_align {
float: right;
}
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.hidden {
display: none;
}
.media_sidebar h3 {
font-size: 1em;
margin: 0 0 5px;
border: none;
}
.media_sidebar p {
margin-left: 8px;
}
.alpha {
margin-left:0;
}
.omega {
margin-right:0;
}
.head {
margin-top:0;
}
.foot {
margin-bottom:0;
}
/* forms */
.form_box,.form_box_xl {
background-color: #222;
border-top: 6px solid #D49086;
padding: 3% 5%;
display: block;
float: none;
width: 90%;
max-width: 340px;
margin-left: auto;
margin-right: auto;
}
.form_box_xl {
max-width: 460px;
}
.blog_form_box_xl {
background-color: #222;
border-top: 6px solid #D49086;
padding: 3% 5%;
display: block;
float: none;
width: 90%;
max-width: 800px;
min-height: 500px;
margin-left: auto;
margin-right: auto;
}
.b_listing_title {
height: 30px;
width: 100%;
padding: 0px;
background-color: #86D4B1;
text-transform:capitalize;
text-decoration: none;
#border-radius: 4px;
}
.b_listing_title > a {
text-decoration: none;
}
.b_list_owner {
height: 100px;
width: 100%;
padding: 0em;
margin-right: auto;
background-color: #DDA0DD;
#border-radius: 4px;
text-transform: capitalize;
}
.b_list_des {
text-align:justify;
}
.edit_box {
border-top: 6px dashed #D49086
}
/*.form_field_input input,*/ .form_field_input textarea {
width: 100%;
}
.blog_form_field_input input, .blog_form_field_input textarea {
width: 100%;
}
.form_field_input {
margin-bottom: 10px;
}
.form_field_label {
margin-bottom: 4px;
}
.form_field_label {
font-size:1.125em;
}
.form_field_description {
font-style: italic;
}
.form_field_error {
background-color: #87453b;
color: #fff;
border: none;
padding: 9px;
margin-top: 8px;
margin-bottom: 8px;
}
.form_submit_buttons {
text-align: right;
}
.subform {
margin: 2em;
}
#password_boolean {
margin-top: 4px;
width: 20px;
}
.boolean {
margin-bottom: 8px;
}
textarea#description, textarea#bio {
resize: vertical;
height: 100px;
}
.delete {
margin-top: 36px;
display: block;
text-align: center;
}
/* comments */
.comment_wrapper, .report_wrapper {
margin-top: 20px;
margin-bottom: 20px;
}
.comment_wrapper p, .report_wrapper p {
margin-bottom: 2px;
}
.comment_author, .report_author {
padding-top: 4px;
font-size: 0.9em;
}
a.comment_authorlink, a.report_authorlink {
text-decoration: none;
padding-right: 5px;
font-weight: bold;
padding-left: 2px;
}
a.comment_authorlink:hover, a.report_authorlink:hover {
text-decoration: underline;
}
a.comment_whenlink, a.report_whenlink {
text-decoration: none;
}
a.comment_whenlink:hover, a.report_whenlink:hover {
text-decoration: underline;
}
.comment_content, .report_content {
margin-left: 8px;
margin-top: 8px;
}
.comment_active {
box-shadow: 0px 0px 15px 15px #378566;
background: #378566;
color: #f7f7f7;
}
textarea#comment_content {
resize: vertical;
width: 100%;
height: 90px;
border: none;
background-color: #f1f1f1;
padding: 3px;
}
#form_comment .form_field_input {
padding-right: 6px;
}
a.report_authorlink, a.report_whenlink {
color: #D486B1;
}
ul#action_to_resolve {list-style:none; margin-left:10px;}
/* media galleries */
.media_thumbnail {
float: left;
padding: 0px;
width: 180px;
overflow: hidden;
margin: 0px 3px 10px;
text-align: center;
font-size: 0.875em;
background-color: #222;
border-radius: 0 0 5px 5px;
padding: 0 0 6px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
border-color: #0D0D0D;
border-style: solid;
border-width: 1px 1px 2px;
}
.media_thumbnail a {
color: #eee;
text-decoration: none;
display: block;
}
.media_thumbnail a.remove {
color: #86D4B1;
text-decoration: underline;
}
a.thumb_entry_title {
padding: 8px;
}
/* For now, this is commented out since our thumbnails are actually 180px high.
*
* .media_thumbnail img {
* max-height: 135px;
* }
*/
.thumb_entry_last {
margin-right: 0px;
}
/* media detail */
h2.media_title {
margin-bottom: 0px;
display: inline-block;
}
p.context {
display: inline-block;
padding-top: 4px;
}
p.media_specs {
font-size: 0.9em;
border-top: 1px solid #222;
padding: 10px 0px;
color: #888;
}
.no_html5 {
background: black;
color: white;
text-align: center;
height: 160px;
padding: 130px 10px 20px 10px;
}
a img.media_image {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
/* icons */
img.media_icon {
margin: 0 4px;
vertical-align: sub;
}
/* EXIF information */
#exif_content {
padding-bottom: 20px;
}
#exif_camera_information {
margin-bottom: 20px;
margin-left: 8px;
}
#exif_additional_info_button {
margin-left: 8px;
}
#exif_additional_info {
display: none;
margin-left: 8px;
}
#exif_additional_info table {
font-size: 11px;
margin-top: 10px;
}
#exif_additional_info td {
vertical-align: top;
padding-bottom: 5px;
}
#exif_content .col1 {
padding-right: 20px;
}
#exif_additional_info table tr {
margin-bottom: 10px;
}
/* navigation */
.navigation {
}
.navigation_button {
width: 48%;
display: inline-block;
text-align: center;
background-color: #1d1d1d;
border: 1px solid;
border-color: #2c2c2c #232323 #1a1a1a;
border-radius: 4px;
text-decoration: none;
padding: 4px 0 8px;
margin: 0 0 6px;
}
.navigation_left {
margin-right: 3px;
}
/* messages */
ul.mediagoblin_messages {
list-style: none inside;
color: #f7f7f7;
padding: 0;
}
.mediagoblin_messages li {
margin: 5px 0;
padding: 8px;
text-align: center;
}
.message_success {
background-color: #378566;
}
.message_warning {
background-color: #87453b;
}
.message_error {
background-color: #87453b;
}
.message_info {
background-color: #378566;
}
.message_debug {
background-color: #f7f7f7;
color: #272727;
}
ul.mediaentry_tags {
list-style-type: none;
}
ul.mediaentry_tags li {
display: inline;
margin: 0px 5px 0px 0px;
padding: 0px;
}
/* media processing panel */
table.media_panel {
width: 100%;
}
table.media_panel th {
font-weight: bold;
padding-bottom: 4px;
text-align: left;
}
/* moderator panels */
table.admin_panel {
width: 100%
}
table.admin_side_panel {
width: 90%;
margin-bottom: 10px;
}
table.admin_panel th, table.admin_side_panel th {
font-weight: bold;
padding-bottom: 4px;
text-align: left;
color: #fff;
}
table td.user_with_privilege {
font-weight: bold;
color: #86D4B1;
}
table td.user_without_privilege {
font-weight: bold;
color: #D486B1;
}
.return_to_panel {
text-align:right;
float: right;
font-size:1.2em
}
/* Delete panel */
.delete_checkbox_box {
margin-top: 10px;
margin-left: 10px;
}
/* code of conduct */
#code_of_conduct_list {
margin-left:25px;
margin-bottom: 10px;
}
#code_of_conduct_list li {
margin:5px 0 15px 25px;
}
#code_of_conduct_list strong{
color:#fff;
}
.nested_sublist {
margin: 5px 0 10px 25px;
font-size:80%;
}
.nested_sublist li {
margin-bottom: 10px;
}
/* ASCII art and code */
@font-face {
font-family: Inconsolata;
src: local('Inconsolata'), url('../fonts/Inconsolata.otf') format('opentype')
}
pre, code {
font-family: Inconsolata, monospace;
line-height: 1em;
}
pre {
overflow: auto;
margin-bottom: 20px;
}
.comment_wrapper pre {
margin-bottom: 2px;
}
.ascii-wrapper pre {
/* but it should not affect the ASCII art */
margin: 0;
}
/* Media queries and other responsivisivity */
/* initial GMG max 940 */
@media screen and (max-width: 960px) {
img.media_image {
max-width: 100%;
/* display: inline;*/
}
.media_thumbnail {
/* width: 21%;*/
}
.profile_sidebar {
width: 100%;
margin: 0px;
}
.profile_showcase {
width: 100%;
margin: 0px;
}
.navigation {
float: none;
}
.navigation_button {
float: right;
padding: 10px 0 14px;
}
.navigation_left {
margin-right: 0;
float: left;
}
.button_action, .button_action_highlight, .button_form {
padding: 5px 14px;
margin-bottom: 0.5em;
}
}
/* desktop resolutions */
@media screen and (min-width: 960px) {
.container .three.columns.media_thumbnail {
width:180px;
margin-left:3px;
margin-right:3px;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container .three.columns.media_thumbnail {
width:147px;
margin-left:2px;
margin-right:2px;
}
.media_thumbnail.thumb_entry img {
margin-left: -16.5px;
}
.thumb_gallery {
margin-left: 0;
margin-right: 0;
}
.navigation_button {
}
}
/* All Mobile Sizes (devices and browser) */
@media screen and (max-width: 767px) {
.thumb_row {
margin-bottom: 0;
}
.thumb_gallery {
margin-left: 0;
margin-right: 0;
}
h1,h2,h3,p {
margin-bottom: 10px !important;
}
header {
text-align: center;
}
.header_right {
text-align: center;
}
.welcomeimage {
float: none;
display: inherit;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
}
.media_sidebar {
border-left: none;
padding-left: 0;
padding-top: 1em;
margin-top: 1em;
}
.media_comments {
border-bottom: 1px solid #333333;
}
}
p.verifier {
text-align:center;
font-size:50px;
none repeat scroll 0% 0% rgb(221, 221, 221);
padding: 1em 0px;
}
/* for the media metadata editing table */
table.metadata_editor {
margin: 10px auto;
width: 800px;
}
table.metadata_editor tr td {
width:350px;
}
table.metadata_editor tr td.form_field_input input {
width:350px;
}