Files
Piwigo/admin/themes/roma/theme.css
T
Hannah f8d2bbe200 Group manager color changes light and dark mode
Light mode and dark mode color change to group block when checked in selection mode, and to the group icon (changed to orange) number of members made orange.
Dark mode selection mode orange color made darker
Dark mode group name changes to black when checked, changes via jquery (BlackFont class added)
2020-05-19 17:21:30 +02:00

825 lines
21 KiB
CSS

/* text color */
body, h3, dt, .throw, .content, label, LEGEND {
color:#777;
}
INPUT, select, textarea { color:#999; background-color: #444; }
option[disabled] { background-color: #999; color: #444; }
input[type="radio"], input[type="checkbox"] { background-color: transparent; }
.showInfo { color:#666; }
.showInfo:hover { color:#999; }
h2 { color: #ccc; }
.header_notes {
background: transparent url(../default/icon/note.png) no-repeat right top;
border: none;
min-height: 48px;
padding: 15px 60px 0 0;
right: 0;
width: 550px;
}
html, body { min-height: 100%; height: 100%;}
body {
background-color:#444;
}
/* #the_page { margin: 0; padding: 0; z-index: 1; top:0px; */
/* padding-top: 0; min-height: 100%; width:100%; position:absolute; left:0px; } */
h3, .row2, .content { background-color: #222; }
.throw, .row1 { background-color:#111; }
.throw em { font-style: normal; color: #ff3363; }
#menubar li:hover {
background-color: transparent;
}
#content {
background-color: #444444;
}
h1 {
background-color: #565656;
color: #c1c1c1;
}
#tabsheet {
background-color:#565656;
}
.tabsheet li.selected_tab {
background-color: #444;
}
.tabsheet li.selected_tab a {
color: #c1c1c1;
}
.tabsheet a {
color: #7e7e7e;
font-weight: normal;
}
.tabsheet li:hover a {
color: #c1c1c1;
}
.content h3 { font-size:20px; letter-spacing:-0.4px; margin:0 20px 12px 0; text-align:center; background:none; border: 0; }
.content h3 ~ h3{ margin-top: 40px; }
.content h4 { font-size:14px; text-align:left; padding:3px; margin: 2px;}
.content dl, dd { margin:5px; }
UL.thumbnails span.wrap2:hover { background-color:#7CBA0F; color:#666; }
UL.thumbnails span.wrap2 {
background-color:#333;
}
/* .throw, */ td h3 {
background-image: url(images/fillet.png); background-repeat: repeat-x; }
/* borders */
fieldset { border: 2px solid #333; }
INPUT, SELECT, TEXTAREA {
border: 1px solid #666;
}
input:focus, select:focus, textarea:focus {
background-color: #444;
color: #999;
}
TEXTAREA { cursor:text; font-size: 13px; }
.tagSelection label { padding-right:12px; }
.tagSelection LI.tagSelected {background-color:#aaa;}
.tagSelected LABEL {color:#000;}
ul.thumbnails input { color:#999; font-size:10px; margin:0; background-color:#444; text-align: center;}
INPUT[type="submit"]:hover , INPUT[type="reset"]:hover { cursor: pointer; }
INPUT.bigbutton:hover { background-color: #222; color:#f33; border: 0; }
.throw { font-size: 120%; line-height: 26px; padding-top: 10px; font-weight: bold; color: #ff3363; }
label { cursor:pointer }
.categoryLi, .menuLi { background: #333 }
.menuLi_hidden { background: #333 !important; }
a.Piwigo {
font-family: verdana, arial, helvetica, sans-serif !important;
font-size: 11px; font-weight: normal; letter-spacing: 0;
color : #F33; text-decoration: none; border: 0; }
a.Piwigo:hover span.Piwigo {
border-bottom: 1px solid #FF3363;
}
.categoryUl>li:not(.virtual_cat) {
background:url(images/stripe-cat.png);
}
/* RADU - I comment this because it makes FF form controls activation very slow)
*, *:focus, *:active, input:active, a:active, input:focus, a:focus { outline: none; -moz-outline-width: 0px; }
*/
a { color:#bbb; }
a:hover, a:active { color: #f70; cursor: pointer; }
.content .navigationBar {color:#666;}
ul.actions, .content form#waiting {text-align:center;}
#adminHome A, #menubar li A, #menubar dt {
color: #8d8d8d;
}
/* jQuery tooltips */
.ui-tooltip {
color: #eee;
background-color: #000;
}
.cluetip-outer { border-color: #666; color: #666; background-color: #222; }
.cluetip-title { color: #ff3363; background-color: #111; }
/* jQuery ui resizable */
.ui-resizable { position: relative; }
.ui-wrapper { border: 0; }
.ui-wrapper input, .ui-wrapper textarea { border: 0; }
/* Global handle styles */
.ui-resizable-handle { position: absolute; display: none; font-size: 0.1px; }
.ui-resizable .ui-resizable-handle { display: block; }
body .ui-resizable-disabled .ui-resizable-handle { display: none; } /* use 'body' to make it more specific (css order) */
body .ui-resizable-autohide .ui-resizable-handle { display: none; } /* use 'body' to make it more specific (css order) */
.ui-resizable-n { cursor: n-resize; height: 6px; width: 100%; top: 0px; left: 0px; background: transparent url(images/resizable-n.gif) no-repeat scroll center top; }
.ui-resizable-s { cursor: s-resize; height: 6px; width: 100%; bottom: 0px; left: 0px; background: transparent url(images/resizable-s.gif) no-repeat scroll center top; }
.ui-resizable-e { cursor: e-resize; width: 6px; right: 0px; top: 0px; height: 100%; background: transparent url(images/resizable-e.gif) no-repeat scroll right center; }
.ui-resizable-w { cursor: w-resize; width: 6px; left: 0px; top: 0px; height: 100%; background: transparent url(images/resizable-w.gif) no-repeat scroll right center; }
.ui-resizable-se { cursor: se-resize; width: 9px; height: 9px; right: 0px; bottom: 0px; background: transparent url(images/resizable-se.gif); }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: 0px; bottom: 0px; background: transparent url(images/resizable-sw.gif); }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: 0px; top: 0px; background: transparent url(images/resizable-nw.gif); }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: 0px; top: 0px; background: transparent url(images/resizable-ne.gif); }
#ui-datepicker-div {background-color: #555; border:2px solid #333;}
#ui-datepicker-div .ui-datepicker-title {color:white;}
#ui-datepicker-div .ui-icon-circle-triangle-w {background: transparent url(icon/prev.png) no-repeat;}
#ui-datepicker-div .ui-icon-circle-triangle-e {background: transparent url(icon/next.png) no-repeat;}
#ui-datepicker-div A.ui-datepicker-prev:hover,
#ui-datepicker-div A.ui-datepicker-next:hover
{
background-color:#eee;border:1px solid #aaa;
}
.ui-datepicker th {color:#ccc;}
.ui-state-disabled {color:#aaa;}
.ui-timepicker-div, .ui-timepicker-div dt {color:#ccc;}
.ui-slider { background:#444;border-radius:2px;border:1px solid #666; }
.ui-slider .ui-slider-handle { border:1px solid #f36;background:#222;border-radius:0.6em; }
.ui-slider .ui-slider-range { background:#666;border-radius:2px; }
#ui-datepicker-div .ui-datepicker-control, #ui-datepicker-div a { background-color: #111; color: #f70 !important;}
#ui-datepicker-div .ui-datepicker-days-row { background-color: #444;}
#ui-datepicker-div .ui-datepicker-week-end-cell, #ui-datepicker-div .ui-datepicker-week-end-cell a { background-color: #222; color: #f33; border-color: #444; border-top-color: #222; border-left-color: #222;}
#ui-datepicker-div .ui-datepicker-title-row { background-color: #111;}
#ui-datepicker-div .ui-datepicker-title-row .ui-datepicker-week-end-cell a { color: #f33;}
#ui-datepicker-div a:hover { color: #ff3333 !important; border: 0; background-color: #111 !important;}
#ui-datepicker-div .ui-datepicker-header select { background-color:#444; color:#999; font-weight:normal;}
#ui-datepicker-div .ui-datepicker-links { background-color:#222;}
#ui-datepicker-div .ui-datepicker-header { background-color:#444;}
#ui-datepicker-div .ui-datepicker-current-day { background-color: #111 !important; border-color: #444; border-top-color: #111; border-left-color: #111;}
#ui-datepicker-div .ui-datepicker-days-cell { background-color:#444; border:1px solid #222; border-top-color: #444; border-left-color: #444;}
INPUT[type="text"].large { width: 317px; }
.buttonLike, input[type="button"], input[type="submit"], input[type="reset"] {
color: #3c3c3c;
background-color: #ffa744;
}
.buttonLike:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
color:#000;
text-decoration: none;
background-color:#f70;
color:#000;
cursor:pointer;
}
.buttonLike:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled {
color:#555;
border-color:#666;
cursor:not-allowed;
background-color: #666;
}
.bigbutton { background:transparent url(images/quickLocalSync_inactiv.png) no-repeat scroll left top; display: block;
color:#111; font-size:28px; height:161px; margin: 0 20px 0 auto; padding:0 18px 0; text-align:center; width:625px;
position:relative; z-index: 50;}
.bigtext { display:block; font-weight:bold; left:225px; position:relative; top:35px; width:320px; z-index: 55; cursor:pointer; }
.bigbutton:hover { background:transparent url(images/quickLocalSync_hover.png) no-repeat scroll left top; color: #000; }
.bigbutton input { background:transparent url(images/transparent.gif) repeat scroll left top; border:0;
display:block; height:85px; left:225px; position:relative; top:-42px; width:313px; z-index:99; padding:0;
color:transparent;}
.bigbutton input:hover { cursor:pointer; background:transparent url(images/transparent.gif) repeat scroll left top; border:0; padding:0;color:transparent;}
/* dashboard */
.stat-box {
color:#777;
}
a.stat-box:hover {
color:#aeaeae;
}
.stat-box-yellow i {
color:#9b5200;
background-color: #ffa744;
}
.stat-box-red i {
background-color: #c64444;
color: #650101;
}
.stat-box-purple i {
background-color: #ce4baa;
color: #52003b;
}
.stat-box-green i {
background-color: #4ac641;
color: #014400;
}
.stat-box-blue i {
background-color: #379bbc;
color: #003751;
}
/* hacks */
* html[lang="en"] body .content h2 , *+html[lang="en"] body .content h2 { text-transform:capitalize; } /* IE */
*+html .bigtext { left: 70px; }
*+html .bigbutton input, * html .bigbutton input { left:0px; position:relative; top:-40px; }
* html .bigtext { margin-right: 300px; }
.themeBox {background-color:#333;}
.themeBox IMG {border:1px solid #666;}
.themeName {color:#ccc;}
.themeActions A {border-bottom:none;}
.themeDefault {background-color:#555;}
#pluginsMenuSeparator {border:1px solid #333;}
#helpContent, #pLoaderPage, #ftpPage, #ftpPage LEGEND {color:#aaa;}
.pluginBox, .pluginContent, .pluginMiniBox, .groups li {background-color:#333;color:#999;border-color:#333; box-shadow: none;}
.pluginBoxNameCell, .pluginMiniBoxNameCell {color:#ddd;}
.pluginBox.incompatible, .pluginMiniBox.incompatible {border-color:#800 !important;}
.pluginBoxes .merged, .pluginBoxes .missing {background-color:#422;border:1px solid #800;}
.pluginActionLevel1, .pluginActionLevel2 {color: #333;}
.pluginActionLevel2 {background-color: #bbbbbb;}
.pluginFilter {color: #c1c1c1;}
.pluginFilter input {border-color: #c1c1c1;}
.languageBox {background-color:#333;}
.languageName {color:#ccc;}
.languageDefault {background-color:#555; color:#aaa;}
/* Batch Manager */
#batchManagerGlobal .thumbnails .font-checkbox [class*="icon-check"]::before {
color:#777;
}
#batchManagerGlobal .thumbnails li:hover .font-checkbox [class*="icon-check"]::before {
color:white;
}
#batchManagerGlobal li.thumbSelected .font-checkbox [class*="icon-check"]::before {
color:white;
}
#batchManagerGlobal UL.thumbnails li:hover .wrap2 {
background-color: #ff3363;
color: white;
}
#batchManagerGlobal .thumbSelected { background-color:transparent !important }
#batchManagerGlobal .thumbSelected .wrap2 {
background-color: #555 !important;
}
#batchManagerGlobal #selectedMessage {
background-color: #555;
color:white;
}
/* TokenInput (with Facebook style for ROMA) */
ul.token-input-list {border-color:#666 !important;background-color:#444 !important;}
ul.token-input-list li input {background-color:#444 !important;}
li.token-input-token span {color:#878787 !important;}
div.token-input-dropdown {background-color:#eee !important;border-color:#666 !important;}
div.token-input-dropdown ul li {background-color:#eee !important;}
div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-color:#FF7800 !important;}
.big-progressbar {
background: #3c3939;
}
/* Album Properties */
#albumThumbnail img, #albumLinks {
border-color:#333;
}
.selectedComment {background-color:#555; color:#fff;}
.groups label>p {
color: #ccc;
font-size: 1.2em;
background-color:#111;
}
label>p.group_select {
color: #d5d5d5;
background-color:#555;
}
.groups li,
.groups .showCreateAlbum,
.groups .addGroupFormBlock{
font-size: 1.2em;
background-color:#333;
}
.groups label>p,
.addGroupForm .addGroupFormTitle{
color:#3c3c3c;
font-size: 1.2em;
}
.groups li,
.groups .showCreateAlbum,
.groups .addGroupFormBlock{
box-shadow: -1px 1px 2px #1a1a1a;
}
.groups .showCreateAlbum:hover #addGroup,
.groups .addGroupFormTitle{
color:#c0c0c0;
text-decoration:none;
}
.groups #addGroup{
color:#777;
}
.groups .group_number_users{
color:#d5d5d5;
}
.addUserButton:hover{
text-decoration:none;
color:#3c3c3c;
background-color:#f3f3f3;
}
.groups p.list_user{
color:#3c3c3c;
}
label>p.group_select {
color: #000;
background-color:#C2F5C2;
}
.groups input[type="text"]{
background-color:#444444;
border:1px solid #d5d5d5;
}
.groups .AddUser .icon-user-add::before{
background-color:#f3f3f3;
color:#e0e0e0;
}
/*Edit group name*/
.groups label{
color:#777;
}
.groups label .Group-name-container p:focus{
border:1px solid #303030!important;
background-color:#1a1a1a;
}
/*Add Group */
.groups fieldset INPUT[type="text"]::placeholder{
color:#d5d5d5;
}
.groups button.submit{
background-color:#ffa744;
color:#3c3c3c;
}
.groups button.submit:hover{
background-color:#ff7700;
}
/* Group Options*/
#GroupOptions{
background-color:#5c5c5c;
box-shadow: -1px 1px 2px #393939;
color:#c0c0c0;
}
.groups #GroupPermission:hover,
.groups #GroupDuplicate:hover,
.groups #GroupDelete:hover{
background-color:#393939;
}
/*Group manager buttons*/
.groups .manage-users,
.groups .manage-permissions{
border:1px solid #777;
background-color:transparent;
}
.groups .manage-users:hover,
.groups .manage-permissions:hover{
background-color:#ffa744;
border:1px solid #ffa744;
cursor:pointer;
}
/*UserList Pop in*/
.UserListPopInContainer{
background-color:#444;
border-radius:10px;
}
#UserList .AddUserBlock button{
background-color:#ffa744;
color:#3c3c3c;
}
#UserList .AddUserBlock button:hover{
background-color:#ff7700;
}
#UserList .AddUserBlock input,
#UserList .FilterUserBlock input{
background-color:#2c2c2c;
}
#UserList .AddUserBlock p,
#UserList .FilterUserBlock{
color:#c0c0c0;
}
.UsersInGroupList span{
color:#d5d5d5;
}
.UsersInGroupList .icon-cancel:hover{
color:#ff7700;
}
.LinkUserManager{
color:#3c3c3c;
}
/* Selection mode */
.slider {
background-color: #333;
}
.slider:before {
background-color: #f5f5f5;
box-shadow:0 0 2px #777;
}
input:checked + .slider {
background-color: #ff8c27;
}
input:focus + .slider {
box-shadow: 0 0 1px #FFC27F;
}
#selection-mode-block{
background-color: #232323;
border-left:1px solid #1a1a1a;
}
.OrangeBackground{
background-color:#f9852c!important;
}
.OrangeIcon{
background-color:#ae5d1e !important;
color:#faa96b!important;
}
.OrangeFont{
color:#fddaba!important;
}
.BlackFont{
color:black!important;
}
/*Selection mode content*/
.SelectionModeGroupList{
color:#c0c0c0;
}
.SelectionModeGroup button{
border: 1px solid #e7e7e7;
color:#c0c0c0;
}
.SelectionModeGroup button:hover{
background-color: #ffa744;
border: 1px solid #ffa744;
color:#3c3c3c;
}
#ConfirmGroupAction{
color:#3c3c3c;
}
#ConfirmGroupAction p{
color: #777;
}
.ConfirmDeleteButton{
background-color: #ffa744;
}
/*Merge Options*/
#MergeOptionsBlock p{
color: #777;
}
#MergeOptionsBlock a{
color:#c0c0c0;
}
/*Merge options Radio buttons*/
.ConfirmMergeButton{
background-color: #ffa744;
}
.MergeOptionsContainer select{
background-color: #1a1a1a;
box-shadow: 0 0 2px #c5c5c5;
}
/*Group checkbox*/
.groups .group-checkmark {
border:2px solid #c76a23;
}
.groups .Group-checkbox-container:hover input ~ .group-checkmark {
background-color: #c76a23;
}
.groups .Group-checkbox-container input:checked ~ .group-checkmark {
background-color: #c76a23;
}
.groups .Group-checkbox-container .group-checkmark:after {
border: solid #ebebeb;
border-width: 0 3px 3px 0;
}
/*Group manager buttons*/
.groups .manage-users,
.groups .manage-users:hover,
.groups .manage-permissions,
.groups .manage-permissions:hover{
color:#c0c0c0;
}
.groups .manage-users:hover,
.groups .manage-permissions:hover{
color:#3c3c3c;
}
/*UserList Pop in*/
.CloseUserList{
color:white;
}
#UserList .group-name-block p{
color:#9e9e9e;
}
.UsernameBlock{
background-color:#393939;
color:#9e9e9e;
}
.Tooltip p.TooltipText{
color:#f3f3f3;
background-color: #3c3c3c;
border:1px solid #f3f3f3;
}
.ValidationUserAssociated{
background-color:#00aa00;
color:#c2f5c2;
}
.groups .showCreateAlbum .icon-plus-circled,
#UserList .group-name-block span,
.groups .icon-users-1:first-child,
.groups .showCreateAlbum .icon-plus-circled{
color:#003751;
background-color: #379bbc;
}
#UserList .group-name-block .UserNumberBadge{
background-color:#003751;
color: #379bbc;
}
/*------*/
.userSeparator {
color:#666;
visibility: hidden;
}
/*Edit user popin*/
.user_form_popin .ui-slider-horizontal .ui-slider-handle{
background-color:#FFA646;
border:1px solid #5a5a5a;
}
.user_form_popin .ui-slider-horizontal .ui-slider-range-min{
background-color:#5a5a5a;
}
.user_form_popin .ui-slider-horizontal{
background-color:#151515;
}
#configContent fieldset:not(.no-border) {
border-top-color:#444;
}
table.dataTable tr.even {
background-color: #111 !important;
}
table.dataTable tr.even td.sorting_1 {
background-color: #181818 !important;
}
table.dataTable tr.odd {
background-color: #222 !important;
}
table.dataTable tr.odd td.sorting_1 {
background-color: #282828 !important;
}
table.dataTable thead th, table.dataTable.no-footer {
border-color: #333 !important;
}
.dataTables_wrapper .dataTables_info {
color:#777 !important;
}
.userPropertiesContainer {border-color:#333;}
.userPrefs {border-color:#333;}
table.qsearch_help_table td {
border-color: #444;
}
.font-checkbox [class*=icon-check]:before { color:#aaa; }
#cboxLoadedContent { background-color:#333 !important; }
#watermarkPositionBox {
background-color:#333;
}
#watermarkPositionBox label {
color:#aaa;
}
#wImg {border-color:#555;}
FORM#categoryOrdering p.albumTitle a { color: #c0c0c0; }
FORM#categoryOrdering p.albumActions a { border-left:1px solid #555; }
.albumInfos {color: #808080;}
FORM#categoryOrdering p.albumActions a:hover {background-color: #ffa646; color: #3A3A3A;}
FORM#categoryOrdering p.albumActions .userSeparator {border: 1px solid #d5d5d5;}
#addAlbumOpen, #autoOrderOpen {border: 1px solid #777; color: #c0c0c0;}
#addAlbumOpen:hover, #autoOrderOpen:hover {border: 1px solid #aaa; text-decoration: none;}
.afterUploadActions a {color: #3C3C3C; font-weight: bold; background-color: #FFA646;}
.afterUploadActions a:hover {text-decoration: none; background-color: #ff7700;}
.font-checkbox {color: #898888;}
.font-checkbox:hover {color: #ffa646;}
.with-border legend, .with-border strong {color: #c0c0c0;}
.font-checkbox.selected {color: #ffa646;}
#formCreateAlbum input[name="virtual_name"] {border: 1px solid #7e7e7e; color: #F8F8F8; transition: all 125ms ease-out;}
#formCreateAlbum input[name="virtual_name"]:hover {border-color: #A5A5A5;}
LEGEND {color: #c1c1c1;}
a#showPermissions {color: #D6D6D6; border: 1px solid #D6D6D6; background-color: #414141;}
a#showPermissions:hover {border-color: #A5A5A5;}
.icon-plus.cboxElement {border: 1px solid #777; color: #c0c0c0;}
.icon-plus.cboxElement:hover {border: 1px solid #aaa;}
.selectize-control.single .selectize-input {border: 2px solid #FAC17E!important; color: #D5D5D5;}
.selectize-control.single .selectize-input:hover {border-color: #FFA646!important;}
.plupload_filelist {background-color: #444444 !important; scrollbar-color: #555 #444444!important;}
.plupload_filelist li {border-bottom: 1px solid #343434 !important; color: #A5A5A5!important;}
.plupload_filelist_footer {background-color: #3c3939!important; border: 0!important; color: #A5A5A5!important}
li.plupload_delete a {background: url("images/cancel.svg")!important; background-size: cover!important;}
li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; background-size: cover!important;}
.addAlbumEmpty {color: #c1c1c1;}
.buttonSeparator {color: #c1c1c1;}
#cboxTitle {color: #7f7f7f !important;}
#addAlbumForm {color: #999;}
.selectedAlbum span {background-color: #555; color: #999;}
#uploadForm li.plupload_droptext {background-color: #343434!important; color: #777 !important;}
.addFilesButtonChanged {background-color: #888;}
.addFilesButtonChanged:hover {background-color: #777;}
/*Error message*/
.errors {
color: #ffc4bf;
background-color: #d31100;
border-left: 4px solid #ffc4bf;
}
.errors li{
color: #ff0303;
}
.errors a{
background-color: #ff4838;
padding: 2px 7px;
color: #ffe8e6;
}
/*Success message*/
.infos {
color: #9bff92;
background-color: #10bb00;
border-left: 4px solid #9bff92;
}
.infos li{
color: #9bff92;
}
.infos a{
background-color: #12e100;
padding: 2px 7px;
color: #e3ffe1;
}
/*Warning message*/
.warnings {
color: #ffc58c;
background-color: #ee6300;
border-left: 4px solid #ffc58c;
}
.warnings a{
background-color: #ff8e3d;
padding: 2px 7px;
color: #ffedda;
}
/*announcement message*/
.messages {
color: #45a8ff;
background-color: #003360;
border-left: 4px solid #45a8ff;
}
.eiw .messages a {
background-color: #00529b;
color: #a7d6ff;
padding: 2px 7px;
}