* { border: 0px none; font-family: inherit; font-style: inherit; font-weight: inherit; font-size: inherit; margin: 0px; outline: 0px none; padding: 0px; vertical-align: baseline; text-size-adjust: none; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; } HTML { font-family: 'Noto Sans',sans-serif; font-weight: normal; font-size: 16px; } @media (min-resolution: 150dpi) and (orientation: landscape) { html { font-size: 16px; } } @media (min-resolution: 150dpi) and (orientation: portrait) { html { font-size: 20px; } } @media (min-resolution: 250dpi) and (orientation: landscape) { html { font-size: 22px; } } @media (min-resolution: 250dpi) and (orientation: portrait) { html { font-size: 32px; } } H1, H2, H3, H4, H5, H6 { font-family: 'Raleway',sans-serif; font-weight: 300; } UL { list-style: none outside none; } INPUT, TEXTAREA, SELECT, BUTTON { padding: 0.5ex 0.5em; border: 0px none; border-radius: 2px; line-height: 1.5; color: #999999; background-color: #161616; box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.5); } INPUT[type=submit] { font-weight: bold; } INPUT[type=submit], INPUT[type=reset], INPUT[type=button], BUTTON { cursor: pointer; box-shadow: none; } INPUT[type=submit]:hover, INPUT[type=reset]:hover, INPUT[type=button]:hover, BUTTON:hover { color: #66AADD; } FIELDSET { margin-bottom: 3ex; line-height: 2.0; } FIELDSET > LEGEND { margin-bottom: 0.5ex; text-transform: uppercase; } FIELDSET > UL { padding: 0.5ex 1em; font-size: 0.9rem; } FIELDSET INPUT[type=radio], INPUT[type=checkbox] { display: none; } BODY { color: #777777; background-color: #212121; } A { color: #AAAAAA; text-decoration: none; } A:hover { color: #66AADD; text-decoration: none; border: none; } /****************************************************************/ /* THE HEADER */ /****************************************************************/ HEADER { display: block; } #theHeader { width : 100%; overflow: auto; background-color: #2B2B2B; border-bottom: 1px dashed #4D4D4D; z-index: 4; } #theHeader H1 { display: inline-block; margin: 0ex 1em; padding: 1ex 1em; font-size: 1.4rem; } #theHeader .searchbar, #theHeader .navbar { display: inline-block; margin: 0ex 1em; padding: 0.5ex 1em; font-size: 1.0rem; text-align: center; text-transform: uppercase; } #theHeader .searchbar A { display: inline-block; } #theHeader .searchbox { display: inline-block; visibility: hidden; margin: 0ex 0.5em; z-index: 2; } #theHeader .searchbox INPUT { font-size: 0.8rem; border: solid 1px #66AADD; } #theHeader .searchbar:hover > .searchbox { visibility: visible; } #theHeader .navbar { float: right; } /****************************************************************/ /* THE LEFT MENU */ /****************************************************************/ #menuSwitcher { position: absolute; padding: 0.5ex; color: #AAAAAA; cursor: pointer; } #menuSwitcher I { font-size: 1.4rem; } #menuSwitcher:hover { color: #66AADD; } #menubar { display: none; flex: 0 1 20%; width: 20%; min-width: 8em; max-width: 16em; margin: 0em; padding: 4ex 2em; background-color: #212121; font-size: 1.0rem; } /*** Menu CSS driven opening/closing ***/ @media (min-width: 480px) and (orientation: landscape) { #menuSwitcher { color: #555555; } #menubar { display: block; } } /*** Menu JS driven opening/closing ***/ #menuSwitcher.close { color: #AAAAAA; } #menubar.close { display: none; } #menuSwitcher.open { color: #555555; } #menubar.open { display: block; } #menubar DL { margin-bottom: 4ex; padding: 0em; } #menubar DT { margin-bottom: 2ex; overflow: hidden; font-size: 1.1rem; font-weight: bold; text-overflow: ellipsis; text-align: left; text-transform: uppercase; } #menubar UL { margin: 0ex; padding: 0ex; list-style: none outside none; } #menubar LI { margin: 0.8ex 0em; overflow: hidden; text-overflow: ellipsis; word-wrap: nowrap; white-space: nowrap; } .totalImages { font-size: 0.9rem; } #quickconnect DIV { width: 100%; margin: 0.5ex 0em; } #quickconnect #username, #quickconnect #password { width: 100%; box-sizing: border-box; } #quickconnect > FIELDSET > LEGEND { margin: 0ex; /*font-size: 0.8rem;*/ text-transform: uppercase; } /****************************************************************/ /* CONTENTS OF INDEX PAGE */ /****************************************************************/ #mainBox { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; background-color: #1A1A1A; } #contentBox { flex: 1 1 auto; padding-bottom: 2ex; } #content, .content { width: 100%; } #the_page .stuffs { margin: 0ex !important; padding: 0ex 0em 2ex 0em !important; } #the_page .left_block { margin: 0ex !important; } .titrePage { margin: 3ex 2em; text-transform: uppercase; } .titrePage H2 { font-size: 1.5rem; border-bottom: solid 1px #212121; } .categoryActions { font-size: 0.9rem; font-weight: normal; text-transform: uppercase; } .categoryActions LI { display: inline-block; padding-right: 1.0em; vertical-align: text-bottom; } .switchBox { display: none; position: absolute; padding: 1ex 2em 3ex 1em; font-size: 0.8rem; text-align: left; line-height: 1.5; background-color: #333333; z-index: 100; } .switchOpen { background-color: #333333; } .calendarViews { float: right; margin: 0ex 2em; padding-right: 0.5em; font-size: 0.8rem; } .calendarTitle, .calendarBar { margin: 1ex 2em; font-size: 1.0rem; } .calendarBar { display: flex; flex-flow: row nowrap; align-items: center; } .prevCal, .nextCal { flex: 1 0 auto; } .navbarItems { flex: 1 1 auto; width: 100%; padding: 0ex 1em; } .calendarCalBar { display: flex; padding: 3ex 2em; border-style: solid none; border-width: 2px; border-color: #212121; } .calCalHead { flex: 0 0 auto; width: 9em; font-weight: 900; } .calCalItems { flex: 1 1 auto; } .calItem, .calCal { padding-right: 1em; white-space: nowrap; } .calMonth { margin: 2ex auto; border-collapse: collapse; } .calMonth TH { padding: 1ex 1em; background-color: #2b2b2b; } .calDayCellFull, .calDayCellEmpty { font-size: 1.4rem; font-weight: 400; vertical-align: top; border: solid 1px #212121; } .calBackDate { position: absolute; padding: 0.6ex 0.6em; z-index: 2; font-weight: 900; vertical-align: top; color: #222222; } .calForeDate { position: absolute; padding: 0.5ex 0.5em; z-index: 3; font-weight: 900; vertical-align: top; color: #999999; } .thumbnails, .thumbnailsCategories { display: flex; flex-flow: row wrap; justify-content: left; list-style: none; } .thumbnails LI { position: relative; flex-grow: 1; height: auto; } .thumbPhoto { display: block; width: 100%; max-width: 100%; height: auto; } .thumbLegend { position: absolute; bottom: 0%; width: 100%; padding: 1ex 0em; font-size: 0.7rem; line-height: 1.2; } .thumbLegend P { margin: 0.8ex 0em; } .thumbLegend SPAN { padding: 0ex 1em; box-decoration-break: clone; color: #AAAAAA; background-color: rgba(17, 17, 17, 0.5); line-height: 1.4; } .thumbnails LI:hover .thumbLegend SPAN { color: #EEEEEE } .thumbName { text-transform: uppercase; } .thumbnailsCategories LI { position: relative; flex: 0 1 auto; } .thumbnailsCategories DIV { position: absolute; top: 20%; width: 100%; padding: 2ex 1em; box-sizing: border-box; color: #CCCCCC; background-color: rgba(17, 17, 17, 0.5); } .thumbnailsCategories H3 { font-size: 1.2rem; margin-bottom: 0.5ex; } .thumbnailsCategories P { font-size: 0.9rem; } .thumbnailsCategories .Nb_images { font-size: 0.8rem; } .thumbnailsCategories A { color: #EEEEEE } .thumbnailsCategories A:hover { color: #66aadd } .thumbnailsCategories LI:hover P { color: #EEEEEE } .coverCategory { display: block; width: 100%; } .errors { padding: 2ex 2em; color: #EEEEEE; background-color: #C84B4B; font-size: 1.1rem; } .infos { padding: 2ex 2em; color: #DDDDDD; background-color: #328F41; font-size: 1.1rem; font-weight: bold; } .warnings { padding: 2ex 2em; color: #333333; background-color: #e0e072; font-size: 1.0rem; } .warnings A { color: #333333; font-weight: bold } #copyright { padding: 1ex 1em; font-size: 0.8rem; } /***** Plugins **************************************************/ #content > FIELDSET { margin: 2ex 2em; } .download-links { margin-bottom: 2ex; } .download-links a img { display: none; } .download-links a:before { content:"\f019"; font-family:FontAwesome; } .download-links li.warning { color:#999999; font-weight: normal; font-size: 1.0rem } a.cancel-down { padding: 1ex 1em; color: #CCCCCC; background-color: #C84B4B; font-weight: normal; border: none; } a.cancel-down:hover { color: #FFFFFF; } ### Community #uploadProgress, #photosAddContent > FIELDSET { width: auto !important; margin: 2ex 2em !important; } #photosAddContent p.showFieldset { width: auto !important; margin: 2ex 0em !important; } #uploadForm { font-size: 0.9rem; } #uploadForm LEGEND { font-size: 1.0rem; } #uploadForm > FIELDSET { width: auto !important; margin: 2ex 0em !important; } #uploadForm > FIELDSET INPUT, #uploadForm > FIELDSET SELECT { float: none; } #uploadWarningsSummary, #uploadModeInfos { margin: 1ex 1em !important; font-size: 0.8rem !important; white-space: nowrap !important; } #addUploadBox > A:before { content:"\f067\ "; font-family:FontAwesome; } .plupload_filelist, .plupload_filelist_header, .plupload_filelist_footer { border: none !important; color: #999999 !important; background-color: #161616 !important; } .plupload_filelist { box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.5); } /****************************************************************/ /* IMAGE PAGE */ /****************************************************************/ #theImage { position: relative; overflow: hidden; text-align: center; background-color: #1A1A1A; } #theBackImage { z-index: 3; position: relative; width: 100%; max-height: 100vh; background-position: center; background-size: contain; background-repeat: no-repeat; cursor: grab; } #theMainImage { display: block; width: 100%; height: auto; visibility: hidden; } .navBackThumb { z-index: 0; display: flex; align-items: center; color: #333333; } .navThumb { z-index: 6; } .navThumb, .navBackThumb { position: absolute; top: 0%; width: 5%; height: 100%; font-size: 2.0rem; } #prevThumb, #prevBackThumb { left: 0%; } #nextThumb, #nextBackThumb { right: 0%; } .linkThumb { display: flex; visibility: hidden; width: 100%; height: 100%; align-items: center; color: #CCCCCC; text-shadow: 0.2ex 0.2em #1A1A1A; } #linkPrev, #prevBackThumb { justify-content: flex-start; } #linkNext, #nextBackThumb { justify-content: flex-end; } .linkThumb > *, .navBackThumb > * { margin: 0.5em; } .navThumb:hover .linkThumb { visibility: visible; } /***** Image Info **************************************************/ #imageCard { padding: 0ex 2em; background-color: #212121; border: solid 1px transparent; } #slideshow { position: relative; } #imageHeaderBar { margin: 3ex auto; font-weight: 400; text-transform: uppercase; } #slideshow > #imageHeaderBar { position: absolute; bottom: 0%; left: 0%; padding: 0ex 2em; z-index: 12; color: #DDDDDD; text-shadow: 1px 1px rgba(0, 0, 0, 0.5); } #imageToolBar { font-size: 0.9rem; } #imageToolBar > LI, #imageToolBar > DIV { display: inline-block; vertical-align: text-bottom; padding-right: 1em; } #slideshow > #imageToolBar { position: absolute; bottom: 0%; right: 0%; padding: 2ex 2em; z-index: 15; text-shadow: 1px 1px rgba(0, 0, 0, 0.5); } #slideshow .imageNumber { color: #AAAAAA; } .browsePath { font-family: 'Raleway',sans-serif; font-weight: 300; font-size: 1.5rem; } .browsePath > H2 { display: inline-block; } .browsePath .fa-stop-circle { margin-left: 1em; margin-right: 0.5em; } .additional_info { margin: 1ex 2em; font-size: 1.0rem; } #InfosAndComments { margin: 2ex auto; } #InfosAndComments > * { vertical-align: top; } .imageComment { margin-bottom: 2ex; } #imageInfos, #MetadataBox { display: inline-block; max-width: 16em; margin-right: 2em; margin-bottom: 2ex; text-align: left; } .imageInfoTable { font-size: 1.0rem; } .imageInfoTable > DIV { margin-bottom: 1ex; } .imageInfoTable DT { font-weight: 900; text-transform: uppercase; } .licIcons { font-size: 1.0rem; } .licIcons IMG { vertical-align: text-bottom; } .navigationBar { margin: 1ex 1em; font-size: 1.0rem; } .navigationBar > .pageNumberSelected { padding: 0ex 0.5em; font-weight: bold; } .navigationBar > A { padding: 0ex 0.5em; } .rateButton, .rateButtonStarFull, .rateButtonStarEmpty { cursor: pointer; } .rateButtonSelected { font-weight: bold; } .rateButtonStarFull { color: red; background-color: blue; background: url(icon/star_font_awesome.svg) no-repeat center left; background-size: contain; } .rateButtonStarEmpty { color: red; background-color: blue; background: url(icon/star_empty_font_awesome.svg) no-repeat center left; background-size: contain; } /****************************************************************/ /* TAGS PAGE */ /****************************************************************/ .tagLevel1 { font-weight:200; font-size: 0.9rem; white-space: nowrap; } .tagLevel2 { font-weight:300; font-size: 1.0rem; white-space: nowrap; } .tagLevel3 { font-weight:400; font-size: 1.1rem; white-space: nowrap; } .tagLevel4 { font-weight:700; font-size: 1.3rem; white-space: nowrap; } .tagLevel5 { font-weight:900; font-size: 1.5rem; white-space: nowrap; } #fullTagCloud, #menuTagCloud { font-family: 'Raleway',sans-serif; text-align: left; } #fullTagCloud { margin: 0ex 2em; } #menuTagCloud { margin: 0ex 0em; } #fullTagCloud > SPAN, #menuTagCloud > SPAN { margin-right: 0.5em; } #tagLetterList { display: flex; flex-flow: row wrap; justify-content: space-between; align-content: flex-start; margin: 2ex 2em; } .tagLetter { flex: 0 0 auto; width: 10em; padding: 1ex 1em; } .tagLetterLegend { margin: 1ex 1em; font-weight: bold; font-size: 1.2rem; border-bottom: solid 1px #333333; } .tagLetterContent { width: 100%; font-size: 0.9rem; } .nbEntries { float: right; padding: 0ex 0.5em; } /****************************************************************/ /* SEARCH PAGE */ /****************************************************************/ .filter { margin: 0ex 2em; } .filter > FIELDSET { display: inline-block; margin-right: 2em; } .filter > * { vertical-align: top } .radioLab, .checkLab { cursor: pointer; } .radioLab:before { padding-right: 0.5em; font-family:FontAwesome; content:"\f10c"; } .checkLab:before { padding-right: 0.5em; font-family:FontAwesome; content:"\f096"; } INPUT[type=radio]:checked + LABEL.radioLab:before { content:"\f111"; } INPUT[type=checkbox]:checked + LABEL.checkLab:before { content:"\f0c8"; } .selectize-input, .selectize-input > INPUT { padding: 0.5ex 0.5em; border: 0px none; border-radius: 2px; font-size: 1.0rem; line-height: 1.5; color: #999999; background-color: #161616; box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.5); } .selectize-dropdown { padding: 0.5ex 0.5em; border: 0px none; border-radius: 0px; font-size: 0.9rem; } .date_today { font-size: 0.8rem; } .date_arrow { font-size: 1.5rem; text-align: center; } #srchRulesInfo, .search_results { margin: 2ex 2em; } #srchRulesInfo > UL { padding: 1ex 1em; font-size: 0.9rem; line-height: 1.5; list-style-type: circle; } /****************************************************************/ /* COMMENTS */ /****************************************************************/ #commentsBox { margin: 3ex 0em; } .commentsList { display: flex; flex-flow: row wrap; } #pictureCommentList > .commentsList { flex-flow: column nowrap; } .commentElement { flex-grow: 1; flex-shrink: 0; margin-bottom: 2ex; } .commentElement IMG { width: 100%; height: auto; } .description { margin: 0ex 1em; padding: 0.5ex 0.5em; border-radius: 2px; background-color: #161616; font-size: 0.8rem; } #pictureCommentList .description { background-color: #1A1A1A; } .actions { float: right; margin: 0ex; text-transform: uppercase; } .actions > A { padding-left: 0.5em; white-space: nowrap; } .cmtAction > SPAN { display: none; } .cmtAction:hover > SPAN { display: inline; } .commentDate { margin: 0.5ex 0em; } .commentAuthor { margin-right: 0.5em; font-size: 0.9rem; font-weight: bold; text-transform: uppercase; } .commentText { font-size: 0.9rem; color: #AAAAAA; } #editComment TEXTAREA, #editComment INPUT[type=text] { width: 90% } #comments { display: inline-block; max-width: 24em; } #comments H3 { font-size: 1.2rem; font-weight: 400; } #pictureComments { margin: 2ex 0em; } #pictureCommentNavBar { margin: 1ex 1em; font-size: 0.8rem; text-transform: uppercase; } #commentAdd { margin: 2ex 0em; } #commentAdd > H4 { font-size: 1.1rem; font-weight: 400; } #addComment { margin: 1ex 1em; font-size: 0.9rem; } #addComment > P, #editComment > P { margin-bottom: 0.5em; } #addComment TEXTAREA, #addComment INPUT[type=text] { width: 100% } .cmtFilter { margin: 1ex 0em; font-size: 0.9rem; } .cmtFilter LABEL { margin-right: 1em; } .cmtFilter INPUT, .cmtFilter SELECT { float: right; } /****************************************************************/ /* MISC PAGES */ /****************************************************************/ .loader { display: none; position: fixed; right: 0; bottom: 0; } #helpBox { padding: 2ex 2em; } #helpBox H2, #helpBox DL, #helpBox P { margin: 2ex 0em; } #helpBox DT { margin-top: 1ex; } #helpBox DD { padding-left: 0.5em; font-size: 0.9rem; } #piwigoAbout { margin: 2ex 2em; } #piwigoAbout > P { margin: 1ex 0em; } #piwigoAbout > UL { margin: 1ex 1em; } #linkToPiwigo { text-align: center; } .notification { margin: 2ex 2em; } .notification > P { margin-bottom: 2ex; } .notification > DL { margin: 1ex 1em; } .properties { display: inline-block; margin: 2ex 2em; } .properties > P { margin: 1ex 0em; } .properties LI { margin: 0.5ex 0em; } .properties > FIELDSET INPUT, .properties > FIELDSET SELECT { float: right; } .property { margin-right: 0.5em; } .proprad { float: right; } .proprad > LABEL { margin-left: 1em; } #lostPassword { margin: 2ex 2em; } #lostPassword P { margin: 1ex 0em; } #closeLink { margin: 3ex 0em 1ex; font-weight: bold; text-align: center; } /****************************************************************/ /* UNICODE ICONS */ /****************************************************************/ .pwg-icon { display:inline; padding-right: 0.3em; font-family:FontAwesome; font-style:normal; font-weight:normal; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .pwg-button { cursor: pointer; } .pwg-button-text { display: inline; } .pwg-state-disabled { color: #555555; } .navigationButtons { font-size: 1.0rem; } .navigationButtons .pwg-button-text { display: none; } #slideshow .navGroup { margin-right: 1em; } .navGroup > .fa-clock-o { margin-right: 0.5em; } .pwg-icon-category-edit:before { content:"\f0ad"; } .pwg-icon-sort:before { content:"\f0dc"; } .pwg-icon-caddie-add:before { content:"\f196"; } .pwg-icon-category-view-flat:before { content:"\f24d"; } .pwg-icon-camera-calendar:before { content:"\f073"; } .pwg-icon-calendar:before { content:"\f133"; } .pwg-icon-slideshow:before { content:"\f144"; } .pwg-icon-sizes:before { content:"\f047"; } .pwg-icon-camera-info:before { content:"\f083"; } .pwg-icon-save:before { content:"\f019"; } .pwg-icon-favorite-add:before { content:"\f08a"; } .pwg-icon-favorite-del:before { content:"\f004"; } .pwg-icon-representative:before { content:"\f045"; } .pwg-icon-edit:before { content:"\f044"; } .pwg-icon-category-view-normal:before { content:"\f06e"; } .pwg-icon-letters:before { content:"\f15d"; } .pwg-icon-cloud:before { content:"\f0c2"; } .pwg-icon-lost-password:before { content:"\f059"; } .pwg-icon-help:before { content:"\f059"; } .pwg-icon-info:before { content:"\f05a"; } .pwg-icon-close:before { content:"\f148"; } .pwg-icon-clock-minus:before { content:"\f068"; } .pwg-icon-clock-plus:before { content:"\f067"; } .pwg-icon-repeat:before { content:"\f01e"; } .pwg-icon-stop:before { content:"\f28d"; } .pwg-icon-play:before { content:"\f144"; } .pwg-icon-pause:before { content:"\f28b"; } .pwg-icon-arrow-w:before { content:"\f053"; } .pwg-icon-arrow-e:before { content:"\f054"; } .pwg-icon-arrow-n:before { content:"\f139"; } .batch-downloader-icon { background: none !important; } .batch-downloader-icon:before { content:"\f019"; } #showPhotoProperties:before { content:"\f040 "; font-family:FontAwesome; }