[BUGFIX] Fix CSS of DateTimePicker 83/50183/4
authorFrank Naegler <frank.naegler@typo3.org>
Tue, 11 Oct 2016 12:08:51 +0000 (14:08 +0200)
committerBenjamin Kott <info@bk2k.info>
Tue, 11 Oct 2016 21:15:00 +0000 (23:15 +0200)
This patch fix broken CSS for DateTimePicker.

Resolves: #78241
Releases: master
Change-Id: I5860aaf8af5f2ca349bc920b9838c85fa522a92e
Reviewed-on: https://review.typo3.org/50183
Reviewed-by: Benjamin Kott <info@bk2k.info>
Tested-by: Benjamin Kott <info@bk2k.info>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Build/Resources/Public/Less/Component/dropdown.less
Build/Resources/Public/Less/Scaffold/scaffold.less
Build/Resources/Public/Less/_variables.less
typo3/sysext/backend/Resources/Public/Css/backend.css
typo3/sysext/install/Resources/Public/Css/install.css

index 5ad19a0..843c4a4 100644 (file)
@@ -6,9 +6,13 @@
        border: 0;
        margin: 0;
        border-radius: 0;
+       color: @dropdown-color;
        a {
+               color: inherit;
                display: block;
+               &:focus,
                &:hover {
+                       color: inherit;
                        text-decoration: none;
                }
        }
