--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+ <title>Error</title>
+ <desc>Error Icon</desc>
+
+ <!--
+ @author Alexander Ebert
+ @copyright 2001-2012 WoltLab GmbH
+ @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ -->
+
+ <defs>
+ <style type="text/css">
+ <![CDATA[
+ .surface { fill: #C00; }
+ .shadow { fill: #fff; }
+ ]]>
+ </style>
+ </defs>
+
+ <g id="IconError">
+ <path class="shadow" opacity=".8" d="M10.691,2H5.308L1.5,5.807v5.384L5.308,15h5.384l3.809-3.809V5.807L10.691,2z M12.397,7.694
+ c0.046,0.106-0.381,0.994-0.381,0.994c-0.125,0.173-0.473,1.233-0.473,1.233c-0.213,1.066-1.197,2.363-1.197,2.363
+ c-0.256,0.484-1.277,0.662-1.277,0.662l-0.712-0.002c-1.02,0.227-1.66-0.318-1.66-0.318c-0.481-0.43-0.901-1.156-0.901-1.156
+ c0.023-0.115-0.627-1.742-0.627-1.742C5.147,9.605,4.457,8.643,4.457,8.643C4.37,8.507,3.902,7.784,3.902,7.784
+ C3.106,6.663,3.68,6.517,3.68,6.517c0.325-0.156,0.694,0.607,0.694,0.607c0.067,0.23,0.305,0.514,0.305,0.514
+ C4.78,7.814,5.21,8.272,5.21,8.272c0.155,0.129,0.376,0.389,0.376,0.389C5.798,9.077,6.097,8.72,6.097,8.72
+ C6.129,8.667,5.69,7.456,5.69,7.456c-0.13-0.144-0.267-1.278-0.267-1.278C5.343,6.024,5.253,5.453,5.253,5.453
+ c-0.146-0.74,0.381-0.658,0.381-0.658c0.455-0.012,0.493,0.925,0.493,0.925c0.059,0.168,0.091,0.452,0.091,0.452
+ c0.06,0.051,0.304,0.75,0.304,0.75c0.181,0.233,0.376,0.843,0.376,0.843C7.051,8.25,7.159,7.934,7.159,7.934
+ C7.09,7.823,7.043,6.587,7.043,6.587C6.996,6.479,6.913,5.653,6.913,5.653c0.019-0.095-0.128-0.835-0.128-0.835
+ C6.509,4.271,6.878,4.006,6.878,4.006c0.582-0.067,0.678,0.466,0.678,0.466c0.062,0.031,0.237,0.855,0.237,0.855
+ C7.92,5.372,8.082,6.49,8.082,6.49c0.084,0.037,0.145,0.977,0.145,0.977c0.04,0.482,0.14,0.324,0.14,0.324
+ c0.186-0.024,0.174-0.303,0.174-0.303C8.523,7.346,8.599,6.629,8.599,6.629C8.566,6.445,8.681,5.874,8.681,5.874
+ c0.054-0.148-0.013-0.497-0.013-0.497l-0.07-0.33C8.471,4.093,9.102,4.333,9.102,4.333c0.336,0.025,0.43,1.031,0.43,1.031
+ C9.508,5.597,9.563,5.767,9.563,5.767c0.055,0.069,0.073,1.002,0.073,1.002C9.664,6.853,9.64,7.54,9.64,7.54
+ C9.602,7.731,9.647,7.957,9.647,7.957c0.062,0.033,0.129,0.717,0.129,0.717c0.073,0.43,0.635,0.676,0.635,0.676
+ c0.149,0.049,0.493-0.875,0.493-0.875c0.059-0.069,0.156-0.326,0.156-0.326c0.328-1.084,1.083-0.999,1.083-0.999
+ C12.7,7.198,12.397,7.694,12.397,7.694z"/>
+ <path class="surface" d="M10.691,1H5.308L1.5,4.808v5.385L5.308,14h5.384l3.809-3.808V4.808L10.691,1z M12.397,6.695
+ c0.046,0.106-0.381,0.994-0.381,0.994c-0.125,0.173-0.473,1.234-0.473,1.234c-0.213,1.065-1.197,2.362-1.197,2.362
+ c-0.256,0.484-1.277,0.662-1.277,0.662l-0.712-0.002c-1.02,0.227-1.66-0.318-1.66-0.318c-0.481-0.43-0.901-1.156-0.901-1.156
+ c0.023-0.115-0.627-1.742-0.627-1.742C5.147,8.605,4.457,7.643,4.457,7.643C4.37,7.507,3.902,6.785,3.902,6.785
+ C3.106,5.664,3.68,5.517,3.68,5.517c0.325-0.156,0.694,0.607,0.694,0.607c0.067,0.23,0.305,0.514,0.305,0.514
+ C4.78,6.815,5.21,7.272,5.21,7.272c0.155,0.129,0.376,0.389,0.376,0.389C5.798,8.078,6.097,7.72,6.097,7.72
+ C6.129,7.667,5.69,6.456,5.69,6.456c-0.13-0.144-0.267-1.278-0.267-1.278C5.343,5.025,5.253,4.454,5.253,4.454
+ c-0.146-0.74,0.381-0.658,0.381-0.658c0.455-0.012,0.493,0.925,0.493,0.925C6.186,4.89,6.218,5.173,6.218,5.173
+ c0.06,0.051,0.304,0.75,0.304,0.75c0.181,0.233,0.376,0.843,0.376,0.843C7.051,7.25,7.159,6.935,7.159,6.935
+ C7.09,6.823,7.043,5.588,7.043,5.588C6.996,5.48,6.913,4.654,6.913,4.654c0.019-0.095-0.128-0.835-0.128-0.835
+ C6.509,3.271,6.878,3.006,6.878,3.006c0.582-0.067,0.678,0.466,0.678,0.466c0.062,0.031,0.237,0.855,0.237,0.855
+ C7.92,4.373,8.082,5.49,8.082,5.49c0.084,0.037,0.145,0.977,0.145,0.977c0.04,0.482,0.14,0.324,0.14,0.324
+ c0.186-0.024,0.174-0.303,0.174-0.303C8.523,6.347,8.599,5.629,8.599,5.629C8.566,5.445,8.681,4.874,8.681,4.874
+ c0.054-0.148-0.013-0.497-0.013-0.497l-0.07-0.33C8.471,3.094,9.102,3.334,9.102,3.334c0.336,0.025,0.43,1.031,0.43,1.031
+ C9.508,4.597,9.563,4.767,9.563,4.767C9.618,4.836,9.637,5.77,9.637,5.77C9.664,5.854,9.64,6.541,9.64,6.541
+ C9.602,6.731,9.647,6.957,9.647,6.957C9.709,6.99,9.776,7.674,9.776,7.674c0.073,0.43,0.635,0.676,0.635,0.676
+ c0.149,0.048,0.493-0.875,0.493-0.875c0.059-0.069,0.156-0.326,0.156-0.326c0.328-1.084,1.083-0.999,1.083-0.999
+ C12.7,6.198,12.397,6.695,12.397,6.695z"/>
+ </g>
+</svg>
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+ <title>Info</title>
+ <desc>Info Icon</desc>
+
+ <!--
+ @author Alexander Ebert
+ @copyright 2001-2012 WoltLab GmbH
+ @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ -->
+
+ <defs>
+ <style type="text/css">
+ <![CDATA[
+ .surface { fill: #68B; }
+ .shadow { fill: #fff; }
+ ]]>
+ </style>
+ </defs>
+
+ <g id="IconInfo">
+ <path class="shadow" opacity=".8" d="M8,2C4.41,2,1.5,4.91,1.5,8.5C1.5,12.091,4.41,15,8,15c3.59,0,6.5-2.909,6.5-6.5C14.5,4.91,11.59,2,8,2z
+ M9.374,12.08c-0.354,0.134-0.638,0.233-0.849,0.303c-0.211,0.068-0.457,0.104-0.736,0.104c-0.43,0-0.763-0.099-1.002-0.296
+ c-0.238-0.198-0.356-0.449-0.356-0.753c0-0.118,0.009-0.239,0.027-0.362c0.018-0.124,0.047-0.264,0.086-0.419l0.443-1.48
+ c0.04-0.143,0.073-0.277,0.1-0.403c0.027-0.128,0.04-0.243,0.04-0.348c0-0.189-0.041-0.321-0.124-0.396
+ C6.92,7.955,6.763,7.918,6.528,7.918c-0.114,0-0.232,0.017-0.353,0.051c-0.12,0.034-0.224,0.066-0.31,0.096l0.118-0.457
+ c0.291-0.111,0.569-0.207,0.833-0.286c0.265-0.08,0.516-0.12,0.753-0.12c0.427,0,0.755,0.097,0.987,0.292
+ c0.23,0.194,0.346,0.447,0.346,0.758c0,0.064-0.008,0.178-0.023,0.339c-0.017,0.162-0.047,0.311-0.09,0.447L8.35,10.515
+ c-0.036,0.117-0.068,0.253-0.098,0.405c-0.028,0.152-0.043,0.268-0.043,0.345c0,0.196,0.047,0.33,0.14,0.4
+ c0.093,0.071,0.254,0.106,0.483,0.106c0.107,0,0.229-0.017,0.364-0.054c0.138-0.034,0.234-0.066,0.296-0.093L9.374,12.08z
+ M9.297,6.089C9.09,6.271,8.842,6.361,8.552,6.361s-0.539-0.09-0.747-0.271C7.597,5.909,7.494,5.69,7.494,5.433
+ s0.104-0.477,0.312-0.659S8.262,4.5,8.552,4.5S9.09,4.591,9.297,4.774c0.205,0.183,0.308,0.402,0.308,0.659
+ S9.502,5.909,9.297,6.089z"/>
+ <path class="surface" d="M8,1C4.41,1,1.5,3.91,1.5,7.5C1.5,11.091,4.41,14,8,14c3.59,0,6.5-2.909,6.5-6.5C14.5,3.91,11.59,1,8,1z
+ M9.374,11.08c-0.354,0.134-0.638,0.233-0.849,0.303c-0.211,0.068-0.457,0.104-0.736,0.104c-0.43,0-0.763-0.099-1.002-0.296
+ c-0.238-0.198-0.356-0.449-0.356-0.753c0-0.118,0.009-0.239,0.027-0.362c0.018-0.124,0.047-0.264,0.086-0.419l0.443-1.481
+ c0.04-0.142,0.073-0.276,0.1-0.403c0.027-0.127,0.04-0.243,0.04-0.348c0-0.189-0.041-0.321-0.124-0.396
+ C6.92,6.955,6.763,6.918,6.528,6.918c-0.114,0-0.232,0.017-0.353,0.051c-0.12,0.034-0.224,0.066-0.31,0.096l0.118-0.457
+ c0.291-0.111,0.569-0.207,0.833-0.286c0.265-0.08,0.516-0.12,0.753-0.12c0.427,0,0.755,0.097,0.987,0.292
+ c0.23,0.194,0.346,0.447,0.346,0.758c0,0.064-0.008,0.178-0.023,0.34c-0.017,0.162-0.047,0.311-0.09,0.446L8.35,9.515
+ C8.314,9.632,8.282,9.768,8.252,9.92c-0.028,0.152-0.043,0.268-0.043,0.345c0,0.196,0.047,0.33,0.14,0.4
+ c0.093,0.071,0.254,0.106,0.483,0.106c0.107,0,0.229-0.017,0.364-0.054c0.138-0.034,0.234-0.066,0.296-0.093L9.374,11.08z
+ M9.297,5.089C9.09,5.271,8.842,5.361,8.552,5.361s-0.539-0.09-0.747-0.271C7.597,4.909,7.494,4.69,7.494,4.433
+ s0.104-0.477,0.312-0.659S8.262,3.5,8.552,3.5S9.09,3.591,9.297,3.774c0.205,0.183,0.308,0.402,0.308,0.659
+ S9.502,4.909,9.297,5.089z"/>
+ </g>
+</svg>
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+ <title>Success</title>
+ <desc>Success Icon</desc>
+
+ <!--
+ @author Alexander Ebert
+ @copyright 2001-2012 WoltLab GmbH
+ @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ -->
+
+ <defs>
+ <style type="text/css">
+ <![CDATA[
+ .surface { fill: #090; }
+ .shadow { fill: #fff; }
+ ]]>
+ </style>
+ </defs>
+
+ <g id="IconSuccess">
+ <path class="shadow" opacity=".8" d="M8,2C4.41,2,1.5,4.91,1.5,8.5C1.5,12.089,4.41,15,8,15c3.59,0,6.5-2.911,6.5-6.5C14.5,4.91,11.59,2,8,2z
+ M7.186,13.74c-0.018,0.028-0.048,0.046-0.082,0.048H7.099c-0.032,0-0.062-0.015-0.082-0.04l-3.69-4.805
+ C3.304,8.912,3.3,8.871,3.317,8.836C3.334,8.801,3.37,8.779,3.409,8.779l1.773,0.004l1.629,2.208l3.92-6.47
+ c0.019-0.03,0.052-0.049,0.087-0.049l2.058-0.013c0.001,0,0.001,0,0.001,0c0.037,0,0.071,0.02,0.09,0.053
+ c0.018,0.033,0.017,0.073-0.003,0.104L7.186,13.74z"/>
+ <path class="surface" d="M8,1C4.41,1,1.5,3.91,1.5,7.5C1.5,11.089,4.41,14,8,14c3.59,0,6.5-2.911,6.5-6.5C14.5,3.91,11.59,1,8,1z
+ M7.186,12.74c-0.018,0.028-0.048,0.046-0.082,0.048H7.099c-0.032,0-0.062-0.015-0.082-0.04l-3.69-4.804
+ C3.304,7.913,3.3,7.871,3.317,7.836C3.334,7.801,3.37,7.779,3.409,7.779l1.773,0.004l1.629,2.208l3.92-6.47
+ c0.019-0.03,0.052-0.049,0.087-0.049l2.058-0.013c0.001,0,0.001,0,0.001,0c0.037,0,0.071,0.02,0.09,0.053
+ c0.018,0.033,0.017,0.073-0.003,0.104L7.186,12.74z"/>
+ </g>
+</svg>
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" xml:space="preserve">
+
+ <title>Warning</title>
+ <desc>Warning Icon</desc>
+
+ <!--
+ @author Alexander Ebert
+ @copyright 2001-2012 WoltLab GmbH
+ @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ -->
+
+ <defs>
+ <style type="text/css">
+ <![CDATA[
+ .surface {fill: #990;}
+ .shadow {fill: #fff;}
+ ]]>
+ </style>
+ </defs>
+
+ <g id="IconWarning">
+ <path class="shadow" opacity=".8" d="M8.4799805,2.3774414c-0.2636719-0.4824219-0.6953125-0.4824219-0.9589844,0L1.1049805,14.1220703
+ C0.8413086,14.6054688,1.0756836,15,1.6254883,15H14.375c0.5498047,0,0.7841797-0.3945312,0.5205078-0.8779297
+ L8.4799805,2.3774414z M7.0532227,6.5c0-0.5498047,0.4262695-1,0.9472656-1s0.9472656,0.4501953,0.9472656,1v1.3554688
+ c0,0.5498047-0.1020508,1.4384766-0.2265625,1.9736328L8.675293,10.0263672C8.5507812,10.5615234,8.2441406,11,7.9941406,11
+ c-0.2495117,0-0.5537109-0.4384766-0.675293-0.9755859L7.2744141,9.8310547
+ C7.152832,9.2939453,7.0532227,8.4052734,7.0532227,7.8554688V6.5z M8.0014648,13.9628906
+ c-0.5825195,0-1.0541992-0.4667969-1.0541992-1.0390625c0-0.5761719,0.4716797-1.0390625,1.0541992-1.0390625
+ c0.5805664,0,1.0512695,0.4628906,1.0512695,1.0390625C9.0527344,13.4960938,8.5820312,13.9628906,8.0014648,13.9628906z"/>
+ <path class="surface" d="M8.4799805,1.3774414c-0.2636719-0.4824219-0.6953125-0.4824219-0.9589844,0L1.1049805,13.1220703
+ C0.8413086,13.6054688,1.0756836,14,1.6254883,14H14.375c0.5498047,0,0.7841797-0.3945312,0.5205078-0.8779297
+ L8.4799805,1.3774414z M7.0532227,5.5c0-0.5498047,0.4262695-1,0.9472656-1s0.9472656,0.4501953,0.9472656,1v1.3554688
+ c0,0.5498047-0.1020508,1.4384766-0.2265625,1.9741211L8.675293,9.0263672C8.5507812,9.5615234,8.2441406,10,7.9941406,10
+ c-0.2495117,0-0.5537109-0.4384766-0.675293-0.9755859L7.2744141,8.8305664
+ c-0.121582-0.5361328-0.2211914-1.425293-0.2211914-1.9750977V5.5z M8.0014648,12.9628906
+ c-0.5825195,0-1.0541992-0.4667969-1.0541992-1.0390625c0-0.5761719,0.4716797-1.0390625,1.0541992-1.0390625
+ c0.5805664,0,1.0512695,0.4628906,1.0512695,1.0390625C9.0527344,12.4960938,8.5820312,12.9628906,8.0014648,12.9628906z"/>
+ </g>
+</svg>
-/* todo: ############## System Notifications (Inline) ############## */
-
+/* ### system notifications ### */
/* default values */
.info,
.error,
.success,
.warning {
- font-weight: bold;
+ border-width: 1px;
+ border-style: solid;
line-height: 1.5;
margin-top: @wcfGapMedium;
padding: @wcfGapSmall @wcfGapMedium @wcfGapSmall 50px;
position: relative;
- .borderRadius();
- .boxShadowNative(~"0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2)");
+ .borderRadius(7px);
&:after {
background-repeat: no-repeat, repeat;
/* types */
.info {
+ background-color: @wcfInfoBackgroundColor;
+ border-color: @wcfInfoBorderColor;
color: @wcfInfoColor;
- .linearGradient(@wcfInfoBackgroundColor2, @wcfInfoBackgroundColor, @wcfInfoBackgroundColor2);
- .textShadow(@wcfInfoBackgroundColor2);
+ .textShadow(@wcfInfoBackgroundColor);
&:after {
- background-image: url('../icon/infoInverse.svg');
+ background-image: url('../icon/infoBlue.svg');
}
- > a {
+ > a, > a:hover {
color: @wcfInfoColor;
}
}
.success {
+ background-color: @wcfSuccessBackgroundColor;
+ border-color: @wcfSuccessBorderColor;
color: @wcfSuccessColor;
- .linearGradient(@wcfSuccessBackgroundColor2, @wcfSuccessBackgroundColor, @wcfSuccessBackgroundColor2);
- .textShadow(@wcfSuccessBackgroundColor2);
+ .textShadow(@wcfSuccessBackgroundColor);
&:after {
- background-image: url('../icon/successInverse.svg');
+ background-image: url('../icon/successGreen.svg');
}
- > a {
- color: @wcfInfoColor;
+ > a, > a:hover {
+ color: @wcfSuccessColor;
}
}
.warning {
+ background-color: @wcfWarningBackgroundColor;
+ border-color: @wcfWarningBorderColor;
color: @wcfWarningColor;
- .linearGradient(@wcfWarningBackgroundColor2, @wcfWarningBackgroundColor, @wcfWarningBackgroundColor2);
.textShadow(@wcfWarningBackgroundColor);
&:after {
- background-image: url('../icon/warningInverse.svg');
+ background-image: url('../icon/warningYellow.svg');
}
- > a {
- color: @wcfInfoColor;
+ > a, > a:hover {
+ color: @wcfWarningColor;
}
}
.error {
+ background-color: @wcfErrorBackgroundColor;
+ border-color: @wcfErrorBorderColor;
color: @wcfErrorColor;
- .linearGradient(@wcfErrorBackgroundColor2, @wcfErrorBackgroundColor, @wcfErrorBackgroundColor2);
- .textShadow(@wcfErrorBackgroundColor2);
+ .textShadow(@wcfErrorBackgroundColor);
&:after {
- background-image: url('../icon/errorInverse.svg');
+ background-image: url('../icon/errorRed.svg');
}
- > a {
- color: @wcfInfoColor;
+ > a, > a:hover {
+ color: @wcfErrorColor;
}
}
/* inline errors */
.innerError {
- //clear: both;
- color: @wcfErrorColor !important;
- display: table !important;
+ background-color: @wcfErrorBackgroundColor;
+ border: 1px solid @wcfErrorBorderColor;
+ color: @wcfErrorColor;
+ display: table;
line-height: 1.5;
margin-top: 7px;
padding: 2px 10px;
position: relative; /* Firefox support (from version 10 on) is buggy */
- .borderRadius();
- .boxShadowNative(~"0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2)");
- .linearGradient(@wcfErrorBackgroundColor2, @wcfErrorBackgroundColor, @wcfErrorBackgroundColor2);
- .textShadow(@wcfErrorBackgroundColor2);
+ .borderRadius(7px);
/* pointer */
&:after {
border: 7px solid transparent;
- border-bottom-color: @wcfErrorBackgroundColor;
+ border-bottom-color: @wcfErrorBorderColor;
border-top-width: 0;
content: "";
display: inline-block;
left: 9px;
position: absolute;
- top: -6px;
+ top: -7px;
z-index: 100;
}
// sets default text shadows depending on background color
.textShadow(@backgroundColor) when (lightness(@backgroundColor) >= 40%) {
- text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+ text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
.textShadow(@backgroundColor) when (lightness(@backgroundColor) < 60%) {
- text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, .8);
}
/* CSS 3 */
}
/* primary */
-/* todo */
.button.buttonPrimary,
input[type='submit']:not([disabled]),
input[type='button']:not([disabled]).buttonPrimary,
.textShadow(@wcfButtonPrimaryHoverBackgroundColor);
}
-/* active (pressed) */
-/* todo */
-.button:active,
-input[type='reset']:not([disabled]):active,
-input[type='submit']:not([disabled]):active,
-input[type='button']:not([disabled]):active,
-button:not([disabled]):active,
-.dropdownOpen .dropdownToggle.button {
- border-color: darken(@wcfButtonHoverBorderColor, 7%) @wcfButtonHoverBorderColor lighten(@wcfButtonHoverBorderColor, 7%);
- color: @wcfButtonHoverColor;
-
- .boxShadowNative(~"0 1px 3px rgba(0, 0, 0, .3), inset 0 0 10px rgba(239, 239, 239, 1)");
- .linearGradient(lighten(@wcfButtonHoverBackgroundColor, 5%), lighten(@wcfButtonHoverBackgroundColor, 10%), lighten(@wcfButtonHoverBackgroundColor, 5%) 2px, @wcfButtonHoverBackgroundColor, bottom);
- .textShadow(@wcfButtonHoverBackgroundColor);
-}
-
/* disabled state */
-/* todo */
input[type='reset']:disabled,
input[type='submit']:disabled,
input[type='button']:disabled,
button:disabled {
- border-color: darken(@wcfButtonBorderColor, 7%) @wcfButtonBorderColor lighten(@wcfButtonBorderColor, 7%);
+ background-color: @wcfButtonBackgroundColor;
+ border-color: @wcfButtonBorderColor;
+ color: lighten(@wcfButtonColor, 10%);
cursor: not-allowed;
- color: @wcfButtonColor;
+ text-decoration: none;
- .boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);
- .linearGradient(lighten(@wcfButtonBackgroundColor, 5%), lighten(@wcfButtonBackgroundColor, 10%), lighten(@wcfButtonBackgroundColor, 5%) 2px, @wcfButtonBackgroundColor, bottom);
.textShadow(@wcfButtonBackgroundColor);
}
/* active (permanently) */
-/* todo */
.button.active,
input[type='button'].active,
button.active,
.button.active:hover,
input[type='button'].active:hover,
button.active:hover {
+ background-color: @wcfButtonColor;
border-color: darken(@wcfButtonColor, 5%);
- color: lighten(@wcfButtonBackgroundColor, 5%);
+ color: @wcfButtonBackgroundColor;
- .boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);
- .linearGradient(@wcfButtonColor, darken(@wcfButtonColor, 10%), @wcfButtonColor 3px);
- .textShadow(darken(@wcfButtonColor, 10%));
+ .boxShadowInset(0, 1px, rgba(0, 0, 0, .1), 1px);
+ .textShadow(@wcfButtonColor);
}
-
/* button list */
.buttonList {
> li {
> dd {
margin-left: 250px;
- > small {
+ > small:not(.innerError) {
color: @wcfDimmedColor;
display: block;
margin-top: 2px;
margin: 0;
}
-select[multiple] {
- font-family: 'Courier New', Courier, monospace;
-}
-
/* normal state */
input[type='text'],
input[type='search'],
background-color: @wcfInputHoverBackgroundColor;
border-color: @wcfInputHoverBorderColor;
outline: 0;
-
- /*todo*/
- //.boxShadowNative(~"0 0 5px" fade(@wcfInputHoverBorderColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
}
/* read only state */
input[type='password'][readonly],
textarea[readonly],
select[multiple][readonly] {
- background-color: transparent;
+ background-color: darken(@wcfInputBackgroundColor, 5%);
border-color: @wcfInputBorderColor;
}
input[type='password'][disabled],
textarea[disabled],
select[multiple][disabled] {
- background-color: transparent;
+ background-color: darken(@wcfInputBackgroundColor, 5%);
border-color: @wcfInputBorderColor;
color: @wcfDimmedColor;
+ cursor: not-allowed;
}
/* success state */
-/* todo */
.formSuccess {
input[type='text'],
input[type='search'],
input[type='url'],
input[type='password'],
textarea {
- border-color: @wcfSuccessBackgroundColor;
- }
-}
-
-input:required,
-input[pattern],
-textarea:required,
-textarea[pattern],
-input[type='url'],
-input[type='email'] {
- &:valid {
- background-color: rgba(232, 248, 218, 1);
- border-color: @wcfSuccessBackgroundColor;
+ background-color: @wcfSuccessBackgroundColor;
+ border-color: @wcfSuccessBorderColor;
}
}
/* error state */
-/* todo */
.formError {
input[type='text'],
input[type='search'],
input[type='url'],
input[type='password'],
textarea {
- border-color: @wcfErrorBackgroundColor;
+ background-color: @wcfErrorBackgroundColor;
+ border-color: @wcfErrorBorderColor
}
}
}
}
-input:required,
-input[pattern],
-textarea:required,
-textarea[pattern],
-input[type='url'],
-input[type='email'] {
- &:invalid {
- background-color: rgba(247, 217, 214, 1);
- border-color: @wcfErrorBackgroundColor;
- }
-}
-
/* width */
textarea {
width: 99%;
}
}
+/* todo */
+::selection {
+ text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
+ color: #300;
+ background-color: rgba(255, 170, 34, .7);
+}
+
.invisible {
display: none;
}
}
/* ### badges ### */
-// sets default badge shadows depending on background color
-.badgeShadow(@backgroundColor) when (lightness(@backgroundColor) >= 50%) {
- box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, .8);
-}
-.badgeShadow(@backgroundColor) when (lightness(@backgroundColor) < 50%) {
- box-shadow: 0px 0px 1px 0px rgba(255, 255, 255, .8);
-}
-
/* default values */
.badge {
- background-color: @wcfContentBackgroundColor;
+ background-color: @wcfColor;
border-radius: 13px;
- color: @wcfColor;
+ color: @wcfContentBackgroundColor;
display: inline-block;
font-size: @wcfSmallFontSize;
font-weight: normal !important;
text-shadow: none !important;
white-space: nowrap;
- .badgeShadow(@wcfContentBackgroundColor);
-
/* colors */
&.badgeUpdate {
background-color: @wcfTabularBoxBackgroundColor;
}
&.badgeGreen {
- background-color: @wcfSuccessBackgroundColor;
- color: @wcfSuccessColor;
+ background-color: @wcfSuccessColor;
+ color: @wcfSuccessBackgroundColor;
}
&.badgeRed {
- background-color: @wcfErrorBackgroundColor;
- color: @wcfErrorColor;
+ background-color: @wcfErrorColor;
+ color: @wcfErrorBackgroundColor;
}
&.badgeInverse {
background-color: @wcfTabularBoxColor;
color: @wcfTabularBoxBackgroundColor;
-
- .badgeShadow(@wcfTabularBoxBackgroundColor);
}
}
}
&.active, &.active:hover {
- border: 1px solid darken(@wcfButtonColor, 5%);
- color: lighten(@wcfButtonBackgroundColor, 5%);
padding: 2px 0;
-
- /* todo */
- .linearGradient(@wcfButtonColor, darken(@wcfButtonColor, 10%), @wcfButtonColor 3px);
- .textShadow(#000);
}
img {
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonBackgroundColor', 'rgba(249, 249, 249, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonBorderColor', 'rgba(221, 221, 221, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonColor', 'rgba(102, 102, 102, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryBackgroundColor', 'rgba(244, 244, 244, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryBorderColor', 'rgba(221, 221, 221, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryBackgroundColor', 'rgba(211, 232, 254, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryBorderColor', 'rgba(136, 194, 255, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryColor', 'rgba(102, 153, 204, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryHoverBackgroundColor', 'rgba(211, 232, 254, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryHoverBorderColor', 'rgba(136, 194, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryHoverColor', 'rgba(102, 153, 204, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonHoverBackgroundColor', 'rgba(244, 244, 244, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonHoverBorderColor', 'rgba(221, 221, 221, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonHoverColor', 'rgba(63, 127, 191, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryHoverBackgroundColor', 'darken(@wcfButtonPrimaryBackgroundColor, 3%)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryHoverBorderColor', 'darken(@wcfButtonPrimaryBorderColor, 10%)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryHoverColor', '@wcfButtonPrimaryColor');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonHoverBackgroundColor', 'darken(@wcfButtonBackgroundColor, 3%)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonHoverBorderColor', 'darken(@wcfButtonBorderColor, 10%)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonHoverColor', '@wcfButtonColor');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBackgroundColor', 'rgba(255, 255, 255, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputColor', 'rgba(102, 102, 102, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBorderColor', 'rgba(204, 204, 204, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfPageLinkColor', 'rgba(63, 127, 191, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfPageLinkHoverColor', 'rgba(15, 79, 143, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarBackgroundColor', 'rgba(244, 244, 244, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDimmedColor', 'rgba(102, 102, 102, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDimmedColor', 'rgba(136, 136, 136, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfLabelColor', 'rgba(102, 102, 102, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeadlineColor', 'rgba(102, 102, 102, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeadlineFontFamily', '"Trebuchet MS", Arial, sans-serif');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSubHeadlineFontSize', '140%');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTitleFontSize', '120%');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSmallFontSize', '85%');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfWarningColor', 'rgba(166, 120, 0, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfWarningBackgroundColor', 'rgba(255, 235, 183, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfWarningBackgroundColor2', 'rgba(225, 177, 46, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfErrorColor', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfErrorBackgroundColor', 'rgba(252, 131, 118, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfErrorBackgroundColor2', 'rgba(201, 76, 67, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSuccessColor', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSuccessBackgroundColor', 'rgba(155, 221, 95, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSuccessBackgroundColor2', 'rgba(61, 149, 0, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInfoColor', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInfoBackgroundColor', 'rgba(76, 161, 252, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInfoBackgroundColor2', 'rgba(14, 80, 170, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfWarningColor', 'rgba(153, 153, 0, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfWarningBackgroundColor', 'rgba(255, 255, 221, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfWarningBorderColor', 'rgba(204, 204, 0, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfErrorColor', 'rgba(204, 0, 0, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfErrorBackgroundColor', 'rgba(255, 238, 238, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfErrorBorderColor', 'rgba(255, 153, 153, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSuccessColor', 'rgba(0, 153, 0, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSuccessBackgroundColor', 'rgba(238, 255, 238, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSuccessBorderColor', 'rgba(0, 204, 0, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInfoColor', 'rgba(102, 136, 187, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInfoBackgroundColor', 'rgba(221, 238, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInfoBorderColor', 'rgba(153, 187, 238, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTooltipBackgroundColor', 'rgba(0, 0, 0, .8)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTooltipColor', 'rgba(255, 255, 255, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfGapTiny', '4px');
projects / GitHub / WoltLab / WCF.git / commitdiff
