From e6cc25954f1f1b1f210c933a62b3cf1158f4c2a8 Mon Sep 17 00:00:00 2001 From: Luzifr Date: Wed, 14 Mar 2012 20:38:07 +0100 Subject: [PATCH] Small LESS-update & more LESS-files --- wcfsetup/install/files/style/message.css | 895 +++++++++++++++++++++++ wcfsetup/install/files/style/user.less | 427 +++++++++++ wcfsetup/install/files/style/wcf.less | 59 +- 3 files changed, 1380 insertions(+), 1 deletion(-) create mode 100755 wcfsetup/install/files/style/message.css create mode 100755 wcfsetup/install/files/style/user.less diff --git a/wcfsetup/install/files/style/message.css b/wcfsetup/install/files/style/message.css new file mode 100755 index 0000000000..fa252bb780 --- /dev/null +++ b/wcfsetup/install/files/style/message.css @@ -0,0 +1,895 @@ +/** + * Message Styles + * + * @author Harald Szekely + * @copyright 2011 WoltLab GmbH + */ + +/* ############## Article ############## */ + +/* Globals */ + +.wcf-message { + border: 1px solid #bcd; + background-color: #d8e7f5; + margin-top: 15px; + position: relative; + + -webkit-box-shadow: 0 3px 7px #eee; + -moz-box-shadow: 0 3px 7px #eee; + -ms-box-shadow: 0 3px 7px #eee; + -o-box-shadow: 0 3px 7px #eee; + box-shadow: 0 3px 7px #eee; +} + +.wcf-message:after { + content: ''; + display: block; + clear: both; +} + +/* Message Deleted */ + +.wcf-message.deleted { + opacity: .5; +} + +/* Special */ + +.wcf-messageRed { + border-color: #c00; + background-color: #fee; +} + + + +/* -- -- -- -- Message Content -- -- -- -- -- */ + +/* Globals */ + +.wcf-message .wcf-messageContent { + border-radius: 5px; + background-color: #fcfdfe; +} + +li:nth-child(2n+1) .wcf-message .wcf-messageContent { + /* Auto-colorer for every 2nd message */ + background-color: #f3f7fb; +} + +/* Orientation */ + +@media screen and (min-width: 480px) { + + .wcf-message.left .wcf-messageContent { + border-left: 1px solid #bcd; + margin: 0 0 0 211px; + } + + .wcf-message.right .wcf-messageContent { + border-right: 1px solid #bcd; + margin: 0 211px 0 0; + } + +} + +@media screen and (max-width: 480px) { + + .wcf-message .wcf-messageContent { + border-top: 1px solid #bcd; + margin: 0; + } + +} + + + +/* Message Header */ + +.wcf-message .wcf-messageContent header { + position: relative; +} + +@media screen and (min-width: 480px) { + + .wcf-message .wcf-messageContent header { + padding: 20px 20px 5px; + } + +} + +@media screen and (max-width: 480px) { + + .wcf-message .wcf-messageContent header { + padding: 10px 20px 0; + } + +} + + + +/* Message Header Contents */ + +.wcf-message .wcf-messageContent header time { + font-size: 85%; + color: #999; + margin-top: 7px; +} + +.wcf-message .wcf-messageContent header .wcf-likesDisplay { + margin-top: 1px; + margin-left: 5px; + display: inline-block; +} + +.wcf-message .wcf-messageContent header .wcf-likesDisplay .wcf-badge { + font-size: 76%; + margin-left: 0; + top: 0; +} + +.wcf-message .wcf-messageContent header .wcf-messageTitle { + font-weight: bold; + color: #999; + text-shadow: 0 1px 1px rgba(255, 255, 255, 1); +} + +@media screen and (min-width: 480px) { + + .wcf-message .wcf-messageContent header .wcf-messageTitle { + font-size: 130%; + padding: 13px 0 0; + } + +} + +@media screen and (max-width: 480px) { + + .wcf-message .wcf-messageContent header .wcf-messageTitle { + font-size: 170%; + padding: 7px 0 0; + } + +} + +.wcf-message header .wcf-messageCounter { + font-size: 90%; + font-weight: bold; + float: right; + margin-left: 7px; +} + +.wcf-message header .wcf-messageCounter a { + padding: 2px 5px; +} + + + +/* -- -- -- -- Message Pointer -- -- -- -- -- */ + +/* Level 1 - Globals */ + +.wcf-message header > .pointer { + display: block !important; + position: absolute; + width: 0; + height: 0; + z-index: 100; +} + +/* Level 2 - Globals */ + +.wcf-message header > .pointer > span { + display: block; + position: absolute; + width: 0; + height: 0; +} + +@media screen and (min-width: 480px) { + + /* Level 1 - Globals */ + + .wcf-message header > .pointer { + border-width: 20px; + top: 35px; + } + + /* Level 1 - Left-Right */ + + .wcf-message.left header > .pointer { + border-style: solid solid solid none; + border-color: transparent #bcd transparent transparent; + left: -20px; + } + + .wcf-message.right header > .pointer { + border-style: solid none solid solid; + border-color: transparent transparent transparent #bcd; + right: -20px; + } + + /* Level 2 - Globals */ + + .wcf-message header > .pointer > span { + border-width: 20px; + top: -20px; + } + + /* Level 2 - Left-Right */ + + .wcf-message.left header > .pointer > span { + border-style: solid solid solid none; + border-color: transparent #fcfdfe transparent transparent; + left: 1px; + } + + .wcf-message.right header > .pointer > span { + border-style: solid none solid solid; + border-color: transparent transparent transparent #fcfdfe; + right: 1px; + } + + li:nth-child(2n+1) .wcf-message.left header > .pointer > span { + /* Auto-colorer for every 2nd message-left */ + border-right-color: #f3f7fb; + } + + li:nth-child(2n+1) .wcf-message.right header > .pointer > span { + /* Auto-colorer for every 2nd message-right arrow */ + border-left-color: #f3f7fb; + } + +} + +@media screen and (max-width: 480px) { + + /* Level 1 - Globals */ + + .wcf-message header > .pointer { + border-width: 10px; + top: -10px; + } + + /* Level 1 - Left-Right */ + + .wcf-message header > .pointer { + border-style: none solid solid solid; + border-color: transparent transparent #bcd transparent; + left: 47%; + } + + /* Level 2 - Globals */ + + .wcf-message header > .pointer > span { + border-width: 10px; + top: 1px; + } + + /* Level 2 - Left-Right */ + + .wcf-message header > .pointer > span { + border-style: none solid solid solid; + border-color: transparent transparent #fcfdfe transparent; + left: -10px; + } + + li:nth-child(2n+1) .wcf-message header > .pointer > span { + /* Auto-colorer for every 2nd message arrow */ + border-bottom-color: #f3f7fb; + } + +} + + + +/* -- -- -- -- Message Content -- -- -- -- -- */ + +/* Message Body */ + +.wcf-message .wcf-messageBody { + color: #666; + display: block; + position: relative; +} + +@media screen and (min-width: 480px) { + + .wcf-message .wcf-messageBody { + font-size: 90%; + line-height: 1.75; + padding: 10px 20px 1px; + } + +} + +@media screen and (max-width: 480px) { + + .wcf-message .wcf-messageBody { + font-size: 120%; + line-height: 1.9; + padding: 5px 20px 1px; + } + +} + +.wcf-message .wcf-messageBody:after { + content: ''; + display: block; + clear: both; +} + +.wcf-message .wcf-messageBody > div { + border-top: 1px dotted #ccc; + padding: 10px 0; + display: block; + overflow: hidden; +} + +.wcf-message .wcf-messageBody .wcf-signature { + overflow: hidden; +} + +@media screen and (min-width: 480px) { + + .wcf-message .wcf-messageBody .wcf-signature { + padding: 10px 0 20px; + } + +} + +@media screen and (max-width: 480px) { + + .wcf-message .wcf-messageBody .wcf-signature { + padding: 5px 0; + } + +} + + + +/* -- -- -- -- Message Sidebar -- -- -- -- -- */ + +/* Globals */ + +.wcf-message .wcf-messageSidebar { + font-size: 90%; + line-height: 1.3; + position: relative; +} + +@media screen and (min-width: 480px) { + + .wcf-message .wcf-messageSidebar { + text-align: center; + margin-bottom: -1px; + padding: 10px 20px 20px; + /* Width toggle */ + width: 170px; + } +} + +@media screen and (max-width: 480px) { + + .wcf-message .wcf-messageSidebar { + text-align: left; + padding: 5px 0 10px; + width: 100%; + } + +} + +.wcf-message .wcf-messageSidebar:after { + content: ''; + display: block; + clear: both; +} + +/* Orientation */ + +@media screen and (min-width: 480px) { + + .wcf-message.left .wcf-messageSidebar { + float: left; + } + + .wcf-message.right .wcf-messageSidebar { + float: right; + } + +} + +@media screen and (max-width: 480px) { + + .wcf-message .wcf-messageSidebar { + float: none; + } + +} + + + +/* Message Sidebar Header */ + +.wcf-message .wcf-messageSidebar header .wcf-username, +.wcf-message .wcf-messageSidebar header .wcf-username a { + font-size: 110%; + font-weight: bold; + text-decoration: none; + text-shadow: 0 1px 1px rgba(255, 255, 255, 1); + color: #369; + padding: 1px 3px; +} + +/* Message Sidebar Contents */ + +.wcf-message .wcf-messageSidebar a { + color: #369; +} + +.wcf-message .wcf-messageSidebar a:hover { + color: #036; +} + +.wcf-message .wcf-messageSidebar .userTitle .wcf-badge { + font-size: 95%; + color: rgba(255, 255, 255, 1); + border-radius: 13px; + background-color: #369; + margin-top: 3px; + padding: 0 10px; + display: inline-block; + + -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 1); + -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 1); + -ms-box-shadow: 0 1px 0 rgba(255, 255, 255, 1); + -o-box-shadow: 0 1px 0 rgba(255, 255, 255, 1); + box-shadow: 0 1px 0 rgba(255, 255, 255, 1); +} + +.wcf-message .wcf-messageSidebar .userRank { + font-size: 95%; + color: rgba(255, 255, 255, 1); + margin: 3px 0 0; + padding: 0 0 7px; + display: block; +} + +.wcf-message .wcf-messageSidebar .wcf-userAvatar { + margin: 7px 0 0; + padding: 0 0 7px; + display: block; +} + +.wcf-message .wcf-messageSidebar .wcf-userAvatar img { + border: none; + padding: 0; +} + +.wcf-message .wcf-messageSidebar .userCredits { + font-size: 95%; + color: #369; + margin: 7px 0 0; + padding: 0 0 7px; + display: block; +} + +.wcf-message .wcf-messageSidebar .userCredits p, +.wcf-message .wcf-messageSidebar .userCredits a { + color: #369; +} + +.wcf-message .wcf-messageSidebar .userStatus, +.wcf-message .wcf-messageSidebar .userContacts { + color: #369; + margin: 7px 0 0; + display: block; +} + +.wcf-message .wcf-messageSidebar .userStatus ul, +.wcf-message .wcf-messageSidebar .userContact ul { + list-style-type: none; +} + +.wcf-message .wcf-messageSidebar .userStatus ul li, +.wcf-message .wcf-messageSidebar .userContact ul li { + display: inline; +} + +.wcf-message .wcf-messageSidebar .userStatus ul li a, +.wcf-message .wcf-messageSidebar .userContact ul li a { + text-align: left; + text-decoration: none; + margin: 0 -3px; + padding: 1px 3px 0; + display: inline-block; + + -webkit-transition: background-color .2s linear; + -moz-transition: background-color .2s linear; + -ms-transition: background-color .2s linear; + -o-transition: background-color .2s linear; + transition: background-color .2s linear; +} + +.wcf-message .wcf-messageSidebar .userStatus ul li a:hover, +.wcf-message .wcf-messageSidebar .userContacts ul li a:hover { + border-radius: 7px; + background-color: #bcd; + + -webkit-box-shadow: 0 1px 7px #eee; + -moz-box-shadow: 0 1px 7px #eee; + -ms-box-shadow: 0 1px 7px #eee; + -o-box-shadow: 0 1px 7px #eee; + box-shadow: 0 1px 7px #eee; +} + +.wcf-message .wcf-messageSidebar .userStatus ul li a span, +.wcf-message .wcf-messageSidebar .userContact ul li a span { + display: block; + position: absolute; + left: -9000px; + top: -9000px; +} +@media screen and (min-width: 480px) { + + /* Message Sidebar Dividers only when sidebar not on top */ + .wcf-message.dividers .wcf-userAvatar, + .wcf-message.dividers .userRank, + .wcf-message.dividers .userCredits, + .wcf-message.dividers .userStatus { + border-bottom: 1px dotted #bcd; + } + + .wcf-message.dividers .wcf-messageSidebar div:last-child { + border: 0; + } + + .wcf-message .wcf-messageSidebar > div > header, + .wcf-message .wcf-messageSidebar > div > div { + vertical-align: top; + } + +} + +@media screen and (max-width: 480px), screen and (max-device-width: 480px) { + + .wcf-message .wcf-messageSidebar { + display: table !important; + border-collapse: separate; + width: 100%; + } + + .wcf-message .wcf-messageSidebar > div { + display: table-row !important; + } + + .wcf-message .wcf-messageSidebar > div > header, + .wcf-message .wcf-messageSidebar > div > div { + padding: 10px !important; + display: table-cell !important; + vertical-align: top; + width: 25%; + } + + .wcf-message .wcf-messageSidebar header { + min-width: 25%; + } + + .wcf-message .wcf-messageSidebar header .wcf-username, + .wcf-message .wcf-messageSidebar header .wcf-username a { + font-size: 130%; + padding: 3px; + } + + .wcf-message .wcf-messageSidebar .wcf-userAvatar img { + height: auto; + width: 50%; + min-width: 50px; + } + + .wcf-message .wcf-messageSidebar .userCredits { + font-size: 75%; + } + +} + + + +/* -- -- -- -- Thread Starter Badge -- -- -- -- -- */ + +/* Globals */ + +.wcf-message .wcf-messageSidebar .userStatus .wbb-threadStarter { + border: 1px solid #ccc; + background-color: rgba(255, 255, 255, 1); + display: block !important; + position: absolute; +} + +@media screen and (min-width: 480px) { + + .wcf-message.left .wcf-messageSidebar .userStatus .wbb-threadStarter { + top: -3px; + left: 15px; + width: 16px; + height: 15px; + } + + .wcf-message.right .wcf-messageSidebar .userStatus .wbb-threadStarter { + top: -3px; + right: 15px; + width: 16px; + height: 15px; + } + +} + +@media screen and (max-width: 480px) { + + .wcf-message .wcf-messageSidebar .userStatus .wbb-threadStarter { + top: -3px; + left: 47%; + width: 16px; + height: 15px; + } + +} + +/* Level 1 - Globals */ + +.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer { + display: block !important; + position: absolute; + width: 0; + height: 0; + z-index: 100; +} + +/* Level 2 - Globals */ + +.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span { + display: block; + position: absolute; + width: 0; + height: 0; +} + +.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span img { + position: absolute; +} + +@media screen and (min-width: 480px), screen and (min-device-width: 480px) { + + /* Level 1 - Globals */ + + .wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer { + border-width: 9px; + top: 15px; + } + + /* Level 1 - Left-Right */ + + .wcf-message.left .wcf-messageSidebar .wbb-threadStarter > .pointer { + border-style: none solid solid solid; + border-color: #ccc #ccc transparent #ccc; + left: -1px; + } + + .wcf-message.right .wcf-messageSidebar .wbb-threadStarter > .pointer { + border-style: none solid solid solid; + border-color: #ccc #ccc transparent #ccc; + left: -1px; + } + + /* Level 2 - Globals */ + + .wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span { + border-width: 8px; + top: -1px; + } + + /* Level 2 - Left-Right */ + + .wcf-message.left .wcf-messageSidebar .wbb-threadStarter > .pointer > span { + border-style: none solid solid solid; + border-color: #fff #fff transparent #fff; + left: -8px; + } + + .wcf-message.right .wcf-messageSidebar .wbb-threadStarter > .pointer > span { + border-style: none solid solid solid; + border-color: #fff #fff transparent #fff; + right: -8px; + } + + .wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span img { + top: -13px; + left: -8px; + } + +} + +@media screen and (max-width: 480px), screen and (max-device-width: 480px) { + + /* Level 1 - Globals */ + + .wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer { + border-width: 9px; + top: 15px; + } + + /* Level 1 - Left-Right */ + + .wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer { + border-style: none solid solid solid; + border-color: #ccc #ccc transparent #ccc; + left: -1px; + } + + /* Level 2 - Globals */ + + .wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span { + border-width: 8px; + top: -1px; + } + + /* Level 2 - Left-Right */ + + .wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span { + border-style: none solid solid solid; + border-color: #fff #fff transparent #fff; + left: -8px; + } + + .wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span img { + top: -15px; + left: -8px; + } + +} + + + +/* -- -- -- -- Message Footer -- -- -- -- -- */ + +/* Footer */ + +.wcf-message .wcf-messageFooter { + font-size: 100%; + line-height: 1; + position: relative; +} + +.wcf-message .wcf-messageFooter:after { + content: ''; + display: block; + clear: both; +} + +/* Message Footer Signature */ + +.wcf-message .wcf-messageSignature { + color: #999; + border-top: 1px dotted #ccc; + display: block; +} + +/* Message Footer Navi */ + +.wcf-message .wcf-messageFooter nav { + /* General toggle switch for nav-bar orientation (options: left|center|right) */ + text-align: right; + position: absolute; +} + +@media screen and (min-width: 480px) { + + .wcf-message .wcf-messageSignature { + margin: 10px 0 0; + padding: 10px 0; + } + + .wcf-message .wcf-messageFooter nav { + right: -20px; + bottom: -1px; + opacity: 0; + + -webkit-transition: opacity .1s linear; + -moz-transition: opacity .1s linear; + -ms-transition: opacity .1s linear; + -o-transition: opacity .1s linear; + transition: opacity .1s linear; + } + + .wcf-message:hover .wcf-messageFooter nav { + opacity: 1; + } + +} + +@media screen and (max-width: 480px) { + + .wcf-message .wcf-messageSignature { + margin: 5px 0 0; + padding: 0; + } + + .wcf-message .wcf-messageFooter nav { + font-size: 125%; + right: -20px; + bottom: -1px; + opacity: 1; + } + + .wcf-message .wcf-messageFooter nav .wcf-smallButtons > li { + margin-left: -7px; + } + + .wcf-message .wcf-messageFooter nav .wcf-smallButtons > li > a { + padding: 5px 8px; + } + + .wcf-message .wcf-messageFooter nav .wcf-smallButtons > li > a > img { + width: 24px; + height: 24px; + } + + .wcf-message .wcf-messageFooter nav .wcf-smallButtons > li > a > span { + position: absolute; + left: -9000px; + top: -9000px; + } + +} + +/* ToDo: Reduced Messages */ + +.wcf-messageReduced .messageCredits { + display: table-cell; + width: 25%; +} + +.wcf-messageReduced .wcf-messageCredits > .wcf-userAvatar { + float: left; +} + +.wcf-messageReduced .wcf-messageCredits > div { + padding-left: 50px; + position: relative; +} + +.wcf-messageReduced .wcf-messageFooter > .wcf-breadcrumbs { + position: relative; + bottom: 10px; + left: 0; + opacity: 1; +} + + + +/* ToDo: CK-Editor */ + +.cke_skin_kama { + /* Removes the fat border around the editor, should better be moved into the wcf-stylesheet */ + padding: 0 !important; +} + +/* ToDo: Message Tabs */ + +/* Smilies */ + +.wcf-smiliesContent { + /* none */ + text-align: center; +} + +.wcf-smiliesContent li { + display: inline-block; + margin: 2px; + cursor: pointer; +} + + + + +/* -- -- -- -- -- EOF -- -- -- -- -- */ diff --git a/wcfsetup/install/files/style/user.less b/wcfsetup/install/files/style/user.less new file mode 100755 index 0000000000..20ec8cd5b6 --- /dev/null +++ b/wcfsetup/install/files/style/user.less @@ -0,0 +1,427 @@ +/** + * User Styles + * + * @author Harald Szekely + * @copyright 2011-2012 WoltLab GmbH + */ + +/* ############## User ############## */ + +/* User Avatar */ + +.wcf-userAvatar { + /* none */ +} + +/* User Avatar Boxed */ + +.wcf-userAvatarFramed { + /* none */ +} + +.wcf-userAvatarFramed img { + border: 1px @borderStyle @borderColor11; + background-color: @backColor1; + padding: 1px; +} + +/* User Name */ + +.wcf-username { + /* none */ +} + + + +/* ############## ToDo: Sidebar User Avatars ############## */ + +/* I've changed the layout, so the classes may not match any more! */ + +.wcf-sidebar .wcf-userAvatar { + text-align: center; + padding: 5px 25px; +} + +.wcf-sidebar .userFollowing ul, +.wcf-sidebar .userFollowers ul { + margin: 0 25px; + white-space: normal; +} + +.wcf-sidebar .userFollowing ul:after, +.wcf-sidebar .userFollowers ul:after { + content: ""; + height: 0; + display: block; + clear: both; +} + +.wcf-sidebar .userFollowing li, +.wcf-sidebar .userFollowers li { + float: left; + margin-right: 3px; +} + +.wcf-sidebar .userFollowing .wcf-userAvatarFramed, +.wcf-sidebar .userFollowers .wcf-userAvatarFramed { + display: inline-block; + padding: 3px 0 0; +} + +.wcf-sidebar .userFollowing .wcf-badgeButton, +.wcf-sidebar .userFollowers .wcf-badgeButton { + margin: 15px 15px 0; + float: right; +} + + + +/* ############## User Notifications ############## */ + +/* ToDo: + +Be careful with the following classes! + - [.scrollableContainer] Don't touch! + - [.scrollableItems] Keep the inflated width, you may lower its number but it must be incredible bloated + - [.scrollableItems > div] Must be a fixed-width float, otherwise it would break the "scrollable"-class from jQueryTools. + Do NOT use css-tables or [display: inline-block] as it won't work with the whole magic + +*/ + +/* ToDo: User Notification Container */ + +.userNotificationContainer { + width: 240px; + z-index: 500; /* adjust to any value you like, it *MUST* be higher than 'header.pageHeader nav.topMenu' */ + overflow: hidden; +} + +/* ToDo: Scrollable Container (jQueryTools - do not modify the class-name!) */ + +.scrollableContainer { + position: relative; + width: 250px; + overflow: hidden; +} + +.scrollableContainer .scrollableItems { + position: relative; + width: 20000em; +} + +.scrollableContainer .scrollableItems > div { + border-right: 1px solid rgba(192, 192, 192, 1); + float: left; + width: 250px; +} + +.scrollableContainer { + font-size: 90%; +} + +.scrollableContainer > div:first-child ul { + margin: 0; + padding: 0; +} + +.scrollableContainer > div:first-child li { + border-top: 1px solid rgba(192, 192, 192, 1); + cursor: pointer; + padding: 7px; +} + +.scrollableContainer > div:first-child li:first-child { + border-top-width: 0; +} + +.scrollableContainer > div:first-child p { + padding: 0 1px; +} + +/* ToDo: User Notification Details */ + +.userNotificationDetails { + padding: 7px; + width: 236px; +} + +.userNotificationDetails header { + margin-bottom: 7px; + display: table; + width: 100%; +} + +.userNotificationDetails .row { + display: table-row; +} + +.userNotificationDetails .row div { + text-align: center; + display: table-cell; + vertical-align: middle; +} + +.userNotificationDetails .row div:first-child { + width: 64px; +} + +.userNotificationDetails .row div:last-child { + padding-left: 7px; +} + +.userNotificationDetails .avatar img { + height: 64px; + width: 64px; +} + +.userNotificationDetails h1 { + font-size: 110%; +} + +.userNotificationDetails section { + border-top: 1px solid rgba(192, 192, 192, 1); + padding-top: 7px; +} + +.userNotificationDetails nav { + text-align: center; + border-top: 1px solid rgba(192, 192, 192, 1); + margin-top: 7px; + padding-top: 7px; +} + +.userNotificationDetails ul { + list-style-type: none; + display: inline-block; +} + +.userNotificationDetails li { + cursor: pointer; + border: 1px solid rgba(192, 192, 192, 1) !important; + padding: 3px; + display: inline-block; +} + +/* User Notification Details Loading */ + +#userNotificationDetailsLoading { + background-color: rgba(255, 255, 255, .5); + background-image: url('{../../icon/spinner1.svg'); + background-position: center center; + background-size: 24px; + background-repeat: no-repeat; + position: absolute; +} + + + +/* ############## Profile Comments ############## */ + +/* Globals */ + +.wcf-commentList .wcf-containerContent { + position: relative; +} + +.wcf-commentList .wcf-containerContent small { + font-size: 85%; + color: rgba(192, 192, 192, 1); + margin-top: 3px; +} + +/* Comment List */ + +.wcf-commentList > .wcf-container { + border-top: 1px solid rgba(204, 204, 204, 1); + padding: 7px; +} + +.wcf-commentList > .wcf-container:first-child { + border-top-width: 0; +} + +/* Comment Add */ + +.wcf-commentAdd .wcf-containerIcon { + margin-left: 2em; +} + +.wcf-commentResponseAdd { + border-top: 1px solid rgba(204, 204, 204, 1); + background-color: rgba(0, 0, 0, .015); + margin-top: 7px; + padding: 7px; +} + +.wcf-commentResponseAdd .wcf-containerIcon { + margin-left: 10px; +} + + + +/* Comment Response List */ + +.wcf-commentResponseList { + margin-top: 7px; +} + +.wcf-commentResponseAdd ~ .wcf-commentResponseList { + margin-top: 0; +} + +.wcf-commentResponseList > .wcf-container, +.wcf-commentResponseList > div > .wcf-container { + border-top: 1px solid rgba(204, 204, 204, 1); + background-color: rgba(0, 0, 0, .015); +} + +.wcf-commentResponseList > .wcf-container:nth-child(2n+1) { + /* Auto-colorer for every 2nd row */ + background-color: rgba(0, 0, 0, .0); +} + + + +/* Comment Options */ + +.wcf-commentContent > div > .wcf-commentOptions, +.wcf-commentResponseList > li .wcf-commentOptions { + font-size: 85%; + display: block; + position: absolute; + top: 2px; + right: 2px; +} + +.wcf-commentContent > div > .wcf-commentOptions > li, +.wcf-commentResponseList > li .wcf-commentOptions > li { + float: left; + opacity: 0; + + -webkit-transition: opacity .1s linear; + -moz-transition: opacity .1s linear; + -ms-transition: opacity .1s linear; + -o-transition: opacity .1s linear; + transition: opacity .1s linear; +} + +.wcf-commentContent > div:hover > .wcf-commentOptions > li, +.wcf-commentResponseList > li:hover .wcf-commentOptions > li { + opacity: 1; +} + +.wcf-commentContent > div > .wcf-commentOptions > li a, +.wcf-commentResponseList > li .wcf-commentOptions li a { + color: rgba(153, 153, 153, 1); + cursor: pointer; + display: inline-block; + padding: 5px 10px; +} + + + +/* Toggle Comments Links */ + +.wcf-commentResponsePrevious, +.wcf-commentResponseRecent { + width: 100%; + text-align: center; + margin-left: auto; + margin-right: auto; +} + +.wcf-commentResponsePrevious a, +.wcf-commentResponseRecent a { + white-space: nowrap; + cursor: pointer; + border-radius: 3px; + padding: 0 13px; + display: inline-block; + width: 15%; + min-width: 150px; +} + + + +/* ############## Members List ############## */ + +/* Globals */ + +.wcf-userList { + /* none */ +} + +.wcf-userList > li { + +} + +.wcf-userList > li:not(:only-child) { + margin-left: -1px !important; +} + +/* Long/Short */ + +@media screen and (max-width: 1023px) { + + .wcf-userList > li { + padding: 0 !important; + width: 100%; + } + + .wcf-userList > li > div { + border-width: 0 !important; + height: auto !important; + box-shadow: none; + } + +} + +@media screen and (min-width: 1024px) { + + .wcf-userList > li { + border-width: 0; + background-color: transparent; + float: left; + width: 50%; + min-width: 300px; + } + +} + +@media screen and (min-width: 1600px) { + + .wcf-userList > li { + border-width: 0; + background-color: transparent; + float: left; + width: 33.3%; + } + +} + +@media screen and (min-width: 2000px) { + + .wcf-userList > li { + border-width: 0; + background-color: transparent; + float: left; + width: 20%; + } + +} + +.wcf-userList > li > .wcf-container { + border-width: 1px; + border-style: @borderStyle; + border-color: @borderColor11; + height: 80px; + padding: 7px; +} + +.wcf-userList > li > .wcf-container .wcf-userJoinDate { + font-size: 85%; + color: rgba(153, 153, 153, 1); + display: block; +} + +/* -- -- -- -- -- EOF -- -- -- -- -- */ diff --git a/wcfsetup/install/files/style/wcf.less b/wcfsetup/install/files/style/wcf.less index 236a42caa8..dd3a3a88e7 100644 --- a/wcfsetup/install/files/style/wcf.less +++ b/wcfsetup/install/files/style/wcf.less @@ -2829,7 +2829,7 @@ input[type='button'], } .wcf-boxDecor { - background-color: rgba(253, 253, 253, 1); + background-color: @backColor10; } /* Headings */ @@ -2877,6 +2877,63 @@ input[type='button'], +/* ############## List Box ############## */ + +/* Globals */ + +.wcf-listBox { + line-height: 1.5; + border-width: 1px 0; + border-style: @borderStyle; + border-color: @borderColor11; + background-color: @backColor10; + margin-top: -1px !important; + box-sizing: border-box; +} + +.wcf-listBox:first-child { + border-top-width: 0; +} + +.wcf-listBox:last-child { + border-bottom-width: 0; +} + +.wcf-listBox:nth-child(2n+1) { + /* auto-colorer for every 2nd row */ + background-color: transparent; +} + +.wcf-listBox:hover { + background-color: darken(@backColor10, 2%); +} + +/* List Box Contents */ + +.wcf-listBox > .wcf-container { + margin-top: 0; + padding: 7px; +} + +.wcf-listBox .wcf-username { + font-size: 120%; + display: inline; +} + +.wcf-listBox time { + font-size: 85%; + color: rgba(153, 153, 153, 1); + display: inline; +} + +.wcf-listBox .wcf-badge { + font-size: 85%; + padding: 0 5px; + display: inline-block; +} + + + /* ############## Tab Menu ############## */ /* Globals */ -- 2.20.1