index e77834d..e946f2d 100644 (file)
@@ -121,8 +121,10 @@ body {
        right: 0;
        bottom: 0;
        display: none;
+       .dropdown-menu a,
        a {
                color: fade(@scaffold-toolbar-color, 70%);
+               &:focus,
                &:hover {
                        color: @scaffold-toolbar-color;
                }
index 5223524..74ed4df 100644 (file)
 // Modal
 @zindex-modal: 5000;
 
+// Dropdown
 @dropdown-bg:                    #424242;
+@dropdown-color:                 #ffffff;                                                                              // TYPO3 SPECIFIC
 @dropdown-border:                rgba(0,0,0,.15);
 @dropdown-fallback-border:       #ccc;
 @dropdown-divider-bg:            #525252;
 @dropdown-link-disabled-color:   @gray-light;
 @dropdown-header-color:          @gray-light;
 @dropdown-caret-color:           #000;
+
+// Datetime Picker
+@bs-datetimepicker-timepicker-font-size: @font-size-base;
+@bs-datetimepicker-active-bg: @btn-primary-bg;
+@bs-datetimepicker-active-color: @btn-primary-color;
+@bs-datetimepicker-border-radius: 0;
+@bs-datetimepicker-btn-hover-bg: lighten(@dropdown-bg, 10%);
+@bs-datetimepicker-disabled-color: @text-muted;
+@bs-datetimepicker-alternate-color: lighten(@bs-datetimepicker-disabled-color, 10%);
+@bs-datetimepicker-secondary-border-color: @dropdown-bg;
+@bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2);
+@bs-datetimepicker-primary-border-color: @dropdown-bg;
+@bs-datetimepicker-text-shadow: none;
index acd3f46..ab7732c 100644 (file)
@@ -7132,9 +7132,13 @@ body {
   bottom: 0;
   display: none;
 }
+.scaffold-toolbar .dropdown-menu a,
 .scaffold-toolbar a {
   color: rgba(255, 255, 255, 0.7);
 }
+.scaffold-toolbar .dropdown-menu a:focus,
+.scaffold-toolbar a:focus,
+.scaffold-toolbar .dropdown-menu a:hover,
 .scaffold-toolbar a:hover {
   color: #fff;
 }
@@ -7704,11 +7708,15 @@ body {
   border: 0;
   margin: 0;
   border-radius: 0;
+  color: #ffffff;
 }
 .dropdown-menu a {
+  color: inherit;
   display: block;
 }
+.dropdown-menu a:focus,
 .dropdown-menu a:hover {
+  color: inherit;
   text-decoration: none;
 }
 .dropdown-menu hr {
@@ -8786,7 +8794,7 @@ div.dropdown-menu {
 .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
+  border-bottom: 7px solid #424242;
   border-bottom-color: rgba(0, 0, 0, 0.2);
   top: -7px;
   left: 7px;
@@ -8794,14 +8802,14 @@ div.dropdown-menu {
 .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
-  border-bottom: 6px solid white;
+  border-bottom: 6px solid #424242;
   top: -6px;
   left: 8px;
 }
 .bootstrap-datetimepicker-widget.dropdown-menu.top:before {
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
-  border-top: 7px solid #ccc;
+  border-top: 7px solid #424242;
   border-top-color: rgba(0, 0, 0, 0.2);
   bottom: -7px;
   left: 6px;
@@ -8809,7 +8817,7 @@ div.dropdown-menu {
 .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
-  border-top: 6px solid white;
+  border-top: 6px solid #424242;
   bottom: -6px;
   left: 7px;
 }
@@ -8836,7 +8844,7 @@ div.dropdown-menu {
 .bootstrap-datetimepicker-widget .timepicker-second {
   width: 54px;
   font-weight: bold;
-  font-size: 1.2em;
+  font-size: 12px;
   margin: 0;
 }
 .bootstrap-datetimepicker-widget button[data-action] {
@@ -8974,7 +8982,7 @@ div.dropdown-menu {
 .bootstrap-datetimepicker-widget table td,
 .bootstrap-datetimepicker-widget table th {
   text-align: center;
-  border-radius: 2px;
+  border-radius: 0;
 }
 .bootstrap-datetimepicker-widget table th {
   height: 20px;
@@ -8987,7 +8995,7 @@ div.dropdown-menu {
 .bootstrap-datetimepicker-widget table th.disabled,
 .bootstrap-datetimepicker-widget table th.disabled:hover {
   background: none;
-  color: #d7d7d7;
+  color: #737373;
   cursor: not-allowed;
 }
 .bootstrap-datetimepicker-widget table th.prev::after {
@@ -9016,7 +9024,7 @@ div.dropdown-menu {
   cursor: pointer;
 }
 .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
-  background: #f5f5f5;
+  background: #5c5c5c;
 }
 .bootstrap-datetimepicker-widget table td {
   height: 54px;
@@ -9027,7 +9035,7 @@ div.dropdown-menu {
   font-size: .8em;
   height: 20px;
   line-height: 20px;
-  color: #d7d7d7;
+  color: #8c8c8c;
 }
 .bootstrap-datetimepicker-widget table td.day {
   height: 20px;
@@ -9038,12 +9046,12 @@ div.dropdown-menu {
 .bootstrap-datetimepicker-widget table td.hour:hover,
 .bootstrap-datetimepicker-widget table td.minute:hover,
 .bootstrap-datetimepicker-widget table td.second:hover {
-  background: #f5f5f5;
+  background: #5c5c5c;
   cursor: pointer;
 }
 .bootstrap-datetimepicker-widget table td.old,
 .bootstrap-datetimepicker-widget table td.new {
-  color: #d7d7d7;
+  color: #8c8c8c;
 }
 .bootstrap-datetimepicker-widget table td.today {
   position: relative;
@@ -9063,7 +9071,7 @@ div.dropdown-menu {
 .bootstrap-datetimepicker-widget table td.active:hover {
   background-color: #0078e6;
   color: #fff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  text-shadow: none;
 }
 .bootstrap-datetimepicker-widget table td.active.today:before {
   border-bottom-color: #fff;
@@ -9071,7 +9079,7 @@ div.dropdown-menu {
 .bootstrap-datetimepicker-widget table td.disabled,
 .bootstrap-datetimepicker-widget table td.disabled:hover {
   background: none;
-  color: #d7d7d7;
+  color: #737373;
   cursor: not-allowed;
 }
 .bootstrap-datetimepicker-widget table td span {
@@ -9081,23 +9089,23 @@ div.dropdown-menu {
   line-height: 54px;
   margin: 2px 1.5px;
   cursor: pointer;
-  border-radius: 2px;
+  border-radius: 0;
 }
 .bootstrap-datetimepicker-widget table td span:hover {
-  background: #f5f5f5;
+  background: #5c5c5c;
 }
 .bootstrap-datetimepicker-widget table td span.active {
   background-color: #0078e6;
   color: #fff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  text-shadow: none;
 }
 .bootstrap-datetimepicker-widget table td span.old {
-  color: #d7d7d7;
+  color: #8c8c8c;
 }
 .bootstrap-datetimepicker-widget table td span.disabled,
 .bootstrap-datetimepicker-widget table td span.disabled:hover {
   background: none;
-  color: #d7d7d7;
+  color: #737373;
   cursor: not-allowed;
 }
 .bootstrap-datetimepicker-widget.usetwentyfour td.hour {
index f34047a..fc2513f 100644 (file)
@@ -7123,9 +7123,13 @@ body {
   bottom: 0;
   display: none;
 }
+.scaffold-toolbar .dropdown-menu a,
 .scaffold-toolbar a {
   color: rgba(255, 255, 255, 0.7);
 }
+.scaffold-toolbar .dropdown-menu a:focus,
+.scaffold-toolbar a:focus,
+.scaffold-toolbar .dropdown-menu a:hover,
 .scaffold-toolbar a:hover {
   color: #fff;
 }
@@ -7695,11 +7699,15 @@ body {
   border: 0;
   margin: 0;
   border-radius: 0;
+  color: #ffffff;
 }
 .dropdown-menu a {
+  color: inherit;
   display: block;
 }
+.dropdown-menu a:focus,
 .dropdown-menu a:hover {
+  color: inherit;
   text-decoration: none;
 }
 .dropdown-menu hr {