Files
resourcespace/css/responsive/slim-style.css
2025-07-18 16:20:14 +07:00

1202 lines
25 KiB
CSS
Executable File

/* General */
.RSelectedButton {
background:#d2d2d2;
color: #4E4646 !important;
}
.ResponsiveButton {
height: 45px;
display: inline-block;
line-height: 45px;
text-align: center;
border-radius: 6px;
vertical-align: top;
margin: 0;
padding: 0;
box-shadow: 1px 1px 8px -2px;
}
.ui-layout-container {
min-width:0;
overflow:hidden;
}
.ResponsiveViewFullSite {
text-align: center;
margin-top: 10px;
}
#PreviewImageLarge {
width: 100%;
}
body {
-webkit-overflow-scrolling: touch;
}
@media(max-width:1200px) {
#UICenter{
height: auto !important;
}
#CollectionDiv {
position:fixed !important;
}
.ui-layout-resizer {
position:fixed !important;
}
.ui-layout-pane-center
{
left: 0 !important;
}
body{
height: 100% !important;
overflow-y: scroll !important;
}
.Question .stdwidth, .stdwidth, #iconpicker-question {
width:100%;
}
input[type="text"]#iconpicker-input {
width: calc(100% - 41px);
}
#iconpicker-container {
left: unset;
right: 16px;
}
#SearchBarContainer {
margin:0;
width:96%;
margin-left:2%;
margin-right:2%;
margin-top: 5px;
margin-bottom: 5px;
}
.SlimHeader #CentralSpaceContainer,#CentralSpaceContainer {
width:94%;
margin-left:3%;
margin-right:3%;
padding:0;
}
#Footer {
width:94%;
margin-left:3%;
margin-right:3%;
}
#CentralSpace a.HomePanel {
font-size:1em;
}
div#Header.SlimHeaderFixedPosition #HeaderNav1Click { margin-right: 30px; }
div#CentralSpaceContainer.SlimHeaderFixedPosition { margin-top: 16px; }
div#SearchBox.SlimHeaderFixedPosition { margin-top: 46px; }
.ui-layout-west { display:none; }
}
/* General Forms */
@media(max-width:1100px) {
.Question label {
width:100%;
}
.Question .stwidth, .stdwidth {
padding:5px;
font-size:1em;
border-radius:5px;
}
input[type=checkbox] {
-ms-transform: scale(1.5); /* IE */
-moz-transform: scale(1.5); /* FF */
-webkit-transform: scale(1.5); /* Safari and Chrome */
-o-transform: scale(1.5); /* Opera */
height: 18px;
}
input[type="radio"] {
height:auto;
vertical-align: top;
}
input {
display: inline-block;
height: 25px;
padding: 3px;
border-radius: 5px;
line-height: 1em;
font-size: 1em;
}
input[type="submit"], input[type="button"], button {
cursor:pointer;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover {
background: #d2d2d2;
box-shadow: none;
}
.Inline input {
margin:0;
}
#CentralSpace .Question select {
margin: 3px 0;
font-size: 1em;
border-radius: 5px;
}
#custom_access{
padding:5px;
}
.verticalcheckboxes, .editcheckboxes, .checkboxes, .radioblock {
padding-left:0;
margin-top:1px;
}
.BasicsBox .Question {
overflow-x:auto;
}
.customFieldset table {
white-space: nowrap;
}
#specific_user_groups {
padding-left: 0 !important;
}
table#ResourceDownloadOptions {
font-size: 80%;
}
.RecordPanel .RecordDownloadSpace .DownloadButton {
min-width: 80px;
}
.RecordPanel .RecordDownloadSpace .DownloadFileSize {
font-size: 90%;
}
#login_box .Question.KeepLoggedIn {
margin-left: 3px;
}
.CommentFormBody {
width: 100%;
}
.CommentEntry,
.comment_form_container {
max-width: 600px;
width: auto;
}
.RecordBox {
margin: 20px 0 15px 0;
}
}
@media(max-width:900px) {
.RecordPanel.RecordPanelLarge #RecordDownloadTabContainer,
.RecordPanel .RecordDownloadSpace.RecordTools,
#RecordDownloadTabContainer {
width: 100%;
}
}
@media(max-width:700px) {
.BasicsBoxEdit .FormHelp {
margin: 0 0 10px 0;
}
.FormWide .Question .FormHelp {
margin: 0 0 10px 0;
}
.FormWide .Question .FormHelp .FormHelpInner {
width: 100%;
box-sizing: border-box;
margin-left: 0;
}
}
@media(max-width:600px) {
#RecordDownloadTabButtons .Tab {
display: inline-table;
width: 25%;
}
}
@media(max-width:525px) {
.FormWide .Question label{width: 100%}
.FormWide .Question .stdwidth, .FormWide .Question .tickset{width: 100%}
.CategoryBox {
width:100%;
}
#iconpicker-container {
left: 4px;
width: 100%;
}
}
/* Login Forms */
@media(max-width:750px) {
#AntiSpamImage {
margin-left: 0 !important;
}
.RecordPanel {
padding: 5px 5px 5px 5px;
}
#ResourceWorkflowTable {
text-align: center;
}
#ResourceWorkflowTable td {
float :left;
clear :left;
margin-left :0;
margin-right:0;
padding-left:0;
padding-right:0;
width: 100%;
}
#ResourceWorkflowTable input[type="submit"] {
padding: 3px 0;
margin: 0;
}
}
/* Header */
#HeaderResponsive {
text-align: center;
}
#HeaderImg {
max-width:320px;
clear:both;
display:inline-block;
}
.ResponsiveHeaderButton {
width: 48%;
}
#HeaderButtons {
display:none;
}
#ButtonHolder {
display: flex;
flex-grow: 1;
justify-content: flex-end;
margin-bottom: 10px;
}
@media(max-width:1200px) {
#Header {
min-height: 47px;
height: auto !important;
}
#HeaderButtons {
display: block !important;
vertical-align: top;
}
#HeaderNav1Click {
margin-right: 5px;
min-width: 30px;
}
#HeaderNav2Click {
margin-right: 5px;
min-width: 30px;
}
.ResponsiveNav1Username {
display:none !important;
}
#Header #HeaderNav1 li {
border:none;
}
#HeaderNav1 {
display:none;
position: static;
margin:0;
height: auto !important;
float: none;
clear: both;
text-align: right;
}
#HeaderNav2 {
display:none;
position: static;
margin:0;
height: auto !important;
float: none;
width: 100%;
clear: both;
text-align: right;
padding-left: 0;
padding-top: 10px;
}
#Header .HorizontalNav ul li {
display: inline-block;
padding: 0 5px;
border:0;
float: left;
}
#Header .HorizontalNav ul li a,
.SlimHeader #Header.slimheader_darken .HorizontalNav ul li a:link,
.SlimHeader #Header.slimheader_darken .HorizontalNav ul li a:active,
.SlimHeader #Header.slimheader_darken .HorizontalNav ul li a:hover,
.SlimHeader #Header.slimheader_darken .HorizontalNav ul li a:visited{
display:inline-block;
text-align: center;
background: #ffffff;
border: 1px solid white;
height: 45px;
line-height: 45px;
min-width:95px;
padding:0 5px;
border-radius:6px;
margin-bottom:5px;
}
#Header.HeaderMenu {
height:auto;
}
.HeaderMenu #HeaderImg {
max-height:40px;
}
#HeaderImg {
max-height:47px;
}
#Header.slimheader_darken a:link, #Header.slimheader_darken a:visited, #Header.slimheader_darken a:active {
color: #565656;
}
#CentralSpaceContainer{
padding-left: 0;
}
#HeaderNav1 li a,
#HeaderNav2 li a {
color: #3a3a3a;
opacity: 1;
background-color: #ffffff;
}
#Header .HorizontalNav ul li.UploadButton a {
background: #1378BF;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
color: #ffffff;
border: #1378BF;
}
.Question .customFieldLabel {
max-width: 600px;
}
}
@media(max-width:700px) {
.headerlink {
display:none;
}
.clearResponsiveBackground {
background:none!important;
}
}
@media(max-width:640px) {
#HeaderButtons .rbText{
display:none;
}
.ResponsiveHeaderButton {
width: 50px;
}
#HeaderImg {
max-width:200px;
height:auto;
max-height:47px;
}
}
@media(max-width:515px) {
#Header {
padding:5px 5px;
}
#HeaderButtons {
margin:0;
}
.ResponsiveHeaderButton {
margin-left:5px;
}
#HeaderNav1 li a,
#HeaderNav2 li a {
width: 96vw;
padding:0 !important;
text-align: center;
}
#HeaderNav1 ul,
#HeaderNav2 ul {
text-align: center;
}
#HeaderImg {
margin-left: 10px;
}
#HeaderNav1 li.HeaderLink.UploadButton {
padding-top: 10px;
}
}
@media(max-width:384px) {
#HeaderImg {
max-width: 160px;
margin-top: 5px;
margin-right: 250px;
height:auto;
}
}
@media(min-width:1201px) {
#HeaderNav1, #HeaderNav2 {
display:block !important;
}
}
/* Simple Search */
#simplesearchbuttons #Rssearchexpand {
display:none!important;
}
#SearchBox #ssearchbox:focus {
outline:none;
}
@media(max-width:1100px) {
.ResponsiveSimpleSearch {
text-align: left;
display: inline-block;
margin: 10px;
}
#SearchBox {
float:none;
display:inline-block;
width:100%;
margin:0;
}
#searchbutton, #ssearchbox {
margin:0;
}
#SearchBoxPanel {
width: auto;
text-align: center;
}
#SearchBoxPanel .ui-widget {
width: 250px;
margin-top: 10px;
}
#Rssearchexpand {
width:122px;
}
.ResponsiveSimpleSearch .searchbutton {
display: inline-block;
margin: 5px !important;
height: 35px;
width: 85px;
}
.ResponsiveSimpleSearch .tick {
display:inline-block;
margin-top:3px;
}
.ResponsiveSimpleSearch #ssearchbox {
display: inline-block;
margin: 5px;
height: 25px;
padding:3px;
border-radius: 5px;
line-height:1em;
font-size:1em;
}
#CentralSpaceContainer {
padding:0;
}
#SearchBarContainer br {
display:none;
}
#SearchBarContainer a {
font-size:1em;
}
.ResponsiveSimpleSearch p {
margin: 10px 0;
}
.ResponsiveSimpleSearch .StarRatings {
text-align: center;
display: inline-block;
width: 130px;
}
#CentralSpaceResources .ResourcePanel {
width: 150px;
margin: 0 7px 7px 0;
}
#CentralSpaceResources .ResourcePanel.ResourcePanelLarge {
width: 320px;
margin: 0 14px 14px 0;
}
/* Show Responsive Bar */
#SearchBoxPanel input, #SearchBoxPanel label, #SearchBoxPanel h2, #SearchBoxPanel .SearchItem, #SearchBoxPanel .StarRatings, #SearchBoxPanel #searchbarrt, #SearchBoxPanel p {
display:none;
}
#SearchBoxPanel #ssearchbox, #SearchBoxPanel #simplesearchbuttons, #SearchBoxPanel #Rssearchexpand {
display:inline-block!important;
}
/* Show Full Bar when clicked */
#SearchBoxPanel .ResponsiveSimpleSearch h2, #SearchBoxPanel .ResponsiveSimpleSearch .SearchItem, #SearchBoxPanel .ResponsiveSimpleSearch #searchbarrt {
display:block;
}
#SearchBoxPanel .ResponsiveSimpleSearch input, #SearchBoxPanel .ResponsiveSimpleSearch label, #SearchBoxPanel .ResponsiveSimpleSearch .StarRatings, #SearchBoxPanel .ResponsiveSimpleSearch p{
display:inline-block;
}
/* LoginBoxPanel*/
#SearchBoxPanel.LoginBoxPanel input, #SearchBoxPanel.LoginBoxPanel .SearchItem, #SearchBoxPanel.LoginBoxPanel p {
display:inline-block;
}
#SearchBoxPanel.LoginBoxPanel input {
margin-left:15px;
}
.LoginBoxPanel {
margin-top:8px;
}
/* Metadata fields */
.SearchItem .SearchWidth, .SearchItem .SearchWidthHalf {
float: right;
clear: right;
margin: 0 8px 4px 0;
}
#searchspace {
padding: 0;
width: 90%;
margin-left: auto;
margin-right: auto;
}
#searchspace .SearchItem, #searchspace input{
clear: both;
width: 100%;
float: left;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
margin-bottom: 5px;
}
.search-icon, .search-icon:hover, .search-icon:active {
display: none;
}
/* Hide Browse Bar */
#BrowseBar, .BrowseTab {
display: none !important;
}
}
@media(max-width:600px) {
.ResponsiveSimpleSearch .StarRatings {
width:100%;
}
}
@media(max-width:400px) {
.ImageStrip {
height: auto;
width: 100%;
}
}
@media(max-width:370px) {
.ResponsiveSimpleSearch .SearchWidthHalf {
clear:right;
width: 46% !important;
}
.ResponsiveSimpleSearch .SearchWidthHalf br {
display:block;
}
}
/* Footer */
@media(max-width:1200px) {
#FooterNavLeft {
float:none;
text-align:center;
}
#FooterNavRightBottom {
clear: right;
text-align: center;
display: block;
float:none;
}
#FooterNavRight {
text-align: center;
float: none;
}
#Header {
position: relative !important;
height: auto !important;
}
}
@media(max-width:1100px) {
#FooterThemes img {
width:20px;
height:20px;
}
#SearchBarContainer {
position: relative !important;
height: auto !important;
width: 100% !important;
top:0 !important;
}
#SearchBarContainer.FullSearch {
max-height: calc(100% - 60px);
min-height: calc(100% - 60px);
}
#UICenter {
position: relative !important;
width: 98% !important;
margin-top: 5px !important;
top:0 !important;
margin-left: 1% !important;
margin-right: 1% !important;
}
}
@media(max-width:390px) {
#FooterLanguages {
margin:0;
width:100%;
display:inline-block;
margin-top: 10px;
}
}
/* Central & Home */
@media(max-width:1000px) {
#HomeSiteText {
width: 50%;
max-width: 100%;
}
}
@media(max-width:819px) {
#HomeSiteText {
width: 100%;
margin-left: 0.5%;
max-width: 99%;
padding:0;
}
#HomePanelContainer {
float:none;
margin-left:auto;
margin-right:auto;
clear:both;
width:auto;
}
}
@media(max-width:580px) {
.HomePanel {
width:48%;
margin:1%;
display: block;
}
#themeselect {
width:100%;
}
}
@media(max-width:559px) {
#CentralSpace {
padding:0;
}
.BasicsBox {
margin:0;
}
}
@media(max-width:545px) {
.HomePanel {
width: 250px;
margin-left: auto;
margin-right: auto;
float: none;
height: 145px;
max-width: 250px;
}
.HomePanelIN {
min-height: 145px;
max-height: 180px;
height:auto;
}
}
/* Dash */
@media(max-width:800px) {
#HomePanelContainer {
clear: both;
}
}
/* News */
@media(max-width:1100px) {
#NewsBox {
width: auto;
height: auto;
float: none;
margin: 5px 0 0 0;
padding: 15px;
min-height:0;
}
}
/* Search Results */
@media(max-width:1500px) {
.BottomInpageNavRight .TopInpageNavRight {
position:relative;
}
.BottomInpageNavRight {
clear:left;
width: 100%;
float: none;
text-align: center;
}
}
@media(max-width:1200px) {
.BottomInpageNavRight {
margin-top:10px;
}
.BottomInpageNavLeft {
float:none;
}
}
@media(max-width:1100px) {
.BottomInpageKey {
display:none;
}
.ResourcePanelInfo {
text-align:center;
}
.BottomInpageNav .InpageNavLeftBlock {
width:auto;
}
.TopInpageNavRight {
margin-top:1px;
}
.ResourcePanel .ImageWrapper {
margin-top: 0;
}
}
@media(max-width:700px) {
.ResourcePanelShell .ResourcePanel {
display:inline-block;
}
.ResourcePanelShell {
padding: 0;
float: none;
display: inline-block;
margin: 0;
width: 48%;
text-align: center;
}
.TopInpageNavLeft {
padding: 0;
margin: 10px 0 0 0;
width:360px;
}
}
@media(max-width:680px) {
.TopInpageNavRight {
margin-right:0;
}
}
@media(max-width:650px) {
.TopInpageNav {
text-align:center;
}
.TopInpageNavLeft {
width:100%;
float:none;
}
.TopInpageNavRight {
clear:left;
position:relative;
width:100%;
height:30px;
}
.TopInpageNavRight br {
display:none;
}
}
@media(max-width:600px) {
#searchspace #ssearchbox {
margin-top:10px;
display:block;
}
#Rssearchexpand {
margin-right:0;
}
#CentralSpaceLogin {
margin: 0;
width: unset;
}
#login_box .Question .stdwidth,
.LoginHeaderImg {
max-width: 100%;
}
#CentralSpaceLogin #login_box {
padding: 15px;
}
#login_box .Question.HalfWidth,
#login_box #language,
#login_box #user_local_tz,
#login_box .Question label,
#login_box .QuestionSubmit input {
width: 100%;
}
#login_box .QuestionSubmit {
width: 100%;
padding: 0 0 10px 0;
}
}
@media(max-width:400px) {
.ResourcePanelShell {
width:90%;
}
.ResourcePanelShellLarge {
width:100%;
}
.ResourceAlignLarge {
width:100%;
height:auto;
}
.ResourceAlign {
height:auto;
}
.TopInpageNavRight {
margin-top:10px;
text-align:center;
}
}
@media(min-width:1601px) {
.InpageNavLeftBlock {
display:inline-block!important;
}
}
/* Resource Preview */
@media(max-width:1200px) {
.annotate-view-wrapper {
float: none;
}
.image-annotate-canvas {
float: none;
margin-left: auto;
margin-right: auto;
}
}
@media(max-width:1100px) {
.QuestionSubmit{
padding-bottom:150px;
}
#previewimage {
width:100%;
}
#RecordDownload {
width:100%;
}
#ResourceWorkflowActions {
width:100%;
}
.RecordPanel.RecordPanelLarge #ResourceDownloadOptions {
width: 100%;
}
.SlimHeader .RecordBox {
margin:0;
}
.RecordPanel .RecordDownload table {
width:100%;
}
.RecordDownloadSpace ul a {
display: block;
font-size: 1em;
line-height: 30px;
}
.RecordPanel .RecordDownloadSpace ul li {
float:none;
display:inline-block;
}
.RecordHeader .backtoresults text {
display:none;
}
.RecordHeader .backtoresults a {
display: inline-block;
font-size: 1em;
float: none;
}
.RecordHeader h1 {
text-align:center;
margin: 5px 0 0 0;
}
.backtoresults {
float:none;
width:100%;
text-align:center;
}
#previewimagewrapper {
float: none;
text-align: center;
width: auto;
margin: 10px auto;
min-width: unset;
}
#previewimagewrapper .enterLink {
display:inline-block;
}
.annotate-view-preview-links {
float:left;
padding: 10px;
}
.AlternativeFileText {
max-width: 380px;
}
}
@media(max-width:400px) {
.RecordPanel .RecordDownloadSpace ul li {
display: block;
}
.backtoresults a {
width:100%;
line-height: 40px;
margin-top: 5px;
box-shadow: #CBCBCB 1px 1px 6px;
}
.RecordHeader .backtoresults a.upLink,
.RecordHeader .backtoresults a.nextLink {
padding-left:0;
margin-left:0;
border-left: none;
}
}
/* My Collections */
@media(max-width:700px) {
.BottomInpageNav .HorizontalWhiteNav span {
font-size: 1em;
line-height: 30px;
}
.CollectionTitleLinks a {
margin: 5px 6px;
display: inline-block;
}
}
/* Themes */
@media(max-width:800px) {
.RecordPanel .tools {
display:none;
}
}
/* Manage Collections Form */
#collectionform .collectionin {
text-align:center;
}
@media(max-width:800px) {
#collectionform .Listview {
overflow:initial;
}
#collectionform .tools {
display:none;
}
}
@media(max-width:700px) {
#collectionform .fullname {
display:none;
}
#collectionform .ref{
display:none;
}
#collectionform .created{
display:none;
}
#collectionform .access{
display:none;
}
#collectionform .collectionin{
display:none;
}
}
/* Team Centre */
@media(max-width:1100px) {
.VerticalNav li a{
font-size:1em;
}
#CentralSpaceContainer .iframe {
top:auto!important;
width:50%!important;
}
iframe.AdminRight {
left: 50%!important;
}
.Listview {
margin:0;
overflow-x: auto;
}
#submissionResponse {padding-left: 20px;}
}
/* Geographic Search */
@media(max-width:1100px) {
#GeoDragMode {
margin: 0 0 20px 0;
}
}
@media(max-width:750px) {
#map_canvas {
height:300px!important;
}
}
/* Collection Bar */
.rotate {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively */
}
@media (max-width:900px) {
div.QuestionSubmit{
padding-bottom:0px;
}
#cover {
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: fixed;
z-index: 10;
display: none;
}
.ui-layout-resizer.ui-layout-resizer-south.ui-layout-resizer-open.ui-layout-resizer-south-open,
.ui-layout-resizer.ui-layout-resizer-east.ui-layout-resizer-open.ui-layout-resizer-east-open{
display: none !important;
}
#responsive_collection_toggle {
height: 160px;
width: 40px;
position: fixed;
top: 160px;
right: 0;
z-index: 999;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#responsive_collection_toggle > a {
height: 40px;
width: 160px;
display: block;
position: relative;
top: 60px;
left: -70px;
text-decoration: none;
font-size: 1.3em;
}
.slide_btn {
right: calc(75% - 5px) !important;
}
#CollectionDiv {
position: fixed;
height: 100% !important;
width: 75% !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
bottom: initial !important;
z-index: 11 !important;
}
#CollectionMenu {
border-right: initial;
width: 97%;
left:3%;
position:relative;
}
#CollectionSpace {
top: 0;
position: relative;
left: 3%;
width: 97%;
clear: both;
}
.CollectionPanelInfo {
margin-left: 10px;
}
.CollectionPanelShell {
margin-top: 20px;
}
#CollectionDiv #toggleThumbsLink {
display:none;
}
}
/* VideoJS */
@media (max-width:600px) {
.video-js {
width: 80vw;
height: 80vw;
}
}
/* Advanced search */
@media (max-width:600px) {
#CentralSpace .SearchWidth {
width: 100%;
}
#CentralSpace .SplitSearch {
clear: left;
margin-left: 0;
margin-right: 0;
margin-top: 3px;
width: 100%;
}
}
/* Edit page preview */
@media (max-width: 1366px) {
.BasicsBoxEdit {
grid-template-columns: 1fr 200px;
}
#preview {
max-width: 200px;
}
.BasicsBoxEdit .QuestionSubmit.QuestionSticky,
.BasicsBoxEdit .RecordHeader {
width: calc(100% + 200px);
}
}
@media (max-width: 1280px) {
.BasicsBoxEdit .Question .stdwidth,
.BasicsBoxEdit .stdwidth,
.BasicsBoxEdit .dynamickeywords,
.BasicsBox .CategoryBox {
width: 380px;
}
.FormHelpInner {
width: 368px;
}
}
@media (max-width: 850px) {
.BasicsBoxEdit {
display: block;
}
.Question.QuestionStickyRight {
height: auto;
border-left: none;
box-shadow: none;
padding-left: 0.5em;
}
.BasicsBoxEdit .QuestionSubmit.QuestionSticky,
.BasicsBoxEdit .RecordHeader {
width: 100%;
}
}
@media (max-width: 850px) {
.AlternativeFileImage, .AlternativeFileText {
max-width: 150px;
}
}
@media (max-width: 1200px) {
#config-image-preview-label{
height: auto;
}
}
@media(max-width:1235px) {
#previewimagewrapper {
min-width: 100%;
}
#previewimagewrapper .nopreview {
width: 100%;
margin-top: 0;
}
}