Design/EasySoft-ZenTaoPMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

* task #42141, adjust modal style in page tutorial.

Browse Source
This commit is contained in:
Hao Sun
2021-09-06 17:17:33 +08:00
parent 61df601ab8
commit 4cd1645436
2 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
module/tutorial/css/index.css
+10 -10
View File
@@ -25,7 +25,7 @@
#task .task-desc > ul > li[data-target]:after {content: ' '; display: block; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; border: 2px solid #F1A325; transition: top .5s; pointer-events: none; border-radius: 4px;}
#task .task-desc > ul > li[data-target]:before {font-family: ZentaoIcon; content: '\e836'; color: #333;}
#task .task-desc > ul > li[data-target].finish:after {top: 100%;}
#task .task-desc > ul > li[data-target].finish:before {content: '\e92f'; color: #00da88;}
#task .task-desc > ul > li[data-target].finish:before {content: '\e92f'; color: #43a047;}
#task .task-desc > ul > li[data-target].active {background: #FFF0D5;}
#task .task-desc > ul > li[data-target].active:after {top: 0%;}
#task .task-desc > ul > li[data-target].active:before {font-family: ZentaoIcon; color: #EA644A; content: '\e92c';}
@@ -35,27 +35,27 @@
#openTaskPage > div > .icon {display: inline-block; width: 30px; text-align: center;}
#openTaskPage:hover {background: #EBF2F9;}
#openTaskPage > .normal {top: 0;}
#openTaskPage.open {color: #00da88; background: #DDF4DF;}
#openTaskPage.open {color: #43a047; background: #DDF4DF;}
#openTaskPage.open:hover {color: #006af1; background: #EBF2F9;}
#openTaskPage > .opened, #openTaskPage > .reload, #openTaskPage.open > .reload {top: 36px;}
#openTaskPage.open > .normal, #openTaskPage.open:hover > .opened {top: -36px;}
#openTaskPage.open > .opened, #openTaskPage.open:hover > .reload {top: 0;}
#task.finish > .panel-heading {background: #00da88;}
#task.finish > .panel-heading {background: #43a047;}
#task.finish > .panel-heading .task-name {text-decoration: line-through;}
#task.finish.finish > .panel-heading > .pull-right {opacity: 1; transform: scale(1);}
#task .task-nav {color: #006af1; display: inline-block; background: #EBF2F9; padding: 1px 5px 0; transition: all .2s;}
#task .task-nav:hover {color: #fff; background: #006af1; cursor: pointer;}
#tasksProgress {background: #ddd; position: relative;}
#tasksProgress > .progress-bar {background: #006af1; height: 8px; border-radius: 4px; margin-bottom: 15px; transition: background .4s, width .4s;}
#tasksProgress.finish > .progress-bar {width: 100% !important; background: #00da88;}
#tasksProgress.finish > .progress-bar {width: 100% !important; background: #43a047;}
#tasksProgress .progress-text {position: absolute; right: 0; top: -25px; font-weight: bold; opacity: 0.7; color: #006af1;}
#tasksProgress.finish .progress-text {color: #00da88; opacity: 1;}
#tasksProgress.finish .progress-text {color: #43a047; opacity: 1;}
#tasks {background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 2px 6px 0 rgba(0,0,0,0.045); border-radius: 6px;}
#tasks > li > a {padding: 8px 8px 8px 12px;}
#tasks > li > a > .pull-right {filter: alpha(opacity=0); opacity: 0; transition: opacity .4s, transform .4s; transform: scale(2.5, 2); color: #00da88;}
#tasks > li.finish > a, #tasks > li.finish.active > a {box-shadow: inset 4px 0 0 #00da88; border-left-color: #00da88; color: #808080;}
#tasks > li > a > .pull-right {filter: alpha(opacity=0); opacity: 0; transition: opacity .4s, transform .4s; transform: scale(2.5, 2); color: #43a047;}
#tasks > li.finish > a, #tasks > li.finish.active > a {box-shadow: inset 4px 0 0 #43a047; border-left-color: #43a047; color: #808080;}
#tasks > li.finish > a > .pull-right {filter: alpha(opacity=100); opacity: 1; transform: scale(1);}
#tasks > li.finish > a > .task-name {text-decoration: line-through;}
#tasks > li.active > a, #tasks > li.active.finish > a {box-shadow: inset 4px 0 0 #006af1; border-color: #ddd; border-left-color: #006af1; color: #006af1; background: #EBF2F9;}
@@ -63,16 +63,16 @@
#taskModalBack {position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #fff; transition: opacity .4s; opacity: 0; display: none;}
#taskModalBack.in {filter: alpha(opacity=60); opacity: 0.6;}
#taskModal {width: 500px; position: absolute; background: #00da88; color: #fff; text-align: center; overflow: hidden; transform: scale(.5) translate(0, 200px) rotateX(120deg); transitizon: transform .4s, opacity .4s; opacity: 0; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); top: 0; padding: 30px; left: 50%; margin-left: -250px; top: 20%; box-shadow: 0 0 20px 0 rgba(0,0,0,.25); display: none;}
#taskModal {width: 500px; position: absolute; background: #43a047; color: #fff; text-align: center; overflow: hidden; transform: scale(.5) translate(0, 200px) rotateX(120deg); transitizon: transform .4s, opacity .4s; opacity: 0; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); top: 0; padding: 30px; left: 50%; margin-left: -250px; top: 20%; box-shadow: 0 0 20px 0 rgba(0,0,0,.25); display: none;}
#taskModal.in {transform: scale(1) translate(0) rotateX(0); opacity: 1;}
#taskModal h3 {margin-bottom: 20px;}
#taskModal .start-icon > .icon-spin {-moz-animation: spin 10s infinite linear; -o-animation: spin 10s infinite linear; -webkit-animation: spin 10s infinite linear; animation: spin 10s infinite linear;}
#taskModal .start-icon {width: 60px; height: 60px; text-align: center; margin: 10px auto; position: relative;}
#taskModal .start-icon > .icon-front {font-size: 56px; color: #fff; line-height: 60px; width: 60px; height: 60px; position: absolute; left: 0; top: 0;}
#taskModal .btn-success {border-color: #DDF4DF;}
#taskModal .btn-success:hover {background: #00c178;}
#taskModal > .close {position: absolute; right: 15px; top: 10px;}
#taskModal > .finish-all {display: none;}
#taskModal > .finish {display: block;}
#taskModal.show-all > .finish-all {display: block;}
#taskModal.show-all > .finish {display: none;}
#taskModal .btn-outline {background-color: transparent; border: 1px solid #fff; color: #fff}
#taskModal .btn-outline:hover {background-color: #fff; color: #43a047}
module/tutorial/view/index.html.php
+2 -2
View File
@@ -21,12 +21,12 @@
<div class='finish-all'>
<div class='start-icon'><i class='icon icon-check-circle icon-front'></i></div>
<h3><?php echo $lang->tutorial->congratulation;?></h3>
<button type='button' class='btn btn-success btn-reset-tasks'><i class='icon icon-restart'></i> <?php echo $lang->tutorial->restart;?></button> &nbsp; <a href='<?php echo helper::createLink('tutorial', 'quit');?>' class='btn btn-success'><i class='icon icon-signout'></i> <?php echo $lang->tutorial->exit;?></a>
<button type='button' class='btn btn-outline btn-reset-tasks'><i class='icon icon-restart'></i> <?php echo $lang->tutorial->restart;?></button> &nbsp; <a href='<?php echo helper::createLink('tutorial', 'quit');?>' class='btn btn-outline'><i class='icon icon-signout'></i> <?php echo $lang->tutorial->exit;?></a>
</div>
<div class='finish'>
<div class='start-icon'><i class='icon icon-check-circle icon-front'></i></div>
<h3><?php echo $lang->tutorial->congratulateTask;?></h3>
<button type='button' class='btn btn-success btn-next-task btn-task'><?php echo $lang->tutorial->nextTask;?> <i class='icon icon-angle-right'></i></button>
<button type='button' class='btn btn-outline btn-next-task btn-task'><?php echo $lang->tutorial->nextTask;?> <i class='icon icon-angle-right'></i></button>
</div>
</div>
</div>