Fixes #2144 Harmonized button colors

Switched every buttonGradient iteration to buttonLike and deleted buttonGradient class.

Added hover transition to themeActions and head-button classes.
This commit is contained in:
marsooooo
2024-04-05 17:04:55 +02:00
parent 929bd1bd73
commit acf63a700d
7 changed files with 19 additions and 40 deletions

View File

@@ -291,7 +291,7 @@ UL.thumbnails li.rank-of-image {background-color: #ddd;}
font-size:14px;
}
.buttonLike:disabled, .buttonGradient:disabled, input[type="submit"]:disabled, input[type="button"]:disabled, input[type="reset"]:disabled {
.buttonLike:disabled, input[type="submit"]:disabled, input[type="button"]:disabled, input[type="reset"]:disabled {
background: #ECECEC !important;
color: #D5D5D5 !important;
cursor: not-allowed;

View File

@@ -41,6 +41,7 @@ or
background: #ff7700;
text-decoration: none !important;
color: white;
transition: all 125ms ease-out;
}
.head-button-2 {

View File

@@ -77,7 +77,7 @@ jQuery().ready(function(){
<div class="applicationName"> Piwigo Remote Sync </div>
<div class="applicationDesc"> {'Piwigo Remote Sync is able to upload a whole folder hierarchy. If you run it again, only new photos will be uploaded.'|@translate} </div>
<div class="applicationLink">
<a class="buttonGradient" href="http://piwigo.org/ext/extension_view.php?eid=851" target="_blank">{'Learn more'|@translate}</a>
<a class="buttonLike" href="http://piwigo.org/ext/extension_view.php?eid=851" target="_blank">{'Learn more'|@translate}</a>
</div>
</div>
</div>
@@ -89,7 +89,7 @@ jQuery().ready(function(){
<div class="applicationName"> {'Piwigo for iOS (iPhone, iPad, iPod Touch)'|@translate}</div>
<div class="applicationDesc"> {'<em>Piwigo for iOS</em> application empowers you to connect to your Piwigo gallery from your iPhone, iPad or iPod Touch, create some albums and upload several photos at once.'|@translate}</div>
<div class="applicationLink">
<a class="buttonGradient" target="_blank" href="http://itunes.apple.com/us/app/piwigo/id472225196"> {'Available on'|@translate} Apple AppStore</a>
<a class="buttonLike" target="_blank" href="http://itunes.apple.com/us/app/piwigo/id472225196"> {'Available on'|@translate} Apple AppStore</a>
</div>
</div>
</div>
@@ -101,7 +101,7 @@ jQuery().ready(function(){
<div class="applicationName"> {'Piwigo for Android'|@translate} </div>
<div class="applicationDesc"> {'<em>Piwigo for Android</em> application empowers you to connect your Android phone or table to your Piwigo gallery, create some albums and upload several photos at once.'|@translate} </div>
<div class="applicationLink">
<a class="buttonGradient" target="_blank" href="https://play.google.com/store/apps/details?id=com.piwigo.piwigo_ng">{'Available on'|@translate} Google Play</a>
<a class="buttonLike" target="_blank" href="https://play.google.com/store/apps/details?id=com.piwigo.piwigo_ng">{'Available on'|@translate} Google Play</a>
</div>
</div>
</div>
@@ -116,7 +116,7 @@ jQuery().ready(function(){
{'The Piwigo publish Plug-in allows you to export and synchronize photos from Lightroom directly to your Piwigo photo gallery.'|@translate}
</div>
<div class="applicationLink">
<a class="buttonGradient" target="_blank" href="http://alloyphoto.com/plugins/piwigo/">{'Available on'|@translate} alloyphoto.com</a>
<a class="buttonLike" target="_blank" href="http://alloyphoto.com/plugins/piwigo/">{'Available on'|@translate} alloyphoto.com</a>
</div>
</div>
</div>
@@ -128,7 +128,7 @@ jQuery().ready(function(){
<div class="applicationName"> Shotwell </div>
<div class="applicationDesc"> {'Shotwell is an open source digital photo organizer that runs on Linux. It is the default photo manager in Ubuntu and Fedora.'|@translate}</div>
<div class="applicationLink">
<a title="{'On your Linux, simply install Shotwell with your package manager and the activate Piwigo publishing option.'|@translate}" class="buttonGradient" href="http://yorba.org/shotwell/" target="_blank">{'Learn more'|@translate}</a>
<a title="{'On your Linux, simply install Shotwell with your package manager and the activate Piwigo publishing option.'|@translate}" class="buttonLike" href="http://yorba.org/shotwell/" target="_blank">{'Learn more'|@translate}</a>
</div>
</div>
</div>
@@ -143,7 +143,7 @@ jQuery().ready(function(){
{'digiKam is designed for photographers who want to view, manage, edit, enhance, organize, tag, and share photographs.'|@translate}
</div>
<div class="applicationLink">
<a title="{'To export your photos from digiKam to Piwigo, simply install digiKam and the Kipi-plugins.'|@translate}" class="buttonGradient" href="http://digikam.org/" target="_blank">{'Learn more'|@translate}</a>
<a title="{'To export your photos from digiKam to Piwigo, simply install digiKam and the Kipi-plugins.'|@translate}" class="buttonLike" href="http://digikam.org/" target="_blank">{'Learn more'|@translate}</a>
</div>
</div>
</div>
@@ -155,7 +155,7 @@ jQuery().ready(function(){
<div class="applicationName"> MacShareToPiwigo </div>
<div class="applicationDesc"> {'Share / Send your photos directly from your Mac Os X (10.10 and following) to Piwigo'|@translate} </div>
<div class="applicationLink">
<a class="buttonGradient" target="_blank" href="http://piwigo.org/ext/extension_view.php?eid=804">{'Learn more'|@translate}</a>
<a class="buttonLike" target="_blank" href="http://piwigo.org/ext/extension_view.php?eid=804">{'Learn more'|@translate}</a>
</div>
</div>
</div>
@@ -167,7 +167,7 @@ jQuery().ready(function(){
<div class="applicationName"> iPhoto </div>
<div class="applicationDesc"> {'iPhoto is the default photo manager on MacOSX. The Piwigo export plugin let you create new albums and export your photos directly from iPhoto to your Piwigo photo gallery.'|@translate} </div>
<div class="applicationLink">
<a class="buttonGradient" target="_blank" href="http://piwigo.org/ext/extension_view.php?eid=592">{'Learn more'|@translate}</a>
<a class="buttonLike" target="_blank" href="http://piwigo.org/ext/extension_view.php?eid=592">{'Learn more'|@translate}</a>
</div>
</div>
</div>
@@ -183,7 +183,7 @@ jQuery().ready(function(){
{'The Piwigo export plugin allows you to create albums and export photos.'|@translate}
</div>
<div class="applicationLink">
<a class="buttonGradient" target="_blank" href="http://piwigo.org/ext/extension_view.php?eid=598">{'Learn more'|@translate}</a>
<a class="buttonLike" target="_blank" href="http://piwigo.org/ext/extension_view.php?eid=598">{'Learn more'|@translate}</a>
</div>
</div>
</div>

View File

@@ -168,7 +168,7 @@ jQuery(document).ready(function(){
QueueChanged : function(up) {
jQuery('#addFiles').addClass("addFilesButtonChanged");
jQuery('#startUpload').prop('disabled', up.files.length == 0);
jQuery("#addFiles").removeClass('buttonGradient').addClass('buttonLike');
jQuery("#addFiles").removeClass('buttonLike').addClass('buttonLike');
if (up.files.length > 0) {
jQuery('.plupload_filelist_footer').show();
@@ -177,7 +177,7 @@ jQuery(document).ready(function(){
if (up.files.length == 0) {
jQuery('#addFiles').removeClass("addFilesButtonChanged");
jQuery("#addFiles").removeClass('buttonLike').addClass('buttonGradient');
jQuery("#addFiles").removeClass('buttonLike').addClass('buttonLike');
jQuery('.plupload_filelist_footer').hide();
jQuery('.plupload_filelist').css("overflow-y", "hidden");
}
@@ -507,7 +507,7 @@ jQuery(document).ready(function(){
<fieldset class="selectFiles">
<legend><span class="icon-file-image icon-yellow"></span>{'Select files'|@translate}</legend>
<div class="selectFilesButtonBlock">
<button id="addFiles" class="buttonGradient">{if not $DISPLAY_FORMATS}{'Add Photos'|translate}{else}{'Add formats'|@translate}{/if}<i class="icon-plus-circled"></i></button>
<button id="addFiles" class="buttonLike">{if not $DISPLAY_FORMATS}{'Add Photos'|translate}{else}{'Add formats'|@translate}{/if}<i class="icon-plus-circled"></i></button>
<div class="selectFilesinfo">
{if isset($original_resize_maxheight)}
<p class="uploadInfo">{'The picture dimensions will be reduced to %dx%d pixels.'|@translate:$original_resize_maxwidth:$original_resize_maxheight}</p>
@@ -540,7 +540,7 @@ jQuery(document).ready(function(){
<button id="cancelUpload" class="buttonLike icon-cancel-circled">{'Cancel'|translate}</button>
</div>
<button id="startUpload" class="buttonGradient icon-upload" disabled>{'Start Upload'|translate}</button>
<button id="startUpload" class="buttonLike icon-upload" disabled>{'Start Upload'|translate}</button>
</form>

View File

@@ -114,7 +114,7 @@ $('#syncFiles label').click(function () {
</fieldset>
<p class="bottomButtons syncBtn">
<button class="icon-exchange buttonGradient" type="submit" value="" name="submit"> {'Synchronize'|@translate} </button>
<button class="icon-exchange buttonLike" type="submit" value="" name="submit"> {'Synchronize'|@translate} </button>
</p>
</form>
{/if}{*isset $introduction*}

View File

@@ -2188,10 +2188,10 @@ margin-top:4px; padding-bottom:3px; padding-top:3px; top:1px;
}
.themeActions a:nth-child(1) {background-color: #ffc17e; color: #222;}
.themeActions a:nth-child(1):hover {background-color: #ff7700; color: white; text-decoration: none;}
.themeActions a:nth-child(1):hover {background-color: #ff7700; color: white; text-decoration: none; transition-duration: 125ms;}
.themeActions a:nth-child(2) {background-color: #ececec; color: #222;}
.themeActions a:nth-child(2):hover {background-color: #ff9b32; color: #111; text-decoration: none;}
.themeActions a:nth-child(2):hover {background-color: #ff9b32; color: #111; text-decoration: none; transition-duration: 125ms;}
#themesContent H3 {font-size:16px; text-align:left; border-bottom:1px solid #444; letter-spacing:1px; margin:5px;}
.themeBoxes {min-height:0;text-align:left;}
@@ -6020,25 +6020,10 @@ fieldset#environment legend i[class*="icon-"] {
}
}
.buttonLike, .buttonGradient, input[type="submit"], input[type="button"], input[type="reset"] {
.buttonLike, input[type="submit"], input[type="button"], input[type="reset"] {
font-size:12px; border:none; padding:13px 20px; margin-left:0; font-weight: bold; transition: all 125ms ease-out;
}
.buttonGradient {
padding: 8px 10px;
margin-left: 5px;
background: linear-gradient(135deg, rgb(255, 119, 0) 0%, rgb(249, 76, 93) 25%, rgb(201, 74, 140) 50%, rgb(249, 76, 93) 100%); transition: 0.3s ease;
cursor: pointer;
color: white !important;
background-size: 200% 100%;
}
.syncBtn .buttonGradient {
padding:13px 20px;
}
.buttonGradient:hover {background-position-x: 100%;}
#cboxLoadedContent input[type="submit"] {margin-bottom: 20px; float: none;}
#permissions, #uploadForm fieldset {border: 0;}

View File

@@ -1838,13 +1838,6 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
border-left: 2px solid #a9f6e3;
}
.buttonGradient:disabled {
padding: 8px 10px; margin-left: 5px;
background-size: 200% 100%;
background: #5d5d5d !important;
color: #373737 !important;
cursor: not-allowed;
}
.linked-albums-badge {
background: #777;