-/* */
+/* ToDo */
/* Todo: Top Menu Dropdowns */
/* normal */
.preInput .dropdownCaption {
- font-size: 100%;
- font-weight: bold;
- text-decoration: none;
- text-shadow: 0 1px 0 #fff;
- color: #999;
cursor: pointer;
- border-width: 1px;
border-radius: 3px 0 0 3px;
- border-style: solid;
- border-color: #ccc #bbb #aaa;
-
- background-color: #fefefe;
- background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-
padding: 5px 10px;
display: inline-block;
-
- -webkit-transition: all .1s linear;
- -moz-transition: all .1s linear;
- -ms-transition: all .1s linear;
- -o-transition: all .1s linear;
- transition: all .1s linear;
-}
-
-/* hover */
-.preInput:hover .dropdownCaption {
- color: #666;
- border-width: 1px;
- border-style: solid;
- border-color: #ffc053 #fa2 #fc9e07;
-
- background-color: #fff9f4;
- background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-}
-
-/* active */
-.preInput .dropdownCaption:focus,
-.preInput .dropdownCaption:active {
- color: #333;
- border-width: 1px;
- border-style: solid;
- border-color: #fc9e07 #fa2 #ffc053;
-
- background-color: #fff9f4;
- background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
}
/* -- -- -- -- -- Large Buttons -- -- -- -- -- */
+/* Colors are being taken from the global color styles */
+
.largeButtons {
text-align: right;
}
.largeButtons ul li a {
font-size: 100%;
font-weight: bold;
- text-decoration: none;
- text-shadow: 0 1px 0 #fff;
- color: #999;
- border-width: 1px;
- border-style: solid;
- border-color: #ccc #bbb #aaa;
border-radius: 30px;
- background-color: #fefefe;
- background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-
margin: 3px 2px;
padding: 5px 13px;
display: inline-block;
+}
+
+
+
+/* -- -- -- -- -- Border -- -- -- -- -- */
+
+.border {
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ margin-top: 15px;
+}
+
+.border.overlay {
+ margin-top: 0 !important;
+}
+
+/* -- -- -- -- -- Box Title -- -- -- -- -- */
+
+.boxTitle {
+ border-radius: 7px;
+ background-color: #369;
+ /* Disabled, because the WoltLab header-image is not LGPL
+ Activate it if you want to test your own header image */
+ /* background-image: url('../images/header.png'); */
+ background-position: left top;
+ background-repeat: repeat-x;
- -webkit-transition: all .1s linear;
- -moz-transition: all .1s linear;
- -ms-transition: all .1s linear;
- -o-transition: all .1s linear;
- transition: all .1s linear;
+ -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+ -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+ -ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+ -o-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+ box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}
-/* buttons hover */
-input[type='reset']:hover,
-input[type='submit']:hover,
-input[type='button']:hover,
-input[type='button'].default:hover,
-.largeButtons ul li a:hover {
+.boxTitle > hgroup {
+ text-shadow: 0 -1px 0 #000;
+ color: #fff;
+ padding: 7px;
+ display: inline-block;
+}
+
+.boxTitle > hgroup a, .boxTitle > a {
+ text-decoration: none;
+ color: #fff;
+}
+
+.boxTitle > hgroup h1 {
+ display: inline-block;
+}
+
+.boxTitle > hgroup h2 {
+ font-size: 85%;
+ color: rgba(255, 255, 255, .9);
+ margin-top: 5px;
+}
+
+.boxTitle img.handle {
+ cursor: pointer;
+ margin-top: -1px;
+ float: right !important;
+ height: 16px;
+ width: 16px;
+}
+
+
+
+/* -- -- -- -- -- Tab Menu -- -- -- -- -- */
+
+/* Parts taken from jQuery UI @ themes/base/jquery.ui.tabs.css */
+
+/* Tab Menu */
+
+.tabMenu {
+ text-shadow: 0 1px 0 #fff;
+ /* This is the general toggle switch for tab menu orientation (options: left|center|right) */
+ text-align: center;
+ white-space: nowrap;
+ background-color: none;
+ margin-top: 15px;
+ padding: 0 5px;
+ display: block;
+ position: relative;
+}
+
+.tabMenu:after {
+ content: '';
+ display: block;
+ clear: both;
+}
+
+.tabMenu li {
+ white-space: nowrap;
+ list-style: none;
+ display: inline-block;
+}
+
+.tabMenu li a {
+ font-size: 110%;
+ text-decoration: none;
+ color: #999;
+ cursor: pointer;
+ padding: 10px 15px 7px;
+ border-width: 1px 1px 0 1px;
+ border-style: solid;
+ border-color: #ddd;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ background-color: rgba(0, 0, 0, .05);
+ display: inline-block;
+ position: relative;
+ bottom: -1px;
+ z-index: 10;
+ max-width: 200px;
+ overflow: hidden;
+}
+
+.tabMenu li:not(.ui-state-active) a:hover {
color: #666;
border-width: 1px;
border-style: solid;
- border-color: #ffc053 #fa2 #fc9e07;
-
+ border-color: #fa2 #fa2 #ccc;
background-color: #fff9f4;
- background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
}
-/* buttons active */
-input[type='reset']:focus,
-input[type='submit']:focus,
-input[type='button']:focus,
-input[type='button'].default:focus,
-.largeButtons ul li a:focus,
-input[type='reset']:active,
-input[type='submit']:active,
-input[type='button']:active,
-input[type='button'].default:active,
-.largeButtons ul li a:active{
- color: #333;
+.tabMenu li:not(.ui-state-active) a:active,
+.tabMenu li:not(.ui-state-active) a:focus {
border-width: 1px;
border-style: solid;
- border-color: #fc9e07 #fa2 #ffc053;
-
- background-color: #fff9f4;
- background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+ border-color: #fa2 #fa2 #ccc;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
}
-/* default buttons glow */
-@-webkit-keyframes glowLargeButtons {
- 0% {
- -webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
- }
- 100% {
- -webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
- }
+.tabMenu li.ui-state-active a {
+ font-size: 130%;
+ font-weight: bold;
+ color: #333 !important;
+ border-width: 1px;
+ border-style: solid;
+ border-color: #ccc;
+ border-bottom-color: #fff;
+ background-color: rgba(255, 255, 255, 1);
+ bottom: 0;
+ z-index: 30;
}
-@-moz-keyframes glowLargeButtons {
- 0% {
- -moz-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
- }
- 100% {
- -moz-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-@-ms-keyframes glowLargeButtons {
- 0% {
- -ms-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
- }
- 100% {
- -ms-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-@-o-keyframes glowLargeButtons {
- 0% {
- -o-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
- }
- 100% {
- -o-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-@keyframes glowLargeButtons {
- 0% {
- box-shadow: 0 0 13px rgba(102, 153, 204, .3);
- }
- 100% {
- box-shadow: 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-
-/* default buttons normal */
-input[type='submit'],
-input[type='button'].default,
-.largeButtons ul li.default a {
- color: #69c;
- border-width: 1px;
- border-style: solid;
- border-color: #7aade0 #69c #5285b8;
-
- background-color: #e7f2fd;
- background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
- background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
- background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
- background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
-
- -webkit-box-shadow: 0 0 10px #369;
- -moz-box-shadow: 0 0 10px #369;
- -ms-box-shadow: 0 0 10px #369;
- -o-box-shadow: 0 0 10px #369;
- box-shadow: 0 0 10px #369;
-
- -webkit-animation-name: glowLargeButtons;
- -webkit-animation-duration: 1s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-direction: alternate;
- -webkit-animation-timing-function: ease-in-out;
-
- -moz-animation-name: glowLargeButtons;
- -moz-animation-duration: 1s;
- -moz-animation-iteration-count: infinite;
- -moz-animation-direction: alternate;
- -moz-animation-timing-function: ease-in-out;
-
- -ms-animation-name: glowLargeButtons;
- -ms-animation-duration: 1s;
- -ms-animation-iteration-count: infinite;
- -ms-animation-direction: alternate;
- -ms-animation-timing-function: ease-in-out;
-
- -o-animation-name: glowLargeButtons;
- -o-animation-duration: 1s;
- -o-animation-iteration-count: infinite;
- -o-animation-direction: alternate;
- -o-animation-timing-function: ease-in-out;
-
- animation-name: glowLargeButtons;
- animation-duration: 1s;
- animation-iteration-count: infinite;
- animation-direction: alternate;
- animation-timing-function: ease-in-out;
-}
-
-/* default buttons hover glow */
-@-webkit-keyframes glowLargeButtonsHover {
- 0% {
- -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-@-moz-keyframes glowLargeButtonsHover {
- 0% {
- -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-@-ms-keyframes glowLargeButtonsHover {
- 0% {
- -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-@-o-keyframes glowLargeButtonsHover {
- 0% {
- -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-@keyframes glowLargeButtonsHover {
- 0% {
- box-shadow: 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- box-shadow: 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-
-/* default buttons hover */
-input[type='submit']:hover,
-input[type='button'].default:hover,
-.largeButtons ul li.default a:hover {
- -webkit-box-shadow: 0 0 10px #fa2;
- -moz-box-shadow: 0 0 10px #fa2;
- -ms-box-shadow: 0 0 10px #fa2;
- -o-box-shadow: 0 0 10px #fa2;
- box-shadow: 0 0 10px #fa2;
-
- -webkit-animation-name: glowLargeButtonsHover;
- -webkit-animation-duration: 1s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-direction: alternate;
- -webkit-animation-timing-function: ease-in-out;
-
- -moz-animation-name: glowLargeButtonsHover;
- -moz-animation-duration: 1s;
- -moz-animation-iteration-count: infinite;
- -moz-animation-direction: alternate;
- -moz-animation-timing-function: ease-in-out;
-
- -ms-animation-name: glowLargeButtonsHover;
- -ms-animation-duration: 1s;
- -ms-animation-iteration-count: infinite;
- -ms-animation-direction: alternate;
- -ms-animation-timing-function: ease-in-out;
-
- -o-animation-name: glowLargeButtonsHover;
- -o-animation-duration: 1s;
- -o-animation-iteration-count: infinite;
- -o-animation-direction: alternate;
- -o-animation-timing-function: ease-in-out;
-
- animation-name: glowLargeButtonsHover;
- animation-duration: 1s;
- animation-iteration-count: infinite;
- animation-direction: alternate;
- animation-timing-function: ease-in-out;
-}
-
-/* default buttons active glow */
-@-webkit-keyframes glowDefaultLargeButtonsActive {
- 0% {
- -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
- 100% {
- -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
-}
-@-moz-keyframes glowDefaultLargeButtonsActive {
- 0% {
- -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
- 100% {
- -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
-}
-@-ms-keyframes glowDefaultLargeButtonsActive {
- 0% {
- -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
- 100% {
- -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
-}
-@-o-keyframes glowDefaultLargeButtonsActive {
- 0% {
- -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
- 100% {
- -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
-}
-@keyframes glowDefaultLargeButtonsActive {
- 0% {
- box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
- 100% {
- box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
-}
-
-/* default buttons active */
-input[type='submit']:focus,
-input[type='button'].default:focus,
-.largeButtons ul li.default a:focus,
-input[type='submit']:active,
-input[type='button'].default:active,
-.largeButtons ul li.default a:active {
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-
- -webkit-animation-name: glowDefaultLargeButtonsActive;
- -webkit-animation-duration: 1s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-direction: alternate;
- -webkit-animation-timing-function: ease-in-out;
-
- -moz-animation-name: glowDefaultLargeButtonsActive;
- -moz-animation-duration: 1s;
- -moz-animation-iteration-count: infinite;
- -moz-animation-direction: alternate;
- -moz-animation-timing-function: ease-in-out;
-
- -ms-animation-name: glowDefaultLargeButtonsActive;
- -ms-animation-duration: 1s;
- -ms-animation-iteration-count: infinite;
- -ms-animation-direction: alternate;
- -ms-animation-timing-function: ease-in-out;
-
- -o-animation-name: glowDefaultLargeButtonsActive;
- -o-animation-duration: 1s;
- -o-animation-iteration-count: infinite;
- -o-animation-direction: alternate;
- -o-animation-timing-function: ease-in-out;
-
- animation-name: glowDefaultLargeButtonsActive;
- animation-duration: 1s;
- animation-iteration-count: infinite;
- animation-direction: alternate;
- animation-timing-function: ease-in-out;
-}
-
-/* disabled buttons */
-input[disabled='disabled'],
-input[type='button'][disabled='disabled'],
-.largeButtons ul li.disabled a {
- color: #999;
- cursor: default;
- border-width: 1px;
- border-style: solid;
- border-color: #ccc #bbb #aaa;
-}
-
-
-
-/* -- -- -- -- -- Border -- -- -- -- -- */
-
-.border {
- border: 1px solid #ccc;
- border-radius: 5px;
- margin-top: 15px;
-}
-
-.border.overlay {
- margin-top: 0 !important;
-}
-
-/* -- -- -- -- -- Box Title -- -- -- -- -- */
-
-.boxTitle {
- border-radius: 7px;
- background-color: #369;
- /* Disabled, because the WoltLab header-image is not LGPL
- Activate it if you want to test your own header image */
- /* background-image: url('../images/header.png'); */
- background-position: left top;
- background-repeat: repeat-x;
-
- -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- -ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- -o-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-}
-
-.boxTitle > hgroup {
- text-shadow: 0 -1px 0 #000;
- color: #fff;
- padding: 7px;
- display: inline-block;
-}
-
-.boxTitle > hgroup a, .boxTitle > a {
- text-decoration: none;
- color: #fff;
-}
-
-.boxTitle > hgroup h1 {
- display: inline-block;
-}
-
-.boxTitle > hgroup h2 {
- font-size: 85%;
- color: rgba(255, 255, 255, .9);
- margin-top: 5px;
-}
-
-.boxTitle img.handle {
- cursor: pointer;
- margin-top: -1px;
- float: right !important;
- height: 16px;
- width: 16px;
-}
-
-
-
-/* -- -- -- -- -- Tab Menu -- -- -- -- -- */
-
-/* Parts taken from jQuery UI @ themes/base/jquery.ui.tabs.css */
-
-/* Tab Menu */
-
-.tabMenu {
- text-shadow: 0 1px 0 #fff;
- /* This is the general toggle switch for tab menu orientation (options: left|center|right) */
- text-align: center;
- white-space: nowrap;
- background-color: none;
- margin-top: 15px;
- padding: 0 5px;
- display: block;
- position: relative;
-}
-
-.tabMenu:after {
- content: '';
- display: block;
- clear: both;
-}
-
-.tabMenu li {
- white-space: nowrap;
- list-style: none;
- display: inline-block;
-}
-
-.tabMenu li a {
- font-size: 110%;
- text-decoration: none;
- color: #999;
- cursor: pointer;
- padding: 10px 15px 7px;
- border-width: 1px 1px 0 1px;
- border-style: solid;
- border-color: #ddd;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- background-color: rgba(0, 0, 0, .05);
- display: inline-block;
- position: relative;
- bottom: -1px;
- z-index: 10;
- max-width: 200px;
- overflow: hidden;
-}
-
-.tabMenu li:not(.ui-state-active) a:hover {
- color: #666;
- border-width: 1px;
- border-style: solid;
- border-color: #fa2 #fa2 #ccc;
- background-color: #fff9f4;
-}
-
-.tabMenu li:not(.ui-state-active) a:active,
-.tabMenu li:not(.ui-state-active) a:focus {
- border-width: 1px;
- border-style: solid;
- border-color: #fa2 #fa2 #ccc;
-
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-}
-
-.tabMenu li.ui-state-active a {
- font-size: 130%;
- font-weight: bold;
- color: #333 !important;
- border-width: 1px;
- border-style: solid;
- border-color: #ccc;
- border-bottom-color: #fff;
- background-color: rgba(255, 255, 255, 1);
- bottom: 0;
- z-index: 30;
-}
-
-.tabMenu li.ui-state-active a,
-.tabMenu li.ui-state-disabled a,
-.tabMenu li.ui-state-processing a {
- cursor: default;
+
+.tabMenu li.ui-state-active a,
+.tabMenu li.ui-state-disabled a,
+.tabMenu li.ui-state-processing a {
+ cursor: default;
}
/* Tab Menu Content */
/* Page-Navigation Popups are still missing */
.pageNavigation ul li:not(.children) {
- color: #999;
-
- border-width: 1px;
- border-style: solid;
- border-color: #ccc #bbb #aaa;
border-radius: 3px;
- background-color: #fefefe;
- background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-
display: inline-block;
position: relative;
}
.pageNavigation ul li.disabled {
cursor: not-allowed;
- border: 1px solid rgba(0, 0, 0, .1);
- background-image: none;
+ border: 1px solid rgba(0, 0, 0, .1) !important;
+ background-image: none !important;
}
.pageNavigation ul li:after {
width: 16px;
}
-.pageNavigation ul li:not(.disabled):hover {
- color: #666;
- border-width: 1px;
- border-style: solid;
- border-color: #ffc053 #fa2 #fc9e07;
-
- background-color: #fff9f4;
- background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-}
-
.pageNavigation ul li.skip {
- padding: 2px 2px 1px 3px;
- top: -1px;
-}
-
-.pageNavigation ul li a {
- text-shadow: 0 1px 0 #fff;
- text-decoration: none;
- color: #999;
- display: inline-block;
-}
-
-.pageNavigation ul li:not(.disabled):hover a {
- color: #666;
-}
-
-.pageNavigation ul li:not(.skip) a {
- padding: 3px 5px;
-}
-
-.pageNavigation ul li:not(.disabled):active,
-.pageNavigation ul li:not(.disabled):focus {
- color: #333;
- border-width: 1px;
- border-style: solid;
- border-color: #fc9e07 #fa2 #ffc053;
-
- background-color: #fff9f4;
- background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+ padding: 2px 2px 1px 3px;
+ top: -1px;
+}
+
+.pageNavigation ul li a {
+ text-shadow: 0 1px 0 #fff;
+ text-decoration: none;
+ color: #999;
+ display: inline-block;
+}
+
+.pageNavigation ul li:not(.disabled):hover a {
+ color: #666;
+}
+
+.pageNavigation ul li:not(.skip) a {
+ padding: 3px 5px;
}
.pageNavigation ul li:active a,
.pageNavigation ul li.active,
.pageNavigation ul li.active:hover {
- text-shadow: 0 1px 0 #000;
- color: #fff;
- border: 1px solid rgba(0, 0, 0, .3);
+ text-shadow: 0 1px 0 #000 !important;
+ color: #fff !important;
+ border: 1px solid rgba(0, 0, 0, .3) !important;
- background-color: rgba(0, 0, 0, .5);
- background-image: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px);
- background-image: -moz-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px);
- background-image: -o-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px);
- background-image: -ms-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px);
- background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px);
+ background-color: rgba(0, 0, 0, .5) !important;
+ background-image: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
+ background-image: -moz-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
+ background-image: -o-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
+ background-image: -ms-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
+ background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
padding: 3px 5px;
}
+/* ToDo: Children */
+
.pageNavigation ul li.children,
.pageNavigation ul li.children:hover,
.pageNavigation ul li.children:active,
visibility: hidden;
}
-div.ui-widget-overlay {
- background-color: #000;
- opacity: .6;
- position: fixed;
- top: 0;
- left: 0;
+div.ui-widget-overlay {
+ background-color: #000;
+ opacity: .6;
+ position: fixed;
+ top: 0;
+ left: 0;
+}
+
+
+
+/* ToDo: Is all that really necessary? We wanted to support good browsers only */
+
+.ui-helper-clearfix {
+ display: inline-block;
+}
+
+/* Required comment for clearfix to work in Opera \*/
+* html .ui-helper-clearfix {
+ height: 1%;
+}
+
+.ui-helper-clearfix {
+ display: block;
+}
+
+/* end clearfix */
+.ui-helper-zfix {
+ opacity: 0;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+}
+
+.ui-dialog {
+ background-color: rgba(255, 255, 255, .9);
+}
+
+
+/* -- -- -- -- -- Badges -- -- -- -- -- */
+
+/* Globals */
+
+.badge {
+ font-size: 85%;
+ text-shadow: none;
+ color: #666;
+ border-radius: 13px;
+ background-color: #fff;
+ margin-right: -3px;
+ margin-left: 3px;
+ padding: 1px 5px 2px;
+ display: inline-block;
+ position: relative;
+ top: -1px;
+}
+
+/* Types */
+
+.badgeNote {
+ border: 1px solid #ccc;
+}
+
+.badgeInfo {
+ color: #68b;
+ border: 1px solid #9be;
+ background-color: #def;
+}
+
+.badgeSuccess {
+ color: #090;
+ border: 1px solid #0c0;
+ background-color: #efe;
+}
+
+.badgeWarning {
+ color: #990;
+ border: 1px solid #cc0;
+ background-color: #ffd;
+}
+
+.badgeError {
+ color: #c00;
+ border: 1px solid #f99;
+ background-color: #fee;
+}
+
+/* Buttons */
+
+.badgeButton,
+.clipboardEditor > ul > li {
+ cursor: pointer;
+
+ border-radius: 30px;
+
+ margin-right: 0;
+ margin-left: 0;
+ padding: 3px 10px 5px;
+ display: inline-block;
+}
+
+li.badgeButton,
+li > .badgeButton {
+ margin-top: 7px;
+ margin-right: 3px;
+ margin-left: 3px;
+ float: left;
+}
+
+.badgeButton,
+.badgeButton a,
+.clipboardEditor > ul > li > span {
+ text-decoration: none !important;
+}
+
+
+
+/* -- -- -- -- -- GUI Widgets -- -- -- -- -- */
+
+/* Balloon Tooltips */
+
+#balloonTooltip {
+ font-size: .85em;
+ color: #fff;
+ border: 1px solid rgba(255, 255, 255, .7);
+ border-radius: 5px;
+ background-color: rgba(0, 0, 0, .7);
+ padding: 5px 10px 7px;
+ max-width: 300px;
+ z-index: 900;
+
+ box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+}
+
+.balloonTooltip {
+ /* Not reliable, sometimes not wanted! */
+ cursor: pointer;
+}
+
+/* Collapsible */
+
+.collapsible {
+ margin: 5px 0 0 10px;
+ float: left;
+}
+
+.collapsible img {
+ height: 16px;
+ width: 16px;
+}
+
+
+
+/* -- -- -- -- -- CSS Experiments (active) -- -- -- -- -- */
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* -- -- -- -- -- ToDo: Clipboard Editor -- -- -- -- -- */
+
+.clipboardEditor {
+
+}
+
+.clipboardEditor > ul {
+ font-size: .85em;
+ margin: 6px 3px 0;
+ display: block;
+ position: relative;
+ float: left;
+}
+
+.clipboardEditor > ul > li > span {
+ background-image: url('../../icon/dropdown1.svg');
+ background-position: right center;
+ background-repeat: no-repeat;
+ padding-right: 12px;
+ display: inline-block;
+}
+
+/* Dropdown */
+
+.clipboardEditor ul > li > ol {
+ border: 1px solid rgba(255, 255, 255, .7);
+ border-radius: 5px;
+ background-color: rgba(0, 0, 0, .7);
+ margin-top: 23px;
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+ -moz-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+ -ms-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+ -o-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+ box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+}
+
+.clipboardEditor ul > li > ol > li {
+ text-shadow: none;
+ color: #ccc;
+ cursor: pointer;
+ padding: 5px 7px;
+
+ -webkit-transition: all .2s linear;
+ -moz-transition: all .2s linear;
+ -ms-transition: all .2s linear;
+ -o-transition: all .2s linear;
+ transition: all .2s linear;
+}
+
+.clipboardEditor ul > li > ol > li:first-child {
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+}
+
+.clipboardEditor ul > li > ol > li:last-child {
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+}
+
+.clipboardEditor ul > li > ol > li:hover {
+ color: #fff;
+ background-color: rgba(0, 0, 0, .5);
+}
+
+.clipboardEditor ul > li > ol > li:first-child {
+ border-top-width: 0;
}
-/* ToDo: Is all that really necessary? We wanted to support good browsers only */
-.ui-helper-clearfix {
- display: inline-block;
-}
-/* Required comment for clearfix to work in Opera \*/
-* html .ui-helper-clearfix {
- height: 1%;
-}
+/* ToDo: Proxy Loading */
-.ui-helper-clearfix {
- display: block;
+.actionProxyLoading {
+
}
-/* end clearfix */
-.ui-helper-zfix {
- opacity: 0;
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
-}
-.ui-dialog {
- background-color: rgba(255, 255, 255, .9);
-}
-/* -- -- -- -- -- Badges -- -- -- -- -- */
-/* Globals */
-.badge {
- font-size: 85%;
- text-shadow: none;
- color: #666;
- border-radius: 13px;
- background-color: #fff;
- margin-right: -3px;
- margin-left: 3px;
- padding: 1px 5px 2px;
- display: inline-block;
- position: relative;
- top: -1px;
-}
-/* Types */
-.badgeNote {
- border: 1px solid #ccc;
-}
-.badgeInfo {
- color: #68b;
- border: 1px solid #9be;
- background-color: #def;
-}
-.badgeSuccess {
- color: #090;
- border: 1px solid #0c0;
- background-color: #efe;
-}
-.badgeWarning {
- color: #990;
- border: 1px solid #cc0;
- background-color: #ffd;
-}
-.badgeError {
- color: #c00;
- border: 1px solid #f99;
- background-color: #fee;
-}
-/* Buttons */
+
+
+
+
+/* -- -- -- -- -- Global Button Color & Effect Library -- -- -- -- -- */
+
+/* Put individual settings to their respective declarations */
+
+/* normal state */
+input[type='reset'],
+input[type='submit'],
+input[type='button'],
+.largeButtons ul li a,
.badgeButton,
-.clipboardEditor > ul > li {
- cursor: pointer;
+.pageNavigation ul li:not(.children),
+.clipboardEditor > ul > li,
+.preInput .dropdownCaption {
+ text-decoration: none;
+ text-shadow: 0 1px 0 #fff;
+ color: #999;
border-width: 1px;
border-style: solid;
border-color: #ccc #bbb #aaa;
- border-radius: 30px;
background-color: #fefefe;
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-
- margin-right: 0;
- margin-left: 0;
- padding: 3px 10px 5px;
- display: inline-block;
-
- -webkit-transition: all .2s linear;
- -moz-transition: all .2s linear;
- -ms-transition: all .2s linear;
- -o-transition: all .2s linear;
- transition: all .2s linear;
-}
-li.badgeButton,
-li > .badgeButton {
- margin-top: 7px;
- margin-right: 3px;
- margin-left: 3px;
- float: left;
+ -webkit-transition: all .1s linear;
+ -moz-transition: all .1s linear;
+ -ms-transition: all .1s linear;
+ -o-transition: all .1s linear;
+ transition: all .1s linear;
}
+/* hover state */
+input[type='reset']:hover,
+input[type='submit']:hover,
+input[type='button']:hover,
+input[type='button'].default:hover,
+.largeButtons ul li a:hover,
.badgeButton:hover,
-.clipboardEditor > ul > li:hover {
+.pageNavigation ul li:not(.disabled):hover,
+.clipboardEditor > ul > li:hover,
+.preInput:hover .dropdownCaption {
+ color: #666;
border-width: 1px;
border-style: solid;
border-color: #ffc053 #fa2 #fc9e07;
background-color: #fff9f4;
- background-image: -webkit-linear-gradient(rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
- background-image: -moz-linear-gradient(rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
- background-image: -ms-linear-gradient(rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
- background-image: -o-linear-gradient(rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
- background-image: linear-gradient(rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
+ background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+ background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+ background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+ background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+ background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
}
+/* active state */
+input[type='reset']:focus,
+input[type='submit']:focus,
+input[type='button']:focus,
+input[type='button'].default:focus,
+.largeButtons ul li a:focus,
.badgeButton:active,
.badgeButton:focus,
+.pageNavigation ul li:not(.disabled):active,
+.preInput .dropdownCaption:focus,
+input[type='reset']:active,
+input[type='submit']:active,
+input[type='button']:active,
+input[type='button'].default:active,
+.largeButtons ul li a:active,
.clipboardEditor > ul > li:active,
-.clipboardEditor > ul > li:focus {
+.clipboardEditor > ul > li:focus,
+.pageNavigation ul li:not(.disabled):focus,
+.preInput .dropdownCaption:active {
+ color: #333;
border-width: 1px;
border-style: solid;
border-color: #fc9e07 #fa2 #ffc053;
background-color: #fff9f4;
- background-image: -webkit-linear-gradient(bottom, rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
- background-image: -moz-linear-gradient(bottom, rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
- background-image: -ms-linear-gradient(bottom, rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
- background-image: -o-linear-gradient(bottom, rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
- background-image: linear-gradient(bottom, rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
+ background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+ background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+ background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+ background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+ background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
}
-.badgeButton,
-.badgeButton a,
-.clipboardEditor > ul > li > span {
- text-decoration: none !important;
- text-shadow: 0 1px 0 #fff;
- color: #999;
+/* default glow */
+@-webkit-keyframes glowLargeButtons {
+ 0% {
+ -webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
+ }
+ 100% {
+ -webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+ }
}
-
-.badgeButton:hover,
-.badgeButton a:hover,
-.clipboardEditor > ul > li:hover > span {
- text-decoration: none !important;
- color: #666;
+@-moz-keyframes glowLargeButtons {
+ 0% {
+ -moz-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
+ }
+ 100% {
+ -moz-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+ }
}
-
-.badgeButton:active,
-.badgeButton:focus,
-.badgeButton a:active,
-.badgeButton a:focus,
-.clipboardEditor > ul > li:active > span,
-.clipboardEditor > ul > li:focus > span {
- color: #333;
+@-ms-keyframes glowLargeButtons {
+ 0% {
+ -ms-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
+ }
+ 100% {
+ -ms-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+ }
}
-
-
-
-/* -- -- -- -- -- GUI Widgets -- -- -- -- -- */
-
-/* Balloon Tooltips */
-
-#balloonTooltip {
- font-size: .85em;
- color: #fff;
- border: 1px solid rgba(255, 255, 255, .7);
- border-radius: 5px;
- background-color: rgba(0, 0, 0, .7);
- padding: 5px 10px 7px;
- max-width: 300px;
- z-index: 900;
-
- box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+@-o-keyframes glowLargeButtons {
+ 0% {
+ -o-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
+ }
+ 100% {
+ -o-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+ }
+}
+@keyframes glowLargeButtons {
+ 0% {
+ box-shadow: 0 0 13px rgba(102, 153, 204, .3);
+ }
+ 100% {
+ box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+ }
}
-.balloonTooltip {
- /* Not reliable, sometimes not wanted! */
- cursor: pointer;
+/* default normal state */
+input[type='submit'],
+input[type='button'].default,
+.largeButtons ul li.default a {
+ color: #69c;
+ border-width: 1px;
+ border-style: solid;
+ border-color: #7aade0 #69c #5285b8;
+
+ background-color: #e7f2fd;
+ background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+ background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+ background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+ background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+ background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+
+ -webkit-box-shadow: 0 0 10px #369;
+ -moz-box-shadow: 0 0 10px #369;
+ -ms-box-shadow: 0 0 10px #369;
+ -o-box-shadow: 0 0 10px #369;
+ box-shadow: 0 0 10px #369;
+
+ -webkit-animation-name: glowLargeButtons;
+ -webkit-animation-duration: 1s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: ease-in-out;
+
+ -moz-animation-name: glowLargeButtons;
+ -moz-animation-duration: 1s;
+ -moz-animation-iteration-count: infinite;
+ -moz-animation-direction: alternate;
+ -moz-animation-timing-function: ease-in-out;
+
+ -ms-animation-name: glowLargeButtons;
+ -ms-animation-duration: 1s;
+ -ms-animation-iteration-count: infinite;
+ -ms-animation-direction: alternate;
+ -ms-animation-timing-function: ease-in-out;
+
+ -o-animation-name: glowLargeButtons;
+ -o-animation-duration: 1s;
+ -o-animation-iteration-count: infinite;
+ -o-animation-direction: alternate;
+ -o-animation-timing-function: ease-in-out;
+
+ animation-name: glowLargeButtons;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-timing-function: ease-in-out;
}
-/* Collapsible */
-
-.collapsible {
- margin: 5px 0 0 10px;
- float: left;
+/* default hover glow */
+@-webkit-keyframes glowLargeButtonsHover {
+ 0% {
+ -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+ }
+ 100% {
+ -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+ }
}
-
-.collapsible img {
- height: 16px;
- width: 16px;
+@-moz-keyframes glowLargeButtonsHover {
+ 0% {
+ -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+ }
+ 100% {
+ -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+ }
}
-
-
-
-/* -- -- -- -- -- CSS Experiments (active) -- -- -- -- -- */
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* Clipboard API - TESTING ONLY / TODO */
-
-.clipboardEditor {
-
+@-ms-keyframes glowLargeButtonsHover {
+ 0% {
+ -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+ }
+ 100% {
+ -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+ }
}
-
-.clipboardEditor > ul {
- font-size: .85em;
- margin: 6px 3px 0;
- display: block;
- position: relative;
- float: left;
+@-o-keyframes glowLargeButtonsHover {
+ 0% {
+ -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+ }
+ 100% {
+ -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+ }
}
-
-.clipboardEditor > ul > li > span {
- background-image: url('../../icon/dropdown1.svg');
- background-position: right center;
- background-repeat: no-repeat;
- padding-right: 12px;
- display: inline-block;
+@keyframes glowLargeButtonsHover {
+ 0% {
+ box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+ }
+ 100% {
+ box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+ }
}
-.clipboardEditor ul > li > ol {
- border: 1px solid rgba(255, 255, 255, .7);
- border-radius: 5px;
- background-color: rgba(0, 0, 0, .7);
- margin-top: 23px;
- position: absolute;
- top: 0;
- left: 0;
+/* default hover state */
+input[type='submit']:hover,
+input[type='button'].default:hover,
+.largeButtons ul li.default a:hover {
+ -webkit-box-shadow: 0 0 10px #fa2;
+ -moz-box-shadow: 0 0 10px #fa2;
+ -ms-box-shadow: 0 0 10px #fa2;
+ -o-box-shadow: 0 0 10px #fa2;
+ box-shadow: 0 0 10px #fa2;
- -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -moz-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -ms-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -o-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-}
-
-.clipboardEditor ul > li > ol > li {
- text-shadow: none;
- color: #ccc;
- cursor: pointer;
- padding: 5px 7px;
+ -webkit-animation-name: glowLargeButtonsHover;
+ -webkit-animation-duration: 1s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: ease-in-out;
- -webkit-transition: all .2s linear;
- -moz-transition: all .2s linear;
- -ms-transition: all .2s linear;
- -o-transition: all .2s linear;
- transition: all .2s linear;
+ -moz-animation-name: glowLargeButtonsHover;
+ -moz-animation-duration: 1s;
+ -moz-animation-iteration-count: infinite;
+ -moz-animation-direction: alternate;
+ -moz-animation-timing-function: ease-in-out;
+
+ -ms-animation-name: glowLargeButtonsHover;
+ -ms-animation-duration: 1s;
+ -ms-animation-iteration-count: infinite;
+ -ms-animation-direction: alternate;
+ -ms-animation-timing-function: ease-in-out;
+
+ -o-animation-name: glowLargeButtonsHover;
+ -o-animation-duration: 1s;
+ -o-animation-iteration-count: infinite;
+ -o-animation-direction: alternate;
+ -o-animation-timing-function: ease-in-out;
+
+ animation-name: glowLargeButtonsHover;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-timing-function: ease-in-out;
}
-.clipboardEditor ul > li > ol > li:first-child {
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
+/* default active glow */
+@-webkit-keyframes glowDefaultLargeButtonsActive {
+ 0% {
+ -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+ }
+ 100% {
+ -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+ }
}
-
-.clipboardEditor ul > li > ol > li:last-child {
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
+@-moz-keyframes glowDefaultLargeButtonsActive {
+ 0% {
+ -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+ }
+ 100% {
+ -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+ }
}
-
-.clipboardEditor ul > li > ol > li:hover {
- color: #fff;
- background-color: rgba(0, 0, 0, .5);
+@-ms-keyframes glowDefaultLargeButtonsActive {
+ 0% {
+ -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+ }
+ 100% {
+ -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+ }
}
-
-.clipboardEditor ul > li > ol > li:first-child {
- border-top-width: 0;
+@-o-keyframes glowDefaultLargeButtonsActive {
+ 0% {
+ -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+ }
+ 100% {
+ -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+ }
+}
+@keyframes glowDefaultLargeButtonsActive {
+ 0% {
+ box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+ }
+ 100% {
+ box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+ }
}
+/* default active state */
+input[type='submit']:focus,
+input[type='button'].default:focus,
+.largeButtons ul li.default a:focus,
+input[type='submit']:active,
+input[type='button'].default:active,
+.largeButtons ul li.default a:active {
+ -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+ -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+ -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+ -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+
+ -webkit-animation-name: glowDefaultLargeButtonsActive;
+ -webkit-animation-duration: 1s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: ease-in-out;
+
+ -moz-animation-name: glowDefaultLargeButtonsActive;
+ -moz-animation-duration: 1s;
+ -moz-animation-iteration-count: infinite;
+ -moz-animation-direction: alternate;
+ -moz-animation-timing-function: ease-in-out;
+
+ -ms-animation-name: glowDefaultLargeButtonsActive;
+ -ms-animation-duration: 1s;
+ -ms-animation-iteration-count: infinite;
+ -ms-animation-direction: alternate;
+ -ms-animation-timing-function: ease-in-out;
+
+ -o-animation-name: glowDefaultLargeButtonsActive;
+ -o-animation-duration: 1s;
+ -o-animation-iteration-count: infinite;
+ -o-animation-direction: alternate;
+ -o-animation-timing-function: ease-in-out;
+
+ animation-name: glowDefaultLargeButtonsActive;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-timing-function: ease-in-out;
+}
+/* disabled state */
+input[disabled='disabled'],
+input[type='button'][disabled='disabled'],
+.largeButtons ul li.disabled a {
+ color: #999;
+ cursor: default;
+ border-width: 1px;
+ border-style: solid;
+ border-color: #ccc #bbb #aaa;
+}
-/* ToDo: Proxy Loading */
-
-.actionProxyLoading {
-
-}
-/* -- -- -- -- -- Global Button Color & Effect Library -- -- -- -- -- */
projects / GitHub / WoltLab / WCF.git / commitdiff